/* Design tokens + component styles, ported from the Ascent Claude Artifact prototype so the
   real app looks and feels identical. Light/dark themes both follow the OS preference. */
:root{
  --bg:oklch(97% 0.006 85);
  --page-bg:oklch(93% 0.008 85);
  --surface:oklch(100% 0 0);
  --surface-2:oklch(99% 0.004 85);
  --border:oklch(91% 0.012 270);
  --border-soft:oklch(94% 0.008 270);
  --text:oklch(20% 0.014 270);
  --text-2:oklch(50% 0.012 270);
  --text-3:oklch(60% 0.01 270);
  --accent:oklch(52% 0.16 265);
  --accent-ink:oklch(99% 0.006 265);
  --accent-soft:oklch(94% 0.03 265);
  --accent-soft-fg:oklch(48% 0.16 265);
  --success:oklch(50% 0.13 150);
  --success-soft:oklch(95% 0.025 145);
  --warn:oklch(56% 0.14 65);
  --warn-soft:oklch(94% 0.035 70);
  --rose:oklch(55% 0.17 15);
  --rose-soft:oklch(94% 0.035 15);
  --violet:oklch(50% 0.16 300);
  --violet-soft:oklch(94% 0.03 300);
  --teal:oklch(50% 0.1 195);
  --teal-soft:oklch(93% 0.03 195);
  --amber:oklch(62% 0.14 80);
  --amber-soft:oklch(94% 0.04 85);
  --shadow-soft:0 1px 2px oklch(20% 0.02 270 / 0.06), 0 8px 20px oklch(20% 0.02 270 / 0.05);
  --shadow-accent:0 10px 22px oklch(52% 0.16 265 / 0.32);
  --danger:oklch(52% 0.19 25);
  --danger-soft:oklch(94% 0.04 25);
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:oklch(21% 0.014 265);
    --page-bg:oklch(15% 0.012 265);
    --surface:oklch(26% 0.016 265);
    --surface-2:oklch(29% 0.017 265);
    --border:oklch(35% 0.02 265);
    --border-soft:oklch(31% 0.018 265);
    --text:oklch(95% 0.006 265);
    --text-2:oklch(76% 0.012 265);
    --text-3:oklch(64% 0.012 265);
    --accent:oklch(74% 0.13 265);
    --accent-ink:oklch(16% 0.03 265);
    --accent-soft:oklch(32% 0.055 265);
    --accent-soft-fg:oklch(84% 0.09 265);
    --success:oklch(74% 0.15 150);
    --success-soft:oklch(30% 0.05 150);
    --warn:oklch(78% 0.13 75);
    --warn-soft:oklch(32% 0.05 75);
    --rose:oklch(75% 0.14 15);
    --rose-soft:oklch(32% 0.05 15);
    --violet:oklch(76% 0.12 300);
    --violet-soft:oklch(32% 0.05 300);
    --teal:oklch(74% 0.1 195);
    --teal-soft:oklch(30% 0.045 195);
    --amber:oklch(78% 0.11 85);
    --amber-soft:oklch(33% 0.05 85);
    --danger:oklch(74% 0.15 25);
    --danger-soft:oklch(32% 0.06 25);
    --shadow-soft:0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 24px oklch(0% 0 0 / 0.35);
    --shadow-accent:0 10px 24px oklch(0% 0 0 / 0.45);
  }
}
:root[data-theme="dark"]{
  --bg:oklch(21% 0.014 265);
  --page-bg:oklch(15% 0.012 265);
  --surface:oklch(26% 0.016 265);
  --surface-2:oklch(29% 0.017 265);
  --border:oklch(35% 0.02 265);
  --border-soft:oklch(31% 0.018 265);
  --text:oklch(95% 0.006 265);
  --text-2:oklch(76% 0.012 265);
  --text-3:oklch(64% 0.012 265);
  --accent:oklch(74% 0.13 265);
  --accent-ink:oklch(16% 0.03 265);
  --accent-soft:oklch(32% 0.055 265);
  --accent-soft-fg:oklch(84% 0.09 265);
  --success:oklch(74% 0.15 150);
  --success-soft:oklch(30% 0.05 150);
  --warn:oklch(78% 0.13 75);
  --warn-soft:oklch(32% 0.05 75);
  --rose:oklch(75% 0.14 15);
  --rose-soft:oklch(32% 0.05 15);
  --violet:oklch(76% 0.12 300);
  --violet-soft:oklch(32% 0.05 300);
  --teal:oklch(74% 0.1 195);
  --teal-soft:oklch(30% 0.045 195);
  --amber:oklch(78% 0.11 85);
  --amber-soft:oklch(33% 0.05 85);
  --danger:oklch(74% 0.15 25);
  --danger-soft:oklch(32% 0.06 25);
  --shadow-soft:0 1px 2px oklch(0% 0 0 / 0.3), 0 10px 24px oklch(0% 0 0 / 0.35);
  --shadow-accent:0 10px 24px oklch(0% 0 0 / 0.45);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--page-bg);
  font-family:'Source Sans 3', system-ui, sans-serif;
  color:var(--text);
  min-height:100dvh;
  display:flex;
  justify-content:center;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Sora', system-ui, sans-serif; margin:0; text-wrap:balance;}
