:root { color-scheme: light; font-family: Inter, "SF Pro Display", "PingFang SC", system-ui, sans-serif; --blue:#1677ff; --ink:#17213a; --muted:#758098; --line:rgba(255,255,255,.72); }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(145deg,#f8fbff,#edf3ff 48%,#f8f5ff); color:var(--ink); overflow-x:hidden; }
button,input,textarea,select { font:inherit;letter-spacing:0; }
button { appearance:none;min-width:0;min-height:40px;cursor:pointer;color:inherit;-webkit-text-fill-color:currentColor;line-height:1.25;white-space:normal; }
button:disabled { cursor:not-allowed;opacity:.48;transform:none!important; }
.ambient { position:fixed; border-radius:50%; filter:blur(72px); pointer-events:none; opacity:.34; animation:drift 9s ease-in-out infinite alternate; }
.ambient-a { width:370px; height:370px; background:#72a8ff; left:-140px; top:8%; }
.ambient-b { width:330px; height:330px; background:#b89aff; right:-120px; bottom:4%; animation-delay:-3s; }
@keyframes drift { to { transform:translate(34px,22px) scale(1.08); } }
.glass { background:rgba(255,255,255,.70); border:1px solid var(--line); box-shadow:0 18px 50px rgba(61,83,130,.12); backdrop-filter:blur(26px) saturate(145%); -webkit-backdrop-filter:blur(26px) saturate(145%); }
.shell { position:relative; display:grid; grid-template-columns:250px minmax(0,1fr); gap:18px; min-height:100vh; padding:18px; }
.sidebar { position:sticky; top:18px; height:calc(100vh - 36px); border-radius:28px; padding:22px 15px; display:flex; flex-direction:column; }
.brand { display:flex; gap:12px; align-items:center; padding:2px 8px 28px; }
.brand-mark { width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#1478ff,#8868ff);color:white;display:grid;place-items:center;font-weight:900;font-size:22px;box-shadow:0 10px 25px rgba(22,119,255,.28); }
.brand strong,.brand small { display:block; }.brand strong { font-size:20px; }.brand small { color:var(--muted);margin-top:2px; }
nav { display:grid;gap:8px; }.sidebar nav { min-height:0;overflow-y:auto;padding-right:3px; }.nav-item { border:0;background:transparent;border-radius:16px;padding:13px 15px;text-align:left;color:var(--muted);font-weight:700;transition:.22s ease; }.nav-item:hover { transform:translateX(3px);background:rgba(22,119,255,.06); }.nav-item.active { color:var(--blue);background:rgba(22,119,255,.11); }
.connection { margin-top:auto;padding:12px;display:flex;gap:9px;align-items:center;color:var(--muted);font-size:12px; }.connection span:first-child { width:9px;height:9px;border-radius:50%;background:#aab2c2; }.connection.online span:first-child { background:#24aa72;box-shadow:0 0 0 5px rgba(36,170,114,.12); }
main { min-width:0; }.topbar { border-radius:25px;padding:18px 22px;display:flex;justify-content:space-between;align-items:center; }.topbar h1 { margin:0;font-size:25px; }.topbar p { margin:4px 0 0;color:var(--muted);font-size:12px; }
.page { display:none;padding-top:18px;animation:fadeUp .3s ease; }.page.active { display:block; } @keyframes fadeUp { from {opacity:0;transform:translateY(8px)} }
.metrics { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px; }.metric { border-radius:22px;padding:18px 20px; }.metric span,.metric strong { display:block; }.metric span { color:var(--muted);font-size:12px; }.metric strong { font-size:24px;margin-top:7px; }
.content-grid { display:grid;grid-template-columns:minmax(320px,.82fr) minmax(360px,1.18fr);gap:14px;align-items:start; }.card { border-radius:26px;padding:21px; }.card-heading { display:flex;justify-content:space-between;align-items:center;margin-bottom:18px; }.card h2 { margin:0;font-size:20px; }.card-heading p { margin:4px 0 0;color:var(--muted);font-size:12px; }
label { display:grid;gap:7px;margin:12px 0;color:#4d5870;font-size:12px;font-weight:700; } input,textarea,select { width:100%;border:1px solid rgba(91,111,150,.18);background:rgba(248,250,255,.80);border-radius:14px;padding:12px 13px;color:var(--ink);outline:none;transition:.2s; } textarea { resize:vertical;line-height:1.55; } input:focus,textarea:focus,select:focus { border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,119,255,.09);background:white; }
.field-pair { display:grid;grid-template-columns:1fr 1fr;gap:10px; }.banner-preview { width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:9px;background:#e8eef8; }.splash-preview { width:min(100%,320px);aspect-ratio:9/16;max-height:480px;object-fit:cover;border-radius:12px;margin:0 auto 9px;background:#e8eef8; }.app-list-row { display:flex;gap:12px;align-items:center; }.app-list-row img { width:48px;height:48px;object-fit:cover;border-radius:12px;background:#e8eef8; }.app-list-row>div { min-width:0;flex:1; }
.primary,.secondary,.icon-button,.filter,.widget-tab,.danger-button,.icon-danger { display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:14px;padding:11px 16px;font-weight:800;transition:.18s ease; }.primary { color:white;-webkit-text-fill-color:white;background:linear-gradient(135deg,#1677ff,#636cff);box-shadow:0 10px 25px rgba(22,119,255,.22); }.secondary { color:var(--blue);-webkit-text-fill-color:var(--blue);background:rgba(22,119,255,.09); }.primary:hover,.secondary:hover,.icon-button:hover,.filter:hover,.widget-tab:hover { transform:translateY(-2px); }.primary:active,.secondary:active,.icon-button:active,.filter:active,.widget-tab:active { transform:scale(.96); }.icon-button { color:var(--blue);font-size:20px;padding:8px 13px;background:rgba(22,119,255,.08); }
.filters { display:flex;gap:8px;margin-bottom:12px; }.filter { color:var(--muted);background:rgba(118,130,156,.08);padding:8px 12px;font-size:12px; }.filter.active { color:var(--blue);background:rgba(22,119,255,.11); }.list { display:grid;gap:9px;max-height:650px;overflow:auto;padding:2px; }.list-item { background:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.8);border-radius:18px;padding:14px;transition:.2s; }.list-item:hover { transform:translateY(-2px);box-shadow:0 10px 24px rgba(54,72,110,.08); }.list-item.removing { opacity:0;transform:scale(.96); }.list-title { font-weight:800; }.list-meta,.list-summary { color:var(--muted);font-size:12px;line-height:1.5;margin-top:5px; }.badge { display:inline-flex;border-radius:20px;padding:4px 8px;background:rgba(22,119,255,.09);color:var(--blue);font-size:10px;font-weight:800; }
.checkbox { grid-template-columns:auto 1fr;align-items:center; }.checkbox input { width:18px;height:18px;accent-color:var(--blue); }.form-message { min-height:18px;color:#1b9265;font-size:12px; }.form-message.error { color:#db3c4a; }
dialog { border:0;padding:0;border-radius:25px;background:rgba(255,255,255,.94);box-shadow:0 25px 80px rgba(25,40,75,.26); } dialog::backdrop { background:rgba(13,21,41,.45);backdrop-filter:blur(5px); }.settings-card { width:min(470px,calc(100vw - 32px));padding:24px; }.settings-card h2 { margin:0; }.settings-card>p { color:var(--muted);font-size:12px;line-height:1.55; }.dialog-actions { display:flex;justify-content:flex-end;gap:9px;margin-top:16px; }
.widget-toolbar { display:flex;gap:8px;padding:9px;border-radius:20px;margin-bottom:14px;overflow-x:auto; }
.widget-tab { flex:1;min-width:132px;background:transparent;color:var(--muted);-webkit-text-fill-color:var(--muted);white-space:nowrap; }
.widget-tab.active { color:var(--blue);-webkit-text-fill-color:var(--blue);background:rgba(22,119,255,.11); }
.widget-panel { display:none; }.widget-panel.active { display:block;animation:fadeUp .24s ease; }
.widget-panel>.card { width:100%; }
.section-heading,.widget-entry-heading,.cloud-heading { display:flex;justify-content:space-between;gap:12px;align-items:center; }
.section-heading { margin:26px 0 12px;padding-top:20px;border-top:1px solid rgba(91,111,150,.13); }
.section-heading h3 { margin:0;font-size:17px; }.section-heading p { margin:4px 0 0;color:var(--muted);font-size:12px; }
.widget-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.widget-entry { min-width:0;border:1px solid rgba(91,111,150,.14);border-radius:18px;padding:15px;background:rgba(255,255,255,.5); }
.danger-button,.icon-danger { color:#cf3445;-webkit-text-fill-color:#cf3445;background:rgba(207,52,69,.08); }.danger-button { padding:7px 10px;font-size:11px; }.icon-danger { padding:8px 11px;font-size:18px;line-height:1; }
.cloud-editor { margin-top:12px;padding:12px;border-radius:16px;background:rgba(238,244,255,.65); }.cloud-heading { margin-bottom:8px; }.compact { padding:7px 10px;font-size:11px; }
.cloud-row { display:grid;grid-template-columns:auto minmax(100px,.65fr) minmax(170px,1.35fr) auto;gap:7px;align-items:center;margin-top:8px; }
.cloud-row select,.cloud-row input { min-width:0;margin:0; }.inline-check { display:flex;grid-template-columns:none;flex-direction:row;align-items:center;gap:6px;margin:0;white-space:nowrap; }.inline-check input { width:18px;height:18px;accent-color:var(--blue); }.feature-toggle { margin-top:12px; }
.empty-state { grid-column:1/-1;margin:0;padding:18px;text-align:center;color:var(--muted);border:1px dashed rgba(91,111,150,.2);border-radius:16px;font-size:12px; }.wide-action { width:100%;margin-top:18px; }
.operations-card { margin-top:14px; }.operations-list { margin-top:16px;max-height:360px; }
.intelligence-row { display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start; }
.intelligence-row img { width:96px;aspect-ratio:1/1;object-fit:cover;border-radius:14px;background:#e8eef8; }
.list-actions { display:flex;gap:8px;margin-top:11px;flex-wrap:wrap; }
.list-actions button { flex:1; }
.analytics-toolbar { border-radius:26px;padding:20px 22px;margin-bottom:14px; }
.analytics-toolbar h2,.chart-heading h2 { margin:0; }
.analytics-toolbar>div:first-child p,.chart-heading p { margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5; }
.analytics-range { display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px; }
.analytics-range .filter { min-height:38px; }
.analytics-custom-range { display:grid;grid-template-columns:minmax(150px,220px) minmax(150px,220px) auto;gap:10px;align-items:end;margin-top:12px; }
.analytics-custom-range label { margin:0; }
.analytics-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.chart-card { min-width:0;border-radius:26px;padding:20px;overflow:hidden; }
.chart-wide { grid-column:1/-1; }
.chart-heading { min-height:48px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px; }
.chart-canvas { display:block;width:100%;height:260px;margin-top:12px;touch-action:none; }
.chart-canvas.chart-tall { height:330px; }
.chart-legend { display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end; }
.chart-legend-item,.pie-legend-item { display:flex;align-items:center;gap:6px;color:var(--muted);font-size:11px; }
.chart-color { width:9px;height:9px;border-radius:50%;flex:0 0 auto; }
.analytics-summary { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:10px; }
.analytics-summary article { padding:11px;border-radius:14px;background:rgba(231,240,255,.72); }
.analytics-summary span,.analytics-summary strong,.analytics-summary small { display:block; }
.analytics-summary span { color:var(--muted);font-size:10px; }
.analytics-summary strong { margin-top:4px;font-size:17px; }
.analytics-summary small { color:var(--muted);font-size:9px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pie-layout { min-height:260px;display:grid;grid-template-columns:minmax(180px,.9fr) minmax(150px,1.1fr);gap:18px;align-items:center;margin-top:8px; }
.pie-canvas { display:block;width:100%;height:240px;touch-action:none; }
.pie-legend { display:grid;gap:8px;max-height:240px;overflow:auto;padding-right:4px; }
.pie-legend-item strong { margin-left:auto;color:var(--ink);font-size:11px; }
.chart-tooltip { position:fixed;z-index:50;max-width:240px;padding:9px 11px;border:1px solid rgba(90,111,150,.18);border-radius:10px;background:rgba(20,29,49,.94);color:white;box-shadow:0 10px 30px rgba(14,24,46,.24);pointer-events:none;font-size:11px;line-height:1.55;white-space:pre-line; }
.chart-empty { color:var(--muted); }
@media(max-width:1100px){.widget-list{grid-template-columns:1fr}}
@media(max-width:900px){.shell{grid-template-columns:1fr;padding:10px}.sidebar{position:static;height:auto;display:block;border-radius:22px}.brand{padding:0 0 12px}.brand small,.connection{display:none}.sidebar nav{display:flex;overflow-x:auto;overflow-y:hidden;padding:0 0 3px}.nav-item{white-space:nowrap;flex:0 0 auto}.content-grid,.analytics-grid{grid-template-columns:1fr}.chart-wide{grid-column:auto}.topbar{border-radius:22px}.metrics{grid-template-columns:1fr 1fr}}
@media(max-width:560px){nav{display:grid;grid-template-columns:1fr 1fr;overflow:visible}.topbar{padding:15px;gap:10px}.topbar h1{font-size:20px}.content-grid{grid-template-columns:minmax(0,1fr)}.card,.chart-card{padding:16px}.card-heading,.section-heading,.chart-heading{align-items:flex-start;flex-wrap:wrap}.card-heading>button,.section-heading>button{width:100%}.metrics{grid-template-columns:1fr}.field-pair,.analytics-custom-range{grid-template-columns:1fr}.analytics-custom-range .primary{width:100%}.analytics-summary{grid-template-columns:1fr 1fr}.pie-layout{grid-template-columns:1fr}.pie-canvas{height:220px}.chart-canvas{height:230px}.chart-canvas.chart-tall{height:300px}.widget-toolbar{gap:4px}.widget-tab{min-width:112px;padding-inline:10px}.cloud-row{grid-template-columns:1fr auto}.cloud-row .inline-check,.cloud-row select{grid-column:1}.cloud-row input[type=url]{grid-column:1/-1}.cloud-row .icon-danger{grid-column:2;grid-row:1/3}.widget-entry{padding:12px}.intelligence-row{grid-template-columns:72px minmax(0,1fr)}.intelligence-row img{width:72px}}
.credential-panel{margin-top:16px;padding-top:16px;border-top:1px solid rgba(91,113,151,.16)}
.credential-panel dl{display:grid;gap:10px;margin:12px 0}
.credential-panel dl div{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:start}
.credential-panel dt{color:#73809a;font-size:12px}
.credential-panel dd{margin:0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere;user-select:all}
.support-message-image{display:block;max-width:100%;max-height:220px;object-fit:cover;border-radius:14px;margin-top:8px;border:1px solid var(--border-color,#dfe3e7)}

/* Admin workbench layout: grouped navigation, quick actions, and a calmer reading rhythm. */
.shell { grid-template-columns:278px minmax(0,1fr); gap:22px; padding:20px; }
.sidebar { border-radius:24px; padding:20px 14px 14px; background:rgba(255,255,255,.78); box-shadow:0 22px 60px rgba(48,67,106,.14); }
.brand { padding:0 8px 18px; }
.brand-mark { width:42px; height:42px; border-radius:13px; background:linear-gradient(145deg,#ffffff,#dce8ff); color:#315ec8; border:1px solid rgba(49,94,200,.16); box-shadow:0 10px 22px rgba(49,94,200,.16); }
.sidebar-tools { padding:0 2px 14px; }
.nav-search { display:flex; align-items:center; gap:7px; margin:0; padding:9px 10px; border:1px solid rgba(80,105,154,.16); border-radius:12px; background:rgba(247,250,255,.82); color:#71809b; }
.nav-search span { font-size:18px; line-height:1; }
.nav-search input { min-width:0; padding:2px 0; border:0; outline:0; background:transparent; box-shadow:none; font-size:12px; }
.nav-search input:focus { border:0; box-shadow:none; background:transparent; }
.nav-search kbd { padding:2px 5px; border:1px solid rgba(80,105,154,.18); border-radius:5px; color:#8794a9; font-size:10px; }
.sidebar nav { display:grid; gap:14px; }
.nav-group { display:grid; gap:4px; }
.nav-group[hidden], .nav-item[hidden] { display:none; }
.nav-group-title { margin:0 10px 3px; color:#8996aa; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.nav-item { position:relative; padding:10px 12px 10px 16px; border-radius:11px; font-size:13px; font-weight:750; }
.nav-item::before { content:""; position:absolute; left:5px; top:50%; width:3px; height:0; border-radius:99px; background:var(--blue); transform:translateY(-50%); transition:.2s ease; }
.nav-item:hover { transform:translateX(2px); background:rgba(22,119,255,.055); }
.nav-item.active { color:#245dca; background:linear-gradient(90deg,rgba(38,101,211,.14),rgba(38,101,211,.04)); box-shadow:inset 0 0 0 1px rgba(38,101,211,.08); }
.nav-item.active::before { height:18px; }
.connection { border-top:1px solid rgba(92,113,151,.12); margin-top:14px; padding:14px 10px 0; }
main { max-width:1500px; width:100%; margin:0 auto; }
.topbar { position:sticky; top:20px; z-index:10; min-height:84px; padding:17px 20px; border-radius:20px; background:rgba(255,255,255,.84); box-shadow:0 15px 40px rgba(48,67,106,.10); }
.topbar-heading { min-width:0; }
.eyebrow { display:block; margin-bottom:4px; color:#7a8ca8; font-size:9px; font-weight:850; letter-spacing:.16em; }
.topbar h1 { font-size:24px; letter-spacing:-.02em; }
.topbar-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.topbar-jump { font-size:12px; padding:9px 12px; }
.page { padding-top:16px; }
.metrics { gap:12px; }
.metric { border-radius:18px; padding:16px 18px; }
.content-grid, .analytics-grid { gap:16px; }
.card, .chart-card, .analytics-toolbar { border-radius:20px; }
@media(max-width:900px){
  .shell { gap:12px; padding:10px; }
  .sidebar { padding:15px 12px 12px; }
  .sidebar-tools { padding-bottom:10px; }
  .sidebar nav { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }
  .nav-group { display:flex; gap:5px; flex:0 0 auto; align-items:center; }
  .nav-group-title { display:none; }
  .nav-item { flex:0 0 auto; white-space:nowrap; }
  .topbar { position:static; }
}
@media(max-width:560px){
  .topbar { align-items:flex-start; flex-direction:column; }
  .topbar-actions { width:100%; justify-content:flex-start; }
  .topbar-jump { flex:1; }
  .topbar-actions #openSettings { margin-left:auto; }
}