/* The chosen look (2026-11-02): single-column «app» layout with a floating dock, neon usage bars, ticket plan picker,
   glowing primary buttons. Rules keep their :root[data-…] scopes (set as constants by theme-boot.js) so the cascade
   against app.css and the daylight palette is the one reviewed in the preview. Loaded last. */

:root[data-layout="app"] { --radius: 22px; --radius-sm: 16px; --radius-btn: 16px; }
:root[data-layout="app"] .sidebar, :root[data-layout="app"] .page-title { display: none; }
:root[data-layout="app"] .brand-mobile { display: flex; }
:root[data-layout="app"] .topbar { padding-inline: max(16px, calc((100% - 640px) / 2 + 16px)); }
:root[data-layout="app"] .view { max-width: 640px; padding: 18px 16px calc(var(--nav-h) + 50px + env(safe-area-inset-bottom)); }
:root[data-layout="app"] .bottom-nav { display: grid; left: 50%; right: auto; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); height: var(--nav-h);
  bottom: calc(12px + env(safe-area-inset-bottom)); padding: 6px; border-radius: 24px; border: 1px solid var(--line-2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55); }
:root[data-layout="app"] .bottom-nav .bn-buy span.bn-fab { border-radius: 50%; }
:root[data-layout="app"] .toast { bottom: calc(var(--nav-h) + 30px + env(safe-area-inset-bottom)); }
:root[data-layout="app"] .btn { height: 50px; }
:root[data-layout="app"] .btn-sm { height: 38px; }
:root[data-layout="app"] .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:root[data-layout="app"] .plans { grid-template-columns: 1fr; }
:root[data-layout="app"] .tool-grid { grid-template-columns: 1fr; gap: 0; overflow: hidden; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); }
:root[data-layout="app"] .tool { min-height: 62px; border: 0; border-radius: 0; background: none; }
:root[data-layout="app"] .tool + .tool { border-top: 1px solid var(--line); }
:root[data-layout="app"] .tool:hover { background: var(--panel-2); }
:root[data-layout="app"] .actions { grid-template-columns: 1fr; }
:root[data-layout="app"] .action { flex-direction: row; align-items: center; }

.app-hero { padding: 22px; }
.app-hero .amount { margin-top: 4px; font-size: clamp(34px, 8vw, 42px); font-weight: var(--w-head); letter-spacing: -.5px; line-height: 1.25; }
.app-hero .amount small { font-size: 15px; font-weight: 600; color: var(--muted); margin-inline-start: 6px; letter-spacing: 0; }
.app-hero-link { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.app-hero-link svg.i { width: 16px; height: 16px; }
.shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.shortcut { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; text-align: center; line-height: 1.35; }
.sc-ic { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--brand-2);
  box-shadow: var(--shadow-card); transition: transform .2s; }
