/* ============================================================
   Банки — theme (black & purple, dark-first)
   ============================================================ */
:root {
  --bg: #0a0512;
  --bg-2: #0f0720;
  --surface: #160c26;
  --surface-2: #1f1236;
  --surface-3: #271846;
  --text: #ffffff;
  /* Defaults for the dark-purple theme. For custom palettes JS computes these
     (contrast-aware) — no color-mix, so it works in every Telegram webview. */
  --text-dim: #a794c4;
  --text-mute: #6d5c8a;
  --line: #2c1d47;
  --line-strong: #402a63;
  --accent: #a855f7;
  --accent-2: #7c3aed;
  --accent-3: #c084fc;
  --on-accent: #ffffff; /* text/icon colour on top of the accent (auto in JS) */
  --hold: #c084fc;
  --free: #34d399;
  --danger: #ff5a7a;
  --gold: #fbbf24;
  --radius: 15px;
  --shadow: 0 10px 34px rgba(60, 20, 110, 0.45);
  --shadow-lg: 0 20px 60px rgba(50, 10, 100, 0.55);
  --glow: 0 0 0 1px rgba(168, 85, 247, 0.25), 0 8px 26px rgba(124, 58, 237, 0.35);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--bg);
  /* Subtle corner tint (JS overrides with theme colours). Kept low-opacity and
     away from the top so it never washes over the header buttons. */
  background-image:
    radial-gradient(90% 55% at 100% 0%, rgba(168, 85, 247, 0.13) 0%, transparent 55%),
    radial-gradient(85% 55% at 0% 100%, rgba(124, 58, 237, 0.12) 0%, transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* Centered column on desktop — not stretched full-width. */
#app { min-height: 100%; max-width: 560px; margin: 0 auto; padding-bottom: calc(96px + var(--safe-bottom)); padding-top: var(--safe-top); }
.hidden { display: none !important; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ===== Boot splash ===== */
.boot {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--bg);
}
.boot-logo {
  font-size: 38px; font-weight: 800;
  width: 84px; height: 84px; border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  box-shadow: var(--glow);
}
.boot-spin {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Screens ===== */
.screen { display: none; animation: fade 0.25s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ===== Login ===== */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line); border-radius: 24px;
  padding: 30px 24px 26px; box-shadow: var(--shadow-lg); animation: fade 0.35s ease;
}
.auth-logo {
  display: inline-block; font-weight: 800; font-size: 15px;
  padding: 8px 14px; border-radius: 12px; margin-bottom: 18px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); box-shadow: var(--glow);
}
.auth-title { margin: 0 0 4px; font-size: 26px; font-weight: 800; }
.auth-sub { margin: 0 0 20px; font-size: 13.5px; color: var(--text-dim); }
.auth .field { margin-bottom: 12px; }
.auth-btn { width: 100%; margin-top: 4px; box-shadow: none; }
.auth-note { margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); border-top: 1px solid var(--line); padding-top: 16px; }
.auth-note b { color: var(--accent-3); }

