:root { --bg: #070b14; --card: #0c111c; --line: #1f2937; --text: #e6edf6; --muted: #8a97ab; --accent: #03a5e7; --accent2: #4f6bff; --buy: #0ecb81; --sell: #f6465d; --warn: #f0b90b; }
[data-theme='light'] { --bg: #f3f5f9; --card: #ffffff; --line: #e3e8ef; --text: #0f172a; --muted: #5b6b82; --warn: #b7791f; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
body { display: flex; justify-content: center; padding: 20px 16px; }
.card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.logo { height: 20px; }
.badge { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; }
h1 { font-size: 20px; margin: 4px 0 0; line-height: 1.25; }
h2 { font-size: 16px; margin: 0 0 8px; }
.sub { margin: 0; color: var(--muted); font-size: 13px; word-break: break-all; }
.body, .note, .hint { margin: 0; color: var(--muted); font-size: 13px; }
.warn { margin: 0; color: var(--warn); font-size: 13px; }
.ok { margin: 0; color: var(--buy); font-size: 13px; }
.error { margin: 0; color: var(--sell); font-size: 13px; min-height: 1em; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.or { text-align: center; color: var(--muted); font-size: 12px; }
input[type='password'] { width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; }
input[type='password']:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.btn { appearance: none; border: 1px solid var(--line); background: transparent; color: var(--text); border-radius: 10px; padding: 11px 14px; font: inherit; font-weight: 600; cursor: pointer; }
.btn.primary { border: 0; color: #fff; background: linear-gradient(100deg, var(--accent), var(--accent2)); }
.btn:disabled { opacity: .55; cursor: default; }
.summary { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.summary dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 8px; font-size: 14px; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 600; text-align: end; word-break: break-word; }
.secret { display: block; padding: 12px; border-radius: 10px; background: rgba(127,127,127,.12); font: 13px/1.5 ui-monospace, monospace; word-break: break-all; user-select: all; }
.secret.blurred { filter: blur(6px); user-select: none; }
.link { color: var(--accent); }
.foot { margin-top: 6px; color: var(--muted); font-size: 11px; text-align: center; }