:root{
  --bg:#F6F7FA;
  --surface:#FFFFFF;
  --surface-2:#FBFBFD;
  --ink:#12161C;
  --ink-dim:#2A2F36;
  --ink-faint:#3D4450;
  --border:#E2E5EA;
  --border-soft:#EBEDF1;
  --accent:#0E7C86;
  --accent-ink:#075C64;
  --accent-soft:#E4F3F2;
  --good:#2E7D5B;
  --good-soft:#E3F3EA;
  --warn:#B4770E;
  --warn-soft:#FBF0DC;
  --crit:#C1443D;
  --crit-soft:#FBE7E5;
  --shadow: 0 1px 2px rgba(18,22,28,.04), 0 8px 24px -12px rgba(18,22,28,.10);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1116; --surface:#171B21; --surface-2:#12151A;
    --ink:#E8EBEF; --ink-dim:#D3D8DE; --ink-faint:#B8C0CA;
    --border:#262B33; --border-soft:#20242B;
    --accent:#3FB8B0; --accent-ink:#7FD4CD; --accent-soft:#133331;
    --good:#4CAF7D; --good-soft:#123326;
    --warn:#D69A3B; --warn-soft:#332707;
    --crit:#E2695F; --crit-soft:#331612;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1116; --surface:#171B21; --surface-2:#12151A;
  --ink:#E8EBEF; --ink-dim:#D3D8DE; --ink-faint:#B8C0CA;
  --border:#262B33; --border-soft:#20242B;
  --accent:#3FB8B0; --accent-ink:#7FD4CD; --accent-soft:#133331;
  --good:#4CAF7D; --good-soft:#123326;
  --warn:#D69A3B; --warn-soft:#332707;
  --crit:#E2695F; --crit-soft:#331612;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg:#F6F7FA; --surface:#FFFFFF; --surface-2:#FBFBFD;
  --ink:#12161C; --ink-dim:#2A2F36; --ink-faint:#3D4450;
  --border:#E2E5EA; --border-soft:#EBEDF1;
  --accent:#0E7C86; --accent-ink:#075C64; --accent-soft:#E4F3F2;
  --good:#2E7D5B; --good-soft:#E3F3EA;
  --warn:#B4770E; --warn-soft:#FBF0DC;
  --crit:#C1443D; --crit-soft:#FBE7E5;
  --shadow: 0 1px 2px rgba(18,22,28,.04), 0 8px 24px -12px rgba(18,22,28,.10);
  color-scheme: light;
}

*{box-sizing:border-box;}
html,body{margin:0;}
body{
  font-family:"Segoe UI","Leelawadee UI","Noto Sans Thai",-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  font-size:17px;
  line-height:1.6;
}
.app{
  min-height:100vh;
  display:grid;
  grid-template-columns:248px 1fr;
}
.mono{font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,"Courier New",monospace; font-variant-numeric:tabular-nums;}
h1,h2,h3,h4{text-wrap:balance; margin:0; font-size:20px;}
button{font-family:inherit; font-size:inherit;}
a{color:var(--accent-ink);}
label, input, select, textarea, table, .btn, .pill, .hint{font-size:16px;}

