:root{--bg:#f6f7fb;--panel:#fff;--text:#0a1020;--muted:#667085;--line:rgba(15,23,42,.10);--soft:#f1f4f9;--soft2:#e9eef7;--brand:#0b0f19;--brandText:#fff;--good:#16a34a;--warn:#b45309;--danger:#dc2626;--shadow:0 16px 48px rgba(15,23,42,.07);--radius:18px}html[data-theme="dark"]{--bg:#070b14;--panel:#0e1422;--text:#f8fafc;--muted:#a6b0c4;--line:rgba(255,255,255,.12);--soft:#121a2b;--soft2:#1a2438;--brand:#f8fafc;--brandText:#050712;--shadow:0 20px 60px rgba(0,0,0,.32)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}.adm-login{min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 16% 4%,rgba(124,92,255,.13),transparent 34%),radial-gradient(circle at 86% 6%,rgba(37,211,171,.11),transparent 34%),var(--bg)}.adm-login-card{width:min(440px,100%);background:var(--panel);border:1px solid var(--line);border-radius:30px;padding:34px;box-shadow:var(--shadow)}.adm-logo img{height:42px;width:auto;display:block}.pill{display:inline-flex;border:1px solid var(--line);background:var(--soft);color:var(--muted);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:900;letter-spacing:.02em}.adm-login h1,.page-title{font-size:clamp(34px,4vw,52px);line-height:.98;letter-spacing:-.06em;margin:18px 0 10px}.muted{color:var(--muted);line-height:1.45}.field,label.field{display:grid;gap:7px}.field span{font-weight:850;font-size:13px;color:var(--muted)}input,select,textarea{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;padding:12px 13px;font:inherit;outline:none}textarea{resize:vertical;min-height:86px}input:focus,textarea:focus,select:focus{border-color:rgba(15,23,42,.32);box-shadow:0 0 0 4px rgba(15,23,42,.06)}.btn{border:0;border-radius:999px;background:var(--brand);color:var(--brandText);padding:11px 15px;min-height:42px;font-weight:950;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn.secondary{background:var(--soft);color:var(--text);border:1px solid var(--line)}.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line)}.btn.small{font-size:12px;min-height:34px;padding:7px 11px}.btn:disabled{opacity:.55;cursor:not-allowed}.app-shell{min-height:100vh;display:grid;grid-template-columns:238px minmax(0,1fr)}.side{background:var(--panel);border-right:1px solid var(--line);padding:18px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:18px}.side .adm-logo{padding:6px}.nav{display:grid;gap:6px}.nav a{border-radius:12px;padding:11px 12px;text-decoration:none;font-weight:850;color:var(--muted)}.nav a.active,.nav a:hover{background:var(--soft);color:var(--text)}.side-foot{margin-top:auto;display:grid;gap:8px}.main{padding:24px;max-width:1600px;width:100%;margin:0 auto}.topbar{display:none;align-items:center;justify-content:space-between;padding:12px 14px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.topbar img{height:32px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-end}.hero h1{margin:6px 0 6px}.hero p{margin:0}.stats{display:flex;gap:8px;flex-wrap:wrap}.stat{min-width:92px;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:10px;text-align:center}.stat b{font-size:24px}.stat span{display:block;font-size:11px;color:var(--muted);font-weight:850}.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.quick{display:grid;gap:10px}.quick a{text-decoration:none}.tabs{display:flex;gap:8px;overflow:auto;margin:16px 0}.tab{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 12px;font-weight:900;white-space:nowrap;cursor:pointer}.tab.active{background:var(--brand);color:var(--brandText)}.ad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}.ad-tile{background:var(--panel);border:1px solid var(--line);border-radius:15px;overflow:hidden;cursor:pointer;box-shadow:0 8px 28px rgba(15,23,42,.045);transition:.14s transform,.14s box-shadow}.ad-tile:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(15,23,42,.09)}.thumb{aspect-ratio:1/1;background:var(--soft);display:grid;place-items:center;overflow:hidden;position:relative}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.thumb.empty span{font-size:12px;color:var(--muted);font-weight:900;text-align:center;padding:10px}.badge{position:absolute;top:7px;right:7px;border-radius:999px;background:rgba(11,15,25,.86);color:#fff;font-size:9px;font-weight:900;padding:4px 6px}.ad-tile h3{font-size:13px;line-height:1.14;letter-spacing:-.02em;margin:9px 9px 10px;min-height:30px}.mini-tags{display:flex;gap:4px;flex-wrap:wrap;padding:0 9px 10px}.mini-tags span{font-size:9px;background:var(--soft);color:var(--muted);border-radius:999px;padding:4px 6px;font-weight:900}.empty{padding:28px;text-align:center}.modal-backdrop{position:fixed;inset:0;background:rgba(3,7,18,.58);z-index:1000;display:grid;place-items:center;padding:18px;overflow:auto}.modal{width:min(1120px,100%);max-height:min(92vh,980px);max-height:min(92dvh,980px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--panel);border:1px solid var(--line);border-radius:24px;box-shadow:0 34px 110px rgba(0,0,0,.35);position:relative}.modal-head{position:sticky;top:0;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px);z-index:2;display:flex;justify-content:space-between;gap:14px;align-items:flex-start;padding:18px;border-bottom:1px solid var(--line)}.modal-head h2{margin:4px 0;font-size:24px;letter-spacing:-.04em}.x{border:1px solid var(--line);background:var(--soft);color:var(--text);border-radius:999px;width:38px;height:38px;font-size:22px;cursor:pointer}.modal-body{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(360px,1fr);gap:16px;padding:18px}.preview{background:var(--soft);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:grid;place-items:center;min-height:320px}.preview img{max-width:100%;max-height:560px;object-fit:contain}.form-grid{display:grid;gap:12px}.section{border:1px solid var(--line);background:var(--panel);border-radius:16px;padding:13px;display:grid;gap:10px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-head b{font-size:13px}.section-head span{display:block;font-size:12px;color:var(--muted)}.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.format-card{border:1px solid var(--line);background:var(--soft);border-radius:13px;min-height:128px;padding:8px;display:grid;place-items:center;text-align:center;gap:5px}.format-card img{max-width:100%;max-height:130px;border-radius:9px;object-fit:contain}.format-card em{width:42px;height:42px;background:var(--soft2);border-radius:10px}.format-card b{font-size:12px}.format-card span{font-size:11px;color:var(--muted)}.serp{border:1px solid var(--line);background:var(--soft);border-radius:13px;padding:10px}.serp small{color:var(--muted)}.serp h3{font-size:16px;margin:3px 0;color:#1a0dab}.serp p{font-size:12px;color:var(--muted);margin:0}.button-row{display:flex;gap:8px;flex-wrap:wrap}.lock{background:linear-gradient(180deg,rgba(22,163,74,.09),transparent),var(--panel)}.lock strong{display:inline-flex;background:#dcfce7;color:#166534;border-radius:999px;padding:5px 8px;font-size:11px}.progress{position:absolute;inset:0;z-index:5;background:rgba(255,255,255,.88);backdrop-filter:blur(9px);display:grid;place-items:center;text-align:center;padding:24px}.progress i{width:38px;height:38px;border-radius:999px;border:3px solid #e5e7eb;border-top-color:#0b0f19;display:block;margin:0 auto 12px;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:2000;background:#111827;color:white;border-radius:999px;padding:11px 15px;font-weight:850;box-shadow:0 16px 45px rgba(0,0,0,.2)}.danger{color:var(--danger)}.warn{color:var(--warn)}@media(min-width:1500px){.ad-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}}@media(max-width:900px){.app-shell{display:block}.topbar{display:flex}.main{padding:14px}.hero{display:block}.grid2{grid-template-columns:1fr}.ad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.modal-backdrop{padding:0;align-items:end;height:100vh;height:100dvh}.modal{width:100%;max-height:92vh;max-height:92dvh;border-radius:22px 22px 0 0}.modal-body{grid-template-columns:1fr;padding:14px}.preview{min-height:240px}.modal-head{padding:14px}.format-grid{grid-template-columns:1fr 1fr}.ad-tile h3{font-size:12.5px}.stats{margin-top:12px}.login-card{padding:24px}}@media(max-width:380px){.ad-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ad-tile h3{font-size:12px}}

/* Feature restore UI */
.top-actions{display:flex;gap:6px;align-items:center}.mobile-dim{display:none}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:14px 0}.sub-tabs a{text-decoration:none}.mini-row{display:grid;gap:3px;border:1px solid var(--line);border-radius:14px;padding:10px;margin:8px 0;background:var(--soft)}.mini-row span,.mini-row a{font-size:12px;color:var(--muted)}.table-wrap{overflow:auto}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}.table-wrap th{font-size:12px;color:var(--muted)}.clean-list{margin:0;padding-left:18px;color:var(--muted);line-height:1.65}.upload-panel input[type=file]{border:1px dashed var(--line);background:var(--soft);padding:18px;border-radius:16px}.asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-top:14px}.asset-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 26px rgba(15,23,42,.045)}.asset-card .thumb{aspect-ratio:1.25/1}.asset-meta{display:grid;gap:7px;padding:10px}.asset-meta input,.asset-meta select{padding:8px;border-radius:10px;font-size:12px}.asset-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.asset-pick{display:grid;gap:5px;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:7px;font-size:11px;font-weight:800;cursor:pointer}.asset-pick img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:8px}.asset-pick input{width:auto}.upload-panel{margin:14px 0}@media(max-width:900px){body.menu-open{overflow:hidden}.mobile-dim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40}body.menu-open .mobile-dim{display:block}.app-shell{display:block}.side{position:fixed;display:flex;left:0;top:0;bottom:0;width:min(82vw,310px);height:100vh;z-index:50;transform:translateX(-105%);transition:.18s transform}.menu-open .side{transform:translateX(0)}.top-actions .btn{padding:6px 8px;min-height:32px;font-size:11px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.asset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.table-wrap table{min-width:720px}.main{padding-bottom:80px}}