/* ===== Profile header ===== */
.profile {
  display: flex; align-items: center; gap: 13px;
  margin: 14px 16px 2px; padding: 13px 14px;
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow);
  cursor: pointer;
}
.profile:active { transform: scale(0.995); }
.profile-avatar {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 15px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: var(--on-accent); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: var(--glow);
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-info { flex: 1 1 auto; min-width: 0; }
.profile-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-sub { font-size: 12px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-btn { flex: 0 0 auto; }

/* ===== Top bar ===== */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px 12px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.topbar-titles { display: flex; flex-direction: column; line-height: 1.12; min-width: 0; flex: 1 1 auto; }
.title { font-size: 25px; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subtitle { font-size: 12px; color: var(--text-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.icon-btn {
  width: 44px; height: 44px; flex: 0 0 auto;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  border-radius: 14px; font-size: 25px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.icon-btn:active { transform: scale(0.94); background: var(--surface-2); }
/* Back button — accent tinted so it reads as "navigation" */
#btn-back { color: var(--accent-3); font-size: 30px; border-color: var(--line-strong); }
#btn-back:active { border-color: var(--accent); }

/* Slots-mode toggle — pill switch, off by default */
.switch {
  flex: 0 0 auto; width: 46px; height: 28px; padding: 3px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer;
  display: flex; align-items: center; justify-content: flex-start; transition: background 0.15s, border-color 0.15s;
}
.switch-knob { width: 20px; height: 20px; border-radius: 50%; background: var(--text-dim); transition: transform 0.15s, background 0.15s; }
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on .switch-knob { transform: translateX(18px); background: var(--on-accent); }

/* Banks main header — large title + rounded pill button */
.topbar-main { padding: 22px 18px 14px; align-items: flex-end; }
.title-main {
  font-size: 33px; font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  display: inline-flex; align-items: center; gap: 9px;
}
.title-main::before {
  content: ""; width: 10px; height: 26px; border-radius: 6px; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
.topbar-main .add-btn {
  height: 42px; border-radius: 999px; padding: 0 20px; font-size: 15px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* small add button in the top bar — one solid accent colour */
.add-btn {
  margin-left: auto; flex: 0 0 auto;
  height: 42px; padding: 0 16px; border: none; border-radius: 13px;
  background: var(--accent);
  color: var(--on-accent); font-size: 15.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.1s, filter 0.15s;
}
.add-btn:active { transform: scale(0.95); filter: brightness(0.92); }
.title + .add-btn { margin-left: auto; }
/* secondary "конверты" add button */
.add-btn-2 { margin-left: 0; background: var(--surface); color: var(--accent-3); border: 1px solid var(--line-strong); box-shadow: none; }

/* ===== Toolbar / chips ===== */
.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 2px 16px 8px; gap: 10px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.chip {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  padding: 9px 15px; border-radius: 999px; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.chip:active { transform: scale(0.96); background: var(--surface-2); }
.chip.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.chip-cd { color: var(--accent-3); border-color: var(--line-strong); }
.chip-count { font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }

/* ===== Quick card (pinned in the toolbar, between «Выбрать все» and the count) ===== */
/* The quick card takes the middle space and shrinks first, so «Выбрать все» and
   the count keep their width and never wrap on a narrow phone. */
.pane-selectall { white-space: nowrap; flex: none; }
.pane-notecard { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
/* Empty state — a small dashed «＋ карта» button. */
.notecard-add {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--line-strong); background: transparent;
  color: var(--text-dim); font-size: 13px; font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.notecard-add:hover { border-color: var(--accent); color: var(--text); }
.notecard-add:active { transform: scale(0.96); background: var(--surface-2); }
.notecard-add .nc-plus { color: var(--accent); font-weight: 800; font-size: 15px; line-height: 1; }
/* Filled state — the card chip with a ⋮ menu on the right. */
.notecard-chip {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-width: 0;
  padding: 4px 4px 4px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface);
  transition: transform 0.1s;
}
.notecard-chip:active { transform: scale(0.98); }
.notecard-text {
  min-width: 0; max-width: min(42vw, 230px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0.2px; font-variant-numeric: tabular-nums;
  color: var(--text); cursor: pointer;
}
.notecard-menu {
  flex: none; width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--text-dim); font-size: 17px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.notecard-menu:hover { background: var(--surface-2); color: var(--text); }
.notecard-menu:active { transform: scale(0.9); }

/* ===== Tabs (Все / Карты / Конверты) ===== */
.tabs { display: flex; gap: 6px; padding: 4px 16px 6px; }
.tab {
  flex: 1 1 auto; padding: 9px 10px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-dim);
  transition: background 0.15s, color 0.15s, transform 0.1s;
}
.tab:active { transform: scale(0.97); }
.tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ===== Lists ===== */
.list { padding: 4px 14px 8px; display: flex; flex-direction: column; gap: 9px; }

/* Bank row */
.bank {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-2) 120%);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: transform 0.12s, border-color 0.15s;
}
.bank:active { transform: scale(0.985); border-color: var(--line-strong); }
.bank-avatar {
  width: 50px; height: 50px; flex: 0 0 auto; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.4); overflow: hidden;
}
.bank-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* section header (Карты / Конверты) */
.list-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-mute); padding: 12px 16px 2px; display: flex; align-items: center; gap: 8px; }
.list-head .cnt { color: var(--text-dim); font-weight: 700; }
.bank-info { flex: 1 1 auto; min-width: 0; }
/* holder sits to the right of the bank — wraps so a long name is fully visible */
.bank-holder {
  flex: 0 1 auto; max-width: 44%; text-align: right; align-self: center;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute);
  font-family: "SF Mono", ui-monospace, monospace; line-height: 1.25; overflow-wrap: anywhere;
}
.bank-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-sub { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; display: flex; gap: 8px; align-items: center; }
.bank-sub .dot { color: var(--text-mute); }
.bank-sub .hold-badge { color: var(--hold); font-weight: 700; }
.bank-sub .shared-by { color: var(--text-mute); }
.bank.shared { border-style: dashed; }
.shared-tag { margin-right: 5px; opacity: 0.85; }
.bank-del {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--text-dim); font-size: 15px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.bank-del:active { color: var(--danger); border-color: var(--danger); }

/* Card row — dense, whole row selects */
.card {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-2) 130%);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.08s;
  -webkit-user-select: none; user-select: none;
}
.card:active { transform: scale(0.992); }
.card.ctx-open { border-color: var(--accent-3); }
/* Envelope (конверт) — subtle left stripe + badge, not a colour fill. */
.card.env { border-left: 3px solid var(--accent-3); }
.env-badge {
  display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; color: var(--accent-3);
  border: 1px solid var(--line-strong); background: var(--surface-3);
}
/* On cooldown — red (overrides custom colour / envelope). */
.card.oncd { border-color: rgba(255, 90, 122, 0.6); background: linear-gradient(135deg, rgba(255, 90, 122, 0.16) 0%, var(--bg-2) 130%); }
/* Selection shows as an inner glow so it's visible over any border colour. */
.card.selected { box-shadow: inset 0 0 0 2px var(--accent); }

/* Holder name — subtle, like the meta row (not standing out). */
.card-holder {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  font-family: "SF Mono", ui-monospace, monospace;
  color: var(--text-dim); margin-top: 5px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-holder:active { opacity: 0.6; }

.checkbox {
  width: 25px; height: 25px; flex: 0 0 auto; border-radius: 8px;
  border: 2px solid var(--line-strong); background: transparent;
  display: flex; align-items: center; justify-content: center; transition: background 0.15s, border-color 0.15s;
}
.checkbox.checked { background: var(--accent); border-color: var(--accent); }
.checkbox.checked::after {
  content: ""; width: 6px; height: 11px; border: solid var(--on-accent); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) translateY(-1px);
}

.card-main { flex: 1 1 auto; min-width: 0; }
.card-number {
  font-family: "SF Mono", ui-monospace, "Roboto Mono", monospace;
  font-size: 15px; letter-spacing: 0.02em; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-top: 5px; }
.card-meta .sep { color: var(--text-mute); }

/* Uses chip — colour by remaining count (green -> red). */
.uses-chip {
  display: inline-flex; align-items: center; font-size: 13.5px; font-weight: 800;
  padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface-3); color: var(--accent-3); white-space: nowrap;
  transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.uses-chip:active { transform: scale(0.94); }
.uses-chip.u5 { color: var(--free); border-color: rgba(52, 211, 153, 0.45); }
.uses-chip.u4 { color: #86e05a; border-color: rgba(134, 224, 90, 0.45); }
.uses-chip.u3 { color: var(--gold); border-color: rgba(251, 191, 36, 0.45); }
.uses-chip.u2 { color: #ff9f45; border-color: rgba(255, 159, 69, 0.5); }
.uses-chip.u1 { color: #ff6b3d; border-color: rgba(255, 107, 61, 0.55); }
.uses-chip.u0 { color: var(--danger); border-color: rgba(255, 90, 122, 0.6); background: rgba(255, 90, 122, 0.16); }

/* Right side */
.card-side { flex: 0 0 auto; display: flex; align-items: center; gap: 9px; }
/* Present only while a card is on cooldown — a free card has no status block,
   so the meta row keeps that width instead of colliding with the buttons. */
.card-status { text-align: right; }
/* Timer turns red while a card is on cooldown. */
.timer-box {
  display: inline-flex; flex-direction: column; align-items: flex-end;
  padding: 5px 11px; border-radius: 11px; cursor: help;
  background: rgba(255, 90, 122, 0.14); border: 1px solid rgba(255, 90, 122, 0.4);
}
.timer-box .status-timer {
  font-family: "SF Mono", ui-monospace, monospace; font-size: 14px; color: var(--danger); font-weight: 800; line-height: 1.1;
}
.timer-box .status-sub { font-size: 9.5px; color: var(--text-mute); margin-top: 1px; }

.card-actions { display: flex; gap: 6px; align-items: center; }
.mini-btn {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--surface-2); color: var(--text); font-size: 19px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform 0.1s, background 0.15s, border-color 0.15s;
}
.mini-btn:active { transform: scale(0.9); background: var(--accent); border-color: var(--accent); }
.mini-btn.more { font-weight: 800; font-size: 22px; }

/* ===== Empty states ===== */
.empty { text-align: center; padding: 64px 30px; color: var(--text-dim); }
.empty p { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.empty span { font-size: 13px; }

/* ===== Selection bar ===== */
.selbar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-bottom)); z-index: 29;
  width: 100%; max-width: 560px;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 0 14px; animation: fadeIn 0.2s ease;
}
#btn-run-cd { flex: 1 1 130px; }
.btn {
  flex: 1 1 auto; height: 46px; border-radius: 14px; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform 0.1s, background 0.15s; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow);
}
.btn:active { transform: scale(0.97); }
.btn-outline { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-danger-outline { color: var(--danger); border-color: var(--danger); background: var(--surface); }
.btn-icon { flex: 0 0 auto; width: 52px; padding: 0; font-size: 21px; }
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ===== Context menu ===== */
.ctx-root { position: fixed; inset: 0; z-index: 150; }
.ctx-backdrop { position: absolute; inset: 0; background: transparent; }
.ctx-menu {
  position: absolute; min-width: 210px; max-width: 270px;
  background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 15px; padding: 6px;
  box-shadow: var(--shadow-lg); animation: ctxIn 0.14s cubic-bezier(0.2, 0.8, 0.2, 1); transform-origin: top left;
}
@keyframes ctxIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.ctx-title { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-mute); padding: 8px 12px 6px; }
.ctx-item {
  display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; transition: background 0.12s;
}
.ctx-item:active, .ctx-item:hover { background: var(--surface-3); }
.ctx-item .ctx-ico { width: 20px; text-align: center; font-size: 16px; flex: 0 0 auto; }
.ctx-item .ctx-arrow { margin-left: auto; color: var(--text-mute); font-size: 13px; }
.ctx-item.danger { color: var(--danger); }
.ctx-item.danger:active, .ctx-item.danger:hover { background: rgba(255, 90, 122, 0.12); }
.ctx-sep { height: 1px; background: var(--line); margin: 5px 8px; }

