@import url('https://fonts.googleapis.com/css2?family=Fraunces:wght@700;900&family=DM+Mono:wght@400;500&family=Nunito:wght@400;700;900&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:#F5F0E8;
  --card:#FFFEF9;
  --ink:#1E1810;
  --muted:#7A6E62;
  --cork:#C9A96E;
  --tan2:#EDE6D6;
  --pink:#F7A8C4;
  --mint:#89D4C0;
  --lemon:#FFE566;
  --sky:#A8D4F7;
  --coral:#FF8C6B;
  --lav:#C5B4E3;
  --red:#FF5C5C;
  --green:#52C97A;
}

body{
  font-family:'Nunito',sans-serif;
  background:var(--bg);
  min-height:100vh;
  display:flex;
  justify-content:center;
}

/* ── MOBILE SHELL ──────────────────────── */
.shell{
  width:100%;
  max-width:430px;
  min-height:100vh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}

.dot-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,rgba(201,169,110,.18) 1px,transparent 1px);
  background-size:24px 24px;
}

/* ── STATUS BAR ────────────────────────── */
.status-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px 6px;
  font-size:11px;font-weight:700;color:var(--ink);
  font-family:'DM Mono',monospace;
  position:sticky;top:0;z-index:100;
  background:var(--bg);
}

.mini-header{
  display:flex;align-items:center;gap:9px;
  padding:10px 12px;background:var(--card);
  border-bottom:2px solid var(--ink);
  box-shadow:0 2px 0 rgba(30,24,16,.12);
  flex-shrink:0;position:sticky;top:0;z-index:100;
}
.p-logo{
  width:28px;height:28px;border-radius:8px;border:2px solid var(--ink);
  background:var(--lemon);color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Fraunces',serif;font-size:15px;font-weight:900;
  box-shadow:2px 2px 0 var(--ink);text-decoration:none;flex-shrink:0;
}
.mini-title{
  font-family:'Fraunces',serif;font-size:16px;font-weight:900;color:var(--ink);
  line-height:1;
}
.mini-sub{
  font-family:'DM Mono',monospace;font-size:10px;font-weight:700;
  color:var(--muted);margin-top:3px;
}

/* ── SCROLL BODY ───────────────────────── */
.scroll-body{
  flex:1;overflow-y:auto;
  padding:16px 16px 100px;
  position:relative;z-index:1;
}
.scroll-body::-webkit-scrollbar{width:4px;}
.scroll-body::-webkit-scrollbar-thumb{background:var(--cork);border-radius:4px;}

/* ── BOTTOM NAV ────────────────────────── */
.bottom-nav{
  position:fixed;bottom:0;left:50%;
  transform:translateX(-50%);
  width:100%;max-width:430px;
  display:flex;background:var(--card);
  border-top:2px solid var(--ink);
  padding:8px 0 16px;z-index:100;
}
.nav-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;cursor:pointer;padding:4px 0;
  font-family:'Nunito',sans-serif;font-size:10px;font-weight:700;
  color:var(--muted);transition:color .2s;text-decoration:none;
}
.nav-btn.active{color:var(--ink);}
.nav-btn .nb-icon{font-size:20px;transition:transform .2s;}
.nav-btn.active .nb-icon{transform:scale(1.15);}

/* ── CARDS ─────────────────────────────── */
.card{
  background:var(--card);border:2px solid var(--ink);
  border-radius:18px;padding:16px;
  box-shadow:3px 3px 0 var(--ink);margin-bottom:12px;
  position:relative;
}

/* ── BUTTONS ───────────────────────────── */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:13px;border-radius:14px;
  font-family:'Nunito',sans-serif;font-size:15px;font-weight:900;
  border:2px solid var(--ink);cursor:pointer;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s,box-shadow .15s;text-align:center;
  text-decoration:none;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn-dark{background:var(--ink);color:var(--lemon);}