.tracking-snippet{display:block;max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:14px;font-size:12px;line-height:1.45;color:var(--text)}
.notice{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:12px;color:var(--muted);font-size:13px;line-height:1.55;margin:10px 0}.soft-panel{background:var(--soft)}
.status-line{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px;margin:8px 0;background:var(--panel)}.status-line span{font-size:11px;font-weight:900;border-radius:999px;padding:4px 8px}.status-line.ok span{background:rgba(34,197,94,.12);color:#15803d}.status-line.warn span{background:rgba(245,158,11,.14);color:#b45309}.status-line small{grid-column:1/-1;color:var(--muted);font-size:11px}.event-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.event-counts div{border:1px solid var(--line);background:var(--panel);border-radius:12px;padding:10px;text-align:center}.event-counts b{display:block;font-size:18px}.event-counts span{font-size:11px;color:var(--muted)}.intent-grid .asset-pick{cursor:default}.intent-grid span,.intent-grid small{color:var(--muted);font-size:11px}.panel summary{cursor:pointer}.panel code{font-size:12px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 4px}@media(max-width:700px){.event-counts{grid-template-columns:repeat(2,minmax(0,1fr))}.tracking-snippet{font-size:11px}}

.setup-step-bar{height:8px;border-radius:999px;background:var(--soft2);overflow:hidden;margin-top:10px}.setup-step-bar span{display:block;height:100%;background:var(--brand);transition:.25s width}.top-actions{display:flex;gap:6px;align-items:center}.notice .button-row{margin-top:10px}

/* Instagram Boost restore */
.ig-connect-panel{margin-bottom:14px}.ig-media-list{min-height:72px}.ig-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}.ig-media-card{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;padding:8px;text-align:left;display:grid;gap:7px;cursor:pointer}.ig-media-card:hover,.ig-media-card.selected{border-color:var(--brand);box-shadow:0 10px 28px rgba(15,23,42,.10)}.ig-media-card .thumb{border-radius:10px}.ig-media-card b{font-size:12px;line-height:1.15}.ig-media-card small{color:var(--muted);font-size:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:700px){.ig-media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Premium AI Campaign Cockpit reset */
:root{
  --premium-grad:radial-gradient(circle at 10% -10%,rgba(21,94,239,.16),transparent 28rem),radial-gradient(circle at 92% 0%,rgba(122,90,248,.12),transparent 26rem),linear-gradient(180deg,#f8fafc,#eef2f8 58%,#f8fafc);
  --premium-card:rgba(255,255,255,.82);
  --premium-glass:rgba(255,255,255,.68);
  --premium-accent:#155EEF;
  --premium-accent2:#7A5AF8;
  --premium-green:#10B981;
}
html[data-theme="dark"]{
  --premium-grad:radial-gradient(circle at 10% -10%,rgba(21,94,239,.20),transparent 28rem),radial-gradient(circle at 92% 0%,rgba(122,90,248,.16),transparent 26rem),linear-gradient(180deg,#050712,#080d18 54%,#050712);
  --premium-card:rgba(14,20,34,.84);
  --premium-glass:rgba(14,20,34,.68);
}
body{background:var(--premium-grad);}
.premium-shell{background:transparent}.premium-main{padding:28px;max-width:1760px}.premium-side{background:var(--premium-glass);backdrop-filter:blur(22px);border-right:1px solid var(--line);box-shadow:10px 0 45px rgba(15,23,42,.045)}
.premium-nav a{display:flex;align-items:center;justify-content:space-between;border:1px solid transparent}.premium-nav a.active{background:linear-gradient(135deg,rgba(21,94,239,.14),rgba(122,90,248,.10));border-color:rgba(21,94,239,.20);color:var(--text);box-shadow:inset 0 1px rgba(255,255,255,.24)}
.side-project{border:1px solid var(--line);background:var(--soft);border-radius:18px;padding:12px;display:grid;gap:3px}.side-project span{font-size:12px;color:var(--muted);font-weight:900}.side-project b{font-size:13px;line-height:1.15;word-break:break-word}
.premium-topbar{background:var(--premium-glass);backdrop-filter:blur(20px)}
.cockpit-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.45fr);gap:18px;align-items:end;border:1px solid var(--line);background:linear-gradient(135deg,var(--premium-card),rgba(255,255,255,.52));box-shadow:0 24px 78px rgba(15,23,42,.09);border-radius:30px;padding:28px;position:relative;overflow:hidden}.cockpit-hero:before{content:"";position:absolute;right:-120px;top:-140px;width:360px;height:360px;border-radius:999px;background:radial-gradient(circle,rgba(21,94,239,.22),transparent 64%);pointer-events:none}.cockpit-hero>*{position:relative}.cockpit-hero.compact{grid-template-columns:minmax(0,1fr) minmax(250px,.34fr)}
.premium-pill{background:linear-gradient(135deg,rgba(21,94,239,.13),rgba(122,90,248,.11));border-color:rgba(21,94,239,.22);color:var(--text)}.cockpit-next{display:grid;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:0 16px 44px rgba(15,23,42,.07)}.cockpit-next span,.cockpit-next small{color:var(--muted);font-size:12px;font-weight:850}.cockpit-next b{font-size:20px;line-height:1.12;letter-spacing:-.035em}.cockpit-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.cockpit-metrics article{border:1px solid var(--line);background:var(--premium-card);backdrop-filter:blur(18px);border-radius:22px;padding:18px;box-shadow:0 14px 42px rgba(15,23,42,.055)}.cockpit-metrics span{display:block;color:var(--muted);font-size:12px;font-weight:900}.cockpit-metrics b{display:block;font-size:34px;letter-spacing:-.06em;margin:4px 0}.cockpit-metrics small{color:var(--muted);font-size:12px}.section-title{display:flex;justify-content:space-between;align-items:end;gap:18px;margin:24px 0 12px}.section-title h2{margin:0;font-size:26px;letter-spacing:-.045em}.section-title p{margin:4px 0 0;color:var(--muted)}
.engine-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.engine-card{position:relative;overflow:hidden;display:grid;gap:12px;min-height:290px;border:1px solid var(--line);background:var(--premium-card);backdrop-filter:blur(18px);border-radius:26px;padding:20px;box-shadow:0 18px 54px rgba(15,23,42,.07);transition:.16s transform,.16s box-shadow,.16s border}.engine-card:hover{transform:translateY(-2px);box-shadow:0 26px 74px rgba(15,23,42,.12);border-color:rgba(21,94,239,.24)}.engine-card.featured{background:linear-gradient(145deg,rgba(21,94,239,.13),rgba(122,90,248,.10)),var(--premium-card)}.engine-card:before{content:"";position:absolute;right:-70px;top:-70px;width:170px;height:170px;border-radius:999px;background:radial-gradient(circle,rgba(21,94,239,.17),transparent 65%)}.engine-card>*{position:relative}.engine-card-top{display:flex;justify-content:space-between;gap:10px;align-items:center}.engine-tag{display:inline-flex;width:max-content;border-radius:999px;background:rgba(21,94,239,.10);border:1px solid rgba(21,94,239,.18);color:var(--premium-accent);padding:6px 9px;font-size:11px;font-weight:950;letter-spacing:.02em}.engine-budget{font-size:11px;color:var(--muted);font-weight:900}.engine-card h3{margin:0;font-size:24px;line-height:1.04;letter-spacing:-.05em}.engine-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}.engine-card ul{display:grid;gap:7px;margin:0;padding:0;list-style:none}.engine-card li{font-size:12px;color:var(--muted);display:flex;gap:7px;align-items:center}.engine-card li:before{content:"";width:6px;height:6px;border-radius:999px;background:var(--premium-green);flex:0 0 auto}.engine-actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px}.engine-type{font-size:10px;color:var(--muted);font-weight:950;letter-spacing:.03em}.recipe-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.recipe-card{border:1px solid var(--line);background:var(--panel);border-radius:20px;padding:16px;box-shadow:0 12px 36px rgba(15,23,42,.055)}.recipe-card span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:950}.recipe-card b{display:block;margin:5px 0;font-size:16px;letter-spacing:-.025em}.recipe-card p{margin:0;color:var(--muted);font-size:13px}.engine-form{scroll-margin-top:90px}.premium-connect{border-color:rgba(21,94,239,.22)}.music-engine{margin-top:14px}@media(max-width:1180px){.engine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.recipe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cockpit-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.cockpit-hero,.cockpit-hero.compact{grid-template-columns:1fr}}@media(max-width:900px){.premium-main{padding:14px}.engine-grid,.recipe-grid{grid-template-columns:1fr}.cockpit-hero{border-radius:24px;padding:20px}.cockpit-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cockpit-metrics article{padding:14px}.section-title{display:grid}.engine-card{min-height:auto}.premium-side{background:var(--panel)}}@media(max-width:520px){.cockpit-metrics{grid-template-columns:1fr}.page-title{font-size:38px}.engine-card h3{font-size:22px}}
button.engine-card{appearance:none;-webkit-appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
button.engine-card .btn{pointer-events:none}
.engine-card.featured,.engine-card[aria-current="true"]{border-color:rgba(21,94,239,.42);box-shadow:0 28px 80px rgba(21,94,239,.15)}
.ig-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.ig-media-card{appearance:none;border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:8px;text-align:left;cursor:pointer;display:grid;gap:6px}.ig-media-card .thumb{aspect-ratio:1/1;border-radius:12px;background:#f2f4f7;display:grid;place-items:center;overflow:hidden}.ig-media-card img{width:100%;height:100%;object-fit:cover}.ig-media-card.selected{outline:3px solid rgba(21,94,239,.28);border-color:#155EEF}.ig-media-card b{font-size:12px;line-height:1.2}.ig-media-card small{font-size:10px;color:var(--muted);word-break:break-all}


/* =====================================================================
   AdMindra Design System v1
   Replaces three accumulated override layers (spacing pass, flatten pass,
   and the decorative "Premium AI Campaign Cockpit" glass layer above).
   Everything below is authored as ONE system so the app reads as a single
   designed product instead of patches competing in the cascade.
   Direction: calm, confident, low-chrome. Restraint over decoration.
   ===================================================================== */

/* --- Tokens: a real neutral ramp + one accent, used sparingly --------- */
:root{
  --n0:#ffffff; --n1:#fafafa; --n2:#f4f4f5; --n3:#e9e9ec; --n4:#d9d9de;
  --n6:#8b8b96; --n8:#52525b; --n10:#18181b;
  --bg:var(--n1); --panel:var(--n0); --text:var(--n10); --muted:var(--n6);
  --line:var(--n3); --line-strong:var(--n4); --soft:var(--n2); --soft2:var(--n3);
  --accent:#2563eb; --accent-soft:#eff4ff; --accent-line:#c7d9fe;
  --good:#15803d; --good-soft:#eefbf2;
  --warn:#b45309; --warn-soft:#fff7ed;
  --danger:#dc2626;
  --brand:var(--n10); --brandText:var(--n0);
  --radius:10px; --radius-lg:14px;
  --shadow:none;
  --sp:4px;
  --content-max:1180px;
}
html[data-theme="dark"]{
  --n0:#0b0b0f; --n1:#0e0e13; --n2:#17171d; --n3:#232329; --n4:#2f2f37;
  --n6:#9b9ba6; --n8:#c9c9d2; --n10:#f4f4f5;
  --bg:var(--n1); --panel:#131319; --text:var(--n10); --muted:var(--n6);
  --line:var(--n3); --line-strong:var(--n4); --soft:var(--n2); --soft2:var(--n3);
  --accent:#5b8def; --accent-soft:#161d2e; --accent-line:#2b3c5e;
  --good:#4ade80; --good-soft:#12251a;
  --warn:#fbbf24; --warn-soft:#2a2113;
  --brand:var(--n10); --brandText:#0b0b0f;
  --shadow:none;
}
body{background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-feature-settings:"cv02","cv03","cv04";letter-spacing:-.006em}

/* --- Neutralize the decorative glass layer entirely ------------------- */
.premium-shell,.premium-side,.premium-topbar,.premium-main{backdrop-filter:none}
.cockpit-hero:before,.engine-card:before{content:none;display:none}
:root,html[data-theme="dark"]{--premium-card:var(--panel);--premium-glass:var(--panel);
  --premium-grad:none;--premium-accent:var(--accent);--premium-accent2:var(--accent);--premium-green:var(--good)}

/* --- App shell: quieter sidebar, real content measure ----------------- */
.app-shell{grid-template-columns:224px minmax(0,1fr)}
.side,.premium-side{background:var(--bg);border-right:1px solid var(--line);
  padding:16px 12px;gap:14px;box-shadow:none}
.side .adm-logo{padding:4px 8px}.side .adm-logo img{height:26px}
.side-project{background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 10px;gap:1px}
.side-project span{font-size:11px;font-weight:600;color:var(--muted)}
.side-project b{font-size:12.5px;font-weight:600;color:var(--text)}
.nav,.premium-nav{gap:1px}
.nav a,.premium-nav a{display:flex;align-items:center;gap:9px;justify-content:flex-start;
  padding:7px 9px;border:0;border-radius:7px;font-size:13px;font-weight:500;color:var(--muted);
  background:transparent;box-shadow:none;transition:.1s background,.1s color}
.nav a svg{width:15px;height:15px;flex:0 0 auto;opacity:.6;stroke-width:1.7}
.nav a:hover{background:var(--soft);color:var(--text)}
.nav a:hover svg{opacity:.9}
.nav a.active,.premium-nav a.active{background:var(--soft);color:var(--text);font-weight:600;
  border:0;box-shadow:none}
.nav a.active svg{opacity:1;color:var(--accent)}
.nav-group-label{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);opacity:.65;padding:16px 9px 5px}
.nav-group-label:first-child{padding-top:0}
/* An expandable nav group. <details>/<summary> so it opens without script
   and answers to the keyboard; the marker is replaced by a caret that turns. */
.nav-sub summary{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:7px;
  font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;list-style:none;
  transition:.1s background,.1s color}
.nav-sub summary::-webkit-details-marker{display:none}
.nav-sub summary svg{width:15px;height:15px;flex:0 0 auto;opacity:.6;stroke-width:1.7}
.nav-sub summary:hover{background:var(--soft);color:var(--text)}
.nav-sub summary:hover svg{opacity:.9}
.nav-sub summary.active{color:var(--text);font-weight:600}
.nav-sub summary.active svg{opacity:1;color:var(--accent)}
.nav-sub summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.nav-caret{margin-left:auto;width:8px;height:8px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(-45deg);opacity:.45;
  transition:.14s transform;margin-right:3px}
.nav-sub[open] .nav-caret{transform:rotate(45deg)}
/* The rail lines the children up under the parent's icon, so the group reads
   as one thing rather than eight loose links. */
.nav-sub-items{display:grid;gap:1px;margin:1px 0 3px 16px;padding-left:9px;
  border-left:1px solid var(--line)}
.nav-sub-items a{font-size:12.5px;padding:6px 9px}
.nav-sub-items a svg{width:14px;height:14px}
@media(prefers-reduced-motion:reduce){.nav-caret{transition:none}}
.side-foot{gap:5px;padding-top:12px;border-top:1px solid var(--line)}
.side-foot .btn{justify-content:flex-start;background:transparent;border:0;color:var(--muted);
  font-weight:500;font-size:12.5px;min-height:30px;padding:5px 9px}
.side-foot .btn:hover{background:var(--soft);color:var(--text)}
.main,.premium-main{padding:28px 32px 64px;max-width:none;display:block}
.main>*,.premium-main>*{max-width:var(--content-max);margin-left:auto;margin-right:auto}
.main>*+*,.premium-main>*+*{margin-top:24px}
.topbar,.premium-topbar{background:var(--bg);border-bottom:1px solid var(--line);padding:10px 14px}
/* The wordmark plus four buttons does not fit a 390px phone — the last
   button was being cut off by the edge of the screen. The logo gives way
   first, since the buttons are the part you press. */
@media(max-width:460px){
  .topbar img,.premium-topbar img{height:24px}
  .topbar .adm-logo,.premium-topbar .adm-logo{min-width:0;flex:0 1 auto;overflow:hidden}
  .top-actions{flex:0 0 auto}
  .top-actions .btn{padding:6px 9px}
}

/* --- Typography: one tight scale for in-app UI ------------------------ */
.page-title{font-size:20px;line-height:1.25;letter-spacing:-.02em;font-weight:600;margin:0}
h2{font-size:15px;letter-spacing:-.01em;font-weight:600}
h3{font-size:13px;font-weight:600}
.muted{color:var(--muted);font-size:13px;line-height:1.5}

/* --- Page header: one pattern, every page ---------------------------- */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;padding:0 0 20px;border-bottom:1px solid var(--line)}
.page-header-text{display:flex;flex-direction:column;gap:5px;max-width:60ch}
.page-header-eyebrow{display:flex;align-items:center;gap:6px;margin-bottom:1px}
.page-header p{margin:0}
.page-header-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center;flex-shrink:0}

/* --- Surfaces: one card language, no competing elevations ------------ */
.panel,.section{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:none;padding:18px}
.panel-quiet{background:transparent;border:1px solid var(--line);box-shadow:none}
.soft-panel{background:var(--soft);border-color:transparent}
.card-flush{padding:0;overflow:hidden}

/* --- Section header inside a page ------------------------------------ */
.section-title{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0}
/* A section heading with nothing above it sits flush with the page; one
   that follows another section needs the break to read as a break. The
   Konkurrens view stacks four of these and they ran together. */
.main > * + .section-title{margin-top:var(--s7,32px)}
.section-title h2{margin:0}
.section-title p{margin:3px 0 0;color:var(--muted);font-size:13px}
.section-block{display:flex;flex-direction:column;gap:12px}
.section-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.section-block-head h2{margin:0}
.section-block-head .muted{margin:2px 0 0}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.section-head h2{margin:0}

/* --- Status strip: compact project state, replaces 6 oversized tiles -- */
.status-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.status-cell{padding:14px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.status-cell:last-child{border-right:0}
.status-cell .k{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.01em}
.status-cell .v{font-size:17px;font-weight:600;letter-spacing:-.02em;display:flex;align-items:center;gap:6px}
.status-cell .s{font-size:11.5px;color:var(--muted)}
.dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--good)}.dot.warn{background:var(--warn)}.dot.idle{background:var(--n4)}

