/* Signal Field v3 — aligned with panel tokens (base.css) + mobile vitality */
:root {
  --field: #0a1220;
  --field-soft: #0c1526;
  --surface: #f4f7fc;
  --surface-2: #e8eef8;
  --ink: #0f1c24;
  --ink-soft: #3d5360;
  --muted: #5b6b78;
  --line: rgba(15, 28, 36, 0.09);
  --ok: #2563eb;
  --ok-hover: #1d4ed8;
  --ok-soft: rgba(37, 99, 235, 0.16);
  --signal: #2563eb;
  --signal-dim: rgba(37, 99, 235, 0.14);
  --signal-glow: rgba(37, 99, 235, 0.42);
  --live: #10b981;
  --live-dim: rgba(16, 185, 129, 0.16);
  --live-glow: rgba(52, 211, 153, 0.45);
  --online-bar: #34d399;
  --amber: #d97706;
  --alert: #e11d48;
  --alert-dim: rgba(225, 29, 72, 0.14);
  --card: #ffffff;
  --radius: 1.25rem;
  --radius-sm: 0.85rem;
  --shadow: 0 18px 40px -28px rgba(15, 28, 36, 0.35);
  --shadow-lg: 0 32px 64px -24px rgba(15, 28, 36, 0.45);
  --phone-w: 390px;
  --phone-h: 844px;
  --beam: 5px;
  /* Same stacks as site / panel (docs/architecture/FONTS.md) */
  --font-en: Manrope, Cairo, "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-ar: Cairo, Manrope, "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-display: Outfit, Cairo, Manrope, sans-serif;
}

.phone.is-theme-dark {
  --surface: #0c1526;
  --surface-2: #152036;
  --ink: #f1f5f9;
  --ink-soft: #cbd5e1;
  --muted: #94a3b8;
  --line: rgba(248, 250, 252, 0.1);
  --card: #121c2e;
  --ok-soft: rgba(37, 99, 235, 0.28);
  --signal-dim: rgba(37, 99, 235, 0.22);
  --live-dim: rgba(16, 185, 129, 0.22);
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 32px 64px -20px rgba(0, 0, 0, 0.75);
}

html, body { height: 100%; }

