@font-face { font-family:"Inter"; font-style:normal; font-weight:400 700; font-display:swap; src:url("/fonts/inter.woff2") format("woff2"); }
@font-face { font-family:"Montserrat"; font-style:normal; font-weight:500 800; font-display:swap; src:url("/fonts/montserrat.woff2") format("woff2"); }

:root {
  --page:#f3f2f8; --card:#fff; --ink:#17132b; --sub:#575071; --line:#e1deed; --field:#fafaff;
  --accent:#c2185b; --ring:rgba(194,24,91,.35); --ok:#17794a; --err:#b42318;
  --grad:linear-gradient(135deg,#d9480f,#c2185b 58%,#8e1a9e);
  --shadow:0 1px 2px rgba(23,19,43,.06), 0 14px 44px rgba(23,19,43,.09);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark) {
  :root { --page:#0e0b19; --card:#181427; --ink:#f4f2fb; --sub:#b0a9c9; --line:#2d2745; --field:#110e1f;
          --accent:#ff6b9d; --ring:rgba(255,107,157,.4); --ok:#4ade80; --err:#ff8a80;
          --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 44px rgba(0,0,0,.45); }
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--page); color:var(--ink); font:400 1.0625rem/1.55 "Inter",system-ui,"Segoe UI",sans-serif; min-height:100vh; }
[hidden] { display:none !important; }
svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }

/* top bar */
.top { display:flex; align-items:center; justify-content:space-between; max-width:600px; margin:0 auto; padding:22px 20px 0; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--ink); border-radius:8px; }
.brand-name { font:800 1.2rem/1 "Montserrat",sans-serif; letter-spacing:-.01em; }
.top-note { color:var(--sub); font-size:.9375rem; }

main { max-width:600px; margin:0 auto; padding:44px 20px 72px; }
h1 { font:800 2.25rem/1.12 "Montserrat",sans-serif; letter-spacing:-.025em; margin:0 0 12px; }
.lede { color:var(--sub); font-size:1.125rem; margin:0 0 28px; max-width:34em; }

.card { background:var(--card); border-radius:20px; padding:28px; box-shadow:var(--shadow); }

/* entries */
.entry { padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line); }
.entry-head { display:flex; align-items:center; justify-content:space-between; }
.field-label { display:block; font-weight:600; font-size:.9375rem; margin:0 0 8px; }
input[type=text], input[type=password] {
  width:100%; height:54px; padding:0 16px; font:inherit; color:var(--ink); background:var(--field);
  border:1.5px solid var(--line); border-radius:12px; margin-bottom:18px; transition:border-color .15s, box-shadow .15s;
}
input::placeholder { color:var(--sub); opacity:.75; }
input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
textarea { width:100%; padding:14px 16px; font:inherit; color:var(--ink); background:var(--field); border:1.5px solid var(--line); border-radius:12px; margin-bottom:18px; resize:vertical; transition:border-color .15s, box-shadow .15s; }
textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--ring); }
#built { margin-top:24px; padding-top:22px; border-top:1px solid var(--line); }
.masked { -webkit-text-security:disc; }
.hint { color:var(--sub); font-size:.9375rem; margin:10px 0 0; }
.entry ~ .entry .hint { display:none; }
.secret { position:relative; }
.secret input { padding-right:56px; margin-bottom:0; }
.eye { position:absolute; right:6px; top:6px; width:42px; height:42px; display:grid; place-items:center; border:0; background:none; color:var(--sub); border-radius:9px; cursor:pointer; }
.eye:hover { color:var(--ink); background:var(--line); }
.x { width:34px; height:34px; display:grid; place-items:center; border:0; background:none; color:var(--sub); border-radius:9px; cursor:pointer; margin:-4px -6px 4px 0; }
.x:hover { color:var(--err); background:var(--line); }
.x svg { width:18px; height:18px; }
.entry:only-child .x { visibility:hidden; }

.ghost { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:52px; font:600 1rem "Inter",sans-serif; color:var(--ink);
  background:none; border:1.5px dashed var(--line); border-radius:12px; cursor:pointer; transition:border-color .15s, color .15s; }
.ghost:hover { border-color:var(--accent); color:var(--accent); }