.sc-ic svg.i { width: 24px; height: 24px; }
.shortcut:first-child .sc-ic { background: var(--brand-grad); color: var(--on-brand); border-color: transparent; box-shadow: var(--brand-glow); }
.shortcut:hover .sc-ic { transform: translateY(-3px); }
.carousel { display: flex; gap: 10px; margin-inline: -16px; padding: 2px 16px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.svc-tile { flex: 0 0 176px; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 14px; scroll-snap-align: start; border-radius: var(--radius-sm); background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.svc-tile .row { margin-bottom: 8px; }
.svc-tile .pill { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.svc-tile b { font-size: 16px; font-weight: 800; }
.svc-tile small { font-size: 12px; color: var(--muted); }
.svc-tile.svc-add { align-items: center; justify-content: center; gap: 8px; color: var(--brand-2); background: transparent; border-style: dashed; border-color: var(--line-2); box-shadow: none; }
.svc-add svg.i { width: 28px; height: 28px; }
.group-title { margin: 0 6px 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.group { overflow: hidden; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.lrow { display: flex; align-items: center; gap: 12px; padding: 13px 16px; transition: background .2s; }
.lrow + .lrow { border-top: 1px solid var(--line); }
.lrow:hover { background: var(--panel-2); }
.lrow-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; }
.lrow-ic svg.i { width: 19px; height: 19px; }
.lrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.45; }
.lrow-text b { font-size: 14.5px; font-weight: 700; }
.lrow-text small { font-size: 12px; color: var(--muted); }
.lrow-go { width: 17px; height: 17px; color: var(--faint); }
:root[data-layout="app"] .detail-hero { grid-template-columns: 1fr; }
:root[data-layout="app"] .stat-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* «نیاز به توجه»: nearest expiry and least volume left */
.watch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.watch-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: var(--radius-sm); background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow-card); transition: transform .2s, border-color .2s; }
.watch-card:hover { transform: translateY(-2px); border-color: var(--brand-line); }
.watch-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.watch-head .lrow-ic { width: 34px; height: 34px; border-radius: 11px; }
.watch-head > span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.watch-head small { font-size: 12px; color: var(--muted); }
.watch-head b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watch-value { font-size: 30px; font-weight: var(--w-head); line-height: 1.1; }
.watch-value small { margin-inline-start: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.watch-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.watch-foot small { font-size: 11.5px; color: var(--faint); }
.watch-cta { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: var(--brand-soft); color: var(--brand-2); }
.watch-cta svg.i { width: 15px; height: 15px; }
.watch-list { margin-top: 10px; }
.group-head { padding: 12px 16px 2px; font-size: 13px; font-weight: 800; color: var(--muted); }
.watch-row .lrow-text { gap: 6px; }
.watch-row .lrow-text .row b { font-size: 14.5px; }
.watch-row + .watch-row { border-top: 1px solid var(--line); }
@media (max-width: 380px) { .watch { grid-template-columns: 1fr; } }

/* neon usage bars and rings */
:root[data-bar="neon"] .progress:not([data-v]) > i { --c: #8b5cf6; --c2: #22d3ee; --g: rgba(139, 92, 246, .55); }
:root[data-bar="neon"] .progress:not([data-v]).warn > i { --c: #f59e0b; --c2: #fde047; --g: rgba(245, 158, 11, .5); }
:root[data-bar="neon"] .progress:not([data-v]).bad > i { --c: #f43f5e; --c2: #fb923c; --g: rgba(244, 63, 94, .5); }
:root[data-bar="neon"] .mini-ring:not([data-v]) { --c: #8b5cf6; --g: rgba(139, 92, 246, .55); }
:root[data-bar="neon"] .mini-ring:not([data-v]).warn { --c: #f59e0b; --g: rgba(245, 158, 11, .5); }
:root[data-bar="neon"] .mini-ring:not([data-v]).bad { --c: #f43f5e; --g: rgba(244, 63, 94, .5); }
:root[data-bar="neon"] .ring:not([data-v]) { --c: #8b5cf6; --g: rgba(139, 92, 246, .55); }
:root[data-bar="neon"] .progress:not([data-v]) { height: 4px; overflow: visible; border-radius: 4px; }
:root[data-bar="neon"] .progress:not([data-v]) > i { background: var(--c); box-shadow: 0 0 5px var(--g), 0 0 12px var(--g); }
:root[data-bar="neon"] .mini-ring:not([data-v]) .arc, :root[data-bar="neon"] .ring:not([data-v]) .arc { stroke: var(--c); filter: drop-shadow(0 0 3px var(--g)); }
:root[data-bar="neon"] .mini-ring:not([data-v]) .arc, :root[data-bar="neon"] .mini-ring:not([data-v]) .track { stroke-width: 3.5; }
:root[data-bar="neon"] .ring:not([data-v]) .arc, :root[data-bar="neon"] .ring:not([data-v]) .track { stroke-width: 6; }

/* glowing primary buttons */
:root[data-cta="glow"] .btn-primary:not([data-v]) { position: relative; overflow: hidden; color: #fff; border-color: transparent; background: linear-gradient(120deg, #6d28d9, #8b5cf6 45%, #c026d3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 26px -10px rgba(139, 92, 246, .95), 0 0 22px -6px rgba(192, 38, 211, .7); }
:root[data-cta="glow"] .btn-primary:not([data-v])::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .4) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s; }
:root[data-cta="glow"] .btn-primary:not([data-v]):hover::after { transform: translateX(130%); }
:root[data-cta="glow"] .btn-primary:not([data-v]):hover { filter: brightness(1.06); }

/* plan picker: tickets */
.pl-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pl-ticket { position: relative; display: flex; align-items: stretch; min-height: 124px; border-radius: var(--radius-sm); background: var(--panel); border: 1.5px solid var(--line);
  box-shadow: var(--shadow-card); transition: transform .2s, border-color .2s; }
.pl-ticket:hover { transform: translateY(-2px); border-color: var(--brand-line); }
.pl-ticket.is-pop { border-color: var(--brand-2); box-shadow: 0 0 0 3px var(--brand-soft), 0 0 24px -8px rgba(139, 92, 246, .6); }
.pl-tk-main { flex: 1.1; display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 14px 16px; }
.pl-ticket.is-pop .pl-tk-main { border-start-start-radius: inherit; border-end-start-radius: inherit; background: linear-gradient(135deg, var(--brand-soft), transparent 80%); }
.pl-tk-main > small { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.pl-tk-day { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.pl-tk-day svg.i { width: 15px; height: 15px; }
.pl-tk-cut { position: relative; flex: none; width: 0; margin: 14px 0; border-inline-start: 2px dashed var(--line-2); }
.pl-tk-cut::before, .pl-tk-cut::after { content: ''; position: absolute; left: -8px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg); }
.pl-tk-cut::before { top: -24px; }
.pl-tk-cut::after { bottom: -24px; }
.pl-tk-side { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 14px 16px; }
.pl-tk-side .btn svg.i { width: 15px; height: 15px; }
.pl-gb { font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -.5px; }
.pl-gb small { margin-inline-start: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.pl-price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pl-price-line b { font-size: 20px; font-weight: 900; }
.pl-price-line small { font-size: 12px; color: var(--muted); }
.pl-price-line s { font-size: 12px; color: var(--faint); }