/* --- Work queue rows: Inbox reads as a queue, not a gallery ----------- */
.queue{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden}
.queue-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:.1s background}
.queue-row:last-child{border-bottom:0}
.queue-row:hover{background:var(--soft)}
.queue-accent{width:3px;align-self:stretch;border-radius:2px;flex:0 0 auto;background:var(--n4)}
.queue-accent.warn{background:var(--warn)}
.queue-accent.accent{background:var(--accent)}
.queue-accent.good{background:var(--good)}
.queue-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.queue-title{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.queue-sub{font-size:12.5px;color:var(--muted);line-height:1.45}
.queue-action{flex:0 0 auto}

/* --- Badges: semantic, quiet, one shape ------------------------------ */
.pill,.engine-tag,.mini-tags span{display:inline-flex;align-items:center;border-radius:5px;
  padding:2px 7px;font-size:11px;font-weight:500;letter-spacing:0;
  background:var(--soft);border:1px solid transparent;color:var(--muted)}
.pill.accent,.engine-tag{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}
.pill.good{background:var(--good-soft);border-color:transparent;color:var(--good)}
.pill.warn-tag{background:var(--warn-soft);border-color:transparent;color:var(--warn)}
.pill.muted-tag{background:var(--soft);color:var(--muted)}
.premium-pill{background:var(--soft);border-color:transparent;color:var(--muted)}
.mini-tags .tag-live,.mini-tags .tag-approved{background:var(--good-soft);color:var(--good)}
.mini-tags .tag-ready{background:var(--accent-soft);color:var(--accent)}
.mini-tags .tag-boost{background:var(--accent-soft);color:var(--accent)}

/* --- Buttons: calm, correct weights ---------------------------------- */
.btn{border-radius:7px;font-weight:500;font-size:13px;min-height:32px;padding:6px 12px;
  letter-spacing:-.005em;transition:.1s background,.1s border-color,.1s opacity}
.btn.secondary{background:var(--panel);border:1px solid var(--line-strong);color:var(--text)}
.btn.secondary:hover{background:var(--soft)}
.btn.ghost{border:1px solid transparent;color:var(--muted)}
.btn.ghost:hover{background:var(--soft);color:var(--text)}
.btn.small{font-size:12px;min-height:28px;padding:4px 9px}
.button-row{gap:7px}

/* --- Forms ------------------------------------------------------------ */
input,select,textarea{border-radius:7px;padding:8px 10px;font-size:13px;border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field span{font-size:12px;font-weight:500;color:var(--muted)}
.form-grid{gap:14px}

/* --- Notices / info + warning cards ---------------------------------- */
.notice{background:transparent;border:1px solid var(--line);border-left:2px solid var(--line-strong);
  border-radius:var(--radius);padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.notice b{color:var(--text);font-weight:600}
.notice-warn{border-left-color:var(--warn);background:var(--warn-soft)}
.notice-opportunity{border-left-color:var(--accent)}
.notice+.notice{margin-top:8px}

/* --- Rows / lists ----------------------------------------------------- */
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;
  padding:9px 0;margin:0;font-size:13px}
.mini-row:last-of-type{border-bottom:0}
.mini-row b{font-weight:500;color:var(--muted);font-size:12.5px}
.mini-row span,.mini-row a{font-size:13px;color:var(--text);font-weight:500}
.clean-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.clean-list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:13px;color:var(--text)}
.clean-list li:last-child{border-bottom:0}
.clean-list a{color:var(--text);text-decoration:none;font-weight:500;display:flex;align-items:center;justify-content:space-between;gap:10px}
.clean-list a:after{content:"→";color:var(--muted);font-size:12px}
.clean-list a:hover{color:var(--accent)}
/* An ordered list that shows its order. clean-list strips the markers, so
   "do these first, in order" read as three unrelated lines. */
.numbered-list{margin:0;padding:0;list-style:none;counter-reset:step;display:grid;gap:2px}
.numbered-list li{counter-increment:step;display:grid;grid-template-columns:26px minmax(0,1fr);
  gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;color:var(--text)}
.numbered-list li:last-child{border-bottom:0}
.numbered-list li::before{content:counter(step);font-size:11px;font-weight:700;color:var(--muted);
  background:var(--soft);border-radius:999px;width:22px;height:22px;display:grid;place-items:center;
  align-self:start}

/* --- Engine cards: the Growth/launch surface ------------------------- */
.engine-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.engine-card{min-height:0;gap:9px;padding:16px;border-radius:var(--radius-lg);
  background:var(--panel);border:1px solid var(--line);box-shadow:none;backdrop-filter:none;
  transition:.12s border-color,.12s background}
.engine-card:hover{transform:none;box-shadow:none;border-color:var(--line-strong);background:var(--soft)}
.engine-card.featured{background:var(--panel);border-color:var(--accent-line)}
.engine-card h3{font-size:14px;font-weight:600;letter-spacing:-.01em;margin:0}
.engine-card p{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.engine-card ul{gap:5px}
.engine-card li{font-size:12px;gap:6px}
.engine-card li:before{width:3px;height:3px;background:var(--n4)}
.engine-actions{padding-top:4px}
.engine-type{display:none}
.engine-budget{font-size:11px;color:var(--muted);font-weight:400}
.engine-card.coming-soon{opacity:1;background:transparent;border-style:dashed;border-color:var(--line-strong)}
.engine-card.coming-soon h3,.engine-card.coming-soon p{opacity:.7}
.engine-card.coming-soon:hover{background:transparent;border-color:var(--line-strong)}
.engine-group{display:flex;flex-direction:column;gap:10px;margin:0}
.engine-group+.engine-group{margin-top:20px}
.engine-group-title{margin:0;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);display:flex;align-items:center;gap:10px}
.engine-group-title:after{content:"";flex:1;height:1px;background:var(--line)}

/* --- Cockpit hero + metric tiles (kept, but calmed) ------------------ */
.cockpit-hero{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:none;padding:20px;gap:16px}
.cockpit-next{background:var(--soft);border:1px solid transparent;border-radius:var(--radius);
  box-shadow:none;padding:14px;gap:6px}
.cockpit-next span,.cockpit-next small{font-size:11px;font-weight:500;color:var(--muted)}
.cockpit-next b{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.cockpit-metrics{gap:0;margin:0}
.cockpit-metrics article{background:var(--panel);border:1px solid var(--line);box-shadow:none;
  backdrop-filter:none;border-radius:var(--radius);padding:14px}
.cockpit-metrics span{font-size:11px;font-weight:500}
.cockpit-metrics b{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:3px 0}
.cockpit-metrics small{font-size:11.5px}

/* --- Ad tiles --------------------------------------------------------- */
.ad-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.ad-tile{border-radius:var(--radius-lg);box-shadow:none;border:1px solid var(--line);background:var(--panel)}
.ad-tile:hover{transform:none;box-shadow:none;border-color:var(--line-strong)}
.ad-tile h3{font-size:12.5px;font-weight:600;margin:10px 11px 5px;min-height:0;line-height:1.35}
.ad-tile-meta{font-size:11.5px;margin:0 11px 7px;color:var(--muted)}
.mini-tags{padding:0 11px 11px;gap:5px}
.badge{border-radius:5px;font-size:9.5px;font-weight:500;background:rgba(9,9,11,.75);padding:3px 6px}
.thumb{background:var(--soft)}

/* --- Tabs ------------------------------------------------------------- */
.tabs{gap:4px;margin:0;border-bottom:1px solid var(--line);padding-bottom:0}
.tab{border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;
  padding:8px 11px;font-size:13px;font-weight:500;color:var(--muted)}
.tab:hover{color:var(--text)}
.tab.active{background:transparent;color:var(--text);border-bottom-color:var(--text);font-weight:600}
.tab small{opacity:.6;margin-left:4px;font-size:11px}
/* The company analysis is five views of the same page. The bar stays put
   while a view scrolls, so moving between them never means finding it again. */
.company-tabs{position:sticky;top:0;z-index:5;margin:14px 0 20px;
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px)}
.company-tabs .tab{text-decoration:none}
@supports not (backdrop-filter:blur(8px)){.company-tabs{background:var(--bg)}}
/* Cards that fill the width they are given instead of being pinned to two
   columns. Aligned to a common top, so a short card does not float. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;align-items:start}
/* Sajtvård. Every proposed change to a live website shows the line of the
   customer's own profile it came from — quiet, because it is there to be
   checked rather than read first. */
.sc-evidence{display:block;margin-top:6px;font-size:11px;font-style:italic;color:var(--muted);
  border-left:2px solid var(--line);padding-left:9px;overflow-wrap:anywhere}
.sc-error{display:block;margin-top:6px;font-size:11.5px;color:var(--danger)}
.sc-fix .queue-action{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.sc-site+.sc-site{margin-top:18px}
.sc-done summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);padding:9px 0;
  list-style:none;display:flex;align-items:center;gap:6px}
.sc-done summary::-webkit-details-marker{display:none}
.sc-done summary::before{content:"▸";font-size:11px;transition:.14s transform}
.sc-done[open] summary::before{transform:rotate(90deg)}
.sc-done summary:hover{color:var(--text)}
/* The pairing code is retyped by a human off a screen, so it is set large,
   spaced and monospaced. */
.sc-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(24px,4vw,34px);
  font-weight:700;letter-spacing:.14em;padding:18px;margin-top:14px;text-align:center;
  background:var(--soft);border:1px dashed var(--line);border-radius:var(--radius-lg,16px);
  user-select:all}
@media(max-width:640px){.sc-fix .queue-action{justify-content:flex-start;margin-top:8px}}
@media(prefers-reduced-motion:reduce){.sc-done summary::before{transition:none}}
/* What AdMindra already read about who this company sells to, above a form
   that would otherwise ask for it again. */
.sales-understanding{display:grid;gap:10px;justify-items:start}
.sales-understanding p{margin:0;font-size:15px;line-height:1.5;max-width:75ch}
.sales-understanding .chip-row{display:flex;flex-wrap:wrap;gap:6px}
.sales-scratch{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sales-scratch .btn{flex:0 0 auto}
.sales-source{font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.sales-source:hover{color:var(--text)}
/* Three audiences on the overview, as a taste of the view that holds them. */
.aud-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.aud-chip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg,16px);
  padding:14px;display:grid;gap:6px;align-content:start}
.aud-chip b{font-size:14px;letter-spacing:-.01em}
.aud-chip p{margin:0;font-size:12.5px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.aud-chip .pill{justify-self:start;font-size:11px;padding:4px 9px}

/* --- Empty states ----------------------------------------------------- */
.empty{padding:44px 24px;text-align:center;border:1px dashed var(--line-strong);
  background:transparent;border-radius:var(--radius-lg);display:flex;flex-direction:column;
  align-items:center;gap:12px}
.empty h2{font-size:14px;font-weight:600;margin:0;color:var(--text);max-width:44ch}
.empty p{margin:0;color:var(--muted);font-size:13px;max-width:48ch}

/* --- Two-column work layout ------------------------------------------ */
.split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:20px;align-items:start}
.split>*{min-width:0}
.stack{display:flex;flex-direction:column;gap:20px}
.action-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.grid2{gap:16px}

/* --- Misc / legacy alignment ----------------------------------------- */
.status-line{border-radius:var(--radius);padding:9px 11px;background:transparent;border-color:var(--line)}
.status-line span{border-radius:5px;font-weight:500;font-size:11px}
.status-line.ok span{background:var(--good-soft);color:var(--good)}
.status-line.warn span{background:var(--warn-soft);color:var(--warn)}
.recipe-card{border-radius:var(--radius);box-shadow:none;padding:14px}
.recipe-card b{font-size:13px;font-weight:600}
.recipe-card p{font-size:12.5px}
.modal{border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(9,9,11,.16)}
html[data-theme="dark"] .modal{box-shadow:0 16px 48px rgba(0,0,0,.6)}
.modal-head h2{font-size:16px}
.adm-login-card{border-radius:var(--radius-lg);box-shadow:none}
.table-wrap th{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.table-wrap td{font-size:13px}
.toast{border-radius:8px;font-weight:500;font-size:13px;background:var(--n10);color:var(--n0)}

/* --- Responsive: phone-first behavior, not squeezed desktop ---------- */
@media(max-width:1180px){
  .split{grid-template-columns:1fr}
  .engine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .main,.premium-main{padding:16px 14px 88px}
  .main>*+*,.premium-main>*+*{margin-top:18px}
  .page-header{padding-bottom:14px;gap:12px}
  .page-header-actions{width:100%}
  .page-header-actions .btn{flex:1 1 auto;min-height:38px}
  .status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-cell{border-right:0;border-bottom:1px solid var(--line);padding:12px 14px}
  .status-cell:nth-child(odd){border-right:1px solid var(--line)}
  .status-cell:nth-last-child(-n+2){border-bottom:0}
  .action-columns,.grid2{grid-template-columns:1fr}
  .engine-grid{grid-template-columns:1fr}
  .cockpit-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .queue-row{padding:12px 14px;gap:11px;flex-wrap:wrap}
  .queue-action{width:100%;padding-left:17px}
  .queue-action .btn{width:100%;min-height:38px}
  .ad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .side,.premium-side{padding:16px 12px}
  .btn{min-height:36px}
  .btn.small{min-height:32px}
  .empty{padding:32px 18px}
}
@media(max-width:520px){
  .status-strip{grid-template-columns:1fr}
  .status-cell{border-right:0!important;border-bottom:1px solid var(--line)}
  .status-cell:last-child{border-bottom:0}
  .cockpit-metrics{grid-template-columns:1fr}
  .ad-grid{grid-template-columns:1fr}
  .page-title{font-size:19px}
}

/* ===== Product UX flow pass: guided setup, reveal feedback, disclosure ===== */
.step-rail{display:flex;gap:6px;flex-wrap:wrap;padding:0}
.step-dot{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--line);
  border-radius:999px;padding:6px 12px 6px 7px;font:inherit;font-size:12.5px;font-weight:500;
  color:var(--muted);cursor:pointer;transition:.12s all}
.step-dot:hover:not(:disabled){border-color:var(--line-strong);color:var(--text)}
.step-dot:disabled{opacity:.45;cursor:not-allowed}
.step-n{width:20px;height:20px;border-radius:50%;background:var(--soft);color:var(--muted);
  display:grid;place-items:center;font-size:11px;font-weight:600;flex:0 0 auto}
