/* =====================================================================
   Channel Studio — UX refresh (loaded last)
   1. Global: calmer page headers, consistent spacing, clearer focus.
   2. Dashboard "command center" (.dh-*)
   ===================================================================== */

/* ---------- 1. Global refinements ---------- */
.content{max-width:1480px}
.content>.heading{padding:20px 24px;border-radius:18px;margin-bottom:20px;min-height:0}
.content>.heading:after{font-size:84px;opacity:.07;right:clamp(150px,18vw,260px)}
.heading h1{font-size:25px;letter-spacing:-.6px;margin-bottom:4px}
.heading p{font-size:13px}
.content>.panel,.content>section.panel{margin-bottom:18px}
.panel-title{gap:14px;flex-wrap:wrap}
.panel-title p{margin:3px 0 0;font-size:12.5px}
td,th{white-space:nowrap}
td small{white-space:normal}
.nav-group a{padding-top:9px;padding-bottom:9px}
.nav-label{margin-top:6px}
button.icon-only,.button.icon-only{width:36px;height:36px;padding:0;display:inline-grid;place-items:center;border-radius:10px}
button.is-spinning i{animation:spin .8s linear infinite}

/* Channels page: filters → list first; explanations and empty stats move below */
.content[data-page=channels]{display:flex;flex-direction:column;gap:18px}
.content[data-page=channels]>*{order:5;margin-top:0!important;margin-bottom:0!important}
.content[data-page=channels]>.heading{order:0}
.content[data-page=channels]>section.panel:not(.channels-panel):not(.video-insights){order:1}
.content[data-page=channels]>.channels-panel{order:2}
.content[data-page=channels]>.video-insights{order:3}
.content[data-page=channels]>.notice{order:4}
.content[data-page=channels]>footer{order:9}

/* ---------- 2. Dashboard ---------- */
.content[data-page=dashboard]>.heading{display:none}
.dh{display:grid;gap:18px}
.dh .panel{margin:0;padding:20px 22px}
.dh h2{font-size:15.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:9px}
.dh h2>.fa-solid{color:var(--accent);font-size:14px}
.dh-muted{color:var(--muted);font-size:12.5px;margin:10px 0 0}
.dh-good{display:flex;align-items:center;gap:8px;color:var(--good);font-size:12.5px;font-weight:600;margin:12px 0 0}

/* Hero */
.dh-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 26px;border-radius:20px;border:1px solid var(--border);
 background:radial-gradient(600px 240px at 100% 0%,rgba(124,92,255,.26),transparent 70%),radial-gradient(420px 200px at 0% 130%,rgba(51,214,240,.10),transparent 70%),linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:var(--shadow)}
:root[data-theme=light] .dh-hero{background:radial-gradient(600px 240px at 100% 0%,rgba(106,69,245,.13),transparent 70%),radial-gradient(420px 200px at 0% 130%,rgba(10,165,194,.08),transparent 70%),#fff}
.dh-hero-date{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);padding:4px 11px;border-radius:999px;border:1px solid var(--border);background:var(--soft-2)}
.dh-hero h1{font-size:26px;letter-spacing:-.7px;margin:10px 0 4px}
.dh-hero p{margin:0;font-size:13.5px;color:var(--text-2)}
.dh-hero p b{color:var(--text)}
.dh-hero-actions{display:flex;gap:9px;flex-wrap:wrap}
.dh-hero-actions .button,.dh-hero-actions button{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;font-size:13px}

/* Banner */
.dh-banner{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;border:1px solid rgba(247,185,85,.45);background:rgba(247,185,85,.09);color:var(--text)}
.dh-banner>.fa-bell{color:var(--amber);font-size:18px}
.dh-banner span{flex:1;display:grid}
.dh-banner small{color:var(--muted)}