p{margin:0;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,textarea,select{font-family:inherit; color:inherit;}
a{color:inherit;}
::selection{background:var(--accent-soft); color:var(--accent-soft-fg);}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

#app-shell{
  width:100%;
  max-width:460px;
  min-height:100dvh;
  background:var(--bg);
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:var(--shadow-soft);
}
@media (min-width:560px){
  body{padding:28px 12px;}
  #app-shell{min-height:min(844px, calc(100dvh - 56px)); border-radius:32px; overflow:hidden; border:1px solid var(--border-soft);}
}

.scroll-area{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.pad{padding:18px 20px 110px;}
.stack{display:flex; flex-direction:column;}
.row{display:flex; align-items:center;}
.g2{gap:2px;} .g4{gap:4px;} .g6{gap:6px;} .g8{gap:8px;} .g10{gap:10px;} .g12{gap:12px;} .g14{gap:14px;} .g16{gap:16px;} .g20{gap:20px;} .g22{gap:22px;} .g24{gap:24px;}
.grow{flex:1;}
.center{align-items:center; justify-content:center;}
.between{justify-content:space-between;}
.eyebrow{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3);}
.muted{color:var(--text-2);}
.tiny{font-size:11.5px;}
.num{font-variant-numeric:tabular-nums;}
.tap{-webkit-tap-highlight-color:transparent;}
.tap:focus-visible, button:focus-visible, [tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:16px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:13px 20px; font-weight:700; font-size:14.5px; transition:transform .12s ease, opacity .12s ease;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-accent);}
.btn-primary:disabled{opacity:.45; box-shadow:none;}
.btn-ghost{background:var(--surface-2); color:var(--text); border:1px solid var(--border);}
.btn-ghost:disabled{opacity:.5;}
.btn-text{color:var(--accent); font-weight:700; font-size:13.5px;}
.btn-text:disabled{opacity:.5;}
.btn-block{width:100%;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:8px 13px; border-radius:999px; font-size:13px; font-weight:600; border:1px solid var(--border); background:var(--surface); color:var(--text);}
.icon-box{border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.icon-wrap{display:inline-flex; align-items:center; justify-content:center; line-height:0;}
.avatar{border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'Sora',sans-serif; font-weight:700; color:white;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12.5px; font-weight:700; color:var(--text-2);}
.field input, .field select, .field textarea{
  border:1px solid var(--border); background:var(--surface); border-radius:12px; padding:12px 13px; font-size:15px; color:var(--text); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:-1px;}
.field textarea{resize:vertical; min-height:72px;}
.progress-track{height:9px; border-radius:999px; background:var(--border-soft); overflow:hidden;}
.progress-fill{height:100%; border-radius:999px; background:var(--accent);}
.sheet-backdrop{position:absolute; inset:0; background:oklch(15% 0.02 265 / 0.45); z-index:40; animation:fade-in .18s ease;}
.sheet{position:absolute; left:0; right:0; bottom:0; background:var(--surface); border-radius:22px 22px 0 0; z-index:41; max-height:88%; display:flex; flex-direction:column; box-shadow:0 -12px 32px oklch(0% 0 0 / 0.18); animation:sheet-up .22s cubic-bezier(.2,.9,.3,1);}
.sheet-grab{width:36px; height:4px; border-radius:99px; background:var(--border); margin:10px auto 2px;}
.toast{position:absolute; left:50%; transform:translateX(-50%); bottom:104px; background:var(--text); color:var(--bg); padding:11px 18px; border-radius:999px; font-size:13.5px; font-weight:600; z-index:60; box-shadow:0 8px 20px oklch(0% 0 0 /.25); animation:toast-in .2s ease; max-width:82%; text-align:center;}
@keyframes fade-in{from{opacity:0} to{opacity:1}}
@keyframes sheet-up{from{transform:translateY(16px); opacity:.6} to{transform:translateY(0); opacity:1}}
@keyframes toast-in{from{transform:translate(-50%,8px); opacity:0} to{transform:translate(-50%,0); opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:16px; height:16px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; opacity:.7; flex-shrink:0;}

.tabbar{position:absolute; bottom:0; left:0; right:0; height:78px; padding-bottom:env(safe-area-inset-bottom); background:var(--surface); border-top:1px solid var(--border); display:flex; align-items:flex-start; justify-content:space-around; padding-top:10px; z-index:30;}
.tab-item{display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-3); width:64px;}
.tab-item.active{color:var(--accent); font-weight:700;}
.tab-item span{font-size:10.5px;}
.fab{width:54px; height:54px; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:flex; align-items:center; justify-content:center; margin-top:-25px; box-shadow:var(--shadow-accent);}

.topbar{position:sticky; top:0; z-index:20; background:var(--bg); padding:16px 20px 10px; display:flex; align-items:center; gap:12px;}
.banner{background:var(--warn-soft); color:var(--text); border-radius:12px; padding:10px 13px; font-size:12.5px; display:flex; align-items:center; gap:9px;}
.banner.danger{background:var(--danger-soft);}
.empty-illo{width:56px; height:56px; border-radius:16px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; color:var(--accent-soft-fg);}

#root{width:100%; height:100%; display:flex; flex-direction:column;}
#root:focus{outline:none;}