.ctx-uses { display: flex; gap: 6px; padding: 8px 10px 10px; flex-wrap: wrap; }
.ctx-uses .u {
  min-width: 40px; height: 40px; padding: 0 6px; display: flex; align-items: center; justify-content: center;
  border-radius: 11px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font-size: 16px; font-weight: 800; cursor: pointer; transition: transform 0.1s, background 0.12s;
}
.ctx-uses .u:active { transform: scale(0.9); }
.ctx-uses .u.none { color: var(--text-mute); }
.ctx-uses .u:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* ===== Modal — centered on screen ===== */
.modal-root { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; overflow-y: auto; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); animation: fade 0.2s ease; }
.modal {
  position: relative; width: 100%; max-width: 460px; margin: auto;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line-strong); border-radius: 22px;
  padding: 22px 20px; box-shadow: var(--shadow-lg);
  animation: popIn 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes popIn { from { opacity: 0; transform: scale(0.94) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal h2 { margin: 0 0 4px; font-size: 20px; font-weight: 800; }
.modal p.hint { margin: 0 0 16px; font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.modal .row-label { font-size: 12.5px; color: var(--text-dim); font-weight: 600; margin: 14px 0 8px; }

.field {
  width: 100%; background: var(--bg); border: 1px solid var(--line-strong); border-radius: 14px;
  color: var(--text); font-size: 16px; padding: 14px; outline: none; font-family: inherit; transition: border-color 0.15s;
}
.field:focus { border-color: var(--accent); }
textarea.field { min-height: 120px; resize: vertical; line-height: 1.5; font-family: "SF Mono", ui-monospace, monospace; font-size: 14px; }

.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.preset {
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.preset:active { transform: scale(0.95); }
.preset.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.modal-actions { display: flex; gap: 10px; margin-top: 20px; }
.modal-actions .btn { box-shadow: none; }

/* profile / settings modal */
.pf-avatar {
  width: 72px; height: 72px; border-radius: 22px; margin: 4px auto 12px;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; overflow: hidden; box-shadow: var(--glow);
}
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-name { text-align: center; font-size: 19px; font-weight: 800; margin-bottom: 2px; }
.pf-uname { text-align: center; font-size: 13px; color: var(--text-dim); margin-bottom: 16px; }
.pf-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pf-line:last-of-type { border-bottom: none; }
.pf-line .k { color: var(--text-dim); }
.pf-line .v { font-weight: 700; text-align: right; }
.badge-ok { color: var(--free); }
.badge-no { color: var(--text-mute); }

/* blurred ID, sharp on hover / tap; copies on click */
.id-reveal { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.id-reveal code { font-family: "SF Mono", ui-monospace, monospace; background: var(--bg); padding: 4px 9px; border-radius: 8px; border: 1px solid var(--line); }
.id-reveal code .val { filter: blur(5px); transition: filter 0.15s; }
.id-reveal.shown code .val { filter: none; }
body:not(.no-hover-reveal) .id-reveal:hover code .val { filter: none; }
.id-copy { border: none; background: none; color: var(--accent-3); font-size: 15px; cursor: pointer; padding: 0; }
.pf-note { margin-top: 16px; font-size: 12.5px; line-height: 1.5; color: var(--text-mute); background: var(--surface-3); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.pf-note b { color: var(--accent-3); }
.link-btn { background: none; border: none; color: var(--accent-3); font-weight: 700; font-size: 14px; cursor: pointer; padding: 0; }

/* ===== Login: code step ===== */
.code-input { text-align: center; font-size: 26px; letter-spacing: 12px; font-weight: 800; font-family: "SF Mono", ui-monospace, monospace; }
.auth-back { display: block; width: 100%; text-align: center; margin-top: 14px; }

/* ===== CVV hidden until hover / tap, copies on click ===== */
.cvv { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.cvv .cvv-val { filter: blur(5px); transition: filter 0.15s; font-weight: 700; letter-spacing: 0.05em; }
.cvv.shown .cvv-val { filter: none; }
/* Hover reveal can be switched off in ⚙ → Приватность, so a stream never shows
   a CVV just because the pointer passed over the row. */
body:not(.no-hover-reveal) .cvv:hover .cvv-val { filter: none; }
/* Blur switched off entirely. */
body.no-cvv-blur .cvv .cvv-val { filter: none; }

/* card number is tappable to copy */
.card-number { cursor: pointer; }

/* ===== Drag & drop reordering ===== */
/* The dragged item is lifted to position:fixed and follows the pointer (set in JS). */
.card.dragging, .bank.dragging, .acc.dragging {
  border-color: var(--accent); box-shadow: var(--shadow-lg); opacity: 0.97;
}
.list.dragging-active { cursor: grabbing; }
/* Dashed gap that shows exactly where the item will drop. */
.drop-placeholder {
  border: 2px dashed var(--accent); border-radius: var(--radius);
  background: rgba(168, 85, 247, 0.12); box-sizing: border-box;
}

/* ===== Bank fully in CD ===== */
.bank.in-cd { border-color: var(--line-strong); }
.bank.in-cd .bank-avatar { opacity: 0.65; }
.bank-sub .cd-until { color: var(--hold); font-weight: 700; }

/* bank menu button (mobile access to rename/delete) */
.bank-menu {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line);
  background: transparent; color: var(--text-dim); font-size: 18px; font-weight: 800; line-height: 1; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.bank-menu:active { color: var(--text); border-color: var(--line-strong); }

/* ===== Accounts (Tdata) ===== */
.acc {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg-2) 130%);
  border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer;
  transition: border-color 0.15s, background 0.15s; -webkit-user-select: none; user-select: none;
}
.acc.selected { border-color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.acc-num { flex: 0 0 auto; width: 26px; text-align: center; font-size: 12px; font-weight: 800; color: var(--text-mute); }
.acc-data { flex: 1 1 auto; min-width: 0; font-family: "SF Mono", ui-monospace, monospace; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }

/* ===== Icon / colour / theme pickers (modals) ===== */
.icon-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 8px 0; }
.icon-opt {
  position: relative; aspect-ratio: 1; border-radius: 14px; border: 2px solid var(--line-strong); background: var(--surface);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; color: var(--text);
  cursor: pointer; overflow: hidden; transition: transform 0.1s;
}
.icon-opt:active { transform: scale(0.92); }
.icon-opt img { width: 100%; height: 100%; object-fit: cover; }
.icon-del {
  position: absolute; top: -1px; right: -1px; width: 20px; height: 20px; border-radius: 0 12px 0 10px;
  border: none; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.icon-opt.active { border-color: var(--text); box-shadow: var(--glow); }

.color-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.color-opt { width: 42px; height: 42px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s; }
.color-opt:active { transform: scale(0.9); }
.color-opt.active { border-color: var(--text); box-shadow: var(--glow); }
.color-opt.clear { background: var(--surface); border-color: var(--line-strong); color: var(--text-mute); display: flex; align-items: center; justify-content: center; font-size: 20px; }

.color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.color-row:last-of-type { border-bottom: none; }
.color-row span { font-size: 14px; color: var(--text-dim); font-weight: 600; }
.color-row input[type=color] { width: 52px; height: 40px; border: 1px solid var(--line-strong); background: none; border-radius: 10px; cursor: pointer; padding: 2px; }
.theme-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.theme-swatch { width: 46px; height: 46px; border-radius: 13px; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); transition: transform 0.1s; }
.theme-swatch:active { transform: scale(0.9); }
.theme-swatch.active { border-color: var(--text); }

/* ===== Toast ===== */
.toast {
  position: fixed; left: 50%; bottom: calc(90px + var(--safe-bottom)); transform: translateX(-50%);
  z-index: 200; background: var(--surface-2); color: var(--text); border: 1px solid var(--line-strong);
  padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow);
  animation: fade 0.2s ease; max-width: 88%; text-align: center;
}

/* ============================================================
   Additions: profile actions, envelope numbering, uses picker
   ============================================================ */

/* Compact actions in the profile header (trash / settings). */
.profile { gap: 10px; }
.profile-btn { position: relative; width: 40px; height: 40px; font-size: 20px; }
/* Count of items waiting in the trash, pinned to its button. */
.btn-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 800; line-height: 18px; text-align: center;
  border: 2px solid var(--bg); box-sizing: content-box;
}

/* Left "pick" column — the envelope number stacked directly above the select
   checkbox, before the card body. Non-envelope cards just hold the checkbox, so
   every card's body stays aligned. No handlers of its own → tap/hold still
   selects & drags the card like the rest of the row. */
.card-pick { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.env-num {
  min-width: 25px; text-align: center;
  font-family: "SF Mono", ui-monospace, monospace; font-size: 14px; font-weight: 800; line-height: 1;
  color: var(--accent-3); -webkit-user-select: none; user-select: none;
}
.card.oncd .env-num { color: var(--danger); }
/* Envelopes: keep the select checkbox centered on the left, and pin the number
   to the top of that column so it sits level with the card number (out of flow,
   so it never pushes the checkbox off-centre). */
.card.env .card-pick { align-self: stretch; justify-content: center; position: relative; }
.card.env .env-num { position: absolute; top: 2px; left: 0; right: 0; }

/* "Осталось" picker in the add-cards modal — 5 4 3 2 1 0, default 3. */
.uses-picker { display: flex; gap: 7px; margin: 2px 0 4px; }
.up-opt {
  flex: 1 1 0; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--bg); color: var(--text); font-size: 17px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.1s, background 0.14s, border-color 0.14s, color 0.14s;
}
.up-opt:active { transform: scale(0.92); }
.up-opt:hover { border-color: var(--accent); }
.up-opt.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.up-opt.none.active { background: var(--danger); border-color: var(--danger); color: #fff; }

/* A wider modal — used by the trash view, so rows fit without being cut off. */
.modal.modal-wide { max-width: 640px; }

/* ============================================================
   Search — banks by name, cards by their last digits
   ============================================================ */
.search-wrap { padding: 10px 16px 0; }
.search {
  display: flex; align-items: center; gap: 9px; height: 46px; padding: 0 12px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search:focus-within { border-color: var(--accent); box-shadow: var(--glow); }
.search-ico { flex: 0 0 auto; font-size: 15px; opacity: 0.65; }
.search-input {
  flex: 1 1 auto; min-width: 0; height: 100%; border: none; background: none; outline: none;
  color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600;
}
.search-input::placeholder { color: var(--text-mute); font-weight: 500; }
.search-clear {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-mute);
  font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s, transform 0.1s;
}
.search-clear:hover { color: var(--text); border-color: var(--accent); }
.search-clear:active { transform: scale(0.9); }

.search-results {
  margin: 10px 16px 0; padding: 6px; max-height: 62vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow);
  animation: fade 0.18s ease;
}
.sr-head {
  display: flex; align-items: center; gap: 7px; padding: 9px 10px 6px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mute);
}
.sr-head span {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px; letter-spacing: 0;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
}
.sr-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 13px; cursor: pointer;
  border-left: 3px solid var(--card-accent, transparent);
  transition: background 0.13s, transform 0.08s;
}
.sr-row:hover { background: var(--surface-3); }
.sr-row:active { transform: scale(0.99); }
.sr-avatar {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; overflow: hidden;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px;
}
.sr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sr-main { flex: 1 1 auto; min-width: 0; }
.sr-title { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-title.mono { font-family: "SF Mono", ui-monospace, monospace; font-size: 13.5px; letter-spacing: 0.02em; }
.sr-sub {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-dim); margin-top: 3px;
}
.sr-sub .ok { color: var(--free); font-weight: 700; }
.sr-sub .bad { color: var(--danger); font-weight: 700; }
.sr-bank { color: var(--text-mute); }
.sr-cur { font-weight: 800; }
.sr-go { flex: 0 0 auto; color: var(--text-mute); font-size: 20px; font-weight: 700; line-height: 1; }
.sr-empty { text-align: center; padding: 22px 14px; font-size: 13.5px; color: var(--text-dim); }
.sr-empty span { font-size: 12px; color: var(--text-mute); }
.search-results mark {
  background: rgba(168, 85, 247, 0.28); color: var(--accent-3);
  border-radius: 4px; padding: 0 1px; font-weight: 800;
}

/* ============================================================
   Card meta row — always ONE line: дата · CVV · валюта · осталось.
   Adding the currency chip made the row wrap on narrower cards, which pushed
   "осталось" underneath the card. It never wraps now; instead the parts that
   can be understood without words shrink first (CVV label, currency code),
   so the counter always stays on the same line as the rest.
   ============================================================ */
.card { container-type: inline-size; }
.card-meta { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
/* The currency and the counter never shrink and never wrap away… */
.card-meta > .cur-chip, .card-meta > .uses-chip, .card-meta > .env-badge { flex: 0 0 auto; }
/* …the expiry and the CVV give up their room first, ellipsised if it comes to that. */
.card-meta > span:first-child, .card-meta > .cvv { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cvv .lbl { color: var(--text-mute); }
/* Each field copies only itself, so the date is tappable like the number. */
.card-meta .exp { cursor: pointer; transition: color 0.15s; }
.card-meta .exp:hover { color: var(--text); }

/* Narrow cards: drop the "CVV" word and the 3-letter currency code (the blurred
   number and the ₴ / $ / € symbol already say what they are) and slim down the
   right-hand column, so the meta row keeps enough width to stay on one line.
   Measured against the card itself, not the window — page zoom shrinks the card
   without shrinking the viewport, so a media query would fire at the wrong time. */
@container (max-width: 430px) {
  .card { gap: 8px; padding: 9px 10px; }
  .card-meta { gap: 5px; }
  .card-meta .sep { display: none; }
  .cvv .lbl { display: none; }
  .cur-chip .cur-full { display: none; }
  .cur-chip { padding: 3px 8px; }
  .uses-chip { padding: 4px 8px; font-size: 12.5px; }
  .card-side { gap: 6px; }
  .card-actions { gap: 4px; }
  .card-actions .mini-btn { width: 32px; height: 32px; font-size: 16px; }
  .card-actions .mini-btn.more { font-size: 19px; }
  .timer-box { padding: 4px 8px; }
  .timer-box .status-timer { font-size: 12.5px; }
  .timer-box .status-sub { font-size: 9px; }
}
/* Fallback for webviews without container queries — real phones at 100% zoom. */
@supports not (container-type: inline-size) {
  @media (max-width: 480px) {
    .card { gap: 8px; padding: 9px 10px; }
    .card-meta { gap: 5px; }
    .card-meta .sep { display: none; }
    .cvv .lbl { display: none; }
    .cur-chip .cur-full { display: none; }
    .uses-chip { padding: 4px 8px; font-size: 12.5px; }
    .card-actions .mini-btn { width: 32px; height: 32px; font-size: 16px; }
    .timer-box { padding: 4px 8px; }
    .timer-box .status-timer { font-size: 12.5px; }
  }
}

/* ============================================================
   Currency — chip on the card, picker grid in menus & modals
   ============================================================ */
.cur-chip {
  display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
  color: var(--card-accent, var(--accent-3));
  border: 1px solid currentColor; background: rgba(255, 255, 255, 0.04);
  transition: transform 0.1s, filter 0.15s;
}
.cur-chip:active { transform: scale(0.94); }
.cur-chip:hover { filter: brightness(1.2); }
.card.oncd .cur-chip { color: var(--text-dim); border-color: var(--line-strong); }

.cur-grid, .ctx-cur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.cur-grid { margin: 2px 0 4px; }
.ctx-cur { padding: 8px 10px 10px; }
.cur-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  height: 50px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  transition: transform 0.1s, background 0.14s, border-color 0.14s;
}
.cur-opt:hover { border-color: var(--cur); }
.cur-opt:active { transform: scale(0.93); }
.cur-opt .cur-sym { font-size: 17px; font-weight: 800; line-height: 1; color: var(--cur); }
.cur-opt .cur-code { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--text-mute); }
.cur-opt.active { background: var(--cur); border-color: var(--cur); }
.cur-opt.active .cur-sym, .cur-opt.active .cur-code { color: #fff; }

/* User-added currencies: everyone can add, only an admin gets the ✕. */
.cur-row-right { display: inline-flex; align-items: center; gap: 8px; }
.cur-own {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-mute);
}
.cur-del {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-mute); font-size: 12px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cur-del:hover { color: var(--danger); border-color: var(--danger); background: rgba(255, 90, 122, 0.12); }
.cur-add { display: grid; grid-template-columns: 86px 62px 1fr 52px 46px; gap: 7px; align-items: center; margin: 4px 0 2px; }
.cur-add .field { padding: 11px 10px; font-size: 14px; }
.cur-add #nc-code { text-transform: uppercase; font-family: "SF Mono", ui-monospace, monospace; font-weight: 800; }
.cur-add #nc-sym { text-align: center; font-size: 16px; font-weight: 800; }
.cur-add input[type=color] { width: 100%; height: 44px; border: 1px solid var(--line-strong); background: none; border-radius: 12px; cursor: pointer; padding: 2px; }
.cur-add .btn { height: 44px; font-size: 20px; padding: 0; }
@media (max-width: 560px) {
  .cur-add { grid-template-columns: 1fr 1fr; }
  .cur-add #nc-name { grid-column: 1 / -1; }
}

/* A long menu (currencies) scrolls inside itself instead of running off-screen. */
.ctx-menu { max-height: 74vh; overflow-y: auto; overscroll-behavior: contain; }

/* ============================================================
   Card accent — left stripe coloured by currency (or a custom colour)
   ============================================================ */
.card { border-left: 3px solid var(--card-accent, var(--line)); }
.card.env { border-left-style: dashed; }
.card.oncd { border-left-color: rgba(255, 90, 122, 0.75); }
/* Card jumped to from the search — pulses so the eye lands on it. */
.card.found { animation: foundPulse 2.4s ease; }
@keyframes foundPulse {
  0%, 100% { box-shadow: inset 0 0 0 0 var(--accent); }
  12%, 55% { box-shadow: inset 0 0 0 2px var(--accent), 0 0 24px rgba(168, 85, 247, 0.45); }
}
/* ============================================================
   Split view — a second bank beside the first, opened with the wheel
   ============================================================ */
/* Both columns share the width and stay centred, so the pair never stretches
   edge to edge. The side column scrolls on its own, the main one scrolls the
   page — that is what lets you work in two banks at once. */
/* Each column scrolls on its own: the page itself no longer moves, so spinning
   the wheel over the left bank scrolls that bank and leaves the right one where
   it is (and the other way round). */
html.split { height: 100%; overflow: hidden; }
body.split {
  display: flex; align-items: flex-start; justify-content: center; gap: 14px; padding: 0 10px;
  height: var(--vh, 100vh); overflow: hidden; box-sizing: border-box;
}
body.split #app {
  margin: 0; flex: 1 1 0; min-width: 0; max-width: 560px;
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
}
/* The action bar rides along inside its own column instead of floating over
   the whole window, so each pane keeps its own. */
body.split #app .selbar { position: sticky; bottom: 10px; width: auto; max-width: none; z-index: 5; }
/* Deliberately NOT styled as a floating card — it should read as the same screen
   as the one on the left, just in the second column. Only a hairline divider
   tells them apart. */
.side-pane {
  flex: 1 1 0; min-width: 0; max-width: 560px; align-self: stretch;
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  background: none; border: none; border-left: 1px solid var(--line);
  padding-bottom: calc(90px + var(--safe-bottom));
  animation: sideIn 0.2s ease;
}
@keyframes sideIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.side-pane .topbar { background: var(--bg); }
.side-pane .selbar { position: sticky; bottom: 10px; width: auto; max-width: none; z-index: 5; }

/* Tab strip — one tab per opened bank, middle click closes it. */
.side-tabstrip {
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 10px 10px 0; scrollbar-width: thin;
}
.side-tab {
  flex: 0 0 auto; max-width: 190px; display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 8px 0 12px; border-radius: 11px 11px 0 0; cursor: pointer;
  border: 1px solid var(--line-strong); border-bottom: none; background: var(--bg);
  color: var(--text-dim); font-family: inherit; font-size: 13px; font-weight: 700;
  transition: background 0.14s, color 0.14s;
}
.side-tab:hover { background: var(--surface-2); color: var(--text); }
.side-tab.active { background: var(--surface-3); color: var(--text); border-color: var(--accent); }
.side-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-tab-x {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 6px; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-mute);
  transition: background 0.14s, color 0.14s;
}
.side-tab-x:hover { background: var(--danger); color: #fff; }

/* Below this width two columns cannot both stay readable — the pane stacks
   under the list instead of squeezing the cards into nothing. */
@media (max-width: 900px) {
  /* Stacked again — one page, one scrollbar. */
  html.split { height: auto; overflow: visible; }
  body.split { display: block; padding: 0; height: auto; overflow: visible; }
  body.split #app { margin: 0 auto; height: auto; overflow: visible; }
  body.split #app .selbar { position: fixed; bottom: calc(14px + var(--safe-bottom)); width: 100%; max-width: 560px; }
  .side-pane { max-width: 560px; margin: 12px auto; height: auto; overflow: visible; }
}

/* ============================================================
   Workspace tabs across the top (opt-in)
   ============================================================ */
/* Fixed, so it stays in place and slides over the list as you scroll down. */
.main-tabstrip {
  position: fixed; top: 0; left: 0; right: 0; z-index: 45;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 6px 10px 0;
  background: rgba(10, 5, 18, 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}
body.has-tabs { padding-top: 46px; }
body.has-tabs.split { padding-top: 46px; }
/* Does NOT grow: the strip is only as wide as its tabs, so the ＋ sits right
   after the last one like in a browser. It still shrinks and scrolls when the
   tabs stop fitting. */
.main-tabs { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; min-width: 0; }
.main-tabs::-webkit-scrollbar { display: none; }
.main-tab {
  flex: 0 0 auto; max-width: 210px; display: inline-flex; align-items: center; gap: 7px;
  height: 39px; padding: 0 7px 0 11px; cursor: pointer;
  border: 1px solid var(--line); border-bottom: none; border-radius: 12px 12px 0 0;
  background: transparent; color: var(--text-mute);
  font-family: inherit; font-size: 13px; font-weight: 700;
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.main-tab:hover { background: var(--surface); color: var(--text-dim); }
.main-tab.active {
  background: var(--bg); color: var(--text); border-color: var(--line-strong);
  box-shadow: inset 0 2px 0 var(--accent);
}
.main-tab-ico { font-size: 13px; line-height: 1; opacity: 0.9; }
.main-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-tab-x {
  flex: 0 0 auto; width: 19px; height: 19px; border-radius: 6px; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-mute);
  transition: background 0.14s, color 0.14s;
}
.main-tab-x:hover { background: var(--danger); color: #fff; }
/* Flat, like a browser's new-tab button — no chrome until you point at it. */
.main-tab-add {
  flex: 0 0 auto; width: 30px; height: 30px; margin-bottom: 5px; border-radius: 8px; cursor: pointer;
  border: none; background: transparent; color: var(--text-mute);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px; line-height: 1; transition: background 0.14s, color 0.14s, transform 0.1s;
}
.main-tab-add:hover { background: var(--surface-2); color: var(--text); }
.main-tab-add:active { transform: scale(0.9); }

/* ============================================================
   Announcements
   ============================================================ */
/* Unread ones make the bell glow red — visible from across the screen. */
#btn-msgs.has-unread {
  border-color: var(--danger);
  color: var(--danger);
  animation: msgGlow 2s ease-in-out infinite;
}
@keyframes msgGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 122, 0.45); }
  50% { box-shadow: 0 0 14px 2px rgba(255, 90, 122, 0.55); }
}

.msg-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; padding-right: 2px; }
.msg {
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 15px; padding: 12px 13px;
}
.msg.unread { border-color: var(--danger); background: rgba(255, 90, 122, 0.07); }
.msg-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.msg-when { font-size: 11.5px; color: var(--text-mute); }
.msg-new-tag {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px; background: var(--danger); color: #fff;
}
.msg-del {
  margin-left: auto; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-mute); font-size: 12px;
}
.msg-del:hover { color: var(--danger); border-color: var(--danger); }
.msg-text { font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.msg-text a { color: var(--accent-3); }
.msg-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 7px; margin-top: 10px; }
.msg-photo {
  aspect-ratio: 1; border-radius: 11px; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--line); background: var(--surface-2);
}
.msg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s; }
.msg-photo:hover img { transform: scale(1.04); }
.msg-photo img.loading { opacity: 0; }
.msg-empty { text-align: center; padding: 30px 14px; color: var(--text-dim); font-size: 14px; font-weight: 700; }
.msg-empty-ico { font-size: 34px; margin-bottom: 8px; opacity: 0.55; }
.msg-empty span { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; color: var(--text-mute); }

/* Full-size photo on click. */
.lightbox {
  position: fixed; inset: 0; z-index: 300; cursor: zoom-out;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: rgba(0, 0, 0, 0.86); animation: fade 0.15s ease;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 12px; box-shadow: var(--shadow-lg); }
.lightbox-x {
  position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 16px;
}

/* Compose (admin) */
.cm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; margin: 2px 0 10px; }
.cm-photo { position: relative; aspect-ratio: 1; border-radius: 11px; overflow: hidden; border: 1px solid var(--line-strong); }
.cm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-x {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 7px; cursor: pointer;
  border: none; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 11px; line-height: 1;
}
.cm-x:hover { background: var(--danger); }
.cm-add { display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; width: 100%; }

/* ============================================================
   Profile: settings tiles
   ============================================================ */
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 2px 0 4px; }
.pf-tile {
  display: flex; align-items: center; gap: 9px; padding: 13px 12px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  font-family: inherit; font-size: 14px; font-weight: 700; text-align: left;
  transition: transform 0.1s, background 0.14s, border-color 0.14s;
}
.pf-tile:hover { border-color: var(--accent); background: var(--surface-2); }
.pf-tile:active { transform: scale(0.97); }
.pf-tile-ico { font-size: 18px; line-height: 1; }
.pf-tile-cnt {
  margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; text-align: center;
}
.badge-danger { color: var(--danger); }

/* ============================================================
   Instruction editor (⚙ Профиль → 🧾 Инструкция)
   ============================================================ */
/* Needs the element in the selector to outrank `textarea.field`'s min-height. */
textarea.instr-area { min-height: 200px; line-height: 1.55; font-size: 13.5px; }
.instr-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 7px; font-size: 11.5px; color: var(--text-mute);
}
.instr-foot b { color: var(--accent-3); font-family: "SF Mono", ui-monospace, monospace; }
.instr-foot #ins-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.instr-foot #ins-count.over { color: var(--danger); font-weight: 800; }
/* Preview of the exact text that lands in the clipboard. */
.instr-preview {
  white-space: pre-wrap; word-break: break-word; line-height: 1.55;
  font-size: 13px; color: var(--text-dim);
  max-height: 165px; overflow-y: auto; background: var(--bg);
}