/* ---------- Sidebar ---------- */
.sidebar{
  border-right:1px solid var(--border);
  background:var(--surface-2);
  padding:20px 14px;
  display:flex; flex-direction:column; gap:20px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{display:flex; align-items:center; gap:9px; padding:2px 8px; text-decoration:none; color:inherit;}
.brand-mark{
  width:26px; height:26px; border-radius:7px;
  background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.brand-mark svg{width:15px; height:15px;}
.brand-name{font-weight:700; font-size:18px; letter-spacing:.1px;}
.brand-sub{font-size:16px; color:var(--ink-faint); letter-spacing:.4px; text-transform:uppercase; margin-top:1px;}

.site-switch{padding:0 4px;}
.site-switch label{display:block; font-size:16px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; font-weight:600;}
.site-select-wrap{position:relative;}
.site-select-wrap svg.chev{position:absolute; right:10px; top:50%; transform:translateY(-50%); width:14px; height:14px; color:var(--ink-faint); pointer-events:none;}
select.site-select{
  width:100%; appearance:none; background:var(--surface); color:var(--ink);
  border:1px solid var(--border); border-radius:9px; padding:9px 30px 9px 10px;
  font-size:16px; font-weight:600; cursor:pointer;
}
select.site-select:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}

.nav-group{display:flex; flex-direction:column; gap:2px;}
.nav-label{font-size:16px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.5px; font-weight:700; padding:6px 10px 2px;}
.nav-item{
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border-radius:8px; border:none; background:transparent;
  color:var(--ink-dim); text-align:left; cursor:pointer; width:100%;
  text-decoration:none; font-size:16px;
}
.nav-item svg{width:17px; height:17px; flex-shrink:0;}
.nav-item:hover{background:var(--border-soft); color:var(--ink);}
.nav-item:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}
.nav-item.active{background:var(--accent-soft); color:var(--accent-ink); font-weight:700;}
.nav-item .badge-dot{margin-left:auto; width:7px; height:7px; border-radius:50%; flex-shrink:0;}
.badge-dot.crit{background:var(--crit);}
.badge-dot.warn{background:var(--warn);}

.sidebar-foot{margin-top:auto; padding:10px; border-top:1px solid var(--border); display:flex; gap:9px; align-items:center;}
.avatar{width:32px; height:32px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0;}
.who{min-width:0;}
.who .name{font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.who .role{font-size:16px; color:var(--ink-faint);}

/* ---------- Main ---------- */
.main{min-width:0;}
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 28px; border-bottom:1px solid var(--border);
  background:var(--bg); position:sticky; top:0; z-index:5;
}
.topbar h1{font-size:20px; font-weight:700; letter-spacing:-.1px;}
.topbar .sub{font-size:16px; color:var(--ink-faint); margin-top:2px;}
.topbar-actions{display:flex; gap:8px; flex-shrink:0;}

.btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:8px; font-size:16px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--ink);
  cursor:pointer; white-space:nowrap; text-decoration:none;
}
.btn svg{width:14px; height:14px;}
.btn:hover{border-color:var(--ink-faint);}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
.btn.primary:hover{background:var(--accent-ink); border-color:var(--accent-ink);}
.btn.danger{color:var(--crit); border-color:var(--crit-soft);}
.btn.danger:hover{background:var(--crit-soft);}
.btn.sm{padding:6px 10px; font-size:16px;}
.btn[disabled]{opacity:.5; cursor:not-allowed;}

.content{padding:22px 28px 60px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);}
.card-pad{padding:18px 20px;}
.card-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px;}
.card-head h3{font-size:20px; font-weight:700;}
.card-head .meta{font-size:16px; color:var(--ink-faint);}

.grid{display:grid; gap:16px;}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:1.3fr 1fr;}
@media (max-width:1180px){ .grid.cols-4{grid-template-columns:repeat(2,1fr);} .grid.cols-2{grid-template-columns:1fr;} }
@media (max-width:640px){ .grid.cols-4{grid-template-columns:1fr;} .grid.cols-3{grid-template-columns:1fr;} }

.stat{padding:16px 18px; display:flex; flex-direction:column; gap:8px;}
.stat-top{display:flex; align-items:center; justify-content:space-between;}
.stat-icon{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent-ink); flex-shrink:0;}
.stat-icon svg{width:16px; height:16px;}
.stat-label{font-size:16px; color:var(--ink-faint); font-weight:600;}
.stat-value{font-size:26px; font-weight:700; letter-spacing:-.3px;}
.stat-delta{font-size:16px; font-weight:600; display:inline-flex; align-items:center; gap:3px; width:fit-content;}
.stat-delta.up{color:var(--good);}
.stat-delta.down{color:var(--crit);}
.stat-delta svg{width:11px; height:11px;}

.pill{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:99px; font-size:16px; font-weight:700;}
.pill.good{background:var(--good-soft); color:var(--good);}
.pill.warn{background:var(--warn-soft); color:var(--warn);}
.pill.crit{background:var(--crit-soft); color:var(--crit);}
.pill.neutral{background:var(--border-soft); color:var(--ink-dim);}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}

