@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/InterVariable.woff2") format("woff2");
}
@font-face{
  font-family:"Inter"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/InterVariable-Italic.woff2") format("woff2");
}

:root{
  --bg:#0c0a0f;
  --bg-elev:#141118;
  --card:#1a1520;
  --card-hover:#211a28;
  --stroke:rgba(255,220,230,.08);
  --text:#f7eef3;
  --muted:#9a8794;
  --faint:#6d5a66;
  --accent:#c4788a;          /* rose */
  --accent-2:#8e4a62;        /* deep plum */
  --accent-soft:rgba(196,120,138,.16);
  --gold:#d4a574;            /* rose-gold highlight */
  --ok:#5cb88a;
  --warn:#d4a017;
  --err:#e06b6b;
  --shadow:0 12px 40px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  --radius:18px;
  --radius-sm:12px;
  --pad:18px;
  --font:"Inter",system-ui,-apple-system,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);
  --tab-h:calc(64px + var(--safe-b));
  --ease:cubic-bezier(.22,.61,.36,1);
}
.role-him{
  --accent:#7aa2d4;
  --accent-2:#3d5f8a;
  --accent-soft:rgba(122,162,212,.16);
  --gold:#a8c0d8;
  --bg:#0a0c10;
  --bg-elev:#10141a;
  --card:#151a22;
  --card-hover:#1b222c;
  --stroke:rgba(200,220,255,.08);
  --text:#eef3f8;
  --muted:#8a97a8;
}

*{box-sizing:border-box}
html{height:100%; -webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100%;
  font-family:var(--font); font-feature-settings:"ss01","cv11";
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(142,74,98,.22), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(212,165,116,.08), transparent 50%),
    var(--bg);
  color:var(--text); line-height:1.45;
  -webkit-tap-highlight-color:transparent;
  padding-top:var(--safe-t);
  padding-bottom:var(--tab-h);
}
.role-him body, body.role-him{
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(61,95,138,.28), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(122,162,212,.1), transparent 50%),
    var(--bg);
}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--gold)}

/* Top bar (desktop / secondary) */
.top{
  position:sticky; top:0; z-index:30;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  padding:12px 16px; padding-top:calc(12px + var(--safe-t));
  background:rgba(12,10,15,.72); backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--stroke);
}
.role-him .top{background:rgba(10,12,16,.72)}
.brand{
  font-weight:700; letter-spacing:.02em; color:var(--text);
  font-size:15px; display:flex; align-items:center; gap:8px;
}
.brand .mark{
  width:28px; height:28px; border-radius:9px;
  background:url("/static/icons/dash-192.png") center/cover no-repeat;
  box-shadow:0 4px 14px rgba(142,74,98,.35);
}
.role-him .brand .mark{
  background-image:url("/static/icons/sub-192.png");
  box-shadow:0 4px 14px rgba(61,95,138,.35);
}
.top nav{display:none; flex-wrap:wrap; gap:4px; flex:1}
.top nav a{
  font-size:12px; padding:7px 10px; border-radius:999px; color:var(--muted);
  transition:background .2s var(--ease), color .2s;
}
.top nav a:hover, .top nav a.active{background:var(--accent-soft); color:var(--text)}
@media(min-width:900px){
  .top nav{display:flex}
  body{padding-bottom:24px}
  .tabbar{display:none !important}
}

.wrap{max-width:720px; margin:0 auto; padding:var(--pad); padding-bottom:28px}
.wrap.narrow{max-width:480px}

h1{
  font-size:1.65rem; font-weight:700; letter-spacing:-.02em;
  margin:4px 0 6px; line-height:1.2;
}
h2{font-size:1rem; font-weight:650; margin:0 0 10px; letter-spacing:-.01em}
h3{font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:20px 0 8px}
.muted{color:var(--muted)}.faint{color:var(--faint)}.small{font-size:12px}
.err{color:var(--err)}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%), var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:16px 16px;
  margin:12px 0;
  box-shadow:var(--shadow);
  transition:transform .25s var(--ease), background .2s, border-color .2s;
  animation:rise .45s var(--ease) both;
}
.card:active{transform:scale(.985)}
.card.flat{box-shadow:none}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.grid{display:grid; gap:12px}
@media(min-width:640px){.grid.stats{grid-template-columns:repeat(2,1fr)}}
.stat{
  padding:16px; border-radius:var(--radius); border:1px solid var(--stroke);
  background:var(--card); box-shadow:var(--shadow);
}
.stat .label{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.stat .value{font-size:1.75rem; font-weight:700; letter-spacing:-.03em; margin-top:4px}
.stat .value.accent{color:var(--accent)}
.stat .value.gold{color:var(--gold)}

.row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between; padding:6px 0}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

/* Forms */
label{display:block; margin:12px 0 6px; font-size:12px; font-weight:500; color:var(--muted); letter-spacing:.02em}
input,textarea,select{
  font:inherit; width:100%; padding:12px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--stroke);
  background:var(--bg-elev); color:var(--text);
  transition:border-color .2s, box-shadow .2s;
}
input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft);
}
button,.btn{
  font:inherit; font-weight:600; cursor:pointer;
  border:none; border-radius:999px;
  padding:11px 18px; width:auto;
  color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 20px rgba(142,74,98,.35);
  transition:transform .15s var(--ease), filter .15s, box-shadow .2s;
}
.role-him button, .role-him .btn{box-shadow:0 6px 20px rgba(61,95,138,.4)}
button:hover,.btn:hover{filter:brightness(1.06)}
button:active,.btn:active{transform:scale(.96)}
button.ghost,.btn.ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--stroke); box-shadow:none;
}
button.linkish,.linkish{background:none;border:none;box-shadow:none;color:var(--muted);padding:6px;width:auto}
button:disabled{opacity:.4; cursor:not-allowed; transform:none}
.inline{display:inline}
.btn.block{display:block; text-align:center; width:100%}

.badge{
  font-size:10px; font-weight:650; padding:3px 9px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  text-transform:uppercase; letter-spacing:.06em;
}
.badge.ok{background:rgba(92,184,138,.15); color:var(--ok)}
.badge.warn{background:rgba(212,160,23,.15); color:var(--warn)}
.pri{font-size:11px; font-weight:600; text-transform:uppercase}
.pri.urgent{color:var(--err)}.pri.high{color:var(--accent)}.pri.normal{color:var(--muted)}.pri.low{color:var(--faint)}
.sev{font-size:11px; text-transform:uppercase; font-weight:600}
.sev.mild{color:var(--ok)}.sev.moderate{color:var(--warn)}.sev.serious{color:#e9966a}.sev.severe{color:var(--err)}

.pts,.pts-lg{color:var(--accent); font-weight:700}
.pts-lg{font-size:2.6rem; letter-spacing:-.04em; margin:0; line-height:1}
.pts-lg span{font-size:.85rem; color:var(--muted); font-weight:500; margin-left:6px}
.pts-lg.tick{animation:tick .5s var(--ease)}
@keyframes tick{0%{transform:scale(1)} 40%{transform:scale(1.08)} 100%{transform:scale(1)}}

.flame{display:inline-flex; align-items:center; gap:4px; color:var(--gold); font-weight:700}
.flame::before{content:"✦"; animation:flicker 1.6s ease-in-out infinite}
@keyframes flicker{0%,100%{opacity:.7; transform:scale(1)} 50%{opacity:1; transform:scale(1.15)}}

/* Auth */
.auth-card{
  max-width:400px; margin:10vh auto; padding:32px 28px;
  background:var(--card); border:1px solid var(--stroke);
  border-radius:24px; box-shadow:var(--shadow);
  animation:rise .5s var(--ease);
}
.auth-card h1{text-align:center; margin-bottom:4px}
.auth-card .mark{
  width:56px; height:56px; border-radius:16px; margin:0 auto 14px;
  background:url("/static/icons/icon-192.png") center/cover no-repeat;
  box-shadow:0 10px 30px rgba(142,74,98,.4);
}
.auth-card p{text-align:center}

/* Empty states */
.empty{
  text-align:center; padding:36px 20px; color:var(--muted);
  border:1px dashed var(--stroke); border-radius:var(--radius);
  margin:12px 0; background:rgba(255,255,255,.015);
}
.empty .glyph{font-size:2rem; margin-bottom:8px; opacity:.7}
.empty h2{color:var(--text); margin-bottom:4px}

/* Mood / trend */
.trend{display:flex; gap:5px; align-items:flex-end; height:56px; margin-top:8px}
.trend span{
  flex:1; min-width:8px; border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  opacity:.85; transition:height .35s var(--ease);
}
.spark{display:flex; gap:3px; align-items:flex-end; height:28px}
.spark i{flex:1; border-radius:2px; background:var(--accent); opacity:.7}

/* Checklist (sub) */
.check-item{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 4px; border-bottom:1px solid var(--stroke);
}
.check-item:last-child{border-bottom:none}
.check-bubble{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  border:2px solid var(--stroke); margin-top:2px;
  transition:background .25s, border-color .25s, transform .2s;
}
.check-item.done .check-bubble{
  background:var(--ok); border-color:var(--ok);
  box-shadow:0 0 0 4px rgba(92,184,138,.15);
  animation:pop .35s var(--ease);
}
@keyframes pop{0%{transform:scale(.6)} 70%{transform:scale(1.15)} 100%{transform:scale(1)}}
.check-item.done .check-title{text-decoration:line-through; color:var(--muted)}

/* Swipe / rate cards */
.swipe-stack{position:relative; min-height:220px; margin:16px 0 8px}
.swipe{
  touch-action:pan-y;
  user-select:none;
  transition:transform .35s var(--ease), opacity .35s, box-shadow .2s;
  will-change:transform;
}
.swipe.fly-left{transform:translateX(-120%) rotate(-8deg); opacity:0}
.swipe.fly-right{transform:translateX(120%) rotate(8deg); opacity:0}
.swipe.fly-up{transform:translateY(-120%) rotate(2deg); opacity:0}
.rate{display:flex; gap:10px; justify-content:center; margin-top:12px}
.rate-btn{
  min-width:88px; border-radius:999px; font-weight:650;
  border:1px solid var(--stroke); background:var(--bg-elev); color:var(--text);
  box-shadow:none; padding:12px 16px;
}
.rate-btn.no{color:var(--err)}.rate-btn.maybe{color:var(--warn)}.rate-btn.yes{color:var(--ok)}
.rate-btn.on{
  outline:2px solid var(--accent); background:var(--accent-soft);
  transform:scale(1.04);
}

/* Bottom tab bar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  display:flex; justify-content:space-around; align-items:stretch;
  height:var(--tab-h); padding-bottom:var(--safe-b);
  background:rgba(12,10,15,.88); backdrop-filter:blur(18px) saturate(1.3);
  border-top:1px solid var(--stroke);
}
.role-him .tabbar{background:rgba(10,12,16,.88)}
.tabbar a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--faint); font-size:10px; font-weight:600; letter-spacing:.02em;
  padding:8px 4px 6px; transition:color .2s;
}
.tabbar a svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8}
.tabbar a.active{color:var(--accent)}
.tabbar a:active{transform:scale(.94)}

/* Wizard */
.progress{height:4px; background:rgba(255,255,255,.06); border-radius:99px; overflow:hidden; margin:8px 0 16px}
.progress>div{height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); border-radius:99px; transition:width .4s var(--ease)}
.tip{border-left:3px solid var(--accent); font-size:13.5px; line-height:1.5}
.check{display:flex; gap:10px; align-items:flex-start; margin:8px 0}
.check input{width:auto; margin-top:4px}
.example{background:var(--bg-elev); padding:12px; border-radius:12px; font-size:13px; border:1px solid var(--stroke); color:var(--muted)}
.cat{margin:18px 0 6px; text-transform:uppercase; letter-spacing:.08em; font-size:11px; color:var(--muted)}

