:root{--bg:#f5f7fb;--surface:#fff;--surface2:#f8fafc;--border:#e5eaf1;--text:#121b2d;--muted:#6f7b91;--nav:#0b1324;--nav2:#131e33;--accent:#246bfd;--accent2:#eaf0ff;--good:#0d9f6e;--warn:#e8a317;--danger:#d64545;--shadow:0 14px 38px rgba(16,34,68,.08);font-family:"Segoe UI",Tahoma,Arial,sans-serif}
[data-theme="dark"]{--bg:#0c1424;--surface:#111c2f;--surface2:#162238;--border:#263550;--text:#eef4ff;--muted:#9fb0ca;--accent2:#162a54;--shadow:0 14px 38px rgba(0,0,0,.24)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}.hidden{display:none!important}button{cursor:pointer}.muted{color:var(--muted);font-size:13px}.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;background:var(--bg)}.auth-hero{background:linear-gradient(145deg,#07101f,#0f1e38 64%,#17305f);color:white;position:relative;overflow:hidden}.auth-hero:before,.auth-hero:after{content:"";position:absolute;border-radius:50%;filter:blur(4px);opacity:.24}.auth-hero:before{width:480px;height:480px;background:#246bfd;left:-180px;top:-130px}.auth-hero:after{width:360px;height:360px;background:#10b981;right:-180px;bottom:-160px}.auth-hero-inner{position:relative;z-index:1;max-width:650px;margin:auto;padding:10vh 8vw}.hero-logo,.brand-mark{display:grid;place-items:center;background:linear-gradient(135deg,#246bfd,#6f8cff);color:white;font-weight:800}.hero-logo{width:64px;height:64px;border-radius:18px;font-size:19px;margin-bottom:38px;box-shadow:0 18px 45px rgba(36,107,253,.3)}.eyebrow{font-size:12px;letter-spacing:1.8px;color:#a9c3ff;font-weight:700}.auth-hero h1{font-size:48px;line-height:1.32;margin:14px 0 18px;letter-spacing:-1.5px}.auth-hero p{font-size:17px;line-height:1.9;color:#c3cee0;max-width:590px}.hero-chips{display:flex;flex-wrap:wrap;gap:9px;margin:32px 0}.hero-chips span{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.06);padding:9px 13px;border-radius:999px;font-size:12px}.hero-points{display:grid;gap:11px;color:#d9e4f6;font-size:14px}.auth-panel{display:grid;place-items:center;padding:40px}.auth-box{width:min(470px,100%)}.mobile-brand{display:none;align-items:center;gap:10px;margin-bottom:28px}.brand-mark{width:42px;height:42px;border-radius:12px;font-size:13px}.auth-title{font-weight:800;font-size:30px}.auth-subtitle{color:var(--muted);margin-top:7px;line-height:1.7}.tabs{display:flex;gap:7px;margin:28px 0 22px;padding:5px;background:var(--surface2);border:1px solid var(--border);border-radius:13px}.tab{flex:1;border:0;background:transparent;color:var(--muted);padding:11px;border-radius:9px;font-weight:700}.tab.active{background:var(--surface);color:var(--text);box-shadow:0 4px 15px rgba(0,0,0,.06)}.stack{display:grid;gap:15px}.stack label{font-size:13px;font-weight:650;color:var(--text);display:grid;gap:7px}input,select,textarea{width:100%;border:1px solid var(--border);border-radius:11px;padding:12px 13px;background:var(--surface);color:var(--text);outline:none;transition:.18s}input:focus,select:focus,textarea:focus{border-color:#8aacf8;box-shadow:0 0 0 3px rgba(36,107,253,.08)}.primary{border:0;background:linear-gradient(135deg,#246bfd,#1857d9);color:#fff;border-radius:11px;padding:12px 16px;font-weight:750;box-shadow:0 7px 18px rgba(36,107,253,.17)}.wide{width:100%;margin-top:2px}.msg{font-size:13px;margin-top:14px;min-height:18px}.msg.error{color:var(--danger)}.msg.ok{color:var(--good)}.auth-foot{font-size:12px;color:var(--muted);margin-top:24px;text-align:center}.app{min-height:100vh;display:grid;grid-template-columns:270px 1fr}.sidebar{background:var(--nav);color:white;padding:20px 16px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand-block{display:flex;align-items:center;gap:11px;padding:3px 7px 20px;border-bottom:1px solid rgba(255,255,255,.08)}.brand-block b{display:block;font-size:16px}.brand-block small{display:block;color:#7183a0;font-size:10px;margin-top:2px}.tenant-card{display:flex;align-items:center;gap:10px;margin:18px 4px 14px;padding:11px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.06)}.tenant-avatar{display:grid;place-items:center;width:37px;height:37px;border-radius:11px;background:#1d335c;color:#a8c4ff;font-weight:800}.tenant-card b,.tenant-card small{display:block;max-width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tenant-card b{font-size:13px}.tenant-card small{font-size:10px;color:#8495af;margin-top:3px}.nav-list{display:grid;gap:4px}.nav{display:flex;align-items:center;gap:10px;border:0;background:transparent;color:#aebbd0;padding:11px 12px;border-radius:10px;text-align:right}.nav:hover{background:rgba(255,255,255,.05);color:#fff}.nav.active{background:#1a2943;color:#fff;box-shadow:inset -3px 0 #4b82ff}.nav-ico{width:21px;text-align:center;font-size:17px}.nav-dot{width:7px;height:7px;background:#3ddc97;border-radius:50%;margin-right:auto}.nav-label{color:#5f708c;font-size:10px;font-weight:700;margin:14px 12px 5px}.sidebar-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.08);padding:15px 4px 2px;display:flex;align-items:center;gap:8px}.user-mini{display:flex;gap:9px;align-items:center;min-width:0;flex:1}.mini-avatar{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#223657;color:#d8e5ff;font-weight:800}.user-mini b,.user-mini small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.user-mini b{font-size:12px}.user-mini small{font-size:10px;color:#7183a0}.icon-btn,.top-icon{border:0;background:transparent;color:inherit;border-radius:9px}.icon-btn{color:#8899b5;padding:8px}.main{min-width:0;padding:26px 30px 45px;overflow:auto}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.topbar h1{font-size:25px;margin:0 0 5px}.top-actions{display:flex;gap:8px;align-items:center}.plan-pill{background:var(--accent2);color:#315da9;border:1px solid rgba(36,107,253,.12);padding:7px 11px;border-radius:999px;font-size:11px;font-weight:700}.top-icon{width:38px;height:38px;border:1px solid var(--border);background:var(--surface);color:var(--text)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:var(--shadow)}.metric{padding:17px;display:flex;gap:13px;align-items:center;box-shadow:none}.metric-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent2);font-size:19px}.metric small{display:block;color:var(--muted);font-size:11px}.metric b{display:block;font-size:25px;margin-top:2px}.panel{padding:18px;margin-top:14px;box-shadow:none}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-head h3,.panel h3{margin:0;font-size:15px}.section-sub{color:var(--muted);font-size:12px;margin-top:4px}.row{display:flex;gap:9px;align-items:center}.row>*{flex:1}.btn{border:0;border-radius:10px;padding:10px 13px;font-weight:700}.btn.primary{flex:0 0 auto}.btn.secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn.danger{background:#fff0f0;color:#b42318;border:1px solid #ffd9d9}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;border-bottom:1px solid var(--border);text-align:right;font-size:12px;white-space:nowrap}th{color:var(--muted);font-weight:650;background:var(--surface2)}tbody tr:hover{background:var(--surface2)}.badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);font-size:10px}.badge.good{background:#edfdf6;border-color:#c8f2df;color:#087a55}.badge.warn{background:#fff8e7;border-color:#fbe2a6;color:#94640b}.badge.blue{background:var(--accent2);border-color:#d7e2ff;color:#315da9}.integration-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px}.integration-toolbar input{max-width:330px}.connector-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}.connector{padding:15px;border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:.15s;display:flex;flex-direction:column;min-height:154px}.connector:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.connector-top{display:flex;align-items:center;justify-content:space-between}.connector-logo{width:39px;height:39px;border-radius:11px;display:grid;place-items:center;font-weight:800;background:var(--surface2);border:1px solid var(--border)}.connector h4{margin:12px 0 4px;font-size:14px}.connector p{margin:0;color:var(--muted);font-size:11px;line-height:1.6}.connector .btn{margin-top:auto;width:100%;padding:8px;font-size:11px}.connected-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.channel-card{padding:14px;display:flex;align-items:center;gap:11px}.channel-card .connector-logo{flex:0 0 auto}.channel-info{min-width:0;flex:1}.channel-info b,.channel-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.channel-info b{font-size:12px}.channel-info small{color:var(--muted);font-size:10px;margin-top:3px}.channel-actions{display:flex;gap:5px}.mini-btn{border:1px solid var(--border);background:var(--surface2);color:var(--text);border-radius:8px;padding:6px 8px}.inbox-shell{display:grid;grid-template-columns:250px 330px 1fr;min-height:660px;overflow:hidden}.inbox-filters{border-left:1px solid var(--border);padding:15px;background:var(--surface2)}.inbox-filters h3{margin:0 0 12px;font-size:14px}.filter-item{display:flex;align-items:center;gap:8px;padding:9px;border-radius:9px;color:var(--muted);font-size:12px;cursor:pointer}.filter-item.active,.filter-item:hover{background:var(--surface);color:var(--text)}.filter-dot{width:9px;height:9px;border-radius:50%;background:#7183a0}.conv-pane{border-left:1px solid var(--border);min-width:0}.conv-search{padding:12px;border-bottom:1px solid var(--border)}.conv-list{max-height:595px;overflow:auto}.conv{padding:13px;border-bottom:1px solid var(--border);cursor:pointer}.conv:hover,.conv.active{background:var(--surface2)}.conv-name{display:flex;justify-content:space-between;gap:10px;font-size:12px}.conv-preview{color:var(--muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}.chat{display:flex;flex-direction:column;min-width:0}.chat-head{padding:13px 16px;border-bottom:1px solid var(--border);min-height:58px}.messages{padding:18px;flex:1;overflow:auto;background:linear-gradient(180deg,var(--surface2),var(--surface))}.bubble{max-width:72%;padding:10px 12px;margin:8px 0;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:12px;line-height:1.7}.bubble.outbound{margin-right:auto;background:var(--accent2);border-color:#d7e2ff}.bubble .muted{font-size:9px;margin-top:5px}.compose{padding:12px;border-top:1px solid var(--border);display:flex;gap:8px;background:var(--surface)}.compose input{flex:1}.compose button{width:auto}.empty{display:grid;place-items:center;text-align:center;color:var(--muted);padding:35px;min-height:150px}.modal-overlay{position:fixed;inset:0;background:rgba(4,10,20,.55);display:grid;place-items:center;padding:20px;z-index:40}.modal{width:min(470px,100%);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,.3);padding:20px}.modal h3{margin:0 0 5px}.modal-actions{display:flex;gap:8px;margin-top:17px}.toast{position:fixed;left:24px;bottom:24px;background:#111c2f;color:white;padding:11px 15px;border-radius:10px;box-shadow:var(--shadow);z-index:60;font-size:12px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.notice{padding:13px 15px;border-radius:12px;background:var(--accent2);border:1px solid #d7e2ff;color:#315da9;font-size:12px;line-height:1.7}.danger-note{background:#fff5f5;border-color:#ffe0e0;color:#a33636}@media(max-width:1180px){.connector-grid{grid-template-columns:repeat(3,1fr)}.grid{grid-template-columns:repeat(2,1fr)}.inbox-shell{grid-template-columns:220px 300px 1fr}}@media(max-width:950px){.app{grid-template-columns:78px 1fr}.sidebar{padding:16px 10px}.brand-block div,.tenant-card div,.nav span:not(.nav-ico):not(.nav-dot),.nav-label,.user-mini div{display:none}.brand-block{justify-content:center}.tenant-card{justify-content:center;padding:8px}.sidebar-bottom{justify-content:center}.user-mini{flex:0}.main{padding:20px}.connector-grid{grid-template-columns:repeat(2,1fr)}.connected-list{grid-template-columns:1fr 1fr}.inbox-shell{grid-template-columns:270px 1fr}.inbox-filters{display:none}.settings-grid{grid-template-columns:1fr}}@media(max-width:680px){.auth-shell{display:block}.auth-hero{display:none}.auth-panel{min-height:100vh;padding:24px}.mobile-brand{display:flex}.app{display:block}.sidebar{position:static;width:100%;height:auto;display:block;padding:10px}.brand-block,.tenant-card,.sidebar-bottom{display:none}.nav-list{display:flex;overflow:auto;gap:5px}.nav{flex:0 0 auto;padding:9px}.nav span:not(.nav-ico){display:none}.main{padding:15px}.topbar h1{font-size:20px}.connector-grid,.connected-list,.grid{grid-template-columns:1fr}.inbox-shell{grid-template-columns:1fr;min-height:600px}.conv-pane{border:0}.chat{display:none}.inbox-shell.chat-open .conv-pane{display:none}.inbox-shell.chat-open .chat{display:flex}.row{flex-direction:column;align-items:stretch}.integration-toolbar{align-items:stretch;flex-direction:column}.integration-toolbar input{max-width:none}}
.status-good{color:#087a55}.status-bad{color:#a33636}.modal-wide{width:min(760px,100%)}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.config-grid label{font-size:11px;color:var(--muted)}.config-grid input{margin-top:5px}.config-grid .full{grid-column:1/-1}.webhook-box{margin-top:15px;padding:12px;border:1px dashed var(--border);border-radius:12px;background:var(--surface2);display:grid;gap:5px;direction:ltr;text-align:left}.webhook-box b{direction:rtl;text-align:right}.webhook-box small{font-size:10px;overflow-wrap:anywhere}.access-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:9px}.access-card{display:flex;gap:8px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:9px;background:var(--surface2);cursor:pointer}.access-card input{width:auto}.access-card .connector-logo{width:32px;height:32px;font-size:9px;flex:none}.access-card b,.access-card small{display:block}.access-card b{font-size:11px}.access-card small{font-size:9px;color:var(--muted)}.form-title{font-size:12px}.access-permissions{margin-top:14px}.permission-row{display:grid;grid-template-columns:minmax(190px,1fr) auto auto auto;gap:14px;align-items:center;padding:10px;border-bottom:1px solid var(--border)}.permission-channel{display:flex;align-items:center;gap:9px}.permission-channel .connector-logo{width:34px;height:34px;font-size:9px}.permission-channel b,.permission-channel small{display:block}.permission-channel small{color:var(--muted);font-size:9px}.permission-row label{display:flex;gap:5px;align-items:center;font-size:11px}.permission-row input{width:auto}@media(max-width:780px){.config-grid{grid-template-columns:1fr}.access-grid{grid-template-columns:1fr}.permission-row{grid-template-columns:1fr 1fr 1fr}.permission-channel{grid-column:1/-1}}
.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0}.method-card{display:flex;flex-direction:column;gap:7px;border:1px solid var(--line);border-radius:16px;padding:16px;cursor:pointer;background:var(--surface)}.method-card.selected{border-color:#2563eb;box-shadow:0 0 0 2px rgba(37,99,235,.12)}.method-card input{width:auto;margin:0}.method-card small{color:var(--muted)}.device-body{min-height:330px;display:flex;align-items:center;justify-content:center;margin:18px 0;border:1px dashed var(--line);border-radius:18px;background:var(--surface)}.qr-wrap,.device-connected,.qr-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px}.qr-wrap img{width:min(330px,80vw);height:auto;background:white;padding:10px;border-radius:16px}.device-check{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:42px;background:#dcfce7;color:#15803d}.device-connected small,.qr-wrap small{color:var(--muted)}
@media(max-width:700px){.method-grid{grid-template-columns:1fr}.device-body{min-height:280px}}