/* Helix — Mobile-first Stylesheet
   Dark + Gold system · PWA-optimised · WCAG-AA-minded */

:root{
  --bg:#0B0B0F; --bg-alt:#141419; --card:#1A1A22; --card-2:#20202A;
  --text:#F4F1EA; --text-dim:#A9A6B5; --text-ghost:#6B6878;
  --gold:#E6B85C; --gold-2:#F5D28C;
  --line:#2A2A35;
  --ok:#3FA65B; --err:#E0555A;
  --radius:16px; --radius-sm:10px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme: dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#FAF8F3; --bg-alt:#F1EEE5; --card:#FFFFFF; --card-2:#F5F2EA;
    --text:#1B1A17; --text-dim:#5B5748; --text-ghost:#948F7E; --line:#E5E1D5;
  }
}
:root[data-theme="dark"]{ --bg:#0B0B0F; }

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Fraunces","Georgia",serif;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
}
h1,h2,h3{font-weight:600; line-height:1.15; margin:0 0 .5em;}
p{line-height:1.55; color:var(--text-dim);}
a{color:inherit; text-decoration:none;}
.mono{font-family:"JetBrains Mono",monospace;}

.topbar{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:calc(.9rem + var(--safe-t)) 1.1rem .9rem; background:rgba(11,11,15,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:1.1rem; color:var(--gold);}
.brand-mark{font-size:1.3rem;}
.topbar-action{font-size:.85rem; color:var(--text-dim); border:1px solid var(--line); padding:.4rem .8rem; border-radius:99px;}

.app-main{max-width:640px; margin:0 auto; padding:1rem 1rem 6rem;}

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex;
  background:rgba(20,20,25,.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); padding:.5rem .25rem calc(.5rem + var(--safe-b));
}
.bottom-nav a{flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; font-size:.65rem; color:var(--text-ghost); padding:.25rem 0;}
.bottom-nav a span{font-size:1.15rem;}
.bottom-nav a.active{color:var(--gold);}

.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.1rem; margin-bottom:1rem;}
.card-title{font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-ghost); margin-bottom:.6rem;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  padding:.85rem 1.1rem; border-radius:99px; font-weight:600; font-size:.95rem;
  border:1px solid var(--gold); background:var(--gold); color:#1B1A17; cursor:pointer;
  font-family:inherit;
}
.btn-outline{background:transparent; color:var(--text);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--text-dim);}
.btn-google{background:#fff; color:#1B1A17; border-color:#fff;}
.btn-sm{width:auto; padding:.5rem .9rem; font-size:.8rem;}

.form-group{margin-bottom:1rem;}
label{display:block; font-size:.78rem; color:var(--text-dim); margin-bottom:.35rem;}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],select,textarea{
  width:100%; padding:.75rem .9rem; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--card-2); color:var(--text); font-family:inherit; font-size:.95rem;
}
textarea{min-height:90px; resize:vertical;}
input[type=range]{width:100%;}
.help{font-size:.72rem; color:var(--text-ghost); margin-top:.3rem;}

.alert{padding:.75rem 1rem; border-radius:var(--radius-sm); margin-bottom:1rem; font-size:.85rem;}
.alert-ok{background:rgba(63,166,91,.15); color:var(--ok); border:1px solid rgba(63,166,91,.35);}
.alert-error{background:rgba(224,85,90,.15); color:var(--err); border:1px solid rgba(224,85,90,.35);}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;}

.chip{display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:99px; background:var(--card-2); border:1px solid var(--line); font-size:.75rem; color:var(--text-dim);}
.badge-gold{background:rgba(230,184,92,.15); color:var(--gold); border-color:rgba(230,184,92,.4);}

.sign-hero{text-align:center; padding:1.4rem 1rem; border-radius:var(--radius); margin-bottom:1rem; border:1px solid var(--line);}
.sign-sigil{font-size:2.6rem;}
.sign-name{font-size:1.4rem; font-weight:700; margin:.3rem 0 .1rem;}
.sign-archetype{color:var(--text-dim); font-size:.85rem;}
.sign-meta{display:flex; justify-content:center; gap:1.2rem; margin-top:.8rem; font-size:.72rem; color:var(--text-ghost);}

.quotient-row{display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem;}
.quotient-label{flex:0 0 92px; font-size:.72rem; color:var(--text-dim);}
.quotient-bar{flex:1; height:8px; border-radius:99px; background:var(--card-2); overflow:hidden;}
.quotient-fill{height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2));}
.quotient-val{flex:0 0 30px; text-align:right; font-size:.75rem; color:var(--text-ghost);}

.ring-progress{display:flex; align-items:center; justify-content:center; flex-direction:column; padding:1.4rem 0;}
.ring-num{font-size:2.4rem; font-weight:700; color:var(--gold);}
.ring-sub{font-size:.75rem; color:var(--text-ghost);}

.hero{padding:2.2rem 1rem 1.4rem; text-align:center;}
.hero h1{font-size:1.9rem;}
.hero p{max-width:34rem; margin:0 auto 1.2rem;}
.track-grid{display:grid; grid-template-columns:1fr 1fr; gap:.8rem; margin:1.2rem 0;}
.track-card{border:1px solid var(--line); border-radius:var(--radius); padding:1rem; text-align:left;}
.track-card h3{font-size:.95rem; margin-bottom:.2rem;}
.track-card p{font-size:.78rem; margin:0;}

.divider{border:none; border-top:1px solid var(--line); margin:1.4rem 0;}
.text-center{text-align:center;}
.small{font-size:.78rem; color:var(--text-ghost);}
.mt-1{margin-top:.6rem;} .mb-1{margin-bottom:.6rem;}

.step-dots{display:flex; gap:.35rem; justify-content:center; margin-bottom:1rem;}
.step-dots span{width:7px; height:7px; border-radius:99px; background:var(--line);}
.step-dots span.active{background:var(--gold); width:18px;}

@media(min-width:720px){
  .app-main{padding-top:1.5rem;}
}