/* Youmimi (youmimi.ai) shared styles for /start, /me and /admin: the "ink night" theme of the landing page — the avatar's
   own palette (ink #0a0a0c ground, cream #f1efe9 text, amber accent, notify blue), pill buttons, rounded cards. Mobile-first. */
:root {
  --bg:#0a0a0c; --bg-2:#111113; --paper:#161619; --paper-2:#1c1c20; --ink:#f1efe9; --ink-2:#b3b1ab; --muted:#76757b;
  --line:#242428; --line-2:#333338; --soft:#1c1c20;
  --acc:#f0b429; --acc-2:#f7c95a; --acc-deep:#f7c95a; --acc-ink:#1a1508; --green:#3ecf8e; --warn:#f0b429; --err:#e8483f; --info:#2496e8;
  --r:22px; --shadow:0 24px 60px rgba(0,0,0,.4);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme: dark;
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.7 "Noto Sans SC",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  background-image:radial-gradient(900px 520px at 50% -240px, rgba(240,180,41,.12), transparent 70%); background-repeat:no-repeat }
a { color:var(--acc); text-decoration:none } a:hover { text-decoration:underline }
h1,h2,h3 { margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:900 }
p { margin:0 }
.wrap { width:min(1120px, calc(100% - 40px)); margin:0 auto }
.hidden { display:none !important }
.mono { font-family:var(--mono) }

/* header: the frozen cream bloub (assets/mark.svg) is the wordmark */
.top { position:sticky; top:0; z-index:20; background:rgba(10,10,12,.7); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line) }
.top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:16px }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:900; font-size:18px }
.brand:hover { text-decoration:none }
.brand img, .brand svg { width:30px; height:30px; display:block }
.brand small { color:var(--muted); font-weight:500; font-size:13px }
.nav { display:flex; gap:4px; align-items:center; font-size:15px }
.nav a { color:var(--ink-2); padding:8px 14px; border-radius:999px; transition:background .2s, color .2s } .nav a:hover { background:var(--paper); color:var(--ink); text-decoration:none }
.nav a, .brand { white-space:nowrap }
@media (max-width:760px) { .nav .hide-m { display:none } .nav { gap:2px } }
@media (max-width:480px) { .brand small { display:none } .nav .hide-s { display:none } }