.btn-ghost{background:transparent;color:var(--ink);}
.btn-google{background:#fff;color:var(--ink);}
.btn-danger{background:var(--red);color:#fff;border-color:var(--red);}

/* ── SECTION LABEL ─────────────────────── */
.section-label{
  font-family:'DM Mono',monospace;font-size:11px;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:8px;
}

/* ── PAGE HEADER ───────────────────────── */
.page-header{
  font-family:'Fraunces',serif;font-size:24px;font-weight:900;
  color:var(--ink);margin-bottom:4px;
}
.page-sub{font-size:13px;color:var(--muted);margin-bottom:16px;}

/* ── PILL / BADGE ──────────────────────── */
.pill{
  display:inline-block;border-radius:20px;padding:3px 10px;
  font-size:11px;font-weight:700;
}
.tag-free{background:var(--lemon);color:#4A3A00;}
.tag-pro{background:var(--coral);color:#fff;}
.tag-on{background:var(--mint);color:#0D4A3A;}
.tag-off{background:var(--tan2);color:var(--muted);}
.tag-pub{background:var(--sky);color:#0D2E4A;}
.tag-inv{background:var(--lav);color:#2E1A5A;}
.tag-lock{background:#555;color:#fff;}

/* ── FORM INPUTS ───────────────────────── */
.input-group{margin-bottom:14px;}
.input-group label{
  display:block;font-size:12px;font-weight:700;
  color:var(--muted);margin-bottom:5px;
}
.input-group input, .input-group select, .input-group textarea{
  width:100%;border:2px solid var(--cork);
  border-radius:10px;padding:10px 12px;
  font-family:'Nunito',sans-serif;font-size:14px;
  background:var(--card);color:var(--ink);outline:none;
  transition:border-color .2s;
}
.input-group input:focus, .input-group select:focus, .input-group textarea:focus{
  border-color:var(--ink);
}

/* ── TOAST ─────────────────────────────── */
#toast{
  position:fixed;bottom:90px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--lemon);
  font-family:'DM Mono',monospace;font-size:13px;font-weight:500;
  padding:10px 20px;border-radius:20px;
  opacity:0;transition:opacity .3s;pointer-events:none;
  z-index:999;white-space:nowrap;
}
#toast.show{opacity:1;}

/* ── LOADING OVERLAY ───────────────────── */
#loadingOverlay{
  position:fixed;inset:0;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;z-index:9999;
  transition:opacity .35s ease;
}
#loadingOverlay.hide{opacity:0;pointer-events:none;}
.loader-logo{
  width:62px;height:62px;border-radius:22px;border:0;
  background:linear-gradient(135deg,var(--primary),var(--accent));color:white;
  display:grid;place-items:center;
  box-shadow:0 16px 34px rgba(156,24,168,.28);
  position:relative;
  animation:loader-bounce 1s ease-in-out infinite alternate;
}
.loader-logo::after{content:"";position:absolute;inset:-8px;border:1px solid rgba(156,24,168,.20);border-radius:28px;animation:loader-ring 1.15s ease-out infinite;}
.loader-logo svg{width:29px;height:29px;stroke-width:2.35;position:relative;z-index:1;}
.loader-text{font-family:'DM Mono',monospace;font-size:13px;color:var(--muted);font-weight:750;position:relative;}
.loader-text::after{content:"";animation:loader-dots 1.2s steps(4,end) infinite;}
@keyframes loader-bounce{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@keyframes loader-ring{0%{opacity:.9;transform:scale(.86)}100%{opacity:0;transform:scale(1.22)}}
@keyframes loader-dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}

/* ── PRIVACY TOGGLE ────────────────────── */
.privacy-select{
  display:flex;gap:6px;
}
.priv-opt{
  flex:1;padding:7px 4px;border-radius:10px;
  border:2px solid var(--tan2);background:var(--tan2);
  font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;
  color:var(--muted);cursor:pointer;text-align:center;
  transition:all .2s;
}
.priv-opt.active-pub{border-color:var(--ink);background:var(--sky);color:#0D2E4A;}
.priv-opt.active-inv{border-color:var(--ink);background:var(--lav);color:#2E1A5A;}
.priv-opt.active-lock{border-color:var(--ink);background:#444;color:#fff;}