:root{
  --ink:#2a1219;
  --ink-2:#3d1c26;
  --wood:#4a2418;
  --wood-2:#2f150f;
  --card:#f7ecdc;
  --card-2:#efe0cb;
  --paper-line:rgba(74,36,24,.16);
  --burgundy:#6d1f33;
  --burgundy-2:#8b2a41;
  --burnt:#c0651f;
  --amber:#f59e0b;
  --gold:#e8b55c;
  --muted:#a3897a;
  --ok:#5f7d52;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --mono:"SFMono-Regular",ui-monospace,"Roboto Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --shadow:0 18px 34px -18px rgba(0,0,0,.8), 0 3px 10px rgba(0,0,0,.35);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --tabbar-h:74px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  background:
    radial-gradient(120% 80% at 12% 0%, #5b2a1a 0%, transparent 55%),
    radial-gradient(100% 70% at 100% 10%, #6a2333 0%, transparent 45%),
    repeating-linear-gradient(96deg, rgba(255,255,255,.022) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(6deg, rgba(0,0,0,.16) 0 3px, transparent 3px 14px),
    linear-gradient(180deg,#3b1c12,#2a120c 55%,#23100c);
  color:var(--card);
  font-family:var(--mono);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:.2px;margin:0}
button{font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit;font-size:16px}

.app{max-width:520px;margin:0 auto;min-height:100vh;position:relative;padding-bottom:calc(var(--tabbar-h) + var(--safe-b) + 18px)}

/* TOPBAR */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(var(--safe-t) + 14px) 18px 12px;
  background:linear-gradient(180deg,rgba(38,16,11,.96),rgba(38,16,11,.72) 70%,rgba(38,16,11,0));
  backdrop-filter:blur(10px);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  background:
    radial-gradient(circle at 32% 28%, var(--gold), transparent 55%),
    linear-gradient(150deg,var(--burgundy-2),#3a1019 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 14px rgba(0,0,0,.5);
  border:1px solid rgba(232,181,92,.35);
}
.brand-text h1{font-size:23px;line-height:1;color:#f9ead2;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.brand-text p{margin:3px 0 0;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.75}

/* BUTTONS */
.btn{
  border:1px solid rgba(232,181,92,.3);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  color:#f6e7cf;border-radius:12px;padding:12px 16px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:active{transform:translateY(1px) scale(.99)}
.btn.small{padding:9px 12px;font-size:10.5px}
.btn.ghost{background:rgba(255,255,255,.04)}
.btn.primary{
  background:linear-gradient(180deg,var(--burgundy-2),var(--burgundy));
  border-color:rgba(232,181,92,.45);color:#fff4e2;
  box-shadow:0 10px 22px -10px rgba(139,42,65,.9), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn.danger{background:rgba(139,42,65,.18);border-color:rgba(200,80,100,.45);color:#ffc9cd}
.btn.wide{width:100%;padding:16px;font-size:13px}
.btn.icon{padding:8px 10px;border-radius:10px}

/* VIEWS */
.views{padding:4px 16px 0}
.view{display:none;animation:rise .22s ease both}
.view.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.view-head{padding:8px 4px 14px}
.view-head h2{font-size:30px;color:#fbeed9;line-height:1.05}
.kicker{margin:6px 0 0;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);opacity:.7}
.section-label{
  margin:26px 4px 12px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);opacity:.66;display:flex;align-items:center;gap:10px;
}
.section-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(232,181,92,.35),transparent)}

/* CARDS */
.stack{display:flex;flex-direction:column;gap:10px}
.mood-card{
  position:relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 27px, var(--paper-line) 27px 28px),
    linear-gradient(165deg,var(--card) 0%,var(--card-2) 100%);
  color:var(--ink);
  border-radius:20px;
  padding:16px 16px 14px 22px;
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.55);
  overflow:hidden;
}
.mood-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--stripe,var(--burgundy));
  box-shadow:inset -1px 0 0 rgba(0,0,0,.12);
}
.mood-card::after{
  content:"";position:absolute;inset:auto -40px 22px auto;width:120px;height:1px;
  transform:rotate(-32deg);background:rgba(192,101,31,.25);pointer-events:none;
}
.card-top{display:flex;align-items:flex-start;gap:10px;justify-content:space-between}
.card-name{font-family:var(--serif);font-size:19px;line-height:1.18;color:#3b1a1f;word-break:break-word}
.card-sub{margin:6px 0 0;font-size:11px;letter-spacing:.06em;color:#7c5e4e;text-transform:uppercase}
.tag{
  flex:0 0 auto;font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  padding:5px 8px;border-radius:999px;color:#fff;
  background:var(--stripe,var(--burgundy));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.sensory{margin:11px 0 0;font-size:12.5px;line-height:1.45;color:#5a3b2c}
.sensory b{font-weight:600;color:var(--burnt);letter-spacing:.04em;text-transform:uppercase;font-size:10px;display:block;margin-bottom:2px}
.notes{margin:8px 0 0;font-family:var(--serif);font-style:italic;font-size:13.5px;line-height:1.5;color:#6a4534;border-left:2px solid rgba(109,31,51,.25);padding-left:10px}
.card-actions{display:flex;gap:8px;margin-top:13px;padding-top:11px;border-top:1px dashed rgba(74,36,24,.2)}
.card-actions .act{
  border:1px solid rgba(74,36,24,.22);background:rgba(255,255,255,.4);
  color:#5c3327;border-radius:9px;padding:7px 11px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;cursor:pointer;
}
.card-actions .act:active{background:rgba(109,31,51,.12)}
.card-actions .act.del{margin-left:auto;color:#8b2a41;border-color:rgba(139,42,65,.3)}

/* HERO */
.hero{
  position:relative;border-radius:24px;padding:20px;
  background:
    radial-gradient(90% 120% at 85% 0%, rgba(245,158,11,.22), transparent 60%),
    linear-gradient(160deg,#5b2030,#35121a 70%);
  border:1px solid rgba(232,181,92,.28);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-30px;bottom:-46px;width:150px;height:150px;border-radius:50%;
  border:1px solid rgba(232,181,92,.25);
  box-shadow:0 0 0 18px rgba(232,181,92,.05),0 0 0 38px rgba(232,181,92,.03);
}
.hero .hero-lbl{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);opacity:.8}
.hero h3{font-size:26px;margin:7px 0 0;color:#fbefd8;line-height:1.12;max-width:82%}
.hero .hero-meta{margin:9px 0 0;font-size:11px;letter-spacing:.1em;color:#e6c9a8;opacity:.85;text-transform:uppercase}
.hero .hero-line{margin:14px 0 0;font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.5;color:#f0d8b8;max-width:92%}
.hero > .btn{margin-top:16px;position:relative;z-index:1}

/* EMPTY */
.empty{
  text-align:center;padding:34px 22px;border-radius:20px;
  border:1px dashed rgba(232,181,92,.3);
  background:rgba(255,255,255,.025);
}
.empty .glyph{font-size:26px;color:var(--gold);opacity:.7;display:block;margin-bottom:10px}
.empty h4{font-size:19px;color:#f4e3ca}
.empty p{margin:7px auto 0;font-size:11.5px;line-height:1.6;color:var(--muted);max-width:270px;letter-spacing:.03em}
.empty .btn{margin-top:16px}

/* STATS */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.stat-card{
  border-radius:18px;padding:16px 15px;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  border:1px solid rgba(232,181,92,.18);
}
.stat-card.accent{background:linear-gradient(160deg,rgba(192,101,31,.28),rgba(109,31,51,.18));border-color:rgba(232,181,92,.35)}
.stat-num{display:block;font-family:var(--serif);font-size:36px;line-height:1;color:#fbeed9}
.stat-lbl{display:block;margin-top:6px;font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.8}

/* SEARCH + CHIPS */
.search-wrap{position:sticky;top:calc(var(--safe-t) + 64px);z-index:10;padding:2px 0 10px;background:linear-gradient(180deg,#311610 60%,rgba(49,22,16,0))}
.field{
  width:100%;display:block;
  background:rgba(255,248,236,.07);
  border:1px solid rgba(232,181,92,.24);
  border-radius:13px;color:#fbeed9;padding:13px 14px;outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.field::placeholder{color:rgba(232,201,168,.42)}
.field:focus{border-color:rgba(232,181,92,.7);background:rgba(255,248,236,.1);box-shadow:0 0 0 3px rgba(245,158,11,.14)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;border-radius:999px;padding:8px 13px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(232,181,92,.26);background:rgba(255,255,255,.04);color:#e8cdb0;cursor:pointer;white-space:nowrap;
}
.chip.on{background:linear-gradient(180deg,var(--burgundy-2),var(--burgundy));border-color:rgba(232,181,92,.55);color:#fff3e0}

/* JOURNEY */
.journey-steps{position:relative;margin:4px 0 0;padding-left:34px}
.journey-steps::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,rgba(232,181,92,.5),rgba(232,181,92,.06))}
.step{position:relative;margin-bottom:12px}
.step::before{
  content:"";position:absolute;left:-28px;top:19px;width:11px;height:11px;border-radius:50%;
  background:var(--burgundy-2);border:2px solid var(--gold);box-shadow:0 0 0 3px rgba(38,16,11,.9);
}
.step .mood-card{padding-top:14px}
.step-lbl{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--burnt);margin-bottom:6px}
.pick{display:flex;gap:8px;overflow-x:auto;padding-bottom:14px;scrollbar-width:none}
.pick::-webkit-scrollbar{display:none}
.pick button{
  flex:0 0 auto;border-radius:14px;padding:11px 14px;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid rgba(232,181,92,.22);color:#f0dcc2;
  max-width:190px;
}
.pick button .pn{display:block;font-family:var(--serif);font-size:14.5px;line-height:1.2;color:#fbeed9}
.pick button .pv{display:block;margin-top:4px;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);opacity:.75}
.pick button.on{background:linear-gradient(160deg,rgba(139,42,65,.55),rgba(53,18,26,.7));border-color:rgba(232,181,92,.55)}

/* TABBAR */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;
  max-width:520px;margin:0 auto;
  padding:8px 8px calc(8px + var(--safe-b));
  background:linear-gradient(180deg,rgba(43,18,14,.92),rgba(28,11,9,.99));
  backdrop-filter:blur(14px);
  border-top:1px solid rgba(232,181,92,.18);
  box-shadow:0 -14px 30px rgba(0,0,0,.5);
}
.tab{
  flex:1;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:9px 2px;border-radius:13px;min-height:56px;
  color:rgba(232,201,168,.5);font-size:8.6px;letter-spacing:.11em;text-transform:uppercase;
  transition:color .16s ease, background .16s ease;
}
.tab-ico{font-size:15px;line-height:1;opacity:.75;transition:transform .16s ease,opacity .16s}
.tab.active{color:#ffe9c6;background:linear-gradient(180deg,rgba(139,42,65,.5),rgba(109,31,51,.18))}
.tab.active .tab-ico{opacity:1;color:var(--gold);transform:translateY(-1px)}

/* FAB */
.fab{
  position:fixed;z-index:35;
  right:max(18px, calc(50vw - 242px));
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 16px);
  width:54px;height:54px;border-radius:50%;border:1px solid rgba(232,181,92,.5);
  background:linear-gradient(160deg,var(--burnt),var(--burgundy));
  color:#fff3df;font-size:26px;line-height:1;cursor:pointer;
  box-shadow:0 14px 28px -10px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
}
.fab:active{transform:scale(.95)}

/* SHEET */
.sheet-backdrop{
  position:fixed;inset:0;z-index:60;background:rgba(18,6,5,.6);
  opacity:0;pointer-events:none;transition:opacity .2s ease;backdrop-filter:blur(2px);
}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  max-width:520px;margin:0 auto;
  background:linear-gradient(180deg,#3a1a13,#2a110c);
  border-top-left-radius:26px;border-top-right-radius:26px;
  border-top:1px solid rgba(232,181,92,.32);
  padding:8px 18px calc(18px + var(--safe-b));
  transform:translateY(105%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  max-height:91vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 -24px 50px rgba(0,0,0,.6);
}
.sheet.open{transform:translateY(0)}
.sheet-grip{width:42px;height:4px;border-radius:99px;background:rgba(232,181,92,.35);margin:4px auto 10px}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sheet-head h3{font-size:23px;color:#fbeed9}
.close{background:none;border:0;color:rgba(232,201,168,.7);font-size:28px;line-height:1;cursor:pointer;padding:0 4px}
.fld-label{display:block;margin:16px 0 7px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.85}
.fld-label:first-of-type{margin-top:4px}
.req{color:var(--amber)}
.err{margin:6px 2px 0;font-size:11px;color:#ff9c93;min-height:0;letter-spacing:.03em}
.err:empty{display:none}
.field.invalid{border-color:#d4605a;box-shadow:0 0 0 3px rgba(212,96,90,.14)}
.sheet-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:22px}
textarea.field{resize:vertical;min-height:84px;line-height:1.5}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,rgba(232,181,92,.8) 50%),linear-gradient(135deg,rgba(232,181,92,.8) 50%,transparent 50%);background-position:calc(100% - 19px) 55%,calc(100% - 14px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px}
select.field option{background:#3a1a13;color:#fbeed9}

/* TOAST */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tabbar-h) + var(--safe-b) + 18px);
  transform:translate(-50%,14px);z-index:70;
  background:linear-gradient(160deg,#6d1f33,#3a1019);
  border:1px solid rgba(232,181,92,.4);color:#fbead0;
  padding:11px 16px;border-radius:12px;font-size:11px;letter-spacing:.1em;
  box-shadow:0 14px 30px rgba(0,0,0,.6);
  opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;
  max-width:88vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* MISC */
.mini{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);opacity:.7}
.timeline-note{margin:6px 0 0;font-size:12px;line-height:1.55;color:#dcc2a4}

@media (max-width:360px){
  .view-head h2{font-size:26px}
  .brand-text h1{font-size:20px}
  .tab{font-size:7.8px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}