.ring-wrap{display:flex; align-items:center; gap:20px;}
.ring{width:104px; height:104px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; position:relative;}
.ring::before{content:""; position:absolute; inset:10px; border-radius:50%; background:var(--surface);}
.ring-inner{position:relative; text-align:center;}
.ring-inner .n{font-size:28px; font-weight:800; line-height:1;}
.ring-inner .lbl{font-size:16px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.4px; margin-top:2px;}
.ring-breakdown{display:flex; flex-direction:column; gap:7px; font-size:16px;}
.ring-breakdown .row{display:flex; align-items:center; gap:8px;}
.ring-breakdown .swatch{width:8px; height:8px; border-radius:2px; flex-shrink:0;}
.ring-breakdown .row b{margin-left:auto;}

.action-list{display:flex; flex-direction:column; gap:2px;}
.action-row{display:flex; align-items:flex-start; gap:11px; padding:11px 4px; border-bottom:1px solid var(--border-soft);}
.action-row:last-child{border-bottom:none;}
.sev-stripe{width:4px; align-self:stretch; border-radius:3px; flex-shrink:0; min-height:34px;}
.sev-stripe.crit{background:var(--crit);}
.sev-stripe.warn{background:var(--warn);}
.sev-stripe.good{background:var(--good);}
.action-row .txt{flex:1; min-width:0;}
.action-row .txt .t{font-weight:600; font-size:16px;}
.action-row .txt .d{font-size:16px; color:var(--ink-faint); margin-top:1px;}
.action-row a.go{font-size:16px; font-weight:700; color:var(--accent-ink); text-decoration:none; white-space:nowrap; padding-top:2px;}
.action-row a.go:hover{text-decoration:underline;}

.table-wrap{overflow-x:auto;}
table{width:100%; border-collapse:collapse; font-size:16px;}
th{text-align:left; font-size:16px; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-faint); font-weight:700; padding:0 10px 9px; border-bottom:1px solid var(--border); white-space:nowrap;}
td{padding:11px 10px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
tr:last-child td{border-bottom:none;}
td.num, th.num{text-align:right; font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace; font-variant-numeric:tabular-nums;}
.row-title{font-weight:600;}
.row-sub{font-size:16px; color:var(--ink-faint);}

.len-bar{position:relative; height:6px; border-radius:3px; background:var(--border-soft); width:120px; overflow:visible;}
.len-bar .zones{position:absolute; inset:0; border-radius:3px; overflow:hidden; display:flex;}
.len-bar .zones i{height:100%;}
.len-bar .marker{position:absolute; top:-2px; width:2px; height:10px; background:var(--ink); border-radius:1px;}
.len-cap{font-size:16px; color:var(--ink-faint); margin-top:3px;}

.sparkline{display:block;}

label.field-label{display:block; font-size:16px; font-weight:700; margin-bottom:5px;}
.hint{font-size:16px; color:var(--ink-faint); margin-top:5px;}
input[type=text], input[type=password], input[type=number], input[type=date], textarea, select.form-select{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 11px;
  font-size:16px; font-family:inherit; background:var(--surface); color:var(--ink); resize:vertical;
}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:1px;}
.field{margin-bottom:16px;}
.counter-row{display:flex; justify-content:space-between; align-items:center; margin-top:5px;}