/* expiry segmented control */
.expiry { border:0; padding:0; margin:28px 0 22px; }
.expiry legend { font-weight:600; font-size:.9375rem; padding:0; margin-bottom:10px; }
.seg { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:5px; background:var(--field); border:1.5px solid var(--line); border-radius:14px; }
.seg input { position:absolute; opacity:0; pointer-events:none; }
.seg label { text-align:center; padding:11px 6px; border-radius:10px; font-weight:600; font-size:.9375rem; cursor:pointer; color:var(--sub); transition:background .15s,color .15s; }
.seg input:checked + label { background:var(--ink); color:var(--card); }
.seg input:focus-visible + label { outline:3px solid var(--ring); }

/* buttons */
.primary { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; height:58px; border:0; border-radius:14px; cursor:pointer;
  background:var(--grad); color:#fff; font:700 1.0625rem "Inter",sans-serif; letter-spacing:.005em; transition:filter .15s, transform .08s; }
.primary:hover { filter:brightness(1.1); }
.primary:active { transform:translateY(1px); }
.primary[disabled] { filter:grayscale(.5) brightness(.9); cursor:progress; }
.primary.ok, .primary.ok[disabled] { background:#147a46; filter:none; cursor:default; }
.primary.ok svg { stroke-width:2.8; width:22px; height:22px; }
.tick { stroke-dasharray:1; stroke-dashoffset:0; }
@media (prefers-reduced-motion:no-preference) {
  .primary.ok { animation:pop .35s cubic-bezier(.3,1.5,.5,1); }
  .tick { animation:tick .45s .08s ease-out both; }
  @keyframes tick { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
  @keyframes pop { 0% { transform:scale(.97); } 60% { transform:scale(1.015); } 100% { transform:none; } }
}
.textbtn { display:inline-block; margin-top:22px; background:none; border:0; padding:6px 2px; font:600 1rem "Inter",sans-serif; color:var(--accent); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
a:focus-visible, button:focus-visible { outline:3px solid var(--ring); outline-offset:2px; }

.error { color:var(--err); font-weight:600; margin:0 0 14px; }
.small { color:var(--sub); font-size:.9375rem; margin:14px 0 0; }

.assure { list-style:none; margin:26px 4px 0; padding:0; display:grid; gap:12px; color:var(--sub); font-size:.9375rem; }
.assure li { display:flex; gap:12px; align-items:flex-start; }
.assure svg { margin-top:2px; color:var(--accent); }

/* result */
.seal { width:84px; height:84px; margin:0 0 18px; display:block; }
.seal-arch { stroke-dasharray:1; stroke-dashoffset:0; }
.seal-key { transform-origin:60px 70px; }
@media (prefers-reduced-motion:no-preference) {
  .seal-arch { animation:draw .7s cubic-bezier(.4,0,.2,1) both; }
  .seal-key { animation:drop .5s .45s cubic-bezier(.3,1.4,.5,1) both; }
  @keyframes draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
  @keyframes drop { from { opacity:0; transform:translateY(-10px) scale(.8); } to { opacity:1; transform:none; } }
}
.linkbox { width:100%; height:54px; padding:0 16px; margin:0 0 14px; font:500 .9375rem ui-monospace,"Cascadia Mono",Consolas,monospace; color:var(--ink); background:var(--field); border:1.5px solid var(--line); border-radius:12px; }

/* opened */
.item { padding:18px 0; border-top:1px solid var(--line); }
.item:first-child { border-top:0; padding-top:0; }
.item:last-child { padding-bottom:0; }
.item-name { font-weight:600; font-size:.9375rem; color:var(--sub); margin-bottom:8px; }
.item-row { display:flex; gap:12px; align-items:stretch; }
.item-val { flex:1; min-width:0; background:var(--field); border:1.5px solid var(--line); border-radius:12px; padding:13px 14px; font:500 1.0625rem/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace; white-space:pre-wrap; word-break:break-all; }
.skipped { margin:20px 0 0; padding-top:18px; border-top:1px solid var(--line); color:var(--sub); font-size:.9375rem; }
.copy { flex:none; min-width:84px; border:0; border-radius:12px; background:var(--grad); color:#fff; font:700 1rem "Inter",sans-serif; cursor:pointer; padding:0 18px; }
.copy:hover { filter:brightness(1.1); }

@media (max-width:480px) {
  h1 { font-size:1.9rem; }
  .card { padding:22px 18px; border-radius:18px; }
  main { padding-top:32px; }
}