/* buttons: pills; primary is amber on ink */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; text-decoration:none; transition:transform .15s ease, background .2s ease, border-color .2s, box-shadow .2s }
.btn:hover { text-decoration:none; background:var(--paper); border-color:var(--muted); transform:translateY(-1px) }
.btn:active { transform:translateY(0) }
.btn.primary { background:var(--acc); color:var(--acc-ink); border-color:var(--acc); box-shadow:0 10px 30px rgba(240,180,41,.22) }
.btn.primary:hover { background:var(--acc-2); border-color:var(--acc-2); box-shadow:0 14px 36px rgba(240,180,41,.32) }
.btn.ghost { background:transparent; border-color:var(--line-2) } .btn.ghost:hover { background:var(--paper) }
.btn.danger { background:rgba(232,72,63,.12); color:#ff8a80; border-color:rgba(232,72,63,.4) } .btn.danger:hover { background:rgba(232,72,63,.22) }
.btn:disabled { opacity:.5; cursor:default; transform:none }
.btn.sm { padding:7px 14px; font-size:14px }
.btn.block { width:100% }

/* cards & layout */
.card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow) }
.card h2 { font-size:18px; margin-bottom:12px; display:flex; align-items:center; gap:10px }
.card h2 .tag { font-size:12px; font-weight:700; color:var(--muted); border:1px solid var(--line-2); padding:2px 10px; border-radius:999px; letter-spacing:0 }
.kicker { font-size:13px; font-weight:700; color:var(--acc); display:flex; align-items:center; gap:8px; margin-bottom:12px }
.kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--acc) }
.grid { display:grid; gap:14px }
.grid.c2 { grid-template-columns:repeat(2,1fr) } .grid.c3 { grid-template-columns:repeat(3,1fr) }
@media (max-width:900px) { .grid.c3 { grid-template-columns:repeat(2,1fr) } }
@media (max-width:640px) { .grid.c2,.grid.c3 { grid-template-columns:1fr } }
.muted { color:var(--muted) } .small { font-size:14px } .tiny { font-size:12px }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:700; background:var(--soft); color:var(--ink-2); border:1px solid var(--line-2) }
.pill i { width:8px; height:8px; border-radius:50%; background:var(--muted); display:inline-block }
.pill.ok { background:rgba(62,207,142,.10); color:#7fe3b4; border-color:rgba(62,207,142,.35) } .pill.ok i { background:var(--green) }
.pill.warn { background:rgba(240,180,41,.10); color:var(--acc-2); border-color:rgba(240,180,41,.35) } .pill.warn i { background:var(--warn) }
.pill.err { background:rgba(232,72,63,.10); color:#ff8a80; border-color:rgba(232,72,63,.35) } .pill.err i { background:var(--err) }
.pill.wait i { animation:pulse 1.2s infinite }
@keyframes pulse { 0%,100%{opacity:.35} 50%{opacity:1} }
.row { display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line); font-size:15px }
.row:last-child { border-bottom:0 } .row > span:first-child { color:var(--ink-2) } .row > span:last-child { text-align:right; word-break:break-word }
.bar { height:8px; background:var(--bg); border:1px solid var(--line); border-radius:999px; overflow:hidden; margin:8px 0 2px } .bar i { display:block; height:100%; background:var(--acc); border-radius:999px }
.bar.over i { background:var(--err) }
.msg { font-size:13px; color:var(--muted); margin-top:10px; min-height:18px }
.msg.ok { color:#7fe3b4 } .msg.err { color:#ff8a80 }
.notice { border-radius:14px; padding:12px 16px; font-size:14px; background:rgba(240,180,41,.10); color:var(--acc-2); border:1px solid rgba(240,180,41,.35); margin-bottom:14px }
.notice.err { background:rgba(232,72,63,.10); color:#ff8a80; border-color:rgba(232,72,63,.35) }
.notice.info { background:rgba(36,150,232,.10); color:#8cc8f7; border-color:rgba(36,150,232,.35) }
.notice a { color:inherit; text-decoration:underline }

/* forms */
select, input, textarea { width:100%; padding:11px 16px; font:inherit; font-size:15px; border-radius:14px; border:1px solid var(--line-2); background:var(--bg); color:var(--ink); margin-top:8px }
select:focus, input:focus, textarea:focus { outline:0; border-color:var(--acc); box-shadow:0 0 0 3px rgba(240,180,41,.16) }
input::placeholder, textarea::placeholder { color:var(--muted) }
textarea { min-height:240px; font-family:var(--mono); font-size:13px; line-height:1.55; resize:vertical }
label { font-size:14px; color:var(--muted); display:block; margin-top:10px }

/* QR: stays white so it scans */
.qr { display:flex; justify-content:center; align-items:center; min-height:300px; background:#fff; color:#555; border:1px solid var(--line-2); border-radius:16px; padding:10px }
.qr .muted { color:#666 }
.qr svg { width:280px; height:280px; display:block; max-width:100% }
.status { margin:16px 0 0; text-align:center; min-height:52px }
.status b { display:block; font-size:17px } .status > span { color:var(--muted); font-size:14px; display:block; margin-top:2px }
.steps { color:var(--ink-2); font-size:14px; padding-left:20px; margin:18px 0 0 } .steps li { margin:4px 0 }

/* dialog */
dialog { border:1px solid var(--line-2); border-radius:var(--r); padding:24px; max-width:420px; width:calc(100% - 40px); box-shadow:0 30px 70px rgba(0,0,0,.6); color:var(--ink); background:var(--paper) }
dialog::backdrop { background:rgba(0,0,0,.65) }
dialog h3 { font-size:18px; margin-bottom:8px } dialog ul { margin:8px 0 14px; padding-left:20px; color:var(--ink-2); font-size:14px }
dialog .actions { display:flex; gap:10px; justify-content:flex-end }

footer.site { color:var(--muted); font-size:13px; text-align:center; padding:36px 0 40px; border-top:1px solid var(--line); margin-top:20px }
footer.site a { color:var(--ink-2); margin:0 8px }