:root { --bg:#0E2230; --card:#13304180; --accent:#19b3a6; --line:#2a4a5c; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, Segoe UI, Roboto, sans-serif; background:var(--bg); color:#eaf2f6; }
.hidden { display:none !important; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.card { background:#13304f; padding:28px; border-radius:16px; width:100%; max-width:360px; box-shadow:0 10px 40px #0006; }
.card h1 { margin:0 0 4px; } .muted { color:#9fb3c0; } .small { font-size:12px; }
input { width:100%; padding:12px; margin:8px 0; border-radius:10px; border:1px solid var(--line); background:#0e2230; color:#fff; font-size:15px; }
button { background:var(--accent); color:#04201d; border:0; padding:12px 16px; border-radius:10px; font-weight:700; cursor:pointer; font-size:15px; }
button:hover { filter:brightness(1.07); }
button.link { background:none; color:#9fb3c0; font-weight:500; padding:8px; }
button.tab { background:none; color:#9fb3c0; border-bottom:2px solid transparent; border-radius:0; }
button.tab.active { color:#fff; border-bottom-color:var(--accent); }
.err { color:#ff8a8a; min-height:18px; font-size:14px; }
#qr { width:180px; height:180px; background:#fff; border-radius:8px; display:block; margin:8px auto; }
code { background:#0e2230; padding:2px 6px; border-radius:6px; }
header { display:flex; align-items:center; gap:16px; padding:12px 20px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
header nav { display:flex; gap:6px; flex:1; }
main { padding:20px; max-width:1000px; margin:0 auto; }
.list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.row { background:#13304f; border:1px solid var(--line); border-radius:12px; padding:14px; }
.row .top { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.badge { font-size:12px; padding:3px 8px; border-radius:20px; font-weight:700; }
.b-free{ background:#3a4a55; color:#cfe; } .b-pro{ background:#1b6fb3; color:#fff; } .b-plus{ background:#7a5cff; color:#fff; }
.b-block{ background:#a33; color:#fff; } .b-exp{ background:#b58100; color:#fff; }
.actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.actions button, .actions select { padding:8px 10px; font-size:13px; background:#0e2230; color:#fff; border:1px solid var(--line); border-radius:8px; font-weight:600; }
.actions button.danger { border-color:#a33; color:#ff9b9b; }
.cards { display:flex; gap:12px; flex-wrap:wrap; }
.statcard { background:#13304f; border:1px solid var(--line); border-radius:12px; padding:16px; min-width:160px; }
.statcard .n { font-size:26px; font-weight:800; }
table { width:100%; border-collapse:collapse; } td,th { padding:8px; border-bottom:1px solid var(--line); text-align:left; font-size:14px; }
.chatwrap { display:flex; gap:12px; height:72vh; }
.threads { width:280px; overflow:auto; display:flex; flex-direction:column; gap:6px; }
.threads .t { background:#13304f; border:1px solid var(--line); border-radius:10px; padding:10px; cursor:pointer; }
.threads .t.active { border-color:var(--accent); }
.convo { flex:1; display:flex; flex-direction:column; background:#13304f; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.convo .msgs { flex:1; overflow:auto; padding:12px; display:flex; flex-direction:column; gap:6px; }
.convo .m { max-width:80%; padding:8px 11px; border-radius:12px; white-space:pre-wrap; word-break:break-word; }
.convo .m.client { align-self:flex-start; background:#1c3a4f; }
.convo .m.admin { align-self:flex-end; background:var(--accent); color:#04201d; }
.convo .cbar { display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); }
.convo .chd { padding:10px 12px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.convo .m img { max-width:200px; max-height:220px; border-radius:10px; display:block; cursor:pointer; }
.iconbtn { width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:#0e2230; color:#cfe; font-size:18px; cursor:pointer; flex:none; }
.divider { align-self:center; text-align:center; color:#8fb0bf; font-size:12px; margin:10px 0; width:100%; display:flex; align-items:center; gap:8px; }
.divider:before, .divider:after { content:""; flex:1; height:1px; background:var(--line); }
.modal { position:fixed; inset:0; background:#0008; display:flex; align-items:center; justify-content:center; padding:16px; z-index:10; }
.modal-card { background:#13304f; border-radius:16px; padding:22px; width:100%; max-width:420px; max-height:90vh; overflow:auto; }