:root{
 --bg:#030812;--bg2:#050d18;--side:#050c16;--panel:#081525;--panel2:#0b1a2c;
 --line:#142b43;--line2:#1b3d5c;--text:#f5f9ff;--muted:#91a7c0;--muted2:#667f99;
 --blue:#5da9ff;--cyan:#4de3c2;--green:#4ee0b0;--yellow:#f5c85b;--red:#ff6f82;
 --shadow:0 18px 60px rgba(0,0,0,.32);--radius:15px;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;min-height:100vh;background:
 radial-gradient(900px 550px at 70% -12%,rgba(64,143,255,.12),transparent 62%),
 radial-gradient(700px 520px at 18% 5%,rgba(77,227,194,.045),transparent 64%),
 linear-gradient(180deg,#030811,#050b14 55%,#030810);
 color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.45;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background-image:linear-gradient(rgba(83,145,193,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(83,145,193,.045) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
a{color:inherit}
button,input,select{font:inherit}
.layout{display:flex;min-height:100vh}
.side{position:fixed;z-index:50;inset:0 auto 0 0;width:205px;padding:20px 12px 16px;background:linear-gradient(180deg,#06101c,#040a12 80%);border-right:1px solid #10263c;box-shadow:18px 0 60px rgba(0,0,0,.22)}
.brand{display:flex;align-items:center;gap:10px;padding:4px 10px 23px;color:#fff;font-size:15px;font-weight:950;letter-spacing:-.02em}
.brand:before{content:"AS";display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:linear-gradient(135deg,#69b9ff,#4de3c2);color:#06101a;font-size:12px;box-shadow:0 0 25px rgba(77,227,194,.14)}
.brand small{position:absolute;left:56px;top:52px;color:#617992;font-size:8px;font-weight:600;letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{padding:11px 10px 5px;color:#4e6881;font-size:8px;font-weight:950;letter-spacing:.18em;text-transform:uppercase}
.nav a{position:relative;display:flex;align-items:center;gap:9px;padding:10px 11px;border:1px solid transparent;border-radius:10px;color:#93a9c0;text-decoration:none;font-size:11px;font-weight:750;transition:all .18s ease}
.nav a:before{content:"";width:5px;height:5px;border:1px solid #4276a8;border-radius:50%;box-shadow:0 0 8px transparent}
.nav a:hover{background:#091b2e;color:#eef6ff;border-color:#173a59}
.nav a.active{color:#fff;background:linear-gradient(90deg,#0d2745,#09192c);border-color:#214d74;box-shadow:inset 2px 0 0 var(--blue),0 10px 25px rgba(0,0,0,.16)}
.nav a.active:before{background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 9px rgba(77,227,194,.6)}
.nav a.signout{color:#ff8e9b;margin-top:7px}
.side-status{position:absolute;left:12px;right:12px;bottom:68px;padding:11px 12px;border:1px solid #15304a;border-radius:12px;background:#071525;display:grid;grid-template-columns:8px 1fr;column-gap:8px;align-items:center}
.side-status span{grid-row:1/3;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.side-status b{font-size:9px}.side-status small{color:#667f99;font-size:8px}
.main{width:calc(100% - 205px);margin-left:205px;padding:28px 32px 70px;max-width:1600px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.title h1{margin:0;font-size:29px;line-height:1.1;letter-spacing:-.045em}
.title p{margin:7px 0 0;color:var(--muted);font-size:12px}
.eyebrow{color:var(--cyan);font-size:8px;font-weight:950;letter-spacing:.19em;text-transform:uppercase}
.top-actions{display:flex;gap:9px;align-items:center}
.status-online{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border:1px solid #17504a;border-radius:999px;color:#6de9ca;background:#061a1a;font-size:8px;font-weight:950;letter-spacing:.06em;white-space:nowrap}
.status-online:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 11px var(--green)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:37px;padding:8px 13px;border-radius:9px;text-decoration:none;cursor:pointer;font-weight:850;font-size:10px;border:1px solid transparent;transition:.18s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.primary{color:#03111b;background:linear-gradient(135deg,#64b4ff,#4de3c2);box-shadow:0 10px 28px rgba(56,181,225,.14)}
.light{color:#dce9f6;background:#0a1a2d;border-color:#1d3d5a}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;margin-bottom:12px}
.card,.panel{background:linear-gradient(180deg,rgba(10,25,42,.98),rgba(6,17,30,.98));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:16px 17px;min-height:96px}
.metric-row{display:flex;justify-content:space-between;gap:10px}
.label{color:#728aa4;font-size:8px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.value{margin-top:4px;font-size:27px;font-weight:950;letter-spacing:-.045em}
.muted{color:var(--muted);font-size:10px}
.metric-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;background:#0a2138;border:1px solid #1b4567;color:var(--blue);font-size:13px}
.panel{padding:18px;margin-top:12px;overflow:hidden}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px}
.panel-title{font-size:14px;font-weight:900;letter-spacing:-.02em}
.panel-sub{color:var(--muted2);font-size:9px;margin-top:3px}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(280px,.72fr);gap:12px}
.dashboard-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dashboard-grid-3{display:grid;grid-template-columns:1.1fr 1.1fr .85fr;gap:12px}
.chart{height:218px;display:flex;align-items:flex-end;gap:5px;padding:14px 6px 4px;margin-top:5px;border-top:1px solid #112a43;background:linear-gradient(180deg,rgba(5,15,26,.1),transparent)}
.bar-col{height:100%;flex:1;min-width:4px;position:relative;display:flex;align-items:flex-end;justify-content:center}
.bar{width:100%;max-width:18px;min-height:2px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#63afff,#4de3c2);box-shadow:0 0 17px rgba(77,227,194,.12)}
.bar-col span{position:absolute;bottom:-16px;color:#4e6780;font-size:7px}
.chart-label{display:flex;justify-content:space-between;color:#4e6780;font-size:8px;margin-top:15px}
.score-wrap{display:grid;place-items:center;min-height:218px}
.score-ring{width:145px;height:145px;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 0 45px rgba(77,227,194,.08)}
.score-ring:after{content:"";position:absolute;inset:11px;border-radius:50%;background:#071321;border:1px solid #17334c}
.score-content{position:relative;z-index:2;text-align:center}.score-content b{display:block;font-size:30px;letter-spacing:-.05em}.score-content span{display:block;color:var(--green);font-size:8px;font-weight:950;margin-top:1px}
.mix{display:flex;align-items:center;gap:18px}.mix-compact{min-height:150px}.donut{width:118px;height:118px;border-radius:50%;flex:0 0 auto;position:relative;background:conic-gradient(#5aa9ff 0 60%,#4de3c2 60% 98%,#ff7180 98% 100%);box-shadow:0 0 30px rgba(90,169,255,.08)}
.donut:after{content:"";position:absolute;inset:20px;border-radius:50%;background:#071321;border:1px solid #183650}
.donut-center{position:absolute;z-index:2;inset:0;display:grid;place-content:center;text-align:center}.donut-center b{font-size:22px;line-height:1}.donut-center span{font-size:7px;color:#68819b;text-transform:uppercase;letter-spacing:.12em;margin-top:4px}
.mix-list{display:grid;gap:8px;width:100%}.mix-item{display:flex;justify-content:space-between;gap:10px;color:#a7bad0;font-size:10px}.mix-item i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5aa9ff;margin-right:7px}.mix-item:nth-child(2) i{background:#4de3c2}.mix-item:nth-child(3) i{background:#ff7180}
.info-list{display:grid;gap:0}.info-list>div{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #112a41;font-size:9px}.info-list>div:last-child{border-bottom:0}.info-list span{color:#6f87a1}.info-list b{color:#dce8f4;font-size:9px}.panel-action{display:flex;justify-content:space-between;align-items:center;margin-top:11px;padding:8px 10px;border:1px solid #1a3a56;border-radius:8px;text-decoration:none;background:#081a2c;color:#dbe9f7;font-size:9px;font-weight:800}
.health-list{display:grid;gap:0}.health-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #112a41;font-size:9px}.health-row:last-child{border-bottom:0}.ok{color:#5de0ba;font-weight:950}.warn{color:#f4ce67;font-weight:950}.bad{color:#ff8595;font-weight:950}
.quick{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.quick a{display:block;padding:13px 7px;border:1px solid #15324b;background:#081728;border-radius:10px;text-align:center;text-decoration:none;color:#a6b9ce;font-size:9px;font-weight:800;transition:.18s}.quick a:hover{border-color:#2c5c83;background:#0b1e32;color:#fff;transform:translateY(-1px)}.quick .qicon{width:26px;height:26px;display:grid;place-items:center;margin:0 auto 7px;border-radius:8px;background:#0d2844;color:#5db2ff}
.table-wrap{margin-top:12px;border:1px solid var(--line);border-radius:13px;background:#071322;overflow:auto;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;min-width:900px}th,td{padding:11px 12px;border-bottom:1px solid #10263d;text-align:left;vertical-align:top}th{color:#5e7791;background:#081827;font-size:8px;font-weight:950;letter-spacing:.11em;text-transform:uppercase}td{color:#c2cfde;font-size:9px}tr:hover td{background:rgba(45,99,144,.09)}td b{color:#f2f7fd}
.badge{display:inline-flex;padding:4px 7px;border-radius:999px;font-size:8px;font-weight:950;letter-spacing:.05em}.running{background:#072a24;color:#5ee2bb;border:1px solid #155544}.paused{background:#2c260f;color:#f6cf68;border:1px solid #5b4b1d}.stopped{background:#32151c;color:#ff8f9c;border:1px solid #6b2d38}
.actions{white-space:normal}.actions form{display:inline}.actions button{margin:2px;padding:6px 8px;border:1px solid transparent;border-radius:7px;cursor:pointer;font-size:9px;font-weight:850}.start{background:#092d25;color:#62e2bb;border-color:#155544}.pause{background:#30270e;color:#f5cf68;border-color:#5c4b1d}.stop,.delete{background:#33161d;color:#ff9aa5;border-color:#68313c}.actions .btn{min-height:29px;padding:5px 8px;font-size:9px}
.campaign-url{display:flex;gap:6px;align-items:center;margin-top:6px;max-width:450px}.campaign-url input{flex:1;min-width:130px;padding:7px 8px;border:1px solid #1a3955;border-radius:7px;background:#06111f;color:#8fa7c0;font-size:8px}.copy-btn{white-space:nowrap;border:1px solid #214a6b;border-radius:7px;padding:7px 8px;background:#0b2540;color:#69b8ff;font-weight:850;font-size:8px;cursor:pointer}.copy-btn.copied{background:#082d26;color:#5ee2bb;border-color:#155544}
.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.module{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px;border:1px solid #15334d;border-radius:11px;background:linear-gradient(180deg,#091a2b,#071524)}.module-main{display:flex;gap:10px;align-items:flex-start}.module-icon{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:#0c2541;color:#65b6ff;font-size:10px}.module b{display:block;font-size:10px}.module span{display:block;color:#7088a1;font-size:8px;margin-top:2px}.toggle{width:35px;height:19px;border-radius:20px;background:#123c3a;border:1px solid #286b61;position:relative;flex:0 0 auto}.toggle:after{content:"";position:absolute;width:11px;height:11px;right:3px;top:3px;border-radius:50%;background:#4de3c2;box-shadow:0 0 10px rgba(77,227,194,.45)}
.event-list,.ranking-list,.reason-list{display:grid;gap:0}.event-row{display:grid;grid-template-columns:10px 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid #112a41}.event-row:last-child,.rank-row:last-child,.reason-row:last-child{border-bottom:0}.event-dot{width:7px;height:7px;border-radius:50%;background:#5da9ff;box-shadow:0 0 9px rgba(93,169,255,.4)}.event-dot.bot{background:#f4ce67}.event-dot.blocked{background:#ff7180}.event-main b{display:block;font-size:10px}.event-main span,.event-meta span{display:block;color:#657d96;font-size:8px;margin-top:2px}.event-meta{text-align:right}.event-meta strong{font-size:8px;color:#5de0ba}.rank-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #112a41}.rank-num{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;background:#0b2440;color:#63b3ff;font-size:9px;font-weight:950}.rank-main{flex:1}.rank-main b{display:block;font-size:10px}.rank-main span{display:block;color:#667e97;font-size:8px;margin-top:2px}.rank-row>strong{font-size:12px}.reason-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #112a41}.reason-row span{color:#9fb2c7;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reason-row b{color:#5db0ff;font-size:10px}
.trend-chart{height:180px;display:flex;align-items:flex-end;gap:7px;padding:15px 5px 5px;border-top:1px solid #112a41;margin-top:4px}.trend-chart.large{height:230px}.trend-col{height:100%;flex:1;position:relative;display:flex;align-items:flex-end;justify-content:center;min-width:9px}.trend-bar{width:100%;max-width:24px;min-height:2px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#5da9ff,#4de3c2);box-shadow:0 0 15px rgba(77,227,194,.12)}.trend-col span{position:absolute;bottom:-18px;color:#4f6880;font-size:7px;white-space:nowrap}.trend-value{position:absolute;bottom:100%;margin-bottom:3px;color:#69839d;font-size:7px}
.score-mini{display:grid;place-items:center;min-height:180px}.big-donut{width:145px;height:145px}.big-donut:after{inset:24px}
.empty-state{padding:24px;text-align:center;color:#637b94;font-size:9px;border:1px dashed #18344d;border-radius:9px}
.log-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.log-summary .card{min-height:auto}.searchbar{display:flex;gap:7px;flex-wrap:wrap}.searchbar input,.searchbar select{background:#061321;color:#dce8f4;border:1px solid #1a3955;border-radius:8px;padding:9px 10px;outline:none;font-size:10px}.searchbar input{min-width:240px}
.form-card{background:linear-gradient(180deg,#0b1b2d,#071524);border:1px solid var(--line);border-radius:15px;padding:20px;box-shadow:var(--shadow)}.form-card label{display:block;font-size:9px;color:#8fa5bd;font-weight:900;letter-spacing:.07em;text-transform:uppercase;margin:15px 0 6px}.form-card input,.form-card textarea,.form-card select{width:100%;padding:11px 12px;border:1px solid #1b3a55;border-radius:9px;background:#061321;color:#edf5ff;font-size:12px;outline:none}.form-card input:focus,.form-card textarea:focus,.form-card select:focus{border-color:#4d9ee5;box-shadow:0 0 0 3px rgba(77,158,229,.12)}
.notice{padding:11px;border:1px solid #59471d;border-radius:9px;background:#211c0d;color:#e6c86b;font-size:10px}.err{padding:11px;border:1px solid #67303a;border-radius:9px;background:#2a1117;color:#ff9ca8;font-size:10px}.footer-note{color:#50677f;font-size:8px;margin-top:15px}
@media(max-width:1200px){.cards{grid-template-columns:repeat(2,1fr)}.dashboard-grid-3{grid-template-columns:1fr 1fr}.dashboard-grid-3>section:last-child{grid-column:1/-1}.quick{grid-template-columns:repeat(3,1fr)}}
@media(max-width:850px){.side{position:static;width:100%;height:auto;padding:10px 12px;border-right:0;border-bottom:1px solid #10243a}.layout{display:block}.main{width:100%;margin:0;padding:19px 13px 45px}.brand{padding:4px 5px 18px}.brand small{left:52px;top:40px}.nav{flex-direction:row;overflow-x:auto;padding-bottom:2px}.nav-label{display:none}.nav a{white-space:nowrap;padding:8px 10px;font-size:10px}.side-status{display:none}.dashboard-grid,.dashboard-grid-2,.dashboard-grid-3{grid-template-columns:1fr}.dashboard-grid-3>section:last-child{grid-column:auto}.top{flex-direction:column}.top-actions{width:100%;justify-content:space-between}.top-actions .primary{flex:1}.title h1{font-size:25px}}
@media(max-width:620px){.cards{grid-template-columns:1fr 1fr;gap:8px}.card{padding:13px}.value{font-size:23px}.panel{padding:14px}.quick{grid-template-columns:repeat(2,1fr)}.chart{height:180px;gap:3px}.bar{max-width:12px}.mix{flex-direction:column}.log-summary{grid-template-columns:1fr}.searchbar input,.searchbar select{width:100%;min-width:0}table{min-width:850px}.campaign-url{max-width:100%}}
@media(max-width:420px){.cards{grid-template-columns:1fr}.top-actions{flex-direction:column;align-items:stretch}.top-actions .status-online{align-self:flex-start}}


/* V6.1 readability pass — UI only. Existing components and layout preserved. */
.brand{font-size:16px;line-height:1.18;min-height:55px;align-items:flex-start;padding-top:4px}
.brand small{font-size:9px;top:55px}
.nav a{font-size:12px;padding-top:11px;padding-bottom:11px}
.nav-label{font-size:9px}
.title h1{font-size:31px}
.title p{font-size:13px}
.eyebrow{font-size:9px}
.status-online{font-size:9px}
.btn{font-size:11px}
.label{font-size:9px}
.value{font-size:29px}
.muted{font-size:11px}
.panel-title{font-size:16px}
.panel-sub{font-size:10px}
.info-list>div{font-size:10px}.info-list>div b{font-size:10px}
.health-row{font-size:10px}
.health-row b{font-size:10px}
.module b{font-size:11px}.module span{font-size:9px}
.quick a{font-size:10px}
th{font-size:9px}td{font-size:10px}
.badge{font-size:9px}
.actions button,.actions .btn{font-size:10px}
.campaign-url input,.copy-btn{font-size:9px}
.event-main b,.rank-main b{font-size:11px}
.event-main span,.event-meta span,.rank-main span{font-size:9px}
.reason-row span{font-size:10px}.reason-row b{font-size:11px}
.searchbar input,.searchbar select{font-size:11px}
.form-card label{font-size:10px}.form-card input,.form-card textarea,.form-card select{font-size:13px}
.notice,.err{font-size:11px}.footer-note{font-size:9px}
@media(max-width:850px){.brand small{top:55px}.nav a{font-size:11px}.title h1{font-size:27px}}
@media(max-width:620px){.value{font-size:25px}.panel-title{font-size:15px}.module b{font-size:11px}.module span{font-size:9px}}

/* STEP 19 — ABF ADMIN UI POLISH — CSS ONLY */
html{scroll-behavior:smooth;color-scheme:dark}
body{background:radial-gradient(1000px 620px at 82% -15%,rgba(72,157,255,.13),transparent 60%),radial-gradient(800px 600px at 8% 0%,rgba(85,225,194,.05),transparent 62%),#050a13}
.side{backdrop-filter:blur(18px);box-shadow:24px 0 80px rgba(0,0,0,.28)}
.main{background:linear-gradient(180deg,rgba(255,255,255,.008),transparent 30%)}
.card,.panel,.metric,.stat,.table-wrap{box-shadow:0 24px 75px rgba(0,0,0,.30);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.card:hover,.panel:hover,.metric:hover,.stat:hover{transform:translateY(-2px);border-color:#2c5577}
.table-wrap{overflow:auto;border-radius:15px}
.table thead th{position:sticky;top:0;z-index:2;background:#0c192a;backdrop-filter:blur(10px)}
.table tbody tr:hover{background:rgba(96,174,235,.055)}
input,select,textarea{transition:border-color .16s ease,box-shadow .16s ease}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(77,157,224,.12);border-color:#4d9de0}
.btn{min-height:40px;border-radius:11px}
.modal{backdrop-filter:blur(6px)}
.toast{box-shadow:0 20px 65px rgba(0,0,0,.44);backdrop-filter:blur(14px)}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}