:root{
  --suite-op-bg: radial-gradient(circle at top, rgba(59,130,246,.18), transparent 32%), linear-gradient(180deg,#eef4ff 0%, #f8fafc 48%, #edf2f7 100%);
  --suite-pub-bg: radial-gradient(circle at top, rgba(14,165,233,.18), transparent 32%), linear-gradient(180deg,#f8fbff 0%, #ffffff 44%, #f3f7fb 100%);
  --suite-ink:#0f172a;
  --suite-muted:#64748b;
  --suite-line:#dbe4ee;
  --suite-op-card:rgba(255,255,255,.82);
  --suite-pub-card:rgba(255,255,255,.92);
  --suite-shadow:0 18px 40px rgba(15,23,42,.08);
  --suite-radius:24px;
}
@media (prefers-color-scheme: dark){
  :root{
    --suite-op-bg: linear-gradient(180deg,#07111f 0%, #0b1220 100%);
    --suite-pub-bg: linear-gradient(180deg,#0a1220 0%, #0b1220 100%);
    --suite-ink:#e5e7eb;
    --suite-muted:#9ca3af;
    --suite-line:#223047;
    --suite-op-card:rgba(15,23,42,.92);
    --suite-pub-card:rgba(15,23,42,.88);
    --suite-shadow:0 20px 50px rgba(0,0,0,.34);
  }
}
body.suite-shell{color:var(--suite-ink);}
body.suite-operational{background:var(--suite-op-bg)!important;}
body.suite-public{background:var(--suite-pub-bg)!important;}
body.suite-shell .page, body.suite-shell .wrap{position:relative;}
body.suite-shell .frame,
body.suite-shell .card,
body.suite-shell .wrap > .card,
body.suite-shell .wrap > .frame{
  box-shadow:var(--suite-shadow)!important;
  border-radius:28px!important;
  overflow:hidden;
}
body.suite-operational .frame,
body.suite-operational .card,
body.suite-operational .wrap > .card,
body.suite-operational .wrap > .frame{background:var(--suite-op-card)!important;border-color:var(--suite-line)!important;backdrop-filter:blur(10px)}
body.suite-public .frame,
body.suite-public .card,
body.suite-public .wrap > .card,
body.suite-public .wrap > .frame{background:var(--suite-pub-card)!important;border-color:var(--suite-line)!important;backdrop-filter:blur(8px)}
body.suite-shell .top-fixed{position:sticky;top:0;z-index:20;background:transparent!important;padding:18px 18px 0!important}
body.suite-shell .header{align-items:center!important}
body.suite-shell .divider{margin:12px 0 0!important;opacity:.8}
body.suite-shell .title .brand{font-size:19px!important;letter-spacing:.2px!important}
body.suite-shell .title .main{font-size:16px!important;color:var(--suite-muted)!important}
body.suite-shell .home-btn{
  background:rgba(255,255,255,.70)!important;
  backdrop-filter:blur(10px);
  border-color:var(--suite-line)!important;
  box-shadow:0 10px 24px rgba(15,23,42,.10);
}
@media (prefers-color-scheme: dark){
  body.suite-shell .home-btn{background:rgba(15,23,42,.72)!important;}
}
.suite-ribbon{
  margin:14px 0 0;
  border:1px solid var(--suite-line);
  border-radius:22px;
  padding:16px 16px 14px;
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.86));
  box-shadow:0 10px 30px rgba(15,23,42,.06);
}
body.suite-operational .suite-ribbon{background:linear-gradient(135deg, rgba(239,246,255,.96), rgba(219,234,254,.86));}
body.suite-public .suite-ribbon{background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(236,253,255,.92));}
@media (prefers-color-scheme: dark){
  .suite-ribbon{background:linear-gradient(135deg, rgba(15,23,42,.92), rgba(12,18,32,.88));}
}
.suite-ribbon-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.suite-kicker{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#e0f2fe;color:#0c4a6e;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
.suite-kicker.op{background:#dbeafe;color:#1d4ed8}
.suite-kicker.pub{background:#dcfce7;color:#166534}
.suite-status{font-size:12px;font-weight:700;color:var(--suite-muted)}
.suite-title{margin:10px 0 0;font-size:clamp(20px,2vw,30px);font-weight:900;line-height:1.08;color:var(--suite-ink)}
.suite-subtitle{margin:10px 0 0;color:var(--suite-muted);font-size:14px;line-height:1.6;max-width:900px}
.suite-chipbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.suite-chip{
  display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:14px;
  text-decoration:none;font-size:13px;font-weight:800;border:1px solid var(--suite-line);color:var(--suite-ink);
  background:rgba(255,255,255,.78);box-shadow:0 8px 22px rgba(15,23,42,.06)
}
.suite-chip.primary{background:linear-gradient(90deg,#0284c7,#2563eb);border-color:transparent;color:#fff}
.suite-chip.secondary{background:rgba(255,255,255,.72)}
@media (prefers-color-scheme: dark){.suite-chip.secondary{background:rgba(15,23,42,.7)}}
.suite-bottom-nav{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:50;display:grid;grid-template-columns:repeat(var(--suite-cols,4),1fr);gap:8px;
  padding:8px;border-radius:22px;border:1px solid var(--suite-line);background:rgba(255,255,255,.88);backdrop-filter:blur(14px);box-shadow:0 16px 30px rgba(15,23,42,.12)
}
@media (prefers-color-scheme: dark){.suite-bottom-nav{background:rgba(12,18,32,.9)}}
.suite-bottom-nav a{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border-radius:14px;text-decoration:none;font-size:12px;font-weight:800;color:var(--suite-ink);background:rgba(255,255,255,.70)}
.suite-bottom-nav a.is-active{background:linear-gradient(90deg,#0284c7,#2563eb);color:#fff}
@media (max-width: 1100px){body.suite-shell .page{padding-bottom:90px!important}body.suite-shell .wrap{padding-bottom:90px!important}}
@media (min-width: 1101px){.suite-bottom-nav{display:none}}
body.suite-shell .action-btn,
body.suite-shell .tile,
body.suite-shell .btn,
body.suite-shell .btn-primary,
body.suite-shell .btn-lite,
body.suite-shell .choice-btn,
body.suite-shell .send-btn,
body.suite-shell .quick-btn{
  border-radius:16px!important;
}
body.suite-shell .bubble-area,
body.suite-shell .sticky,
body.suite-shell .preview-wrap,
body.suite-shell .preview-box,
body.suite-shell .grid,
body.suite-shell .camera-card,
body.suite-shell .form-card{
  border-color:var(--suite-line)!important;
}
body.suite-shell .content,
body.suite-shell .content-scroll{padding-top:16px!important}
body.suite-shell .bubble-area{background:rgba(255,255,255,.65)!important}
@media (prefers-color-scheme: dark){body.suite-shell .bubble-area{background:rgba(2,6,23,.35)!important}}
body.suite-shell .footer, body.suite-shell .footer-meta{color:var(--suite-muted)!important}