/* ===================== RESET ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper-sunken);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:800;letter-spacing:-0.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2.5px solid var(--ember);outline-offset:2px;border-radius:4px}

/* ===================== APP SHELL ===================== */
/* Mobile-first: on wider viewports the app sits centered like a phone card,
   matching the screenshots the whole product is designed around. */
.app-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  position:relative;
  display:flex;
  flex-direction:column;
}
@media (min-width:560px){
  body{padding-block:2rem}
  .app-shell{
    min-height:calc(100vh - 4rem);
    border-radius:32px;
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    border:1px solid var(--line);
  }
}

.app-content{flex:1;padding:0 1.1rem 1.5rem;overflow-x:hidden}

/* ===================== TOP BAR ===================== */
.app-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1.1rem;
}
.app-brand{display:flex;align-items:center;gap:.5rem;font-family:var(--font-serif);font-weight:600;font-size:1.05rem}
.app-logo-dot{width:30px;height:30px;border-radius:9px;background:var(--brand);flex-shrink:0}
.app-icon-btn{
  width:38px;height:38px;border-radius:50%;background:var(--paper-sunken);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);position:relative;flex-shrink:0;
}
.app-icon-btn .badge{
  position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;border-radius:999px;
  background:var(--ember-strong);color:#fff;font-size:.6rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;padding:0 3px;border:2px solid var(--paper-raised);
}
.app-icon-row{display:flex;align-items:center;gap:.5rem}

/* ===================== CARD / SECTION PRIMITIVES ===================== */
.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.1rem}
.card-sunken{background:var(--paper-sunken);border-radius:var(--radius-md);padding:.9rem 1rem}
.section-label{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:999px;font-weight:800;font-size:.92rem;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-soft{background:var(--brand-tint);color:var(--brand-strong)}

/* ===================== PROGRESS ===================== */
.progress-track{height:7px;border-radius:999px;background:var(--line);overflow:hidden}
.progress-fill{height:100%;border-radius:999px;background:var(--brand)}

/* ===================== BOTTOM NAV (placeholder until screens arrive) ===================== */
.app-bottomnav{
  display:flex;align-items:center;justify-content:space-around;
  padding:.6rem .5rem;padding-bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
  background:var(--paper-raised);border-top:1px solid var(--line);
}
.app-bottomnav a{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
  font-size:.68rem;font-weight:700;color:var(--ink-faint);padding:.3rem .6rem;border-radius:12px;
}
.app-bottomnav a.active{color:var(--brand-strong)}