/* SOLUNA Sound — shared design system (tokens + components). Pages link /ui/soluna.css and add page CSS.
   Mood: night sky, gold sun/moon. Cream text on ink. Numbers in mono. Big, calm, one obvious action per screen. */
:root{
  --ink:#0a0507; --ink2:#120b0e; --panel:#161014; --panel2:#1c1418; --line:#2c2320; --line2:#3a2f2a;
  --txt:#f2e7d3; --dim:#9d8d76; --mute:#6f6255;
  --gold:#d4af37; --gold2:#f0d47a; --moon:#c8d3e6;
  --ok:#4ade80; --bad:#f87171; --warn:#fbbf24; --info:#7cc4ff;
  --sans:"Zen Kaku Gothic New","Hiragino Sans",system-ui,-apple-system,sans-serif;
  --serif:"Shippori Mincho","Hiragino Mincho ProN",Georgia,serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px; --r-lg:20px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --pad:16px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{color-scheme:dark}
body{background:var(--ink);color:var(--txt);font-family:var(--sans);font-size:15px;line-height:1.5;
     -webkit-font-smoothing:antialiased;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(60% 40% at 50% -10%, rgba(212,175,55,.14), transparent 70%),
             radial-gradient(40% 30% at 100% 100%, rgba(200,211,230,.05), transparent 70%)}
a{color:var(--gold2);text-decoration:none} a:hover{text-decoration:underline}
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}
.dim{color:var(--dim)} .small{font-size:.78rem}
/* brand */
.s-brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.34em;color:var(--gold);font-weight:700}
.s-brand .mark{width:22px;height:22px;border-radius:50%;background:conic-gradient(from 200deg,var(--gold) 0 50%,var(--moon) 50% 100%);box-shadow:0 0 18px rgba(212,175,55,.35);flex:none}
.s-brand small{letter-spacing:.12em;color:var(--dim);font-weight:500}
/* layout */
.s-wrap{max-width:900px;margin:0 auto;padding:var(--pad) var(--pad) 90px}
.s-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:11px 16px;background:rgba(22,16,20,.86);
  border:1px solid var(--line);border-radius:var(--r);position:sticky;top:8px;z-index:9;backdrop-filter:blur(10px)}
.s-card{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 40%),var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:18px;margin-top:14px;box-shadow:var(--shadow)}
.s-card>h2{font-size:.72rem;letter-spacing:.3em;color:var(--gold);font-family:var(--mono);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.s-card>h2 small{letter-spacing:0;font-family:var(--sans);color:var(--dim);font-weight:400;font-size:.78rem}
.s-card>h2 .step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--gold);color:#1a1206;font-size:.7rem;letter-spacing:0}
.s-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.s-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.s-kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.9rem} .s-kv span{color:var(--dim)}
details.s-fold>summary{cursor:pointer;list-style:none;color:var(--dim);font-size:.8rem;padding:8px 0;user-select:none}
details.s-fold>summary::before{content:"▸ ";color:var(--gold)} details.s-fold[open]>summary::before{content:"▾ "}
/* controls */
label.s-label,.s-label{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:6px 0 4px}
.s-input,input.s-input,select.s-input,textarea.s-input{background:#0e0709;color:var(--txt);border:1px solid var(--line2);border-radius:10px;
  padding:10px 12px;font-size:15px;width:100%;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.s-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.s-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;
  padding:12px 18px;font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit;transition:transform .08s,filter .15s,background .15s;
  background:var(--panel2);color:var(--txt);border-color:var(--line2)}
.s-btn:hover{filter:brightness(1.1)} .s-btn:active{transform:translateY(1px)} .s-btn:disabled{opacity:.45;cursor:not-allowed}
.s-btn.primary{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1206;border-color:transparent;box-shadow:0 8px 26px rgba(212,175,55,.25)}
.s-btn.ghost{background:transparent;color:var(--txt);border-color:rgba(242,231,211,.28);font-weight:500}
.s-btn.danger{background:#5b1d1d;color:#fff;border-color:#7a2a2a}
.s-btn.big{padding:18px 22px;font-size:1.1rem;border-radius:16px;width:100%}
.s-btn small{display:block;font-size:.72rem;font-weight:400;opacity:.75}
/* status */
.s-led{display:inline-block;width:9px;height:9px;border-radius:50%;background:#555;vertical-align:middle;margin-right:6px}
.s-led.on{background:var(--ok);box-shadow:0 0 8px var(--ok)} .s-led.bad{background:var(--bad);box-shadow:0 0 8px var(--bad)} .s-led.warn{background:var(--warn)}
.s-pill{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;color:var(--dim);padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.s-pill b{color:var(--txt);font-size:.9rem;font-family:var(--mono)}
.s-tile{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px 14px}
.s-tile small{display:block;font-size:.6rem;letter-spacing:.18em;color:var(--dim);text-transform:uppercase}
.s-tile b{font-size:1.5rem;font-weight:800;font-family:var(--mono)}
.s-tile.ok b{color:#7fc9a2} .s-tile.warn b{color:#e0b64a} .s-tile.bad b{color:#ff8a8a}
.s-tile .sub{font-size:.66rem;color:var(--dim);margin-top:2px}
.s-hint{font-size:.78rem;color:var(--dim);line-height:1.65}
.s-hint.note{border-left:2px solid var(--gold);padding-left:10px}
.s-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(10px);background:#23191d;color:var(--txt);border:1px solid var(--line2);
  padding:10px 16px;border-radius:999px;font-size:.85rem;opacity:0;transition:.25s;pointer-events:none;max-width:92vw;z-index:99;box-shadow:var(--shadow)}
.s-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} .s-toast.bad{background:#5b1d1d;border-color:#7a2a2a}
table.s-table{width:100%;border-collapse:collapse;font-size:.85rem} .s-table th{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.s-table td{padding:8px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle} .s-table tr:hover td{background:rgba(255,255,255,.02)}
pre.s-log{background:#000;color:#bcd;font-family:var(--mono);font-size:.7rem;padding:12px;border-radius:10px;max-height:280px;overflow:auto;white-space:pre-wrap}
.s-divider{height:1px;background:var(--line);margin:14px 0}
@media (max-width:520px){ .s-wrap{padding:10px 10px 90px} .s-card{padding:14px;border-radius:16px} .s-btn{padding:12px 14px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }