:root {
  --bg: #090a0c;
  --sidebar: #0c0d10;
  --panel: #121419;
  --panel-2: #17191f;
  --line: #24272f;
  --line-soft: #1b1e24;
  --text: #f5f2eb;
  --muted: #8c909b;
  --accent: #ff6b4a;
  --accent-soft: rgba(255,107,74,.12);
  --green: #77d7a0;
  --yellow: #f1be63;
  --purple: #9b8cff;
  --font: "Manrope", sans-serif;
  --mono: "DM Mono", monospace;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
button, input, select { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px 1fr; }
.sidebar { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 24px 16px; border-right: 1px solid var(--line-soft); background: var(--sidebar); z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; margin: 0 10px 25px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 17px; letter-spacing: -.4px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--accent); color: #130b08; font-size: 16px; font-weight: 800; box-shadow: 0 7px 25px rgba(255,107,74,.2); }
.brand-mark span { color: white; }
.server-pill { margin: 0 4px 24px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; background: #111318; }
.server-pill strong, .sidebar-foot strong { display: block; font-size: 11px; }
.server-pill small, .sidebar-foot small { color: var(--muted); display: block; font-size: 9px; margin-top: 2px; }
.server-pill .mono { font: 10px var(--mono); color: var(--muted); }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(119,215,160,.08), 0 0 12px rgba(119,215,160,.35); }
.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-label { color: #626670; font-size: 9px; font-weight: 800; letter-spacing: 1.5px; margin: 12px 12px 7px; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 0; border-radius: 9px; background: transparent; color: #a9adb6; text-align: left; cursor: pointer; transition: .2s ease; }
.nav-item:hover { color: white; background: #15171c; }
.nav-item.active { color: white; background: var(--accent-soft); }
.nav-item.active svg { color: var(--accent); }
.nav-item svg { width: 17px; height: 17px; }
.nav-item em { margin-left: auto; font: normal 9px var(--mono); color: #777b84; }
.sidebar-foot { margin-top: auto; padding: 14px 7px 0; border-top: 1px solid var(--line-soft); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #262a33; font-size: 10px; font-weight: 700; }
main { min-width: 0; }
.topbar { height: 72px; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line-soft); background: rgba(9,10,12,.88); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: space-between; padding: 0 34px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font: 10px var(--mono); letter-spacing: .7px; }
.breadcrumb span, .breadcrumb i { color: #5d616a; font-style: normal; }
.breadcrumb strong { color: #aaaeb6; font-weight: 500; }
.top-actions, .hero-actions { display: flex; align-items: center; gap: 10px; }
.running { display: flex; align-items: center; gap: 8px; color: #aeb2b9; font-size: 11px; margin-right: 7px; }
.running span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px rgba(119,215,160,.1); } }
.running b { font-weight: 600; }
.icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 9px; background: #111318; cursor: pointer; }
.icon-btn svg { width: 16px; height: 16px; }
.notification { position: relative; }
.notification i { position: absolute; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; top: 8px; right: 8px; }
.primary-btn, .secondary-btn { border-radius: 9px; border: 1px solid transparent; min-height: 38px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 11px; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .2s ease; }
.primary-btn { background: var(--accent); color: #1c0b08; box-shadow: 0 8px 25px rgba(255,107,74,.12); }
.primary-btn:hover { background: #ff7a5b; transform: translateY(-1px); }
.secondary-btn { background: #15171c; color: #dadddf; border-color: var(--line); }
.secondary-btn:hover { background: #1b1e24; }
.primary-btn svg, .secondary-btn svg { width: 15px; height: 15px; }
.content { padding: 42px 34px 70px; max-width: 1480px; margin: auto; }
.page { display: none; animation: fade .25s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } }
.hero-row, .page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 32px; }
.eyebrow { margin: 0 0 8px; color: #666a74; font: 500 9px var(--mono); letter-spacing: 1.5px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 9px; font-size: clamp(28px, 3vw, 42px); line-height: 1.06; letter-spacing: -1.8px; }
h1 span { color: #767a83; font-weight: 500; }
.subline, .page-heading p { color: var(--muted); margin-bottom: 0; }
.metrics-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.metric-card { min-height: 145px; padding: 20px; border: 1px solid var(--line-soft); background: var(--panel); border-radius: 14px; position: relative; overflow: hidden; }
.metric-card.accent { border-color: rgba(255,107,74,.28); }
.metric-card.accent:before { content: ""; position: absolute; width: 150px; height: 150px; right: -70px; top: -90px; border: 1px solid rgba(255,107,74,.18); border-radius: 50%; box-shadow: 0 0 80px rgba(255,107,74,.08); }
.metric-top { display: flex; align-items: center; justify-content: space-between; color: #8b8f98; font-size: 10px; font-weight: 600; }
.trend { font: 9px var(--mono); padding: 4px 6px; border-radius: 5px; }
.trend.up { color: var(--green); background: rgba(119,215,160,.08); }
.metric-card > strong { display: block; font-size: 27px; letter-spacing: -1px; margin-top: 17px; }
.metric-card > strong small { color: #747881; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.metric-card > p { color: #6f737c; font-size: 10px; margin: 10px 0 0; }
.metric-card > p b { color: #b3b6bd; }
.tag { color: var(--accent); border: 1px solid rgba(255,107,74,.2); padding: 4px 7px; border-radius: 20px; font: 9px var(--mono); }
.capacity { display: flex; gap: 5px; margin-top: 17px; }
.capacity i { height: 4px; border-radius: 5px; flex: 1; background: var(--accent); }
.capacity i:last-child { background: #292c33; }
.spark-bars { position: absolute; bottom: 0; left: 18px; right: 18px; height: 42px; display: flex; align-items: end; gap: 5px; opacity: .82; }
.spark-bars i { flex: 1; height: 30%; background: rgba(255,107,74,.3); border-radius: 2px 2px 0 0; }
.spark-bars i:nth-child(2) { height: 44%; }.spark-bars i:nth-child(3) { height: 38%; }.spark-bars i:nth-child(4) { height: 58%; }.spark-bars i:nth-child(5) { height: 46%; }.spark-bars i:nth-child(6) { height: 68%; }.spark-bars i:nth-child(7) { height: 60%; }.spark-bars i:nth-child(8) { height: 84%; }.spark-bars i:nth-child(9) { height: 64%; }.spark-bars i:nth-child(10) { height: 78%; }.spark-bars i:nth-child(11) { height: 91%; }.spark-bars i:nth-child(12) { height: 100%; background: var(--accent); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(340px, .8fr); gap: 12px; margin-bottom: 12px; }
.panel { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; }
.performance-panel, .pipeline-panel { min-height: 400px; padding: 22px; }
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.panel h2 { margin: 0; font-size: 17px; letter-spacing: -.5px; }
.segmented { background: #0d0f12; border: 1px solid var(--line-soft); padding: 3px; border-radius: 8px; display: flex; }
.segmented button, .filter button { border: 0; background: transparent; padding: 6px 9px; color: #696d76; font: 9px var(--mono); cursor: pointer; border-radius: 5px; }
.segmented button.active, .filter button.active { background: #252830; color: white; }
.chart-summary { margin-top: 26px; display: flex; align-items: baseline; gap: 9px; }
.chart-summary strong { font-size: 23px; letter-spacing: -1px; }.chart-summary span { color: #6f737c; font-size: 10px; }
.chart-wrap { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: 210px 20px; margin-top: 12px; }
.y-labels { display: flex; flex-direction: column; justify-content: space-between; color: #51555e; font: 8px var(--mono); padding: 7px 0 12px; }
.line-chart { width: 100%; height: 210px; overflow: visible; }
.grid-lines line { stroke: #21242a; stroke-width: 1; stroke-dasharray: 3 5; }
.line-chart .area { fill: url(#chartFill); }.line-chart .line { fill: none; stroke: var(--accent); stroke-width: 2.5; vector-effect: non-scaling-stroke; }.line-chart circle { fill: var(--accent); }.line-chart .halo { fill: none; stroke: rgba(255,107,74,.22); stroke-width: 7; }
.x-labels { grid-column: 2; display: flex; justify-content: space-between; color: #51555e; font: 8px var(--mono); }
.text-btn { padding: 0; border: 0; background: none; color: #969aa3; font-size: 10px; cursor: pointer; }
.text-btn:hover { color: var(--accent); }
.pipeline-list { margin-top: 21px; }
.pipeline-item { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
.pipeline-item:last-child { border-bottom: 0; }
.pipeline-item strong { font-size: 11px; }.pipeline-item p { color: #70747d; font-size: 9px; margin: 4px 0 0; }.pipeline-item time { color: #5e626b; font: 8px var(--mono); }
.status-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; }.status-icon svg { width: 13px; }.status-icon.done { color: var(--green); background: rgba(119,215,160,.08); }.status-icon.progress { color: var(--accent); background: var(--accent-soft); }.status-icon.queued { color: var(--yellow); background: rgba(241,190,99,.08); }
.progress-bar { height: 3px; background: #292c33; border-radius: 5px; overflow: hidden; margin-top: 8px; }.progress-bar i { display: block; height: 100%; background: var(--accent); }
.automation-foot { margin-top: 15px; display: flex; gap: 8px; align-items: center; color: #6f737c; font-size: 9px; }.automation-foot .pulse { width: 5px; height: 5px; }.automation-foot strong { margin-left: auto; font: 9px var(--mono); color: #aaaeb6; }
.streamer-overview { padding: 22px; }
.streamer-table { margin-top: 17px; }.table-row { display: grid; grid-template-columns: 1.55fr .7fr .6fr 1fr .8fr 30px; min-height: 70px; align-items: center; gap: 15px; padding: 0 10px; border-top: 1px solid var(--line-soft); }.table-header { min-height: 34px; border: 0; color: #51555e; font: 8px var(--mono); }
.streamer-cell { display: flex; align-items: center; gap: 11px; }.streamer-avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; }.streamer-avatar.purple { background: #5b43a3; }.streamer-avatar.blue { background: #295e8a; }.streamer-avatar.orange { background: #8d4b36; }.streamer-cell strong { display: block; font-size: 11px; }.streamer-cell small { color: #686c75; font-size: 9px; }.status-badge { width: max-content; border-radius: 20px; padding: 5px 8px; display: flex; gap: 6px; align-items: center; font: 9px var(--mono); }.status-badge i { width: 5px; height: 5px; border-radius: 50%; }.status-badge.live { background: rgba(255,107,74,.08); color: #ff8d72; }.status-badge.live i { background: var(--accent); }.status-badge.auto { background: rgba(119,215,160,.08); color: var(--green); }.status-badge.auto i { background: var(--green); }.table-row > strong { font-size: 11px; }.mini-number strong { font-size: 11px; }.mini-number small { color: var(--green); display: block; font: 8px var(--mono); margin-top: 3px; }.schedule { font: 11px var(--mono); }.schedule small { color: #62666f; display: block; font-size: 8px; margin-top: 3px; }.dots { border: 0; background: none; color: #656973; cursor: pointer; }
.page-heading h1 { margin-bottom: 5px; }.page-heading { margin-bottom: 28px; }.filter { display: flex; gap: 4px; background: #111318; border: 1px solid var(--line); padding: 3px; border-radius: 8px; }
.creator-cards, .account-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }.creator-card, .account-card { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 14px; padding: 22px; }.creator-head { display: flex; justify-content: space-between; align-items: start; }.creator-identity { display: flex; gap: 13px; align-items: center; }.creator-identity .streamer-avatar { width: 48px; height: 48px; font-size: 16px; }.creator-identity h3 { margin: 0 0 3px; font-size: 15px; }.creator-identity p { margin: 0; color: var(--muted); font-size: 10px; }.creator-stats { margin: 24px 0 18px; padding: 16px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: repeat(3,1fr); }.creator-stats span { color: #676b74; font-size: 9px; }.creator-stats strong { display: block; margin-top: 5px; font-size: 15px; }.creator-actions { display: flex; justify-content: space-between; align-items: center; }.switch { width: 34px; height: 19px; background: var(--green); border-radius: 20px; padding: 3px; border: 0; cursor: pointer; }.switch:after { content: ""; display: block; width: 13px; height: 13px; border-radius: 50%; background: #0d1711; margin-left: auto; }.switch.off { background: #33363e; }.switch.off:after { margin-left: 0; background: #878b93; }
.clip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.clip-card { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--panel); overflow: hidden; }.clip-thumb { aspect-ratio: 9/12; display: flex; flex-direction: column; justify-content: space-between; padding: 13px; position: relative; background: radial-gradient(circle at 70% 30%, #3f3b58 0, transparent 38%), linear-gradient(150deg,#191e2a,#281c2d); }.clip-thumb.bluebg { background: radial-gradient(circle at 35% 32%, #25465e 0, transparent 38%), linear-gradient(150deg,#131d28,#1b2630); }.clip-thumb:before { content:""; position:absolute; inset:20% 20% 12%; border-radius:45% 45% 16% 16%; background:rgba(0,0,0,.2); filter:blur(1px); }.clip-thumb > * { position: relative; }.duration { align-self: flex-end; background: rgba(0,0,0,.7); padding: 4px 6px; border-radius: 4px; font: 8px var(--mono); }.caption-preview { font-size: 17px; font-weight: 800; line-height: 1.05; text-align: center; text-transform: uppercase; text-shadow: 0 2px 4px #000; }.clip-info { padding: 14px; }.clip-info strong { display: block; font-size: 11px; line-height: 1.45; }.clip-info span { display: flex; justify-content: space-between; margin-top: 10px; color: #686c75; font-size: 9px; }.clip-status { color: var(--green)!important; }
.timeline { max-width: 900px; }.timeline-day { display: grid; grid-template-columns: 90px 1fr; margin-bottom: 25px; }.timeline-date { color: #656973; font: 9px var(--mono); padding-top: 14px; }.timeline-items { border-left: 1px solid var(--line); padding-left: 25px; }.timeline-card { position: relative; padding: 17px; margin-bottom: 10px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 16px; }.timeline-card:before { content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); left:-29px; top:24px; box-shadow:0 0 0 4px var(--bg); }.timeline-card time { font: 12px var(--mono); }.timeline-card strong { font-size: 11px; }.timeline-card p { margin: 4px 0 0; color: #6f737c; font-size: 9px; }
.capacity-banner { padding: 22px; border: 1px solid rgba(255,107,74,.2); background: var(--accent-soft); border-radius: 14px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.capacity-banner > div:first-child { display:flex; align-items:center; gap:13px; }.capacity-banner svg { color:var(--accent); }.capacity-banner strong { display:block; }.capacity-banner p { color:#8c7a76; margin:3px 0 0; font-size:10px; }.large-capacity { display:flex; gap:7px; width:210px; }.large-capacity i { height:6px; flex:1; background:var(--accent); border-radius:4px; }.large-capacity i:last-child { background:#362620; }.account-card { display:flex; justify-content:space-between; align-items:center; }.account-main { display:flex; gap:13px; align-items:center; }.tiktok-mark { width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#08090b;border:1px solid #292c33; }.tiktok-mark svg { width:19px; }.account-card h3 { margin:0 0 3px;font-size:13px; }.account-card p { color:#686c75;margin:0;font-size:9px; }.account-meta { text-align:right; }.account-meta strong { display:block;color:var(--green);font:9px var(--mono); }.account-meta small { color:#62666f;font-size:8px; }
.mail-layout { min-height:540px; display:grid; grid-template-columns:360px 1fr; border:1px solid var(--line-soft); border-radius:14px; overflow:hidden; background:var(--panel); }.mail-list { border-right:1px solid var(--line-soft); }.mail-item { padding:16px 18px; border-bottom:1px solid var(--line-soft); cursor:pointer; }.mail-item:hover,.mail-item.active { background:#181b21; }.mail-item-head { display:flex; justify-content:space-between; }.mail-item strong { font-size:11px; }.mail-item time { color:#5e626b;font:8px var(--mono); }.mail-item p { margin:6px 0 0;color:#787c85;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }.mail-preview { padding:42px; }.empty-mail { height:100%; display:grid; place-content:center; text-align:center;color:#656973; }.empty-mail svg { margin:0 auto 14px;width:27px; }.empty-mail strong { color:#a4a8b0; }.empty-mail p { font-size:10px;margin-top:6px; }.mail-content .mail-title { font-size:22px;margin:15px 0 8px; }.mail-content .from { color:#757983;font-size:10px;border-bottom:1px solid var(--line-soft);padding-bottom:20px; }.mail-body { color:#b1b4bb;line-height:1.8;max-width:650px;margin-top:24px; }.code-block { width:max-content;margin:24px 0;padding:14px 22px;background:#0d0f12;border:1px solid var(--line);font:20px var(--mono);letter-spacing:5px;border-radius:9px;color:white; }
.system-cards { display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px; }.system-cards article { position:relative;display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:18px; }.system-cards article>svg { color:#777b84;width:18px; }.system-cards small { display:block;color:#62666f;font:8px var(--mono); }.system-cards strong { display:block;margin:7px 0 3px;font-size:13px; }.system-cards p { margin:0;color:#6b6f78;font-size:9px; }.system-cards article>i { position:absolute;width:6px;height:6px;border-radius:50%;background:var(--green);right:15px;top:15px; }.log-panel { padding:22px; }.log-panel #logs { margin-top:18px; }.log-row { display:grid;grid-template-columns:75px 60px 90px 1fr;gap:14px;padding:12px 4px;border-top:1px solid var(--line-soft);font:9px var(--mono); }.log-row time,.log-row span { color:#666a73; }.log-row b { color:#8c9099;font-weight:500; }.log-row p { margin:0;color:#aaaeb6; }
.modal-backdrop { position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);display:none;place-items:center;padding:20px; }.modal-backdrop.open { display:grid; }.modal { width:min(520px,100%);max-height:92vh;overflow:auto;position:relative;background:#111318;border:1px solid #2a2d35;border-radius:18px;padding:31px;box-shadow:0 30px 100px rgba(0,0,0,.6);animation:modalIn .25s ease; }.modal-close { position:absolute;right:17px;top:17px; }.modal-close svg { width:15px; }.stepper { display:flex;align-items:center;width:140px;margin-bottom:29px; }.stepper span { width:22px;height:22px;border-radius:50%;display:grid;place-items:center;border:1px solid #343740;color:#686c75;font:8px var(--mono); }.stepper span.active { background:var(--accent);border-color:var(--accent);color:#1b0b08; }.stepper i { height:1px;flex:1;background:#343740; }.wizard-step { display:none; }.wizard-step.active { display:block; }.wizard-step h2 { font-size:25px;letter-spacing:-1px;margin:0 0 8px; }.modal-copy { color:#858993;line-height:1.6;font-size:11px;margin-bottom:24px; }.modal label { display:block;color:#9da1aa;font-size:10px;font-weight:600;margin:15px 0; }.modal input,.modal select { width:100%;margin-top:8px;background:#0b0d10;border:1px solid #292c34;color:white;border-radius:9px;padding:12px 13px;outline:none; }.modal input:focus,.modal select:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,107,74,.08); }.input-prefix { margin-top:8px;display:flex;align-items:center;background:#0b0d10;border:1px solid #292c34;border-radius:9px;overflow:hidden; }.input-prefix span { padding-left:13px;color:#666a73;font:10px var(--mono); }.input-prefix input { border:0;margin:0;padding-left:3px;box-shadow:none!important; }.form-note { display:flex;gap:11px;margin:19px 0;background:rgba(119,215,160,.06);border:1px solid rgba(119,215,160,.14);border-radius:10px;padding:13px;color:#7e9b89; }.form-note svg { width:17px;flex:none; }.form-note p { margin:0;font-size:9px;line-height:1.5; }.form-note strong { color:#a2c6af; }.form-note.warm { background:rgba(241,190,99,.05);border-color:rgba(241,190,99,.15);color:#a99670; }.form-note.warm strong { color:#ceb889; }.full { width:100%; }.range-row { margin:20px 0; }.range-row label { display:flex;justify-content:space-between; }.range-row label strong { color:white;font:11px var(--mono); }.range-row input[type=range] { padding:0;accent-color:var(--accent);border:0; }.check-card { display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:12px;padding:14px;border:1px solid var(--line);border-radius:10px;margin:20px 0; }.check-card input { width:14px;margin:0;accent-color:var(--accent); }.check-card svg { width:18px;color:var(--accent); }.check-card strong { font-size:10px; }.check-card p { margin:3px 0 0;color:#696d76;font-size:9px; }.wizard-actions { display:grid;grid-template-columns:1fr 2fr;gap:9px; }.success-mark { width:48px;height:48px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:rgba(119,215,160,.1);color:var(--green);border:1px solid rgba(119,215,160,.2); }.centered { text-align:center; }.credential-box { border:1px solid var(--line);border-radius:11px;overflow:hidden;margin:20px 0; }.credential-box>div { position:relative;padding:13px 45px 13px 14px;background:#0d0f12; }.credential-box>div+div { border-top:1px solid var(--line); }.credential-box span { display:block;color:#555a63;font:8px var(--mono);margin-bottom:6px; }.credential-box strong { font:11px var(--mono); }.copy-btn { position:absolute;right:10px;top:50%;transform:translateY(-50%);width:29px;height:29px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;background:#17191e;cursor:pointer; }.copy-btn svg { width:13px; }.toast { position:fixed;right:25px;bottom:25px;z-index:200;display:flex;gap:10px;align-items:center;min-width:270px;padding:13px 16px;border-radius:11px;background:#17201b;border:1px solid rgba(119,215,160,.25);box-shadow:0 14px 40px rgba(0,0,0,.4);transform:translateY(130%);opacity:0;transition:.3s ease; }.toast.show { transform:none;opacity:1; }.toast>svg { width:18px;color:var(--green); }.toast strong,.toast small { display:block; }.toast strong { font-size:10px; }.toast small { color:#7c9283;font-size:9px;margin-top:2px; }
.empty-state { min-height: 210px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 28px; color: #676b74; }
.empty-state.compact { min-height: 150px; }
.empty-state .empty-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line); background: #0d0f12; margin-bottom: 13px; color: #777b84; }
.empty-state .empty-icon svg { width: 18px; }
.empty-state strong { color: #b7bac1; font-size: 12px; }
.empty-state p { max-width: 320px; margin: 6px 0 16px; font-size: 9px; line-height: 1.6; }
#overviewStreamerRows { grid-column: 1 / -1; }
#overviewStreamerRows .empty-state { min-height: 110px; border-top: 1px solid var(--line-soft); }
.rights-card { background: rgba(255,107,74,.04); border-color: rgba(255,107,74,.18); }
.login-modal { width: min(420px, 100%); }
.integration-alert { padding: 13px 15px; border: 1px solid rgba(241,190,99,.18); background: rgba(241,190,99,.05); color: #a99670; border-radius: 10px; font-size: 10px; line-height: 1.55; margin-bottom: 14px; }
.settings-grid { display:grid; grid-template-columns:minmax(320px,.85fr) minmax(420px,1.4fr); gap:14px; align-items:start; }
.settings-panel { padding:22px; }
.stack-form label { display:block; color:#9da1aa; font-size:10px; font-weight:600; margin:14px 0; }
.stack-form input,.stack-form select { width:100%; margin-top:8px; background:#0b0d10; border:1px solid #292c34; color:white; border-radius:9px; padding:12px 13px; outline:none; }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.server-grid { display:grid; gap:12px; }
.server-card { padding:19px; }
.server-card-head { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:start; }
.server-card-head small { color:#686c75; font:8px var(--mono); }
.server-card-head h3 { margin:4px 0 3px; font-size:14px; }
.server-card-head p { color:#6f737c; margin:0; font:9px var(--mono); }
.server-card-meta { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.server-card-meta span { padding:11px; border:1px solid var(--line-soft); border-radius:9px; color:#686c75; font-size:9px; }
.server-card-meta b { display:block; color:#c2c5cb; font:11px var(--mono); margin-bottom:3px; }
.server-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; }
.server-error { color:#d48675; background:rgba(255,107,74,.05); border:1px solid rgba(255,107,74,.12); padding:10px; border-radius:8px; font-size:9px; line-height:1.5; }
.user-list { padding:22px; }
.user-row { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:14px 0; border-top:1px solid var(--line-soft); }
.user-row strong,.user-row small { display:block; }
.user-row strong { font-size:11px; }
.user-row small { color:#686c75; font-size:9px; margin-top:3px; }
.hidden { display:none!important; }
.metric-card.is-empty .trend { display: none; }
.metric-card.is-empty .spark-bars { opacity: .18; }
.mobile-menu { display:none; }
@keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(.98); } }
@media (max-width:1100px) { .metrics-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.settings-grid { grid-template-columns:1fr; }.clip-grid { grid-template-columns:repeat(2,1fr); }.system-cards { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .app-shell { grid-template-columns:1fr; }.sidebar { position:fixed;left:0;transform:translateX(-105%);transition:.25s ease;width:248px; }.sidebar.open { transform:none;box-shadow:20px 0 60px #000; }.topbar { padding:0 16px;height:62px; }.mobile-menu { display:grid; }.breadcrumb { display:none; }.running { display:none; }.top-actions .primary-btn { display:none; }.content { padding:28px 16px 50px; }.hero-row,.page-heading { align-items:flex-start;flex-direction:column;gap:18px; }.hero-actions { width:100%; }.hero-actions button { flex:1; }.metrics-grid { grid-template-columns:1fr; }.performance-panel,.pipeline-panel { min-height:0; }.streamer-overview { overflow:auto; }.streamer-table { min-width:780px; }.creator-cards,.account-grid { grid-template-columns:1fr; }.clip-grid { grid-template-columns:repeat(2,1fr); }.system-cards { grid-template-columns:1fr; }.mail-layout { grid-template-columns:1fr; }.mail-list { border-right:0; }.mail-preview { display:none; }.capacity-banner { align-items:flex-start;gap:20px;flex-direction:column; }.large-capacity { width:100%; }.log-row { grid-template-columns:60px 50px 1fr; }.log-row p { grid-column:1/-1; }.modal { padding:26px 20px; }.timeline-day { grid-template-columns:1fr; }.timeline-items { margin-top:10px; }.timeline-card { grid-template-columns:52px 1fr; }.timeline-card .status-badge { grid-column:2; } }
@media (max-width:430px) { .clip-grid { grid-template-columns:1fr; } h1 { font-size:30px; }.metrics-grid { gap:9px; } }
@media (max-width:560px) { .form-columns { grid-template-columns:1fr; }.server-card-head { grid-template-columns:auto 1fr; }.server-card-head>.status-badge { grid-column:2; }.server-actions { flex-wrap:wrap; }.user-row { grid-template-columns:auto 1fr; }.user-row>button,.user-row>.tag { grid-column:2; } }