/* コンテンツマーケティング総合ツール 管理画面スタイル(白ベース+青系アクセント) */
:root{
  --accent:#2b5797; --accent-dark:#1f3f6e; --bg:#f4f6f9; --card:#fff;
  --border:#dde3ea; --text:#222; --muted:#7a828c; --danger:#c0392b; --danger-dark:#96271b;
  --ok:#2e7d32; --warn:#b9770e; --wait:#5a6b7b; --run:#2b5797;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:14px; line-height:1.6;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ヘッダー・ナビ */
.topbar{display:flex; align-items:center; gap:16px; background:var(--accent); color:#fff; padding:10px 20px}
.topbar .brand a{color:#fff; font-weight:700; font-size:16px}
.topbar .site-switch{margin-left:auto}
.topbar select{padding:4px 8px; border-radius:4px; border:none}
.topbar .logout{color:#dbe4f3; font-size:13px}
.mainnav{display:flex; flex-wrap:wrap; gap:2px; background:var(--accent-dark); padding:0 12px}
.mainnav a{color:#cdd8ea; padding:10px 14px; font-size:13px}
.mainnav a:hover{background:rgba(255,255,255,.08); text-decoration:none}
.mainnav a.active{background:var(--bg); color:var(--accent); font-weight:700}

.content{max-width:1180px; margin:20px auto; padding:0 16px}
.foot{text-align:center; color:var(--muted); font-size:12px; padding:24px}

h1{font-size:20px; margin:0 0 16px}
h2{font-size:16px; margin:0 0 12px}
h3{font-size:14px; margin:0 0 8px}

/* カード */
.card{background:var(--card); border:1px solid var(--border); border-radius:8px; padding:16px 18px; margin-bottom:18px}
.warn-card{border-color:#e6c37a; background:#fff9ec}

/* テーブル */
.tbl{width:100%; border-collapse:collapse; font-size:13px}
.tbl th,.tbl td{border-bottom:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top}
.tbl thead th{background:#eef2f7; color:#42505e; font-weight:600; white-space:nowrap}
.tbl tr.cannibal{background:#fff4f2}
.tbl.kv th,.tbl.kv td{border:none; padding:4px 10px}
.tbl.kv th{width:130px; color:var(--muted)}
.nowrap{white-space:nowrap}
.ellip{max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.muted{color:var(--muted)}
.mono,textarea.mono,pre{font-family:"SFMono-Regular",Menlo,Consolas,monospace}

/* バッジ */
.badge{display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; color:#fff; white-space:nowrap}
.b-ok{background:var(--ok)} .b-err{background:var(--danger)} .b-warn{background:var(--warn)}
.b-wait{background:var(--wait)} .b-run{background:var(--run)} .b-muted{background:#98a2ad}

/* ボタン */
.btn{display:inline-block; padding:7px 14px; border-radius:5px; border:1px solid var(--border);
  background:#fff; color:var(--text); cursor:pointer; font-size:13px; font-family:inherit}
.btn:hover{background:#f0f3f7; text-decoration:none}
.btn-small{padding:4px 9px; font-size:12px}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-dark)}
.btn-danger{background:var(--danger); border-color:var(--danger); color:#fff}
.btn-danger:hover{background:var(--danger-dark)}

/* フォーム */
label{display:block; margin-bottom:10px; font-size:13px}
input[type=text],input[type=password],input[type=number],input[type=email],select,textarea{
  width:100%; padding:7px 9px; border:1px solid var(--border); border-radius:5px;
  font-family:inherit; font-size:13px; margin-top:3px; background:#fff}
textarea{resize:vertical}
label.chk,label.chk input{display:inline; width:auto; margin:0 6px 0 0}
.req{color:var(--danger)}
.stack label{margin-bottom:12px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 20px}
.grid2 .full{grid-column:1 / -1}
.row-actions{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.inline{display:inline}
.inline-form-row{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.inline-form-row label{margin:0}
.inline-form{display:inline-block}
.inline-form summary{list-style:none}
.inline-form[open]{display:block; position:relative}

/* タブ */
.tabs{display:flex; flex-wrap:wrap; gap:2px; margin-bottom:16px; border-bottom:2px solid var(--border)}
.tabs a{padding:8px 14px; color:var(--muted); font-size:13px; border-bottom:2px solid transparent; margin-bottom:-2px}
.tabs a:hover{text-decoration:none; color:var(--accent)}
.tabs a.active{color:var(--accent); border-bottom-color:var(--accent); font-weight:700}

/* フラッシュ */
.flash{padding:10px 14px; border-radius:6px; margin-bottom:14px; font-size:13px}
.flash-success{background:#e6f4e6; color:#215d24; border:1px solid #bfe0bf}
.flash-error{background:#fbeaea; color:#8f2419; border:1px solid #eebfb9}
.flash-info{background:#e9eff8; color:#284a7a; border:1px solid #c3d3ec}

/* ログ・根拠 */
pre.log{background:#f6f8fa; border:1px solid var(--border); border-radius:5px; padding:10px;
  overflow-x:auto; font-size:12px; max-height:420px; white-space:pre-wrap; word-break:break-word}
pre.log.err{background:#fbeaea; border-color:#eebfb9}
dl.evidence{display:grid; grid-template-columns:160px 1fr; gap:2px 12px; margin:0; font-size:12px}
dl.evidence dt{color:var(--muted); font-weight:600}
dl.evidence dd{margin:0}
dl.evidence pre{margin:0; background:#f6f8fa; padding:6px; border-radius:4px; overflow-x:auto}

/* 展開行 */
.exp-head{cursor:pointer}
.exp-head:hover{background:#f2f6fb}
.exp-toggle{width:20px; color:var(--muted)}
.exp-head.open .exp-toggle{transform:rotate(90deg)}
.diag{max-width:420px}

/* ログイン */
.login-body{display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--accent-dark)}
.login-box{background:#fff; padding:32px; border-radius:10px; width:320px}
.login-box h1{text-align:center}
.login-box .btn{width:100%; margin-top:6px}

@media(max-width:720px){
  .grid2{grid-template-columns:1fr}
  .ellip,.diag{max-width:180px}
  .content{padding:0 10px}
}