:root { color-scheme: dark; --bg:#0f172a; --card:#111827; --line:#263244; --text:#e5e7eb; --muted:#94a3b8; --accent:#38bdf8; --danger:#fb7185; --ok:#34d399; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at top left,#1e3a8a,transparent 32rem),var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.wrap { max-width:1460px; margin:0 auto; padding:24px; } .card { background:rgba(17,24,39,.92); border:1px solid rgba(148,163,184,.18); border-radius:18px; padding:20px; box-shadow:0 24px 80px rgba(0,0,0,.25); }
.header { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:18px; } h1,h2 { margin:0 0 8px; } p { margin:0; color:var(--muted); }
.grid { display:grid; grid-template-columns:420px 1fr; gap:18px; align-items:start; } label { display:block; margin:12px 0; color:var(--muted); font-size:13px; }
input,select,textarea { width:100%; margin-top:7px; border:1px solid var(--line); border-radius:12px; background:#0b1220; color:var(--text); padding:11px; outline:none; } textarea { resize:vertical; }
button { border:0; border-radius:12px; padding:11px 16px; color:white; background:linear-gradient(135deg,var(--accent),#2563eb); font-weight:800; cursor:pointer; } button.secondary { background:#1f2937; border:1px solid var(--line); color:var(--text); } button.danger { background:#7f1d1d; } button.small { padding:7px 10px; border-radius:9px; font-size:12px; } button.eye { min-width:38px; padding:7px 8px; } button:disabled { opacity:.55; cursor:not-allowed; }
.tokenBox,.row,.filters,.bulk { display:flex; gap:10px; align-items:center; } .tokenBox { min-width:360px; } .row { justify-content:space-between; } .filters,.bulk { margin:10px 0; flex-wrap:wrap; } .bulk button { white-space:nowrap; } .hidden { display:none; }
.unlock { display:flex; align-items:center; gap:8px; margin:10px 0; } .unlock input { width:auto; margin:0; }
.hint,.summary { display:block; margin-top:6px; color:var(--muted); font-size:12px; } .summary { margin:8px 0 10px; }
.status { margin-top:12px; color:var(--muted); word-break:break-word; } .status.ok { color:var(--ok); } .status.bad { color:var(--danger); }
.accounts { max-height:620px; overflow:auto; border:1px solid var(--line); border-radius:12px; } .account { display:grid; grid-template-columns:auto minmax(360px,1fr) auto auto auto auto auto; gap:10px; align-items:center; padding:10px 12px; border-bottom:1px solid var(--line); } .account:last-child { border-bottom:0; }
.credential { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; word-break:break-all; cursor:text; } .credential.missing { color:#fca5a5; } .credential.isProtected { color:#bfdbfe; }
.badge { font-size:12px; color:#08111f; background:var(--muted); border-radius:999px; padding:3px 8px; white-space:nowrap; } .badge.used { background:var(--ok); } .badge.protected { background:#fbbf24; }
pre { min-height:140px; max-height:420px; overflow:auto; white-space:pre-wrap; word-break:break-word; background:#0b1220; border:1px solid var(--line); border-radius:12px; padding:14px; }
@media (max-width:1000px) { .header,.grid { display:block; } .tokenBox,.filters,.bulk { min-width:0; margin-top:16px; flex-wrap:wrap; } .card { margin-bottom:18px; } .account { grid-template-columns:auto 1fr auto; } .account button,.account .badge.protected { margin-top:4px; } }