/* shared look of the website pages (home, login, admin): same calm, flat style as the step-by-step look */
:root{--bg:#f6f6f4;--card:#ffffff;--line:#e7e7e3;--ink:#1a1a1a;--muted:#6f6f6a;--soft:#f1f1ee;--brand:#1a1a1a;--on:#ffffff;
  --ok:#2f7d4f;--okbg:#e9f4ee;--note:#f4efe6;--warn:#b45309;--warnbg:#fdf3e7;--bad:#b42318;--r:12px}
:root[data-theme="dark"]{--bg:#111111;--card:#1a1a1a;--line:#2a2a2a;--ink:#f0f0ee;--muted:#9a9a95;--soft:#232323;--brand:#f0f0ee;--on:#111111;
  --ok:#7cc79a;--okbg:#18291f;--note:#262219;--warn:#f0a35e;--warnbg:#2a1f14;--bad:#f97066;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
button:disabled{opacity:.4;cursor:default}
.hidden{display:none !important}
.top{height:64px;display:flex;align-items:center;gap:14px;padding:0 28px;max-width:1120px;margin:0 auto}
.logo{font-weight:700;font-size:17px;letter-spacing:-.01em;text-decoration:none}
.sp{flex:1}
.icon{width:36px;height:36px;border-radius:999px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;padding:0}
.big{display:inline-block;background:var(--brand);color:var(--on);border:0;border-radius:var(--r);padding:13px 24px;font-weight:600;font-size:15.5px;text-decoration:none}
.big:not(:disabled):hover{opacity:.88}
.sec{display:inline-block;background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:12px 18px;font-weight:600;text-decoration:none}
.sec:hover{border-color:var(--muted)}
.sec.sm{padding:7px 14px;font-size:14px}
.ghost{background:transparent;border:0;color:var(--muted);padding:8px 4px}
.ghost:not(:disabled):hover{color:var(--ink)}
.muted{color:var(--muted)}
input[type=email],input[type=text]{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;outline:none;width:100%}
input:focus{border-color:var(--muted)}
.msg{font-size:14px;margin-top:12px;min-height:21px}
.msg.bad{color:var(--bad)} .msg.ok{color:var(--ok)}
.pill{display:inline-block;font-size:12px;padding:2px 9px;border-radius:999px;background:var(--soft);color:var(--muted)}
.pill.ok{background:var(--okbg);color:var(--ok)} .pill.warn{background:var(--warnbg);color:var(--warn)}