/* Solva — shared styles. Aurora palette, mirrors Sources/Solva/Design/Theme.swift */
:root{
  --night:#0A0E1A; --elevated:#121829;
  --violet:#7C5CFF; --indigo:#4C6FFF; --cyan:#39E5D6; --mint:#51F5B0;
  --text:#FFFFFF; --text-2:rgba(255,255,255,.62); --text-3:rgba(255,255,255,.40);
  --stroke:rgba(255,255,255,.08); --card:rgba(255,255,255,.05);
  --maxw:720px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--night); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* Aurora glow */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60vw 48vw at 12% -8%, rgba(124,92,255,.22), transparent 62%),
    radial-gradient(52vw 42vw at 92% 4%, rgba(57,229,214,.14), transparent 60%),
    radial-gradient(46vw 40vw at 50% 108%, rgba(76,111,255,.16), transparent 62%);
}
.wrap{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto; padding:0 22px 96px}

header{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:26px 0 14px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--text)}
.mark{width:30px; height:30px; border-radius:9px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--violet),var(--indigo) 52%,var(--cyan));
  box-shadow:0 0 22px rgba(124,92,255,.42)}
.brand b{font-size:18px; letter-spacing:.2px; font-weight:650}
nav{display:flex; gap:20px; flex-wrap:wrap}
nav a{color:var(--text-2); text-decoration:none; font-size:14.5px}
nav a:hover,nav a[aria-current]{color:var(--text)}

h1{font-size:clamp(28px,5.2vw,40px); line-height:1.15; letter-spacing:-.6px; margin:34px 0 10px; font-weight:680}
h2{font-size:20px; letter-spacing:-.2px; margin:38px 0 12px; font-weight:640}
h3{font-size:16.5px; margin:26px 0 8px; font-weight:620}
p,li{color:var(--text-2)}
p{margin:12px 0}
ul{padding-left:20px} li{margin:7px 0}
strong{color:var(--text); font-weight:620}
a{color:var(--cyan)}
.lede{font-size:18px; color:var(--text-2); margin-top:0}
.updated{color:var(--text-3); font-size:13.5px; margin:0 0 8px; letter-spacing:.3px}
hr{border:0; border-top:1px solid var(--stroke); margin:40px 0}

.card{background:var(--card); border:1px solid var(--stroke); border-radius:18px;
  padding:20px 22px; margin:18px 0}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
.grad{background:linear-gradient(120deg,var(--violet),var(--indigo) 45%,var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* FAQ */
details{border:1px solid var(--stroke); border-radius:16px; background:var(--card);
  padding:0 20px; margin:11px 0; overflow:hidden}
details[open]{background:rgba(255,255,255,.065)}
summary{cursor:pointer; list-style:none; padding:17px 0; font-weight:600;
  color:var(--text); display:flex; align-items:center; gap:13px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+"; color:var(--cyan); font-size:19px; line-height:1;
  width:15px; flex:0 0 auto; transition:transform .18s ease}
details[open] summary::before{content:"−"; transform:rotate(180deg)}
details .body{padding:0 0 18px 28px; border-top:1px solid var(--stroke); margin-top:-1px}
details .body p:first-child{margin-top:15px}

.btn{display:inline-block; padding:13px 24px; border-radius:13px; font-weight:620;
  text-decoration:none; color:#0A0E1A; border:0; cursor:pointer; font-size:15.5px;
  background:linear-gradient(120deg,var(--mint),var(--cyan));
  box-shadow:0 6px 26px rgba(81,245,176,.20)}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--stroke)}

.note{border-left:2px solid var(--violet); padding:2px 0 2px 16px; margin:20px 0}
.note p{margin:6px 0; font-size:15px}

footer{border-top:1px solid var(--stroke); margin-top:60px; padding-top:26px;
  color:var(--text-3); font-size:13.5px; display:flex; justify-content:space-between;
  gap:14px; flex-wrap:wrap}
footer a{color:var(--text-3); text-decoration:none}
footer a:hover{color:var(--text-2)}
@media (max-width:520px){ header{padding-bottom:6px} nav{gap:15px} }