:root {
  --bg:            #000000;
  --bg-elev-1:     #111111;
  --bg-elev-2:     #1a1a1a;
  --bg-elev-3:     #242424;
  --bg-elev-4:     #2e2e2e;
  --border:        #2a2a2a;
  --border-strong: #444444;
  --border-glow:   rgba(255,255,255,0.10);
  --text:          #ffffff;
  --text-mute:     #cccccc;
  --text-dim:      #777777;
  --accent:        #ffffff;
  --danger:        #ff4444;
  --success:       #22dd66;
  --warn:          #ffaa00;
  /* SOLID colours that must NEVER be a gradient.
     Used for `color:` on buttons/toast/FAB. A CSS `color` property
     cannot accept a gradient, so we keep solid fallbacks here. */
  --bg-solid:      #000000;   /* solid version of --bg (for text on accent surfaces) */
  --on-accent:     #000000;   /* readable text/icon colour placed on top of --accent  */
  --on-text:       #000000;   /* readable text/icon colour placed on top of --text    */
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.8);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.5);
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.3);
  --radius:        16px;
  --radius-sm:     10px;
  --radius-lg:     22px;
  --ease:          cubic-bezier(.22,.61,.36,1);
}

/* ── Light theme ── */
body.light {
  --bg:            #d8d8d8;
  --bg-elev-1:     #f0f0f0;
  --bg-elev-2:     #e0e0e0;
  --bg-elev-3:     #c8c8c8;
  --bg-elev-4:     #b8b8b8;
  --border:        #a0a0a0;
  --border-strong: #808080;
  --border-glow:   rgba(0,0,0,0.08);
  --text:          #000000;
  --text-mute:     #111111;
  --text-dim:      #555555;
  --accent:        #000000;
  --bg-solid:      #d8d8d8;
  --on-accent:     #ffffff;
  --on-text:       #d8d8d8;
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.18);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.12);
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.10);
}

/* ── Midnight Blue theme ── */
body.midnight {
  --bg:            #070b18;
  --bg-elev-1:     #0d1424;
  --bg-elev-2:     #121c30;
  --bg-elev-3:     #1a2640;
  --bg-elev-4:     #243050;
  --border:        #1e2d4a;
  --border-strong: #2e4470;
  --border-glow:   rgba(100,160,255,0.12);
  --text:          #e8f0ff;
  --text-mute:     #a8b8d8;
  --text-dim:      #5a7099;
  --accent:        #6aa3ff;
  --danger:        #ff5566;
  --success:       #22ddaa;
  --warn:          #ffbb44;
  --bg-solid:      #070b18;
  --on-accent:     #070b18;
  --on-text:       #070b18;
  --shadow-lg:     0 20px 60px rgba(0,10,40,0.9);
  --shadow-md:     0 8px 32px rgba(0,10,40,0.6);
  --shadow-sm:     0 2px 12px rgba(0,10,40,0.4);
}

/* ── Mocha theme ── */
body.mocha {
  --bg:            #1a1008;
  --bg-elev-1:     #241810;
  --bg-elev-2:     #2e2016;
  --bg-elev-3:     #3a2a1e;
  --bg-elev-4:     #463428;
  --border:        #3a2818;
  --border-strong: #5a4030;
  --border-glow:   rgba(200,150,80,0.12);
  --text:          #f0e8d8;
  --text-mute:     #c8b090;
  --text-dim:      #806040;
  --accent:        #d4945a;
  --danger:        #ff5544;
  --success:       #88cc66;
  --warn:          #ffcc44;
  --bg-solid:      #1a1008;
  --on-accent:     #1a1008;
  --on-text:       #1a1008;
  --shadow-lg:     0 20px 60px rgba(10,5,0,0.9);
  --shadow-md:     0 8px 32px rgba(10,5,0,0.6);
  --shadow-sm:     0 2px 12px rgba(10,5,0,0.4);
}

/* ── Custom theme ── */
body.custom {
  --bg:            var(--ct-bg-gradient, var(--ct-bg-raw, #0a0a0a));
  --bg-elev-1:     var(--ct-card-raw, #111111);
  --bg-elev-2:     var(--ct-card2-raw, #1a1a1a);
  --bg-elev-3:     var(--ct-card3-raw, #242424);
  --bg-elev-4:     var(--ct-card4-raw, #2e2e2e);
  --border:        var(--ct-border-raw, #2a2a2a);
  --border-strong: var(--ct-border2-raw, #444444);
  --border-glow:   rgba(255,255,255,0.08);
  --text:          var(--ct-text-raw, #ffffff);
  --text-mute:     var(--ct-mute-raw, #cccccc);
  --text-dim:      var(--ct-dim-raw, #777777);
  --accent:        var(--ct-accent-raw, #6366f1);
  --danger:        #ff4444;
  --success:       #22dd66;
  --warn:          #ffaa00;
  /* CRITICAL: --bg in custom theme is a GRADIENT, which `color:` cannot use.
     These solid raw values guarantee readable text/icons on buttons & toast. */
  --bg-solid:      var(--ct-bg-raw, #0a0a0a);
  --on-accent:     var(--ct-on-accent, #ffffff);
  --on-text:       var(--ct-on-text, var(--ct-bg-raw, #0a0a0a));
  --shadow-lg:     0 20px 60px rgba(0,0,0,0.8);
  --shadow-md:     0 8px 32px rgba(0,0,0,0.5);
  --shadow-sm:     0 2px 12px rgba(0,0,0,0.3);
}
body.custom { background: var(--ct-bg-gradient, var(--ct-bg-raw, #0a0a0a)); }


body.purple {
  --bg:            #0a0415;
  --bg-elev-1:     #130825;
  --bg-elev-2:     #1c0e35;
  --bg-elev-3:     #271445;
  --bg-elev-4:     #341c58;
  --border:        #2d1650;
  --border-strong: #4a2880;
  --border-glow:   rgba(139,92,246,0.20);
  --text:          #f0e8ff;
  --text-mute:     #c4a8e8;
  --text-dim:      #7a5a9a;
  --accent:        #a78bfa;
  --danger:        #ff6b7a;
  --success:       #4dffa0;
  --warn:          #ffc966;
  --bg-solid:      #0a0415;
  --on-accent:     #0a0415;
  --on-text:       #0a0415;
  --shadow-lg:     0 20px 60px rgba(40,0,80,0.85);
  --shadow-md:     0 8px 32px rgba(40,0,80,0.55);
  --shadow-sm:     0 2px 12px rgba(40,0,80,0.35);
}

/* Theme picker grid in settings */
.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 12px 12px;
}
.theme-swatch {
  border-radius: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, transform .15s;
  position: relative;
}
.theme-swatch.active { border-color: var(--text); }
.theme-swatch:active { transform: scale(0.96); }
.swatch-preview {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
  overflow: hidden;
}
.swatch-preview span {
  width: 10px; height: 10px;
  border-radius: 50%;
  opacity: 0.85;
}
.swatch-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.swatch-label svg {
  flex-shrink: 0;
  opacity: 0.9;
}
/* Swatch colors per theme */
.swatch-dark   { background: #0a0a0a; }
.swatch-dark .swatch-label   { background: #111; color: #fff; }
.swatch-light  { background: #e8e8e8; }
.swatch-light .swatch-label  { background: #f0f0f0; color: #000; }
.swatch-midnight { background: linear-gradient(135deg,#070b18,#1a2640); }
.swatch-midnight .swatch-label { background: #0d1424; color: #e8f0ff; }
.swatch-mocha  { background: linear-gradient(135deg,#1a1008,#3a2a1e); }
.swatch-mocha  .swatch-label { background: #241810; color: #f0e8d8; }
.swatch-purple { background: linear-gradient(135deg,#0a0415,#271445); }
.swatch-purple .swatch-label { background: #130825; color: #f0e8ff; }
.swatch-custom { background: var(--ct-bg-gradient, var(--ct-bg-raw, linear-gradient(135deg,#0a0a0a,#1a1a2e))); }
.swatch-custom .swatch-label { background: var(--ct-card-raw, #111); color: var(--ct-text-raw, #fff); }

/* ── Custom Theme Builder ── */
.custom-theme-form { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 0; }
.ct-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.ct-row:last-of-type { border-bottom: none; }
.ct-label { font-size: 13px; color: var(--text-mute); font-weight: 500; }
.ct-controls { display: flex; align-items: center; gap: 8px; }
.ct-color-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 2px solid rgba(255,255,255,0.15);
  padding: 3px; cursor: pointer; background: none; flex-shrink: 0;
  transition: border-color .18s, transform .12s;
}
.ct-color-btn:active { transform: scale(0.92); border-color: rgba(255,255,255,0.5); }
.ct-color-swatch {
  display: block; width: 100%; height: 100%; border-radius: 8px;
}
.ct-fade-btn {
  display: flex; align-items: center; gap: 5px;
  background: var(--bg-elev-2); color: var(--text-mute);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 7px 10px; font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .18s;
  white-space: nowrap;
}
.ct-fade-btn:active { background: var(--bg-elev-3); }
.ct-fade-wrap { display: flex; align-items: center; gap: 6px; }

/* ─── Nixo Custom Pickers ──────────────────────────── */
.nixo-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.6);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
.nixo-modal-overlay.show { opacity: 1; pointer-events: all; }

.nixo-modal {
  position: fixed; left: 50%; bottom: -100%;
  transform: translateX(-50%);
  width: min(360px, calc(100vw - 32px));
  background: #263324; border-radius: 22px 22px 18px 18px;
  z-index: 201; padding: 24px 20px 20px;
  transition: bottom .3s cubic-bezier(.32,1.2,.5,1);
  border: 1px solid rgba(255,255,255,0.08);
}
.nixo-modal.show { bottom: max(20px, env(safe-area-inset-bottom)); }
.nixo-modal-list { padding: 0; overflow: hidden; }

.nixo-modal-title {
  font-size: 20px; font-weight: 700; color: #fff;
  margin-bottom: 18px; letter-spacing: -0.02em;
}
.nixo-modal-list .nixo-modal-title { padding: 20px 20px 0; }

/* Color picker swatches */
.cp-swatches {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.cp-swatch {
  aspect-ratio: 1; border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.25);
  cursor: pointer; transition: transform .12s, border-color .15s;
  outline: none;
}
.cp-swatch:active { transform: scale(0.9); }
.cp-swatch.cp-swatch-active { border-color: #fff; border-width: 3px; }

/* Bottom row: Customised + Chosen colour */
.cp-bottom-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cp-customised-btn {
  background: none; border: none; color: #4caf50; font-size: 14px;
  font-weight: 600; font-family: inherit; cursor: pointer; padding: 4px 0;
}
.cp-chosen-wrap { display: flex; align-items: center; gap: 10px; }
.cp-chosen-label { font-size: 13px; color: rgba(255,255,255,0.65); }
.cp-chosen-preview {
  width: 40px; height: 40px; border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.2);
}
.cp-hex-wrap {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.08); border-radius: 10px;
  padding: 8px 14px; margin-bottom: 12px;
  border: 1px solid rgba(255,255,255,0.12);
}
.cp-hex-hash { color: rgba(255,255,255,0.4); font-size: 15px; font-weight: 600; }
.cp-hex-input {
  background: none; border: none; outline: none;
  color: #fff; font-size: 15px; font-family: 'JetBrains Mono', monospace;
  letter-spacing: 1.5px; width: 100%; text-transform: uppercase;
}

/* Fade direction list */
.fd-options { padding: 8px 0; }
.fd-option {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; font-size: 16px; color: #fff; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background .15s;
}
.fd-option.last { border-bottom: none; }
.fd-option:active { background: rgba(255,255,255,0.05); }
.fd-radio {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.35);
  flex-shrink: 0; transition: all .15s;
  position: relative;
}
.fd-option.fd-selected .fd-radio {
  border-color: #4caf50;
  background: radial-gradient(circle at 50% 50%, #4caf50 40%, transparent 41%);
  box-shadow: 0 0 0 1px #4caf50;
}

/* Nixo modal action buttons */
.nixo-modal-actions {
  display: flex; justify-content: flex-end; gap: 20px;
  padding-top: 8px;
}
.nixo-modal-btn {
  background: none; border: none; font-family: inherit;
  font-size: 15px; font-weight: 700; color: rgba(255,255,255,0.5);
  cursor: pointer; padding: 6px 4px; transition: color .15s;
}
.nixo-modal-btn.accent { color: #4caf50; }
.ct-presets { padding: 12px 0 4px; }
.ct-preset-label { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ct-preset-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-preset {
  font-size: 11px; font-weight: 600; color: #fff;
  border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;
  padding: 6px 12px; cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.ct-preset:active { transform: scale(0.95); }

* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
button, .account-card, .sheet-item, .settings-row, .icon-btn, .fab-btn, .topbar, .bottom-nav, .timer-mini, .account-info, .account-meta, .service-icon, .brand-hero, .brand-title, .brand-sub, .empty-state, .detail-name, .detail-email, .expires-label, .timer-ring-wrap, .detail-card, .detail-row, .detail-card-title, .sync-indicator {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
html, body { height:100%; width:100%; }
html {
  overflow:hidden; position:fixed; inset:0;
  overscroll-behavior:none; -webkit-overflow-scrolling:touch;
}
body {
  font-family:'Sora','Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg); color:var(--text);
  overflow:hidden; position:fixed; inset:0;
  overscroll-behavior:none; touch-action:pan-y;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-0.015em;
  transition:background .3s var(--ease), color .3s var(--ease);
}

/* ─── App shell ─────────────────────────────────────────── */
#app {
  max-width:480px; margin:0 auto; height:100%;
  background:var(--bg); position:relative;
  display:flex; flex-direction:column;
  padding-bottom:env(safe-area-inset-bottom);
  overflow:hidden;
}
.screen {
  display:none; flex:1; flex-direction:column;
  min-height:0; overflow:hidden; position:relative;
}
.screen.active { display:flex; animation:screenIn .28s var(--ease); }
@keyframes screenIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
.screen-scroll-body {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
padding-bottom: 30px;
}

#screen-main .screen-scroll-body {
  overflow-y: hidden;
}
#screen-main .screen-scroll-body{
  overflow-y: hidden !important;
}
.screen-scroll-body::-webkit-scrollbar { display:none; }

.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 12px; gap:8px;
  background:var(--bg);
  position:sticky; top:0; z-index:50; flex-shrink:0;
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}
.topbar-title {
  font-weight:700; font-size:16px; letter-spacing:-0.03em;
}
.icon-btn {
  width:40px; height:40px; border-radius:12px;
  background:var(--bg-elev-2); border:1px solid var(--border-strong);
  color:var(--text); display:grid; place-items:center;
  cursor:pointer; transition:all .18s var(--ease); flex-shrink:0;
}
.icon-btn:hover  { background:var(--bg-elev-3); border-color:var(--border-glow); }
.icon-btn:active { transform:scale(.92); }
.icon-btn svg { width:18px; height:18px; }

/* ─── Login Screen ───────────────────────────────────────── */
.login-wrap {
  position:fixed; inset:0; max-width:480px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:40px 28px;
  text-align:center; gap:0; overflow:hidden;
  background:var(--bg);
}
.login-badge {
  width:88px; height:88px; border-radius:28px;
  background:linear-gradient(145deg, #1c1c1c 0%, #0a0a0a 100%);
  border:1px solid var(--border-strong);
  display:grid; place-items:center; margin-bottom:28px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset,
              0 20px 50px rgba(0,0,0,0.6);
  position:relative;
}
.login-badge::after {
  content:''; position:absolute; inset:0; border-radius:28px;
  background:linear-gradient(145deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events:none;
}
body.light .login-badge {
  background:linear-gradient(145deg, #111 0%, #000 100%);
}
.login-badge svg { width:50px; height:50px; }
.login-title {
  font-size:30px; font-weight:800; letter-spacing:-0.04em; margin-bottom:10px;
}
.login-sub {
  color:var(--text-mute); font-size:14px; max-width:280px;
  line-height:1.6; margin-bottom:40px;
}
.google-btn {
  width:100%; max-width:340px; padding:15px 22px; border-radius:14px;
  background:var(--accent); color:var(--on-accent);
  font-weight:700; font-size:15px; letter-spacing:-0.01em;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  transition:all .2s var(--ease);
  box-shadow: 0 4px 24px rgba(255,255,255,0.1);
  position:relative; overflow:hidden;
}
.google-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(145deg, rgba(255,255,255,0.08) 0%, transparent 60%);
  pointer-events:none;
}
body.light .google-btn { box-shadow:0 4px 24px rgba(0,0,0,0.15); }
.google-btn:hover  { transform:translateY(-2px); box-shadow:0 8px 32px rgba(255,255,255,0.14); }
.google-btn:active { transform:scale(.98) translateY(0); }
.google-btn .gicon {
  width:22px; height:22px; background:#fff; border-radius:50%;
  padding:2px; display:grid; place-items:center; flex-shrink:0;
}
.login-foot {
  margin-top:36px; color:var(--text-dim); font-size:11px;
  line-height:1.7; max-width:300px;
}
.login-status { margin-top:16px; color:var(--text-mute); font-size:13px; min-height:18px; }

/* ─── Brand Hero ─────────────────────────────────────────── */
.brand-hero {
  text-align:center; padding:24px 24px 12px;
}
.brand-badge {
  width:68px; height:68px; margin:0 auto 14px; border-radius:20px;
  background:linear-gradient(145deg, #1c1c1c, #0a0a0a);
  border:1px solid var(--border-strong);
  display:grid; place-items:center;
  box-shadow:0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) inset;
  position:relative;
}
.brand-badge::after {
  content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(145deg, rgba(255,255,255,0.05) 0%, transparent 55%);
  pointer-events:none;
}
body.light .brand-badge { background:linear-gradient(145deg, #111, #000); }
.brand-badge svg { width:38px; height:38px; }
.brand-title {
  font-size:20px; font-weight:700; letter-spacing:-0.03em; margin-bottom:4px;
}
.brand-sub { color:var(--text-mute); font-size:13px; letter-spacing:0; }

/* ─── Add Button ─────────────────────────────────────────── */
.add-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:16px 16px 12px; padding:15px;
  width:calc(100% - 32px); align-self:center;
  background:var(--accent); color:var(--on-accent);
  border:none; border-radius:14px;
  font-family:inherit; font-weight:700; font-size:15px; letter-spacing:-0.01em;
  cursor:pointer; transition:all .2s var(--ease);
  box-shadow:0 4px 20px rgba(255,255,255,0.08);
  position:relative; overflow:hidden;
}
.add-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(145deg, rgba(255,255,255,0.1) 0%, transparent 60%);
  pointer-events:none;
}
.add-btn svg { width:18px; height:18px; }
.add-btn:hover  { transform:translateY(-2px); box-shadow:0 8px 28px rgba(255,255,255,0.12); }
.add-btn:active { transform:scale(.98); }

/* ─── Account cards ─────────────────────────────────────── */
.accounts-list {
  padding:4px 14px 120px; display:flex; flex-direction:column; gap:8px;
}
.accounts-list.skeleton-exit {
  animation: contentFadeIn 0.22s ease forwards;
}
.account-card {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--bg-elev-1); border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer;
  transition:all .2s var(--ease); position:relative; overflow:hidden;
}
.account-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}
.account-card:hover {
  background:var(--bg-elev-2); border-color:var(--border-strong);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.account-card:active { transform:scale(.99) translateY(0); }

.service-icon {
  width:46px; height:46px; border-radius:14px;
  background:var(--bg-elev-3);
  display:grid; place-items:center;
  font-weight:800; font-size:18px; color:var(--text);
  border:1px solid var(--border-strong); flex-shrink:0;
  position:relative; overflow:hidden; letter-spacing:0;
}
.service-icon::after {
  content:''; position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(145deg, rgba(255,255,255,0.06) 0%, transparent 55%);
}
.service-icon.large {
  width:86px; height:86px; font-size:36px; border-radius:24px;
}

.account-info { flex:1; min-width:0; }
.account-name {
  font-weight:600; font-size:14px; color:var(--text);
  margin-bottom:4px; letter-spacing:-0.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.account-code {
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-weight:700; font-size:22px; letter-spacing:5px; color:var(--text);
}
.account-meta { display:flex; align-items:center; min-width:44px; justify-content:flex-end; }

/* Timer ring */
.timer-mini { position:relative; width:38px; height:38px; }
.timer-mini svg { transform:rotate(-90deg); width:38px; height:38px; }
.timer-mini circle { fill:none; stroke-width:3.5; }
.timer-mini .bg  { stroke:var(--border-strong); }
.timer-mini .fg  { stroke:var(--text); transition:stroke-dashoffset .95s linear; }
.timer-mini .num {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:10px; font-weight:700; font-family:'JetBrains Mono',monospace;
  color:var(--text-mute);
}

.empty-state {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px;
  padding:60px 24px; text-align:center; min-height:260px;
}
.empty-icon {
  width:72px; height:72px; border-radius:22px;
  background:var(--bg-elev-2); border:1px solid var(--border);
  display:grid; place-items:center; margin-bottom:4px;
}
.empty-icon svg { width:32px; height:32px; opacity:.35; }
.empty-state h3 { font-size:16px; font-weight:700; letter-spacing:-0.02em; color:var(--text-mute); }
.empty-state p  { font-size:13px; color:var(--text-dim); line-height:1.5; max-width:220px; }

/* ─── Skeleton ──────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position:-600px 0; }
  100% { background-position:600px 0; }
}
@keyframes contentFadeIn {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:translateY(0); }
}
.skeleton {
  border-radius:8px;
  background:linear-gradient(
    90deg,
    var(--bg-elev-2) 25%,
    var(--bg-elev-3) 50%,
    var(--bg-elev-2) 75%
  );
  background-size:1200px 100%;
  animation:shimmer 1.6s infinite linear;
}
.skeleton-card {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  background:var(--bg-elev-1); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; position:relative;
}
/* icon: exact match to .service-icon — 46×46, border-radius:14px */
.skeleton-icon  { width:46px; height:46px; border-radius:14px; flex-shrink:0; }
/* info: same flex layout as .account-info */
.skeleton-info  { flex:1; min-width:0; display:flex; flex-direction:column; }
/* name: font-size:14px × line-height:1.2 (Sora) = 16.8px ≈ 17px, margin-bottom:4px */
.skeleton-name  { height:17px; width:55%; border-radius:4px; margin-bottom:4px; }
/* code: font-size:22px × line-height:1.2 (JetBrains Mono) = 26.4px ≈ 26px */
.skeleton-code  { height:26px; width:72%; border-radius:4px; }
/* ring: exact match to .timer-mini — 38×38 circle */
.skeleton-ring  { width:38px; height:38px; border-radius:50%; flex-shrink:0; }

.skeleton-detail-icon      { width:86px; height:86px; border-radius:24px; margin:0 auto 10px; }
.skeleton-detail-name      { height:26px; width:50%; border-radius:8px; margin:0 auto 10px; }
.skeleton-detail-code-wrap { width:100%; max-width:340px; height:90px; border-radius:18px; margin:10px auto; }
.skeleton-detail-ring      { width:90px; height:90px; border-radius:50%; margin:10px auto; }
.skeleton-detail-card      { width:100%; max-width:380px; height:156px; border-radius:18px; margin:0 auto; }

.skeleton-user-card        { height:82px; border-radius:16px; margin-bottom:14px; }
.skeleton-settings-section { height:116px; border-radius:16px; margin-bottom:14px; }

.skeleton-add-icon  { width:72px; height:72px; border-radius:50%; margin:0 auto 14px; }
.skeleton-add-title { height:22px; width:58%; border-radius:8px; margin:0 auto 10px; }
.skeleton-add-sub   { height:13px; width:82%; border-radius:6px; margin:0 auto; }
.skeleton-input     { height:54px; border-radius:14px; }
.skeleton-btn       { height:54px; border-radius:14px; margin-top:12px; }

/* Skeleton → content crossfade — applied via JS when skeleton hides */
#detail-real-body.skeleton-exit,
#settings-real-body.skeleton-exit {
  animation: contentFadeIn 0.22s ease forwards;
}

/* ─── Bottom Nav (license bar) ───────────────────────────── */
.bottom-nav {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--bg); border-top:1px solid var(--border);
  padding:5px 14px calc(5px + env(safe-area-inset-bottom));
  flex-shrink:0;
}
.license-text {
  font-size:9px; color:var(--text-dim); font-weight:500;
  letter-spacing:0.03em; text-align:center; flex:1; user-select:none;
}
.footer-link {
  color:var(--text-dim); text-decoration:none; display:flex;
  align-items:center; padding:4px;
  transition:color .18s;
  -webkit-tap-highlight-color:transparent;
}
.footer-link:active { color:var(--text); }
.footer-link svg { width:13px; height:13px; }

/* ─── Forms (Add screen) ─────────────────────────────────── */
.add-hero { text-align:center; padding:22px 24px 14px; }
.key-circle {
  width:74px; height:74px; border-radius:50%; margin:0 auto 16px;
  background:linear-gradient(145deg, #1c1c1c, #0a0a0a);
  border:1px solid var(--border-strong);
  display:grid; place-items:center;
  box-shadow:0 10px 28px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,0.04) inset;
}
body.light .key-circle { background:linear-gradient(145deg, #111, #000); }
.key-circle svg { width:34px; height:34px; }
.add-hero h2 { font-size:20px; font-weight:700; letter-spacing:-0.03em; margin-bottom:8px; }
.add-hero p  { color:var(--text-mute); font-size:13px; line-height:1.6; max-width:300px; margin:0 auto; }

/* Info callout */
.info-callout {
  background:var(--bg-elev-2); border:1px solid var(--border-strong);
  border-radius:14px; padding:14px 16px;
  display:flex; align-items:flex-start; gap:10px;
}
.info-callout-icon {
  width:28px; height:28px; border-radius:8px;
  background:var(--bg-elev-3); border:1px solid var(--border);
  display:grid; place-items:center; flex-shrink:0; margin-top:1px;
}
.info-callout-icon svg { width:14px; height:14px; color:var(--text-mute); }
.info-callout-text { flex:1; }
.info-callout-text strong { font-size:13px; font-weight:700; display:block; margin-bottom:4px; }
.info-callout-text p { font-size:12px; color:var(--text-mute); line-height:1.6; }
.info-callout-text code {
  font-family:'JetBrains Mono',monospace; font-size:11px;
  background:var(--bg-elev-3); border:1px solid var(--border);
  padding:1px 5px; border-radius:4px; color:var(--text);
}

.form-body { padding:16px 16px 32px; display:flex; flex-direction:column; gap:12px; }
.input-label { font-size:12px; color:var(--text-mute); margin:4px 4px -2px; font-weight:600; letter-spacing:0.02em; text-transform:uppercase; }
.input-group {
  background:var(--bg-elev-1); border:1px solid var(--border);
  border-radius:14px; padding:0 14px;
  display:flex; align-items:center; gap:8px;
  transition:all .18s var(--ease);
}
.input-group:focus-within { border-color:var(--border-strong); background:var(--bg-elev-2); box-shadow:0 0 0 3px rgba(255,255,255,0.04); }
.input-group input {
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:15px; padding:16px 0;
}
.input-group input::placeholder { color:var(--text-dim); font-weight:500; }
.input-icon-btn {
  width:34px; height:34px; border-radius:10px; background:transparent;
  border:none; color:var(--text-mute);
  display:grid; place-items:center; cursor:pointer;
  transition:.15s var(--ease);
}
.input-icon-btn:hover { background:var(--bg-elev-3); color:var(--text); }
.input-icon-btn svg  { width:18px; height:18px; }

.error-msg {
  color:var(--danger); font-size:13px; padding:10px 14px;
  background:rgba(239,68,68,0.08); border-radius:12px;
  border:1px solid rgba(239,68,68,.2); line-height:1.5;
}
.form-submit-btn { margin:8px 0 0; }
.or-divider {
  display:flex; align-items:center; gap:12px;
  color:var(--text-dim); font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; margin:2px 0;
}
.or-divider::before, .or-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}
.outline-btn {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 18px; background:transparent; color:var(--text);
  border:1px solid var(--border-strong); border-radius:14px;
  font-family:inherit; font-weight:600; font-size:14px; cursor:pointer;
  transition:all .18s var(--ease);
}
.outline-btn:hover  { background:var(--bg-elev-2); border-color:var(--text); }
.outline-btn:active { transform:scale(.98); }
.outline-btn svg { width:18px; height:18px; }

/* ─── Detail Screen ─────────────────────────────────────── */
.detail-body-orig {
  padding:28px 20px 120px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.detail-icon-wrap { margin-bottom:8px; }
.detail-name  { font-size:24px; font-weight:800; letter-spacing:-0.03em; }
.detail-email { color:var(--text-mute); font-size:13px; margin-bottom:10px; }

.code-card {
  width:100%; max-width:340px;
  background:var(--bg-elev-1); border:1px solid var(--border);
  border-radius:20px; padding:24px 22px; margin:12px 0 16px;
  position:relative; overflow:hidden;
}
.code-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
}
.code-card-label {
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:12px;
}
.code-row {
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.detail-code-display {
  font-family:'JetBrains Mono','SF Mono',monospace;
  font-weight:800; font-size:36px; letter-spacing:8px; color:var(--text);
  line-height:1;
}
.copy-btn {
  width:42px; height:42px; border-radius:12px;
  background:var(--bg-elev-3); border:1px solid var(--border-strong);
  color:var(--text-mute); cursor:pointer;
  display:grid; place-items:center; transition:all .18s var(--ease);
  flex-shrink:0;
}
.copy-btn:hover  { background:var(--text); color:var(--on-text); border-color:var(--text); }
.copy-btn:active { transform:scale(.9); }
.copy-btn svg { width:17px; height:17px; }

.expires-label { font-size:12px; color:var(--text-dim); letter-spacing:.02em; }
.timer-ring-wrap {
  position:relative; width:84px; height:84px; margin:8px 0 16px;
}
.timer-ring { width:84px; height:84px; }
.timer-ring circle { stroke-linecap:round; }
.timer-text {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:22px; font-weight:800; color:var(--text);
  font-family:'JetBrains Mono',monospace;
}

.detail-card {
  width:100%; max-width:380px; background:var(--bg-elev-1);
  border:1px solid var(--border); border-radius:20px; padding:20px;
  text-align:left; position:relative; overflow:hidden;
}
.detail-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}
.detail-card-title {
  font-size:10px; color:var(--text-dim); font-weight:700;
  margin-bottom:14px; letter-spacing:.14em; text-transform:uppercase;
}
.detail-row {
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--border);
}
.detail-row:last-child { border-bottom:none; }
.detail-row-icon {
  width:32px; height:32px; border-radius:9px;
  background:var(--bg-elev-2); border:1px solid var(--border);
  display:grid; place-items:center; flex-shrink:0;
}
.detail-row-icon svg { width:16px; height:16px; color:var(--text-mute); }
.detail-row-label { font-size:11px; color:var(--text-dim); margin-bottom:2px; font-weight:500; }
.detail-row-val   { font-size:13px; color:var(--text); font-weight:600; word-break:break-all; }

/* ─── Settings ───────────────────────────────────────────── */
.settings-section {
  background:var(--bg-elev-1); border:1px solid var(--border);
  border-radius:18px; margin-bottom:12px;
  position:relative;
}
.settings-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
}
.settings-section-title {
  font-size:10px; letter-spacing:.14em; color:var(--text-dim);
  padding:14px 16px 6px; text-transform:uppercase; font-weight:700;
}
.settings-row {
  display:flex; align-items:center; gap:14px; padding:14px 16px;
  cursor:pointer; transition:.15s var(--ease);
  border-bottom:1px solid var(--border);
}
.settings-row:last-child { border-bottom:none; }
.settings-row:hover { background:var(--bg-elev-2); }
.settings-row:active { background:var(--bg-elev-3); }
.settings-row-icon {
  width:32px; height:32px; border-radius:9px;
  background:var(--bg-elev-2); border:1px solid var(--border);
  display:grid; place-items:center; flex-shrink:0;
}
.settings-row-icon svg { width:16px; height:16px; color:var(--text-mute); }
.settings-row .row-text { flex:1; }
.settings-row .row-title { font-weight:600; font-size:14px; }
.settings-row .row-sub   { font-size:12px; color:var(--text-mute); margin-top:2px; }

.user-card {
  display:flex; align-items:center; gap:14px; padding:18px;
  background:var(--bg-elev-1); border:1px solid var(--border);
  border-radius:18px; margin-bottom:12px; position:relative;
}
.user-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
}
.user-avatar {
  width:50px; height:50px; border-radius:50%;
  background:var(--bg-elev-3); display:grid; place-items:center;
  font-weight:800; font-size:19px; color:var(--text);
  overflow:hidden; flex-shrink:0; border:1px solid var(--border-strong);
}
.user-avatar img { width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }
.user-name  { font-weight:700; font-size:15px; letter-spacing:-0.01em; }
.user-email { font-size:12px; color:var(--text-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.signout-btn {
  width:100%; padding:15px; background:transparent; color:var(--danger);
  border:4px solid #4a1111;
border-radius:14px;
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
  transition:all .18s var(--ease);
}
.signout-btn:hover  { background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,.5); }
.signout-btn:active { transform:scale(.98); }

/* Toggle switch */
.switch { position:relative; width:44px; height:26px; flex-shrink:0; }
.switch input { display:none; }
.switch .slider {
  position:absolute; inset:0; background:var(--bg-elev-3);
  border-radius:26px; transition:.22s var(--ease); cursor:pointer;
  border:1px solid var(--border-strong);
}
.switch .slider::before {
  content:''; position:absolute; width:20px; height:20px; left:2px; top:2px;
  background:var(--text-dim); border-radius:50%; transition:.22s var(--ease);
}
.switch input:checked + .slider { background:var(--text); border-color:var(--text); }
.switch input:checked + .slider::before { transform:translateX(18px); background:var(--bg-solid); }

/* ─── Sync indicator ─────────────────────────────────────── */
.sync-indicator {
  position:fixed;
  bottom:calc(76px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%) translateY(12px);
  background:var(--bg-elev-2); border:1px solid var(--border-strong);
  color:var(--text); font-size:12px; font-weight:600;
  padding:7px 16px; border-radius:999px;
  display:flex; align-items:center; gap:8px; z-index:90;
  opacity:0; pointer-events:none; transition:.22s var(--ease);
  box-shadow:var(--shadow-md);
}
.sync-indicator.show { opacity:1; transform:translateX(-50%) translateY(0); }
.sync-dot { width:6px; height:6px; border-radius:50%; background:var(--success); box-shadow:0 0 8px var(--success); }
.sync-dot.syncing { background:var(--warn); box-shadow:0 0 8px var(--warn); animation:pulse 1s infinite; }
.sync-dot.error   { background:var(--danger); box-shadow:0 0 8px var(--danger); }
@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:.4;} }

/* ─── Toast ─────────────────────────────────────────────── */
.toast {
  position:fixed;
  bottom:calc(118px + env(safe-area-inset-bottom)); left:50%;
  transform:translateX(-50%) translateY(14px);
  background:var(--text); color:var(--on-text);
  padding:12px 24px; border-radius:999px; font-size:14px; font-weight:700;
  opacity:0; pointer-events:none; transition:.25s var(--ease);
  z-index:100; box-shadow:var(--shadow-md);
  max-width:82%; text-align:center; letter-spacing:-0.01em;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── Bottom Sheet ───────────────────────────────────────── */
.sheet-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.65);
  z-index:200; opacity:0; pointer-events:none; transition:.22s;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.sheet-overlay.show { opacity:1; pointer-events:auto; }
.sheet {
  position:fixed; left:50%; bottom:0; transform:translate(-50%,100%);
  width:100%; max-width:480px; background:var(--bg-elev-1);
  border-top-left-radius:24px; border-top-right-radius:24px;
  border:1px solid var(--border-strong); border-bottom:none;
  z-index:210; transition:.26s var(--ease);
  padding:8px 0 calc(24px + env(safe-area-inset-bottom));
}
.sheet.show { transform:translate(-50%,0); }
.sheet-handle {
  width:38px; height:4px; border-radius:2px;
  background:var(--border-strong); margin:10px auto 16px;
}
.sheet-item {
  display:flex; align-items:center; gap:14px; padding:15px 22px;
  cursor:pointer; color:var(--text); font-size:15px; font-weight:600;
  transition:.15s var(--ease);
}
.sheet-item:hover { background:var(--bg-elev-2); }
.sheet-item:active { background:var(--bg-elev-3); }
.sheet-item-icon {
  width:34px; height:34px; border-radius:10px;
  background:var(--bg-elev-2); border:1px solid var(--border);
  display:grid; place-items:center; flex-shrink:0;
}
.sheet-item-icon svg { width:16px; height:16px; color:var(--text-mute); }
.sheet-item.danger { color:var(--danger); }
.sheet-item.danger .sheet-item-icon { background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,.2); }
.sheet-item.danger .sheet-item-icon svg { color:var(--danger); }

/* ─── QR Scanner ─────────────────────────────────────────── */
.qr-overlay {
  position:fixed; inset:0; background:#000; z-index:300;
  display:none; flex-direction:column;
}
.qr-overlay.show { display:flex; }
.qr-overlay video { width:100%; height:100%; object-fit:cover; }
.qr-close {
  position:absolute; top:16px; right:16px; z-index:5;
  background:rgba(0,0,0,0.75); color:#fff;
  border:1px solid rgba(255,255,255,0.2);
}
.qr-hint {
  position:absolute; bottom:18%; left:50%; transform:translateX(-50%);
  color:#fff; font-size:14px; font-weight:600;
  background:rgba(0,0,0,0.55); padding:10px 22px; border-radius:999px;
  backdrop-filter:blur(8px); white-space:nowrap;
}
.qr-frame {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-58%);
  width:240px; height:240px; border-radius:18px;
  box-shadow:0 0 0 9999px rgba(0,0,0,0.62);
  border:2px solid rgba(255,255,255,0.9);
}
.qr-frame::before, .qr-frame::after {
  content:''; position:absolute;
  width:28px; height:28px; border-radius:0;
}

/* ─── Brand wordmark ─────────────────────────────────────── */
.brand-nixo {
  font-weight:800; letter-spacing:.06em;
  background:linear-gradient(165deg, #fff 30%, #666 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body.light .brand-nixo {
  background:linear-gradient(165deg, #000 30%, #555 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ─── Scrollbar hidden everywhere ───────────────────────── */
* { scrollbar-width:none; -ms-overflow-style:none; }
::-webkit-scrollbar { display:none; width:0; height:0; background:transparent; }

/* ─── Spinner ────────────────────────────────────────────── */
.spinner {
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--border-strong); border-top-color:var(--text);
  animation:spin .75s linear infinite; display:inline-block; vertical-align:middle;
}
@keyframes spin { to { transform:rotate(360deg); } }
.spinner.dark { border-color:rgba(0,0,0,0.18); border-top-color:#000; }

/* Full-page loader (legacy — kept for fallback) */
.full-loader {
  position:fixed; inset:0; background:var(--bg);
  display:grid; place-items:center; z-index:500;
}
.full-loader .spinner { width:30px; height:30px; border-width:3px; }

/* ─── Boot Skeleton (new) ─── */
.boot-skeleton {
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 500;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 0 0;
  overflow: hidden;
  animation: bootFadeIn .25s ease both;
}
@keyframes bootFadeIn { from { opacity: 0; } to { opacity: 1; } }
.boot-skeleton.fade-out { animation: bootFadeOut .3s ease forwards; }
@keyframes bootFadeOut { to { opacity: 0; visibility: hidden; } }

.bs-topbar {
  /* mirrors .topbar exactly: padding:16px 16px 12px, gap:8px */
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 12px; gap: 8px;
  border-bottom: 1px solid var(--border);
}
/* mirrors .icon-btn: width:40px height:40px border-radius:12px */
.bs-tb-icon { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
/* mirrors .topbar-title: font-size:16px → line-height ~1.2 → 19px rendered height */
.bs-tb-title { width: 110px; height: 19px; border-radius: 6px; }

.bs-hero {
  /* mirrors .brand-hero: text-align:center padding:24px 24px 12px */
  display: flex; flex-direction: column; align-items: center;
  padding: 24px 24px 12px;
}
/* mirrors .brand-badge: width:68px height:68px border-radius:20px margin:0 auto 14px */
.bs-hero-badge { width: 68px; height: 68px; border-radius: 20px; margin-bottom: 14px; }
/* mirrors .brand-title: font-size:20px lh~1.2 → 24px, margin-bottom:4px */
.bs-hero-title { width: 220px; height: 24px; border-radius: 6px; margin-bottom: 4px; }
/* mirrors .brand-sub: font-size:13px lh~1.2 → 16px */
.bs-hero-sub   { width: 175px; height: 16px; border-radius: 5px; }

.bs-list {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 16px 0;
  flex: 1;
}

/* Footer skeleton — mirrors .bottom-nav exactly:
   footer-link = display:flex align-items:center padding:4px → rendered 21×21
   license-text = font-size:9px flex:1 */
.bs-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 14px calc(5px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
  gap: 10px;
  flex-shrink: 0;
}
/* footer-link: padding:4px + svg:13px = 21px total rendered height/width */
.bs-footer-icon { width: 21px; height: 21px; border-radius: 5px; flex-shrink: 0; }
/* license-text: font-size:9px lh:1.2 = ~11px tall, spans center flex:1 */
.bs-footer-text { flex: 1; height: 11px; border-radius: 4px; margin: 0 auto; max-width: 200px; }

/* ─────────────────────────────────────────────────────────────────────
   OFFLINE / NO-INTERNET SCREEN
   ───────────────────────────────────────────────────────────────────── */
.offline-screen {
  position: fixed; inset: 0;
  background: var(--bg);
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px;
  text-align: center;
  animation: offlineIn .35s ease both;
}
.offline-screen.show { display: flex; }
@keyframes offlineIn {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
.offline-inner {
  width: 100%; max-width: 380px;
  display: flex; flex-direction: column;
  align-items: center; gap: 14px;
}
.offline-icon {
  width: 96px; height: 96px;
  border-radius: 28px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  color: var(--text-mute);
  margin-bottom: 4px;
  position: relative;
  animation: pulseRing 2.4s ease-in-out infinite;
}
.offline-icon svg { width: 50px; height: 50px; }
@keyframes pulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.04); }
  50%      { box-shadow: 0 0 0 14px rgba(255,255,255,0.00); }
}
.offline-title {
  font-size: 26px; font-weight: 800;
  color: var(--text); margin: 4px 0 0;
  letter-spacing: -0.02em;
}
.offline-sub {
  font-size: 14px; color: var(--text-mute);
  line-height: 1.55; margin: 0 0 6px;
  max-width: 320px;
}
.offline-tips {
  width: 100%;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 6px 0 4px;
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
}
.offline-tip-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--text-mute);
}
.offline-tip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-dim); flex-shrink: 0;
}
.offline-retry-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--text); color: var(--on-text);
  border: none; border-radius: 14px;
  padding: 13px 26px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform .15s, opacity .15s;
  -webkit-tap-highlight-color: transparent;
  margin-top: 8px;
  min-width: 160px;
}
.offline-retry-btn:active { transform: scale(0.96); }
.offline-retry-btn:disabled { opacity: 0.55; cursor: default; }
.offline-retry-btn .spinner { border-color: rgba(0,0,0,0.18); border-top-color: var(--on-text); }
.offline-status {
  font-size: 12px; color: var(--text-dim);
  min-height: 16px; margin-top: 6px;
}
.offline-status.error { color: var(--danger); }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width:380px) {
  .account-code         { font-size:20px; letter-spacing:4px; }
  .detail-code-display  { font-size:30px; letter-spacing:6px; }
}

/* ── Settings: scrollable ── */
.settings-fixed-body {
  flex: 1;
  min-height: 0;        /* CRITICAL: allows flex child to shrink below content size */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.settings-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.settings-body::-webkit-scrollbar { display: none; }

.fab-btn {
  position: fixed;
  bottom: calc(72px + env(safe-area-inset-bottom));
  right: 20px;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--text);
  color: var(--on-text);
  border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  z-index: 100;
  /* Always flex — show/hide via scale+opacity for smooth spring animation */
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition:
    opacity 0.28s cubic-bezier(0.34,1.56,0.64,1),
    transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.fab-btn.fab-visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.fab-btn.fab-visible:active { transform: scale(0.88) !important; }
.fab-btn svg { width: 24px; height: 24px; }

/* ── Custom Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.modal-overlay.show { opacity: 1; pointer-events: all; }
.custom-modal {
  position: fixed;
  bottom: 50%; left: 50%;
  transform: translate(-50%, 50%) scale(0.9);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 24px 20px;
  width: min(88vw, 320px);
  z-index: 201;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.custom-modal.show {
  opacity: 1; pointer-events: all;
  transform: translate(-50%, 50%) scale(1);
}
.modal-title {
  font-size: 17px; font-weight: 700;
  color: var(--text); margin-bottom: 10px;
}
.modal-body {
  font-size: 14px; color: var(--text-mute);
  line-height: 1.5; margin-bottom: 20px;
}
.modal-actions {
  display: flex; gap: 10px;
}
.modal-btn {
  flex: 1; height: 44px; border-radius: 12px;
  border: none; font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: opacity 0.15s;
}
.modal-btn:active { opacity: 0.7; }
.modal-btn.cancel {
  background: var(--surface); color: var(--text);
}
.modal-btn.danger {
  background: var(--danger); color: #fff;
}
.modal-btn.confirm {
  background: var(--text); color: var(--on-text);
}

/* ── Detail page: no scroll, fixed layout ── */
#screen-detail #detail-real-body {
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
}
.detail-body {
  flex: 1;
  overflow: hidden;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/* ── Add screen: no scroll, fixed layout ── */
#screen-add .screen-scroll-body{
    overflow-y: hidden !important;
}
.add-fixed-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.add-fixed-body .add-hero {
  padding: 18px 20px 10px;
  flex-shrink: 0;
}
.add-fixed-body .form-body {
  flex: 1;
  overflow: hidden;
  padding: 10px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}
.add-fixed-body .info-callout {
  padding: 11px 14px;
}
.add-fixed-body .info-callout-text strong {
  font-size: 12px;
  margin-bottom: 3px;
}
.add-fixed-body .info-callout-text p {
  font-size: 11px;
  line-height: 1.5;
}
.add-fixed-body .input-group input {
  padding: 13px 0;
}
.add-fixed-body .add-btn {
  margin: 4px 0 0;
}
.add-fixed-body .or-divider {
  margin: 2px 0;
}

/* ── Detail screen: storage text fix ── */
.detail-row-val {
  font-size: 12px !important;
  color: var(--text);
  font-weight: 600;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}
.detail-row-label {
  font-size: 10px !important;
}
.detail-card-title {
  font-size: 9px !important;
  margin-bottom: 10px;
}
.detail-row {
  padding: 11px 0 !important;
}

/* ── Dark mode: better outdoor visibility ── */

/* ── Light mode: high contrast for outdoor ── */
body.light .account-code { color: #000; }
body.light .detail-code-display { color: #000; }
body.light .brand-badge,
body.light .login-badge { background: linear-gradient(145deg, #1a1a1a 0%, #000 100%); }
body.light .topbar { background: #d8d8d8; }
body.light .bottom-nav { background: #d8d8d8; }
body.light .footer-link { color: #555; }