.step-dot.done{color:var(--text);border-color:var(--line)}
.step-dot.done .step-n{background:var(--good-soft);color:var(--good)}
.step-dot.active{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}
.step-dot.active .step-n{background:var(--accent);color:#fff}
.setup-step{padding:24px}
.setup-step-head{display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.setup-step-head h2{margin:2px 0 0;font-size:18px;letter-spacing:-.02em}
.setup-step-head p{margin:0}
.setup-step-body{display:flex;flex-direction:column;gap:16px;max-width:560px}
.setup-step-body .button-row{margin-top:4px}
.setup-step-body input,.setup-step-body select,.setup-step-body textarea{font-size:15px;padding:11px 13px}
.mode-choice{display:grid;gap:8px}
.mode-opt{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--radius);padding:13px 14px;cursor:pointer;transition:.12s all}
.mode-opt:hover{border-color:var(--line-strong)}
.mode-opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.mode-opt input{width:auto;margin:2px 0 0;flex:0 0 auto;accent-color:var(--accent)}
.mode-opt span{display:flex;flex-direction:column;gap:3px;min-width:0}
.mode-opt b{font-size:13.5px;font-weight:600}
.mode-opt small{font-size:12.5px;color:var(--muted);line-height:1.45}
.adv-panel summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--muted);
  list-style:none;display:flex;align-items:center;gap:7px;padding:2px 0}
.adv-panel summary::-webkit-details-marker{display:none}
.adv-panel summary:before{content:"›";font-size:16px;transition:.15s transform;display:inline-block}
.adv-panel[open] summary:before{transform:rotate(90deg)}
.adv-panel summary:hover{color:var(--text)}
.adv-panel .field small{font-size:11.5px;color:var(--muted);margin-top:3px;display:block}
/* Reveal feedback: a click that opens a section below must be visibly acknowledged. */
@keyframes admFlash{0%{box-shadow:0 0 0 0 var(--accent-soft);border-color:var(--accent)}
  100%{box-shadow:0 0 0 10px transparent;border-color:var(--line)}}
.flash{animation:admFlash 1.3s ease-out}
@media(max-width:900px){
  .setup-step{padding:18px 16px}
  .setup-step-body{max-width:none}
  .setup-step-body .button-row .btn{flex:1 1 auto;min-height:42px}
  .step-rail{gap:5px}
  .step-dot .step-l{display:none}
  .step-dot{padding:6px;border-radius:50%}
  .step-dot.active{border-radius:999px;padding:6px 12px 6px 7px}
  .step-dot.active .step-l{display:inline}
}

/* ===== Inbox action center: calm cards, protected destructive actions ===== */
.ad-tile{position:relative;display:flex;flex-direction:column}
.ad-tile .ad-open-zone{flex:1;display:flex;flex-direction:column;cursor:pointer}
/* Secondary actions live in a quiet footer, not as a raw "x" over the artwork. */
.ad-tile-foot{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line);
  opacity:0;transition:.12s opacity}
.ad-tile:hover .ad-tile-foot,.ad-tile:focus-within .ad-tile-foot{opacity:1}
.tile-act{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;
  font-size:11.5px;font-weight:500;padding:4px 7px;border-radius:6px;cursor:pointer;transition:.12s all}
.tile-act:hover{background:var(--soft);color:var(--text)}
.tile-act.danger:hover{background:color-mix(in srgb,var(--danger) 12%,var(--soft));color:var(--danger)}
/* Selection is opt-in: checkboxes only exist while "Select several" is on. */
.ad-tile.selectable{cursor:pointer}
.ad-tile.selectable .ad-open-zone{pointer-events:none}
.ad-select{position:absolute;top:8px;left:8px;z-index:3;display:grid;place-items:center;
  width:22px;height:22px;border-radius:6px;background:var(--panel);border:1px solid var(--line-strong);
  cursor:pointer;box-shadow:0 1px 3px rgba(9,9,11,.12)}
.ad-select input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.ad-select span{width:10px;height:10px;border-radius:3px;background:transparent;transition:.1s background}
.ad-select input:checked+span{background:var(--accent)}
.ad-tile.selectable:has(input:checked){outline:2px solid var(--accent);outline-offset:-2px}
.ad-tile.selectable:has(input:checked) .ad-select{border-color:var(--accent)}
/* Floating action bar for bulk actions - never a row of loose buttons. */
.selection-bar{position:fixed;left:50%;bottom:20px;transform:translate(-50%,120%);z-index:900;
  display:flex;align-items:center;gap:16px;padding:9px 10px 9px 18px;border-radius:999px;
  background:var(--n10);color:var(--n0);box-shadow:0 8px 28px rgba(9,9,11,.28);
  font-size:13px;font-weight:500;opacity:0;transition:.18s transform,.18s opacity;pointer-events:none}