body {
  font-family: var(--font-ar);
  color: var(--ink);
  background:
    radial-gradient(1100px 560px at 8% -8%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(900px 500px at 96% 4%, rgba(16, 185, 129, 0.12), transparent 50%),
    radial-gradient(700px 420px at 70% 100%, rgba(217, 119, 6, 0.1), transparent 55%),
    linear-gradient(165deg, #0a1220 0%, #0c1526 45%, #0f172a 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(37, 99, 235, 0.2), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 10%, rgba(16, 185, 129, 0.1), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* ── Studio chrome ── */
.studio {
  position: relative;
  z-index: 1;
  min-height: 100%;
  padding: 1.5rem 1.25rem 2.5rem;
}

.studio-head {
  max-width: 1320px;
  margin: 0 auto 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.studio-head img.lockup { height: 38px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; }

.studio-head h1 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f8fafc;
}

.studio-head p {
  flex: 1 1 280px;
  color: rgba(248, 250, 252, 0.55);
  font-size: 0.88rem;
  line-height: 1.5;
}

.studio-head .hint {
  font-size: 0.75rem;
  color: var(--signal);
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stage {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

.device-col { display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }

.device-col > h2 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.45);
}

/* —— Marketing embed (?embed=sub|mgr) —— */
html.is-embed .studio-head { display: none; }

html.is-embed .studio {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

html.is-embed .stage {
  width: 100%;
  justify-content: center;
  gap: 0;
}

html.is-embed .device-col > h2 { display: none; }

html.is-embed.is-embed-sub .device-col:has(#mgr),
html.is-embed.is-embed-mgr .device-col:has(#sub) {
  display: none !important;
}

html.is-embed body {
  overflow: hidden;
}

/* ── Phone shell ── */
.phone {
  width: var(--phone-w);
  height: var(--phone-h);
  border-radius: 2.75rem;
  padding: 0.55rem;
  background: linear-gradient(145deg, #1e293b 0%, #0f172a 50%, #020617 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 40px 80px -20px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  direction: ltr;
}

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2.35rem;
  overflow: hidden;
  background: var(--surface);
  font-family: var(--font-en);
  color: var(--ink);
}

.phone[dir="rtl"] .phone-screen {
  direction: rtl;
  font-family: var(--font-ar);
}
.phone[dir="ltr"] .phone-screen {
  direction: ltr;
  font-family: var(--font-en);
}

.phone-screen.is-auth {
  background:
    radial-gradient(1100px 560px at 8% -8%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(900px 500px at 96% 4%, rgba(16, 185, 129, 0.12), transparent 50%),
    radial-gradient(700px 420px at 70% 100%, rgba(217, 119, 6, 0.1), transparent 55%),
    linear-gradient(165deg, #e8eef8 0%, #eef4f8 40%, #f3efe8 100%);
}

.phone.is-theme-dark .phone-screen.is-auth {
  background:
    radial-gradient(1100px 560px at 8% -8%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(900px 500px at 96% 4%, rgba(16, 185, 129, 0.12), transparent 50%),
    radial-gradient(700px 420px at 70% 100%, rgba(217, 119, 6, 0.1), transparent 55%),
    linear-gradient(165deg, #e8eef8 0%, #eef4f8 40%, #f3efe8 100%);
}

.scr[data-scr="login"] .status,
.scr[data-scr="slogin"] .status { color: #0f172a; }

.scr {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.scr.is-on { display: flex; }

/* Status bar */
.status {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 1.35rem 0.25rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink);
  z-index: 5;
}

.phone-screen.is-auth .status { color: var(--muted); }

.scr[data-scr="shome"] .status { color: var(--muted); position: absolute; top: 0; left: 0; right: 0; }
.phone.is-theme-dark .scr[data-scr="shome"] .status { color: rgba(248, 250, 252, 0.8); }

/* ── Login = Flutter V1 1:1 ────────────────────────────────────────────────
   Source of truth (numbers copied, not approximated):
     rado_manager_app/lib/screens/login_screen.dart
     rado_manager_app/lib/widgets/login_form_field.dart
     rado_manager_app/lib/widgets/rado_brand_login_logo.dart
     rado_manager_app/lib/theme/manager_app_colors.dart
   rado_subscribers_app login_screen.dart is the same tree — one CSS block.

   Direction: V1 is physically LTR in BOTH languages. Arabic resolves to the
   ar-Latn locale (translations.dart localeForLanguageCode) and intl Bidi
   reports *-Latn as LTR, so Directionality is ltr app-wide; screens opt into
   RTL one widget at a time via AppTranslations.textDirectionFor(), and login
   never does. Hence `direction: ltr` below even though .phone is dir=rtl.

   Field = Material 3 InputDecorator + OutlineInputBorder + filled:
     contentPadding (12,20,12,12) + bodyLarge line box 24  -> 56 tall
     prefixIcon slot 48 + prefixToInputGap 4               -> input starts x52
     suffix mirror                                          -> input ends x-52
     label rests at x52 centred, floats to x16 at scale .75
     border notch = gapPadding 4 each side of the float label
   ─────────────────────────────────────────────────────────────────────────── */
.scr[data-scr="login"],
.scr[data-scr="slogin"] {
  /* Flutter SafeArea top inset; the fake iOS status bar is overlaid, never a
     flex sibling, so the Column starts at inset + Padding.top(8) like V1. */
  --v1-safe-top: 32px;
  background: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 42%);
}

.scr[data-scr="login"] .status,
.scr[data-scr="slogin"] .status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #0f172a;
  pointer-events: none;
}

/* Scaffold > SafeArea > Padding.fromLTRB(10, 8, 10, 20) > Column */
.login-v1 {
  flex: 1;
  min-height: 0;
  direction: ltr;
  display: flex;
  flex-direction: column;
  padding: calc(var(--v1-safe-top) + 8px) 10px 20px;
  /* Site fonts (Cairo / Manrope / Outfit) — same lock as panel & marketing */
  font-family: inherit;
  color: #0f172a;
}

/* Align(AlignmentDirectional.centerEnd) — LTR, so physical right */
.v1-lang {
  flex-shrink: 0;
  align-self: flex-end;
  box-sizing: border-box;
  height: 42px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(14, 165, 233, 0.15);
  border-radius: 12px;
  background: #f1f5f9;
  font-family: inherit;
  cursor: pointer;
}

.v1-lang i { font-size: 20px; line-height: 1; color: #0ea5e9; }

.v1-lang span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.25px;
  line-height: 15.73px;
  color: #0f172a;
}

/* SizedBox(10) + Expanded(Center(SingleChildScrollView(maxWidth 440))) */
.v1-main {
  flex: 1;
  min-height: 0;
  margin-top: 10px;
  display: flex;
}

.v1-stack {
  margin: auto;
  width: 100%;
  max-width: 440px;
}

/* RadoBrandLoginLogo(width: 238) then SizedBox(12) */
.v1-hero-logo {
  display: block;
  width: 238px;
  height: 192px;
  margin: 0 auto 12px;
}

.v1-card {
  box-sizing: border-box;
  width: 100%;
  padding: 20px 20px 22px;
  border-radius: 24px;
  background: #fff;
  /* BoxShadow(blurRadius 18) -> sigma 10.89 -> CSS blur 2*sigma */
  box-shadow: 0 8px 21.8px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

.v1-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 56px;
  margin: 0;
  border-radius: 14px;
  background: #f1f5f9;
  /* inset stroke = OutlineInputBorder (painted inside the rect) */
  box-shadow: inset 0 0 0 1px #e2e8f0;
}

.v1-field + .v1-field { margin-top: 14px; }

.v1-field:focus-within { box-shadow: inset 0 0 0 1.5px #0ea5e9; }

.v1-ico,
.v1-slot,
.v1-eye {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.v1-ico i { font-size: 22px; line-height: 1; color: #0ea5e9; }

.v1-mid {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.v1-mid input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 24px;
  color: #0f172a;
  text-align: center;
}

.v1-mid input:focus { outline: none; }

/* Resting label: x52, vertically centred (centerLayout). */
.v1-float {
  position: absolute;
  left: 46.667px;
  top: 16px;
  height: 24px;
  padding: 0 5.333px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 24px;
  color: #64748b;
  white-space: nowrap;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform 167ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating label: translate to x16 / y-8.5 at scale .75, and cover the top
   stroke over the notch — white above the field edge, fill below it. */
.v1-field:focus-within .v1-float,
.v1-mid input:not(:placeholder-shown) + .v1-float {
  transform: translate(-34.667px, -24.5px) scale(0.75);
  background: linear-gradient(180deg, #fff 0, #fff 11.333px, #f1f5f9 11.333px);
}

.v1-eye {
  padding: 0;
  border: none;
  background: none;
  font-size: 24px;
  color: #64748b;
  cursor: pointer;
}

.v1-eye i { line-height: 1; }

/* SizedBox(4) then Row(SizedBox 40x40 Checkbox, Expanded(Text)) */
.v1-remember {
  display: flex;
  align-items: center;
  height: 40px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.25px;
  line-height: 20.02px;
  color: #64748b;
  cursor: pointer;
}

.v1-check {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

/* Expanded(Text) */
.v1-remember > span:not(.v1-check) { flex: 1 1 auto; min-width: 0; }

.v1-check input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 2px solid #45464f;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.v1-check input:checked {
  border-color: #0ea5e9;
  background: #0ea5e9;
}

.v1-check input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* SizedBox(16) then SizedBox(width: infinity, height: 52, FilledButton) */
.v1-submit {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 52px;
  margin-top: 16px;
  padding: 0;
  border: none;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.1px;
  line-height: 22.88px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 10px 22px -12px rgba(37, 99, 235, 0.7);
  transition: background 0.2s, transform 0.2s;
}

.v1-submit:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.v1-submit:active {
  background: #1d4ed8;
  transform: translateY(0);
}

/* Padding.only(top: 12, bottom: 8) */
.v1-credit {
  flex-shrink: 0;
  padding: 12px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v1-credit a { line-height: 0; }

.v1-credit img {
  display: block;
  width: 60px;
  height: 48.41px;
}

.v1-credit span {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 14.3px;
  color: rgba(100, 116, 139, 0.6);
}

/* Auth atmosphere (from proto/css/auth.css) */
.v1-auth-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.v1-auth-hero-mesh {
  position: absolute;
  inset: -20%;
  background:
    conic-gradient(from 200deg at 40% 40%, transparent 0deg, rgba(37, 99, 235, 0.07) 70deg, transparent 140deg, rgba(16, 185, 129, 0.05) 220deg, transparent 300deg);
  animation: v1AuthMesh 24s linear infinite;
  opacity: 0.9;
}

.v1-auth-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(15, 28, 36, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 28, 36, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, #000, transparent);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, #000, transparent);
}

.v1-auth-hero-pulse {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  left: 14%;
  top: 52%;
  background: rgba(37, 99, 235, 0.14);
  filter: blur(42px);
  animation: v1AuthPulse 8s ease-in-out infinite;
}

.v1-auth-hero-pulse--b {
  width: 160px;
  height: 160px;
  left: auto;
  right: 18%;
  top: 12%;
  background: rgba(16, 185, 129, 0.14);
  animation-duration: 10s;
  animation-direction: reverse;
}

@keyframes v1AuthMesh {
  to { transform: rotate(360deg); }
}

@keyframes v1AuthPulse {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  50% { transform: translate(18px, -12px) scale(1.1); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  .v1-auth-hero-mesh,
  .v1-auth-hero-pulse {
    animation: none !important;
  }
}

.field-row { margin-bottom: 0.75rem; }

.field-row label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}

.field-row input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  background: var(--surface);
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field-row select,
.sheet-form select,
.bulk-field select {
  width: 100%;
  margin-top: 0.2rem;
  appearance: none;
  -webkit-appearance: none;
  padding: 0.75rem 2.5rem 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0.6L6 5.2L10.6 0.6L12 2L6 8L0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.phone[dir="rtl"] .field-row select,
.phone[dir="rtl"] .sheet-form select,
.phone[dir="rtl"] .bulk-field select {
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  background-position: left 0.85rem center;
}

.field-row input:focus,
.field-row select:focus,
.sheet-form select:focus,
.bulk-field select:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-dim);
}

.pick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.pick-chips button {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.pick-chips button.is-on {
  background: var(--field);
  color: #fff;
  border-color: var(--field);
}

.nice-select {
  position: relative;
  margin-top: 0.2rem;
}

.nice-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nice-select-btn {
  width: 100%;
  appearance: none;
  text-align: start;
  padding: 0.75rem 2.5rem 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.4 0.6L6 5.2L10.6 0.6L12 2L6 8L0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px 8px;
  cursor: pointer;
}

.phone[dir="rtl"] .nice-select-btn {
  padding: 0.75rem 0.9rem 0.75rem 2.5rem;
  background-position: left 0.85rem center;
}

.nice-select.is-open .nice-select-btn {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px var(--signal-dim);
}

.nice-select-menu {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 12;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.nice-select.is-open .nice-select-menu { display: block; }

.nice-select-menu li {
  padding: 0.65rem 0.85rem;
  border-radius: calc(var(--radius-sm) - 0.2rem);
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}

.nice-select-menu li.is-on {
  background: var(--signal);
  color: #fff;
}

.nice-select-menu li:not(.is-on):hover {
  background: var(--surface);
}

.btn-signal {
  width: 100%;
  margin-top: 0.5rem;
  height: 52px;
  padding: 0 1rem;
  border: none;
  border-radius: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  background: #2563eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -12px rgba(37, 99, 235, 0.7);
  transition: transform 0.15s, background 0.15s;
}

.btn-signal:active { transform: scale(0.98); }

.btn-ghost {
  background: transparent;
  color: var(--signal);
  border: 1.5px solid var(--signal);
  box-shadow: none;
  margin-top: 0.5rem;
}

.lang-pills {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  justify-content: center;
}

.lang-pills button {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--muted);
}

.lang-pills button.is-on {
  background: var(--signal-dim);
  border-color: var(--signal);
  color: var(--signal);
  font-weight: 600;
}

/* ── Top bar ── */
.topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 1rem 0.65rem;
  z-index: 4;
}

.topbar .title {
  min-width: 0;
  flex: 1;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
  min-width: 0;
}

.page-title-row .title {
  flex: 0 1 auto;
}

.page-ico {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  background: var(--ok-soft);
  color: var(--ok);
  flex-shrink: 0;
  font-size: 0.95rem;
}

.scr[data-scr="detail"] .page-ico {
  background: var(--signal-dim);
  color: var(--ok);
}

.tool-sub {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.tool-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.tool-stats article {
  padding: 0.55rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}

.tool-stats .k {
  display: block;
  font-size: 0.62rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tool-stats .v {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-top: 0.15rem;
}

.tool-card {
  padding: 1rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 0.75rem;
}

.tool-card .field-row:last-of-type {
  margin-bottom: 0.75rem;
}

.topbar .back,
.topbar .gear-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.scr:not([data-scr="home"]):not([data-scr="shome"]) .topbar .back {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
}

.scr:not([data-scr="home"]):not([data-scr="shome"]) .topbar .gear-btn {
  background: var(--signal-dim);
  color: var(--signal);
}

.topbar .brand-mini img { height: 28px; width: auto; }


.topbar .clock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  color: rgba(248, 250, 252, 0.55);
}

.topbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.topbar .page-title-row {
  flex: 1;
  min-width: 0;
}

.top-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink);
  flex-shrink: 0;
  margin-inline-start: auto;
  display: grid;
  place-items: center;
}

.scr:not([data-scr="home"]):not([data-scr="shome"]):not([data-scr="browse"]):not([data-scr="logs"]) .topbar .back,
.scr:not([data-scr="home"]):not([data-scr="shome"]):not([data-scr="browse"]):not([data-scr="logs"]) .topbar .gear-btn { display:none; }


/* ── Scroll area ── */
.scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 1rem 4rem;
  -webkit-overflow-scrolling: touch;
}

.ptr-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 0;
  overflow: hidden;
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 700;
  transition: height 0.18s ease;
}

.ptr-bar.is-pull { height: 44px; }

.ptr-bar.is-spin i { animation: ptrSpin 0.7s linear infinite; }

@keyframes ptrSpin {
  to { transform: rotate(360deg); }
}

.scroll::-webkit-scrollbar { width: 0; }

/* Manager dash canvas = login atmosphere (owner 2026-08-17). */
.scr[data-scr="home"] {
  background:
    linear-gradient(180deg, #e0f2fe 0%, #f8fafc 42%),
    radial-gradient(1100px 560px at 8% -8%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(900px 500px at 96% 4%, rgba(16, 185, 129, 0.12), transparent 50%),
    radial-gradient(700px 420px at 70% 100%, rgba(217, 119, 6, 0.1), transparent 55%),
    linear-gradient(165deg, #e8eef8 0%, #eef4f8 40%, #f3efe8 100%);
}

.phone.is-theme-dark .scr[data-scr="home"] {
  background:
    linear-gradient(180deg, #e0f2fe 0%, #f8fafc 42%),
    radial-gradient(1100px 560px at 8% -8%, rgba(37, 99, 235, 0.18), transparent 55%),
    radial-gradient(900px 500px at 96% 4%, rgba(16, 185, 129, 0.12), transparent 50%),
    radial-gradient(700px 420px at 70% 100%, rgba(217, 119, 6, 0.1), transparent 55%),
    linear-gradient(165deg, #e8eef8 0%, #eef4f8 40%, #f3efe8 100%);
}

/* ── Field home (light Presence Stage, panel dashboard) ── */
.field-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0 -1rem 1rem;
  padding: 0.85rem 1.15rem 1.2rem;
  color: #0f172a;
  border-radius: 1.35rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58)),
    radial-gradient(420px 220px at 78% 12%, rgba(16, 185, 129, 0.16), transparent 60%),
    radial-gradient(380px 200px at 8% 88%, rgba(37, 99, 235, 0.14), transparent 55%);
  border: 1px solid rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
  box-shadow:
    0 18px 40px -24px rgba(15, 28, 36, 0.45),
    0 0 0 1px rgba(15, 28, 36, 0.04);
}

.field-hero > *:not(.field-hero-grid) { position: relative; z-index: 1; }

.field-hero-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 28, 36, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 28, 36, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 75% 70% at 55% 40%, black, transparent);
  opacity: 0.85;
}

.field-hero .greet {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
  margin: 0;
  min-width: 0;
  flex: 1;
}

.inv-dial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  margin-bottom: 0.85rem;
}

.live-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  min-width: 0;
}

.live-stat .live-k {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #0284c7;
  line-height: 1.35;
  animation: liveGlow 2.4s ease-in-out infinite;
}

.live-stat .live-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.live-stat .live-count {
  font-family: var(--font-display);
  font-size: 2.55rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.92;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 55%, #10b981 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: livePop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.live-stat .live-sub {
  font-size: 0.78rem;
  font-weight: 750;
  color: #059669;
  animation: liveGlow 2.8s ease-in-out infinite 0.2s;
}

@keyframes liveGlow {
  0%, 100% { opacity: 1; filter: none; }
  50% { opacity: 0.72; filter: brightness(1.15); }
}

@keyframes livePop {
  from { transform: scale(0.92); opacity: 0.35; }
  to { transform: scale(1); opacity: 1; }
}

.gauge-ring {
  position: relative;
  width: 176px;
  height: 176px;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 18px rgba(37, 99, 235, 0.18));
}

.dash-orbit {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px dashed rgba(37, 99, 235, 0.22);
  animation: dashSpin 28s linear infinite;
  pointer-events: none;
  z-index: 1;
}

.dash-orbit i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.dash-orbit i:nth-child(1) { top: 0; left: 50%; transform: translate(-50%, -50%); background: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2); }
.dash-orbit i:nth-child(2) { right: 6%; top: 62%; }
.dash-orbit i:nth-child(3) { left: 8%; top: 70%; background: #0ea5e9; }

@keyframes dashSpin {
  to { transform: rotate(360deg); }
}

.gauge-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}

.gauge-core {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.gauge-core .gauge-num {
  font-family: var(--font-display);
  font-size: 2.05rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.gauge-core .gauge-pct {
  font-size: 0.52em;
  font-weight: 750;
  letter-spacing: 0;
  margin-inline-start: 0.04em;
}

.gauge-core .gauge-core-k {
  margin-top: 0.2rem;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #047857;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
}

.gauge-ring .pulse-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--live);
  opacity: 0;
  animation: pulse-ring 2.5s ease-out infinite;
  transform-origin: center center;
}

@keyframes pulse-ring {
  0% { transform: scale(0.88); opacity: 0.55; }
  100% { transform: scale(1.12); opacity: 0; }
}

.gauge-text {
  flex: 1;
  min-width: 0;
}

.gauge-text .k {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.gauge-sub {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.gauge-sub .gauge-total {
  font-family: var(--font-display);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #0f172a;
}

.gauge-sub .gauge-sub-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.gauge-text .breakdown {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.quota-strip {
  margin-top: 1.25rem;
  padding: 0.9rem 1rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(15, 28, 36, 0.08);
  box-shadow: 0 12px 28px -18px rgba(15, 28, 36, 0.4);
}

.quota-strip strong {
  font-family: var(--font-display);
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.4rem;
}

.quota-strip .meter {
  height: 8px;
  background: rgba(15, 28, 36, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.45rem;
}

.quota-strip .meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #10b981);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.45);
  position: relative;
}

.quota-strip em {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--muted);
}

.license-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-top: 0.15rem;
}

.license-line .exp-label {
  font-size: 0.72rem;
  color: var(--muted);
}

.license-line .exp-date {
  font-size: 0.78rem;
  color: #0f172a;
  font-weight: 600;
}

.license-line .exp-days {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: #1d4ed8;
}

.license-line .exp-days small {
  display: block;
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
}

.dash-theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(15, 28, 36, 0.08);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.dash-theme-btn [data-theme-sun] { display: none; }
.dash-theme-btn [data-theme-moon] { display: block; }

.login-theme-btn {
  position: absolute;
  top: 2.35rem;
  inset-inline-end: 1.1rem;
  z-index: 5;
}

.phone.is-theme-dark .scr[data-scr="home"] .status {
  color: rgba(248, 250, 252, 0.8);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.phone.is-theme-dark .field-hero {
  margin: 0 -1rem 1rem;
  padding: 2.5rem 1.25rem 1.5rem;
  color: #f8fafc;
  border-radius: 0 0 2rem 2rem;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
  background:
    radial-gradient(ellipse 100% 80% at 50% 0%, rgba(37, 99, 235, 0.22), transparent 60%),
    radial-gradient(420px 280px at 0% 0%, rgba(37, 99, 235, 0.18), transparent 60%),
    linear-gradient(180deg, var(--field) 0%, var(--field-soft) 100%);
}

.phone.is-theme-dark .field-hero::before,
.phone.is-theme-dark .field-hero::after,
.phone.is-theme-dark .field-hero-grid,
.phone.is-theme-dark .dash-orbit { display: none; }

.phone.is-theme-dark .field-hero .greet { color: rgba(248, 250, 252, 0.55); }
.phone.is-theme-dark .page-title-row .title { color: #fff; }
.phone.is-theme-dark .page-ico {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.phone.is-theme-dark .gauge-core .gauge-num,
.phone.is-theme-dark .gauge-sub .gauge-total,
.phone.is-theme-dark .live-stat .live-k { color: #38bdf8; }
.phone.is-theme-dark .live-stat .live-sub { color: #34d399; }
.phone.is-theme-dark .live-stat .live-count {
  background: linear-gradient(135deg, #93c5fd 0%, #38bdf8 50%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.phone.is-theme-dark .gauge-core .gauge-core-k { color: var(--online-bar); text-shadow: none; }
.phone.is-theme-dark .gauge-text .k,
.phone.is-theme-dark .gauge-sub .gauge-sub-label { color: rgba(248, 250, 252, 0.5); }
.phone.is-theme-dark .gauge-ring { filter: none; }
.phone.is-theme-dark .gauge-ring svg circle:first-of-type { stroke: rgba(255, 255, 255, 0.08); }

.phone.is-theme-dark .quota-strip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: none;
}
.phone.is-theme-dark .quota-strip .meter { background: rgba(255, 255, 255, 0.12); }
.phone.is-theme-dark .quota-strip .meter i { box-shadow: none; }
.phone.is-theme-dark .license-line .exp-label { color: rgba(248, 250, 252, 0.5); }
.phone.is-theme-dark .license-line .exp-date { color: rgba(248, 250, 252, 0.85); }
.phone.is-theme-dark .license-line .exp-days {
  color: #60a5fa;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.45);
}
.phone.is-theme-dark .license-line .exp-days small { color: rgba(96, 165, 250, 0.85); }

.phone.is-theme-dark .inv-cell {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: none;
}
.phone.is-theme-dark .inv-cell:active { background: rgba(255, 255, 255, 0.12); transform: none; }
.phone.is-theme-dark .inv-cell .n { color: #f8fafc; }
.phone.is-theme-dark .inv-cell .k { color: rgba(248, 250, 252, 0.45); }
.phone.is-theme-dark .inv-cell.inv-exp .n,
.phone.is-theme-dark .inv-cell.inv-warn .n { color: #fbbf24; }
.phone.is-theme-dark .inv-cell.inv-dang .n { color: #fb7185; }

.phone.is-theme-dark .bento-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
  backdrop-filter: none;
}

.phone.is-theme-dark .bento-card:active { background: rgba(255, 255, 255, 0.12); }

.phone.is-theme-dark .bento-card b { color: #f8fafc; }
.phone.is-theme-dark .bento-card span { color: rgba(248, 250, 252, 0.5); }

.phone.is-theme-dark .bento-card.charge {
  background: #2563eb;
}

.phone.is-theme-dark .sub-panel {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.phone.is-theme-dark .field-top .clock {
  color: rgba(248, 250, 252, 0.55);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}
.phone.is-theme-dark .dash-theme-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #f8fafc;
}
.phone.is-theme-dark .dash-theme-btn [data-theme-moon] { display: none; }
.phone.is-theme-dark .dash-theme-btn [data-theme-sun] { display: block; }

.phone.is-theme-dark .timeline {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.sec-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0.6rem;
}

.signal-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  margin: 0 -0.25rem;
}

.signal-chips::-webkit-scrollbar { height: 0; }

.signal-chips button {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--card);
  cursor: pointer;
  box-shadow: var(--shadow);
  min-width: 100px;
}

.signal-chips button b {
  font-size: 0.88rem;
  color: var(--ink);
}

.signal-chips button span {
  font-size: 0.72rem;
  color: var(--alert);
  font-weight: 600;
}

.timeline {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow);
}

.scr[data-scr="home"] .timeline {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(15, 28, 36, 0.08);
  box-shadow: 0 14px 32px -20px rgba(15, 28, 36, 0.45);
}

.scr[data-scr="home"] .timeline .dot {
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.18), 0 0 10px rgba(6, 182, 212, 0.35);
}

.timeline header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.timeline header strong {
  font-family: var(--font-display);
  font-size: 0.88rem;
}

.timeline header button {
  border: none;
  background: none;
  font: inherit;
  font-size: 0.78rem;
  color: var(--signal);
  font-weight: 600;
  cursor: pointer;
}

.timeline .item {
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0;
  position: relative;
}

.timeline .item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 1.25rem;
  bottom: -0.25rem;
  width: 2px;
  background: var(--line);
}

.timeline .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--signal);
  flex-shrink: 0;
  margin-top: 0.2rem;
  box-shadow: 0 0 8px var(--signal-glow);
}

.timeline .item b { display: block; font-size: 0.85rem; }

.timeline .item span {
  font-size: 0.72rem;
  color: var(--muted);
}

/* ── Side drawer (RTL = right edge, LTR = left edge) ── */
.menu-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.menu-btn.light {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(248, 250, 252, 0.9);
}

.drawer-backdrop {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(11, 18, 32, 0.45);
  backdrop-filter: blur(2px);
}

.drawer-backdrop[hidden] { display: none !important; }

.side-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(86%, 280px);
  z-index: 45;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: 2.75rem 0.85rem 0.75rem;
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}

.phone.is-theme-dark .side-drawer {
  background: var(--field);
  color: #f8fafc;
}

.phone[dir="rtl"] .side-drawer {
  right: 0;
  border-radius: 1.25rem 0 0 1.25rem;
  transform: translateX(100%);
}

.phone[dir="ltr"] .side-drawer {
  left: 0;
  border-radius: 0 1.25rem 1.25rem 0;
  transform: translateX(-100%);
}

.phone.drawer-open .side-drawer { transform: translateX(0); }

.drawer-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.drawer-head strong {
  display: block;
  font-size: 0.92rem;
}

.drawer-head span {
  font-size: 0.72rem;
  color: var(--muted);
}

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 0.5rem;
  -webkit-overflow-scrolling: touch;
}

.drawer-nav > button,
.drawer-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.68rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.drawer-nav > button i,
.drawer-group-toggle > i:first-child {
  width: 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.drawer-nav > button span,
.drawer-group-toggle > span {
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.25;
}

.drawer-group-toggle .chev {
  margin-inline-start: auto;
  font-size: 0.62rem;
  opacity: 0.55;
  transition: transform 0.2s;
}

.drawer-group.is-open .drawer-group-toggle .chev {
  transform: rotate(180deg);
}

.drawer-sub {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.15rem 0 0.35rem 1.85rem;
}

.drawer-group.is-open .drawer-sub {
  display: flex;
}

.drawer-sub button {
  display: block;
  width: 100%;
  padding: 0.48rem 0.65rem;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: start;
  cursor: pointer;
}

.drawer-sub button.is-on,
.drawer-nav > button.is-on,
.drawer-group-toggle.is-on {
  background: var(--ok-soft);
  color: var(--ok);
}

.drawer-sub button:hover,
.drawer-nav > button:hover,
.drawer-group-toggle:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.phone.is-theme-dark .drawer-sub button.is-on,
.phone.is-theme-dark .drawer-nav > button.is-on,
.phone.is-theme-dark .drawer-group-toggle.is-on {
  background: rgba(6, 182, 212, 0.14);
  color: #67e8f9;
}

.drawer-hint {
  flex-shrink: 0;
  margin: 0.35rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--line);
  font-size: 0.62rem;
  color: var(--muted);
  text-align: center;
}

.drawer-foot {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}

.drawer-profile-btn,
.drawer-logout-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.68rem 0.75rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.drawer-profile-btn {
  color: var(--ink-soft);
}

.drawer-logout-btn {
  color: #f87171;
}

.drawer-profile-btn i,
.drawer-logout-btn i {
  width: 1.25rem;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.drawer-profile-btn span,
.drawer-logout-btn span {
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.25;
}

.drawer-profile-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.drawer-logout-btn:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

/* catalog list pages (panel parity) */
.catalog-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 0.65rem;
}

.catalog-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.catalog-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.catalog-row b {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.12rem;
}

.catalog-row span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}

.catalog-row .badge {
  margin-inline-start: auto;
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--signal);
}

.catalog-row .badge.live {
  background: rgba(16, 185, 129, 0.12);
  color: var(--live);
}

.catalog-row .badge.warn {
  background: rgba(217, 119, 6, 0.12);
  color: var(--amber);
}

.go-muted {
  margin-inline-start: auto;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.45;
}

.edge-swipe {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 30;
  touch-action: none;
}

.phone[dir="rtl"] .edge-swipe { right: 0; }
.phone[dir="ltr"] .edge-swipe { left: 0; }

/* ── Pull-up search (permanent catalog pattern) ── */
.pull-search {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 14;
  pointer-events: none;
}

.pull-search.is-open {
  inset: 0;
  pointer-events: auto;
}

.pull-search > .pull-hint,
.pull-search > .pull-edge {
  pointer-events: auto;
}

.pull-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(11, 18, 32, 0.42);
  backdrop-filter: blur(2px);
}

.pull-backdrop[hidden] { display: none !important; }

.pull-sheet {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  z-index: 3;
  background: var(--card);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: 0 -12px 40px rgba(11, 18, 32, 0.18);
  border-top: 1px solid var(--line);
  max-height: 52vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.pull-search.is-open .pull-sheet {
  transform: translateY(0);
}

.pull-sheet[hidden] { display: none !important; }

.pull-hint {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.22rem;
  width: 100%;
  padding: 0.3rem 1rem 0.5rem;
  border: none;
  background: linear-gradient(to top, var(--surface) 55%, rgba(244, 247, 252, 0));
  cursor: pointer;
  font: inherit;
  transition: opacity 0.2s;
}

.pull-search.is-open .pull-hint {
  opacity: 0;
  pointer-events: none;
}

.pull-hint-text {
  font-size: 0.72rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  animation: pull-nudge 2.4s ease-in-out infinite;
}

.pull-hint-text i {
  font-size: 0.65rem;
  color: var(--signal);
}

@keyframes pull-nudge {
  0%, 100% { transform: translateY(2px); opacity: 0.72; }
  50% { transform: translateY(-3px); opacity: 1; }
}

.pull-search.pull-armed .pull-hint-text {
  color: var(--signal);
}

.pull-search.pull-armed .pull-handle {
  background: var(--signal);
  width: 44px;
}

.pull-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgba(100, 116, 139, 0.45);
  flex-shrink: 0;
  transition: width 0.15s, background 0.15s;
}

.pull-edge {
  position: absolute;
  inset-inline-start: 28px;
  inset-inline-end: 0;
  bottom: 0;
  height: 32px;
  z-index: 4;
  touch-action: none;
}

.pull-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1rem 0.5rem;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--card);
  z-index: 1;
}

.pull-sheet-title {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.pull-close-x {
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pull-sheet-body {
  padding: 0.85rem 1rem 1.35rem;
}

.pull-input.search-field {
  margin-bottom: 0.65rem;
}

.pull-filter-label {
  margin: 0.15rem 0 0.4rem;
  font-size: 0.68rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.pull-sheet-body .list-filters {
  margin-bottom: 0.75rem;
}

.scr[data-scr="list"] .fab-stack,
.scr[data-scr="packages"] .fab-stack,
.scr[data-scr="staff"] .fab-stack {
  bottom: 3.35rem;
}

/* ── Search + filters (shared field) ── */
.search-field {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--card);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 0.88rem;
  margin-bottom: 0.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 1rem;
}

.search-field:focus {
  outline: 2px solid var(--signal-dim);
}

.filter-row {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  padding-bottom: 0.15rem;
}

.filter-row button {
  flex-shrink: 0;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--muted);
}

.filter-row button.is-on {
  background: var(--field);
  color: #fff;
  border-color: var(--field);
}

/* ── Dossier cards ── */
.dossier {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 0.85rem 0.85rem 0.85rem calc(0.85rem + var(--beam));
  margin-bottom: 0.65rem;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  overflow: hidden;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.dossier::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--beam);
}

.dossier.st-live::before { background: var(--live); box-shadow: 0 0 12px var(--live-glow); }
.dossier.st-off::before { background: #94a3b8; }
.dossier.st-sus::before { background: var(--amber); }
.dossier.st-exp::before { background: var(--alert); }

.dossier-hd,
.dossier-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.dossier-side {
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.28rem;
  max-width: 42%;
  text-align: right;
}

.dossier-top .status-pill {
  flex-shrink: 0;
}

.dossier-side .dossier-pkg {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.25;
}

.dossier-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.55rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}

.dossier-facts.cols-1 {
  grid-template-columns: 1fr;
}

.fact {
  min-width: 0;
}

.fact .fk {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.12rem;
}

.fact .fv {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  word-break: break-word;
}

.fact .fv.accent { color: var(--ok); }

.fact .fv.warn { color: var(--alert); }

.fact .fv.muted { color: var(--muted); font-weight: 500; }

.fact .fv .pending-tag {
  font-size: 0.62rem;
  padding: 0.05rem 0.3rem;
  vertical-align: middle;
}

.dossier-meta,
.dossier-sub {
  display: none;
}

.st-off .status-pill { background: #f1f5f9; color: var(--ink-soft); }

.dossier-bars.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.dossier-bars.duo .bar-col .meter {
  margin-bottom: 0;
}

.dossier-bars .meter.today i {
  background: var(--ok);
}

.dossier-bars:not(.duo) .meter:last-child {
  margin-bottom: 0;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
  color: #fff;
}

.st-live .avatar { background: linear-gradient(135deg, var(--live), #16a34a); box-shadow: 0 0 16px var(--live-glow); }
.st-off .avatar { background: linear-gradient(135deg, #94a3b8, #64748b); }
.st-sus .avatar { background: linear-gradient(135deg, var(--amber), #d97706); }
.st-exp .avatar { background: linear-gradient(135deg, var(--alert), #e11d48); }

.dossier-who { flex: 1; min-width: 0; text-align: left; border: none; background: none; cursor: pointer; padding: 0; font: inherit; }

.dossier-who b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.dossier-who em {
  display: block;
  font-style: normal;
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.status-pill {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.st-live .status-pill { background: var(--live-dim); color: #15803d; }
.st-off .status-pill { background: #f1f5f9; color: var(--muted); }
.st-sus .status-pill { background: rgba(245, 158, 11, 0.15); color: #b45309; }
.st-exp .status-pill { background: var(--alert-dim); color: var(--alert); }

.gear-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--signal);
  background: var(--signal-dim);
  color: var(--signal);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dossier-facts {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 0.55rem;
}

.dossier-facts .warn { color: var(--alert); font-weight: 600; }

.dossier-bars .bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.dossier-bars .bar-label span:first-child {
  flex-shrink: 0;
}

.dossier-bars .bar-label span:last-child {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.68rem;
  color: var(--ink-soft);
  text-align: right;
}

.dossier-bars .meter {
  height: 5px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.45rem;
}

.dossier-bars .meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.st-live .dossier-bars .meter i { background: linear-gradient(90deg, var(--signal), var(--live)); }

/* ── Detail tabs + hero ── */
.detail-hero {
  margin: 0 -1rem 1rem;
  padding: 1rem 1.25rem 1.25rem;
  color: #0f172a;
  border-radius: 1.15rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.58)),
    radial-gradient(420px 180px at 78% 10%, rgba(16, 185, 129, 0.14), transparent 60%),
    radial-gradient(360px 160px at 8% 90%, rgba(37, 99, 235, 0.12), transparent 55%);
  border: 1px solid rgba(15, 28, 36, 0.08);
  box-shadow: var(--shadow);
}

.phone.is-theme-dark .detail-hero {
  color: #f8fafc;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background:
    radial-gradient(ellipse 80% 60% at 30% 0%, rgba(6, 182, 212, 0.2), transparent),
    linear-gradient(165deg, var(--field) 0%, #1a2744 100%);
}

.detail-hero .uname {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.detail-hero .live-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.phone.is-theme-dark .detail-hero .live-line { color: rgba(248, 250, 252, 0.75); }

.detail-hero .live-line .dot-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 10px var(--live-glow);
  animation: blink 2s ease infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.detail-hero .meta { font-size: 0.78rem; color: var(--muted); margin-bottom: 0.65rem; }
.phone.is-theme-dark .detail-hero .meta { color: rgba(248, 250, 252, 0.5); }

.detail-hero .meter {
  height: 8px;
  background: rgba(15, 28, 36, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.35rem;
}

.phone.is-theme-dark .detail-hero .meter { background: rgba(255, 255, 255, 0.12); }

.detail-hero .meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--signal), var(--live));
}

.scr[data-scr="detail"] .detail-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.15rem 1.2rem 1.35rem;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.82), rgba(236, 245, 255, 0.55) 42%, rgba(232, 250, 244, 0.62)),
    radial-gradient(280px 160px at 92% 0%, rgba(16, 185, 129, 0.28), transparent 62%),
    radial-gradient(240px 140px at 0% 100%, rgba(37, 99, 235, 0.22), transparent 58%);
  box-shadow:
    0 18px 40px -24px rgba(15, 28, 36, 0.42),
    0 0 0 1px rgba(15, 28, 36, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.scr[data-scr="detail"] .detail-hero::before,
.scr[data-scr="detail"] .detail-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(26px);
  pointer-events: none;
  z-index: 0;
}

.scr[data-scr="detail"] .detail-hero::before {
  width: 150px;
  height: 150px;
  right: -18px;
  top: -42px;
  background: rgba(16, 185, 129, 0.32);
}

.scr[data-scr="detail"] .detail-hero::after {
  width: 130px;
  height: 130px;
  left: -28px;
  bottom: -48px;
  background: rgba(37, 99, 235, 0.26);
}

.detail-hero-grid {
  display: none;
}

.scr[data-scr="detail"] .detail-hero-grid {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(15, 28, 36, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 28, 36, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse 80% 70% at 70% 20%, black, transparent);
  opacity: 0.9;
}

.scr[data-scr="detail"] .detail-hero > *:not(.detail-hero-grid) { position: relative; z-index: 1; }

.scr[data-scr="detail"] .detail-hero .uname {
  background: linear-gradient(120deg, #0f172a 20%, #1d4ed8 70%, #047857);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.scr[data-scr="detail"] .detail-hero .live-line {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  padding: 0.28rem 0.55rem 0.28rem 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(16, 185, 129, 0.22);
  box-shadow: 0 8px 18px -14px rgba(16, 185, 129, 0.55);
}

.scr[data-scr="detail"] .detail-hero .meter {
  height: 10px;
  background: rgba(15, 28, 36, 0.07);
  box-shadow: inset 0 1px 2px rgba(15, 28, 36, 0.08);
}

.scr[data-scr="detail"] .detail-hero .meter i {
  box-shadow: 0 0 16px rgba(37, 99, 235, 0.45), 0 0 12px rgba(16, 185, 129, 0.28);
}

.scr[data-scr="detail"] .detail-hero .usage-meta {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
}

.phone.is-theme-dark .scr[data-scr="detail"] .detail-hero {
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: none;
  border-radius: 1.25rem;
  background:
    radial-gradient(ellipse 90% 70% at 80% 0%, rgba(16, 185, 129, 0.22), transparent 55%),
    radial-gradient(ellipse 70% 60% at 0% 100%, rgba(37, 99, 235, 0.28), transparent 55%),
    linear-gradient(165deg, #102038 0%, #0c1526 100%);
  box-shadow: 0 22px 40px -20px rgba(0, 0, 0, 0.55);
}

.phone.is-theme-dark .scr[data-scr="detail"] .detail-hero::before { background: rgba(16, 185, 129, 0.22); }
.phone.is-theme-dark .scr[data-scr="detail"] .detail-hero::after { background: rgba(37, 99, 235, 0.28); }
.phone.is-theme-dark .scr[data-scr="detail"] .detail-hero-grid {
  background-image:
    linear-gradient(rgba(248, 250, 252, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 250, 252, 0.06) 1px, transparent 1px);
}
.phone.is-theme-dark .scr[data-scr="detail"] .detail-hero .uname {
  background: linear-gradient(120deg, #f8fafc 10%, #93c5fd 55%, #6ee7b7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.phone.is-theme-dark .scr[data-scr="detail"] .detail-hero .live-line {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(52, 211, 153, 0.28);
  color: rgba(248, 250, 252, 0.82);
}

.tab-rail {
  flex-shrink: 0;
  padding: 0 0.85rem 0.7rem;
}

.tab-bar {
  display: flex;
  gap: 0.18rem;
  overflow-x: auto;
  padding: 0.2rem;
  margin: 0;
  border: none;
  background: var(--surface-2);
  border-radius: 0.9rem;
  -webkit-overflow-scrolling: touch;
}

.tab-bar::-webkit-scrollbar { display: none; }

.tab-bar button {
  flex: 1 0 auto;
  min-width: 4.4rem;
  padding: 0.48rem 0.62rem;
  border: none;
  border-radius: 0.72rem;
  background: transparent;
  font: inherit;
  font-size: 0.7rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.28rem;
}

.tab-bar button i {
  font-size: 0.62rem;
  opacity: 0.7;
}

.tab-bar button.is-on {
  background: var(--card);
  color: var(--ok);
  font-weight: 650;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.1);
}

.tab-bar button.is-on i { opacity: 1; color: var(--ok); }

.pane { display: none; padding-top: 0.75rem; }
.pane.is-on { display: block; }

.kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.kv-grid article {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
}

.kv-grid .k {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

.kv-grid .v {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.kv-grid .v2 {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.kv-section {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1rem 0 0.5rem;
}

.meta-note {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.class-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  font-size: 0.78rem;
}

.class-row .lab { width: 72px; flex-shrink: 0; }
.class-row .trk { flex: 1; height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.class-row .trk i { display: block; height: 100%; border-radius: 999px; }
.class-row .pct { width: 36px; text-align: right; font-family: var(--font-display); font-weight: 600; }

.log-row {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}

.log-row b { display: block; font-size: 0.85rem; margin-bottom: 0.15rem; }
.log-row span { font-size: 0.75rem; color: var(--muted); }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.5rem;
}

.legend span { display: flex; align-items: center; gap: 0.3rem; }
.legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* Sticky action bar */
.act-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  padding: 0.65rem 0.5rem 1.35rem;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  z-index: 8;
}

.act-strip button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.62rem;
  color: var(--muted);
  cursor: pointer;
  padding: 0.25rem 0.35rem;
}

.act-strip button i {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.act-strip button.hot i { background: var(--signal-dim); color: var(--signal); border-color: var(--signal); }
.act-strip button.dang i { background: var(--alert-dim); color: var(--alert); border-color: var(--alert); }

.scr[data-scr="detail"] .scroll { padding-bottom: 5.5rem; }

/* ── Actions grid ── */
.ops-header {
  margin: 0 -1rem 1rem;
  padding: 1.25rem 1.25rem 1rem;
  color: #0f172a;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.6));
  border: 1px solid rgba(15, 28, 36, 0.08);
  border-radius: 1.15rem;
}

.phone.is-theme-dark .ops-header {
  color: #f8fafc;
  background: var(--field);
  border: none;
  border-radius: 0;
}

.ops-header .ops-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: inherit;
}

.ops-header .sub-user {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.phone.is-theme-dark .ops-header .sub-user { color: rgba(248, 250, 252, 0.5); }

.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.ops-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.75rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-size: 0.68rem;
  color: var(--ink-soft);
  box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}

.ops-grid button:active { transform: scale(0.96); }

.ops-grid button i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: var(--signal-dim);
  color: var(--signal);
}

.ops-grid button.danger i { background: var(--alert-dim); color: var(--alert); }
.ops-grid button.danger { color: var(--alert); border-color: rgba(244, 63, 94, 0.2); }

/* ── Live Speed ── */
.speed-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.speed-card {
  padding: 0.85rem;
  border-radius: var(--radius);
  background: var(--field);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.speed-card .k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(248, 250, 252, 0.45);
  margin-bottom: 0.25rem;
}

.speed-card .v {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--signal);
}

.ls-chart {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.5rem;
  box-shadow: var(--shadow);
}

.ls-chart svg { width: 100%; height: auto; display: block; }

.ls-tip {
  position: absolute;
  min-width: 150px;
  padding: 0.55rem 0.65rem;
  background: var(--field);
  color: #f8fafc;
  border-radius: var(--radius-sm);
  font-size: 0.72rem;
  box-shadow: var(--shadow-lg);
  z-index: 5;
  pointer-events: none;
}

.ls-tip .tip-sec { font-weight: 700; margin-bottom: 0.35rem; color: var(--signal); }
.ls-tip .tip-row { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.15rem; }
.ls-tip .tip-row .n { font-family: var(--font-display); font-weight: 600; }

.ls-dot { cursor: pointer; transition: r 0.15s; }
.ls-dot:hover { r: 7; }

/* Subscriber Live Speed — Flutter V2 parity (auto-start session + dark tip) */
.sspeed-run {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.55rem 0 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: 14px;
  background: #f1f5f9;
  border: 1px solid rgba(15, 28, 36, 0.08);
}
.sspeed-run.is-on {
  background: #dcfce7;
  border-color: rgba(34, 197, 94, 0.35);
}
.sspeed-remain {
  flex: 1;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--muted);
}
.sspeed-run.is-on .sspeed-remain { color: #166534; }
.sspeed-toggle {
  flex: 0 0 auto;
  width: auto;
  min-width: 5.5rem;
  padding: 0.45rem 0.9rem;
  font-size: 0.82rem;
}
.ls-chart--dark {
  background: linear-gradient(150deg, #0f172a 0%, #1e293b 100%);
  border-color: rgba(255, 255, 255, 0.08);
}
.ls-tip--dark {
  background: rgba(15, 23, 42, 0.95);
  color: #f8fafc;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  min-width: 168px;
}
.ls-tip--dark .tip-sec { color: #60a5fa; }

.ping-terminal {
  background: var(--field);
  color: #a5f3fc;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  padding: 1rem;
  border-radius: var(--radius);
  white-space: pre-wrap;
}

/* ── Logs hub ── */
.gate-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  font: inherit;
  box-shadow: var(--shadow);
  transition: border-color 0.15s;
}

.gate-row:hover { border-color: var(--signal); }

.gate-row .ico {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--signal-dim);
  color: var(--signal);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.gate-row .txt { flex: 1; min-width: 0; }
.gate-row .txt b { display: block; font-size: 0.88rem; color: var(--ink); }
.gate-row .txt span { display: block; font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
.gate-row .go { color: var(--muted); font-size: 0.85rem; }

/* ── Subscriber bento ── */
.sub-aurora {
  margin: 0 -1rem 1rem;
  padding: 2rem 1.25rem 1.25rem;
  color: #0f172a;
  border-radius: 0 0 1.75rem 1.75rem;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55)),
    radial-gradient(ellipse 90% 70% at 20% 0%, rgba(16, 185, 129, 0.16), transparent),
    radial-gradient(ellipse 60% 50% at 90% 30%, rgba(37, 99, 235, 0.12), transparent);
  border: 1px solid rgba(15, 28, 36, 0.06);
  box-shadow: var(--shadow);
}

.phone.is-theme-dark .sub-aurora {
  color: #f8fafc;
  border: none;
  box-shadow: none;
  background:
    radial-gradient(ellipse 90% 70% at 20% 0%, rgba(6, 182, 212, 0.25), transparent),
    radial-gradient(ellipse 60% 50% at 90% 30%, rgba(34, 197, 94, 0.15), transparent),
    linear-gradient(180deg, var(--field) 0%, var(--field-soft) 100%);
}

.sub-aurora .name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sub-aurora .line {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

.phone.is-theme-dark .sub-aurora .line { color: rgba(248, 250, 252, 0.55); }

.sub-aurora .brand-mini img { height: 24px; filter: none; }
.phone.is-theme-dark .sub-aurora .brand-mini img { filter: brightness(0) invert(1); }

.bento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.sub-who {
  position: relative;
  z-index: 1;
  margin-top: 0.15rem;
}

.sub-who .name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.15;
  color: #0f172a;
}

.sub-who .line {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--muted);
  margin-top: 0.2rem;
}

.sub-who .exp-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28rem 0.4rem;
}

.sub-who .exp-date {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
}

.phone.is-theme-dark .sub-who .name { color: #f8fafc; }
.phone.is-theme-dark .sub-who .line { color: rgba(248, 250, 252, 0.55); }

.sub-bell,
.sub-logout {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(15, 28, 36, 0.08);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
}

.sub-logout {
  color: #b91c1c;
  border-color: rgba(185, 28, 28, 0.18);
  background: rgba(254, 226, 226, 0.7);
}

.phone.is-theme-dark .sub-bell {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
}

.phone.is-theme-dark .sub-logout {
  background: rgba(248, 113, 113, 0.16);
  border-color: rgba(248, 113, 113, 0.28);
  color: #fca5a5;
}

.scr[data-scr="shome"] .scroll { padding-top: 2.1rem; }

.bento-card {
  position: relative;
  border: none;
  border-radius: 14px;
  padding: 0.85rem;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px -16px rgba(15, 28, 36, 0.55);
  border: 1px solid rgba(15, 28, 36, 0.08);
  cursor: pointer;
  text-align: start;
  font: inherit;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  color: inherit;
}

.bento-card:active {
  transform: scale(0.96);
  background: #fff;
}

.bento-card.wide { grid-column: span 2; }

.bento-card .ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.bento-card .ico.live { background: var(--live-dim); color: var(--live); }
.bento-card .ico.signal { background: var(--signal-dim); color: var(--signal); }
.bento-card .ico.neutral { background: var(--surface-2); color: var(--ink-soft); }

.bento-card b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.15rem;
}

.bento-card b [data-count] {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
}

.bento-card span {
  font-size: 0.72rem;
  color: var(--muted);
}

.bento-card.charge {
  background: #2563eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -12px rgba(37, 99, 235, 0.7);
  border: none;
  color: #fff;
}

.bento-card.charge b,
.bento-card.charge span { color: #fff; }
.bento-card.charge span { opacity: 0.85; }
.bento-card.charge .ico { background: rgba(255, 255, 255, 0.2); color: #fff; }

.bento-card .ring-svg {
  position: absolute;
  inset-inline-end: 0.5rem;
  bottom: 0.5rem;
  width: 48px;
  height: 48px;
  opacity: 0.85;
  pointer-events: none;
}

.bento-card.half { grid-column: span 1; }

.bento-card.usage-stat {
  display: flex;
  flex-direction: column;
  min-height: 10.4rem;
  padding: 0.9rem 0.9rem 0.75rem;
}

.bento-card.usage-stat .ring-svg {
  position: relative;
  inset: auto;
  width: 52px;
  height: 52px;
  margin-top: auto;
  margin-left: auto;
  padding-top: 0.45rem;
}

/* ── Sheet overlay ── */
.sheet {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.55);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-end;
  z-index: 60;
}

.sheet.is-on { display: flex; }

.sheet .panel {
  width: 100%;
  background: var(--card);
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 1.25rem 1.25rem 2rem;
}

.sheet .panel h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

.sheet .panel p {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.sheet .row-btns {
  display: flex;
  gap: 0.65rem;
}

.sheet .row-btns .btn {
  flex: 1;
  padding: 0.75rem;
  border-radius: var(--radius-sm);
  border: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.sheet .row-btns .cancel {
  background: var(--alert-dim);
  color: var(--alert);
}

.sheet .row-btns .btn:not(.cancel) {
  background: var(--field);
  color: #fff;
}

/* ── v3.1 enrichments ── */
.inv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.inv-cell {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 28, 36, 0.08);
  border-radius: 14px;
  padding: 0.6rem 0.4rem;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-shadow: 0 10px 22px -16px rgba(15, 28, 36, 0.55);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}

.inv-cell:active {
  transform: scale(0.96);
  background: #fff;
  box-shadow: 0 4px 12px -8px rgba(15, 28, 36, 0.4);
}

.inv-cell.inv-live .n { color: #047857; }
.inv-cell.inv-exp .n { color: #b45309; }
.inv-cell.inv-warn .n { color: #b45309; }
.inv-cell.inv-dang .n { color: #b91c1c; }

.inv-cell .k {
  font-size: 0.52rem;
  line-height: 1.25;
  letter-spacing: 0.01em;
}

.inv-cell .n {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}

.inv-cell .k {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 0.15rem;
}

.presence-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}

.presence-row button {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  padding: 0.55rem 0.35rem;
  cursor: pointer;
  font: inherit;
  text-align: center;
  box-shadow: var(--shadow);
}

.presence-row button b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
}

.presence-row button span {
  font-size: 0.62rem;
  color: var(--muted);
}

.presence-row button.p-live b { color: var(--live); }
.presence-row button.p-warn b { color: var(--amber); }
.presence-row button.p-dang b { color: var(--alert); }

.license-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin-bottom: 0.75rem;
}

.license-chip .days {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ok);
  line-height: 1;
}

.license-chip .days small {
  display: block;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.license-chip .meta {
  flex: 1;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin-bottom: 0.75rem;
}

.quick-row button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.65rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
  cursor: pointer;
  font: inherit;
  font-size: 0.62rem;
  color: var(--muted);
  box-shadow: var(--shadow);
}

.quick-row button i {
  font-size: 1rem;
  color: var(--ok);
}

.list-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.list-stats span {
  text-align: center;
  font-size: 0.62rem;
  color: var(--muted);
  padding: 0.4rem 0.2rem;
  background: var(--card);
  border-radius: 999px;
  border: 1px solid var(--line);
}

.list-stats span b {
  display: block;
  font-family: var(--font-display);
  font-size: 0.88rem;
  color: var(--ink);
}

.dossier-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 0.65rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.dossier-extra em {
  font-style: normal;
  color: var(--ink-soft);
  font-weight: 600;
}

.pending-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--alert);
  background: var(--alert-dim);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-left: 0.25rem;
}

.fup-warn {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--amber);
}

.detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.5rem 0 0.65rem;
}

.detail-badges span {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid transparent;
}

.detail-badges span.warn {
  background: rgba(217, 119, 6, 0.16);
  color: var(--amber);
  border-color: rgba(217, 119, 6, 0.18);
}
.detail-badges span.live {
  background: var(--live-dim);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.22);
}
.detail-badges span.online {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
  border-color: rgba(37, 99, 235, 0.18);
}
.detail-badges span.bonus {
  background: rgba(99, 102, 241, 0.12);
  color: #4338ca;
  border-color: rgba(99, 102, 241, 0.18);
}

.phone.is-theme-dark .detail-badges span.live { color: #6ee7b7; }
.phone.is-theme-dark .detail-badges span.online { color: #93c5fd; }
.phone.is-theme-dark .detail-badges span.bonus { color: #c4b5fd; }

.kv-grid.wide { grid-template-columns: 1fr; }
.kv-grid.wide article { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.kv-grid.wide .v { text-align: right; }

/* ── Actions filmstrip (chip pills — original proto) ── */
.scr[data-scr="ops"] .ops-scroll,
.scr[data-scr="catops"] .ops-scroll {
  padding-top: 0.35rem;
  background: var(--surface);
}

.ops-top {
  justify-content: flex-end;
  gap: 0.65rem;
  padding-bottom: 0.35rem;
}

.ops-top .title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.ops-top .back.round {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}

.phone[dir="ltr"] .ops-top .back.round i { transform: scaleX(-1); }

.ops-user {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: end;
  margin: 0 0 0.25rem;
}

.scr[data-scr="ops"] .sec-label,
.scr[data-scr="catops"] .sec-label {
  text-align: end;
  margin: 0.85rem 0 0.45rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.phone[dir="ltr"] .scr[data-scr="ops"] .sec-label,
.phone[dir="ltr"] .scr[data-scr="catops"] .sec-label,
.phone[dir="ltr"] .scr[data-scr="ops"] .ops-user,
.phone[dir="ltr"] .scr[data-scr="catops"] .ops-user {
  text-align: start;
}

.ops-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
  margin-bottom: 0.15rem;
}

.phone[dir="ltr"] .ops-chips {
  justify-content: flex-start;
}

.op-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.58rem 0.9rem;
  border: none;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s, box-shadow 0.12s;
}

.op-chip:active { transform: scale(0.97); }

.op-chip i {
  font-size: 0.92rem;
  color: var(--ok);
  line-height: 1;
}

.op-chip.danger { color: var(--alert); }
.op-chip.danger i { color: var(--alert); }

/* legacy row styles — unused */
.ops-list { margin-bottom: 0.65rem; }

/* ── Consumption: daily breakdown ── */
.use-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.65rem;
}

.use-summary article {
  padding: 0.55rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.use-summary .k {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.use-summary .v {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
}

.use-days {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.use-day {
  display: grid;
  grid-template-columns: 2rem minmax(4.6rem, auto) 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.15rem 0.5rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  width: 100%;
  text-align: inherit;
  font: inherit;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.use-day:hover { border-color: var(--ok); box-shadow: var(--shadow); }
.use-day:active { transform: scale(0.995); }

.use-day .meter {
  grid-column: 1 / -1;
  height: 4px;
  margin-top: 0.15rem;
}

.use-day .ud-n {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.use-day .ud-d {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.use-day .ud-v {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: end;
}

.use-day .ud-t {
  font-size: 0.62rem;
  color: var(--muted);
}

.use-day.is-today {
  border-color: var(--ok);
  background: var(--ok-soft);
}

.use-day.is-today .ud-n { color: var(--ok); }
.use-day.warn { border-color: rgba(217, 119, 6, 0.35); }

/* ── Consumption day modal ── */
.use-modal {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
}

.use-modal[hidden] { display: none !important; }

.use-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.5);
  backdrop-filter: blur(3px);
}

.use-modal-panel {
  position: relative;
  width: 100%;
  background: var(--card);
  border-radius: 1.35rem 1.35rem 0 0;
  padding: 1rem 1.15rem 1.75rem;
  box-shadow: var(--shadow-lg);
  animation: use-modal-in 0.22s ease-out;
}

@keyframes use-modal-in {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.use-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.use-modal-head h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
}

.use-modal-x {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.use-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.use-modal-grid article {
  padding: 0.65rem 0.75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.use-modal-grid article.total {
  grid-column: 1 / -1;
  background: var(--ok-soft);
  border-color: rgba(37, 99, 235, 0.25);
}

.use-modal-grid .k {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.use-modal-grid .v {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.use-modal-grid article.total .v { color: var(--ok); font-size: 1.12rem; }

.dossier.is-swipe-hint,
.pkg-card,
.rs-card {
  transition: transform 0.15s ease-out;
}

.dossier.swipe-armed,
.pkg-card.swipe-armed,
.rs-card.swipe-armed {
  transform: translateX(var(--swipe-shift, 0));
}

.phone[dir="rtl"] .dossier.swipe-armed,
.phone[dir="rtl"] .pkg-card.swipe-armed,
.phone[dir="rtl"] .rs-card.swipe-armed { --swipe-shift: 12px; }

.phone[dir="ltr"] .dossier.swipe-armed,
.phone[dir="ltr"] .pkg-card.swipe-armed,
.phone[dir="ltr"] .rs-card.swipe-armed { --swipe-shift: -12px; }

.log-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.45rem;
  box-shadow: var(--shadow);
}
button.log-card {
  display: block;
  width: 100%;
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button.log-card:active { transform: scale(0.99); }

.log-card header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.log-card header b { font-size: 0.85rem; color: var(--ink); }
.log-card header em {
  font-style: normal;
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

.log-card .body {
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.log-card.is-hidden { display: none !important; }

.log-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}

.log-card .tags i {
  font-style: normal;
  font-size: 0.62rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
}

.gate-row .count {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ok);
  background: var(--ok-soft);
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  margin-left: auto;
  margin-right: 0.35rem;
}

.sub-panel {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(15, 28, 36, 0.08);
  border-radius: 16px;
  padding: 0.95rem 1.05rem;
  margin-bottom: 0.65rem;
  box-shadow: 0 10px 22px -16px rgba(15, 28, 36, 0.55);
}

.sub-panel h3 {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
}

.sub-hero-num {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ok);
  line-height: 1;
}

.sub-hero-num.warn { color: var(--amber); }

.sub-meter-lg {
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 0.65rem 0;
}

.sub-meter-lg i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ok), var(--live));
}

.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  margin: 0.75rem 0;
}

.mini-bars i {
  flex: 1;
  background: var(--ok-soft);
  border-radius: 3px 3px 0 0;
  min-height: 8px;
}

.mini-bars i.on { background: var(--ok); }

.charge-steps {
  counter-reset: step;
  margin: 0.75rem 0 1rem;
}

.charge-steps li {
  list-style: none;
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.55rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.charge-steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone[dir="rtl"] .charge-steps li {
  padding-left: 0;
  padding-right: 1.75rem;
}
.phone[dir="rtl"] .charge-steps li::before {
  left: auto;
  right: 0;
}

/* Charge PIN field — stays inside the card, LTR digits */
.scr[data-scr="scharge"] .field-row {
  width: 100%;
  margin-bottom: 0.85rem;
}
.scr[data-scr="scharge"] .field-row input {
  display: block;
  min-height: 52px;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-align: start;
  unicode-bidi: isolate;
}

.noti-card {
  display: flex;
  gap: 0.65rem;
  padding: 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 0.45rem;
  box-shadow: var(--shadow);
}

.noti-card .ico {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ok-soft);
  color: var(--ok);
  flex-shrink: 0;
}

.noti-card b { display: block; font-size: 0.85rem; }
.noti-card span { font-size: 0.72rem; color: var(--muted); }

.bento-card.charge {
  background: #2563eb;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 22px -12px rgba(37, 99, 235, 0.7);
}

.period-picker {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.period-picker button {
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--muted);
}

.period-picker button.is-on {
  background: var(--ok-soft);
  border-color: var(--ok);
  color: var(--ok);
  font-weight: 600;
}

/* ── List screen ── */
.scr[data-scr="list"] {
  display: none;
  flex-direction: column;
}

.scr[data-scr="list"].is-on { display: flex; }

.list-head {
  flex-shrink: 0;
  padding: 0 1rem 0.5rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  z-index: 4;
}

.list-scroll {
  padding-top: 0.65rem !important;
  padding-bottom: 5rem !important;
}

.list-filters {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.list-filters button {
  flex-shrink: 0;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--muted);
}

.list-filters button.is-on {
  background: var(--field);
  color: #fff;
  border-color: var(--field);
}

.list-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.85rem;
  display: none;
}

.list-empty.is-on { display: block; }

.dossier.is-hidden { display: none !important; }

/* ── Floating action buttons ── */
.fab-stack {
  position: absolute;
  bottom: 1.15rem;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

.fab-stack.fab-start { inset-inline-start: 1rem; }
.fab-stack.fab-end { inset-inline-end: 1rem; }

.action-fab {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ok) 0%, #1d4ed8 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}

.action-fab-add:active { transform: scale(0.96); }

.fab-mini-menu {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  min-width: 140px;
}

.fab-mini-menu button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  background: transparent;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--ink);
}

.fab-mini-menu button:hover { background: var(--surface); }

.sheet-extra { margin: 0.65rem 0 0.25rem; }
.sheet-form .field-row { margin-bottom: 0.55rem; }
.sheet-form .field-row label { font-size: 0.72rem; color: var(--muted); }
.sheet-form input {
  width: 100%;
  margin-top: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.92rem;
  background: var(--surface);
}

.head-ico-btn {
  margin-inline-start: auto;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.scr[data-scr="packages"].is-on,
.scr[data-scr="prepaid"].is-on,
.scr[data-scr="nas"].is-on,
.scr[data-scr="bandwidth"].is-on,
.scr[data-scr="bulk"].is-on,
.scr[data-scr="freezone"].is-on,
.scr[data-scr="tclasses"].is-on,
.scr[data-scr="resellers"].is-on,
.scr[data-scr="rsubs"].is-on,
.scr[data-scr="catops"].is-on,
.scr[data-scr="pkgedit"].is-on,
.scr[data-scr="fzedit"].is-on,
.scr[data-scr="tcedit"].is-on,
.scr[data-scr="rsedit"].is-on,
.scr[data-scr="staff"].is-on,
.scr[data-scr="staffedit"].is-on,
.scr[data-scr="settings"].is-on,
.scr[data-scr="mobsettings"].is-on,
.scr[data-scr="ippool"].is-on,
.scr[data-scr="iprangeedit"].is-on,
.scr[data-scr="ipasgedit"].is-on,
.scr[data-scr="qos"].is-on,
.scr[data-scr="qoslistedit"].is-on,
.scr[data-scr="qosruleedit"].is-on {
  display: flex;
  flex-direction: column;
}

.scr[data-scr="bulk"] .fab-stack { bottom: 3.55rem; }

.bulk-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  position: relative;
  padding-bottom: 2.2rem;
}

.bulk-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.68rem;
  color: var(--muted);
}

.bulk-field span { font-weight: 600; }

.bulk-field select,
.bulk-field input {
  width: 100%;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--ink);
  background: #fff;
}

.bulk-remove {
  position: absolute;
  inset-inline-end: 0.65rem;
  bottom: 0.55rem;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.bulk-action b { display: block; margin-bottom: 0.55rem; }

.cidr-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.cidr-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 600;
}

.cidr-chip button {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  font-size: 0.75rem;
}

.cidr-box { margin-top: 0.35rem; }

.cidr-add-row {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.cidr-add-row input { flex: 1; }

.cidr-add-row button {
  width: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: #fff;
  cursor: pointer;
}

.tc-swatch {
  width: 0.7rem;
  height: 1.6rem;
  border-radius: 999px;
  flex-shrink: 0;
  align-self: center;
}

.tc-other { opacity: 0.92; }

.scr[data-scr="bandwidth"] .bw-pane,
.scr[data-scr="ippool"] .bw-pane,
.scr[data-scr="qos"] .bw-pane {
  flex: 1;
  min-height: 0;
  padding-top: 0;
  flex-direction: column;
  overflow: hidden;
}

.scr[data-scr="opsLog"] .pane.is-on,
.scr[data-scr="finLog"] .pane.is-on,
.scr[data-scr="xferLog"] .pane.is-on,
.scr[data-scr="browse"] .pane.is-on {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding-top: 0;
  overflow: hidden;
}

.scr[data-scr="bandwidth"] .bw-pane.is-on,
.scr[data-scr="ippool"] .bw-pane.is-on,
.scr[data-scr="qos"] .bw-pane.is-on { display: flex; }

.scr[data-scr="ippool"].is-assign .fab-stack,
.scr[data-scr="qos"].is-ctrl .fab-stack,
.scr[data-scr="qos"].is-ctrl .pull-search { display: none !important; }

.scr[data-scr="qos"] .catalog-edit-foot {
  display: flex;
  gap: 0.45rem;
}

.scr[data-scr="qos"] .catalog-edit-foot .btn-signal { flex: 1; width: auto; }

.ipp-remain.warn { color: var(--amber); font-weight: 700; }
.qos-ctrl-pct { font-size: 0.78rem; font-weight: 700; color: var(--signal); }

.scr[data-scr="bandwidth"] .bw-pane.is-on { display: flex; }

.scr[data-scr="bandwidth"]:not(.is-auto) .pane[data-pane="auto"] .fab-stack,
.scr[data-scr="bandwidth"].is-auto .bw-save-bar { display: none !important; }

.scr[data-scr="bandwidth"]:not(.is-auto) .pull-search { bottom: 3.55rem; }

.bw-apply {
  margin: 0 0 0.75rem;
}

.bw-nas-pick {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
  margin-bottom: 0.35rem;
}

.bw-nas-pick.is-show,
.bw-nas-pick:not([hidden]) {
  display: grid;
}

.bw-nas-pick[hidden] { display: none !important; }

.bw-nas-tile {
  text-align: start;
  padding: 0.55rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.bw-nas-tile b { display: block; font-size: 0.82rem; }
.bw-nas-tile span { display: block; font-size: 0.68rem; color: var(--muted); margin-top: 0.1rem; }
.bw-nas-tile em {
  display: inline-block;
  margin-top: 0.25rem;
  font-style: normal;
  font-size: 0.62rem;
  color: var(--amber);
  background: rgba(217, 119, 6, 0.12);
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
}

.bw-nas-tile.is-on {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.06);
}
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ok);
}

.bw-range {
  width: 100%;
  margin: 0.45rem 0 0.15rem;
  accent-color: var(--ok);
}

.bw-save-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 16;
  display: flex;
  gap: 0.45rem;
  padding: 0.55rem 0.85rem calc(0.55rem + env(safe-area-inset-bottom));
  background: var(--card);
  border-top: 1px solid var(--line);
}

.bw-save-bar button {
  flex: 1;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}

.bw-reset {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.bw-save {
  border: none;
  background: var(--ok);
  color: #fff;
}

.bw-save-bar.is-dirty .bw-save { box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2); }

.bw-switch {
  width: 2.4rem;
  height: 1.35rem;
  border: none;
  border-radius: 999px;
  background: #cbd5e1;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}

.bw-switch::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  inset-inline-start: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.18s;
}

.bw-switch.is-on { background: var(--ok); }
.phone[dir="rtl"] .bw-switch.is-on::after { transform: translateX(-1.05rem); }
.phone[dir="ltr"] .bw-switch.is-on::after { transform: translateX(1.05rem); }

.pkg-head {
  flex-shrink: 0;
  padding: 0 1rem 0.65rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.pkg-sort {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  margin-bottom: 0.55rem;
  padding-bottom: 0.1rem;
}

.pkg-sort button {
  flex-shrink: 0;
  padding: 0.32rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
}

.pkg-sort button.is-on {
  border-color: var(--signal);
  background: var(--signal-dim);
  color: var(--signal);
}

.pkg-search { margin-bottom: 0; }

.pkg-scroll {
  padding: 0.65rem 1rem 6.5rem !important;
}

.pkg-select-all {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.55rem;
}

.pkg-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 0.8rem 0.85rem;
  margin-bottom: 0.55rem;
  border-inline-start: 4px solid var(--line);
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.pkg-card[data-pkg-status="active"] { border-inline-start-color: var(--live); }
.pkg-card[data-pkg-status="inactive"] { border-inline-start-color: var(--muted); opacity: 0.9; }
.pkg-card.is-hidden { display: none !important; }

.pkg-top {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.pkg-check { flex-shrink: 0; padding-top: 0.15rem; }
.pkg-identity { flex: 1; min-width: 0; }

.pkg-who {
  border: none;
  background: none;
  padding: 0;
  text-align: start;
  font: inherit;
  cursor: pointer;
  width: 100%;
}

.pkg-who b { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.pkg-addr {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  font-family: ui-monospace, monospace;
}

.pkg-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 0.22rem 0.48rem;
  border-radius: 999px;
}

.pkg-badge.live { background: rgba(16, 185, 129, 0.12); color: var(--live); }
.pkg-badge.off { background: rgba(100, 116, 139, 0.12); color: var(--muted); }

.pkg-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  font-size: 0.72rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.pkg-meta-row i { color: var(--muted); margin-inline-end: 0.2rem; font-size: 0.65rem; }

.pkg-net-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.pkg-reseller-chip {
  border: none;
  background: rgba(37, 99, 235, 0.08);
  color: var(--ok);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
}

.pkg-reseller-chip.is-specific { background: rgba(217, 119, 6, 0.1); color: var(--amber); }

.pkg-type {
  font-size: 0.65rem;
  color: var(--muted);
}

.pkg-subs {
  margin-inline-start: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--signal);
}

.pkg-subs i { margin-inline-end: 0.2rem; font-size: 0.65rem; }

.pkg-gear {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  flex-shrink: 0;
}

.pkg-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.pkg-foot .chip {
  font-size: 0.62rem;
  padding: 0.18rem 0.42rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: var(--signal);
}

.pkg-foot .chip.warn { background: rgba(217, 119, 6, 0.1); color: var(--amber); }

.lazy-more {
  text-align: center;
  padding: 0.75rem 1rem 1.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.lazy-more[hidden] { display: none !important; }

.is-lazy-hold { display: none !important; }

.scr:not(.is-selecting) .card-check,
.scr:not(.is-selecting) .pkg-check,
.scr:not(.is-selecting) .pkg-select-all {
  display: none;
}

.scr.is-selecting .pull-search > .pull-hint,
.scr.is-selecting .pull-search > .pull-edge {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scr.is-selecting .fab-stack {
  opacity: 0;
  pointer-events: none;
}

.card-check {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  padding-top: 0.2rem;
}

.dossier.is-selected,
.pkg-card.is-selected {
  box-shadow: 0 0 0 2px var(--ok);
}

.bulk-bar,
.pkg-bulk-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  background: var(--field);
  color: #fff;
  font-size: 0.78rem;
}

.pkg-bulk-bar[hidden],
.bulk-bar[hidden] { display: none !important; }

.pkg-bulk-actions { display: flex; gap: 0.4rem; }

.pkg-bulk-actions button {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
}

.pkg-bulk-actions button.dang { color: #fecaca; border-color: rgba(244, 63, 94, 0.35); }

.pkg-ctx {
  position: absolute;
  z-index: 46;
  inset-inline-end: 1rem;
  top: 42%;
  min-width: 168px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 0.35rem;
}

.pkg-ctx[hidden] { display: none !important; }

.pkg-ctx-head {
  padding: 0.45rem 0.55rem 0.35rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.25rem;
  font-size: 0.72rem;
}

.pkg-ctx-head .k { display: block; color: var(--muted); font-size: 0.62rem; }
.pkg-ctx-head .v { font-weight: 600; }

.pkg-ctx button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 0.55rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  text-align: start;
  cursor: pointer;
  border-radius: 0.4rem;
}

.pkg-ctx button:hover { background: var(--surface); }
.pkg-ctx button.dang { color: var(--alert); }

.rule-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  margin-bottom: 0.45rem;
}

.rule-row b { display: block; font-size: 0.85rem; }
.rule-row span { font-size: 0.72rem; color: var(--muted); }
.rule-ops { margin-inline-start: auto; display: flex; gap: 0.35rem; }
.rule-ops button {
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line);
  border-radius: 0.4rem;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.pkg-access-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.pkg-access-tabs button {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

.pkg-access-tabs button.is-on {
  border-color: var(--ok);
  background: rgba(37, 99, 235, 0.08);
  color: var(--ok);
}

.list-scroll { padding-bottom: 5.5rem !important; }

.ops-top .page-title-row { flex: 1; }
.ops-top .page-title-row .title { font-size: 1.05rem; }

.page-title-row.on-dark .title { color: #fff; }
.page-ico.on-dark { background: rgba(255, 255, 255, 0.12); color: #fff; }
.field-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0 0 0.5rem;
  margin: 0;
  width: 100%;
}
.field-top-end {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.field-top .clock {
  font-size: 0.68rem;
  font-weight: 750;
  color: var(--muted);
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 28, 36, 0.06);
}

.pkg-sheet {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: flex-end;
}

.pkg-sheet.is-on {
  display: flex;
}

.pkg-sheet-back {
  position: absolute;
  inset: 0;
  background: rgba(11, 18, 32, 0.45);
}

.pkg-sheet-panel {
  position: relative;
  width: 100%;
  max-height: 88%;
  background: var(--surface);
  border-radius: 1.1rem 1.1rem 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pkg-sheet-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem 0.35rem;
}

.nas-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.65rem;
}

.nas-actions button {
  flex: 1;
  padding: 0.42rem 0.55rem;
  border-radius: 0.65rem;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--ink);
}

.nas-actions button.is-busy { opacity: 0.55; }

.nas-actions button.dang {
  color: var(--alert);
  border-color: rgba(244, 63, 94, 0.28);
}

.nas-card.is-off { opacity: 0.72; }

.pp-pin {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 0.92rem;
}

.pkg-sheet-body {
  overflow-y: auto;
  padding: 0.5rem 1rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.pkg-access-mode {
  padding: 0.85rem;
  border-radius: var(--radius-sm);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.pkg-access-mode b {
  display: block;
  margin-bottom: 0.2rem;
}

.pkg-access-mode span {
  font-size: 0.75rem;
  color: var(--muted);
}

.ops-top .page-title-row {
  flex: 1;
}

.ops-top .page-title-row .title {
  font-size: 1.05rem;
}

/* ── Resellers List cards ── */
.rs-tree-group {
  margin-bottom: 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.rs-tree-group .rs-parent {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.rs-tree-children {
  background: linear-gradient(180deg, #f4f7fc 0%, #eef3fa 100%);
  border-top: 1px solid var(--line);
  padding: 0.45rem 0.55rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rs-tree-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  padding: 0.15rem 0.25rem 0.35rem;
}

.rs-tree-head i { color: var(--signal); }

.rs-card.rs-leaf {
  margin: 0;
  padding: 0.55rem 0.65rem;
  box-shadow: none;
  border: 1px solid rgba(37, 99, 235, 0.12);
  background: #fff;
  border-radius: var(--radius-sm);
}

.rs-card.rs-leaf .pkg-top { align-items: center; }
.rs-card.rs-leaf .pkg-meta-row { display: none; }
.rs-card.rs-leaf .pkg-who code.pkg-addr { font-size: 0.66rem; }

.rs-card.rs-standalone { margin-bottom: 0.65rem; }

.rs-wallet {
  font-variant-numeric: tabular-nums;
}

.rs-card .pkg-who code.pkg-addr {
  color: var(--muted);
  font-size: 0.68rem;
}

.rs-card.is-hidden { display: none !important; }

.rs-tree-group.is-hidden { display: none !important; }

.scr.ctx-on .ctx-backdrop {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 44;
  background: rgba(11, 18, 32, 0.35);
}

.ctx-backdrop[hidden] { display: none !important; }

.scr .pkg-ctx.ctx-rail {
  position: absolute;
  z-index: 48;
  top: 0;
  bottom: 0;
  width: min(78%, 270px);
  max-width: 270px;
  min-width: 0;
  border-radius: 0;
  padding-bottom: 0.65rem;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

[dir="rtl"] .scr .pkg-ctx.ctx-rail {
  inset-inline-start: 0;
  inset-inline-end: auto;
  border-inline-end: 1px solid var(--line);
}

[dir="ltr"] .scr .pkg-ctx.ctx-rail {
  inset-inline-end: 0;
  inset-inline-start: auto;
  border-inline-start: 1px solid var(--line);
}

.pkg-ctx.ctx-rail .ctx-dismiss {
  margin-top: 0.35rem;
  justify-content: center;
  color: var(--muted);
  font-weight: 600;
}

.scr[data-scr="rsubs"] {
  display: none;
  flex-direction: column;
}

.scr[data-scr="rsubs"].is-on { display: flex; }

.scr[data-scr="rsubs"] [data-rsubs-scroll] {
  padding-top: 0.65rem !important;
  padding-bottom: 5rem !important;
}

.scr[data-scr="resellers"] [data-rs-scroll] {
  padding-bottom: 5rem !important;
}

.rs-card.is-selected {
  box-shadow: 0 0 0 2px var(--ok);
}

/* ── Catalog full-screen edit (detail parity) ── */
.scr[data-scr="pkgedit"] .scroll,
.scr[data-scr="fzedit"] .scroll,
.scr[data-scr="tcedit"] .scroll,
.scr[data-scr="rsedit"] .scroll {
  padding-bottom: 5.5rem;
}

.catalog-edit-hero {
  margin: 0 0 0.75rem;
}

.catalog-edit-foot {
  flex-shrink: 0;
  padding: 0.65rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--card);
}

.catalog-edit-foot .btn-signal { width: 100%; }

.scr[data-scr="pkgedit"] .pkg-edit-only { display: none; }

.scr[data-scr="pkgedit"].is-edit .pkg-view-only,
.scr[data-scr="pkgedit"].is-add .pkg-view-only { display: none; }

.scr[data-scr="pkgedit"].is-edit .pkg-edit-only,
.scr[data-scr="pkgedit"].is-add .pkg-edit-only { display: block; }

/* ── Reseller edit (legacy sheet styles reused in rsedit scr) ── */

.rs-postpaid-block {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.rs-postpaid-toggle {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 0.45rem;
}

.rs-credit-row label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.rs-credit-row input {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
}

.rs-quick-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.65rem;
}

.rs-price-stack {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding-bottom: 0.5rem;
}

.rs-price-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 0.7rem 0.75rem 0.55rem;
}

.rs-price-card.is-off,
.rs-price-card:has(.rs-sell-toggle input:not(:checked)) {
  opacity: 0.58;
}

.rs-price-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.55rem;
}

.rs-price-id {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  min-width: 0;
}

.rs-price-id b {
  font-size: 0.92rem;
  line-height: 1.2;
}

.rs-floor-chip {
  font-size: 0.62rem;
  color: var(--muted);
  background: rgba(15, 23, 42, 0.05);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}

.rs-sell-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--ink);
}

.rs-cost-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  background: rgba(37, 99, 235, 0.06);
  border-radius: 0.75rem;
}

.rs-cost-hero .k {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rs-cost-input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-align: start;
  font-size: 0.88rem !important;
  font-weight: 700;
  padding: 0.38rem 0.5rem;
}

.rs-markup {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--ok);
  white-space: nowrap;
}

.rs-markup.is-even { color: var(--muted); font-weight: 600; }

.rs-extras {
  margin-top: 0.4rem;
}

.rs-extras summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--signal);
  padding: 0.35rem 0.1rem;
}

.rs-extras summary::-webkit-details-marker { display: none; }

.rs-extras summary::after {
  content: " ▾";
  font-size: 0.7rem;
}

.rs-extras[open] summary::after { content: " ▴"; }

.rs-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.5rem;
  padding: 0.15rem 0 0.35rem;
}

.rs-extra-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.rs-extra-grid .rs-pkg-input { width: 100%; min-width: 0; }

.rs-pkg-input {
  width: 4.6rem;
  min-width: 4.4rem;
  padding: 0.32rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 650;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: #fff;
}

.rs-nas-mode { margin-bottom: 0.35rem; }

.rs-nas-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}

.rs-nas-pick .bw-nas-tile.is-on {
  border-color: var(--ok);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
  background: rgba(37, 99, 235, 0.06);
}

.rs-perm-group {
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.65rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.rs-perm-head {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.rs-perm-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  padding: 0.28rem 0;
  cursor: pointer;
}

.scr[data-scr="staffedit"].is-manager [data-staff-perms-tab],
.scr[data-scr="staffedit"].is-manager [data-pane="perms"] {
  display: none !important;
}

.set-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.set-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.set-tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.7rem;
}

.scr[data-scr="settings"] .set-tile .list-filters {
  flex-wrap: wrap;
  overflow: visible;
  margin-bottom: 0.45rem;
}

.scr[data-scr="settings"] .set-tile .list-filters button {
  white-space: nowrap;
}

.set-tile .k {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}

.set-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}

.set-tile-top .k { margin-bottom: 0; }

.set-tile input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 0.55rem;
  font: inherit;
  font-size: 0.78rem;
}

