:root {
  --bg:#0e1418; --bg-2:#131c22; --panel:#19242b; --panel-2:#1f2d36;
  --line:#2a3b45; --text:#e8eef1; --muted:#7f95a1;
  --accent:#2fd3c4; --accent-dim:#1c8079;
  --gold:#e5b769; --danger:#e2685f; --green:#5fcf86; --red:#e2685f; --blue:#60aaee;
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Outfit',sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;position:fixed;inset:0}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(900px 500px at 80% -10%,rgba(47,211,196,.10),transparent 60%),radial-gradient(700px 600px at -10% 100%,rgba(229,183,105,.07),transparent 60%);pointer-events:none;z-index:0}
#app{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;max-width:480px;margin:0 auto}

@media (min-width:600px) {
  #app {
    max-width: 680px;
  }
  main {
    padding: 8px 48px 32px;
  }
  header {
    padding-left: 48px;
    padding-right: 48px;
  }
  /* Nav floats as a pill at the bottom. */
  nav {
    margin: 0 auto 24px;
    width: fit-content;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(19,28,34,.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 6px 10px;
    gap: 4px;
    box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(47,211,196,.06);
  }
  nav button {
    border-radius: 999px;
    padding: 10px 18px;
    min-width: unset;
    flex: unset;
  }
  nav button.active {
    background: var(--panel-2);
  }
  /* More breathing room on cards and panels */
  .dial { width: 300px; height: 300px; }
  .stat-strip { margin-top: 28px; }
  .card-type-row { padding: 16px; }
}

@media (min-width:900px) {
  #app { max-width: 800px; }
  main { padding: 8px 80px 32px; }
  header { padding-left: 80px; padding-right: 80px; }
}

header{padding:calc(var(--safe-top) + 16px) 22px 14px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(150deg,var(--accent),var(--accent-dim));display:grid;place-items:center;box-shadow:0 4px 16px rgba(47,211,196,.3)}
.brand .mark svg{width:17px;height:17px}
.brand h1{font-family:'Fraunces',serif;font-weight:600;font-size:22px;letter-spacing:-.01em}
.header-status{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:5px 9px;border-radius:999px}
.header-status.locked{color:var(--accent);border-color:var(--accent-dim)}

main{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:4px 22px 24px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
main::-webkit-scrollbar{width:3px}
main::-webkit-scrollbar-track{background:transparent}
main::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.screen{display:none;animation:fade .35s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Dial */
.dial-wrap{display:flex;flex-direction:column;align-items:center;margin-top:6px}
.dial{position:relative;width:268px;height:268px;display:grid;place-items:center}
.dial svg{position:absolute;inset:0;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--panel-2);stroke-width:14}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:14;stroke-linecap:round;transition:stroke-dashoffset .6s ease,stroke .4s ease;filter:drop-shadow(0 0 8px rgba(47,211,196,.4))}
.dial-inner{text-align:center;z-index:2}
.dial-mode{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.dial-time{font-family:'Space Mono',monospace;font-weight:700;font-size:33px;line-height:1.05;letter-spacing:-.01em}
.dial-sub{font-size:12px;color:var(--muted);margin-top:8px;max-width:160px}
.dial.idle .ring-fg{stroke:var(--line);filter:none}
.dial.idle .dial-mode{color:var(--muted)}
.dial.overdue .ring-fg{stroke:var(--gold);filter:drop-shadow(0 0 8px rgba(229,183,105,.4))}
.dial.overdue .dial-mode{color:var(--gold)}

.stat-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:13px 10px;text-align:center}
.stat .v{font-family:'Space Mono',monospace;font-weight:700;font-size:17px}
.stat .l{font-size:10px;color:var(--muted);margin-top:3px;letter-spacing:.04em;text-transform:uppercase}

/* Buttons */
.btn{width:100%;border:none;border-radius:14px;font-family:'Outfit',sans-serif;font-weight:600;font-size:16px;padding:16px;cursor:pointer;transition:transform .12s ease,opacity .2s ease;color:#06100f}
.btn:active{transform:scale(.975)}
.btn-primary{background:linear-gradient(150deg,var(--accent),var(--accent-dim))}
.btn-gold{background:linear-gradient(150deg,var(--gold),#c9974a)}
.btn-danger{background:var(--danger);color:#fff}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
.btn-block{margin-top:14px}
.btn-sm{padding:11px;font-size:14px}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-row{display:flex;gap:10px;margin-top:14px}
.btn-row .btn{margin:0}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:14px}
.panel h3{font-family:'Fraunces',serif;font-weight:600;font-size:16px;margin-bottom:4px}
.panel p.hint{font-size:12px;color:var(--muted);line-height:1.5}
.section-label{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:26px 4px 2px;display:flex;justify-content:space-between;align-items:center}
.section-label a{color:var(--accent);text-decoration:none;font-size:11px;cursor:pointer}

/* Fields */
.field{margin-top:16px}
.field>label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px;letter-spacing:.02em}
/* Password field with show/hide toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:44px}
.pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:4px}
/* Password strength bar */
.pw-strength{margin-top:6px;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.pw-strength-bar{height:100%;border-radius:2px;transition:width .2s,background .2s}
.pw-strength-label{font-size:11px;color:var(--muted);margin-top:4px}
.stepper{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:8px}
.stepper button{width:40px;height:40px;border-radius:9px;border:none;background:var(--panel);color:var(--text);font-size:22px;font-weight:600;cursor:pointer}
.stepper button:active{background:var(--accent-dim)}
.stepper .val{flex:1;text-align:center;font-family:'Space Mono',monospace;font-weight:700;font-size:18px}
input[type=text],input[type=password],input[type=email],textarea{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:13px;color:var(--text);font-family:'Outfit',sans-serif;font-size:15px;outline:none;transition:border-color .15s}
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:none;min-height:60px}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.toggle-row .tx{font-size:14px}
.toggle-row .tx small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.switch{width:46px;height:27px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.switch.on{background:var(--accent-dim);border-color:var(--accent)}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--text);transition:transform .2s}
.switch.on::after{transform:translateX(19px);background:var(--accent)}

/* Subtype cards */
.sub-card{display:flex;gap:13px;align-items:flex-start;background:var(--panel);border:1.5px solid var(--line);border-radius:16px;padding:15px;margin-top:12px;cursor:pointer;transition:border-color .2s,background .2s}
.sub-card.sel{border-color:var(--accent);background:var(--panel-2)}
.sub-card .ic{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:var(--panel-2);display:grid;place-items:center}
.sub-card.sel .ic{background:rgba(47,211,196,.14)}
.sub-card .ic svg{width:21px;height:21px}
.sub-card .txt strong{font-family:'Fraunces',serif;font-weight:600;font-size:15.5px;display:block}
.sub-card .txt span{font-size:12px;color:var(--muted);line-height:1.45}

/* Card type rows */
.card-type-row{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px;margin-top:10px}
.card-type-row .row-top{display:flex;align-items:center;gap:10px}
.card-type-row .cswatch{width:11px;height:11px;border-radius:3px;flex-shrink:0}
.card-type-row .rinfo{flex:1;min-width:0}
.card-type-row .rinfo strong{font-size:13.5px}
.card-type-row .rinfo small{display:block;font-size:11px;color:var(--muted);margin-top:2px;line-height:1.35}
.mini-stepper{display:flex;align-items:center;gap:6px;flex-shrink:0}
.mini-stepper button{width:32px;height:32px;border-radius:8px;border:none;background:var(--panel-2);color:var(--text);font-size:18px;font-weight:600;cursor:pointer}
.mini-stepper button:active{background:var(--accent-dim)}
.mini-stepper .val{width:30px;text-align:center;font-family:'Space Mono',monospace;font-weight:700;font-size:15px}
.card-params{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.param-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.param-row label{font-size:12px;color:var(--muted)}

/* Estimate box */
.estimate-box{background:linear-gradient(150deg,rgba(47,211,196,.10),rgba(47,211,196,.02));border:1px solid var(--accent-dim);border-radius:13px;padding:14px;margin-top:14px;text-align:center}
.estimate-box .ebig{font-family:'Space Mono',monospace;font-weight:700;font-size:22px;color:var(--accent)}
.estimate-box .esub{font-size:11px;color:var(--muted);margin-top:4px}

/* Pills */
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.pill{font-family:'Space Mono',monospace;font-size:11px;padding:5px 10px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)}
.pill.accent{color:var(--accent);border-color:var(--accent-dim)}
.pill.green{color:var(--green)}
.pill.red{color:var(--red)}
.pill.gold{color:var(--gold)}

/* ── Full-screen card experience ── */
#cardScreen{
  position:fixed;inset:0;z-index:50;
  background:#0a1218;
  background:linear-gradient(160deg,#0a1218 0%,#0e1c26 60%,#091018 100%);
  display:none;flex-direction:column;align-items:center;
  padding:calc(var(--safe-top)+8px) 24px calc(var(--safe-bottom)+16px);
  animation:cardScreenIn .3s ease;
  isolation:isolate;
  overflow:hidden;
}
#cardScreen.active{display:flex}
@keyframes cardScreenIn{from{opacity:0}to{opacity:1}}

/* Spacer above card — shares free space with #csBelow to keep card centered */
#csAbove{ flex:1; min-height:0; }

/* Card — fixed size, never moves */
#cardStackWrap{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Result area below — shares remaining space, content starts at top */
#csBelow{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:20px;
  width:100%;
  max-width:340px;
  overflow:hidden;
  min-height:0;
}

/* Minimal exit button */
.cs-exit-btn{
  position:absolute;top:calc(var(--safe-top)+14px);right:18px;
  background:none;border:none;color:var(--muted);
  font-size:18px;line-height:1;padding:8px;cursor:pointer;
  opacity:.5;transition:opacity .2s;
  z-index:2;
}
.cs-exit-btn:active{opacity:1}

/* Card stack */
.card-stack{position:relative;width:200px;height:300px;margin:20px 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stack-ghost{
  position:absolute;width:200px;height:300px;border-radius:18px;
  background:var(--panel-2);border:1px solid var(--line);
  transition:transform .3s ease;
}
.stack-ghost:nth-child(1){transform:rotate(-5deg) translate(-6px,6px);opacity:.5}
.stack-ghost:nth-child(2){transform:rotate(-2.5deg) translate(-3px,3px);opacity:.7}

/* The actual card — 3-D flip */
.card-flipper{
  position:absolute;width:200px;height:300px;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.4,0,.2,1);
  cursor:pointer;
}
.card-flipper.flipped{transform:rotateY(180deg)}
.card-face,.card-back{
  position:absolute;inset:0;border-radius:18px;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6),0 4px 16px rgba(0,0,0,.4);
}