/* KPIs */
.dh-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dh-kpi{position:relative;overflow:hidden;isolation:isolate;padding:18px 18px 14px;border-radius:18px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent),var(--surface);box-shadow:var(--shadow);transition:transform .2s var(--ease),border-color .2s}
:root[data-theme=light] .dh-kpi{background:#fff}
.dh-kpi:after{content:'';position:absolute;z-index:-1;width:180px;height:180px;right:-70px;top:-80px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tone) 22%,transparent),transparent 70%)}
.dh-kpi:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--tone) 40%,transparent)}
.dh-kpi-top{display:flex;align-items:center;gap:10px}
.dh-kpi-icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:var(--tone);background:color-mix(in srgb,var(--tone) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 25%,transparent);font-size:14px}
.dh-kpi-label{font-size:12.5px;color:var(--muted);font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dh-kpi-value{display:block;font-size:32px;font-weight:700;letter-spacing:-1.2px;margin:12px 0 6px;font-variant-numeric:tabular-nums;color:var(--text)}
.dh-kpi-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;min-height:36px}
.dh-kpi-foot small{font-size:11.5px;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-spark{width:110px;height:36px;flex-shrink:0}
.dh-delta{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.dh-delta em{font-style:normal;font-weight:500;opacity:.8}
.dh-delta.up{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.dh-delta.down{color:var(--danger);background:color-mix(in srgb,var(--danger) 14%,transparent)}
.dh-delta.flat{color:var(--muted);background:var(--soft-2)}
.dh-inline-link{color:var(--accent);font-weight:600}

/* Grid */
.dh-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.dh-main,.dh-side{display:grid;gap:18px;min-width:0}
.dh-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.dh-card-head p{margin:3px 0 0;font-size:12px;color:var(--muted)}
.dh-card-head .text-link{font-size:12.5px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* Segmented control */
.dh-seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--soft-2);border:1px solid var(--border)}
.dh-seg button{background:none!important;border:0!important;box-shadow:none!important;color:var(--muted);font-size:12.5px;font-weight:600;padding:6px 12px;border-radius:8px;transform:none!important}
.dh-seg button.is-active{background:var(--surface)!important;color:var(--text);box-shadow:var(--shadow-sm)!important}
:root[data-theme=light] .dh-seg button.is-active{background:#fff!important}

/* Chart */
.dh-chart-summary{display:flex;gap:28px;flex-wrap:wrap;margin-bottom:12px}
.dh-chart-summary div{display:grid}
.dh-chart-summary span{font-size:11.5px;color:var(--muted)}
.dh-chart-summary strong{font-size:22px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.dh-chart-summary strong.up{color:var(--good)}.dh-chart-summary strong.down{color:var(--danger)}
.dh-chart-summary small{font-size:11px;color:var(--muted)}
.dh-chart-box{position:relative;height:220px;border-radius:12px;cursor:crosshair}
.dh-chart-box svg{width:100%;height:100%;display:block;overflow:visible}
.dh-grid-line{stroke:var(--border);stroke-dasharray:3 5;vector-effect:non-scaling-stroke}
.dh-cursor{stroke:var(--border-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.dh-dot{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--tone);box-shadow:0 0 0 4px color-mix(in srgb,var(--tone) 25%,transparent);pointer-events:none}
.dh-tip{position:absolute;transform:translate(-50%,-100%);padding:7px 11px;border-radius:10px;background:var(--raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);font-size:12px;white-space:nowrap;pointer-events:none;display:grid;text-align:center}
.dh-tip small{color:var(--muted);font-size:11px}
.dh-axis{position:absolute;left:8px;font-size:10.5px;color:var(--muted);background:color-mix(in srgb,var(--surface) 80%,transparent);padding:0 5px;border-radius:5px}
.dh-axis.top{top:4px}.dh-axis.bottom{bottom:4px}

/* Channels */
.dh-channels{display:grid;gap:8px}
.dh-ch{display:grid;grid-template-columns:auto minmax(0,1fr) repeat(3,minmax(64px,90px)) auto;align-items:center;gap:14px;padding:11px 12px;border-radius:13px;border:1px solid var(--border);background:var(--soft-2);transition:border-color .18s,background .18s}
.dh-ch:hover{border-color:rgba(171,156,255,.35);background:var(--soft)}
.dh-ch .ch-avatar{width:40px;height:40px;border-radius:12px;position:relative;overflow:hidden}
.dh-ch .ch-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dh-ch-name{display:grid;min-width:0}
.dh-ch-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-ch-name small{color:var(--muted);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-ok{color:var(--good)}
.dh-err{color:var(--danger)!important}
.dh-ch-stat{display:grid;text-align:right}
.dh-ch-stat span{font-size:10.5px;color:var(--muted)}
.dh-ch-stat b{font-size:14.5px;font-variant-numeric:tabular-nums}

/* Empty */
.dh-empty{display:grid;justify-items:center;text-align:center;gap:6px;padding:28px 16px;border:1px dashed var(--border-strong);border-radius:14px}
.dh-empty>.fa-solid{font-size:22px;color:var(--accent);width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--soft)}
.dh-empty p{margin:0;font-size:12.5px;max-width:360px}
.dh-empty.sm{padding:20px 14px}
.dh-empty-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}
.dh-empty .button,.dh-empty button{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;padding:8px 13px}

/* History tabs */
.dh-growth-bar{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.dh-growth-label{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.dh-growth-bar input{padding:7px 10px;font-size:12.5px;width:auto;margin:0}
.dh-growth-bar button{padding:8px 12px;font-size:12.5px}
.dh-tab .dg-metrics{border-radius:14px;border:1px solid var(--border);overflow:hidden}
.dh-tab .dg-metric{padding:14px 16px}
.dh-tab .dg-metric strong{font-size:26px}
.dh-tab .dg-method{border-radius:12px;margin-top:12px}
.dh-tab .dg-detail{margin-top:10px}
.dh-tab .panel{border:0;box-shadow:none;background:none!important;padding:0;margin:0 0 14px}
.dh-tab .video-insights .panel-title h2{font-size:14px}
.dh-tab .table-wrap{max-height:360px;overflow:auto}

/* Side cards */
.dh-side .panel{padding:18px}
.dh-pill{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--accent)}
.dh-skel{height:96px;border-radius:12px;background:linear-gradient(90deg,var(--soft-2),var(--soft),var(--soft-2));background-size:200% 100%;animation:dhShimmer 1.3s linear infinite}
@keyframes dhShimmer{to{background-position:-200% 0}}
.dh-progress{height:6px;border-radius:99px;background:var(--soft-2);overflow:hidden;margin-bottom:12px}
.dh-progress span{display:block;height:100%;border-radius:99px;background:var(--grad);transition:width .5s var(--ease)}
.dh-tasks{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.dh-tasks a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:11px;color:var(--text);transition:background .15s}
.dh-tasks a:hover{background:var(--soft-2)}
.dh-tasks a>span:nth-child(2){flex:1;display:grid;min-width:0}
.dh-tasks strong{font-size:13px;font-weight:600}
.dh-tasks small{font-size:11.5px;color:var(--muted)}
.dh-tasks a>.fa-chevron-right{color:var(--muted);font-size:11px}
.dh-check{width:30px;height:30px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;font-size:12.5px;color:var(--accent);background:var(--soft);border:1px solid rgba(124,92,255,.25)}
.dh-tasks li.is-done .dh-check{color:#fff;background:var(--good);border-color:transparent}
.dh-tasks li.is-done strong{color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 50%,transparent)}

.dh-vault-body{display:flex;align-items:center;gap:18px}
.dh-ring{position:relative;width:84px;height:84px;flex-shrink:0}
.dh-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dh-ring circle{fill:none;stroke-width:8}
.dh-ring .track{stroke:var(--soft-2)}
.dh-ring .bar{stroke:var(--tone);stroke-linecap:round;transition:stroke-dasharray .6s var(--ease)}
.dh-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-variant-numeric:tabular-nums}
.dh-vault-body ul{list-style:none;padding:0;margin:0;display:grid;gap:7px;flex:1}
.dh-vault-body li{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.dh-vault-body li b{color:var(--text);font-variant-numeric:tabular-nums}
.dh-alert{display:flex;align-items:center;gap:8px;margin-top:14px;padding:10px 12px;border-radius:11px;font-size:12.5px;font-weight:600;color:var(--amber);background:color-mix(in srgb,var(--amber) 11%,transparent);border:1px solid color-mix(in srgb,var(--amber) 30%,transparent)}
.dh-alert span{margin-left:auto}

.dh-aff .da-status{padding:0;border:0;background:none;gap:12px}
.dh-aff .da-status p{font-size:12px}
.dh-aff .da-wait{display:none}

.dh-feed{list-style:none;padding:0;margin:0;display:grid;gap:2px}
.dh-feed li{display:flex;align-items:center;gap:11px;padding:8px 4px;border-bottom:1px dashed var(--border)}
.dh-feed li:last-child{border-bottom:0}
.dh-feed-icon{width:28px;height:28px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;font-size:11.5px;color:var(--accent);background:var(--soft)}
.dh-feed li.is-warn .dh-feed-icon{color:var(--danger);background:color-mix(in srgb,var(--danger) 13%,transparent)}
.dh-feed li>div{flex:1;display:grid;min-width:0}
.dh-feed strong{font-size:12.5px;font-weight:600}
.dh-feed small{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dh-feed time{font-size:11px;color:var(--muted);white-space:nowrap}

.dh-shortcuts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.dh-shortcuts a{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);color:var(--text-2);font-size:12.5px;font-weight:600;transition:border-color .18s,transform .18s,color .18s}
:root[data-theme=light] .dh-shortcuts a{background:#fff}
.dh-shortcuts a .fa-solid{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--soft);color:var(--accent)}
.dh-shortcuts a:hover{border-color:rgba(171,156,255,.45);color:var(--text);transform:translateY(-2px)}

/* Tone helpers (CSP forbids inline style attributes) */
.t-cyan{--tone:#33d6f0}.t-pink{--tone:#ff5c9d}.t-amber{--tone:#f7b955}.t-violet{--tone:#a78bfa}.t-good{--tone:#3fdea0}.t-bad{--tone:#ff6b81}
:root[data-theme=light] .t-cyan{--tone:#0a9fbd}:root[data-theme=light] .t-pink{--tone:#e2457f}:root[data-theme=light] .t-amber{--tone:#c98210}:root[data-theme=light] .t-violet{--tone:#7c5cff}:root[data-theme=light] .t-good{--tone:#0f9f6e}:root[data-theme=light] .t-bad{--tone:#e0445f}
.dh-progress span{width:0}

/* Responsive */
@media(max-width:1280px){.dh-grid{grid-template-columns:minmax(0,1fr) 300px}.dh-ch{grid-template-columns:auto minmax(0,1fr) repeat(2,minmax(60px,80px)) auto}.dh-ch-stat-v{display:none}}
@media(max-width:1100px){.dh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-grid{grid-template-columns:1fr}.dh-side{grid-template-columns:repeat(2,minmax(0,1fr))}.dh-shortcuts{grid-column:1/-1;grid-template-columns:repeat(4,1fr)}}
@media(max-width:700px){.dh-hero{padding:20px}.dh-hero h1{font-size:22px}.dh-hero-actions{width:100%}.dh-hero-actions>*{flex:1;justify-content:center}.dh-kpi-value{font-size:26px}.dh-spark{width:80px}.dh-side{grid-template-columns:1fr}.dh-shortcuts{grid-template-columns:repeat(2,1fr)}.dh-ch{grid-template-columns:auto minmax(0,1fr) auto}.dh-ch-stat{display:none}.dh .panel{padding:16px}.dh-card-head .dh-seg{width:100%}.dh-seg button{flex:1}}
@media(max-width:360px){.dh-kpis{grid-template-columns:1fr}}
@media(max-width:700px){.dh-kpi{padding:14px}.dh-kpi-value{font-size:22px;margin:8px 0 4px}.dh-kpi-top{flex-wrap:wrap}.dh-delta{order:3;width:100%;justify-content:flex-start;padding:2px 0;background:none!important}.dh-spark{display:none}.dh-side>.dh-todo{order:-1}}
@media(prefers-reduced-motion:reduce){.dh-skel{animation:none}.dh-kpi,.dh-shortcuts a{transition:none}}