.serp-preview{border:1px solid var(--border); border-radius:10px; padding:14px 16px; background:var(--surface-2);}
.serp-preview .url{font-size:16px; color:var(--good); font-family:ui-monospace,monospace;}
.serp-preview .title{color:#1a56db; font-size:18px; margin:3px 0 4px; font-weight:500;}
@media (prefers-color-scheme:dark){ .serp-preview .title{color:#8ab4f8;} }
:root[data-theme="dark"] .serp-preview .title{color:#8ab4f8;}
.serp-preview .desc{font-size:16px; color:var(--ink-dim); line-height:1.5;}

.codebox{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:14px 16px; font-family:ui-monospace,"Cascadia Code","SF Mono",Consolas,monospace; font-size:16px; line-height:1.7; color:var(--ink-dim); white-space:pre-wrap; overflow-x:auto;}
.codebox b{color:var(--ink); font-weight:600;}

.faq-item{border:1px solid var(--border); border-radius:10px; padding:13px 15px; margin-bottom:9px; display:flex; gap:12px; align-items:flex-start;}
.faq-item.draft{opacity:.55;}
.faq-item .q{font-weight:700; font-size:16px;}
.faq-item .a{font-size:16px; color:var(--ink-faint); margin-top:3px;}
.faq-item .icons{display:flex; gap:6px; margin-left:auto; flex-shrink:0;}
.icon-btn{width:28px; height:28px; border-radius:7px; border:1px solid var(--border); background:var(--surface); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink-dim);}
.icon-btn:hover{border-color:var(--ink-faint); color:var(--ink);}
.icon-btn svg{width:14px; height:14px;}

.bars{display:flex; flex-direction:column; gap:10px;}
.bar-row{display:flex; align-items:center; gap:10px; font-size:16px;}
.bar-row .name{width:110px; flex-shrink:0; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.bar-row .track{flex:1; height:8px; border-radius:4px; background:var(--border-soft); overflow:hidden;}
.bar-row .fill{height:100%; border-radius:4px; background:var(--accent);}
.bar-row .val{width:44px; text-align:right; font-family:ui-monospace,monospace; flex-shrink:0;}

.section-note{font-size:16px; color:var(--ink-dim); background:var(--accent-soft); border:1px solid var(--border); border-radius:10px; padding:11px 14px; margin-bottom:16px;}
.section-note b{color:var(--accent-ink);}

.stack{display:flex; flex-direction:column; gap:16px;}

.alert{border-radius:10px; padding:12px 14px; font-size:16px; margin-bottom:16px; border:1px solid transparent;}
.alert-danger{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-soft);}
.alert-success{background:var(--good-soft); color:var(--good); border-color:var(--good-soft);}
.alert ul{margin:0; padding-left:18px;}

.empty-state{text-align:center; padding:50px 20px; color:var(--ink-faint);}
.empty-state svg{width:40px; height:40px; margin-bottom:12px; opacity:.6;}
.empty-state h3{font-size:20px; color:var(--ink); margin-bottom:6px;}
.empty-state p{font-size:16px; max-width:360px; margin:0 auto 16px;}

@media (max-width:900px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:relative; height:auto; flex-direction:row; align-items:center; overflow-x:auto; padding:12px;}
  .sidebar .nav-group{flex-direction:row;}
  .sidebar-foot{display:none;}
  .site-switch{min-width:150px;}
}

/* ---------- Site switch footer link ---------- */
.site-switch-foot{display:flex; justify-content:flex-end; margin-top:6px;}
.link-btn{background:none; border:none; padding:0; font-size:16px; font-weight:700; color:var(--accent-ink); cursor:pointer; display:inline-flex; align-items:center; gap:4px; text-decoration:none;}
.link-btn:hover{text-decoration:underline;}
.link-btn svg{width:12px; height:12px;}

/* ---------- Notifications ---------- */
.notif-wrap{position:relative;}
.notif-bell{position:relative;}
.notif-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:99px; background:var(--crit); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center; line-height:1; border:2px solid var(--bg);
}
.notif-panel{
  display:none; position:absolute; top:calc(100% + 8px); right:0; width:360px; max-height:70vh;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow);
  z-index:30; flex-direction:column; overflow:hidden;
}
.notif-panel.open{display:flex;}
.notif-panel-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); flex-shrink:0;}
.notif-panel-head h4{font-size:18px; font-weight:700;}
.notif-list{overflow-y:auto; flex:1;}
.notif-empty{padding:28px 16px; text-align:center; font-size:16px; color:var(--ink-faint);}
.notif-item{display:flex; align-items:flex-start; gap:10px; padding:11px 14px; border-bottom:1px solid var(--border-soft);}
.notif-item:last-child{border-bottom:none;}
.notif-item-icon{width:16px; height:16px; flex-shrink:0; margin-top:1px;}
.notif-item-icon.critical{color:var(--crit);}
.notif-item-icon.warning{color:var(--warn);}
.notif-item-icon.info{color:var(--good);}
.notif-item .txt{flex:1; min-width:0;}
.notif-item .txt .t{font-weight:700; font-size:16px;}
.notif-item .txt .d{font-size:16px; color:var(--ink-dim); margin-top:2px; line-height:1.45;}
.notif-item .txt .meta{font-size:16px; color:var(--ink-faint); margin-top:4px;}
.notif-dismiss{background:none; border:none; padding:2px; cursor:pointer; color:var(--ink-faint); flex-shrink:0; border-radius:5px;}
.notif-dismiss:hover{color:var(--ink); background:var(--border-soft);}
.notif-dismiss svg{width:12px; height:12px; display:block;}
.notif-item.leaving{opacity:0; transform:translateX(6px); transition:opacity .15s, transform .15s;}

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,13,17,.5); backdrop-filter:blur(1px);
  display:none; align-items:flex-start; justify-content:center; padding:6vh 16px; z-index:50; overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);
  width:100%; max-width:640px; max-height:88vh; display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--border); flex-shrink:0;}
