:root{
  --bg:#0b0b0d;
  --bg-soft:#15161a;
  --bg-card:#1a1c20;
  --bg-card-2:#20242b;
  --text:#f4f7fb;
  --muted:#aeb6c3;
  --line:rgba(255,255,255,.08);
  --shadow:0 16px 40px rgba(0,0,0,.28);
  --blue:#23a6f3;
  --purple:#6a3cff;
  --gray:#676d78;
  --light:#d9dde4;
  --success:#3fcf8e;
  --warning:#f1b44c;
  --page-bg:linear-gradient(180deg,#090909,#111317 65%,#0d0f12);
  --sidebar-bg:rgba(8,8,10,.96);
  --card-gradient:linear-gradient(180deg,rgba(33,36,43,.96),rgba(24,25,29,.96));
  --surface:#17191d;
  --surface-2:#16191e;
  --track:#2a2e35;
  --soft-text:#dbe2ed;
}
html[data-theme="light"]{
  --bg:#f4f5f7;
  --bg-soft:#eceef2;
  --bg-card:#ffffff;
  --bg-card-2:#f7f8fa;
  --text:#111318;
  --muted:#626a76;
  --line:rgba(17,19,24,.10);
  --shadow:0 14px 35px rgba(17,19,24,.08);
  --gray:#7b828d;
  --light:#dfe3e8;
  --page-bg:linear-gradient(180deg,#f7f8fa,#eef0f4 70%,#f6f7f9);
  --sidebar-bg:rgba(255,255,255,.97);
  --card-gradient:linear-gradient(180deg,#ffffff,#f8f9fb);
  --surface:#f1f3f6;
  --surface-2:#f4f6f8;
  --track:#e2e6eb;
  --soft-text:#28303b;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,sans-serif;background:var(--page-bg);color:var(--text);transition:background .25s ease,color .25s ease}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer}
.app-shell{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--sidebar-bg);border-right:1px solid var(--line);padding:26px 20px;display:flex;flex-direction:column;gap:28px}
.brand-block{display:flex;align-items:center;gap:14px}.brand-logo{width:68px;height:68px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow)}
.eyebrow{margin:0 0 4px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:700}.brand-block h1,.topbar h2,.section-head h3,.report-header h1{margin:0}
.menu{display:flex;flex-direction:column;gap:10px}.menu-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;color:#c8cfda;background:transparent;transition:.25s ease}.menu-item:hover,.menu-item.active{background:linear-gradient(90deg,rgba(35,166,243,.14),rgba(106,60,255,.14));color:#fff;border:1px solid rgba(255,255,255,.06)}
.sidebar-card,.panel-card,.hero-card,.metric-card,.note-box{background:var(--card-gradient);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.sidebar-card{padding:16px 18px}.muted-label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}.muted-copy{color:var(--muted);font-size:13px;margin:6px 0 0}
.content{padding:26px 28px 38px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.header-actions{display:flex;gap:12px}
.primary-btn,.ghost-btn,.link-btn{border:none;padding:12px 18px;border-radius:14px;font-weight:700;transition:.25s ease}.primary-btn{background:linear-gradient(90deg,var(--blue),var(--purple));color:#fff}.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.05)}.ghost-btn{background:var(--surface);color:#eef2f7;border:1px solid var(--line)}.ghost-btn:hover{background:var(--bg-card-2)}
.hero-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:20px}.hero-card{padding:24px}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:20px}.section-head.compact{margin-bottom:16px}.tag{padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700}.tag.positive{background:rgba(63,207,142,.12);color:#88ecb6;border:1px solid rgba(63,207,142,.2)}
.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.metric-card{padding:18px;transition:.25s ease}.metric-card:hover,.panel-card:hover,.hero-card:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.12)}.metric-label{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.metric-card strong{font-size:28px;line-height:1.1}.metric-card small{display:block;margin-top:8px;color:#b7c1ce}
.pizza-wrapper{display:flex;flex-direction:column;align-items:center;gap:18px;padding-top:4px}.donut-block{position:relative;width:220px;height:220px;display:grid;place-items:center}.donut{width:220px;height:220px;transform:rotate(-90deg)}.donut-track,.donut-progress{fill:none;stroke-width:14}.donut-track{stroke:#2b2f36}.donut-progress{stroke:url(#grad)}
.donut circle.donut-progress{stroke:var(--blue);stroke-linecap:round}.donut-center{position:absolute;text-align:center}.donut-center strong{display:block;font-size:34px}.donut-center span{color:var(--muted)}
.legend-list{list-style:none;padding:0;margin:0;width:100%;display:grid;gap:10px}.legend-list li{display:flex;align-items:center;gap:10px;color:#d2d8e1}.dot{width:12px;height:12px;border-radius:50%}.dot-purple{background:var(--purple)}.dot-blue{background:var(--blue)}.dot-gray{background:#6f7782}.dot-light{background:#b8c0cb}
.dashboard-grid,.bottom-grid,.report-cards-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:20px;margin-bottom:20px}.panel-card{padding:22px}.panel-card.large{grid-column:span 1}.chart-bars{display:grid;gap:16px}.bar-row{display:grid;grid-template-columns:120px 1fr auto;gap:14px;align-items:center}.bar-row span{color:#d6dce7;font-size:14px}.bar-row strong{font-size:14px}.bar-track{height:12px;background:var(--track);border-radius:999px;overflow:hidden}.bar-fill{height:100%;background:linear-gradient(90deg,var(--blue),var(--purple));border-radius:999px}.w-82{width:82%}.w-74{width:74%}.w-68{width:68%}.w-88{width:88%}
.info-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}.chip{padding:10px 12px;background:#171a1f;border:1px solid var(--line);border-radius:999px;color:#dfe6f1;font-size:13px}
.campaign-list,.keyword-list,.waste-list,.clean-list{list-style:none;padding:0;margin:0;display:grid;gap:12px}.campaign-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:18px}.campaign-item small{display:block;color:var(--muted);margin-top:4px}
.status{padding:8px 10px;border-radius:999px;font-size:12px;font-weight:700}.status.up{background:rgba(63,207,142,.12);color:#85e5b1}.status.neutral{background:rgba(255,255,255,.08);color:#e6edf8}.status.attention{background:rgba(241,180,76,.14);color:#ffcf78}
.keyword-list li,.waste-list li,.clean-list li{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:12px;color:var(--soft-text)}.keyword-list li:last-child,.waste-list li:last-child,.clean-list li:last-child{border-bottom:none}.divider{height:1px;background:var(--line);margin:18px 0}.mini-title{margin:0 0 12px;color:#fff;font-weight:700}
.note-box{padding:18px;margin-bottom:12px}.note-box p,.report-copy{margin:0;color:#dde4ef;line-height:1.7}
.timeline{display:grid;gap:18px}.timeline-item{display:grid;grid-template-columns:20px 1fr;gap:14px;align-items:start}.timeline-dot{width:14px;height:14px;border-radius:50%;margin-top:6px;background:#404650;border:3px solid #2a2e35}.timeline-item.done .timeline-dot{background:var(--success)}.timeline-item.current .timeline-dot{background:var(--blue)}.timeline-item p{margin:6px 0 0;color:var(--muted);line-height:1.6}
.client-report-page,.admin-shell{max-width:1180px;margin:0 auto;padding:32px 24px}.report-header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.brand-inline{display:flex;align-items:center;gap:16px}.inline-logo{width:56px;height:56px;border-radius:50%;object-fit:cover}.inline-logo.lg{width:78px;height:78px}.report-id{display:grid;gap:6px;text-align:right;color:#d8dee8}.report-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}.two-col{grid-template-columns:1fr 1fr}.admin-shell{min-height:100vh;display:grid;place-items:center}.admin-center{text-align:center;max-width:720px}.admin-links{display:flex;justify-content:center;gap:12px;margin-top:22px}
@media (max-width: 1100px){.hero-grid,.dashboard-grid,.bottom-grid,.report-cards-grid,.report-kpis{grid-template-columns:1fr}.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto}.content{padding-top:10px}.topbar,.report-header{flex-direction:column;align-items:flex-start}.report-id{text-align:left}}
@media (max-width: 720px){.content,.client-report-page,.admin-shell{padding:18px}.metric-grid{grid-template-columns:1fr}.header-actions,.admin-links{flex-direction:column;width:100%}.primary-btn,.ghost-btn,.link-btn{width:100%}.donut-block{width:180px;height:180px}.donut{width:180px;height:180px}.brand-logo{width:54px;height:54px}.bar-row{grid-template-columns:1fr;gap:8px}.bar-row strong{justify-self:start}}

.theme-toggle{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:11px 14px;border-radius:14px;font-weight:700;transition:.25s ease;box-shadow:none}
.theme-toggle:hover{transform:translateY(-1px);border-color:rgba(35,166,243,.35)}
.theme-toggle-icon{font-size:17px;line-height:1}
.report-controls{display:flex;align-items:center;gap:16px}
.admin-theme-row{display:flex;justify-content:flex-end;margin-bottom:8px}
html[data-theme="light"] .menu-item{color:#4f5865}
html[data-theme="light"] .menu-item:hover,html[data-theme="light"] .menu-item.active{color:#111318;background:linear-gradient(90deg,rgba(35,166,243,.10),rgba(106,60,255,.08))}
html[data-theme="light"] .ghost-btn{color:#111318}
html[data-theme="light"] .campaign-item,html[data-theme="light"] .chip{color:#111318}
html[data-theme="light"] .keyword-list li,html[data-theme="light"] .waste-list li,html[data-theme="light"] .clean-list li{color:#28303b}
@media (max-width: 720px){.report-controls{width:100%;align-items:flex-start;flex-direction:column}.theme-toggle{width:100%;justify-content:center}}

/* Client reports */
.client-banner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 24px;margin-bottom:20px;background:linear-gradient(180deg,rgba(33,36,43,.96),rgba(24,25,29,.96));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}
.client-banner h2{margin:2px 0 0;font-size:30px}.report-controls{display:flex;gap:10px;align-items:center}.report-footer{display:flex;align-items:center;gap:12px;padding:20px 4px 8px;color:var(--muted)}.report-footer img{width:42px;height:42px;border-radius:50%}.report-footer div{display:grid;gap:4px}.report-footer strong{color:var(--text)}.report-footer span{font-size:12px}.mini-pizza{padding-top:0}.small-donut,.small-donut .donut{width:170px;height:170px}.report-chips{margin-top:20px}
.admin-page{max-width:1280px;margin:0 auto;padding:30px 24px}.admin-topbar{margin-bottom:20px}.admin-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:20px}.admin-intro h2{margin:4px 0 0}.admin-intro .report-copy{max-width:580px}.client-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.client-card{padding:20px}.client-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.client-card h3{margin:2px 0 0}.client-card-actions{display:flex;gap:10px;margin-top:18px}.tag.inactive{background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line)}
[data-theme="light"] .client-banner{background:#fff}
@media(max-width:1000px){.client-grid{grid-template-columns:repeat(2,1fr)}.admin-intro{flex-direction:column;align-items:flex-start}}
@media(max-width:700px){.client-grid{grid-template-columns:1fr}.client-banner,.report-header{flex-direction:column;align-items:flex-start}.report-controls{width:100%;flex-wrap:wrap}.report-controls button{flex:1}.client-card-actions{flex-direction:column}.admin-page{padding:18px}}
@media print{
  @page{size:A4;margin:10mm}
  html,body{background:#0b0b0d!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .no-print,.theme-toggle{display:none!important}
  .client-report-page{max-width:none!important;padding:0!important}
  .report-header{margin-bottom:12px}.report-kpis{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}.report-cards-grid.two-col{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .metric-card,.panel-card,.client-banner{break-inside:avoid;box-shadow:none!important}
  .metric-card{padding:12px!important}.metric-card strong{font-size:20px!important}.panel-card{padding:14px!important}.client-banner{padding:14px 16px!important}.client-banner h2{font-size:24px!important}
  .report-footer{margin-top:6px}.report-copy,.note-box p,.timeline-item p{font-size:11px!important;line-height:1.45!important}.clean-list li,.keyword-list li,.waste-list li{font-size:11px!important;padding:7px 0!important}
}