/* ── Base — app shell, utilities, global animations — extracted from app.html in R_11a ── */

/* ── App shell ──────────────────────────────────────────── */
#app{height:100dvh;display:flex;flex-direction:column;max-width:430px;margin:0 auto;position:relative}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:0 16px 16px;scrollbar-width:none}
.scroll::-webkit-scrollbar{display:none}

/* ── Row / Col ───────────────────────────────────────────── */
.row{display:flex;align-items:center}
.row.between{justify-content:space-between}
.row.gap8{gap:8px}
.col{display:flex;flex-direction:column}
.col.gap8{gap:8px}

/* ── Divider ─────────────────────────────────────────────── */
.divider{height:1px;background:var(--border);margin:10px 0}

/* ── Mono ────────────────────────────────────────────────── */
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}

/* ── Progress / Spinner ──────────────────────────────────── */
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,0.1);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Empty state ──────────────────────────────────────────── */
.empty{text-align:center;padding:32px 16px;color:var(--muted);font-size:13px}
.empty-icon{font-size:32px;margin-bottom:8px}

/* ── Loading skeleton ─────────────────────────────────────── */
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--elevated) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Инвалидация (серый план) ─────────────────────────────── */
.invalidated{opacity:.45;pointer-events:none}

/* ── Number flash on update ──────────────────────────────── */
@keyframes numFlash{0%{opacity:.3}60%{opacity:1}100%{opacity:1}}
.num-updated{animation:numFlash .45s ease-out}

/* ── AGO LABEL / EMPTY STATE ── */
.card-ago{margin-left:auto;font-size:10px;color:var(--dim);font-family:var(--mono);opacity:.7}
.card-ago.stale{color:var(--amber);opacity:1}
.card-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 8px;gap:8px;text-align:center}
.card-empty-icon{font-size:28px;line-height:1}
.card-empty-text{font-size:12.5px;color:var(--muted);line-height:1.4}
.card-empty-btn{margin-top:4px;font-size:12px;padding:8px 18px;border-radius:9px;border:1px solid rgba(91,141,255,0.35);background:rgba(91,141,255,0.08);color:var(--blue);cursor:pointer}