.set-tile .list-filters {
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.set-toggle {
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(15, 23, 42, 0.08);
  color: var(--muted);
  cursor: pointer;
}

.set-toggle.is-on {
  background: rgba(34, 197, 94, 0.16);
  color: var(--live);
}

.scr[data-scr="settings"] .scroll,
.scr[data-scr="mobsettings"] .scroll,
.scr[data-scr="staffedit"] .scroll {
  padding-bottom: 5.5rem;
}

.scr[data-scr="mobsettings"] textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 0.65rem;
  font: inherit;
  resize: vertical;
}

/* ═══════════════════════════════════════════════════════════════
   SUBSCRIBER STORY SEQUENCE + LAUNCHER HOME  (sf112)
   ═══════════════════════════════════════════════════════════════ */

/* ── Story overlay ─────────────────────────────────────────────── */
.sub-story,
.sub-launcher {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.sub-launcher {
  background: linear-gradient(180deg, #e0f2fe 0%, #f8fafc 42%);
}

.sub-story[hidden],
.sub-launcher[hidden] { display: none !important; }

.sub-story {
  z-index: 20;
  background: linear-gradient(160deg, #0d1b3e 0%, #0a1428 58%, #10193a 100%);
  color: #f1f5f9;
  padding: 1rem 1.5rem 2rem;
}

/* progress line + skip row */
.story-topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}

.story-progress-track {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(248, 250, 252, 0.18);
  overflow: hidden;
}

.story-progress-bar {
  height: 100%;
  width: 0%;
  background: rgba(248, 250, 252, 0.7);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.story-skip {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(248, 250, 252, 0.5);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  border-radius: 6px;
  transition: color 0.15s;
}
.story-skip:hover { color: rgba(248, 250, 252, 0.85); }

/* ── Beat base ── */
.story-beat {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.5rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.story-beat.is-active {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* Beat 0: Welcome (Android Hi energy) */
.beat-hi {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: rgba(248, 250, 252, 0.55);
  margin: 0 0 0.1rem;
  line-height: 1.1;
}

.beat-name {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 3.8rem;
  font-weight: 800;
  color: #f1f5f9;
  margin: 0;
  line-height: 1.1;
}

/* Beat 1: Package */
.beat-pkg {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 0.6rem;
  line-height: 1.2;
}

.beat-meta {
  font-size: 0.88rem;
  color: rgba(248, 250, 252, 0.5);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem 0.35rem;
}

.beat-expdate {
  font-variant-numeric: tabular-nums;
  unicode-bidi: isolate;
  color: rgba(248, 250, 252, 0.75);
}

.beat-sep { opacity: 0.35; }

/* Beats 2–3: Checking */
.beat-check {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: rgba(248, 250, 252, 0.45);
  margin: 0 0 1.5rem;
}

.beat-scan-line {
  width: 130px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.9) 50%, transparent 100%);
  margin: 0 auto 1.5rem;
  animation: sScanPulse 1.1s ease-in-out infinite;
  transition: opacity 0.3s ease;
}

.story-beat.is-revealed .beat-scan-line { opacity: 0; }

@keyframes sScanPulse {
  0%, 100% { transform: scaleX(0.45); opacity: 0.35; }
  50% { transform: scaleX(1.15); opacity: 1; }
}

.beat-result {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.36, 0.64, 1);
}

.story-beat.is-revealed .beat-result {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.beat-result--ok  { color: #34d399; }
.beat-result--err { color: #fb7185; }

/* Beats 4–5: Usage */
.beat-usage-lbl {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(248, 250, 252, 0.45);
  margin: 0 0 0.55rem;
}

.beat-usage-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  color: #f1f5f9;
  margin: 0 0 1.1rem;
  line-height: 1.2;
}

.beat-usage-track {
  width: 75%;
  height: 6px;
  border-radius: 3px;
  background: rgba(248, 250, 252, 0.15);
  overflow: hidden;
}

.beat-usage-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #2563eb 0%, #34d399 100%);
}

/* unlimited variant: hide track, show ∞ */
.beat-unlimited {
  display: none;
  font-family: var(--font-display);
  font-size: 4.5rem;
  font-weight: 200;
  color: rgba(248, 250, 252, 0.65);
  margin: 0;
  line-height: 1;
}

.story-beat.is-unlimited .beat-usage-track { display: none; }
.story-beat.is-unlimited .beat-unlimited { display: block; }

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  .story-beat,
  .beat-result { transition-duration: 0.1s; }
  .beat-scan-line { animation: none; opacity: 0.5; }
  .story-progress-bar { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LAUNCHER HOME  (sf115) — identity glass · dual rings · glass orbs
   Deleted in sf115: pill row, pie SVGs, linear progress bars,
   pastel square tiles, flat dock button.
   ═══════════════════════════════════════════════════════════════ */

/* Override shome status rule — launcher has its own */
.scr[data-scr="shome"] .lnch-status-bar {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  z-index: 5;
  pointer-events: none;
}

.phone.is-theme-dark .scr[data-scr="shome"] .lnch-status-bar {
  color: rgba(248, 250, 252, 0.8);
}

/* Greeting sits above the identity card (no top bar) */

/* ── Body (flex column, fills between status and dock) ── */
.lnch-body {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2.35rem 1rem 0.9rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}

/* ── Identity: big name with breathing glow + ONE glass identity card ── */
.lnch-identity {
  flex-shrink: 0;
  margin-bottom: 0.55rem;
  display: flex;
  flex-direction: column;
}

.lnch-top-row {
  position: relative;
  display: block;
  min-height: 42px;
  margin-bottom: 0.55rem;
  padding-top: 0.4rem;
}

.lnch-greet-col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2.65rem;
}

.lnch-top-ico {
  position: absolute;
  top: 0;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 8px 22px -16px rgba(15, 28, 36, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lnch-top-ico--noti { inset-inline-start: 0; color: #e11d48; }
.lnch-top-ico--logout { inset-inline-end: 0; color: #e11d48; }

.lnch-top-ico:active { transform: scale(0.94); }

.lnch-top-ico .lnch-noti-dot {
  top: -5px;
  inset-inline-end: -5px;
}

.lnch-id-card ~ .lnch-welcome { display: none !important; }

/* Top-bar removed — greeting lives above the identity card */

.lnch-welcome {
  margin: 0 0.15rem 0.22rem;
  text-align: center;
  font-family: Cairo, Manrope, sans-serif;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

/* Same scan beam as the post-login story checks */
.lnch-greet-scan {
  display: block;
  width: 130px;
  height: 2px;
  border-radius: 2px;
  margin: 0 auto 0;
  background: linear-gradient(90deg, transparent 0%, rgba(37, 99, 235, 0.95) 50%, transparent 100%);
  box-shadow: 0 0 10px rgba(37, 99, 235, 0.55);
  animation: sScanPulse 1.1s ease-in-out infinite;
}

.lnch-welcome b {
  font-weight: 750;
  color: var(--ink);
  margin-inline: 0.2rem;
}

/* Identity card — glass, two rows, no chip dump */
.lnch-id-card {
  border-radius: 20px;
  padding: 0.7rem 0.9rem 0.62rem;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px -18px rgba(15, 28, 36, 0.5);
}

.phone.is-theme-dark .lnch-id-card {
  background: linear-gradient(150deg, rgba(30, 45, 75, 0.62) 0%, rgba(12, 21, 38, 0.5) 100%);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.85);
}

.lnch-id-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.lnch-id-row--bottom {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(15, 28, 36, 0.08);
}

.phone.is-theme-dark .lnch-id-row--bottom { border-top-color: rgba(148, 163, 184, 0.16); }

.lnch-id-pkg {
  font-family: var(--font-display);
  font-size: 1.16rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.phone.is-theme-dark .lnch-id-pkg { color: #f1f5f9; }

.lnch-sub-state {
  flex-shrink: 0;
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: #059669;
}

.phone.is-theme-dark .lnch-sub-state { color: #34d399; }

/* Live status = pulsing orb + typography (no badge chrome) */
.lnch-live {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  flex-shrink: 0;
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.76rem;
  line-height: 1;
}

.lnch-orb-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
  animation: lnchOrbPulse 2s ease-out infinite;
  flex-shrink: 0;
}

@keyframes lnchOrbPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55), 0 0 6px rgba(16, 185, 129, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0), 0 0 10px rgba(16, 185, 129, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0), 0 0 6px rgba(16, 185, 129, 0.7); }
}

.lnch-live-on {
  font-weight: 700;
  color: #059669;
}

.phone.is-theme-dark .lnch-live-on { color: #34d399; }

.lnch-live-dot { color: var(--muted); opacity: 0.45; }

.lnch-live-quiet {
  font-weight: 500;
  color: var(--muted);
  opacity: 0.8;
}

/* LTR date island — never mixed with the Arabic sentence */
.lnch-date {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  unicode-bidi: isolate;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.lnch-date b { font-weight: 700; }

.lnch-date em {
  font-style: normal;
  font-weight: 500;
  font-family: Cairo, Manrope, sans-serif;
  color: var(--muted);
}

.phone.is-theme-dark .lnch-date { color: #cbd5e1; }

/* Days remaining: ONE sentence, single direction */
.lnch-expires {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: #b45309;
  white-space: nowrap;
}

.phone.is-theme-dark .lnch-expires { color: #fbbf24; }

/* ── Usage: premium dual gauges (full reference look) ── */
.lnch-rings {
  flex: 0 1 auto;
  min-height: 0;
  margin-top: 0;
  display: flex;
  align-items: stretch;
  gap: 0.55rem;
}

.lnch-ring-card {
  --orbit: #2563eb;
  --orbit-soft: rgba(37, 99, 235, 0.2);
  --pulse: #10b981;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.85rem 0.5rem 0.7rem;
  border-radius: 26px;
  overflow: visible;
  isolation: isolate;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px -18px rgba(15, 28, 36, 0.5);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s;
}

.lnch-ring-card--month {
  --orbit: #7c3aed;
  --orbit-soft: rgba(124, 58, 237, 0.2);
  --pulse: #a78bfa;
}

.lnch-ring-card:active { transform: scale(0.965); }

.lnch-ring-card:hover {
  box-shadow: 0 18px 40px -20px rgba(15, 28, 36, 0.6);
}

.phone.is-theme-dark .lnch-ring-card {
  background: linear-gradient(150deg, rgba(30, 45, 75, 0.62) 0%, rgba(12, 21, 38, 0.5) 100%);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow: 0 12px 34px -18px rgba(0, 0, 0, 0.85);
}

.lnch-ring-lbl {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.phone.is-theme-dark .lnch-ring-lbl { color: rgba(226, 232, 240, 0.55); }

.lnch-ring-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 168px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  z-index: 1;
}

/* Same motion language as manager `.pulse-ring` / `.dash-orbit` */
.lnch-pulse-ring {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  border: 2px solid var(--pulse);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transform-origin: center center;
}

.sub-launcher.is-alive .lnch-pulse-ring {
  animation: lnchPulseRing 2.5s ease-out infinite;
}

@keyframes lnchPulseRing {
  0%   { transform: scale(0.88); opacity: 0.55; }
  100% { transform: scale(1.14); opacity: 0; }
}

.lnch-dash-orbit {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px dashed var(--orbit-soft);
  pointer-events: none;
  z-index: 1;
}

.sub-launcher.is-alive .lnch-dash-orbit {
  animation: dashSpin 28s linear infinite;
}

.lnch-dash-orbit i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orbit);
  box-shadow: 0 0 0 3px var(--orbit-soft);
}

.lnch-dash-orbit i:nth-child(1) {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.lnch-dash-orbit i:nth-child(2) { right: 6%; top: 62%; }
.lnch-dash-orbit i:nth-child(3) {
  left: 8%;
  top: 70%;
  background: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.2);
}

.lnch-ring-card--month .lnch-dash-orbit i:nth-child(1) {
  background: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.22);
}
.lnch-ring-card--month .lnch-dash-orbit i:nth-child(3) {
  background: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.lnch-gauge {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.lnch-gauge-bg {
  fill: none;
  stroke: rgba(148, 163, 184, 0.22);
  stroke-width: 7.5;
}

.phone.is-theme-dark .lnch-gauge-bg { stroke: rgba(226, 232, 240, 0.12); }

/* Stroke gauge: circumference of r=52 → 2πr ≈ 326.73 */
.lnch-gauge-arc {
  --circ: 326.73;
  fill: none;
  stroke-width: 7.5;
  stroke-linecap: round;
  stroke-dasharray: var(--circ);
  stroke-dashoffset: var(--circ);
}

.sub-launcher.is-alive .lnch-gauge-arc {
  animation: lnchArcDraw 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@keyframes lnchArcDraw {
  from { stroke-dashoffset: var(--circ); }
  to   { stroke-dashoffset: calc(var(--circ) - (var(--circ) * var(--pct) / 100)); }
}

/* Numbers live inside the ring */
.lnch-ring-core {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.06rem;
  pointer-events: none;
}

.lnch-ring-num {
  font-family: var(--font-display);
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0f172a;
  font-variant-numeric: tabular-nums;
}

.phone.is-theme-dark .lnch-ring-num { color: #f8fafc; }

.lnch-ring-den {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.lnch-ring-pct {
  margin-top: 0.12rem;
  font-family: var(--font-display);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #2563eb;
  font-variant-numeric: tabular-nums;
}

.lnch-ring-card--month .lnch-ring-pct { color: #7c3aed; }

.phone.is-theme-dark .lnch-ring-pct { color: #93c5fd; }
.phone.is-theme-dark .lnch-ring-card--month .lnch-ring-pct { color: #c4b5fd; }

.lnch-ring-inf {
  display: none;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 200;
  line-height: 1;
  color: var(--ink);
  opacity: 0.75;
}

/* Unlimited: open ring + ∞, no numbers, no second visualisation */
.lnch-ring-card.is-unlimited .lnch-ring-num,
.lnch-ring-card.is-unlimited .lnch-ring-den,
.lnch-ring-card.is-unlimited .lnch-ring-pct { display: none; }
.lnch-ring-card.is-unlimited .lnch-ring-inf { display: block; }
.lnch-ring-card.is-unlimited .lnch-gauge-arc { --pct: 78; stroke: #34d399; }

.lnch-ring-foot {
  flex-shrink: 0;
  margin-top: auto;
  padding: 0 0.15rem;
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

/* ── Shortcuts: 2×2 square glass cards under the rings ── */
.lnch-nav {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto;
  justify-items: stretch;
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 0;
  margin-bottom: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.lnch-nav-btn {
  --nav-ico: #2563eb;
  position: relative;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  aspect-ratio: 1 / 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 0.55rem 0.4rem;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
  border: 1px solid rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 10px 30px -18px rgba(15, 28, 36, 0.5);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.15s;
}
.lnch-nav-btn:active {
  background: rgba(255, 255, 255, 0.92);
}

.lnch-nav-btn:active { transform: scale(0.97); }

.lnch-nav-btn--plan   { --nav-ico: #2563eb; }
.lnch-nav-btn--charge { --nav-ico: #2563eb; }
.lnch-nav-btn--router {
  --nav-ico: #059669;
  gap: 0.2rem;
}
.lnch-nav-btn--speed  { --nav-ico: #d97706; }

.lnch-nav-btn.is-static {
  cursor: default;
}
.lnch-nav-btn.is-static:active {
  transform: none;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.58) 100%);
}

.lnch-nav-btn.is-offline { --nav-ico: #94a3b8; }

.lnch-line-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  max-width: 100%;
}

.lnch-nav-btn.is-offline .lnch-orb-live {
  background: #94a3b8;
  animation-name: lnchOrbPulseOff;
}

@keyframes lnchOrbPulseOff {
  0%   { box-shadow: 0 0 0 0 rgba(148, 163, 184, 0.45), 0 0 5px rgba(148, 163, 184, 0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(148, 163, 184, 0), 0 0 8px rgba(148, 163, 184, 0.3); }
  100% { box-shadow: 0 0 0 0 rgba(148, 163, 184, 0), 0 0 5px rgba(148, 163, 184, 0.5); }
}

.lnch-line-state {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.15;
  color: #059669;
}

.lnch-nav-btn.is-offline .lnch-line-state { color: #64748b; }

.lnch-line-since {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
}

.lnch-nav-ico {
  position: relative;
  display: flex;
  width: 32px;
  height: 32px;
  color: var(--nav-ico);
}

.lnch-nav-lbl {
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  pointer-events: none;
}

.lnch-noti-dot {
  position: absolute;
  top: -6px;
  inset-inline-end: -10px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  pointer-events: none;
  z-index: 2;
  transform: scale(0);
}

.sub-launcher.is-alive .lnch-noti-dot {
  animation:
    lnchBadgeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both,
    lnchBadgeBeat 2.6s ease-in-out 1.4s infinite;
}

@keyframes lnchBadgeIn {
  0%   { transform: scale(0) rotate(-25deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes lnchBadgeBeat {
  0%, 82%, 100% { transform: scale(1); }
  88%           { transform: scale(1.22); }
  94%           { transform: scale(0.96); }
}

/* ── Dock: luminous Charge PIN CTA ── */
.lnch-dock {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  gap: 0.55rem;
  padding: 0.65rem 1rem 0.95rem;
}

.lnch-cta,
.lnch-logout {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 48px;
  padding: 0 0.7rem;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  font-family: Cairo, Manrope, sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.16s;
}

.lnch-cta {
  border: none;
  background: #2563eb;
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(37, 99, 235, 0.7);
}

.lnch-logout {
  border: 1.5px solid #e11d48;
  background: rgba(255, 255, 255, 0.72);
  color: #e11d48;
  box-shadow: none;
}

.lnch-logout svg {
  color: #e11d48;
  flex-shrink: 0;
}

.lnch-cta:active,
.lnch-logout:active { transform: scale(0.975); }

/* slow shimmer sweep */
.lnch-cta-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.42) 50%, transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  animation: lnchShimmer 4.2s ease-in-out infinite;
}

@keyframes lnchShimmer {
  0%, 62%  { transform: translateX(0) skewX(-18deg); }
  100%     { transform: translateX(360%) skewX(-18deg); }
}

/* ── Reveal choreography: staggered rise when the launcher wakes up ── */
.sub-launcher .lnch-rise {
  opacity: 0;
  transform: translateY(16px);
}

.sub-launcher.is-alive .lnch-rise {
  animation: lnchRise 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--rise, 1) * 75ms);
}

@keyframes lnchRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reduce motion: kill loops, keep layout and final states ── */
@media (prefers-reduced-motion: reduce) {
  .lnch-orb-live,
  .lnch-cta-shine { animation: none !important; }

  .lnch-cta-shine { opacity: 0; }
  .lnch-orb-live { box-shadow: 0 0 6px rgba(16, 185, 129, 0.7); }

  .sub-launcher .lnch-rise { opacity: 1; transform: none; }
  .sub-launcher.is-alive .lnch-rise { animation: none; }

  .sub-launcher.is-alive .lnch-gauge-arc {
    animation: none;
    stroke-dashoffset: calc(var(--circ) - (var(--circ) * var(--pct) / 100));
  }
  .sub-launcher.is-alive .lnch-pulse-ring,
  .sub-launcher.is-alive .lnch-dash-orbit {
    animation: none !important;
  }
  .lnch-pulse-ring { opacity: 0; }
  .lnch-dash-orbit { transform: none; }

  .lnch-noti-dot { transform: scale(1); }
  .sub-launcher.is-alive .lnch-noti-dot { animation: none; transform: scale(1); }
}

/* story overlay in dark theme gets the same dark BG (always dark) */
.phone.is-theme-dark .sub-story {
  background: linear-gradient(160deg, #070f24 0%, #060d1e 58%, #090f22 100%);
}