.selection-bar.visible{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.selection-actions{display:flex;gap:6px}
.selection-bar .btn.secondary{background:rgba(255,255,255,.14);border-color:transparent;color:var(--n0)}
.selection-bar .btn.secondary:hover{background:rgba(255,255,255,.24)}
.selection-bar .btn.ghost{color:rgba(255,255,255,.62);border-color:transparent}
.selection-bar .btn.ghost:hover{background:rgba(255,255,255,.1);color:var(--n0)}
@media(max-width:900px){
  /* Touch has no hover - keep secondary actions permanently visible but quiet. */
  .ad-tile-foot{opacity:1;padding:6px 8px}
  .tile-act{padding:7px 9px;font-size:12px}
  .ad-select{width:26px;height:26px;top:7px;left:7px}
  .selection-bar{left:12px;right:12px;bottom:12px;transform:translate(0,120%);
    justify-content:space-between;padding:10px 10px 10px 16px}
  .selection-bar.visible{transform:translate(0,0)}
  .selection-bar .btn{min-height:36px}
}

/* ===== Card detail: guided task view instead of scattered technical controls ===== */
.modal-head{align-items:flex-start}
.modal-head h2{margin:8px 0 0}
.card-steps{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.card-step-chip{font-size:11px;font-weight:500;padding:3px 8px;border-radius:5px;
  background:var(--soft);color:var(--muted);border:1px solid transparent}
.card-step-chip.done{background:var(--good-soft);color:var(--good)}
.card-step{border-radius:var(--radius);border:1px solid var(--line);background:transparent;padding:16px}
.card-step .section-head{margin-bottom:12px;align-items:flex-start}
.card-step .section-head b{font-size:13px;font-weight:600;color:var(--text)}
.card-step .section-head span{font-size:12px;line-height:1.45;margin-top:2px}
/* One obvious next action, always visible beside the preview. */
.next-action{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:16px;
  border:1px solid var(--accent-line);background:var(--accent-soft);border-radius:var(--radius)}
.next-action span{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.next-action b{font-size:14px;font-weight:600;letter-spacing:-.01em}
.next-action small{font-size:12px;color:var(--muted);line-height:1.45;margin-bottom:8px}
/* Formats as friendly output previews, never an aspect-ratio checkbox grid. */
.fmt-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fmt-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--soft)}
.fmt-card.ready{background:var(--panel)}
.fmt-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.fmt-ph{width:100%;aspect-ratio:1;background:repeating-linear-gradient(45deg,var(--soft),var(--soft) 7px,var(--soft2) 7px,var(--soft2) 14px)}
.fmt-ph[data-kind="vt"]{aspect-ratio:9/16}
.fmt-card.ready img{aspect-ratio:1}
.fmt-meta{display:flex;flex-direction:column;gap:5px;padding:10px}
.fmt-meta b{font-size:12px;font-weight:600;line-height:1.3}
.fmt-meta .pill{width:max-content}
/* Asset picking = tapping a picture, not ticking a box. */
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.pick-card{position:relative;appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:0;overflow:hidden;
  display:flex;flex-direction:column;transition:.12s all}
.pick-card:hover{border-color:var(--line-strong)}
.pick-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pick-ph{display:grid;place-items:center;aspect-ratio:1;background:var(--soft);font-size:10.5px;color:var(--muted);padding:8px;text-align:center}
.pick-name{font-size:11px;font-weight:500;padding:7px 8px 0;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pick-use{font-size:10.5px;color:var(--muted);padding:2px 8px 8px;font-weight:500}
.pick-card.sel{border-color:var(--accent);background:var(--accent-soft)}
.pick-card.sel .pick-use{color:var(--accent);font-weight:600}
.pick-badge{position:absolute;top:6px;left:6px;font-style:normal;font-size:9.5px;font-weight:600;
  background:var(--panel);color:var(--accent);border:1px solid var(--accent-line);border-radius:4px;padding:2px 5px}
.card-actions{padding-top:4px;border-top:1px solid var(--line);margin-top:2px}
@media(max-width:900px){
  .fmt-grid{grid-template-columns:1fr 1fr}
  .pick-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
  .next-action{position:sticky;bottom:0;z-index:2}
  .next-action .btn{min-height:42px}
  .card-actions{flex-direction:column}
  .card-actions .btn{width:100%;min-height:40px}
  .card-step{padding:14px}
  .card-steps{gap:4px}
}
@media(max-width:520px){.pick-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== Project switcher + honest sync status ===== */
.proj-switch{position:relative}
.proj-current{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border:1px solid var(--line);
  border-radius:var(--radius);background:transparent;font:inherit;color:inherit;cursor:pointer;text-align:left;transition:.12s all}
.proj-current:hover{background:var(--soft);border-color:var(--line-strong)}
.proj-avatar{width:26px;height:26px;flex:0 0 auto;border-radius:7px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);font-size:12px;font-weight:600;border:1px solid var(--accent-line)}
.proj-avatar.sm{width:24px;height:24px;font-size:11px}
.proj-avatar.plus{background:var(--soft);color:var(--muted);border-color:var(--line)}
.proj-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.proj-meta b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-meta small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-caret{color:var(--muted);font-size:10px;flex:0 0 auto}
.proj-menu{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:60;padding:5px;
  background:var(--panel);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:0 10px 30px rgba(9,9,11,.14);max-height:62vh;overflow:auto}
html[data-theme="dark"] .proj-menu{box-shadow:0 10px 30px rgba(0,0,0,.5)}
.proj-menu-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:7px 8px 4px}
.proj-menu-sep{height:1px;background:var(--line);margin:5px 0}
.proj-item{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:0;border-radius:8px;
  background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:none;transition:.1s background}
.proj-item:hover{background:var(--soft)}
.proj-item.sel{background:var(--accent-soft)}
.proj-tick{color:var(--accent);font-size:12px;flex:0 0 auto}
.sync-badge{display:flex;align-items:center;gap:8px;padding:8px 9px;margin-bottom:6px;
  border-radius:var(--radius);border:1px solid var(--line);background:transparent;font-size:11.5px}
.sync-badge.ok{border-color:transparent;background:var(--good-soft)}
.sync-badge.bad{border-color:transparent;background:var(--warn-soft)}
.sync-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.sync-txt b{font-size:11.5px;font-weight:600;line-height:1.3}
.sync-txt small{font-size:10.5px;color:var(--muted);line-height:1.35}
.sync-badge.ok .sync-txt b{color:var(--good)}
.sync-badge.bad .sync-txt b{color:var(--warn)}
.sync-fix{font-size:11px;font-weight:600;color:var(--warn);text-decoration:underline;flex:0 0 auto}
@media(max-width:900px){
  .proj-menu{max-height:52vh}
  .proj-current{padding:10px 9px}
  .proj-item{padding:10px 8px}
  .sync-badge{padding:10px 9px}
}

/* ===== Active ads, optimization rows, lifecycle ===== */
.active-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.active-card{border:1px solid var(--line);border-left:3px solid var(--good);border-radius:var(--radius-lg);
  background:var(--panel);padding:16px;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:.12s all}
.active-card:hover{border-color:var(--line-strong);border-left-color:var(--good)}
.ac-top{display:flex;gap:5px;flex-wrap:wrap}
.active-card h3{margin:0;font-size:14px;font-weight:600;line-height:1.35;letter-spacing:-.01em}
.ac-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;
  padding:11px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ac-metrics div{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-metrics span{font-size:10px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.ac-metrics b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-metrics b.na{font-size:11px;font-weight:500;color:var(--muted)}
.ac-note{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
.ac-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
.ac-foot small{font-size:11px;color:var(--muted)}
.lifecycle{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.lc-step{font-size:10.5px;font-weight:500;padding:2px 7px;border-radius:4px;background:var(--soft);color:var(--muted)}
.lc-step.done{background:var(--good-soft);color:var(--good)}
.lc-step.now{background:var(--accent);color:#fff;font-weight:600}
@media(max-width:900px){
  .active-grid{grid-template-columns:1fr}
  .ac-metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .active-card{padding:14px}
  .lifecycle{gap:3px}
  .lc-step{font-size:10px;padding:2px 6px}
}

/* Legacy recovery banner */
.legacy-banner{margin-bottom:16px}
.legacy-banner b{display:block;font-size:13px}
@media(max-width:900px){.legacy-banner .button-row .btn{flex:1 1 auto;min-height:38px}}

/* Broken/expired image URLs (old Instagram CDN links) must degrade to a clean
   placeholder, never a broken-image icon. The placeholder is always present
   and revealed by the img's onerror handler. */
.thumb{position:relative}
.thumb .thumb-ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:500;color:var(--muted);background:var(--soft);text-align:center;padding:10px}
.thumb.empty .thumb-ph{display:flex}
.thumb img{position:relative;z-index:1}
.preview img{max-width:100%}

/* Clickable chips: audience multi-select in the setup wizard and the
   company-adapted ad templates on Campaigns. Both are buttons, so they need
   an affordance and a visible selected state. */
.chip-row{display:flex;gap:8px;flex-wrap:wrap}
button.chip{cursor:pointer;padding:6px 12px;font-size:12px;font-weight:600;line-height:1.2;appearance:none}
button.chip:hover{filter:brightness(.97)}
button.chip.sel{background:var(--brand,#155EEF)!important;color:#fff!important;border-color:var(--brand,#155EEF)!important}
.queue-row[aria-pressed="true"]{background:rgba(21,94,239,.06)}
.queue-row[role="button"]:hover{background:rgba(21,94,239,.05)}
.queue-row[role="button"]:focus-visible{outline:2px solid var(--brand,#155EEF);outline-offset:2px}

/* Instagram media without a usable preview from Meta: say why, rather than
   showing an empty tile that looks like a broken image. */
.ig-media-card .thumb .ig-no-thumb{display:grid;gap:4px;place-items:center;text-align:center;padding:8px;font-size:11px;font-weight:700;color:var(--muted)}
.ig-media-card .thumb .ig-no-thumb small{font-weight:400;font-size:10px;line-height:1.25;opacity:.85}
.ig-media-card.no-thumb{opacity:.9;border-style:dashed}

/* Superadmin note inside the customer workspace switcher: the "all
   workspaces" administration view must never look like this account's own
   website list. */
.proj-menu-note{padding:8px 12px;font-size:11px;line-height:1.35;opacity:.8}

/* Superadmin billing toggle. The global rule is input{width:100%}, which
   would stretch a checkbox across the whole table cell. */
.sa-internal{display:flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap;cursor:pointer}
.sa-internal input[type="checkbox"]{width:16px;height:16px;flex:0 0 auto;margin:0;padding:0;accent-color:#111827}
.sa-internal input[type="checkbox"]:disabled{opacity:.5;cursor:progress}

/* AI visibility: every finding shows the evidence it was decided on and
   its weight in the score, so the number can be checked rather than
   trusted. */
.ai-findings{display:grid;gap:8px;margin-top:14px}
.ai-finding{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;background:var(--soft)}
.ai-finding b{font-size:14px}
.ai-finding p{margin:4px 0 0;font-size:13px;line-height:1.5}
.ai-finding .btn{margin-top:9px}
.ai-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:800;flex:0 0 auto}
.ai-finding.ok .ai-dot{background:rgba(22,163,74,.14);color:#16a34a}
.ai-finding.bad .ai-dot{background:rgba(180,83,9,.14);color:#b45309}
.ai-finding.bad{border-color:rgba(180,83,9,.28)}
.ai-evidence{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:6px 8px;margin-top:8px;
  overflow-wrap:anywhere}
.ai-weight{font-size:11px;font-weight:800;color:var(--muted);white-space:nowrap;padding-top:3px}
@media(max-width:640px){.ai-finding{grid-template-columns:auto minmax(0,1fr)}.ai-weight{grid-column:2;padding-top:0}}

/* ==========================================================================
   AdMindra design language
   --------------------------------------------------------------------------
   Written against docs/02 (Product Experience Standard) and docs/03 (Design
   References). The app had no type scale — everything sat between 13 and
   17px in one weight — no spacing rhythm, and one flat card treatment for
   every kind of content. That reads as unfinished no matter how correct the
   logic underneath is.

   Principles taken from the references, not their pixels:
     Apple    — one clear focus per screen, generous air around it
     Linear   — tight type, quiet borders, status carries the colour
     Notion   — calm neutral surfaces, nothing shouts
     Stripe   — numbers are the hero and are legible at a glance
     Vercel   — crisp edges, restrained shadow, no decorative gradients
   ========================================================================== */
:root{
  /* Type: a real scale with contrast between levels. Fluid where the size
     matters to hierarchy, fixed where it matters to density. */
  --t-display:clamp(30px,3.1vw,42px);
  --t-title:clamp(24px,2.2vw,32px);
  --t-section:19px;
  --t-card:15.5px;
  --t-body:15px;
  --t-small:13.25px;
  --t-micro:11.5px;
  --lh-tight:1.08;
  --lh-snug:1.3;
  --lh-body:1.55;
  --tr-display:-.035em;
  --tr-title:-.028em;
  --tr-label:.06em;

  /* Spacing: a 4px-based rhythm so gaps relate to each other. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px;
  --s6:24px; --s7:32px; --s8:40px; --s9:56px; --s10:72px;

  /* Surfaces: three levels, one elevation. The old shadow
     (0 16px 48px) floated every card equally and read as heavy. */
  --surface-2:var(--soft);
  --edge:var(--line);
  --edge-strong:color-mix(in srgb,var(--text) 16%,transparent);
  --lift:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -12px rgba(15,23,42,.14);
  --lift-hover:0 2px 4px rgba(15,23,42,.05), 0 14px 34px -14px rgba(15,23,42,.2);
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px;
}
html[data-theme="dark"]{
  --lift:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -14px rgba(0,0,0,.7);
  --lift-hover:0 2px 6px rgba(0,0,0,.5), 0 18px 42px -16px rgba(0,0,0,.8);
  --edge-strong:color-mix(in srgb,var(--text) 26%,transparent);
}

/* ---- Typography ---- */
.page-title,.adm-login h1{font-size:var(--t-title);line-height:var(--lh-tight);letter-spacing:var(--tr-title);font-weight:660}
.main h2{font-size:var(--t-section);line-height:var(--lh-snug);letter-spacing:-.02em;font-weight:640}
.main h3{font-size:var(--t-card);line-height:var(--lh-snug);letter-spacing:-.015em;font-weight:640}
.main p,.main li{font-size:var(--t-body);line-height:var(--lh-body)}
.main .muted{font-size:var(--t-small)}
.page-header-eyebrow,.engine-group-title,.section-block-head h2 + .muted{letter-spacing:var(--tr-label)}
.engine-group-title{font-size:var(--t-micro);font-weight:700;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s4)}

/* Numbers are the product. Tabular figures so columns line up and a
   number never reflows as it counts up. */
.stat b,.kpi-value,.ac-metrics b,.mini-row span b{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- Surfaces ---- */
.panel{border-radius:var(--r-xl);box-shadow:var(--lift);padding:var(--s6);border-color:var(--edge)}
/* Space between panels stacked down the page. It must not apply when the
   panels are laid out by a grid: there the container's gap already spaces
   them, and the sibling margin pushes every panel except the first one down
   by 16px, so a row of cards sits visibly staggered. That was happening on
   every .grid2 of panels in the app. */
.panel + .panel{margin-top:var(--s4)}
:is(.grid2,.card-grid,.sug-grid,.site-grid,.engine-grid,.growth-overview,.score-grid,.aud-strip) > .panel + .panel{margin-top:0}
.panel.soft-panel{box-shadow:none;background:var(--surface-2)}
.section-head{margin-bottom:var(--s4);align-items:flex-start}
.section-head h2{margin:0 0 2px}
.section-head .muted{margin:0}

/* ---- Status strip: the first thing on Home. Give the numbers presence. ---- */
.status-strip{border-radius:var(--r-xl);border:1px solid var(--edge);background:var(--panel);
  box-shadow:var(--lift);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
.status-cell{padding:var(--s5) var(--s6);display:grid;gap:var(--s1);align-content:start;border-left:1px solid var(--edge)}
.status-cell:first-child{border-left:0}
.status-cell .k{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.status-cell .v{font-size:30px;font-weight:660;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums}
.status-cell .s{font-size:var(--t-small);color:var(--muted)}
/* One cell is a link — an unanswered enquiry is the one number on this
   strip you can act on, so clicking it goes to the list. It must not
   announce itself as a link with an underline; it is still a stat. */
a.status-cell{text-decoration:none;color:inherit;transition:.12s background}
a.status-cell:hover{background:var(--soft)}
.status-cell .v.muted{color:var(--muted)}
@media(max-width:900px){.status-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-cell{border-top:1px solid var(--edge)}
  .status-cell:nth-child(-n+2){border-top:0}
  .status-cell:nth-child(odd){border-left:0}}

/* ---- Engine cards ----
   These were spec sheets: five grey bullets each, identical weight, the
   same "Månadsgräns" line repeated six times. A customer scanning the
   dashboard could not tell them apart. Now the name and the promise carry
   the card, the detail list is secondary, and the action is always in the
   same place. */
.engine-card{display:flex;flex-direction:column;gap:var(--s3);text-align:left;width:100%;
  background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-xl);
  padding:var(--s6);cursor:pointer;box-shadow:var(--lift);text-decoration:none;color:inherit;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.engine-card:hover{border-color:var(--edge-strong);box-shadow:var(--lift-hover);transform:translateY(-2px)}
.engine-card.featured{border-color:var(--edge-strong)}
.engine-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0}
.engine-tag{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted)}
.engine-budget{font-size:var(--t-micro);color:var(--muted);opacity:.75;white-space:nowrap}
.engine-card h3{margin:0;font-size:19px;font-weight:660;letter-spacing:-.022em}
.engine-card p{margin:0;color:var(--muted);font-size:var(--t-small);line-height:1.5}
.engine-card ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--s1) 6px}
.engine-card ul li{font-size:var(--t-micro);color:var(--muted);background:var(--surface-2);
  border:1px solid var(--edge);border-radius:999px;padding:3px 9px;line-height:1.5}
.engine-card .btn{margin-top:auto;align-self:flex-start}
.engine-group + .engine-group{margin-top:var(--s7)}

/* ---- Pills: status carries the colour, nothing else does ---- */
.pill{font-size:var(--t-micro);font-weight:700;letter-spacing:.02em;padding:5px 9px;border-radius:7px}
.pill.good{background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good);border-color:color-mix(in srgb,var(--good) 26%,transparent)}
.pill.warn{background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 26%,transparent)}
.pill.accent{background:color-mix(in srgb,var(--text) 8%,transparent);color:var(--text);border-color:var(--edge)}

/* ---- Buttons ---- */
.btn{font-size:14px;font-weight:620;letter-spacing:-.008em;min-height:40px;padding:10px 16px;border-radius:10px}
.btn.small{min-height:32px;padding:6px 11px;font-size:var(--t-small);border-radius:8px}
.btn.secondary{border-color:var(--edge)}
.btn.secondary:hover{border-color:var(--edge-strong)}

/* ---- Attention queue: one clear next action per row ---- */
.queue > *{border-radius:var(--r-lg)}
.mini-row{border-radius:var(--r-md);padding:var(--s3) var(--s4);background:var(--surface-2);
  grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--s4)}
.mini-row b{font-size:var(--t-small);font-weight:620}
.mini-row span{font-size:var(--t-small);text-align:right}

/* ---- Page rhythm ---- */
.main{padding:var(--s7) var(--s7) var(--s10)}
.page-header{margin-bottom:var(--s6)}
.section-block + .section-block{margin-top:var(--s8)}
@media(max-width:900px){.main{padding:var(--s4) var(--s4) var(--s9)}}

/* ---- Home launcher ----
   Home was the whole engine catalogue: ten large cards, three grid rows
   left half empty, 2500px of scroll before the page ended. docs/03 says
   Home shows status and next actions; choosing an engine is the job of
   Campaigns. This is the compact version - same targets, one line each. */
.launcher{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s2)}
.launch{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3) var(--s4);
  text-align:left;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r-md);
  padding:var(--s3) var(--s4);cursor:pointer;text-decoration:none;color:inherit;min-height:62px;
  transition:border-color .14s ease,background-color .14s ease}
.launch:hover{border-color:var(--edge-strong);background:var(--surface-2)}
.launch-name{font-size:var(--t-small);font-weight:640;letter-spacing:-.01em;grid-column:1}
.launch-why{grid-column:1;font-size:var(--t-micro);color:var(--muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.launch-go{grid-column:2;grid-row:1 / span 2;color:var(--muted);font-size:15px;transition:transform .14s ease}
.launch:hover .launch-go{transform:translateX(2px);color:var(--text)}

/* ---- AI visibility ----
   The page was two inputs on empty white. It now teaches before it asks:
   the checks are visible before you run anything, and the traffic we have
   already measured is shown immediately rather than gated behind a form. */
.ai-score-panel{padding-bottom:var(--s5)}
.ai-score{display:flex;align-items:center;gap:var(--s6);padding-bottom:var(--s5);
  border-bottom:1px solid var(--edge);margin-bottom:var(--s5)}
.ai-score-num{display:flex;align-items:baseline;gap:2px;flex:0 0 auto}
.ai-score-num b{font-size:clamp(46px,5vw,64px);font-weight:660;letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.ai-score-num span{font-size:17px;color:var(--muted);font-weight:600}
.ai-score-num.good b{color:var(--good)}
.ai-score-num.warn b{color:var(--warn)}

/* The score, drawn from the same number that is printed inside it. A ring
   says "62 out of 100" at a glance in a way a bare numeral does not. */
.ai-ring{position:relative;width:132px;height:132px;flex:0 0 auto;display:grid;place-items:center}
.ai-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ai-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ai-ring-bg{stroke:var(--soft2,var(--soft))}
.ai-ring-fg{stroke:var(--accent);transition:stroke-dashoffset .6s ease}
.ai-ring.good .ai-ring-fg{stroke:var(--good)}
.ai-ring.warn .ai-ring-fg{stroke:var(--warn)}
.ai-ring-num{position:absolute;display:flex;align-items:baseline;gap:1px}
.ai-ring-num b{font-size:38px;font-weight:660;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums}
.ai-ring-num small{font-size:13px;color:var(--muted);font-weight:600}
@media(prefers-reduced-motion:reduce){.ai-ring-fg{transition:none}}

/* Ten findings in one list made one problem look like nine. What is wrong
   comes first; what passed folds away but stays there to be checked. */
.ai-group{margin:var(--s5) 0 0;font-size:13px;font-weight:600;letter-spacing:.02em;
  text-transform:uppercase;color:var(--muted)}
.ai-group small{font-weight:700;opacity:.7}
.ai-passed{margin-top:var(--s4)}
.ai-passed summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--muted);
  padding:9px 0;list-style:none;display:flex;align-items:center;gap:6px}
.ai-passed summary::-webkit-details-marker{display:none}
.ai-passed summary::before{content:"▸";font-size:11px;transition:.14s transform}
.ai-passed[open] summary::before{transform:rotate(90deg)}
.ai-passed summary:hover{color:var(--text)}
@media(max-width:640px){.ai-score{flex-direction:column;align-items:flex-start;gap:var(--s4)}}

.ai-checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:var(--s2)}
.ai-check{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s3);align-items:start;
  padding:var(--s3) var(--s4);border:1px solid var(--edge);border-radius:var(--r-md);background:var(--surface-2)}
.ai-check b{font-size:var(--t-small);font-weight:620;display:block}
.ai-check p{margin:3px 0 0;font-size:var(--t-micro);color:var(--muted);line-height:1.5}
.ai-check-w{font-size:var(--t-micro);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
  background:var(--panel);border:1px solid var(--edge);border-radius:6px;padding:2px 6px;line-height:1.5}

/* ---- Budget control (docs/04) ----
   "Det skapar trygghet när systemet blir mer autonomt." The meter is the
   whole point: one glance says how much of the ceiling is committed and
   that the ceiling holds. Two fills, not one, because live money and
   approved-but-not-started money are different promises. ---- */
.budget-control{border:1px solid var(--edge);border-radius:var(--r-xl);background:var(--panel);
  box-shadow:var(--lift);padding:var(--s5) var(--s6);margin-top:var(--s4);display:grid;gap:var(--s4)}
.bc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s4);flex-wrap:wrap}
.bc-k{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.bc-v{display:block;font-size:30px;font-weight:660;letter-spacing:-.03em;line-height:1.1;
  margin-top:var(--s1);font-variant-numeric:tabular-nums}
.bc-v small{font-size:var(--t-small);font-weight:500;color:var(--muted);letter-spacing:0}
.bc-verdict{font-size:var(--t-small);font-weight:600;border-radius:999px;padding:6px 11px;
  border:1px solid var(--edge);white-space:nowrap}
.bc-verdict.ok{color:var(--good);background:var(--good-soft);border-color:var(--good-soft)}
.bc-verdict.over{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-soft)}
.bc-meter{display:flex;height:8px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--edge);overflow:hidden}
.bc-fill{display:block;height:100%}
.bc-fill.live{background:var(--accent)}
.bc-fill.planned{background:var(--accent-line)}
.budget-control.over .bc-fill.live{background:var(--warn)}
.bc-legend{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);font-size:var(--t-small);color:var(--muted)}
.bc-legend span{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.bc-legend i{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.bc-legend i.live{background:var(--accent)}
.bc-legend i.planned{background:var(--accent-line)}
.bc-legend i.free{background:var(--surface-2);border:1px solid var(--line-strong)}
.budget-control.over .bc-legend i.live{background:var(--warn)}
.bc-note{margin:0;font-size:var(--t-micro);color:var(--muted);line-height:1.55}
.budget-control.unset .bc-v{font-size:var(--t-card);font-weight:620;color:var(--muted)}
.status-strip.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){
  .status-strip.cols-3{grid-template-columns:1fr}
  .status-strip.cols-3 .status-cell{border-left:0;border-top:1px solid var(--edge)}
  .status-strip.cols-3 .status-cell:first-child{border-top:0}
  .budget-control{padding:var(--s4)}
  .bc-v small{display:block;margin-top:3px}
  .bc-verdict{white-space:normal}
  .bc-legend{gap:var(--s2) var(--s4)}
}

/* ---- Din AI-säljare (docs/05 §F) ----
   A segment card has to carry three things at a glance: who, the angle,
   and why AdMindra picked them. The reason is given the same weight as the
   label on purpose — a group without a visible reason is indistinguishable
   from a scraped list, which is exactly what this product is not. ---- */
.sales-page .queue-row{text-decoration:none}
.sales-pipeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.sp-step{border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--surface-2);
  padding:var(--s4);display:grid;gap:2px}