/* Hero strip */
.hero{
  display:flex; justify-content:space-between; align-items:flex-end; gap:12px;
  margin-bottom:8px;
}
.greeting{font-size:14px; color:var(--muted); margin:0}
.section-label{
  display:flex; align-items:center; justify-content:space-between;
  margin:22px 0 8px;
}
.section-label h2{margin:0}

pre{white-space:pre-wrap; font-family:inherit; color:var(--muted); font-size:14px}
.list article.card{animation-delay:calc(var(--i,0)*.04s)}

/* Splash-ish loading */
.splash{
  position:fixed; inset:0; z-index:100; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:var(--bg); transition:opacity .4s;
}
.splash.hide{opacity:0; pointer-events:none}
@media(max-width:480px){
  .hero{flex-direction:column; align-items:flex-start; gap:14px}
  .hero .stat{width:100%}
  h1{font-size:1.85rem}
}
.tabbar a svg{width:24px;height:24px}
.splash{transition:opacity .35s ease}
body.ready #splash{opacity:0;pointer-events:none}
.badge{letter-spacing:.04em}

.splash .mark{
  width:72px; height:72px; border-radius:20px;
  background:url("/static/icons/icon-512.png") center/cover no-repeat !important;
  box-shadow:0 12px 40px rgba(0,0,0,.45);
}
.role-him .splash .mark{
  background-image:url("/static/icons/sub-512.png") !important;
}

/* ---- Add to Home Screen ---- */
.install-card{padding:18px 18px 16px}
.install-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.install-btn-icon{display:inline-flex; line-height:0}
.install-btn-icon svg{display:block}
.install-card.is-installed .install-btn{display:none}
.install-card.is-installed #install-status{display:block !important; color:var(--accent); font-weight:600}

.sheet{position:fixed; inset:0; z-index:200; display:flex; align-items:flex-end; justify-content:center}
.sheet[hidden]{display:none !important}
.sheet-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.sheet-panel{
  position:relative; width:100%; max-width:440px;
  background:linear-gradient(180deg, rgba(36,28,34,.98), rgba(18,14,18,.99));
  border:1px solid rgba(196,120,138,.22);
  border-bottom:none; border-radius:22px 22px 0 0;
  padding:10px 20px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px rgba(0,0,0,.5);
  animation:sheet-up .28s var(--ease);
}
.role-him .sheet-panel{
  background:linear-gradient(180deg, rgba(22,28,36,.98), rgba(10,12,16,.99));
  border-color:rgba(122,162,212,.22);
}
.sheet-handle{
  width:40px; height:4px; border-radius:99px; background:rgba(255,255,255,.18);
  margin:4px auto 14px;
}
.sheet-panel h2{margin:0 0 6px; font-size:1.25rem}
.ios-steps{list-style:none; margin:16px 0 8px; padding:0; display:flex; flex-direction:column; gap:12px}
.ios-steps li{
  display:flex; gap:12px; align-items:flex-start;
  background:var(--accent-soft); border-radius:14px; padding:12px 14px;
}
.ios-step-num{
  flex:0 0 26px; height:26px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-weight:700; font-size:13px;
}
.ios-step-body{flex:1; font-size:14px; line-height:1.45; color:var(--text)}
.ios-step-body strong{color:#fff}
.ios-glyph{
  display:inline-flex; vertical-align:middle; margin:0 2px;
  color:var(--accent); transform:translateY(-1px);
}
.ios-glyph svg{display:block}
@keyframes sheet-up{
  from{transform:translateY(24px); opacity:0}
  to{transform:translateY(0); opacity:1}
}