:root { --bg: #0b1328; --row: #121d3b; --line: #22305a; --text: #e6ecff; --muted: #9fb0de; --kicker: #8fa3d6;
  --cyan: #22E3FF; --violet: #8B5CF6; --lime: #C8F135; --ink: #06122a; --foot: #6f82b8; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text);
  font: 15px/1.5 "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif; }
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px;
  background: radial-gradient(1200px 600px at 50% -10%, #1a2552 0%, var(--bg) 60%); }
.frame { width: 100%; max-width: 620px; padding: 1px; background: #2b3a63;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.card { position: relative; background: var(--bg); padding: 28px 28px 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 21.6px), calc(100% - 21.6px) 100%, 0 100%); }
.card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 6px 0 22px; }
.logo { width: 46px; height: 48px; }
.word { font-weight: 700; font-size: 20px; letter-spacing: .28em; background: linear-gradient(90deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.kicker { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--kicker); margin: 0 0 4px; }
h1 { font-size: 24px; margin: 0 0 8px; word-break: break-word; }
.muted { color: var(--muted); margin: 0 0 18px; }
.path { background: var(--row); border: 1px solid var(--line); padding: 12px 14px; margin: 0 0 16px; overflow-x: auto; }
.path code { font: 14px/1.4 Consolas, "Cascadia Mono", monospace; color: var(--text); white-space: pre-wrap; word-break: break-all; }
.row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.btn { font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: .08em; padding: 12px 20px; cursor: pointer; color: #cfe0ff; background: #17244a;
  border: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%); font-family: inherit; }
.btn:hover { background: #1f3060; }
.btn.primary { color: var(--ink); border: 0; background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.btn.primary:hover { filter: brightness(1.12); }
.help { border-top: 1px solid var(--line); padding-top: 14px; color: var(--muted); }
.help p { margin: 0 0 12px; }
kbd { font: 12px Consolas, monospace; border: 1px solid #2f4a8a; padding: 1px 6px; color: var(--text); background: var(--row); }
.foot { border-top: 1px solid #1d2a50; margin: 8px -28px 0; padding: 10px 28px 12px; font-size: 10px; letter-spacing: .24em; color: var(--foot); }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--lime); color: var(--ink); font-weight: 700;
  padding: 10px 18px; letter-spacing: .08em; }
[hidden] { display: none !important; }