.sp-step b{font-size:26px;font-weight:660;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.sp-step span{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.seg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--s4)}
/* Flex column rather than grid so the action row can be pushed to the
   bottom: cards in a row have different amounts of reasoning, and buttons
   floating at three different heights reads as unfinished. */
.seg-card{border:1px solid var(--edge);border-radius:var(--r-xl);background:var(--panel);
  box-shadow:var(--lift);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.seg-card>.button-row,.seg-card>.seg-decided{margin-top:auto;padding-top:var(--s1)}
.seg-card.is-approved{border-color:var(--good);box-shadow:none}
.seg-card.is-rejected{opacity:.6;box-shadow:none}
.seg-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3)}
.seg-head h3{margin:0;font-size:var(--t-card);font-weight:640;letter-spacing:-.015em}
.seg-angle{margin:var(--s2) 0 0;font-size:var(--t-body);color:var(--text);line-height:1.45}
.seg-conf{flex:0 0 auto;font-size:var(--t-micro);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;border:1px solid var(--edge);border-radius:999px;padding:3px 8px}
.seg-why{display:grid;gap:3px}
.seg-k{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.seg-why p{margin:0;font-size:var(--t-small);color:var(--muted);line-height:1.55}
.seg-meta{display:flex;flex-wrap:wrap;gap:var(--s2)}
.seg-reach{margin:0;font-size:var(--t-micro);color:var(--muted);line-height:1.5}
/* A fact and its label stack, because these values are sentences. The
   two-column mini-row squeezed them into a narrow ragged column. */
.fact-row{display:grid;gap:3px;border:1px solid var(--edge);border-radius:var(--r-md);
  background:var(--surface-2);padding:var(--s3) var(--s4);margin:var(--s2) 0}
.fact-row b{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.fact-row span{font-size:var(--t-small);color:var(--text);line-height:1.55}
/* When the bold half is a literal search string rather than a label, it has
   to read exactly as it will be sent. The uppercase label treatment turns
   "familjebloggar Skåne samarbete" into something the customer never typed. */
.fact-row.fact-literal b{text-transform:none;letter-spacing:0;color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-small)}
.seg-decided{font-size:var(--t-small);font-weight:600;color:var(--muted)}
.mission-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  text-decoration:none;border:1px solid var(--edge);border-radius:var(--r-lg);
  background:var(--panel);padding:var(--s4) var(--s5)}
.mission-row:hover{border-color:var(--line-strong)}
.mission-main{display:grid;gap:2px;min-width:0}
.mission-main b{font-size:var(--t-body);font-weight:620}
.mission-main .muted{font-size:var(--t-small)}
.sales-form{display:grid;gap:var(--s4);margin-bottom:var(--s4)}
.warn-notice{border-color:var(--warn);color:var(--warn)}
@media(max-width:900px){
  .sales-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg-grid{grid-template-columns:1fr}
}

/* The search plan is editable text, not a read-only list: the customer is
   approving the literal query, so they must be able to fix it in place. */
.query-row{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);flex-wrap:wrap;
  border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--panel);padding:var(--s3) var(--s4)}
.query-row.is-done{background:var(--surface-2);box-shadow:none}
.query-main{display:grid;gap:3px;flex:1 1 320px;min-width:0}
.query-main .muted{font-size:var(--t-micro)}
.query-input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--t-small);
  padding:8px 10px;border-radius:var(--r-md)}

/* An outreach draft is read before it is approved, so the email itself is
   the largest thing on the card and everything else frames it: who it goes
   to, why them, and which pages the claims came from. */
.draft-list{display:grid;gap:var(--s4)}
.draft-card{border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--panel);
  padding:var(--s4);display:grid;gap:var(--s3)}
.draft-card.is-done{background:var(--surface-2)}
.draft-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);flex-wrap:wrap}
.draft-head b{display:block;font-size:var(--t-body)}
.draft-head .muted{font-size:var(--t-micro)}
.draft-why{margin:0;font-size:var(--t-small);line-height:1.55;max-width:78ch}
.draft-sources{margin:0;font-size:var(--t-micro)}
.draft-card textarea{font-size:var(--t-small);line-height:1.6;resize:vertical}
.draft-body-static{border-left:2px solid var(--edge);padding-left:var(--s3)}
.draft-body-static b{display:block;margin-bottom:4px}
.draft-body-static p{margin:0;font-size:var(--t-small);line-height:1.6;white-space:pre-wrap}
.draft-foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.draft-group{margin-top:var(--s6)}
.draft-group .draft-list{margin-top:var(--s3)}

/* Tabs are links now (so they are deep-linkable and open in a new tab),
   which means they arrive with the browser's underline. */
.tabs a.tab{text-decoration:none;color:var(--muted)}
/* Tabs are the underline style from the layer above, so the active one is
   dark text with a rule under it — NOT the pill colours, which would put
   white text on a transparent background. */
.tabs a.tab.active{color:var(--text)}
.tabs a.tab small{opacity:.7;font-weight:600;margin-left:2px}

/* A group of ad cards in Beslut carries the reason once, above the cards.
   The cards show the ad; the line above says what is being asked. */
.decision-group{margin-top:var(--s4)}
.decision-group + .decision-group{margin-top:var(--s6)}
.decision-group-head{display:flex;align-items:center;gap:var(--s2)}
.decision-group-head b{font-size:var(--t-small);font-weight:640}
.decision-why{margin:2px 0 var(--s4);font-size:var(--t-small);color:var(--muted);
  line-height:1.55;max-width:72ch}

/* Möjligheter sits below the decisions, full width, so the ranking reads
   top to bottom (docs/04). Side by side it competed with the block it is
   supposed to rank under. */
.opp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
.opp-grid>*{margin:0;display:flex;flex-direction:column}
/* Cards hold different amounts of text, so the buttons line up on the
   baseline instead of stepping down the row. */
.opp-action{margin-top:auto;padding-top:10px}
@media(max-width:1100px){ .opp-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:760px){ .opp-grid{grid-template-columns:1fr} }

/* The audience proposal review. Deliberately a plain single column: the ad
   modal's two-column body is built for a creative next to its fields, and
   this is a list you read top to bottom before agreeing to it. */
.aud-modal{width:min(720px,100%)}
.aud-modal .modal-body{grid-template-columns:1fr}
.modal-foot{display:flex;gap:var(--s2);flex-wrap:wrap;padding:var(--s4);
  border-top:1px solid var(--line);position:sticky;bottom:0;
  background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:blur(10px)}
.aud-prop-list{display:grid;gap:var(--s2)}
.aud-prop{display:flex;gap:var(--s3);align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s3);background:var(--panel)}
.aud-prop:hover{background:var(--soft)}
.aud-prop input{width:auto;margin-top:3px;flex:none}
.aud-prop-body{display:grid;gap:3px;min-width:0}
.aud-prop-body b{font-size:var(--t-small)}
.aud-prop-value{font-size:var(--t-small);line-height:1.5}

/* Platform marks on decision rows. Which platform is asking is the fastest
   orientation available, and a glyph reads before a word does. */
.pmark{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:8px;background:var(--soft);border:1px solid var(--line)}
.pmark svg{width:16px;height:16px}
.pmark-meta{color:#0866ff}
.pmark-google{color:#4285f4}
.pmark-instagram{color:#c13584}
.pmark-admindra{color:var(--muted)}
.queue-num{flex:none;font-size:var(--t-micro);font-weight:700;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:18px}
.decision-group-head .pmark{width:22px;height:22px}
.decision-group-head .pmark svg{width:14px;height:14px}

/* Autopilot säljsystem on Idag. */
.autopilot-block{border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);padding:var(--s5)}
.autopilot-head{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.autopilot-head>div{flex:1 1 260px;min-width:0}
.autopilot-head h2{margin:0 0 2px;font-size:var(--t-h3)}
.autopilot-head p{margin:0;max-width:70ch}
.autopilot-mark{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:12px;background:var(--soft);border:1px solid var(--line)}
.autopilot-mark svg{width:20px;height:20px}
.autopilot-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s3);margin-top:var(--s4)}
.autopilot-stat{background:var(--soft);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s3)}
.autopilot-stat b{display:block;font-size:26px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.autopilot-stat span{display:block;font-size:var(--t-micro);color:var(--muted);margin-top:2px}
.autopilot-note{margin:var(--s3) 0 0;font-size:var(--t-small)}
@media(max-width:760px){ .autopilot-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* The live targeting read. */
.targeting-panel{margin-bottom:var(--s4)}
.targeting-panel .queue-row{cursor:default}

/* --- Company analysis presentation ------------------------------------
   This page is where a customer decides whether AdMindra is a consultancy
   or a chatbot. Scorecards, a SWOT grid and a comparison table read as the
   former; a wall of generated prose reads as the latter. */
/* Five axes, so the grid has to fit five across before it wraps — one card
   alone on a second row reads as a mistake. */
/* align-items:start so a card with no insight is a short card rather than a
   tall empty one. Only two of the five scores carry a sentence, so three
   were stretched to match and read as boxes waiting to be filled in. */
.score-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(188px,1fr));gap:var(--s3);
  align-items:start}
