:root{
  --paper:#FAF6EC;
  --paper-line:#E4DCC8;
  --margin-red:#B23A3A;
  --ink:#232323;
  --ink-soft:#5B5648;
  --pen-blue:#2C4A8C;
  --pen-blue-deep:#1E3568;
  --highlight:#F2C14E;
  --highlight-soft:#FBEBBE;
  --card:#FFFFFF;
  --error:#C0392B;
  --success:#3E7C59;
  --shadow: 0 1px 0 rgba(35,35,35,0.05), 0 8px 20px -12px rgba(35,35,35,0.18);
  --radius: 14px;
}
:root.dark{
  --paper:#15181F;
  --paper-line:#232733;
  --margin-red:#D9736A;
  --ink:#ECE9E1;
  --ink-soft:#9A9689;
  --pen-blue:#6E93E0;
  --pen-blue-deep:#8FB0F5;
  --highlight:#F2C14E;
  --highlight-soft:#3A331B;
  --card:#1E222C;
  --shadow: 0 1px 0 rgba(0,0,0,0.2), 0 8px 24px -12px rgba(0,0,0,0.6);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--paper);
  font-family:'Inter',sans-serif;
  color:var(--ink);
  min-height:100vh;
  transition:background .25s ease, color .25s ease;
}
.font-hand{font-family:'Kalam',cursive;}
.font-mono{font-family:'JetBrains Mono',monospace;}

.btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border-radius:12px; border:none;
  font-family:'Inter',sans-serif; font-weight:700; font-size:14.5px;
  cursor:pointer; transition:transform .12s ease, opacity .12s ease;
}
.btn:active{transform:scale(.97);}
.btn-primary{background:var(--pen-blue); color:#fff; box-shadow:var(--shadow);}
.btn-outline{background:var(--card); color:var(--ink); border:1.5px solid var(--paper-line);}
.btn:disabled{opacity:.55; cursor:not-allowed;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
.field input{
  width:100%; padding:13px 14px; border-radius:10px; border:1.5px solid var(--paper-line);
  background:var(--card); color:var(--ink); font-size:14.5px; font-family:'Inter',sans-serif;
  outline:none; transition:border-color .15s ease;
}
.field input:focus{border-color:var(--pen-blue);}
.field-error{color:var(--error); font-size:11.5px; margin-top:5px; display:none;}

.toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%);
  background:var(--ink); color:var(--paper); padding:12px 18px; border-radius:10px;
  font-size:13px; opacity:0; pointer-events:none; transition:opacity .25s ease, bottom .25s ease;
  z-index:999; max-width:90%; text-align:center;
}
.toast.show{opacity:1; bottom:40px;}
.toast.error{background:var(--error);}
.toast.success{background:var(--success);}

.spinner{
  width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- shared app shell (used on every logged-in page) ---------- */
.app-wrap{max-width:520px; margin:0 auto; padding:20px 18px 100px; min-height:100vh;}

.topbar{display:flex; align-items:center; gap:12px; margin-bottom:20px;}
.topbar .back{width:36px; height:36px; border-radius:10px; background:var(--card); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; flex-shrink:0;}
.topbar h1{font-family:'Kalam',cursive; font-size:21px; margin:0;}

.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:5;
  background:var(--card); border-top:1px solid var(--paper-line);
  display:flex; justify-content:space-around; padding:10px 8px 14px;
  max-width:520px; margin:0 auto;
}
.nav-item{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9.5px; color:var(--ink-soft); font-weight:600; cursor:pointer;}
.nav-item.active{color:var(--pen-blue);}
.nav-item .nav-icon{font-size:18px;}

.fab{
  position:fixed; right:18px; bottom:86px; z-index:6;
  width:52px; height:52px; border-radius:50%;
  background:var(--margin-red); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:24px; box-shadow:0 10px 20px -6px rgba(178,58,58,.6); cursor:pointer;
}
@media(min-width:560px){ .bottom-nav, .fab{ right:calc(50% - 260px + 18px); } }

/* generic content card, used across pages */
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; margin-bottom:16px;}
.card-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); margin-bottom:12px;}

/* empty / "coming in a later phase" state */
.empty-state{text-align:center; padding:50px 20px; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);}
.empty-state .icon{font-size:38px; margin-bottom:14px;}
.empty-state h2{font-family:'Kalam',cursive; font-size:20px; margin:0 0 8px; color:var(--pen-blue-deep);}
.empty-state p{font-size:13.5px; color:var(--ink-soft); line-height:1.6; max-width:280px; margin:0 auto;}
.empty-state .phase-chip{display:inline-block; margin-top:14px; background:var(--highlight-soft); color:#5c4a12;
  font-size:11px; font-weight:700; padding:5px 12px; border-radius:99px;}