:root {
    --bg: #f7f7f9;
    --fg: #1a1a1c;
    --muted: #6b7280;
    --border: #d9dce0;
    --accent: #2563eb;
    --accent-dark: #1d4ed8;
    --danger: #b91c1c;
    --ok: #15803d;
    --card-bg: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.topbar { display:flex; justify-content:space-between; align-items:center;
    padding: 0.9rem 1.4rem; background:#fff; border-bottom:1px solid var(--border); }
.brand { font-weight:600; letter-spacing:0.2px; }
.userbox { font-size:0.9rem; color:var(--muted); }
.inline { display:inline; margin-left:0.7rem; }
.linklike { background:none; border:none; color:var(--accent);
    cursor:pointer; padding:0; font:inherit; text-decoration:underline; }
main { max-width: 720px; margin: 2.5rem auto; padding: 0 1.2rem; }
footer { max-width:720px; margin: 2.5rem auto 3rem; padding: 0 1.2rem;
    color:var(--muted); font-size:0.85rem; text-align:center; }
.card { background: var(--card-bg); border:1px solid var(--border);
    border-radius: 10px; padding: 2rem; }
h1 { margin-top:0; font-size:1.4rem; font-weight:600; }
label { display:block; margin-bottom:1rem; font-size:0.92rem; color:#3b3b40; }
input[type=text], input[type=password], input[type=email] {
    display:block; width:100%; margin-top:0.35rem; padding:0.6rem 0.7rem;
    border:1px solid var(--border); border-radius:6px; font-size:1rem;
    background:#fff; color:var(--fg); }
input[readonly] { background: #f2f2f4; color:var(--muted); }
input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
button[type=submit], button.primary {
    background: var(--accent); color:#fff; border:none; border-radius:6px;
    padding: 0.65rem 1.1rem; font-size:1rem; cursor:pointer; }
button[type=submit]:hover { background: var(--accent-dark); }
.flash { padding: 0.75rem 1rem; border-radius: 6px; margin: 0 0 1rem;
    background:#fee2e2; color: var(--danger); border: 1px solid #fecaca; }
.flash.ok { background:#dcfce7; color: var(--ok); border-color: #bbf7d0; }
.flash.info { background:#dbeafe; color:#1e40af; border-color:#bfdbfe; }
.pw-field { position: relative; margin-top: 0.35rem; }
.pw-field input { padding-right: 44px; margin-top: 0; }
.pw-toggle {
    position: absolute; right: 4px; top: 50%;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    padding: 4px 10px; font-size: 1.15rem;
    color: var(--muted);
}
.pw-toggle:hover { color: var(--accent); }
.filedrop { display:flex; align-items:center; justify-content:flex-start; gap:0.8rem;
    border:2px dashed var(--border); border-radius:10px; padding:1.2rem;
    text-align:left; cursor:pointer; margin-top: 0.4rem; }
.filedrop input[type=file] { font-size: 0.95rem; }
.hint { display:block; font-size:0.85rem; color: var(--muted);
    font-weight: 400; margin-top: 0.25rem; line-height: 1.4; }
.muted { color: var(--muted); font-size:0.9rem; }
code { background:#f0f1f5; padding: 0.1rem 0.35rem; border-radius:3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:0.88rem; }
.qr { display:block; margin: 1rem 0; border: 1px solid var(--border); padding: 1rem; background:#fff; }
.download { display:inline-block; margin-top:0.3rem; padding:0.65rem 1.1rem;
    background: var(--ok); color:#fff; border-radius:6px; text-decoration:none; }
.result { margin-top:1.5rem; padding: 1.2rem; background:#f0fdf4;
    border:1px solid #bbf7d0; border-radius:8px; }