@media(min-width:1200px){ .score-grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.scorecard{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  padding:var(--s4);display:grid;gap:var(--s2);align-content:start}
.scorecard-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.scorecard-head b{font-size:var(--t-small)}
.scorecard-score{font-size:26px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.scorecard-score small{font-size:12px;font-weight:600;color:var(--muted);margin-left:1px}
.scorecard-score.good{color:var(--good)}
.scorecard-score.accent{color:var(--text)}
.scorecard-score.warn{color:var(--warn)}
.scorebar{height:6px;border-radius:999px;background:var(--soft);overflow:hidden}
.scorebar i{display:block;height:100%;border-radius:999px;background:var(--text)}
.scorebar i.good{background:var(--good)}
.scorebar i.warn{background:var(--warn)}
.scorecard-insight,.scorecard-action{margin:0;font-size:var(--t-small);line-height:1.55}
.scorecard-action{color:var(--muted)}

.swot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.swot-cell{border:1px solid var(--line);border-left-width:3px;border-radius:var(--r-lg);
  background:var(--panel);padding:var(--s4);display:grid;gap:var(--s2);align-content:start}
.swot-good{border-left-color:var(--good)}
.swot-warn{border-left-color:var(--warn)}
.swot-accent{border-left-color:var(--accent,var(--text))}
.swot-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.swot-cell ul{margin:0;padding-left:18px;display:grid;gap:5px}
.swot-cell li{font-size:var(--t-small);line-height:1.5}
@media(max-width:760px){ .swot-grid{grid-template-columns:1fr} }

.cmp-table th{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.cmp-table td{vertical-align:top;font-size:var(--t-small)}
.cmp-you{background:var(--soft)}
.cmp-you td{font-weight:600}
.cmp-score{display:inline-flex;align-items:center;justify-content:center;min-width:34px;
  padding:3px 7px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--soft);border:1px solid var(--line)}
.cmp-score.good{color:var(--good)}
.cmp-score.warn{color:var(--warn)}

/* Revenue and result per year. Bars, because the shape of the trend is the
   point and a table of six numbers hides it. */
.fin-chart{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:var(--s3);align-items:end;min-height:190px}
.fin-col{display:grid;gap:3px;text-align:center;justify-items:center}
.fin-bar-wrap{height:120px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fin-bar{width:min(46px,80%);border-radius:8px 8px 3px 3px;background:var(--text);opacity:.85}
.fin-bar.neg{background:var(--warn)}
/* A year with no revenue entered. An outline, not a bar of height zero —
   zero is a figure, and this is the absence of one. */
.fin-bar-missing{width:min(46px,80%);height:100%;border-radius:8px 8px 3px 3px;
  border:1px dashed var(--edge);background:repeating-linear-gradient(45deg,
    transparent,transparent 5px,var(--soft) 5px,var(--soft) 10px)}
.fin-col b{font-size:var(--t-small);font-variant-numeric:tabular-nums}
.fin-col span{font-size:var(--t-micro);font-variant-numeric:tabular-nums}
.fin-col small{font-size:var(--t-micro);color:var(--muted)}

.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.plan-col{display:grid;gap:var(--s2);align-content:start}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding-bottom:var(--s2);border-bottom:1px solid var(--line)}
.plan-item{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  padding:var(--s3);display:grid;gap:4px}
.plan-item b{font-size:var(--t-small)}
.plan-item span{font-size:var(--t-micro);line-height:1.5}
.plan-item .pill{justify-self:start}
@media(max-width:900px){ .plan-grid{grid-template-columns:1fr} }

/* Financial input and reading. */
.fin-source{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  flex-wrap:wrap;border:1px dashed var(--line-strong,var(--line));border-radius:var(--r-lg);
  padding:var(--s3) var(--s4);background:var(--soft)}
.fin-source-head b{display:block;font-size:var(--t-small)}
.fin-source-head .muted{font-size:var(--t-micro)}
.fin-editor{margin-top:var(--s4)}
.fin-rows{display:grid;gap:6px}
.fin-row{display:grid;grid-template-columns:90px 1fr 1fr 90px 34px;gap:8px;align-items:center}
.fin-row input{padding:8px 10px;font-size:var(--t-small)}
.fin-row-head{font-size:var(--t-micro);color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.04em;padding:0 2px}
@media(max-width:760px){
  .fin-row{grid-template-columns:1fr 1fr;gap:6px}
  .fin-row-head{display:none}
}
/* Year-over-year growth above each bar — the trend is what the chart is for. */
.fin-growth{font-size:var(--t-micro);font-weight:700;font-variant-numeric:tabular-nums;min-height:15px}
.fin-growth.up{color:var(--good)}
.fin-growth.down{color:var(--warn)}

.fin-verdict{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);
  padding:var(--s4);display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.fin-verdict-head{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.fin-verdict-head b{font-size:var(--t-h3);letter-spacing:-.02em}
.fin-strategy{margin:0;font-size:var(--t-small);line-height:1.6;max-width:78ch}
.fin-signals{margin:0;padding-left:18px;display:grid;gap:4px}
.fin-signals li{font-size:var(--t-small);line-height:1.5;color:var(--muted)}
.fin-signals li.sig-good{color:var(--good)}
.fin-signals li.sig-warn{color:var(--warn)}

/* Two shapes in one table, on purpose: the customer's own site is measured
   and gets a number; competitors are assessed and get a direction. An
   invented score column would be the most authoritative-looking fiction on
   the page. */
.cmp-pos{display:inline-flex;align-items:center;gap:5px;font-weight:700;font-size:var(--t-micro)}
.cmp-pos em{font-style:normal;font-weight:600;color:var(--muted)}
.cmp-ahead{color:var(--warn)}      /* they are ahead — that is the warning */
.cmp-behind{color:var(--good)}     /* they are behind — that is your lead */
.cmp-level,.cmp-unknown{color:var(--muted)}
.cmp-note{margin:var(--s3) 0 0;font-size:var(--t-micro);max-width:80ch}

/* The conclusion first. A report that makes you scroll to find out whether
   things are going well is a report nobody finishes. */
.exec-summary{border:1px solid var(--line);border-left:3px solid var(--text);
  border-radius:var(--r-lg);background:var(--panel);padding:var(--s5);margin-bottom:var(--s5)}
.exec-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-bottom:var(--s3)}
.exec-text{margin:0 0 var(--s2);font-size:var(--t-lead,17px);line-height:1.6;max-width:80ch}
.strategy-cta{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s5)}
.chip-row{display:flex;gap:6px;flex-wrap:wrap}

/* Influencer candidates.

   Every other tool in this category leads with a follower count. We cannot
   read one, so the card leads with the handle and gives the space that a
   number would have taken to WHY this creator fits and WHERE we found them
   — the two things we did actually establish. The reach line is not an
   apology tucked in small print; it is a visible row, because a blank where
   a number belongs is a blank the reader fills in with a guess. */
.inf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s4)}
/* Flex rather than grid so the action can be pushed to the bottom: cards in
   a row are as tall as the tallest, and a button floating mid-card next to
   one that sits at the bottom reads as a mistake. */
.inf-card{border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--panel);
  padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2)}
.inf-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s2)}
.inf-head b{display:block;font-size:var(--t-body);word-break:break-word}
.inf-head .muted{display:block;font-size:var(--t-micro);margin-top:2px}
.inf-why{margin:0;font-size:var(--t-small);line-height:1.55}
.inf-found{margin:0;font-size:var(--t-micro);line-height:1.5;word-break:break-word}
.inf-found .pill{margin-left:4px}
/* Stated, not hidden: the one number a buyer expects here is one we did
   not measure. */
.inf-reach{font-size:var(--t-micro);color:var(--muted);border-top:1px dashed var(--edge);
  border-bottom:1px dashed var(--edge);padding:6px 0;margin:2px 0}
.inf-card .button-row{margin-top:auto;padding-top:var(--s2)}
@media(max-width:520px){ .inf-grid{grid-template-columns:1fr} }

/* Per-ad targeting.

   These fields are the difference between an audience note and an audience.
   They are laid out as a form rather than as a summary because they are
   edited far more often than they are read — and the two states that cost
   money (a place Meta has not confirmed, and audience expansion being on)
   are given colour rather than prose. */
.tgt-row{display:grid;gap:6px;margin-bottom:var(--s3)}
.tgt-label{font-size:var(--t-micro);font-weight:700;letter-spacing:var(--tr-label);
  text-transform:uppercase;color:var(--muted)}
.tgt-country{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--edge);
  background:var(--panel);color:var(--text);border-radius:999px;padding:5px 11px;
  font-size:var(--t-small);font-weight:600;cursor:pointer}
.tgt-country small{font-size:var(--t-micro);font-weight:600;color:var(--muted)}
.tgt-country:hover{border-color:var(--text)}
.tgt-country.on{background:var(--text);color:var(--panel);border-color:var(--text)}
.tgt-country.on small{color:var(--panel);opacity:.7}
.tgt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.tgt-grid .field input,.tgt-grid .field select{padding:8px 10px;font-size:var(--t-small)}
.tgt-verify{margin-top:var(--s3)}
.tgt-verify .muted{margin:6px 0 0;font-size:var(--t-micro);line-height:1.5}
.tgt-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:4px 10px;font-size:var(--t-micro);font-weight:600;border:1px solid var(--edge)}
.tgt-chip small{font-weight:600;opacity:.8}
.tgt-chip.is-ok{border-color:var(--good);color:var(--good)}
.tgt-chip.is-pending{border-color:var(--warn);color:var(--warn)}
.tgt-toggle{display:flex;gap:10px;align-items:flex-start;margin-top:var(--s3);
  border:1px solid var(--edge);border-radius:var(--r-md);padding:10px 12px;background:var(--surface-2)}
.tgt-toggle input{margin-top:3px}
.tgt-toggle b{display:block;font-size:var(--t-small)}
.tgt-toggle small{display:block;font-size:var(--t-micro);color:var(--muted);line-height:1.5}
.tgt-saved{align-self:center;font-size:var(--t-micro);color:var(--muted)}

/* Meta, Google, or both. Three buttons rather than two checkboxes: nobody
   wants the fourth state, which is an ad that runs nowhere. */
.chan-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.chan-opt{display:block;text-align:left;border:1px solid var(--edge);background:var(--panel);
  color:var(--text);border-radius:var(--r-md);padding:10px 12px;cursor:pointer}
.chan-inner{display:grid;gap:2px;width:100%}
.chan-opt b{font-size:var(--t-small)}
.chan-opt small{font-size:var(--t-micro);color:var(--muted);line-height:1.4}
.chan-opt:hover{border-color:var(--text)}
.chan-opt.on{border-color:var(--text);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--text)}
@media(max-width:640px){ .chan-row{grid-template-columns:1fr} }

/* Budget and dates on the tile itself. Quiet until touched — a grid of 41
   cards must not read as a spreadsheet. */
.tile-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px 12px;border-top:1px solid var(--edge)}
.tile-quick label{display:inline-flex;align-items:center;gap:4px;margin:0}
.tile-quick input{border:1px solid transparent;background:var(--surface-2);border-radius:var(--r-sm,8px);
  padding:4px 7px;font-size:var(--t-micro);color:var(--text);font-variant-numeric:tabular-nums}
.tile-quick input:hover{border-color:var(--edge)}
.tile-quick input:focus{border-color:var(--text);outline:none}
.tq-budget input{width:64px;text-align:right}
.tq-budget span{font-size:var(--t-micro);color:var(--muted)}
.tq-date{gap:3px}
.tq-date span{font-size:var(--t-micro);color:var(--muted)}
.tq-date input{width:112px}
.tq-warn{border:1px solid var(--warn);color:var(--warn);background:transparent;
  border-radius:999px;padding:3px 9px;font-size:var(--t-micro);font-weight:700;cursor:pointer}

/* ── Webbplatser ────────────────────────────────────────────────────────
   The overview under Growth. Given its own surface treatment rather than
   reusing the panel rows, because this is the page a customer lands on to
   decide what to build next — the ad screens are for work already decided.

   Every colour is a theme token. The Growth module got this wrong by
   hard-coding white and patching it with prefers-color-scheme; nothing new
   should repeat that. */
.sites-hero{display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:28px;align-items:center;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 6%,var(--panel)),var(--panel));
  border:1px solid var(--line);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);margin-bottom:26px}
.sites-hero h1{font-size:clamp(26px,3.2vw,40px);line-height:1.03;letter-spacing:-.045em;margin:14px 0 10px}
.sites-hero p{margin:0 0 18px;max-width:56ch;line-height:1.55;color:var(--muted)}
.sites-hero-stats{display:grid;grid-template-columns:repeat(2,minmax(96px,1fr));gap:10px}
.sites-hero-stats .stat{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px 12px;text-align:center}
.sites-hero-stats .stat b{font-size:26px;display:block;letter-spacing:-.03em}

.site-grid,.sug-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px}
.site-card{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);
  border-radius:20px;padding:18px;box-shadow:var(--shadow);transition:.15s transform,.15s box-shadow}
.site-card:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(15,23,42,.10)}
.site-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.site-card-title{min-width:0}
.site-card h3{margin:0 0 3px;font-size:17px;letter-spacing:-.02em;overflow-wrap:anywhere}
.site-url{font-size:12px;color:var(--muted);text-decoration:none;overflow-wrap:anywhere}
.site-url:hover{text-decoration:underline}
.site-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.site-metrics b{font-size:19px;display:block;letter-spacing:-.02em}
.site-metrics span{font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.site-domains{display:flex;gap:6px;flex-wrap:wrap}
.dom{font-size:11px;font-weight:800;border-radius:999px;padding:4px 9px;border:1px solid var(--line);overflow-wrap:anywhere}
/* An unverified domain must not look like a working address — it is a link
   the customer would otherwise hand out before DNS resolves. */
.dom.ok{background:color-mix(in srgb,var(--good) 12%,var(--panel));color:var(--good);
  border-color:color-mix(in srgb,var(--good) 40%,var(--line))}
.dom.pending{background:color-mix(in srgb,var(--warn) 12%,var(--panel));color:var(--warn);
  border-color:color-mix(in srgb,var(--warn) 40%,var(--line))}
.site-card-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto}
/* A landing page has no metrics row to push the buttons down, so the lead
   line takes the slack and the footers still line up across the grid. */
.site-lead{margin:0 0 auto!important;font-size:var(--t-small);line-height:1.5}
.site-card-foot small{margin-left:auto}

.sug-card{display:flex;flex-direction:column;gap:9px;background:var(--soft);border:1px dashed var(--line);
  border-radius:20px;padding:18px}
.sug-card h3{margin:2px 0 0;font-size:16px;letter-spacing:-.02em}
.sug-card p{margin:0;font-size:13px;line-height:1.5}
.sug-card .pill{align-self:flex-start}
/* The evidence line takes the slack, so the buttons sit on one line across
   the row however long each description runs. */
.sug-card .sug-evidence{margin-top:auto}
.sug-card .btn{align-self:flex-start;margin-top:4px}
/* The provenance line. Deliberately quiet — it is there to be checked, not
   read first. */
.sug-evidence{font-size:11px;color:var(--muted);border-left:2px solid var(--line);padding-left:9px;
  font-style:italic;overflow-wrap:anywhere}
/* Svar & leads.

   A list, not a grid of cards: these are read top to bottom, newest first,
   and the question is always "which of these have I not answered". Rows
   collapse to one line each so twenty of them fit on a screen, and open
   with <details> so expanding needs no JavaScript and works from the
   keyboard. */
.lead-count{margin:0 0 10px;font-size:var(--t-small)}
.lead-list{display:flex;flex-direction:column;gap:8px}
.lead-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lead-item summary{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;gap:12px;
  align-items:center;padding:13px 16px;cursor:pointer;list-style:none}
