:root {
  color-scheme: dark;
  --bg: #070b14;
  --surface: #0d1322;
  --surface-2: #111a2d;
  --surface-3: #162139;
  --border: rgba(255,255,255,.085);
  --border-strong: rgba(132,156,255,.28);
  --text: #f5f7ff;
  --muted: #8d9ab5;
  --primary: #6f7cff;
  --primary-2: #8f63ff;
  --success: #36d399;
  --warning: #f6c453;
  --danger: #ff667d;
  --shadow: 0 24px 70px rgba(0,0,0,.32);
  --radius: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% -10%, rgba(111,124,255,.16), transparent 34%), var(--bg); color: var(--text); font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
code { direction: ltr; unicode-bidi: embed; font-family: Consolas, "Courier New", monospace; font-size: .86em; color: #b8c5ff; overflow-wrap: anywhere; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 280px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 24px 18px; border-left: 1px solid var(--border); background: rgba(8,13,24,.88); backdrop-filter: blur(20px); display: flex; flex-direction: column; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; padding: 8px; }
.brand-mark { width: 43px; height: 43px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; font-size: 21px; background: linear-gradient(145deg,var(--primary),var(--primary-2)); box-shadow: 0 12px 30px rgba(111,124,255,.35); }
.brand strong,.brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: .2px; }
.brand small { color: var(--muted); font-size: 11px; margin-top: 3px; direction: ltr; text-align: right; }
.brand.large .brand-mark { width: 54px; height: 54px; font-size: 25px; }
.nav-list { display: grid; gap: 7px; margin-top: 34px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 13px; color: var(--muted); transition: .18s ease; font-weight: 600; }
.nav-item span { width: 24px; text-align: center; font-size: 17px; }
.nav-item:hover { color: var(--text); background: rgba(255,255,255,.045); transform: translateX(-2px); }
.nav-item.active { color: white; background: linear-gradient(100deg,rgba(111,124,255,.22),rgba(143,99,255,.1)); border: 1px solid rgba(126,137,255,.25); box-shadow: inset 3px 0 0 var(--primary); }
.sidebar-footer { margin-top: auto; display: grid; gap: 12px; }
.domain-pill { direction: ltr; text-align: center; border: 1px solid var(--border); color: var(--muted); padding: 9px; border-radius: 11px; font-size: 11px; background: rgba(255,255,255,.025); }
.user-card { display: flex; align-items: center; gap: 10px; padding: 10px; background: rgba(255,255,255,.035); border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
.user-card img,.avatar-fallback { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--surface-3); }
.user-card div { min-width: 0; }
.user-card strong,.user-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card strong { font-size: 13px; }.user-card small { color: var(--muted); font-size: 10px; direction: ltr; }
.main-area { min-width: 0; display: flex; min-height: 100vh; flex-direction: column; }
.topbar { min-height: 103px; padding: 25px clamp(20px,4vw,48px); display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border); background: rgba(7,11,20,.52); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 20; }
.topbar h1 { margin: 2px 0 0; font-size: clamp(22px,3vw,31px); }
.eyebrow { color: #8e9cff; letter-spacing: 1.8px; font-size: 10px; font-weight: 800; margin: 0 0 6px; direction: ltr; text-align: right; }
.topbar-actions { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(54,211,153,.1),0 0 18px var(--success); }
.muted,.subtle { color: var(--muted); }.subtle { font-size: 13px; }
.page-content { width: min(1500px,100%); margin: 0 auto; padding: 32px clamp(18px,4vw,48px) 50px; flex: 1; }
.page-footer { padding: 20px 28px 30px; text-align: center; color: #66718a; font-size: 12px; }
.hero-card { position: relative; overflow: hidden; padding: clamp(24px,4vw,42px); border: 1px solid var(--border-strong); border-radius: 26px; background: linear-gradient(125deg,rgba(111,124,255,.2),rgba(17,26,45,.82) 45%,rgba(143,99,255,.12)); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.hero-card::after { content:""; position:absolute; width:280px;height:280px;border-radius:50%;left:-110px;bottom:-170px;background:rgba(123,91,255,.22);filter:blur(12px); }
.hero-card h2 { margin: 14px 0 10px; font-size: clamp(27px,4vw,45px); position: relative; z-index: 1; }
.hero-card p { margin: 0; color: #aab5ce; max-width: 680px; line-height: 1.8; position: relative; z-index: 1; }
.compact-hero { min-height: 190px; }
.hero-identity { min-width: 280px; padding: 15px; border: 1px solid var(--border); background: rgba(7,11,20,.55); border-radius: 18px; display: flex; align-items: center; gap: 14px; position: relative; z-index: 2; }
.hero-identity img,.bot-fallback { width: 66px; height: 66px; border-radius: 19px; object-fit: cover; display:grid;place-items:center;background:linear-gradient(145deg,var(--primary),var(--primary-2));font-size:28px;font-weight:900; }
.hero-identity small,.hero-identity strong,.hero-identity span { display:block; }.hero-identity small,.hero-identity span{color:var(--muted);font-size:12px}.hero-identity strong{margin:4px 0;font-size:15px}
.status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; border: 1px solid var(--border); background: rgba(255,255,255,.04); }
.status-chip span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.status-chip.success { color: var(--success); }.status-chip.warning{color:var(--warning)}.status-chip.danger{color:var(--danger)}
.metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 15px; margin: 18px 0; }.metric-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.metric-card { border: 1px solid var(--border); background: linear-gradient(145deg,rgba(17,26,45,.92),rgba(12,18,32,.9)); border-radius: 18px; padding: 20px; display: flex; align-items: center; gap: 14px; min-width:0; }
.metric-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #aeb7ff; background: rgba(111,124,255,.12); border:1px solid rgba(111,124,255,.18); font-size:19px; }
.metric-card div{min-width:0}.metric-card small,.metric-card strong{display:block}.metric-card small{color:var(--muted);font-size:12px;margin-bottom:7px}.metric-card strong{font-size:clamp(16px,2vw,23px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dashboard-grid,.settings-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.span-2{grid-column:span 2}
.panel { background: linear-gradient(150deg,rgba(16,24,42,.95),rgba(10,15,28,.94)); border:1px solid var(--border); border-radius:var(--radius); padding:22px; box-shadow:0 12px 40px rgba(0,0,0,.16); min-width:0; scroll-margin-top:125px; }
.panel-head { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px }.panel-head h2{font-size:18px;margin:0}.panel-head .eyebrow{margin-bottom:5px}
.mini-stats { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px }.mini-stats div{padding:16px;border-radius:15px;background:rgba(255,255,255,.028);border:1px solid var(--border)}.mini-stats strong,.mini-stats span{display:block}.mini-stats strong{font-size:21px;margin-bottom:7px}.mini-stats span{color:var(--muted);font-size:11px;line-height:1.5}
.stack-list { display:grid;gap:10px }.stack-list>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 13px;border-radius:12px;background:rgba(255,255,255,.025);border:1px solid var(--border)}.stack-list span{color:var(--muted);font-size:12px}.stack-list strong{font-size:13px}.stack-list.compact>div{padding:10px 12px}
.info-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px }.info-grid div{padding:13px;border-bottom:1px solid var(--border)}.info-grid span,.info-grid strong{display:block}.info-grid span{font-size:11px;color:var(--muted);margin-bottom:6px}.info-grid strong{font-size:13px;overflow-wrap:anywhere}
.quick-actions { display:grid;gap:9px }.quick-actions a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;color:#c8d0e4;background:rgba(255,255,255,.025);border:1px solid var(--border);font-size:13px;transition:.18s}.quick-actions a:hover{border-color:var(--border-strong);background:rgba(111,124,255,.08);transform:translateX(-3px)}.quick-actions span{color:#aeb6ff}
.page-intro { display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:18px }.page-intro p{color:var(--muted);margin:0;line-height:1.8;max-width:850px}
.count-badge { display:inline-grid;place-items:center;min-width:35px;height:29px;padding:0 10px;border-radius:999px;background:rgba(111,124,255,.12);color:#bdc4ff;border:1px solid rgba(111,124,255,.2);font-size:12px;font-weight:800 }
.toolbar{margin-bottom:17px}.command-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.command-card{padding:17px;border-radius:15px;background:rgba(255,255,255,.025);border:1px solid var(--border);transition:.18s}.command-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}.command-name{direction:ltr;text-align:left;color:#bec5ff;font-family:Consolas,monospace;font-weight:800}.command-card p{color:var(--muted);font-size:12px;line-height:1.7;min-height:41px}.option-count{font-size:10px;color:#74809a}
.input,.select,.textarea { width:100%; border:1px solid var(--border);background:#0a1020;color:var(--text);border-radius:12px;padding:11px 12px;outline:none;transition:.18s }.input:focus,.select:focus,.textarea:focus{border-color:rgba(111,124,255,.65);box-shadow:0 0 0 3px rgba(111,124,255,.1)}.select{cursor:pointer}.textarea{min-height:90px;resize:vertical}.textarea.compact{min-height:52px;max-height:130px}
.field{display:grid;gap:8px}.field>span{font-size:12px;font-weight:700}.field small{color:var(--muted);font-size:10px}.form-grid{display:grid;gap:15px}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-start}.form-stack{display:grid;gap:10px}.inline-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:stretch;margin-bottom:14px}
.button { border:1px solid var(--border);border-radius:11px;padding:10px 15px;cursor:pointer;font-weight:700;font-size:12px;display:inline-flex;justify-content:center;align-items:center;gap:8px;transition:.18s;white-space:nowrap }.button:hover{transform:translateY(-1px)}.button.primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));border-color:transparent;box-shadow:0 10px 25px rgba(111,124,255,.22)}.button.ghost{background:rgba(255,255,255,.035)}.button.xl{padding:14px 18px;font-size:14px}.button.full{width:100%}
.danger-link { border:0;background:rgba(255,102,125,.08);color:#ff8295;border-radius:9px;padding:7px 10px;cursor:pointer;font-size:11px;transition:.18s }.danger-link:hover{background:rgba(255,102,125,.17)}
.item-list{display:grid;gap:8px;max-height:390px;overflow:auto;padding-left:3px}.scroll-list{max-height:560px}.list-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--border);background:rgba(255,255,255,.022);border-radius:12px;min-width:0}.list-item>span{min-width:0}.list-item span small,.list-item span strong,.list-item span code{display:block}.list-item span small{color:var(--muted);font-size:10px}.list-item span strong{font-size:12px;margin-bottom:4px}.word-item b{font-size:12px;font-weight:500;overflow-wrap:anywhere;line-height:1.65}.word-item span{display:flex;align-items:flex-start;gap:8px;max-width:calc(100% - 55px)}
.emoji-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-height:400px;overflow:auto}.emoji-item{display:flex;align-items:center;justify-content:space-between;gap:5px;border:1px solid var(--border);background:rgba(255,255,255,.025);border-radius:12px;padding:9px}.emoji-item>span{font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.channel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:15px}.channel-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.025);min-width:0}.channel-item .hash{width:32px;height:32px;border-radius:10px;background:rgba(111,124,255,.1);color:#aab3ff;display:grid;place-items:center;font-size:18px}.channel-item div{min-width:0;flex:1}.channel-item strong,.channel-item code{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-item strong{font-size:12px;margin-bottom:4px}
.alert{padding:13px 15px;border-radius:13px;border:1px solid var(--border);margin-bottom:17px;font-size:13px}.alert.success{background:rgba(54,211,153,.08);color:#78e8bb;border-color:rgba(54,211,153,.2)}.alert.error{background:rgba(255,102,125,.08);color:#ff98a8;border-color:rgba(255,102,125,.2)}.alert.warning{background:rgba(246,196,83,.08);color:#ffdc86;border-color:rgba(246,196,83,.2)}.alert.info{background:rgba(111,124,255,.08);color:#b9c0ff}
.empty-state{padding:38px 15px;text-align:center;color:var(--muted);border:1px dashed var(--border);border-radius:14px}.empty-state.small{padding:18px;font-size:12px}
.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:650px}.data-table th,.data-table td{text-align:right;padding:13px;border-bottom:1px solid var(--border);font-size:12px}.data-table th{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.6px}.data-table tbody tr:hover{background:rgba(255,255,255,.018)}
.progress{height:12px;border-radius:99px;background:#080d18;border:1px solid var(--border);overflow:hidden}.progress span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--primary-2));box-shadow:0 0 20px rgba(111,124,255,.45)}
.center-state{min-height:58vh;display:grid;place-items:center;align-content:center;text-align:center;gap:10px}.state-code{font-size:90px;font-weight:900;background:linear-gradient(130deg,#fff,#7583ff);background-clip:text;color:transparent}.center-state h2,.center-state h1{margin:0}.center-state p{color:var(--muted);margin:0 0 12px}.error-page{min-height:100vh}
.login-body{display:grid;place-items:center;padding:22px;background:radial-gradient(circle at 20% 20%,rgba(111,124,255,.18),transparent 30%),#070b14}.login-shell{width:min(1050px,100%);min-height:610px;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);border-radius:28px;overflow:hidden;background:rgba(11,17,31,.95);box-shadow:var(--shadow)}.login-panel{padding:clamp(30px,6vw,70px);display:flex;flex-direction:column;justify-content:center}.login-panel>.brand{padding:0;margin-bottom:50px}.login-panel h1{font-size:clamp(34px,5vw,54px);line-height:1.15;margin:8px 0 18px}.login-copy{color:var(--muted);line-height:1.85;margin:0 0 28px}.login-meta{display:flex;justify-content:space-between;gap:10px;color:#67738d;font-size:10px;margin-top:18px;direction:ltr}.login-visual{position:relative;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,rgba(111,124,255,.22),rgba(22,14,48,.7));border-right:1px solid var(--border)}.orb{position:absolute;border-radius:50%;filter:blur(5px)}.orb-one{width:320px;height:320px;background:rgba(111,124,255,.32);top:-100px;right:-100px}.orb-two{width:260px;height:260px;background:rgba(172,74,255,.25);bottom:-70px;left:-80px}.visual-card{position:relative;width:min(320px,75%);padding:36px;border-radius:24px;background:rgba(8,12,24,.58);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px);text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.35)}.shield{font-size:64px;display:block;margin-bottom:20px}.visual-card strong,.visual-card small{display:block}.visual-card strong{font-size:20px;direction:ltr}.visual-card small{margin-top:8px;color:var(--muted);direction:ltr}.code-box{padding:12px;border-radius:11px;border:1px solid var(--border);background:#070c17;overflow:auto}
.icon-button{width:42px;height:42px;border-radius:12px;border:1px solid var(--border);background:var(--surface);cursor:pointer}.mobile-only,.mobile-overlay{display:none}
@media(max-width:1100px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid .span-2{grid-column:span 2}.mini-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.command-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:fixed;right:0;top:0;width:min(300px,88vw);transform:translateX(105%);transition:.22s;box-shadow:var(--shadow)}body.menu-open .sidebar{transform:translateX(0)}.mobile-overlay{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:25;opacity:0;pointer-events:none;transition:.22s}body.menu-open .mobile-overlay{opacity:1;pointer-events:auto}.mobile-only{display:grid;place-items:center}.topbar{padding:18px 20px;min-height:84px;justify-content:flex-start}.topbar-actions{margin-right:auto}.page-content{padding:22px 16px 40px}.hero-card{align-items:flex-start;flex-direction:column}.hero-identity{width:100%;min-width:0}.settings-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.login-shell{grid-template-columns:1fr;min-height:auto}.login-visual{display:none}.login-panel{min-height:600px}.form-grid.three{grid-template-columns:1fr}.form-actions{grid-column:auto}}
@media(max-width:580px){.metric-grid,.metric-grid.three,.dashboard-grid{grid-template-columns:1fr}.dashboard-grid .span-2{grid-column:auto}.mini-stats,.info-grid,.command-grid,.channel-grid{grid-template-columns:1fr}.emoji-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.page-intro{align-items:flex-start;flex-direction:column}.inline-form{grid-template-columns:1fr}.topbar-actions{display:none}.panel{padding:17px}.hero-card{padding:22px}.login-panel{padding:28px 22px}.login-panel h1{font-size:36px}.metric-card strong{font-size:20px}}