/* SEOBuilder 運用コンソール（ダーク）。ai-sns.io app.css のトークンに準拠。 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --app-bg:#0a0b14;
  --s1:#11131f; --s2:#181b2a; --s3:#1f2333;
  --text:#e7eaf3; --muted:#a0a6b8; --dim:#6b7290;
  --bd:rgba(255,255,255,.08); --bd2:rgba(255,255,255,.14);
  --grad:linear-gradient(135deg,#7d56d6,#d6249f);
  --ok:#34d399; --warn:#fbbf24; --danger:#f87171; --info:#60a5fa; --brand:#a78bfa;
  --side-w:236px; --header-h:60px; --radius:14px;
  --font:'Inter','Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
body{margin:0; background:var(--app-bg); color:var(--text); font-family:var(--font); font-size:14.5px; line-height:1.7; -webkit-font-smoothing:antialiased}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{letter-spacing:-.02em; font-weight:700; margin:0 0 .5em; line-height:1.3}
h1{font-size:24px} h2{font-size:18px} h3{font-size:15.5px}
p{margin:0 0 1em}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
code{background:var(--s3); border:1px solid var(--bd); border-radius:5px; padding:.1em .38em; font-size:.87em}
pre{background:#080910; border:1px solid var(--bd); color:#cbd3e6; padding:16px 18px; border-radius:12px; overflow:auto; font-size:12.5px; line-height:1.6; max-height:520px}
pre code{background:none;border:0;padding:0}

/* ── レイアウト ───────────────────────────────────────── */
.shell{display:flex; min-height:100vh}
.side{width:var(--side-w); flex:none; background:var(--s1); border-right:1px solid var(--bd); position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column}
.side-brand{display:flex; align-items:center; gap:9px; padding:0 18px; height:var(--header-h); font-weight:800; letter-spacing:-.03em; color:var(--text); font-size:16px; border-bottom:1px solid var(--bd)}
.side-brand:hover{text-decoration:none}
.side-brand .mark{width:24px;height:24px;border-radius:7px;background:var(--grad);flex:none}
.side nav{padding:14px 10px; flex:1}
.side .grp{font-size:10.5px; letter-spacing:.1em; color:var(--dim); font-weight:700; padding:14px 10px 7px}
.side a.item{display:flex; align-items:center; gap:10px; padding:8.5px 11px; border-radius:9px; color:var(--muted); font-size:14px; font-weight:500}
.side a.item:hover{background:var(--s2); color:var(--text); text-decoration:none}
.side a.item.on{background:var(--s3); color:var(--text); font-weight:600}
.side a.item .ic{width:16px; text-align:center; opacity:.85; font-size:13px}
.side-foot{padding:14px 18px; border-top:1px solid var(--bd); font-size:11.5px; color:var(--dim)}
.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{height:var(--header-h); border-bottom:1px solid var(--bd); display:flex; align-items:center; gap:14px; padding:0 24px; background:rgba(10,11,20,.82); backdrop-filter:blur(10px); position:sticky; top:0; z-index:30}
.topbar h1{font-size:16px; margin:0; font-weight:600}
.topbar .right{margin-left:auto; display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted)}
.content{padding:26px 24px 60px; max-width:1240px; width:100%}

/* ── パーツ ───────────────────────────────────────────── */
.panel{background:var(--s1); border:1px solid var(--bd); border-radius:var(--radius); padding:20px; margin-bottom:20px}
.panel > h2{font-size:15px; margin-bottom:14px; display:flex; align-items:center; gap:9px}
.panel-head{display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap}
.panel-head h2{margin:0}
.panel-head .right{margin-left:auto}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:14px; margin-bottom:20px}
.kpi{background:var(--s1); border:1px solid var(--bd); border-radius:var(--radius); padding:16px 18px}
.kpi .n{font-size:27px; font-weight:800; letter-spacing:-.03em; line-height:1.15}
.kpi .k{font-size:12px; color:var(--dim); margin-top:4px; font-weight:500}
.kpi.ok .n{color:var(--ok)} .kpi.warn .n{color:var(--warn)} .kpi.danger .n{color:var(--danger)} .kpi.info .n{color:var(--info)}

.grid2{display:grid; grid-template-columns:1fr 1fr; gap:20px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}