/* Card back */
.card-back{
  background:linear-gradient(150deg,#1a2d3a,#0e1c26);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.card-back svg.cb-pattern{width:100%;height:100%;position:absolute;inset:0;opacity:.18;display:block}
.card-back-logo{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:1;
  width:64px;height:64px;border-radius:16px;
  background:linear-gradient(150deg,var(--accent),var(--accent-dim));
  display:grid;place-items:center;
  box-shadow:0 4px 20px rgba(47,211,196,.35);
}
.card-back-logo svg{width:34px;height:34px}

/* Card face */
.card-face{
  transform:rotateY(180deg);
  display:flex;flex-direction:column;
  overflow:hidden;
  border:none;
}
.card-face.c-green{background:linear-gradient(160deg,#1a4030,#0d2a1e)}
.card-face.c-red{background:linear-gradient(160deg,#3d1a1a,#2a0e0e)}
.card-face.c-gold{background:linear-gradient(160deg,#3a2e10,#261f0a)}
.card-face.c-blue{background:linear-gradient(160deg,#102640,#091a2e)}
.card-face.c-accent{background:linear-gradient(160deg,#0d3330,#061f1e)}

/* Card face color accents per type */
.c-green .cf-symbol{color:#7ef7b0;text-shadow:0 0 40px rgba(95,207,134,.6)}
.c-green .cf-corner{color:rgba(126,247,176,.7)}
.c-green .cf-band{background:rgba(95,207,134,.12);border-color:rgba(95,207,134,.2)}
.c-red .cf-symbol{color:#ff9a9a;text-shadow:0 0 40px rgba(226,104,95,.6)}
.c-red .cf-corner{color:rgba(255,154,154,.7)}
.c-red .cf-band{background:rgba(226,104,95,.12);border-color:rgba(226,104,95,.2)}
.c-gold .cf-symbol{color:#ffd97a;text-shadow:0 0 40px rgba(229,183,105,.6)}
.c-gold .cf-corner{color:rgba(255,217,122,.7)}
.c-gold .cf-band{background:rgba(229,183,105,.12);border-color:rgba(229,183,105,.2)}
.c-blue .cf-symbol{color:#90ccff;text-shadow:0 0 40px rgba(96,170,238,.6)}
.c-blue .cf-corner{color:rgba(144,204,255,.7)}
.c-blue .cf-band{background:rgba(96,170,238,.12);border-color:rgba(96,170,238,.2)}

/* Card face structure */
.cf-corner-tl,.cf-corner-br{
  position:absolute;font-family:'Space Mono',monospace;font-weight:700;font-size:12px;
  line-height:1.2;padding:10px 12px;
}
.cf-corner-tl{top:0;left:0}
.cf-corner-br{bottom:0;right:0;transform:rotate(180deg)}
.cf-label{font-size:9px;display:block;letter-spacing:.08em;opacity:.8;font-weight:400;text-transform:uppercase}
.cf-body{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 16px;position:relative;
}
.cf-symbol{font-size:72px;line-height:1;margin-bottom:4px;user-select:none}
.cf-name{
  font-family:'Fraunces',serif;font-weight:600;font-size:17px;
  color:rgba(255,255,255,.9);margin-top:8px;text-align:center;
}
.cf-desc{
  font-size:11px;color:rgba(255,255,255,.5);
  text-align:center;margin-top:6px;line-height:1.45;
  padding:0 4px;
}
.cf-band{
  border-top:1px solid;padding:8px 16px;text-align:center;
  font-size:10px;color:rgba(255,255,255,.5);letter-spacing:.05em;
}

/* Tap hint */
.cs-tap-hint{
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
  animation:pulse 2s ease-in-out infinite;
  text-align:center;
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:.9}}

/* Result bar — fades in below card, no layout shift */
.cs-result{
  text-align:center;width:100%;
  animation:resultIn .4s ease;
}
@keyframes resultIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cs-result .cs-effect{font-size:15px;color:var(--text);font-weight:500;line-height:1.45}
.cs-result .cs-pool{font-size:12px;color:var(--muted);margin-top:4px}

/* Key break animation */
@keyframes keyBreak {
  0%   { transform: scale(1) rotate(0deg); filter: none; }
  20%  { transform: scale(1.15) rotate(-8deg); filter: brightness(1.4); }
  40%  { transform: scale(0.95) rotate(12deg) translateX(6px); filter: brightness(0.8) saturate(0.4); }
  60%  { transform: scale(1.05) rotate(-6deg) translateX(-4px); filter: brightness(0.6); }
  80%  { transform: scale(0.9) rotate(4deg) translateX(2px); filter: brightness(0.4) saturate(0); }
  100% { transform: scale(0.85) rotate(2deg); filter: brightness(0.3) saturate(0); opacity: 0.4; }
}
.cf-symbol.breaking {
  animation: keyBreak 0.7s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes cardShake {
  0%,100% { transform: rotateY(180deg); }
  20%  { transform: rotateY(180deg) translateX(-8px) rotate(-2deg); }
  40%  { transform: rotateY(180deg) translateX(8px) rotate(2deg); }
  60%  { transform: rotateY(180deg) translateX(-5px) rotate(-1deg); }
  80%  { transform: rotateY(180deg) translateX(5px) rotate(1deg); }
}
.card-flipper.breaking {
  animation: cardShake 0.5s ease;
}

/* Jackpot dice */
@keyframes diceRoll {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(90deg) scale(1.1); }
  50%  { transform: rotate(180deg) scale(0.95); }
  75%  { transform: rotate(270deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}
.dice {
  display: inline-block;
  animation: diceRoll 0.4s linear infinite;
}

/* Coin flip */
@keyframes coinSpin {
  0%   { transform: rotateY(0deg) scale(1); }
  50%  { transform: rotateY(900deg) scale(1.15); }
  100% { transform: rotateY(1800deg) scale(1); }
}
@keyframes coinLand {
  0%   { transform: rotateY(1800deg) scale(1.15); }
  70%  { transform: rotateY(1800deg) scale(0.95); }
  100% { transform: rotateY(1800deg) scale(1); }
}
.coin-spinning { display:inline-block; animation: coinSpin 1s cubic-bezier(.4,0,.2,1) forwards; font-size:56px; }
.coin-landed   { display:inline-block; animation: coinLand .3s ease forwards; font-size:56px; }
.cs-key-btns{
  display:flex;gap:12px;width:100%;
  animation:resultIn .4s ease;
}
.cs-key-btns .btn{margin:0}

/* Progress — sits below result/hint naturally */
.cs-progress{
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
  text-align:center;min-height:16px;
}

.deck-meta{display:flex;justify-content:space-around;margin-top:16px;font-family:'Space Mono',monospace}
.deck-meta .dm{text-align:center}
.deck-meta .dm .n{font-weight:700;font-size:15px}
.deck-meta .dm .t{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}

/* Preset list */
.preset-item{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px}
.preset-item .pi-top{display:flex;align-items:center;gap:12px}
.preset-item .pi-info{flex:1;min-width:0}
.preset-item .pi-info strong{font-size:15px;font-family:'Fraunces',serif;font-weight:600}
.preset-item .pi-info small{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.preset-item .pi-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.preset-item .pi-actions .btn{margin:0}
.preset-item.builtin{border-color:transparent;background:var(--surface)}
.preset-item:hover{border-color:var(--accent);transition:border-color .15s}

/* Standalone card color chips (used in preset detail breakdown) */
.card-chip{font-size:16px;display:flex;align-items:center;justify-content:center}
.card-chip.c-green{background:linear-gradient(135deg,#1a4030,#0d2a1e);color:#7ef7b0;border-radius:8px}
.card-chip.c-red  {background:linear-gradient(135deg,#3d1a1a,#2a0e0e);color:#ff9a9a;border-radius:8px}
.card-chip.c-gold {background:linear-gradient(135deg,#3a2e10,#261f0a);color:#ffd97a;border-radius:8px}
.card-chip.c-blue {background:linear-gradient(135deg,#102640,#091a2e);color:#90ccff;border-radius:8px}
.card-chip.c-accent{background:linear-gradient(135deg,#0d3330,#061f1e);color:var(--accent);border-radius:8px}

/* History */
.hist-item{display:flex;align-items:center;gap:13px;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:13px;margin-top:10px}
.hist-item .hdot{width:9px;height:9px;border-radius:50%;background:var(--accent);flex-shrink:0}
.hist-item .hdot.abort{background:var(--danger)}
.hist-item .hmeta{flex:1}
.hist-item .hmeta strong{font-size:14px;font-weight:600}
.hist-item .hmeta small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.hist-item .hdur{font-family:'Space Mono',monospace;font-weight:700;font-size:14px}

.empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:13px}
.empty svg{width:44px;height:44px;opacity:.3;margin-bottom:12px}

/* Vault */
.vault-box{background:var(--panel-2);border:1px dashed var(--line);border-radius:14px;padding:16px;text-align:center;margin-top:14px}
.vault-box.sealed{border-style:solid;border-color:var(--accent-dim)}
.vault-box.broken{border-style:solid;border-color:var(--danger)}
.vault-box .vlock{width:38px;height:38px;margin:0 auto 8px}
.vault-thumb{width:100%;max-height:240px;object-fit:contain;border-radius:10px;margin-top:10px;background:#000}
.vault-cap-btn{display:flex;gap:10px;margin-top:12px}
.vault-cap-btn .btn{margin:0}
.vault-text-show{font-family:'Space Mono',monospace;font-size:22px;font-weight:700;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;margin-top:10px;letter-spacing:.08em;word-break:break-word}

/* Nav */
nav{display:flex;background:var(--bg-2);border-top:1px solid var(--line);padding-bottom:var(--safe-bottom);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav button{flex:1;min-width:68px;background:none;border:none;padding:16px 8px 14px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:'Outfit',sans-serif;font-size:11px;transition:color .2s}
nav button svg{width:24px;height:24px;flex-shrink:0}
nav button.active{color:var(--accent)}

/* Toast & modal */
#toast{position:fixed;left:50%;bottom:calc(var(--safe-bottom) + 80px);transform:translateX(-50%) translateY(20px);background:var(--panel-2);border:1px solid var(--line);color:var(--text);padding:12px 20px;border-radius:12px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:80;box-shadow:0 12px 30px rgba(0,0,0,.5);max-width:88%;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.modal-bg{position:fixed;inset:0;background:rgba(6,10,12,.78);display:none;align-items:flex-end;justify-content:center;z-index:60;backdrop-filter:blur(3px)}
.modal-bg.show{display:flex;animation:fade .25s ease}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:22px 22px 0 0;width:100%;max-width:480px;padding:22px 22px calc(var(--safe-bottom) + 22px);animation:slideup .3s cubic-bezier(.2,.8,.2,1);max-height:88vh;overflow-y:auto}
@keyframes slideup{from{transform:translateY(100%)}to{transform:none}}

@media (min-width:600px) {
  nav {
    border-top: none;
    background: transparent;
    padding-bottom: 0;
    justify-content: center;
  }
  nav button { flex: unset; }
  nav button.active { color: var(--accent); background: none; }
  .modal-bg { align-items: center; }
  .modal {
    border-radius: 22px;
    max-width: 560px;
    animation: fade .25s ease;
  }
  #toast { bottom: 80px; }
}
.modal h3{font-family:'Fraunces',serif;font-weight:600;font-size:19px;margin-bottom:6px}
.modal p{font-size:13px;color:var(--muted);line-height:1.55;margin-bottom:16px}
.modal-actions{display:flex;gap:10px}
.modal-actions .btn{margin-top:0}
/* QR share */
.qr-wrap{display:flex;justify-content:center;margin:16px 0}
.qr-wrap canvas,.qr-wrap img{border-radius:10px;background:#fff;padding:10px}
.share-url{font-family:'Space Mono',monospace;font-size:11px;word-break:break-all;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--muted);margin-top:10px;line-height:1.5}
/* Import screen */
#screen-import{background:var(--bg)}
.import-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;margin-top:20px;text-align:center}
.import-card h2{font-family:'Fraunces',serif;font-weight:600;font-size:22px;margin-bottom:6px}
.import-card .sub{font-size:13px;color:var(--muted);margin-bottom:18px}

/* ── Auth & account UI ── */
.notif-badge{
  position:absolute;top:-4px;right:-4px;
  width:18px;height:18px;border-radius:50%;
  background:var(--danger);color:#fff;
  font-family:'Space Mono',monospace;font-size:9px;font-weight:700;
  display:none;align-items:center;justify-content:center;
}
.sync-dot{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-right:4px;
  animation:syncPulse 2s ease-in-out infinite;
}
@keyframes syncPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Keyholder dashboard ── */
.kh-session{
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:14px;margin-top:10px;
}
.kh-session h4{font-family:'Fraunces',serif;font-size:15px;font-weight:600;margin-bottom:4px}
.kh-session .meta{font-size:12px;color:var(--muted)}

/* ── Notification dot on nav ── */
#nav-settings{position:relative}

/* ── Profile ── */
#screen-profile { padding-bottom: 32px; }

.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.profile-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.profile-stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}

.profile-stat .v {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.profile-stat .l {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 2px;
}

/* Public/private toggle on presets */
.btn-ghost[title="Make public"],
.btn-ghost[title="Make private"] {
  font-size: 12px;
  padding: 6px 8px;
}

/* ── Messaging ── */

/* Inbox conversation rows */
.msg-conv-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 8px;
  cursor: pointer;
  transition: background .15s;
}
.msg-conv-row:active { background: var(--panel-2); }
.msg-conv-row.unread { border-color: var(--accent-dim); }
.msg-conv-row.unread .msg-conv-name { color: var(--accent); }
.msg-conv-row.unread .msg-conv-preview { color: var(--text); font-weight: 500; }
.msg-unread-dot {
  background: var(--accent);
  color: #06100f;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Space Mono', monospace;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.msg-conv-info {
  flex: 1;
  min-width: 0;
}
.msg-conv-name {
  font-weight: 600;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-conv-preview {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msg-conv-time {
  font-size: 11px;
  color: var(--muted);
  flex-shrink: 0;
  font-family: 'Space Mono', monospace;
}

/* Message bubbles */
.msg-bubble-wrap {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.msg-bubble-wrap.mine {
  align-self: flex-end;
  align-items: flex-end;
}
.msg-bubble-wrap.theirs {
  align-self: flex-start;
  align-items: flex-start;
}
.msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
}
.msg-bubble-wrap.mine .msg-bubble {
  background: var(--accent);
  color: #06100f;
  border-bottom-right-radius: 4px;
}
.msg-bubble-wrap.theirs .msg-bubble {
  background: var(--panel-2);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.msg-time {
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  font-family: 'Space Mono', monospace;
}
.msg-sender {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 3px;
  font-weight: 600;
}