/* ============================================================
   Trash (recycle bin)
   ============================================================ */
.trash-list { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; padding-right: 2px; }
.trash-row {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; min-width: 0;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.trash-row:hover { background: var(--surface); }
.trash-ico {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); background: var(--surface-2);
}
.trash-main { flex: 1 1 auto; min-width: 0; }
.trash-title { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-cnt {
  font-size: 10.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; vertical-align: 1px;
  background: var(--surface-3); border: 1px solid var(--line); color: var(--text-dim);
}
.trash-sub { font-size: 11.5px; color: var(--text-mute); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trash-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-dim);
  font-size: 15px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
}
.trash-btn:active { transform: scale(0.9); }
.trash-btn.restore:hover { color: var(--free); border-color: var(--free); background: rgba(52, 211, 153, 0.12); }
.trash-btn.kill:hover { color: var(--danger); border-color: var(--danger); background: rgba(255, 90, 122, 0.12); }
.trash-empty { text-align: center; padding: 30px 14px; color: var(--text-dim); font-size: 14px; font-weight: 700; }
.trash-empty-ico { font-size: 34px; margin-bottom: 8px; opacity: 0.55; }
.trash-empty span { display: block; margin-top: 5px; font-size: 12px; font-weight: 500; color: var(--text-mute); }

/* ============================================================
   Maintenance screen
   ============================================================ */
.maint-ico { font-size: 48px; margin: 8px 0 6px; animation: wrench 2.6s ease-in-out infinite; }
@keyframes wrench { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.maint-timer {
  font-family: "SF Mono", ui-monospace, monospace; font-size: 30px; font-weight: 800;
  color: var(--accent-3); margin: 14px 0 4px; letter-spacing: 0.02em;
}
.maint-until { font-size: 12.5px; color: var(--text-mute); }

/* ============================================================
   Toast with an action button (e.g. "Открыть корзину")
   ============================================================ */
.toast-action { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px 10px 16px; }
.toast-btn {
  flex: 0 0 auto; border: none; border-radius: 10px; padding: 8px 12px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-family: inherit; font-size: 13px; font-weight: 800;
  transition: transform 0.1s, filter 0.15s;
}
.toast-btn:active { transform: scale(0.95); filter: brightness(0.93); }