.tbl{width:100%; border-collapse:collapse; font-size:13.5px}
.tbl th,.tbl td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--bd); vertical-align:top}
.tbl th{color:var(--dim); font-size:11.5px; font-weight:700; letter-spacing:.05em; white-space:nowrap}
.tbl tbody tr:hover{background:var(--s2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.mono{font-family:ui-monospace,monospace; font-size:12px; color:var(--muted)}
.scroll{overflow-x:auto}

.badge{display:inline-block; padding:2.5px 9px; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; border:1px solid transparent}
.b-published{background:rgba(52,211,153,.14); color:var(--ok); border-color:rgba(52,211,153,.3)}
.b-scheduled{background:rgba(96,165,250,.14); color:var(--info); border-color:rgba(96,165,250,.3)}
.b-queued{background:rgba(96,165,250,.12); color:var(--info); border-color:rgba(96,165,250,.26)}
.b-draft{background:rgba(251,191,36,.14); color:var(--warn); border-color:rgba(251,191,36,.3)}
.b-manual{background:rgba(167,139,250,.16); color:var(--brand); border-color:rgba(167,139,250,.32)}
.b-skipped{background:rgba(160,166,184,.12); color:var(--muted); border-color:var(--bd2)}
.b-failed{background:rgba(248,113,113,.14); color:var(--danger); border-color:rgba(248,113,113,.32)}
.b-neutral{background:var(--s3); color:var(--muted); border-color:var(--bd2)}

.btn{display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:10px; font-weight:600; font-size:13.5px; cursor:pointer; border:1px solid var(--bd2); background:var(--s3); color:var(--text); font-family:inherit; transition:.15s}
.btn:hover{background:var(--s2); text-decoration:none; border-color:rgba(255,255,255,.24)}
.btn-primary{background:var(--grad); border-color:transparent; color:#fff}
.btn-primary:hover{opacity:.9; background:var(--grad)}
.btn-sm{padding:6px 12px; font-size:12.5px; border-radius:8px}
.btn:disabled{opacity:.45; cursor:not-allowed}

label{display:block; font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px; letter-spacing:.02em}
input[type=text],input[type=search],select,textarea{
  width:100%; background:#080910; border:1px solid var(--bd2); color:var(--text);
  border-radius:10px; padding:10px 13px; font-family:inherit; font-size:13.5px;
}
textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; line-height:1.6; min-height:340px; resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand); outline-offset:-1px; border-color:transparent}
.field{margin-bottom:16px}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.row > *{flex:1; min-width:180px}
.row > .fit{flex:none; min-width:0}

.note{border:1px solid var(--bd2); border-left:3px solid var(--info); background:rgba(96,165,250,.07); border-radius:0 10px 10px 0; padding:13px 16px; font-size:13px; color:var(--muted); margin-bottom:18px}
.note.warn{border-left-color:var(--warn); background:rgba(251,191,36,.07)}
.note.danger{border-left-color:var(--danger); background:rgba(248,113,113,.07); color:#fca5a5}
.note strong{color:var(--text)}
.empty{text-align:center; padding:44px 20px; color:var(--dim); font-size:13.5px}

.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:12px}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:9px; height:9px; border-radius:3px; display:inline-block}

.matrix{font-size:12.5px}
.matrix td{text-align:center; padding:8px 6px}
.matrix td:first-child,.matrix th:first-child{text-align:left; white-space:nowrap}
.yes{color:var(--ok); font-weight:700} .no{color:var(--dim)}

.meter{height:8px; background:var(--s3); border-radius:999px; overflow:hidden; display:flex}
.meter i{display:block; height:100%}
.m-done{background:var(--ok)} .m-partial{background:var(--warn)} .m-planned{background:#3a4059}

@media (max-width:960px){ .grid2,.grid3{grid-template-columns:1fr} }
@media (max-width:820px){
  .side{position:fixed; left:0; top:0; transform:translateX(-100%); transition:.2s; z-index:60}
  .side.open{transform:none}
  .menu-btn{display:inline-flex!important}
  .content{padding:20px 16px 50px}
  .topbar{padding:0 16px}
}
.menu-btn{display:none; background:var(--s3); border:1px solid var(--bd2); color:var(--text); border-radius:9px; padding:7px 11px; cursor:pointer; font-size:14px}