.lead-item summary::-webkit-details-marker{display:none}
.lead-item summary:hover{background:var(--soft)}
.lead-item[open] summary{border-bottom:1px solid var(--line)}
.lead-who{display:flex;align-items:center;gap:8px;min-width:0}
.lead-who b{font-size:14px;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* One line, clipped. A message that wraps turns the list into a wall and
   the point of the row is to be scannable. */
.lead-prev{font-size:var(--t-small);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lead-when{font-size:11px;color:var(--muted);white-space:nowrap}
.lead-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:12px}
.lead-fields{margin:0;display:grid;gap:10px}
.lead-fields div{display:grid;grid-template-columns:minmax(120px,180px) minmax(0,1fr);gap:12px}
.lead-fields dt{font-size:11px;font-weight:850;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.lead-fields dd{margin:0;font-size:13px;line-height:1.55;overflow-wrap:anywhere}
.lead-meta{font-size:11px}
/* Answered, and kept rather than hidden: somebody has to be able to check
   what was said and when. Quieter, because it is done. */
.lead-item.done{background:var(--soft);opacity:.72}
.lead-item.done:hover{opacity:1}
.lead-done-group{margin-top:12px}
.lead-done-group>summary{cursor:pointer;font-size:12px;font-weight:800;color:var(--muted);
  padding:8px 2px;list-style:none}
.lead-done-group>summary::-webkit-details-marker{display:none}
.lead-done-group>summary:hover{color:var(--text)}
.lead-done-group>summary::before{content:'▸ ';display:inline-block;transition:.12s transform}
.lead-done-group[open]>summary::before{transform:rotate(90deg)}
/* "Blev det affär?" — the only number in this product that cannot be
   measured, only reported. Two chips and no third: clicking the one that
   is already on clears it, which is how "vet inte ännu" is reached. */
.lead-outcome{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:12px;margin-top:2px}
.lead-outcome-q{font-size:12px;font-weight:800;color:var(--muted)}
.lead-outcome-note{font-size:11px}
.oc-chip{font:inherit;font-size:12px;font-weight:750;cursor:pointer;padding:5px 12px;
  border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.oc-chip:hover{border-color:var(--line-strong);color:var(--text)}
.oc-chip.on{background:var(--text);border-color:var(--text);color:var(--panel)}
.oc-chip.on.good{background:var(--good);border-color:var(--good);color:#fff}
/* The per-page tally on Rapporter. Numbers right-aligned and tabular so a
   column of them can be compared at a glance rather than read. */
.oc-table td:not(:first-child),.oc-table th:not(:first-child){text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.oc-table td b{display:block;font-size:13px;font-weight:700}
.oc-table td small{display:block;font-size:11px;margin-top:1px}
.oc-table .oc-won{color:var(--good);font-weight:800}
@media(max-width:720px){
  /* The preview is the first thing to go: the name and the date are what
     identify a row, and three columns at this width clip all of them. */
  .lead-item summary{grid-template-columns:minmax(0,1fr) auto}
  .lead-prev{display:none}
  .lead-fields div{grid-template-columns:1fr;gap:2px}
}
.sites-empty{text-align:center;padding:38px 24px}
.sites-empty h2{margin:0 0 8px}
.sites-empty p{margin:0 auto 18px;max-width:52ch}
.sites-empty .button-row{justify-content:center}

@media(max-width:900px){
  .sites-hero{grid-template-columns:1fr;padding:22px;gap:20px}
  .sites-hero-stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sites-hero-stats .stat b{font-size:20px}
  .site-grid,.sug-grid{grid-template-columns:1fr}
}
@media(max-width:420px){ .sites-hero-stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── The company verdict ────────────────────────────────────────────────
   The band that answers the page before the evidence for it. Given real
   visual weight on purpose: everything under it is uniform panels, and a
   summary drawn like one more panel is a summary nobody reads. */
.verdict{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;margin-bottom:22px;
  box-shadow:var(--shadow);background:var(--panel)}
/* Tinted against the surface rather than a fixed pale colour, so the
   judgement reads the same in both themes. */
.verdict-good{background:linear-gradient(135deg,color-mix(in srgb,var(--good) 9%,var(--panel)),var(--panel));
  border-color:color-mix(in srgb,var(--good) 30%,var(--line))}
.verdict-warn{background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 9%,var(--panel)),var(--panel));
  border-color:color-mix(in srgb,var(--warn) 30%,var(--line))}
.verdict-danger{background:linear-gradient(135deg,color-mix(in srgb,var(--danger) 9%,var(--panel)),var(--panel));
  border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}
.verdict-main h2{margin:12px 0 8px;font-size:clamp(20px,2.3vw,28px);line-height:1.15;letter-spacing:-.035em;max-width:34ch}
.verdict-next{margin:0 0 16px;line-height:1.55;max-width:62ch;color:var(--muted)}
.verdict-next b{color:var(--text)}
.verdict-figures{display:flex;gap:10px}
.vf{min-width:92px;text-align:center;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:14px 12px}
.vf b{display:block;font-size:30px;line-height:1;letter-spacing:-.04em}
.vf b small{font-size:13px;font-weight:700;color:var(--muted);letter-spacing:0}
.vf b.hi{color:var(--warn)}
.vf span{display:block;margin-top:6px;font-size:10px;font-weight:850;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){
  .verdict{grid-template-columns:1fr;padding:22px;gap:18px}
  .verdict-figures{width:100%}
  .vf{flex:1;min-width:0}
  .vf b{font-size:24px}
  /* "FÖRBÄTTRINGAR" is one long word: uppercase and tracked out, it does not
     fit a third of a phone and was rendering clipped mid-word. Narrower
     letters and a permitted break instead of a cut. */
  .vf span{letter-spacing:.01em;text-transform:none;font-size:10.5px;hyphens:auto}
}

/* ── Tracking ───────────────────────────────────────────────────────────
   The page had one job — get the plugin onto the customer's website — and
   it kept that job inside a collapsed <details> under four panels of
   status. The two steps are the page now. */
.trk-verdict{margin-bottom:var(--s5)}
.trk-verdict .vf b small{font-size:19px;font-weight:660;color:var(--text);letter-spacing:-.03em}
.trk-warn{border-color:color-mix(in srgb,var(--warn) 46%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--warn) 8%,var(--panel)),var(--panel));
  margin-bottom:var(--s4)}
.trk-warn h2{margin:0 0 6px}

.trk-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:var(--s5);
  align-items:start}
.trk-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s4);align-items:start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:20px}
/* A finished step stays on the page — the values in it are still what the
   plugin holds — but it stops competing with the one that is not done. */
.trk-step.done{background:linear-gradient(135deg,color-mix(in srgb,var(--good) 7%,var(--panel)),var(--panel));
  border-color:color-mix(in srgb,var(--good) 28%,var(--line))}
.trk-step-n{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:800;background:var(--soft2);color:var(--text)}
.trk-step.done .trk-step-n{background:color-mix(in srgb,var(--good) 16%,var(--panel));color:var(--good)}
.trk-step-body{min-width:0}
.trk-step h2{margin:4px 0 6px;font-size:20px;letter-spacing:-.03em}
.trk-step p{margin:0 0 var(--s3);font-size:var(--t-small);line-height:1.55;max-width:56ch}
.trk-step .button-row{margin-bottom:var(--s3)}

.trk-values{display:grid;gap:var(--s3);border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s4)}
/* The button sits on the input rather than under it: these two values are
   copied far more often than they are typed. */
.trk-copy{display:flex;gap:8px;align-items:center}
.trk-copy input{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
.trk-copy .btn{flex:0 0 auto}
.trk-hint{margin:0!important;font-size:var(--t-micro);color:var(--muted)}
.trk-alt{margin:var(--s3) 0 0!important;font-size:var(--t-micro);color:var(--muted);
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.trk-meta{font-size:var(--t-micro)}
.trk-ok{border-color:color-mix(in srgb,var(--good) 40%,var(--line));
  background:color-mix(in srgb,var(--good) 9%,var(--panel));color:var(--text)}
.trk-bad{border-color:color-mix(in srgb,var(--danger) 40%,var(--line));
  background:color-mix(in srgb,var(--danger) 9%,var(--panel));color:var(--text)}
#trackingTestResult:empty{display:none}
.adv-panel>summary{font-weight:800;font-size:var(--t-small);color:var(--muted)}
.adv-panel[open]>summary{margin-bottom:var(--s3)}

/* An event line is a name, a URL and a timestamp. The shared .mini-row is
   two columns, which squeezed a product URL into a ragged four-line
   column beside a wrapping date. */
.trk-events{display:grid;gap:var(--s2)}
.trk-event{display:grid;gap:2px;border:1px solid var(--line);border-radius:var(--r-md,14px);
  background:var(--panel);padding:10px 12px}
.trk-event b{font-size:var(--t-micro);font-weight:800;letter-spacing:.02em;color:var(--text)}
.trk-event span{font-size:var(--t-small);color:var(--muted);overflow-wrap:anywhere;line-height:1.4}
.trk-event small{font-size:var(--t-micro);color:var(--muted);opacity:.8}

@media(max-width:1000px){ .trk-steps{grid-template-columns:1fr} }
@media(max-width:520px){
  .trk-step{grid-template-columns:1fr;gap:var(--s3);padding:18px}
  .trk-copy{flex-wrap:wrap}
  .trk-copy input{min-width:0}
}

/* ── Reports ────────────────────────────────────────────────────────────
   The page was nine panels of inventory — how many cards exist, how many
   applications, a legend for the pills — with the one thing a report is
   for squeezed into a four-number strip halfway down. The customer's own
   question about it: "vad ger denna mig för nytta?"

   The verdict answers it, the ledger names which ads earned and which did
   not, and everything that used to be a panel is a link at the bottom. */
.rep-verdict{margin-bottom:var(--s5)}
.rep-verdict .vf b small{font-size:20px;font-weight:660;color:var(--text);letter-spacing:-.03em}
.rep-verdict .verdict-next a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

.led-group h3{margin:0;font-size:17px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
/* The two groups that carry a decision get an edge; the two that carry a
   caveat stay plain, so the eye lands on the ones with money in them. */
.led-working{border-color:color-mix(in srgb,var(--good) 30%,var(--line))}
.led-weak{border-color:color-mix(in srgb,var(--warn) 34%,var(--line))}
.led-table{width:100%;border-collapse:collapse}
.led-table th{font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
  font-weight:700;padding:10px;text-align:left;border-bottom:1px solid var(--line)}
.led-table td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:var(--t-small)}
.led-table tr:last-child td{border-bottom:0}
.led-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.led-table b{font-weight:620;display:block}
/* The server already worked out what each card's numbers mean. Printing it
   under the name is the difference between a table and a report. */
.led-do{display:block;margin-top:3px;font-size:var(--t-micro);color:var(--muted);line-height:1.45;max-width:46ch}
.led-open{text-align:right;white-space:nowrap}

.rep-context{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-top:var(--s7,32px)}
.rep-ctx{display:grid;gap:2px;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:16px;padding:14px 16px;transition:.14s border-color,.14s transform}
.rep-ctx:hover{border-color:var(--line-strong,var(--muted));transform:translateY(-1px)}
.rep-ctx span{font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rep-ctx b{font-size:22px;letter-spacing:-.03em;line-height:1.1}
.rep-ctx small{font-size:var(--t-micro);color:var(--muted);line-height:1.45}
.rep-ctx-warn b{color:var(--warn)}

/* The columns change with whether Meta answered, so hiding one by
   position hides a different number depending on the day. The wrapper
   scrolls instead. */
@media(max-width:700px){
  .led-table{min-width:520px}
  .led-do{max-width:none}
  .rep-context{grid-template-columns:1fr}
}

/* ── The company in its market ──────────────────────────────────────────
   The half of Ditt företag that comes from outside the customer's own web
   page: where they are, who else is in the trade nearby, and what the
   trade looks like nationally.

   Drawn deliberately plainer than the AI analysis above it. These are
   measured facts from public registers and they should read as a reference
   table, not as a verdict — the verdict line is the one place that is
   allowed to have an opinion. */
.mkt-bench{border-left:3px solid var(--line)}
.mkt-bench.mkt-good{border-left-color:var(--good)}
.mkt-bench.mkt-warn{border-left-color:var(--warn)}
.mkt-bench.mkt-level{border-left-color:var(--accent,var(--muted))}
.mkt-h3{display:flex;align-items:center;gap:9px;margin:0;font-size:17px;letter-spacing:-.02em}
.mkt-h3 .pill{flex:0 0 auto}
.mkt-verdict{margin:4px 0 0;font-size:var(--t-body,15px);font-weight:620;line-height:1.4;max-width:60ch}
.mkt-good .mkt-verdict{color:var(--good)}
.mkt-warn .mkt-verdict{color:var(--warn)}

.mkt-figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:var(--s4)}
.mkt-fig{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px}
.mkt-fig span{display:block;font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mkt-fig b{display:block;margin-top:5px;font-size:22px;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mkt-fig small{display:block;margin-top:2px;font-size:var(--t-micro);color:var(--muted)}

/* Two quiet lines that carry the honesty. Small on purpose — they are
   there to be checked, not read first — but never hidden. */
.mkt-caveat,.mkt-src{margin:var(--s3) 0 0;font-size:var(--t-micro);color:var(--muted);line-height:1.55;max-width:88ch}
.mkt-src{margin-top:var(--s4);font-style:italic}
.mkt-missing{margin:var(--s3) 0 0;font-size:var(--t-small);color:var(--muted)}
.mkt-missing a{color:var(--text)}

.mkt-list{display:grid;gap:var(--s2);margin-top:var(--s4)}
.mkt-place{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
  border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:11px 14px}
.mkt-place-main{min-width:0}
.mkt-place-main b{display:block;font-size:var(--t-small);font-weight:620}
.mkt-place-main span{display:block;font-size:var(--t-micro);color:var(--muted);overflow-wrap:anywhere}
.mkt-place-main small{display:block;font-size:var(--t-micro);color:var(--muted);opacity:.8}
.mkt-place-side{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.mkt-dist{font-size:var(--t-micro);font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* A source that failed and a source that found nothing look different on
   purpose. Neither is dressed up as a finding. */
.mkt-gap b{display:block;font-size:var(--t-body,15px);letter-spacing:-.02em}
.mkt-gap p{margin:5px 0 0;font-size:var(--t-small);color:var(--muted);line-height:1.55;max-width:70ch}
.mkt-gap .btn,.mkt-gap .field{margin-top:var(--s3)}
.mkt-pick select{max-width:320px}

@media(max-width:600px){
  .mkt-place{flex-direction:column;align-items:flex-start;gap:8px}
  .mkt-place-side{width:100%;justify-content:space-between}
}