:root { --bg:#0d0f12; --card:#1a1d23; --card2:#23272f; --fg:#f2f4f7; --muted:#9aa3ad; --acc:#3e8bff; --ok:#2fbf71; --err:#ff5a5a; --warn:#f0a020; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:22px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
header { display:flex; align-items:center; gap:16px; padding:16px 24px; border-bottom:1px solid #222; }
h1 { font-size:32px; margin:0; } h2 { font-size:26px; margin:8px 0 12px; }
main { max-width:1100px; margin:0 auto; padding:16px 24px 48px; }
section { background:var(--card); border-radius:18px; padding:16px 20px 20px; margin:18px 0; }
.row { display:flex; gap:12px; align-items:center; } .between { justify-content:space-between; }
.list { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
button { font:inherit; color:var(--fg); background:var(--card2); border:0; border-radius:14px; cursor:pointer; }
button:active { transform:scale(.98); }
.big { min-height:76px; padding:0 32px; font-size:24px; font-weight:600; }
.small { min-height:56px; padding:0 20px; font-size:20px; }
.primary { background:var(--acc); }
.dest { display:flex; flex-direction:column; align-items:flex-start; text-align:left; min-height:96px; padding:16px 20px; gap:4px; }
.dest .t { font-size:24px; font-weight:600; } .dest .s { color:var(--muted); font-size:19px; }
.dest.sending { outline:3px solid var(--acc); opacity:.7; }
.pills { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.pill { font-size:17px; padding:3px 12px; border-radius:99px; background:#333a44; }
.pill.free { background:var(--ok); color:#04150b; font-weight:700; } .pill.busy { background:var(--warn); color:#1a1000; font-weight:700; } .pill.off { color:var(--muted); }
input, textarea { font:inherit; color:var(--fg); background:#0b0d10; border:2px solid #333; border-radius:14px; padding:0 20px; min-height:76px; width:100%; }
textarea { padding:16px; font:18px/1.4 ui-monospace,monospace; min-height:240px; margin-bottom:12px; }
.muted { color:var(--muted); font-size:18px; }
.badge:not(:empty) { background:var(--warn); color:#000; padding:4px 12px; border-radius:8px; font-size:18px; font-weight:700; }
.toast { position:fixed; left:50%; bottom:32px; transform:translateX(-50%) translateY(200%); background:#2a2f38; padding:20px 32px; border-radius:16px; font-size:24px; max-width:90vw; transition:transform .2s; z-index:10; box-shadow:0 8px 30px #000a; }
.toast.show { transform:translateX(-50%) translateY(0); } .toast.ok { background:#145c36; } .toast.err { background:#7a1d1d; } .toast.busy { background:#1d3d7a; }
footer { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.login main { max-width:460px; text-align:center; padding-top:40px; }
.login input { text-align:center; font-size:36px; letter-spacing:8px; margin:16px 0; }
.pad { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.key { min-height:84px; font-size:34px; font-weight:600; }
.login .big { width:100%; }
.msg { min-height:32px; } .msg.err { color:var(--err); }