/* ============================================================
   SMOOX CreativeRadar — Dashboard
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --orange:#FF6805;--orange-600:#EA5C00;--orange-700:#C44E00;--tint:#FFF1E7;
  --ink:#15171C;--ink-900:#101218;--ink-800:#1B1E25;--ink-700:#2C313B;--ink-600:#3A414D;
  --slate:#4A5260;--muted:#767E8C;--faint:#9AA1AD;
  --line:#E7E3DC;--line-2:#ECE9E3;--bg:#FBFAF7;--paper:#F7F4ED;--white:#fff;
  --green:#0E9F6E;--green-bg:#E3F7EE;--amber:#DC6803;--amber-bg:#FEF3E2;
  --red:#D92D20;--red-bg:#FEF1F0;--blue:#2A6FDB;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r-sm:9px;--r:13px;--r-lg:18px;
  --shadow:0 14px 40px -18px rgba(20,23,28,.30);
  --sb-w:248px;
}
html{-webkit-text-size-adjust:100%;overflow-y:scroll;}
body{font-family:'Archivo',system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5;scrollbar-gutter:stable;}
h1,h2,h3,.disp{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;}
.mono{font-family:var(--mono);}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}
input,textarea,select{font-family:inherit;font-size:14px;}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:#d9d4cb;border-radius:20px;border:3px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#c7c1b6;}

/* ===== LOGIN OVERLAY ===== */
#loginOverlay{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;align-items:center;justify-content:center;}
.login-box{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:20px;padding:40px 36px;width:360px;text-align:center;}
.login-box .lb{font-family:'Space Grotesk';font-size:22px;font-weight:700;color:#fff;margin-bottom:6px;}
.login-box .lb b{color:var(--orange);}
.login-box p{font-size:13px;color:#7d8593;margin-bottom:28px;}
.login-box input{width:100%;background:var(--ink);border:1px solid var(--ink-600);border-radius:10px;padding:12px 14px;color:#fff;font-size:14px;margin-bottom:10px;outline:none;}
.login-box input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,104,5,.15);}
.login-box button{width:100%;background:var(--orange);color:#fff;border:none;border-radius:10px;padding:13px;font-size:15px;font-weight:600;transition:background .15s;margin-top:4px;}
.login-box button:hover{background:var(--orange-600);}
.login-err{color:#f87171;font-size:13px;margin-top:10px;min-height:18px;}

/* ===== APP SHELL ===== */
.app{display:grid;grid-template-columns:var(--sb-w) 1fr;min-height:100vh;}

/* ===== SIDEBAR ===== */
.sidebar{position:sticky;top:0;height:100vh;background:var(--ink);color:#fff;display:flex;flex-direction:column;padding:22px 16px;border-right:1px solid var(--ink-800);overflow-y:auto;}
.sb-brand{display:flex;align-items:flex-start;padding:0 0 20px 0;}
.sb-brand .brand-txt{line-height:1.2;}
.sb-brand .brand-sub{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11px;color:#7d8593;letter-spacing:.01em;display:block;margin-top:10px;}
.sb-section{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5b6472;padding:0 10px;margin:14px 0 8px;}
.sb-nav{display:flex;flex-direction:column;gap:2px;}
.sb-link{display:flex;align-items:center;gap:12px;padding:10px 11px;border-radius:10px;color:#aab0bb;font-size:14.5px;font-weight:500;transition:background .14s,color .14s;position:relative;border:none;background:none;width:100%;text-align:left;}
.sb-link svg{width:18px;height:18px;flex-shrink:0;opacity:.85;}
.sb-link .count{margin-left:auto;font-family:var(--mono);font-size:11px;color:#7d8593;background:rgba(255,255,255,.06);padding:1px 8px;border-radius:100px;}
.sb-link:hover{background:rgba(255,255,255,.05);color:#e6e9ee;}
.sb-link.active{background:rgba(255,104,5,.14);color:#fff;}
.sb-link.active svg{opacity:1;color:var(--orange);}
.sb-link.active .count{background:rgba(255,104,5,.22);color:#ffd0b0;}
.sb-link.active::before{content:'';position:absolute;left:-16px;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--orange);}
.sb-link.admin-only{display:none;}
.sb-spacer{flex:1;}
.sb-foot{border-top:1px solid var(--ink-800);padding-top:14px;}
.sb-user{display:flex;align-items:center;gap:11px;padding:8px 9px;border-radius:11px;transition:background .14s;cursor:pointer;}
.sb-user:hover{background:rgba(255,255,255,.05);}
.sb-user .av{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--orange),var(--orange-700));color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:14px;flex-shrink:0;}
.sb-user .u-meta{min-width:0;line-height:1.25;}
.sb-user .u-meta b{font-size:13.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user .u-meta span{font-size:11.5px;color:#7d8593;}

/* ===== MAIN ===== */
.main{min-width:0;display:flex;flex-direction:column;}
.page{display:none;flex-direction:column;flex:1;}
.page.active{display:flex;}

/* topbar */
.topbar{position:sticky;top:0;z-index:30;background:rgba(251,250,247,.88);backdrop-filter:blur(12px) saturate(1.3);border-bottom:1px solid var(--line);padding:16px 30px;display:flex;align-items:center;gap:16px;justify-content:space-between;}
.tb-titles h1{font-size:22px;font-weight:700;line-height:1.1;}
.tb-titles p{font-size:13px;color:var(--muted);margin-top:2px;}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.tb-search{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:0 12px;height:40px;width:240px;transition:border-color .15s,box-shadow .15s;}
.tb-search:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,104,5,.12);}
.tb-search svg{color:var(--muted);flex-shrink:0;}
.tb-search input{border:none;outline:none;background:none;font-size:14px;width:100%;color:var(--ink);}
.tb-search input::placeholder{color:var(--faint);}
.tb-live{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap;}
.tb-live .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(14,159,110,.18);animation:cr-pulse 1.8s infinite;}
@keyframes cr-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.menu-btn{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);align-items:center;justify-content:center;}

/* content */
.content{padding:26px 30px 60px;flex:1;}

/* ===== KPI STRIP ===== */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:24px;}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;}
.kpi .k-top{display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.kpi .k-ic{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.kpi .k-lbl{font-size:12.5px;color:var(--muted);font-weight:500;}
.kpi .k-val{font-family:'Space Grotesk';font-size:30px;font-weight:700;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.kpi .k-val small{font-size:15px;color:var(--muted);font-weight:600;margin-left:3px;}
.kpi .k-sub{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:7px;}
.kpi.accent-o .k-ic{background:var(--tint);color:var(--orange-700);}
.kpi.accent-g .k-ic{background:var(--green-bg);color:var(--green);}
.kpi.accent-a .k-ic{background:var(--amber-bg);color:var(--amber);}
.kpi.accent-b .k-ic{background:#E7F0FD;color:var(--blue);}
.kpi.accent-n .k-ic{background:#EDEBE6;color:var(--slate);}

/* ===== TOOLBAR ===== */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px;}
.seg button{border:none;background:none;font-size:13.5px;font-weight:600;color:var(--slate);padding:7px 13px;border-radius:7px;transition:background .14s,color .14s;white-space:nowrap;}
.seg button:hover{color:var(--ink);}
.seg button.active{background:var(--ink);color:#fff;}
.seg button.active.flag{background:var(--amber);}
.select,.tb-btn{height:40px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:8px;padding:0 13px;transition:border-color .15s,background .15s;}
.select{cursor:pointer;position:relative;}
.select select{appearance:none;border:none;outline:none;background:none;font:inherit;color:inherit;cursor:pointer;padding-right:18px;}
.select::after{content:'';position:absolute;right:13px;width:8px;height:8px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:translateY(-2px) rotate(45deg);pointer-events:none;}
.tb-btn:hover,.select:hover{border-color:#cfc9bf;}
.tb-btn.primary{background:var(--orange);border-color:var(--orange);color:#fff;font-weight:600;}
.tb-btn.primary:hover{background:var(--orange-600);border-color:var(--orange-600);}
.tb-btn.primary svg.spin{animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.tb-spacer{margin-left:auto;}
.count-txt{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap;}
.view-toggle{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.view-toggle button{width:40px;height:40px;background:#fff;border:none;color:var(--muted);display:flex;align-items:center;justify-content:center;}
.view-toggle button+button{border-left:1px solid var(--line);}
.view-toggle button.active{background:var(--paper);color:var(--ink);}

/* ===== GRID + CARD ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.grid.list{grid-template-columns:1fr;gap:10px;}
.scard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .18s,border-color .18s;display:flex;flex-direction:column;position:relative;}
.scard:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#dcd6cc;}
.scard.flagged{border-color:#f1cfa8;}
.scard.flagged::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--amber);z-index:3;}
.thumb{position:relative;aspect-ratio:16/10;background:#1c2630 center/cover no-repeat;overflow:hidden;}
.thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,18,24,.04) 35%,rgba(12,18,24,.55));}
.t-vendor{position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:6px;color:#fff;}
.t-vendor .roof{width:18px;height:18px;border-radius:5px;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.t-vendor .vn{font-size:10.5px;font-weight:600;line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.t-fmt{position:absolute;top:9px;left:9px;z-index:2;font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.03em;color:#fff;background:rgba(16,20,26,.6);backdrop-filter:blur(3px);padding:2px 7px;border-radius:5px;}
.t-actions{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(16,20,26,.32);opacity:0;transition:opacity .16s;}
.scard:hover .t-actions{opacity:1;}
.t-actions .qa{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--ink);border:none;font-size:12px;font-weight:600;padding:8px 13px;border-radius:8px;box-shadow:0 6px 16px -6px rgba(0,0,0,.4);transition:transform .12s;}
.t-actions .qa:hover{transform:translateY(-1px);}
.t-actions .qa svg{color:var(--orange);}
.t-del{position:absolute;top:8px;right:8px;z-index:5;width:26px;height:26px;border-radius:7px;border:none;background:rgba(16,20,26,.55);backdrop-filter:blur(4px);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .15s,background .15s;cursor:pointer;}
.scard:hover .t-del{opacity:1;}
.t-del:hover{background:rgba(217,45,32,.85);}
.scard-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:10px;flex:1;}
.sc-head{display:flex;align-items:flex-start;gap:8px;}
.sc-title{font-family:'Space Grotesk';font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.2;}
.pill{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0;margin-left:auto;}
.pill.ok{background:var(--green-bg);color:var(--green);}
.pill.flag{background:var(--amber-bg);color:var(--amber);}
.pill svg{width:10px;height:10px;}
.sc-match{display:flex;flex-direction:column;gap:6px;}
.sc-match .mh{display:flex;align-items:center;gap:7px;font-size:11.5px;}
.sc-match .mh .lab{color:var(--muted);}
.sc-match .mh b{font-family:var(--mono);font-weight:600;color:var(--slate);font-size:11px;}
.sc-match .mh .src{font-family:var(--mono);font-size:10px;color:var(--orange-700);background:var(--tint);padding:2px 7px;border-radius:5px;}
.meter{height:5px;border-radius:100px;background:#ECE7DE;overflow:hidden;}
.meter i{display:block;height:100%;border-radius:100px;background:linear-gradient(90deg,var(--orange),var(--orange-600));}
.kw{display:flex;flex-wrap:wrap;gap:5px;}
.kw span{font-family:var(--mono);font-size:9.5px;color:var(--slate);background:var(--bg);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;}
.sc-meta{margin-top:auto;padding-top:11px;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:6px;}
.mrow{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--slate);min-width:0;}
.mrow .fav{width:15px;height:15px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;flex-shrink:0;}
.mrow .dom{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mrow .sep{color:var(--line);}
.mrow .net{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:10.5px;color:var(--muted);}
.mrow.time{font-family:var(--mono);font-size:10.5px;color:var(--faint);justify-content:space-between;}
/* list variant */
.grid.list .scard{flex-direction:row;}
.grid.list .thumb{width:200px;aspect-ratio:auto;flex-shrink:0;}
.grid.list .scard.flagged::before{width:3px;right:auto;bottom:0;height:auto;}
.grid.list .scard-body{flex-direction:row;align-items:center;gap:22px;padding:14px 18px;}
.grid.list .lb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
.grid.list .sc-meta{margin:0;padding:0;border:none;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;}
.grid.list .sc-match{max-width:260px;}
/* empty */
.empty{text-align:center;padding:70px 20px;color:var(--muted);}
.empty .ec{width:54px;height:54px;border-radius:14px;background:var(--paper);color:var(--faint);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.empty b{font-family:'Space Grotesk';font-size:18px;color:var(--ink);display:block;margin-bottom:5px;}
.empty p{font-size:14px;}

/* ===== DETAIL DRAWER ===== */
.scrim{position:fixed;inset:0;background:rgba(16,18,24,.42);backdrop-filter:blur(2px);z-index:90;opacity:0;pointer-events:none;transition:opacity .25s;}
.scrim.open{opacity:1;pointer-events:auto;}
.drawer{position:fixed;top:0;right:0;height:100vh;width:620px;max-width:94vw;background:var(--bg);z-index:100;box-shadow:none;transform:translateX(100%);transition:transform .3s cubic-bezier(.3,.9,.3,1);display:flex;flex-direction:column;}
.drawer.open{transform:none;}
.dr-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);background:#fff;}
.dr-head .dh-t{font-family:'Space Grotesk';font-size:17px;font-weight:600;}
.dr-head .dh-s{font-family:var(--mono);font-size:11px;color:var(--muted);}
.dr-close{margin-left:auto;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--slate);display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s;}
.dr-close:hover{background:var(--paper);color:var(--ink);}
.dr-body{flex:1;min-height:0;overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:20px;}
.dr-creative{border-radius:var(--r);border:1px solid var(--line);background:#1c2630;}
.dr-creative img{display:block;width:100%;height:auto;max-height:400px;object-fit:contain;border-radius:var(--r);}
.dr-creative .thumb{aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;}
.dr-section h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:11px;}
.dr-match{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:15px 16px;}
.dr-match .dm-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px;}
.dr-match .dm-h span{font-size:13px;font-weight:600;color:var(--slate);}
.dr-match .dm-h b{font-family:'Space Grotesk';font-size:20px;font-weight:700;}
.dr-match .meter{height:7px;margin-bottom:11px;}
.kv{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.kv .kv-row{display:flex;align-items:center;gap:14px;padding:11px 16px;font-size:13.5px;}
.kv .kv-row+.kv-row{border-top:1px solid var(--line-2);}
.kv .kv-row .k{width:120px;flex-shrink:0;color:var(--muted);font-size:12.5px;}
.kv .kv-row .v{color:var(--ink);font-weight:500;display:flex;align-items:center;gap:7px;}
.kv .kv-row .v.mono{font-family:var(--mono);font-size:12px;font-weight:500;}
.dr-report{border-radius:var(--r);padding:15px 16px;border:1px solid;}
.dr-report.ok{background:var(--green-bg);border-color:#bfecd6;}
.dr-report.flag{background:var(--amber-bg);border-color:#f6ddb4;}
.dr-report.warn{background:var(--surface2,#1c2630);border-color:#3a4a5a;}
.kw-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px;}
.kw-tag{background:var(--surface2,#f0f4f8);border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:12px;color:var(--slate);}
.dr-report .rh{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;margin-bottom:6px;}
.dr-report.ok .rh{color:var(--green);} .dr-report.flag .rh{color:var(--amber);} .dr-report.warn .rh{color:var(--slate,#8a9bb0);}
.dr-report .ri{font-size:13px;color:var(--slate);line-height:1.5;}
.dr-ki-off{font-size:12px;color:var(--slate,#8a9bb0);margin:0;}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.qcard-img{background:#1c2630;display:flex;align-items:center;justify-content:center;min-height:260px;max-height:520px;overflow:hidden;}
.qcard-img img{width:100%;height:auto;max-height:520px;object-fit:contain;display:block;}
.qcard-body{padding:22px 26px;display:flex;flex-direction:column;gap:12px;}
.qcard-meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:12.5px;color:var(--muted);}
.qcard-meta b{color:var(--ink);font-weight:600;}
.qcard-title{font-size:17px;font-weight:700;color:var(--ink);margin:0;}
.qcard-issue{background:var(--amber-bg,#FFFBEB);border:1px solid #F6DDB4;border-radius:10px;padding:14px 16px;}
.qcard-issue-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;color:#92400E;margin-bottom:6px;}
.qcard-issue-body{font-size:13px;color:var(--ink);line-height:1.55;}
.qcard-dismiss{border:none;background:none;font-size:12px;color:var(--muted);cursor:pointer;padding:0;text-align:left;}
.qcard-dismiss:hover{color:var(--red);}
.ana-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;}
.ana-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-weight:600;font-size:13px;color:var(--ink);}
.ana-kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;}
.ana-kpi .ak-val{font-size:28px;font-weight:700;color:var(--ink);line-height:1.1;margin:4px 0 2px;}
.ana-kpi .ak-lbl{font-size:12px;color:var(--muted);font-weight:500;}
.ana-kpi .ak-sub{font-size:11.5px;color:var(--slate);margin-top:3px;}
.hm-grid{display:grid;gap:3px;font-size:10px;}
.hm-cell{border-radius:3px;min-width:18px;min-height:18px;}
.hm-label{color:var(--muted);font-size:10px;display:flex;align-items:center;}
.dr-issue{display:flex;gap:9px;align-items:flex-start;margin-top:8px;}
.dr-issue .sev{width:18px;height:18px;border-radius:5px;background:rgba(220,104,3,.16);color:var(--amber);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.dr-foot{border-top:1px solid var(--line);background:#fff;padding:14px 22px;display:flex;gap:10px;}
.dbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;border-radius:10px;border:1.5px solid transparent;padding:12px;transition:background .14s,border-color .14s,color .14s;}
.dbtn.primary{background:var(--orange);color:#fff;}
.dbtn.primary:hover{background:var(--orange-600);}
.dbtn.ghost{background:#fff;color:var(--ink);border-color:var(--line);flex:0 0 auto;padding:12px 16px;}
.dbtn.ghost:hover{border-color:var(--ink);}
.dbtn.danger{background:#fff;color:var(--red);border-color:#f3c9c5;flex:0 0 auto;padding:12px 14px;}
.dbtn.danger:hover{background:var(--red-bg);}

/* ===== CAMPAIGNS / CLIENTS EDITOR ===== */
.editor-wrap{display:grid;grid-template-columns:380px minmax(0,560px);gap:28px;align-items:start;max-width:980px;}
.camp-editor{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;}
.camp-editor h3{font-family:'Space Grotesk';font-size:18px;font-weight:700;margin-bottom:20px;}
.camp-editor input,.camp-editor textarea,.camp-editor select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px;color:var(--ink);font-size:14px;margin-bottom:10px;outline:none;transition:border-color .15s,box-shadow .15s;}
.camp-editor input:focus,.camp-editor textarea:focus,.camp-editor select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,104,5,.1);}
.camp-editor textarea{resize:vertical;min-height:90px;}
.lbl{font-size:12.5px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px;margin-top:4px;}
.rule-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
.rule-row select{margin:0;flex:0 0 140px;}
.rule-row input{margin:0;flex:1;}
.rule-del{background:none;border:1px solid var(--line);border-radius:8px;width:34px;height:36px;color:var(--muted);font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .14s,color .14s;}
.rule-del:hover{background:var(--red-bg);color:var(--red);border-color:#f3c9c5;}
.ghost-btn{background:none;border:1px dashed var(--line);border-radius:9px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--orange-700);width:100%;margin:4px 0 14px;transition:background .14s;}
.ghost-btn:hover{background:var(--tint);}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;margin:10px 0;cursor:pointer;}
.chk input[type=checkbox]{width:16px;height:16px;accent-color:var(--orange);}
.camp-actions{display:flex;gap:10px;margin-top:18px;}
.btn-primary{background:var(--orange);color:#fff;border:none;border-radius:10px;padding:11px 22px;font-size:14px;font-weight:600;transition:background .15s;}
.btn-primary:hover{background:var(--orange-600);}
.btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;transition:border-color .15s,background .15s;}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper);}
.err{font-size:13px;color:var(--red);margin-top:10px;min-height:16px;}
.camp-list{display:flex;flex-direction:column;gap:10px;}
.camp-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;display:flex;align-items:center;gap:14px;}
.camp-item.inactive{opacity:.55;}
.camp-item .meta{flex:1;min-width:0;}
.camp-item .nm{font-family:'Space Grotesk';font-size:15px;font-weight:600;}
.camp-item .rl{font-size:12.5px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.camp-item .btns{display:flex;gap:8px;flex-shrink:0;}
.camp-item .btns button{border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--ink);transition:background .14s,border-color .14s;}
.camp-item .btns button:hover{background:var(--paper);border-color:#cfc9bf;}
.camp-item .btns button.del{color:var(--red);border-color:#f3c9c5;}
.camp-item .btns button.del:hover{background:var(--red-bg);}
.logo-preview{margin-bottom:10px;}

/* ===== ACCORDION KAMPAGNEN ===== */
.acc-wrap{max-width:860px;display:flex;flex-direction:column;gap:10px;}
.acc-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:box-shadow .2s;}
.acc-item.open{box-shadow:0 4px 20px rgba(0,0,0,.07);}
.acc-head{display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;user-select:none;transition:background .14s;}
.acc-head:hover{background:var(--bg);}
.acc-arrow{font-size:11px;color:var(--muted);transition:transform .22s;flex-shrink:0;}
.acc-item.open .acc-arrow{transform:rotate(90deg);}
.acc-name{font-family:'Space Grotesk';font-size:15px;font-weight:700;color:var(--ink);}
.acc-meta{font-size:12px;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acc-badge{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;flex-shrink:0;}
.acc-badge.active{background:#dcfce7;color:#15803d;}
.acc-badge.inactive{background:#f3f4f6;color:#9ca3af;}
.acc-body{display:none;padding:24px 26px;border-top:1px solid var(--line);}
.acc-item.open .acc-body{display:block;}
.form-group{margin-bottom:18px;}
.form-lbl{display:block;font-size:12px;font-weight:700;color:var(--ink-600);margin-bottom:5px;letter-spacing:.01em;}
.form-help{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4;}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 13px;color:var(--ink);font-size:14px;margin-bottom:0;outline:none;transition:border-color .15s,box-shadow .15s;}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,104,5,.1);}
.form-group textarea{resize:vertical;min-height:80px;}
.acc-foot{display:flex;gap:8px;align-items:center;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);}
.acc-err{color:var(--red);font-size:13px;margin-top:10px;display:none;}
.btn-danger{background:#fff;color:var(--red);border:1.5px solid #f3c9c5;border-radius:10px;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;transition:background .14s;}
.btn-danger:hover{background:var(--red-bg);}
.acc-empty{text-align:center;color:var(--muted);padding:60px 0;font-size:14px;}
.logo-preview img{max-height:48px;border:1px solid var(--line);border-radius:8px;}
/* placeholder pages */
.placeholder-page{display:flex;align-items:center;justify-content:center;flex:1;padding:60px 30px;}
.placeholder-card{text-align:center;max-width:400px;}
.placeholder-card .ph-icon{width:64px;height:64px;border-radius:18px;background:var(--paper);color:var(--faint);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;}
.placeholder-card h2{font-family:'Space Grotesk';font-size:22px;font-weight:700;margin-bottom:8px;}
.placeholder-card p{font-size:14px;color:var(--muted);line-height:1.6;}
.placeholder-card .badge{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;background:var(--tint);color:var(--orange-700);padding:3px 10px;border-radius:20px;margin-bottom:14px;}

/* ===== BLACKLIST TOGGLE ===== */
.bl-toggle{position:relative;display:inline-block;width:34px;height:18px;}
.bl-toggle input{opacity:0;width:0;height:0;position:absolute;}
.bl-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;border-radius:18px;transition:.2s;}
.bl-slider:before{content:"";position:absolute;width:12px;height:12px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;}
.bl-toggle input:checked + .bl-slider{background:var(--orange);}
.bl-toggle input:checked + .bl-slider:before{transform:translateX(16px);}

/* ===== TOAST ===== */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(12px);background:var(--ink);color:#fff;border-radius:11px;padding:12px 18px;font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:10px;box-shadow:0 18px 40px -14px rgba(20,23,28,.5);z-index:120;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .ok{width:22px;height:22px;border-radius:6px;background:rgba(52,211,153,.22);color:#34d399;display:flex;align-items:center;justify-content:center;}

/* ===== RESPONSIVE ===== */
@media(max-width:1280px){.grid{grid-template-columns:repeat(3,1fr);}.kpis{grid-template-columns:repeat(3,1fr);}}
@media(max-width:980px){
  .app{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:0;top:0;z-index:80;transform:translateX(-100%);transition:transform .25s;width:248px;}
  .sidebar.open{transform:none;box-shadow:30px 0 70px -30px rgba(0,0,0,.5);}
  .grid{grid-template-columns:repeat(2,1fr);}
  .kpis{grid-template-columns:repeat(2,1fr);}
  .editor-wrap{grid-template-columns:1fr;}
  .menu-btn{display:inline-flex !important;}
}
@media(max-width:640px){
  .content{padding:18px 16px 50px;}.topbar{padding:14px 16px;}
  .grid,.grid.list{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr 1fr;}
  .tb-search{display:none;}
  .grid.list .scard{flex-direction:column;}.grid.list .thumb{width:100%;aspect-ratio:16/10;}
}

/* ===== OCR TESTER ===== */
.ocr-tester{margin-top:12px;border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--bg);}
.ocr-tester-head{padding:9px 14px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;}
.ocr-tester-head svg{color:var(--orange);flex-shrink:0;}
.ocr-tester-head span{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.ocr-tester-body{padding:14px;}
.ocr-drop{border:2px dashed var(--line);border-radius:var(--r-sm);padding:18px 16px;text-align:center;cursor:pointer;background:var(--bg);transition:border-color .15s,background .15s;position:relative;margin-bottom:10px;}
.ocr-drop:hover,.ocr-drop.drag-over{border-color:var(--orange);background:var(--tint);}
.ocr-drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.ocr-drop-txt{font-size:13px;color:var(--muted);}
.ocr-drop-txt b{color:var(--orange);}
.ocr-preview{margin-bottom:10px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line);display:none;}
.ocr-preview img{display:block;width:100%;max-height:180px;object-fit:contain;background:var(--paper);}
.ocr-actions{display:flex;align-items:center;gap:8px;margin-bottom:0;}
.ocr-run-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 15px;background:var(--orange);color:#fff;border:none;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .15s;white-space:nowrap;}
.ocr-run-btn:hover{background:var(--orange-600);}
.ocr-run-btn:disabled{opacity:.5;cursor:default;}
.ocr-clear-btn{background:none;border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 11px;font-size:12px;font-weight:500;color:var(--muted);cursor:pointer;font-family:inherit;transition:border-color .12s,color .12s;}
.ocr-clear-btn:hover{border-color:var(--red);color:var(--red);}
.ocr-status-txt{font-size:11.5px;color:var(--muted);font-family:var(--mono);}
.ocr-results{margin-top:14px;display:none;}
.ocr-section-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:6px;}
.ocr-raw-txt{font-family:var(--mono);font-size:11.5px;color:var(--slate);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:9px 11px;max-height:100px;overflow-y:auto;white-space:pre-wrap;word-break:break-word;margin-bottom:12px;}
.ocr-chip-actions{display:flex;align-items:center;gap:9px;margin-bottom:8px;}
.ocr-chips-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);}
.ocr-sel-btn{background:none;border:none;font-size:11.5px;font-weight:600;color:var(--orange);cursor:pointer;font-family:inherit;padding:0;}
.ocr-sel-btn:hover{text-decoration:underline;}
.ocr-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:12px;}
.ocr-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1.5px solid var(--line);border-radius:100px;font-size:12px;font-weight:500;color:var(--slate);cursor:pointer;background:#fff;transition:border-color .12s,background .12s,color .12s;user-select:none;}
.ocr-chip:hover{border-color:var(--orange);color:var(--ink);}
.ocr-chip.sel{border-color:var(--orange);background:var(--tint);color:var(--orange-700);font-weight:600;}
.ocr-chip-badge{font-size:9px;font-weight:700;background:#fde8d8;color:#c45000;padding:1px 5px;border-radius:4px;line-height:1.4;}
.ocr-chip.sel .ocr-chip-badge{background:#ffcaa0;}
.ocr-adopt-row{display:flex;align-items:center;gap:10px;}
.ocr-adopt-btn{padding:7px 15px;background:var(--ink);color:#fff;border:none;border-radius:var(--r-sm);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;white-space:nowrap;transition:background .12s;}
.ocr-adopt-btn:hover{background:var(--ink-800);}
.ocr-adopt-btn:disabled{opacity:.5;cursor:default;}
.ocr-adopt-ok{font-size:12px;color:var(--green);font-weight:600;}
.ocr-preview{position:relative;}
.ocr-scanline{position:absolute;left:0;right:0;top:0;height:3px;z-index:5;pointer-events:none;display:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,104,5,.2) 20%,var(--orange) 50%,rgba(255,104,5,.2) 80%,transparent 100%);
  box-shadow:0 0 8px 3px rgba(255,104,5,.5),0 0 20px 4px rgba(255,104,5,.25);
  animation:ocr-scan 2s cubic-bezier(.4,0,.6,1) infinite;}
@keyframes ocr-scan{0%{top:0;opacity:0;}5%{opacity:1;}90%{top:calc(100% - 3px);opacity:1;}100%{top:calc(100% - 3px);opacity:0;}}
.ocr-preview.scanning img{filter:brightness(.92);}
.ocr-preview.scanning::before{content:'';position:absolute;inset:0;z-index:4;
  background:linear-gradient(180deg,rgba(255,104,5,.06) 0%,transparent 40%,transparent 60%,rgba(255,104,5,.04) 100%);pointer-events:none;}