.modal-head h3{font-size:20px; font-weight:700;}
.modal-head .sub{font-size:16px; color:var(--ink-faint); margin-top:3px;}
.modal-close{width:30px; height:30px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--ink-dim); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;}
.modal-close:hover{color:var(--ink); border-color:var(--ink-faint);}
.modal-close svg{width:15px; height:15px;}
.modal-body{padding:18px 20px 20px; overflow-y:auto;}

.url-input-row{display:flex; gap:8px;}
.url-input-row input{flex:1;}
.paste-hint{display:flex; align-items:center; gap:6px; font-size:16px; color:var(--ink-faint); margin-top:6px;}
.paste-hint svg{width:13px; height:13px; flex-shrink:0;}

.managed-list{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.managed-row{display:flex; align-items:center; gap:10px; padding:9px 11px; border:1px solid var(--border); border-radius:9px;}
.managed-row .favicon{width:24px; height:24px; border-radius:6px; background:var(--accent-soft); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.managed-row .favicon svg{width:13px; height:13px;}
.managed-row .u{font-weight:600; font-size:16px;}
.managed-row .d{font-size:16px; color:var(--ink-faint);}
.managed-row .rm{margin-left:auto; flex-shrink:0;}

.modal-tabs{display:flex; gap:4px; margin-top:14px; border-bottom:1px solid var(--border);}
.modal-tab{background:none; border:none; padding:8px 4px; margin-right:14px; font-size:16px; font-weight:700; color:var(--ink-faint); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; text-decoration:none;}
.modal-tab.active{color:var(--accent-ink); border-bottom-color:var(--accent);}
.modal-pane{display:none; padding-top:14px;}
.modal-pane.active{display:block;}

.timeline{list-style:none; margin:0; padding:0;}
.timeline li{position:relative; padding-left:20px; padding-bottom:16px; border-left:2px solid var(--border-soft); margin-left:4px;}
.timeline li:last-child{border-left-color:transparent; padding-bottom:0;}
.timeline li::before{content:""; position:absolute; left:-6px; top:2px; width:10px; height:10px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--border-soft);}
.timeline .when{font-size:16px; color:var(--ink-faint); font-weight:700; text-transform:uppercase; letter-spacing:.3px;}
.timeline .what{font-size:16px; font-weight:600; margin-top:2px;}
.timeline .what .tag{font-weight:700; color:var(--accent-ink); font-size:16px; background:var(--accent-soft); border-radius:5px; padding:1px 6px; margin-left:6px; vertical-align:1px;}

/* ---------- Login page ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); padding:32px 28px;}
.login-card .brand{justify-content:center; margin-bottom:22px;}
.login-card h1{font-size:20px; text-align:center; margin-bottom:4px;}
.login-card .sub{font-size:16px; color:var(--ink-faint); text-align:center; margin-bottom:22px;}
.login-card .btn.primary{width:100%; justify-content:center; padding:10px 14px;}