:root { color-scheme: light; --primary:#803489; --primary-dark:#61236a; --primary-soft:#f5edf6; --gold:#c69a43; --green:#28795d; --red:#b8424f; --ink:#20272b; --muted:#657178; --line:#d9e0e1; --surface:#fff; --background:#f2f5f4; font-family: Inter, "Segoe UI", Arial, sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--background); color:var(--ink); letter-spacing:0; }
button,input { font:inherit; letter-spacing:0; }
button { cursor:pointer; }
.app-header { position:sticky; top:0; z-index:5; height:72px; padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left)); display:flex; align-items:center; justify-content:space-between; border-top:5px solid var(--primary); border-bottom:1px solid var(--line); background:rgba(255,255,255,.96); }
.brand { display:flex; align-items:center; gap:11px; color:inherit; text-decoration:none; }
.brand img { width:42px; height:42px; }
.brand span,.brand small { display:block; }
.brand strong { font-size:16px; }
.brand small { margin-top:2px; color:var(--muted); font-size:12px; }
.connection { display:flex; align-items:center; gap:7px; color:var(--green); font-size:12px; font-weight:700; }
.connection i { width:8px; height:8px; border-radius:50%; background:currentColor; }
.connection.offline { color:var(--red); }
#app { width:min(760px,100%); margin:0 auto; padding:28px 18px calc(36px + env(safe-area-inset-bottom)); }
.loading { min-height:55vh; display:grid; place-content:center; justify-items:center; color:var(--muted); }
.loading span { width:34px; height:34px; border:3px solid #e0d1e3; border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.intro { margin-bottom:22px; }
.eyebrow { color:var(--primary); font-size:12px; font-weight:800; text-transform:uppercase; }
h1 { margin:7px 0 8px; font-size:clamp(26px,7vw,38px); line-height:1.08; }
.intro p { margin:0; max-width:600px; color:var(--muted); font-size:15px; line-height:1.55; }
.panel { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:0 10px 30px rgba(31,45,50,.07); }
.panel + .panel { margin-top:14px; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:17px 18px; border-bottom:1px solid var(--line); }
.panel-head h2 { margin:0; font-size:17px; }
.panel-head span { color:var(--muted); font-size:12px; }
.pair-form { padding:18px; }
.field { display:grid; gap:7px; margin-bottom:16px; }
.field label { color:#4f5b61; font-size:12px; font-weight:800; }
.field input { width:100%; min-height:48px; padding:0 13px; border:1px solid #bdc9cc; border-radius:6px; outline:none; color:var(--ink); background:#fff; font-size:16px; }
.field input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(128,52,137,.12); }
.code-input { text-align:center; font-size:28px!important; font-weight:800; letter-spacing:8px!important; }
.primary,.secondary,.danger { min-height:46px; padding:0 18px; border:0; border-radius:6px; font-weight:800; }
.primary { width:100%; color:#fff; background:var(--primary); }
.primary:hover { background:var(--primary-dark); }
.primary:disabled,.secondary:disabled,.danger:disabled { opacity:.5; cursor:wait; }
.pair-note { display:flex; gap:11px; margin-top:16px; padding:13px; border-left:3px solid var(--gold); background:#fbf8f1; color:#665b44; font-size:12px; line-height:1.5; }
.summary { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:15px 18px; }
.summary strong,.summary small { display:block; }
.summary small { margin-top:4px; color:var(--muted); }
.fingerprint { padding:5px 8px; border:1px solid #dfd1e1; border-radius:5px; color:var(--primary); background:var(--primary-soft); font:700 11px ui-monospace,monospace; }
.account-list { display:flex; gap:6px; flex-wrap:wrap; padding:0 18px 16px; }
.account-list span { padding:5px 8px; border-radius:4px; color:#435058; background:#edf1f1; font-size:11px; font-weight:700; }
.request-list { display:grid; gap:12px; }
.request { border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:8px; background:#fff; box-shadow:0 8px 24px rgba(31,45,50,.06); }
.request-main { padding:18px; }
.request-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.request h2 { margin:0; font-size:19px; }
.request time { color:var(--red); font-size:12px; font-weight:800; white-space:nowrap; }
.request dl { display:grid; grid-template-columns:105px 1fr; gap:7px 10px; margin:16px 0 0; font-size:13px; }
.request dt { color:var(--muted); }
.request dd { margin:0; font-weight:650; overflow-wrap:anywhere; }
.request-actions { display:grid; grid-template-columns:1fr 1.4fr; gap:9px; padding:14px 18px; border-top:1px solid var(--line); background:#fafbfb; }
.secondary { color:var(--red); border:1px solid #e2b9be; background:#fff; }
.approve { color:#fff; background:var(--green); }
.approve:hover { background:#1e624b; }
.empty { padding:34px 20px; text-align:center; border:1px dashed #bdc8ca; border-radius:8px; background:rgba(255,255,255,.55); }
.empty strong { display:block; font-size:17px; }
.empty p { margin:7px auto 0; max-width:480px; color:var(--muted); font-size:13px; line-height:1.5; }
.refresh { margin-top:14px; width:100%; min-height:43px; border:1px solid var(--line); border-radius:6px; color:var(--primary); background:#fff; font-weight:750; }
#toast { position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom)); z-index:20; max-width:calc(100% - 32px); padding:12px 16px; border-radius:6px; color:#fff; background:#252c30; box-shadow:0 8px 30px rgba(0,0,0,.2); opacity:0; transform:translate(-50%,15px); transition:.2s; pointer-events:none; font-size:13px; font-weight:700; }
#toast.show { opacity:1; transform:translate(-50%,0); }
#toast.error { background:var(--red); }
@media (max-width:520px) { #app{padding-top:20px}.connection{font-size:0}.connection i{width:10px;height:10px}.request-actions{grid-template-columns:1fr}.request dl{grid-template-columns:88px 1fr} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }