:root {
  --bg: var(--tg-theme-secondary-bg-color, #f3f5f7);
  --panel: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #17202a);
  --muted: var(--tg-theme-hint-color, #74808d);
  --accent: var(--tg-theme-button-color, #2675ff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --line: color-mix(in srgb, var(--text) 12%, transparent);
  --danger: #e5484d; --success: #21a366; --warning: #d98c00;
  --radius: 16px; --shadow: 0 8px 30px rgba(20, 30, 45, .08);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 252px 1fr; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; padding: 24px 16px; background: #101722; color: #f5f7fa; display: flex; flex-direction: column; z-index: 30; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(145deg, #4d8dff, #1657db); color: white; font-weight: 800; box-shadow: 0 8px 20px rgba(38,117,255,.3); }
.brand strong, .brand small { display:block; } .brand small { color:#8f9aaa; margin-top:2px; font-size:11px; }
.sidebar nav { display:grid; gap:6px; }
.nav-item { appearance:none; border:0; background:transparent; color:#aab4c2; text-align:left; padding:12px 14px; border-radius:12px; display:flex; align-items:center; gap:12px; }
.nav-item span { width:20px; text-align:center; } .nav-item:hover,.nav-item.active { color:white; background:#202a38; }
.sidebar-footer { margin-top:auto; padding:12px; color:#9ca8b7; font-size:12px; display:flex; gap:8px; align-items:center; }
.status-dot { width:8px;height:8px;border-radius:50%;background:#24c875;box-shadow:0 0 0 4px rgba(36,200,117,.12); }
.main { grid-column:2; min-width:0; }
.topbar { height:82px; padding:18px clamp(18px,4vw,42px); background:color-mix(in srgb,var(--panel) 92%, transparent); backdrop-filter:blur(14px); position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:16px; border-bottom:1px solid var(--line); }
.topbar h1 { margin:0;font-size:22px; } .topbar p { margin:3px 0 0;color:var(--muted);font-size:13px; }
.top-actions { margin-left:auto;display:flex;gap:10px;align-items:center; }.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-text);display:grid;place-items:center;font-weight:700}
.icon-button { width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);font-size:18px; }.menu-button{display:none}
.content { padding:28px clamp(18px,4vw,42px) 60px; max-width:1500px; margin:0 auto; }
.loading { color:var(--muted); padding:40px;text-align:center; }
.grid { display:grid; gap:16px; }.grid.stats{grid-template-columns:repeat(4,minmax(0,1fr));}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr));}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.card { background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);min-width:0; }
.card h2,.card h3{margin:0 0 12px}.card h2{font-size:18px}.card h3{font-size:15px}.card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.card-head h2{margin:0}
.stat-card { padding:18px; }.stat-label{font-size:12px;color:var(--muted);}.stat-value{font-size:30px;font-weight:750;margin-top:8px;letter-spacing:-.04em}.stat-note{font-size:12px;color:var(--muted);margin-top:7px}
.section-gap{margin-top:18px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}.toolbar .spacer{margin-left:auto}
.button { border:1px solid var(--line);background:var(--panel);color:var(--text);padding:10px 14px;border-radius:11px;font-weight:650;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px; }.button:hover{filter:brightness(.98)}.button.primary{background:var(--accent);color:var(--accent-text);border-color:transparent}.button.danger{background:var(--danger);color:white;border-color:transparent}.button.success{background:var(--success);color:white;border-color:transparent}.button.ghost{background:transparent}.button.small{padding:7px 10px;min-height:32px;font-size:12px}.button.full{width:100%}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:13px}table{width:100%;border-collapse:collapse;min-width:720px}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:13px}th{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;background:color-mix(in srgb,var(--panel) 94%,var(--bg))}tr:last-child td{border-bottom:0}.clickable{cursor:pointer}.clickable:hover td{background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.badge { display:inline-flex;align-items:center;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}.badge.running,.badge.active,.badge.transferred,.badge.completed{background:rgba(33,163,102,.12);color:var(--success)}.badge.failed,.badge.error,.badge.stopped{background:rgba(229,72,77,.12);color:var(--danger)}.badge.paused,.badge.dialing,.badge.queued,.badge.transferring{background:rgba(217,140,0,.13);color:var(--warning)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:650}.field small{color:var(--muted);font-size:11px;line-height:1.4}.field input,.field textarea,.field select{width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:11px;padding:11px 12px;outline:none}.field textarea{min-height:120px;resize:vertical;line-height:1.5}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border:1px solid var(--line);border-radius:12px;padding:12px}.switch{position:relative;width:44px;height:26px}.switch input{opacity:0}.switch i{position:absolute;inset:0;background:#aab1ba;border-radius:999px;transition:.2s}.switch i:after{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;background:white;border-radius:50%;transition:.2s}.switch input:checked+i{background:var(--accent)}.switch input:checked+i:after{transform:translateX(18px)}
.empty{text-align:center;padding:45px 20px;color:var(--muted)}.empty strong{display:block;color:var(--text);font-size:16px;margin-bottom:6px}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px}
.wizard-layout{display:grid;grid-template-columns:270px 1fr;gap:18px}.wizard-steps{padding:10px}.wizard-step{border:0;background:transparent;color:var(--muted);padding:12px;border-radius:11px;text-align:left;width:100%;display:flex;gap:10px;align-items:center}.wizard-step b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--bg);font-size:12px}.wizard-step.active{background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--accent)}.wizard-step.done b{background:var(--success);color:white}.wizard-content .step-description{color:var(--muted);font-size:13px;margin:-4px 0 20px;line-height:1.5}.wizard-actions{display:flex;justify-content:space-between;gap:10px;margin-top:20px}.diagnostics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.diagnostic{border:1px solid var(--line);padding:12px;border-radius:12px;display:flex;align-items:center;gap:10px}.diagnostic .button{margin-left:auto}.diagnostic-state{font-size:11px;color:var(--muted)}
.list-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.entity-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}.entity-card h3{margin:0 0 5px}.entity-meta{display:flex;gap:12px;color:var(--muted);font-size:12px;margin:12px 0}.entity-actions{display:flex;gap:8px;flex-wrap:wrap}
.transcript{display:grid;gap:10px}.bubble{max-width:88%;padding:10px 12px;border-radius:13px;background:var(--bg);font-size:13px;line-height:1.45}.bubble.assistant{margin-left:auto;background:color-mix(in srgb,var(--accent) 12%,var(--panel))}.bubble small{display:block;color:var(--muted);margin-top:5px;font-size:10px}
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(4px)}.modal-panel{position:relative;background:var(--panel);border-radius:18px;width:min(720px,100%);max-height:90vh;overflow:auto;box-shadow:0 25px 80px rgba(0,0,0,.25)}.modal-header{position:sticky;top:0;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line);z-index:2}.modal-header h2{margin:0;font-size:18px}.modal-body{padding:20px}
.toast-container{position:fixed;right:20px;bottom:20px;z-index:100;display:grid;gap:10px}.toast{background:#17202a;color:white;padding:12px 15px;border-radius:12px;box-shadow:var(--shadow);max-width:360px;font-size:13px}.toast.error{background:#a92d33}.toast.success{background:#167a4b}
.auth-gate{position:fixed;inset:0;background:var(--bg);z-index:200;display:grid;place-items:center;padding:20px}.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:28px;width:min(420px,100%);box-shadow:var(--shadow);text-align:center}.auth-card .brand-mark{margin:0 auto}.auth-card h1{margin:16px 0 8px}.auth-card p{color:var(--muted);font-size:13px;line-height:1.5}.auth-card input{width:100%;padding:12px;border-radius:11px;border:1px solid var(--line);margin:8px 0 12px;background:var(--panel);color:var(--text)}
.bottom-nav{display:none}
@media(max-width:1050px){.grid.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.list-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.wizard-layout{grid-template-columns:220px 1fr}}
@media(max-width:760px){.app-shell{display:block}.sidebar{transform:translateX(-105%);transition:.25s;width:min(82vw,290px);box-shadow:10px 0 35px rgba(0,0,0,.2)}.sidebar.open{transform:translateX(0)}.main{padding-bottom:72px}.topbar{height:72px;padding:12px 15px}.topbar h1{font-size:18px}.topbar p{display:none}.menu-button{display:grid;place-items:center}.content{padding:16px 12px 30px}.grid.stats,.grid.two,.grid.three,.list-cards,.form-grid,.diagnostics{grid-template-columns:1fr}.wizard-layout{display:block}.wizard-steps{display:flex;overflow:auto;gap:5px;margin-bottom:12px;padding:5px}.wizard-step{width:auto;white-space:nowrap;padding:8px}.wizard-step span{display:none}.wizard-step b{flex:none}.card{padding:16px;border-radius:14px}.toolbar .spacer{display:none}.button.mobile-full{width:100%}.bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);bottom:0;left:0;right:0;z-index:40;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(15px);border-top:1px solid var(--line);padding:5px 4px max(5px,env(safe-area-inset-bottom))}.bottom-nav button{border:0;background:transparent;color:var(--muted);display:grid;place-items:center;gap:2px;padding:5px;font-size:18px}.bottom-nav button small{font-size:9px}.bottom-nav button.active{color:var(--accent)}.toast-container{left:12px;right:12px;bottom:82px}.toast{max-width:none}.modal{padding:0;align-items:end}.modal-panel{border-radius:20px 20px 0 0;width:100%;max-height:92vh}.top-actions .icon-button{display:none}}