/* ============ FONTS ============ */
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-ExtraLight.ttf');font-weight:200;font-style:normal;font-display:swap;}
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-Light.ttf');font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-Regular.ttf');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-Medium.ttf');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-SemiBold.ttf');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-Heavy.ttf');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-Italic.ttf');font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:'FCVision';src:url('assets/fonts/FCVision-MediumItalic.ttf');font-weight:500;font-style:italic;font-display:swap;}

/* ============ TOKENS ============ */
:root{
  --cream:#fafaf8;
  --paper:#ffffff;
  --paper-warm:#fdfcf9;
  --ink:#1b1714;
  --ink-2:#3f3830;
  --ink-soft:#857b6e;
  --ink-faint:#aaa093;
  --line:#ece6dc;
  --line-2:#e0d8cb;
  --orange:#e86c1a;
  --orange-deep:#c8550c;
  --orange-soft:#fbeada;
  --orange-tint:#fdf3e9;
  --shadow-sm:0 1px 2px rgba(60,40,20,.04), 0 2px 8px rgba(60,40,20,.05);
  --shadow-md:0 2px 6px rgba(60,40,20,.05), 0 14px 34px rgba(60,40,20,.10);
  --shadow-lg:0 6px 18px rgba(60,40,20,.08), 0 30px 60px rgba(60,40,20,.14);
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* brain dump category colors (warm, muted, harmonious) */
  --c-worry-fill:#eef0f4;   --c-worry-edge:#c7cede;   --c-worry-ink:#5a6480;
  --c-task-fill:#fbeada;    --c-task-edge:#f0c79a;    --c-task-ink:#b8540f;
  --c-goal-fill:#e8f0e6;    --c-goal-edge:#bcd6b7;    --c-goal-ink:#4d7a4a;
  --c-feel-fill:#f6e9e8;    --c-feel-edge:#e2bdba;    --c-feel-ink:#a8554f;
  --c-dream-fill:#efeaf4;   --c-dream-edge:#cdbfdf;   --c-dream-ink:#74578f;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'FCVision',-apple-system,'Sukhumvit Set','Thonburi',sans-serif;
  background:var(--cream);
  color:var(--ink);
  font-weight:400;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"liga" 1;
}
.thai-num{font-variant-numeric:normal;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input,textarea{font-family:inherit;}
::selection{background:var(--orange);color:#fff;}

/* warm subtle grain via radial dots, very faint */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(232,108,26,.05), transparent 38%),
    radial-gradient(circle at 86% 88%, rgba(232,108,26,.04), transparent 42%);
}

/* ============ APP SHELL ============ */
#app{position:relative;z-index:1;min-height:100%;}
.wrap{max-width:680px;margin:0 auto;padding:0 22px;}
.screen{display:none;animation:screenIn .42s var(--ease) both;}
.screen.active{display:block;}
@keyframes screenIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){.screen{animation:none!important;}*{animation-duration:.001ms!important;transition-duration:.001ms!important;}}

/* ============ TOPBAR ============ */
.topbar{position:sticky;top:0;z-index:20;background:rgba(250,250,248,.82);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);border-bottom:1px solid var(--line);}
.topbar-inner{max-width:680px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:12px;min-height:64px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand img{width:30px;height:30px;display:block;border-radius:7px;}
.brand b{font-weight:800;font-size:18px;letter-spacing:-.01em;}
.brand b span{color:var(--orange);}
.back-btn{display:none;align-items:center;gap:7px;font-weight:500;font-size:15px;color:var(--ink-2);padding:8px 14px 8px 10px;border-radius:99px;background:#fff;border:1px solid var(--line-2);box-shadow:var(--shadow-sm);transition:transform .2s var(--ease), background .2s;}
.back-btn:hover{background:var(--paper-warm);transform:translateX(-2px);}
.back-btn:active{transform:scale(.97);}
.back-btn.show{display:inline-flex;}
.back-btn svg{width:16px;height:16px;}
.topbar-spacer{flex:1;}
.topbar-tag{font-size:13px;font-weight:500;color:var(--ink-faint);}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:16px;border-radius:99px;padding:15px 26px;transition:transform .18s var(--ease), box-shadow .25s, background .2s;}
.btn-primary{background:var(--ink);color:#fff;box-shadow:0 4px 14px rgba(27,23,20,.22);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(27,23,20,.28);}
.btn-primary:active{transform:translateY(0) scale(.98);}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 4px 14px rgba(232,108,26,.32);}
.btn-orange:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(232,108,26,.4);}
.btn-orange:active{transform:translateY(0) scale(.98);}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-sm);}
.btn-ghost:hover{background:var(--paper-warm);transform:translateY(-1px);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important;}
.btn svg{width:18px;height:18px;}

/* eyebrow / labels */
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);}
.muted{color:var(--ink-soft);}

/* toast */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;padding:13px 22px;border-radius:99px;font-weight:500;font-size:15px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:opacity .3s, transform .3s var(--ease);z-index:90;display:flex;align-items:center;gap:9px;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{width:17px;height:17px;color:#7bd88f;}

/* generic footer pad */
.footer-note{text-align:center;padding:40px 0 48px;color:var(--ink-faint);font-size:13px;font-weight:400;}
.footer-note span{color:var(--orange);}