:root{
  --bg:#0a0e0f;
  --bg-soft:#0f1415;
  --surface:#151b1c;
  --surface-2:#1b2223;
  --surface-3:#222a2b;
  --surface-4:#293233;
  --text:#f4f7f5;
  --muted:#929c98;
  --muted-2:#65706c;
  --accent:#68ce38;
  --accent-2:#4daf24;
  --accent-soft:#20391b;
  --blue:#4aa7ef;
  --blue-soft:#172e3f;
  --amber:#e7b84d;
  --amber-soft:#3a3019;
  --red:#ef6b62;
  --red-soft:#3b2020;
  --purple:#9c7cf4;
  --purple-soft:#28213d;
  --line:rgba(255,255,255,.055);
  --shadow:0 22px 70px rgba(0,0,0,.28);
  --radius:12px;
  --rail:78px;
  --side:254px;
  --header:70px;
  --font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;border:0;outline:0}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(circle at 8% 8%,rgba(104,206,56,.11),transparent 28%),
    radial-gradient(circle at 92% 12%,rgba(74,167,239,.08),transparent 27%),
    var(--bg);
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
svg{display:block;flex:0 0 auto}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-thumb{background:#30393a;border-radius:var(--radius)}
::selection{background:rgba(104,206,56,.27)}

.app{
  width:100%;
  height:100dvh;
  display:grid;
  grid-template-columns:var(--rail) var(--side) minmax(0,1fr);
  grid-template-rows:var(--header) minmax(0,1fr);
}
.rail{
  grid-row:1/-1;
  background:rgba(13,18,19,.92);
  backdrop-filter:blur(24px);
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:12px 0;
  position:relative;
  z-index:30;
}
.brand{
  width:50px;height:50px;border-radius:var(--radius);
  background:linear-gradient(145deg,#7bdc49,#4dac24);
  display:grid;place-items:center;
  box-shadow:0 14px 30px rgba(71,161,31,.25);
  margin-bottom:16px;
}
.brand svg{width:25px;height:25px;color:#fff}
.rail-nav{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%}
.rail-bottom{margin-top:auto}
.rail-btn{
  width:52px;height:52px;border-radius:var(--radius);
  background:transparent;color:#6f7976;
  display:grid;place-items:center;position:relative;
}
.rail-btn svg{width:20px;height:20px;stroke-width:1.8}
.rail-btn:hover{background:var(--surface);color:#dce2df}
.rail-btn.active{background:var(--accent-soft);color:var(--accent)}
.rail-btn.active::before{
  content:"";position:absolute;left:-13px;width:4px;height:23px;
  border-radius:var(--radius);background:var(--accent)
}
.rail-badge{
  position:absolute;right:4px;top:4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:var(--radius);background:var(--red);color:#fff;
  font-size:10.5px;font-weight:900;display:grid;place-items:center
}
.header{
  grid-column:2/-1;
  display:flex;align-items:center;gap:14px;
  padding:0 18px;
  background:rgba(16,21,22,.86);
  backdrop-filter:blur(24px);
  position:relative;z-index:20
}
.header-context{display:flex;align-items:center;gap:12px;min-width:0}
.mobile-menu{display:none}
.page-icon{
  width:40px;height:40px;border-radius:var(--radius);
  background:var(--surface-2);color:var(--accent);
  display:grid;place-items:center
}
.page-icon svg{width:19px;height:19px}
.page-title{min-width:0}
.page-title h1{font-size:15px;margin:0 0 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-title p{font-size:11px;color:var(--muted);margin:0;white-space:nowrap}
.header-search{
  margin-left:auto;width:min(390px,33vw);height:42px;
  border-radius:var(--radius);background:var(--surface);
  display:grid;grid-template-columns:18px minmax(0,1fr) 30px;
  gap:9px;align-items:center;padding:0 8px 0 12px
}
.header-search>svg{width:17px;height:17px;color:var(--muted)}
.header-search input{width:100%;min-width:0;background:transparent;font-size:11px}
.header-search kbd{
  height:26px;padding:0 7px;border-radius:var(--radius);background:var(--surface-2);
  color:var(--muted);font-size:10.5px;display:grid;place-items:center
}
.header-actions{display:flex;align-items:center;gap:7px}
.header-btn{
  width:42px;height:42px;border-radius:var(--radius);
  background:var(--surface);color:var(--muted);
  display:grid;place-items:center;position:relative
}
.header-btn:hover{background:var(--surface-2);color:var(--text)}
.header-btn svg{width:18px;height:18px}
.header-avatar{
  width:42px;height:42px;border-radius:var(--radius);
  background:linear-gradient(145deg,#6ed13e,#3285bf);
  display:grid;place-items:center;font-size:11px;font-weight:900
}

.sidebar{
  grid-column:2;grid-row:2;
  min-height:0;
  background:rgba(15,20,21,.72);
  padding:15px 12px;
  overflow:auto;
}
.sidebar-group{margin-bottom:19px}
.sidebar-label{
  padding:0 10px 8px;font-size:10.5px;font-weight:900;
  letter-spacing:1.2px;text-transform:uppercase;color:#58635f
}
.side-btn{
  width:100%;min-height:43px;border-radius:var(--radius);
  background:transparent;color:var(--muted);
  display:flex;align-items:center;gap:10px;
  padding:0 11px;text-align:left;font-size:10px;font-weight:700;
  margin-bottom:3px;position:relative
}
.side-btn svg{width:17px;height:17px;stroke-width:1.8}
.side-btn:hover{background:var(--surface);color:var(--text)}
.side-btn.active{background:var(--surface-2);color:#fff}
.side-btn.active svg{color:var(--accent)}
.side-count{
  margin-left:auto;min-width:25px;height:22px;padding:0 7px;
  border-radius:var(--radius);background:var(--surface-3);
  display:grid;place-items:center;font-size:10.5px;color:var(--muted)
}
.side-btn.active .side-count{background:var(--accent-soft);color:var(--accent)}

.workspace{
  grid-column:3;grid-row:2;
  min-width:0;min-height:0;
  overflow:auto;
  padding:18px;
  position:relative
}
.view{display:none;animation:viewIn .24s ease}
.view.active{display:block}
@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.view-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  margin-bottom:16px
}
.eyebrow{
  font-size:10.5px;font-weight:900;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--accent)
}
.view-head h2{font-size:26px;letter-spacing:-.9px;margin:7px 0 6px}
.view-head p{font-size:10px;color:var(--muted);line-height:1.55;margin:0;max-width:670px}
.action-row{display:flex;gap:8px;flex-wrap:wrap}
.btn{
  min-height:40px;border-radius:var(--radius);padding:0 14px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:11px;font-weight:850;white-space:nowrap
}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#0a1308}
.btn-primary:hover{background:#79dd46}
.btn-ghost{background:var(--surface-2);color:var(--text)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-danger{background:var(--red-soft);color:#ff8b83}
.btn-blue{background:var(--blue-soft);color:#77bff5}
.btn-small{min-height:34px;padding:0 10px}

.grid{display:grid;gap:12px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:var(--surface);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  min-width:0
}
.metric{
  min-height:135px;padding:16px;position:relative;overflow:hidden
}
.metric::after{
  content:"";position:absolute;width:100px;height:100px;border-radius:50%;
  background:var(--metric-color,var(--accent));filter:blur(42px);opacity:.13;
  right:-35px;top:-35px
}
.metric-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.metric-icon{
  width:38px;height:38px;border-radius:var(--radius);
  background:var(--metric-bg,var(--accent-soft));color:var(--metric-color,var(--accent));
  display:grid;place-items:center
}
.metric-icon svg{width:18px;height:18px}
.metric-delta{
  font-size:10.5px;font-weight:850;color:var(--accent);
  background:var(--accent-soft);padding:6px 7px;border-radius:var(--radius)
}
.metric-delta.down{color:var(--red);background:var(--red-soft)}
.metric strong{display:block;font-size:25px;letter-spacing:-1px;margin-top:16px}
.metric p{font-size:11px;color:var(--muted);margin:5px 0 0}

.section-title{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:21px 0 10px
}
.section-title h3{font-size:12px;margin:0}
.section-title span{font-size:10.5px;color:var(--muted)}
.panel{padding:15px}
.chart-card{min-height:300px}
.chart-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.chart-head h3{font-size:13px;margin:0 0 4px}
.chart-head p{font-size:11px;color:var(--muted);margin:0}
.segmented{
  display:flex;gap:4px;background:var(--surface-2);padding:4px;border-radius:var(--radius)
}
.segmented button{
  height:30px;padding:0 10px;border-radius:var(--radius);
  background:transparent;color:var(--muted);font-size:10.5px;font-weight:800
}
.segmented button.active{background:var(--surface-4);color:#fff}
.chart{
  height:205px;margin-top:15px;position:relative;
  display:flex;align-items:flex-end;gap:8px;padding:18px 5px 8px
}
.chart::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to top,transparent 0 40px,var(--line) 41px 42px);
  pointer-events:none
}
.bar-col{flex:1;min-width:7px;height:100%;display:flex;align-items:flex-end;position:relative}
.bar-col i{
  width:100%;height:var(--h);border-radius:var(--radius) var(--radius) 3px 3px;
  background:linear-gradient(180deg,var(--accent),rgba(104,206,56,.2));
  position:relative;z-index:1
}
.bar-col:nth-child(3n) i{background:linear-gradient(180deg,var(--blue),rgba(74,167,239,.2))}
.bar-col span{
  position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  font-size:10px;color:var(--muted)
}
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:26px;min-height:220px}
.donut{
  width:160px;height:160px;border-radius:50%;
  background:conic-gradient(var(--accent) 0 48%,var(--blue) 48% 70%,var(--purple) 70% 84%,var(--amber) 84% 94%,var(--surface-3) 94%);
  position:relative
}
.donut::after{
  content:"";position:absolute;inset:23px;border-radius:50%;background:var(--surface)
}
.donut-center{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center}
.donut-center b{display:block;font-size:24px}.donut-center span{font-size:10.5px;color:var(--muted)}
.legend{display:grid;gap:10px}
.legend div{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.legend i{width:9px;height:9px;border-radius:3px;background:var(--c)}
.legend b{margin-left:auto;color:var(--text);font-size:11px}

.feed{display:grid;gap:7px;margin-top:12px}
.feed-item{
  display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;
  background:var(--surface-2);padding:10px;border-radius:var(--radius)
}
.feed-icon{
  width:36px;height:36px;border-radius:var(--radius);
  background:var(--accent-soft);color:var(--accent);display:grid;place-items:center
}
.feed-icon svg{width:17px;height:17px}
.feed-item b{display:block;font-size:11px}.feed-item p{font-size:10.5px;color:var(--muted);margin:4px 0 0;line-height:1.4}
.feed-item time{font-size:10px;color:var(--muted-2)}

.toolbar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--surface);padding:10px;border-radius:var(--radius);margin-bottom:12px
}
.toolbar-search{
  min-width:220px;flex:1;height:40px;border-radius:var(--radius);
  background:var(--surface-2);display:grid;grid-template-columns:17px 1fr;align-items:center;gap:9px;padding:0 11px
}
.toolbar-search svg{width:16px;height:16px;color:var(--muted)}
.toolbar-search input{width:100%;background:transparent;font-size:10px}
.custom-select{position:relative;min-width:145px}
.custom-select-trigger{
  width:100%;height:40px;border-radius:var(--radius);
  background:var(--surface-2);padding:0 11px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11px;color:var(--muted)
}
.custom-select-trigger svg{width:15px;height:15px}
.custom-select.open .custom-select-trigger{background:var(--surface-3);color:#fff}
.custom-select-menu{
  position:absolute;left:0;right:0;top:46px;z-index:80;
  background:var(--surface-2);padding:5px;border-radius:var(--radius);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  display:none;max-height:230px;overflow:auto
}
.custom-select.open .custom-select-menu{display:block}
.custom-select-menu button{
  width:100%;min-height:36px;border-radius:var(--radius);
  background:transparent;color:var(--muted);text-align:left;
  padding:8px 9px;font-size:11px
}
.custom-select-menu button:hover{background:var(--surface-3);color:#fff}
.custom-select-menu button.selected{background:var(--accent-soft);color:var(--accent)}

.data-table{overflow:auto}
.table{min-width:940px}
.table-head,.table-row{
  display:grid;grid-template-columns:44px 2.1fr .8fr .85fr .8fr .75fr 110px;
  gap:10px;align-items:center
}
.table-head{
  min-height:42px;padding:0 10px;font-size:10.5px;font-weight:900;
  text-transform:uppercase;letter-spacing:.7px;color:var(--muted-2)
}
.table-row{
  min-height:68px;padding:8px 10px;background:var(--surface);
  border-radius:var(--radius);margin-bottom:6px
}
.table-row:hover{background:var(--surface-2)}
.check{
  width:18px;height:18px;border-radius:5px;background:var(--surface-3);
  display:grid;place-items:center;cursor:pointer
}
.check svg{width:12px;height:12px;opacity:0}
.check.active{background:var(--accent)}.check.active svg{opacity:1;color:#091008}
.material-cell{display:flex;align-items:center;gap:10px;min-width:0}
.material-poster{
  width:40px;height:52px;border-radius:var(--radius);
  background:linear-gradient(145deg,var(--p1),var(--p2));flex:0 0 auto
}
.material-copy{min-width:0}
.material-copy b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.material-copy span{display:block;font-size:10.5px;color:var(--muted);margin-top:5px}
.status{
  width:max-content;padding:7px 8px;border-radius:var(--radius);
  font-size:10.5px;font-weight:850
}
.status.live{background:var(--accent-soft);color:var(--accent)}
.status.draft{background:var(--amber-soft);color:var(--amber)}
.status.error{background:var(--red-soft);color:var(--red)}
.status.queue{background:var(--blue-soft);color:var(--blue)}
.table-text{font-size:11px;color:var(--muted)}
.table-actions{display:flex;justify-content:flex-end;gap:5px}
.icon-action{
  width:34px;height:34px;border-radius:var(--radius);
  background:var(--surface-2);color:var(--muted);display:grid;place-items:center
}
.icon-action:hover{background:var(--surface-3);color:#fff}
.icon-action svg{width:15px;height:15px}
.pagination{display:flex;justify-content:center;gap:5px;margin-top:13px}
.pagination button{
  width:35px;height:35px;border-radius:var(--radius);
  background:var(--surface);color:var(--muted);font-size:11px
}
.pagination button.active{background:var(--accent);color:#0a1308;font-weight:900}

.editor-layout{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.7fr);gap:12px}
.editor-section{padding:15px;margin-bottom:12px}
.editor-section h3{font-size:12px;margin:0 0 13px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.field{min-width:0}
.field.full{grid-column:1/-1}
.field label{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10.5px;font-weight:900;text-transform:uppercase;letter-spacing:.65px;color:var(--muted);
  margin:0 0 7px 2px
}
.field label span{font-weight:500;text-transform:none;letter-spacing:0;color:var(--muted-2)}
.input,.textarea{
  width:100%;border-radius:var(--radius);background:var(--surface-2);
  color:var(--text);font-size:10px;padding:0 12px
}
.input{height:42px}
.textarea{min-height:120px;padding-top:12px;resize:vertical;line-height:1.55}
.input:focus,.textarea:focus{background:var(--surface-3)}
.tags-input{
  min-height:42px;border-radius:var(--radius);background:var(--surface-2);
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px
}
.tag{
  min-height:28px;padding:0 8px;border-radius:var(--radius);
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;gap:6px;font-size:10.5px
}
.tag button{background:transparent;color:inherit;padding:0}
.tags-input input{flex:1;min-width:100px;background:transparent;font-size:11px;padding:0 5px}
.upload-zone{
  min-height:166px;border-radius:var(--radius);background:var(--surface-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:20px;cursor:pointer
}
.upload-zone:hover{background:var(--surface-3)}
.upload-zone svg{width:29px;height:29px;color:var(--accent)}
.upload-zone b{font-size:10px;margin-top:10px}.upload-zone span{font-size:10.5px;color:var(--muted);margin-top:5px}
.preview-card{padding:14px;position:sticky;top:0}
.preview-poster{
  width:100%;aspect-ratio:2/3;border-radius:var(--radius);
  background:
    radial-gradient(circle at 70% 20%,rgba(255,255,255,.13),transparent 22%),
    linear-gradient(145deg,#29465a,#0d1519 70%);
  position:relative;overflow:hidden
}
.preview-poster::after{
  content:"KINORA";position:absolute;left:14px;bottom:16px;font-size:27px;font-weight:950;letter-spacing:-1.4px;color:#fff
}
.preview-card h3{font-size:15px;margin:13px 0 5px}.preview-card p{font-size:11px;color:var(--muted);line-height:1.5;margin:0}
.preview-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.preview-meta span{padding:7px 8px;border-radius:var(--radius);background:var(--surface-2);font-size:10.5px}

.parser-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px}
.parser-main,.parser-side{min-width:0}
.parser-hero{
  padding:20px;background:
    radial-gradient(circle at 95% 5%,rgba(104,206,56,.12),transparent 30%),
    var(--surface)
}
.parser-hero h3{font-size:18px;margin:0 0 7px}.parser-hero p{font-size:11px;color:var(--muted);line-height:1.55;margin:0}
.parser-source-row{display:grid;grid-template-columns:1fr 160px 130px;gap:8px;margin-top:15px}
.source-card{padding:13px;margin-top:9px}
.source-top{display:flex;align-items:center;gap:10px}
.source-logo{
  width:40px;height:40px;border-radius:var(--radius);
  background:var(--surface-2);display:grid;place-items:center;color:var(--accent)
}
.source-logo svg{width:19px;height:19px}
.source-copy{flex:1}.source-copy b{font-size:10px}.source-copy span{display:block;font-size:10.5px;color:var(--muted);margin-top:4px}
.source-state{font-size:10.5px;color:var(--accent)}
.source-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.source-metrics div{padding:9px;background:var(--surface-2);border-radius:var(--radius)}
.source-metrics b{display:block;font-size:11px}.source-metrics span{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.queue-list{display:grid;gap:7px;margin-top:11px}
.queue-item{
  background:var(--surface-2);padding:10px;border-radius:var(--radius)
}
.queue-top{display:flex;align-items:center;gap:8px}
.queue-top b{font-size:11px;flex:1}.queue-top span{font-size:10px;color:var(--muted)}
.progress{height:6px;border-radius:var(--radius);background:var(--surface-3);overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;width:var(--w);background:var(--accent);border-radius:var(--radius)}
.progress.blue i{background:var(--blue)}
.progress.red i{background:var(--red)}
.parser-side .card{padding:14px;margin-bottom:10px}
.parser-side h3{font-size:11px;margin:0 0 11px}
.toggle-row{
  min-height:44px;display:flex;align-items:center;gap:9px;
  padding:7px 0
}
.toggle-copy{flex:1}.toggle-copy b{display:block;font-size:11px}.toggle-copy span{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.toggle{
  width:38px;height:22px;border-radius:var(--radius);background:var(--surface-3);position:relative
}
.toggle::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:6px;background:#75807c;left:3px;top:3px
}
.toggle.on{background:var(--accent)}.toggle.on::after{left:19px;background:#0b1508}
.cron-box{
  background:#090c0d;border-radius:var(--radius);padding:11px;
  font:8px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;color:#9ddc7d;
  overflow:auto
}

.moderation-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px}
.moderation-card{padding:13px;margin-bottom:8px}
.moderation-top{display:flex;align-items:center;gap:10px}
.user-avatar{
  width:38px;height:38px;border-radius:var(--radius);
  background:linear-gradient(145deg,#63c93a,#357ea8);
  display:grid;place-items:center;font-size:11px;font-weight:900
}
.moderation-user{flex:1}.moderation-user b{font-size:11px}.moderation-user span{display:block;font-size:10px;color:var(--muted);margin-top:4px}
.moderation-text{font-size:11px;line-height:1.55;color:#d4dad7;margin:11px 0}
.moderation-meta{display:flex;gap:6px;flex-wrap:wrap}
.moderation-meta span{padding:6px 7px;border-radius:var(--radius);background:var(--surface-2);font-size:10px;color:var(--muted)}
.moderation-actions{display:flex;gap:6px;margin-top:11px;flex-wrap:wrap}
.mod-stat{padding:15px;margin-bottom:10px}
.mod-stat strong{display:block;font-size:25px}.mod-stat span{font-size:10.5px;color:var(--muted)}
.word-list{display:flex;gap:6px;flex-wrap:wrap}
.word-chip{padding:7px 8px;border-radius:var(--radius);background:var(--red-soft);color:#ff928b;font-size:10.5px}

.seo-score{
  display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;
  padding:18px
}
.score-ring{
  width:136px;height:136px;border-radius:50%;
  background:conic-gradient(var(--accent) 0 86%,var(--surface-3) 86%);
  position:relative
}
.score-ring::after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--surface)}
.score-ring div{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center}
.score-ring b{font-size:28px}.score-ring span{display:block;font-size:10px;color:var(--muted)}
.seo-checks{display:grid;gap:7px}
.seo-check{
  min-height:42px;border-radius:var(--radius);background:var(--surface-2);
  display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:6px 10px
}
.seo-check-icon{
  width:27px;height:27px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);display:grid;place-items:center
}
.seo-check-icon.warn{background:var(--amber-soft);color:var(--amber)}
.seo-check-icon svg{width:14px;height:14px}
.seo-check b{font-size:10.5px}.seo-check span{font-size:10px;color:var(--muted)}

.log-console{
  background:#070a0b;border-radius:var(--radius);
  padding:13px;height:420px;overflow:auto;
  font:8px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace
}
.log-line{display:grid;grid-template-columns:70px 60px 1fr;gap:10px;color:#aab4b0}
.log-line time{color:#52605b}.log-level{font-weight:850}.log-level.info{color:#78bff1}.log-level.ok{color:#7edb50}.log-level.warn{color:#e6b84c}.log-level.error{color:#ef756d}
.log-line p{margin:0}

.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.settings-card{padding:15px}
.settings-card h3{font-size:12px;margin:0 0 4px}.settings-card>p{font-size:10.5px;color:var(--muted);margin:0 0 12px}
.settings-list{display:grid;gap:5px}
.setting-row{
  min-height:48px;border-radius:var(--radius);background:var(--surface-2);
  display:flex;align-items:center;gap:10px;padding:8px 10px
}
.setting-icon{
  width:32px;height:32px;border-radius:var(--radius);background:var(--surface-3);color:var(--accent);display:grid;place-items:center
}
.setting-icon svg{width:16px;height:16px}
.setting-copy{flex:1}.setting-copy b{display:block;font-size:10.5px}.setting-copy span{display:block;font-size:10px;color:var(--muted);margin-top:4px}

.modal{
  position:fixed;inset:0;z-index:200;background:rgba(3,6,7,.74);backdrop-filter:blur(10px);
  display:none;place-items:center;padding:16px
}
.modal.open{display:grid}
.modal-box{
  width:min(590px,100%);max-height:calc(100dvh - 32px);overflow:auto;
  border-radius:var(--radius);background:var(--surface);box-shadow:0 35px 100px rgba(0,0,0,.5);padding:17px
}
.modal-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px}
.modal-head div{flex:1}.modal-head h3{font-size:17px;margin:0 0 5px}.modal-head p{font-size:10.5px;color:var(--muted);margin:0;line-height:1.5}
.modal-close{width:37px;height:37px;border-radius:var(--radius);background:var(--surface-2);display:grid;place-items:center}
.modal-close svg{width:17px;height:17px}
.toast{
  position:fixed;left:50%;bottom:22px;z-index:300;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;
  background:#202728;color:#fff;padding:11px 14px;border-radius:var(--radius);
  font-size:11px;box-shadow:0 16px 45px rgba(0,0,0,.4)
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:1250px){
  :root{--side:225px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .parser-layout{grid-template-columns:1fr}
  .parser-side{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .parser-side .card{margin:0}
}
@media(max-width:980px){
  :root{--side:0px}
  .app{grid-template-columns:var(--rail) minmax(0,1fr)}
  .header{grid-column:2}
  .workspace{grid-column:2}
  .sidebar{
    position:fixed;left:var(--rail);top:var(--header);bottom:0;width:270px;z-index:120;
    transform:translateX(-110%);transition:.22s;background:rgba(15,20,21,.98);box-shadow:20px 0 60px rgba(0,0,0,.35)
  }
  .sidebar.open{transform:none}
  .mobile-menu{display:grid}
  .editor-layout,.moderation-layout{grid-template-columns:1fr}
  .preview-card{position:static}
}
@media(max-width:720px){
  :root{--rail:0px;--header:62px}
  body{overflow:hidden}
  .app{display:block}
  .rail{display:none}
  .header{position:fixed;left:0;right:0;top:0;height:var(--header);z-index:90;padding:0 10px}
  .header-search{display:none}
  .page-title p{display:none}
  .header-avatar{width:38px;height:38px}
  .header-btn{width:38px;height:38px}
  .sidebar{left:0;top:var(--header);width:min(300px,84vw)}
  .workspace{position:absolute;inset:var(--header) 0 0;padding:12px}
  .view-head{flex-direction:column}
  .view-head h2{font-size:22px}
  .grid-4,.grid-3,.grid-2,.settings-grid{grid-template-columns:1fr}
  .chart-card{min-height:280px}
  .donut-wrap{flex-direction:column}
  .toolbar{align-items:stretch}
  .toolbar-search,.custom-select{min-width:100%;width:100%}
  .form-grid,.form-grid.three{grid-template-columns:1fr}
  .parser-source-row{grid-template-columns:1fr}
  .source-metrics{grid-template-columns:repeat(2,1fr)}
  .parser-side{grid-template-columns:1fr}
  .seo-score{grid-template-columns:1fr}.score-ring{margin:auto}
  .log-line{grid-template-columns:58px 48px 1fr}
}