@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/inter-400.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/inter-500.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/inter-600.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/inter-700.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../assets/fonts/inter-800.ttf") format("truetype"); }

:root {
  --bg: #0b111b; --sidebar: #111319; --panel: #151d27; --panel-2: #18232f; --canvas: #0c1521;
  --line: #24313e; --line-soft: rgba(255,255,255,.055); --text: #e8edf3; --muted: #84909e;
  --blue: #37a9e8; --green: #32d583; --red: #f04461;
  font-family: "Inter", sans-serif; color: var(--text); background: var(--bg); font-synthesis: none;
}
* { box-sizing: border-box; }
html, body, #app { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100vh; overflow: hidden; background: var(--bg); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; } button { color: inherit; } button, a { -webkit-tap-highlight-color: transparent; } svg { display: block; }
.app-shell { height: 100vh; display: grid; grid-template-columns: 205px 310px minmax(420px,1fr) 330px; overflow: hidden; background: var(--canvas); }
.sidebar, .inbox-panel, .chat-workspace, .details-panel { min-width: 0; min-height: 0; }
.sidebar { padding: 17px 12px 12px; display: flex; flex-direction: column; overflow-y: auto; background: var(--sidebar); border-right: 1px solid #262a32; }
.brand-row { height: 34px; padding: 0 5px 0 7px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; color: #f4f6f9; font-size: 13px; font-weight: 750; text-decoration: none; }
.brand-mark, .telegram-dot { display: grid; place-items: center; color: white; background: linear-gradient(145deg,#42b9ee,#208ed0); border-radius: 50%; }
.brand-mark { width: 22px; height: 22px; } .brand-mark svg, .telegram-dot svg { transform: translate(-1px,1px) rotate(-7deg); }
.icon-button { width: 32px; height: 32px; padding: 0; display: grid; flex: 0 0 auto; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; transition: .16s ease; }
.icon-button:hover { color: var(--text); background: rgba(255,255,255,.06); } .collapse-button { width: 26px; height: 26px; }
.chat-list-refresh { margin-left: auto; }
.chat-list-refresh.refreshing svg { animation: chat-list-spin .65s linear infinite; }
@keyframes chat-list-spin { to { transform: rotate(360deg); } }
.channel-switch { margin: 17px 5px 16px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; background: #1a1b21; border: 1px solid #282b32; border-radius: 6px; }
.channel-switch button { height: 26px; padding: 0 5px; display: flex; align-items: center; justify-content: center; gap: 5px; color: #717781; background: transparent; border: 0; border-radius: 4px; font-size: 8px; cursor: pointer; }
.channel-switch button.active { color: #dce9f2; background: #252832; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .channel-switch button.active svg { color: var(--blue); }
.calls-button { height: 34px; margin: 0 5px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; color: #9aa1aa; background: #1a1a20; border: 1px solid #292b31; border-radius: 7px; font-size: 10px; cursor: pointer; }
.nav section + section { margin-top: 13px; padding-top: 10px; border-top: 1px solid #22252c; }
.nav p, .sidebar-bottom > p { margin: 0 10px 6px; color: #5e626b; font-size: 7px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase; }
.nav-item { position: relative; width: 100%; height: 31px; padding: 0 9px; display: flex; align-items: center; gap: 10px; color: #858991; background: transparent; border: 0; border-radius: 5px; font-size: 9.5px; text-align: left; cursor: pointer; transition: .15s ease; }
.nav-item:hover { color: #d8dde4; background: #181a20; } .nav-item.active { color: #eef4f8; background: #1b1d24; }
.nav-item.active::before { content: ""; position: absolute; left: -7px; width: 2px; height: 17px; background: var(--blue); border-radius: 0 3px 3px 0; box-shadow: 0 0 8px rgba(55,169,232,.6); }
.nav-item.active svg { color: var(--blue); }
.nav-item b { min-width: 18px; height: 17px; margin-left: auto; padding: 0 5px; display: grid; place-items: center; color: #b9dff4; background: #21425a; border-radius: 10px; font-size: 7px; }
.nav-item .alert-count { color: white; background: var(--red); }
.sidebar-bottom { margin-top: auto; padding-top: 12px; border-top: 1px solid #22252c; }
.profile { width: 100%; margin-top: 8px; padding: 9px 7px 0; display: grid; grid-template-columns: 29px 1fr 14px; align-items: center; gap: 8px; background: transparent; border: 0; border-top: 1px solid #22252c; text-align: left; cursor: pointer; }
.profile-avatar, .avatar { position: relative; display: grid; place-items: center; color: white; background: var(--avatar,#415367); border-radius: 50%; font-weight: 700; }
.avatar { overflow: visible; }
.avatar > img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar > span { position: relative; z-index: 0; }
.profile-avatar { width: 29px; height: 29px; background: linear-gradient(145deg,#526a84,#28394b); font-size: 8px; }
.profile-avatar i, .avatar i { position: absolute; right: 0; bottom: 0; z-index: 2; width: 8px; height: 8px; background: var(--green); border: 2px solid var(--panel); border-radius: 50%; }
.profile strong, .profile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .profile strong { color: #d9dde3; font-size: 8px; } .profile small { margin-top: 3px; color: #626a74; font-size: 7px; } .profile > svg { color: #555d67; }

.inbox-panel { display: flex; flex-direction: column; background: var(--panel); border-right: 1px solid var(--line); }
.inbox-header { height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.telegram-dot { width: 19px; height: 19px; } .inbox-header h1 { margin: 0; font-size: 12px; letter-spacing: -.2px; }
.chat-connection-summary { padding: 3px 6px; color: #65c998; background: rgba(50,213,131,.1); border: 1px solid rgba(50,213,131,.18); border-radius: 9px; font-size: 6px; font-weight: 750; white-space: nowrap; }
.chat-connection-summary.has-offline { color: #ff9b9b; background: rgba(240,68,97,.11); border-color: rgba(240,68,97,.24); }
.chat-account-status { padding: 7px 10px; display: grid; gap: 5px; background: #111a23; border-bottom: 1px solid var(--line); }
.chat-account-status:not(.has-offline) { padding-block: 5px; grid-template-columns: repeat(auto-fit,minmax(95px,1fr)); }
.chat-account-state { min-width: 0; padding: 5px 7px; display: grid; grid-template-columns: 7px minmax(0,1fr); align-items: center; gap: 6px; background: #182630; border: 1px solid #253744; border-radius: 7px; }
.chat-account-state > i { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px rgba(50,213,131,.09); }
.chat-account-state.disconnected { background: rgba(240,68,97,.07); border-color: rgba(240,68,97,.24); }
.chat-account-state.disconnected > i { background: var(--red); box-shadow: 0 0 0 3px rgba(240,68,97,.1); }
.chat-account-state.degraded { background: rgba(245,158,11,.07); border-color: rgba(245,158,11,.24); }
.chat-account-state.degraded > i { background: #f5a623; box-shadow: 0 0 0 3px rgba(245,158,11,.1); }
.chat-account-state strong,.chat-account-state small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-account-state strong { color: #dce7ee; font-size: 7px; }
.chat-account-state small { margin-top: 2px; color: #71818e; font-size: 5.8px; }
.chat-account-state.disconnected small { color: #dc8794; }
.chat-account-state.degraded small { color: #d6a95f; }
.inbox-count { min-width: 20px; height: 17px; padding: 0 6px; display: grid; place-items: center; color: #78bfe7; background: #1e3c50; border-radius: 10px; font-size: 7px; font-weight: 700; }
.inbox-header > .icon-button:last-child { margin-left: 0; } .mobile-menu { display: none; }
.search-wrap { height: 32px; margin: 11px 12px 8px; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: #6e7a88; background: #202b37; border: 1px solid #253442; border-radius: 7px; }
.search-wrap:focus-within { border-color: #31789f; box-shadow: 0 0 0 2px rgba(55,169,232,.08); }
.search-wrap input { width: 100%; min-width: 0; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 9px; } .search-wrap input::placeholder { color: #697582; } .search-wrap kbd { color: #596674; font-size: 7px; font-family: inherit; }
.filter-tabs { height: 31px; padding: 0 12px; display: flex; align-items: end; gap: 16px; border-bottom: 1px solid var(--line); }
.filter-tabs button { position: relative; height: 31px; padding: 0; color: #75818e; background: transparent; border: 0; font-size: 8px; font-weight: 650; cursor: pointer; }
.filter-tabs button.active { color: #dfe8ef; } .filter-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); border-radius: 2px 2px 0 0; }
.filter-tabs b { margin-left: 3px; padding: 2px 5px; color: #65b6e1; background: #203e51; border-radius: 7px; font-size: 6px; }
.conversation-list { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3a48 transparent; }
.conversation { position: relative; width: 100%; min-height: 66px; padding: 9px 11px; display: grid; grid-template-columns: 37px 1fr; gap: 9px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid var(--line-soft); text-align: left; cursor: pointer; transition: .12s ease; }
.conversation:hover { background: #192531; } .conversation.active { background: linear-gradient(90deg,#275875,#234863); } .conversation.active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: #5bc0f1; }
.avatar { width: 37px; height: 37px; font-size: 9px; } .conversation-copy { min-width: 0; display: block; }
.conversation-title { display: flex; align-items: center; justify-content: space-between; gap: 7px; } .conversation-title strong { overflow: hidden; color: #e4e9ee; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .conversation-title time { flex: 0 0 auto; color: #687685; font-size: 6.5px; }
.conversation.active .conversation-title time { color: #a7c4d5; } .conversation-preview { max-width: 190px; margin-top: 5px; display: block; overflow: hidden; color: #84919e; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; } .conversation.active .conversation-preview { color: #bed0dc; }
.conversation-tag { margin-top: 6px; padding: 2px 5px; display: inline-block; color: #72b7df; background: rgba(42,139,191,.16); border-radius: 3px; font-size: 6px; } .conversation.active .conversation-tag { color: #d2eaf6; background: rgba(0,0,0,.15); }
.unread { position: absolute; right: 10px; bottom: 11px; min-width: 15px; height: 15px; padding: 0 4px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 9px; font-size: 6px; }
.empty-results { display: none; padding: 30px 12px; color: var(--muted); font-size: 9px; text-align: center; } .empty-results.visible { display: block; }

.chat-workspace { display: grid; grid-template-rows: 48px minmax(0,1fr) 47px; background: var(--canvas); }
.chat-header { padding: 0 12px; display: flex; align-items: center; justify-content: space-between; background: #111c27; border-bottom: 1px solid var(--line); }
.selected-person { min-width: 0; display: flex; align-items: center; gap: 9px; } .selected-avatar { width: 31px; height: 31px; font-size: 8px; }
.selected-person strong, .selected-person small { display: block; } .selected-person strong { overflow: hidden; color: #e8edf2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } .selected-person small { margin-top: 3px; color: #6f7d8b; font-size: 6.5px; } .selected-person small i { width: 5px; height: 5px; margin-right: 4px; display: inline-block; background: var(--green); border-radius: 50%; }
.inbox-back { display: none; } .header-actions { display: flex; align-items: center; gap: 1px; }
.blank-conversation, .message-thread { position: relative; overflow: hidden; background-color: #0b1420; background-image: radial-gradient(circle at 50% 50%,rgba(40,77,106,.12),transparent 42%),linear-gradient(rgba(255,255,255,.012) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.012) 1px,transparent 1px); background-size: auto,32px 32px,32px 32px; }
.blank-conversation { display: grid; place-items: center; }
.blank-conversation::before, .message-thread::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(9,17,27,.2),transparent 35%,rgba(9,17,27,.28)); }
.message-thread { padding: 18px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2b3a48 transparent; }
.message-thread > .empty-chat-state { margin: auto; top: 50%; transform: translateY(-50%); }
.message-stack { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.message-bubble { width: fit-content; max-width: min(72%,560px); padding: 9px 11px 7px; color: #dfe7ed; background: #1a2936; border: 1px solid #263b4b; border-radius: 11px 11px 11px 3px; box-shadow: 0 5px 16px rgba(0,0,0,.14); }
.message-bubble.outgoing { margin-left: auto; color: #eef8fd; background: #1f668c; border-color: #287ca6; border-radius: 11px 11px 3px 11px; }
.message-bubble p { margin: 0; font-size: 9px; line-height: 1.5; overflow-wrap: anywhere; }
.message-bubble footer { margin-top: 4px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.message-bubble time { display: block; color: #7f98a8; font-size: 6px; text-align: right; }
.message-bubble.outgoing time { color: #b3d7e9; }
.message-bubble.deleted { opacity: .72; border-style: dashed; }
.message-bubble.deleted p { color: #8795a1; text-decoration: line-through; }
.deleted-marker { display: inline-flex; align-items: center; gap: 3px; color: #a6b0b8; font-size: 6px; }
.message-loading, .message-error { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; color: #748493; font-size: 9px; }
.message-loading svg { animation: spin .9s linear infinite; }
.message-error { color: #ff8297; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-chat-state { position: relative; z-index: 1; width: min(340px,calc(100% - 40px)); padding: 25px; color: #778493; background: rgba(17,28,40,.75); border: 1px solid rgba(67,91,113,.35); border-radius: 15px; box-shadow: 0 18px 60px rgba(0,0,0,.18); text-align: center; backdrop-filter: blur(8px); }
.empty-chat-icon { width: 52px; height: 52px; margin: 0 auto 15px; display: grid; place-items: center; color: #70bce5; background: #172e40; border: 1px solid #24465e; border-radius: 15px; }
.empty-chat-state h2 { margin: 0; color: #dbe4eb; font-size: 14px; } .empty-chat-state p { margin: 9px auto 15px; max-width: 270px; color: #768493; font-size: 8px; line-height: 1.7; } .secure-label { display: inline-flex; align-items: center; gap: 5px; color: #5f8aa4; font-size: 6.5px; text-transform: uppercase; letter-spacing: .6px; }
.composer-shell { padding: 7px 10px; display: flex; align-items: center; gap: 5px; background: #111c27; border-top: 1px solid var(--line); } .composer-placeholder, .composer-input { height: 31px; padding: 7px 11px; display: flex; flex: 1; align-items: center; color: #dfe8ef; background: #1b2835; border: 1px solid #223444; border-radius: 8px; outline: 0; resize: none; font: inherit; font-size: 8px; line-height: 1.6; }
.composer-input:focus { border-color: #31789f; box-shadow: 0 0 0 2px rgba(55,169,232,.08); }
.composer-input:disabled { color: #566473; cursor: not-allowed; }
.send-button { width: 31px; height: 31px; padding: 0; display: grid; place-items: center; color: white; background: #258fc8; border: 0; border-radius: 8px; cursor: pointer; } .send-button:hover { background: #2ca6e5; }
.send-button:disabled { cursor: wait; opacity: .5; }

.details-panel { overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: #2b3a48 transparent; }
.details-header { height: 60px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); } .eyebrow { display: block; margin-bottom: 3px; color: #596776; font-size: 6px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; } .details-header h2 { margin: 0; font-size: 13px; } .details-close { display: none; }
.details-tabs { height: 36px; padding: 0 15px; display: flex; gap: 22px; border-bottom: 1px solid var(--line); } .details-tabs button { position: relative; padding: 0; color: #707c88; background: transparent; border: 0; font-size: 8px; font-weight: 650; cursor: pointer; } .details-tabs button.active { color: #dbe7ee; } .details-tabs button.active::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--blue); }
.detail-content { display: none; } .detail-content.active { display: block; }
.contact-card { margin: 14px; padding: 13px; display: grid; grid-template-columns: 40px 1fr 28px; align-items: center; gap: 10px; background: var(--panel-2); border: 1px solid #263645; border-radius: 10px; } .contact-avatar { width: 40px; height: 40px; font-size: 9px; } .contact-card h3 { margin: 0; color: #e3e9ee; font-size: 9px; } .contact-card p { margin: 4px 0 0; color: #6c7986; font-size: 6.5px; }
.section-title { min-height: 30px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; color: #788491; font-size: 7px; font-weight: 750; letter-spacing: .7px; text-transform: uppercase; } .section-title small { color: #566371; font-size: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; } .section-title button { padding: 0; display: flex; align-items: center; gap: 3px; color: #62add6; background: transparent; border: 0; font-size: 6px; cursor: pointer; }
.insight-row { margin: 0 14px; padding: 13px 0; display: grid; grid-template-columns: 75px 1fr; gap: 10px; border-top: 1px solid var(--line); } .insight-label { color: #697684; font-size: 7px; font-weight: 700; text-transform: uppercase; } .insight-value { color: #dbe1e6; font-size: 8px; line-height: 1.45; } .insight-value small { margin-top: 4px; display: block; color: #667380; font-size: 6.5px; line-height: 1.5; }
.tags-section { padding-bottom: 20px; border-top: 1px solid var(--line); } .tags { padding: 3px 14px; display: flex; flex-wrap: wrap; gap: 6px; } .tags span { padding: 5px 7px; color: #8ec8e7; background: #1d3a4d; border: 1px solid #274d65; border-radius: 5px; font-size: 6.5px; }
.ai-card, .suggestion-card { margin: 14px; padding: 15px; background: var(--panel-2); border: 1px solid #273747; border-radius: 10px; } .ai-card { display: flex; gap: 10px; } .ai-icon { width: 32px; height: 32px; display: grid; flex: 0 0 auto; place-items: center; color: #b691ff; background: #30274a; border-radius: 8px; }
.ai-card h3, .suggestion-card strong { margin: 0; color: #e1e6eb; font-size: 9px; } .ai-card p, .suggestion-card p { margin: 6px 0 0; color: #71808e; font-size: 7px; line-height: 1.65; } .suggestion-card span { margin-bottom: 7px; display: block; color: #61707e; font-size: 6px; font-weight: 700; text-transform: uppercase; }
.history-empty { padding: 70px 30px; color: #516170; text-align: center; } .history-empty svg { margin: auto; } .history-empty h3 { margin: 12px 0 5px; color: #a9b4bd; font-size: 9px; } .history-empty p { margin: 0; font-size: 7px; }

/* Accounts workspace */
.accounts-workspace { display: none; min-width: 0; min-height: 0; grid-column: 2 / -1; padding: 18px 20px 14px; overflow-y: auto; background: #090d12; color: #e8edf2; }
.app-shell.accounts-view { grid-template-columns: 205px minmax(0,1fr); }
.app-shell.accounts-view .inbox-panel, .app-shell.accounts-view .chat-workspace, .app-shell.accounts-view .details-panel { display: none; }
.app-shell.accounts-view .accounts-workspace { display: grid; grid-template-rows: auto auto minmax(430px,1fr) auto; gap: 10px; }

/* Phone resolver workspace */
.resolver-workspace { display: none; grid-column: 2 / -1; min-width: 0; min-height: 0; overflow-y: auto; color: #e8edf2; background: #080b10; }
.resolver-view { grid-template-columns: 205px minmax(0,1fr); }
.resolver-view .resolver-workspace { display: block; }
.resolver-view .inbox-panel,.resolver-view .chat-workspace,.resolver-view .details-panel,.resolver-view .accounts-workspace,.resolver-view .overview-workspace,.resolver-view .sender-workspace { display: none; }
.resolver-inner { width: min(1180px,calc(100% - 48px)); margin: 0 auto; padding: 30px 0 50px; }
.resolver-header { min-height: 72px; display: flex; align-items: center; gap: 13px; }
.resolver-header h1 { margin: 3px 0 0; font-size: 22px; }
.resolver-header p { margin: 7px 0 0; color: #7f8b97; font-size: 10px; }
.resolver-safety { margin-left: auto; padding: 8px 12px; display: inline-flex; align-items: center; gap: 6px; color: #76d7ac; background: rgba(50,213,131,.08); border: 1px solid rgba(50,213,131,.2); border-radius: 18px; font-size: 9px; }
.resolver-grid { margin-top: 24px; display: grid; grid-template-columns: minmax(320px,420px) minmax(0,1fr); gap: 16px; align-items: start; }
.resolver-card { min-width: 0; background: #13171c; border: 1px solid #282e35; border-radius: 13px; box-shadow: 0 14px 38px rgba(0,0,0,.2); }
.resolver-card > header { min-height: 67px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #252b31; }
.resolver-card h2,.resolver-card p { margin: 0; }
.resolver-card h2 { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.resolver-card header p { margin-top: 5px; color: #747f8a; font-size: 8px; }
.resolver-input-card > header > span { color: #80a7bd; font-size: 8px; }
.resolver-input-card > label { margin: 14px 16px 0; display: block; color: #8d98a4; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px; }
.resolver-input-card select,.resolver-input-card textarea { width: 100%; margin-top: 7px; color: #e5ebef; background: #0e1217; border: 1px solid #2a333b; border-radius: 8px; outline: 0; }
.resolver-input-card select { height: 38px; padding: 0 10px; font-size: 10px; }
.resolver-input-card textarea { min-height: 250px; padding: 11px; resize: vertical; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 10px; line-height: 1.65; }
.resolver-input-card select:focus,.resolver-input-card textarea:focus { border-color: #3b9fd2; box-shadow: 0 0 0 2px rgba(55,169,232,.12); }
.resolver-input-card :disabled { opacity: .5; cursor: not-allowed; }
.resolver-note { margin: 12px 16px 0 !important; color: #697681; font-size: 8px; line-height: 1.55; }
.resolver-actions { padding: 15px 16px 16px; display: flex; gap: 7px; }
.resolver-actions button,.resolver-results-card header button { height: 34px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #abb5bd; background: #1b2229; border: 1px solid #303a43; border-radius: 7px; cursor: pointer; font-size: 9px; }
.resolver-actions .resolver-primary { flex: 1; color: white; background: #289bd4; border-color: #35abe5; }
.resolver-actions button:disabled,.resolver-results-card header button:disabled { opacity: .4; cursor: default; }
.resolver-metrics { display: grid; grid-template-columns: repeat(4,1fr); border-bottom: 1px solid #252b31; }
.resolver-metrics span { padding: 13px 14px; color: #68747f; border-right: 1px solid #252b31; font-size: 7px; text-transform: uppercase; }
.resolver-metrics span:last-child { border-right: 0; }
.resolver-metrics strong { margin-bottom: 4px; display: block; color: #e5ebef; font-size: 17px; }
.resolver-progress { height: 3px; overflow: hidden; background: #20262c; }
.resolver-progress i { width: 0; height: 100%; display: block; background: #36b5ef; transition: width .2s ease; }
.resolver-results { max-height: 565px; min-height: 430px; overflow-y: auto; }
.resolver-empty { min-height: 430px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #596672; text-align: center; }
.resolver-empty strong { margin-top: 12px; color: #abb5bd; font-size: 11px; }
.resolver-empty span { margin-top: 5px; font-size: 8px; }
.resolver-result { min-height: 66px; padding: 10px 14px; display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #22292f; }
.resolver-result-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #58d295; background: rgba(50,213,131,.1); border-radius: 50%; }
.resolver-result.missing .resolver-result-icon { color: #9aa5ae; background: #232a31; }
.resolver-result.failed .resolver-result-icon { color: #ff8497; background: rgba(240,68,97,.12); }
.resolver-result strong,.resolver-result span { display: block; }
.resolver-result strong { font-size: 10px; }
.resolver-result span { margin-top: 4px; color: #89959f; font-size: 8px; }
.resolver-result small { color: #66737d; font-size: 7px; text-align: right; }

/* AI agents and provider vault */
.agents-workspace { display: none; grid-column: 2 / -1; min-width: 0; min-height: 0; overflow-y: auto; color: #e8edf2; background: #080b10; }
.agents-view { grid-template-columns: 205px minmax(0,1fr); }
.agents-view .agents-workspace { display: block; }
.agents-view .inbox-panel,.agents-view .chat-workspace,.agents-view .details-panel,.agents-view .accounts-workspace,.agents-view .resolver-workspace,.agents-view .overview-workspace,.agents-view .sender-workspace { display: none; }
.agents-inner { width: min(1180px,calc(100% - 48px)); margin: 0 auto; padding: 30px 0 50px; }
.agents-header { min-height: 72px; display: flex; align-items: center; gap: 13px; }
.agents-header h1 { margin: 3px 0 0; font-size: 22px; }
.agents-header p { margin: 7px 0 0; color: #7f8b97; font-size: 10px; }
.agents-add { margin-left: auto; height: 37px; padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; color: white; background: #289bd4; border: 1px solid #42afe3; border-radius: 8px; cursor: pointer; font-size: 9px; }
.agents-layout { margin-top: 24px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(320px,.75fr); gap: 16px; align-items: start; }
.agents-panel { min-width: 0; background: #13171c; border: 1px solid #282e35; border-radius: 13px; box-shadow: 0 14px 38px rgba(0,0,0,.2); }
.agents-panel > header { min-height: 67px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #252b31; }
.agents-panel h2,.agents-panel p { margin: 0; }
.agents-panel h2 { font-size: 13px; }
.agents-panel header p { margin-top: 5px; color: #747f8a; font-size: 8px; }
.agents-panel header > span { color: #80a7bd; font-size: 8px; }
.agents-empty { min-height: 390px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #596672; text-align: center; }
.agents-empty strong { margin-top: 12px; color: #abb5bd; font-size: 11px; }
.agents-empty span { margin-top: 5px; font-size: 8px; }
.agent-provider-card { min-height: 88px; padding: 13px 14px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto auto; align-items: center; gap: 11px; border-bottom: 1px solid #22292f; }
.agent-provider-card.disabled { opacity: .58; }
.agent-provider-logo { width: 38px; height: 38px; display: grid; place-items: center; color: #73c9f2; background: #1d3442; border-radius: 10px; }
.agent-provider-copy { min-width: 0; }
.agent-provider-copy strong,.agent-provider-copy span,.agent-provider-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-provider-copy strong { font-size: 11px; }
.agent-provider-copy span { margin-top: 5px; color: #8b98a3; font-size: 8px; text-transform: capitalize; }
.agent-provider-copy small { margin-top: 5px; color: #616e78; font-size: 7px; }
.agent-test-state { min-width: 86px; display: inline-flex; align-items: center; gap: 5px; color: #74818b; font-size: 8px; }
.agent-test-state.ok { color: #5bd49a; }
.agent-test-state.error { color: #ff8295; }
.agent-provider-actions { display: flex; gap: 3px; }
.agent-provider-actions button { width: 29px; height: 29px; padding: 0; display: grid; place-items: center; color: #82909b; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.agent-provider-actions button:hover { color: white; background: #252d34; }
.agent-editor > label { margin: 13px 16px 0; display: block; color: #8d98a4; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px; }
.agent-editor input:not([type="checkbox"]),.agent-editor select { width: 100%; height: 38px; margin-top: 7px; padding: 0 10px; color: #e5ebef; background: #0e1217; border: 1px solid #2a333b; border-radius: 8px; outline: 0; font-size: 10px; }
.agent-editor input:focus,.agent-editor select:focus { border-color: #3b9fd2; box-shadow: 0 0 0 2px rgba(55,169,232,.12); }
.agent-generation-grid { margin: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }.agent-generation-grid label { margin: 13px 0 0; color: #8d98a4; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px; }
.agent-image-settings { margin-top: 4px; }.agent-image-settings > label { margin: 13px 16px 0; display: block; color: #8d98a4; font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .45px; }
.agent-key-note { margin: 9px 16px 0 !important; color: #697681; font-size: 8px; line-height: 1.5; }
.agent-enabled { display: flex !important; align-items: center; gap: 8px; text-transform: none !important; letter-spacing: 0 !important; }
.agent-enabled input { width: 15px; height: 15px; margin: 0; accent-color: #289bd4; }
.agent-editor-actions { padding: 16px; display: flex; justify-content: flex-end; gap: 7px; }
.agent-editor-actions button { height: 35px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; color: #aeb8c0; background: #1b2229; border: 1px solid #303a43; border-radius: 7px; cursor: pointer; font-size: 9px; }
.agent-editor-actions .agent-save { color: white; background: #289bd4; border-color: #35abe5; }
.agent-playground { margin-top: 16px; }
.agent-playground > header label { display: flex; align-items: center; gap: 8px; color: #78858f; font-size: 8px; text-transform: uppercase; }
.agent-playground > header select { min-width: 220px; height: 34px; padding: 0 9px; color: #e2e9ed; background: #0e1217; border: 1px solid #2a333b; border-radius: 7px; outline: 0; font-size: 9px; }
.agent-chat-thread { min-height: 320px; max-height: 520px; padding: 18px; overflow-y: auto; background: #0d1116; }
.agent-chat-empty { min-height: 284px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #596672; text-align: center; }
.agent-chat-empty strong { margin-top: 12px; color: #abb5bd; font-size: 11px; }
.agent-chat-empty span { margin-top: 5px; font-size: 8px; }
.agent-chat-message { max-width: min(78%,760px); margin-bottom: 12px; }
.agent-chat-message.user { margin-left: auto; }
.agent-chat-message > span { margin: 0 5px 5px; display: block; color: #6c7a85; font-size: 7px; font-weight: 700; text-transform: uppercase; }
.agent-chat-message.user > span { text-align: right; }
.agent-chat-message p { margin: 0; padding: 11px 13px; color: #dce5ea; background: #1a232a; border: 1px solid #2c3942; border-radius: 11px 11px 11px 3px; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.agent-chat-message.user p { color: white; background: #216f99; border-color: #318bb9; border-radius: 11px 11px 3px 11px; }
.agent-chat-message.error p { color: #ffc1cb; background: #2a171d; border-color: #65303c; }
.agent-chat-message.error > span { color: #ff8295; }
.agent-chat-composer { padding: 12px; display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 7px; border-top: 1px solid #252b31; }
.agent-chat-composer textarea { width: 100%; min-height: 46px; max-height: 150px; padding: 10px 11px; resize: vertical; color: #e5ebef; background: #0e1217; border: 1px solid #2a333b; border-radius: 8px; outline: 0; font-size: 10px; line-height: 1.5; }
.agent-chat-composer textarea:focus { border-color: #3b9fd2; box-shadow: 0 0 0 2px rgba(55,169,232,.12); }
.agent-chat-composer button { height: 38px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; color: #abb5bd; background: #1b2229; border: 1px solid #303a43; border-radius: 7px; cursor: pointer; font-size: 9px; }
.agent-chat-composer .agent-chat-send { color: white; background: #289bd4; border-color: #35abe5; }
.agent-chat-composer button:disabled,.agent-chat-composer textarea:disabled { opacity: .45; cursor: default; }
.accounts-toolbar { min-height: 50px; padding: 8px 11px; display: flex; align-items: center; gap: 10px; background: #111318; border: 1px solid #171b21; border-radius: 9px; box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.accounts-title { min-width: 205px; display: flex; align-items: center; gap: 6px; } .accounts-title h1 { margin: 0; color: #f3f5f7; font-size: 16px; letter-spacing: -.4px; } .accounts-title p { margin: 3px 0 0; color: #5f6670; font-size: 7px; } .accounts-menu { display: none; }
.account-channel { padding: 3px; display: flex; background: #17191f; border: 1px solid #252a31; border-radius: 7px; } .account-channel button { height: 27px; padding: 0 9px; display: flex; align-items: center; gap: 5px; color: #7b838e; background: transparent; border: 0; border-radius: 5px; font-size: 7px; cursor: pointer; } .account-channel button.active { color: #e4edf3; background: #242a31; box-shadow: inset 0 0 0 1px #3499cf; }
.account-search { min-width: 120px; height: 31px; padding: 0 8px; display: flex; flex: 1; align-items: center; gap: 6px; color: #596471; background: #16191f; border: 1px solid #1d2229; border-radius: 6px; } .account-search input { width: 100%; color: #dce3e8; background: transparent; border: 0; outline: 0; font-size: 7px; } .account-search input::placeholder { color: #555e69; }
.account-actions { display: flex; align-items: center; gap: 3px; } .account-actions button { height: 30px; padding: 0 8px; display: flex; align-items: center; gap: 5px; color: #a0a8b1; background: transparent; border: 0; border-radius: 5px; font-size: 7px; white-space: nowrap; cursor: pointer; } .account-actions button:hover { color: #f0f3f5; background: #1c2027; } .account-actions .quick-add, .account-dialog footer .quick-add { color: white; background: linear-gradient(135deg,#45b9ef,#238fc8); box-shadow: 0 5px 15px rgba(38,155,214,.2); }
.account-metrics { min-height: 48px; padding: 0 7px; display: grid; grid-template-columns: repeat(8,1fr); background: #111318; border: 1px solid #171b21; border-radius: 9px; } .account-metrics div { padding: 9px 8px; border-right: 1px solid #1c2026; } .account-metrics div:last-child { border-right: 0; } .account-metrics strong, .account-metrics span { display: block; } .account-metrics strong { color: #e8ecf0; font-size: 12px; } .account-metrics span { margin-top: 3px; color: #5c646e; font-size: 6px; text-transform: uppercase; letter-spacing: .5px; }
.accounts-canvas { position: relative; min-height: 430px; overflow: hidden; touch-action: none; cursor: grab; user-select: none; background-color: #090d12; background-image: radial-gradient(circle,rgba(82,105,124,.18) 1px,transparent 1px); background-size: 24px 24px; border: 1px solid #11171d; border-radius: 9px; }
.accounts-canvas.panning { cursor: grabbing; }
.canvas-controls { position: absolute; z-index: 5; inset: 10px 10px auto; display: flex; justify-content: space-between; pointer-events: none; } .view-switch, .status-switch { padding: 3px; display: flex; background: rgba(24,27,33,.92); border: 1px solid #252b32; border-radius: 8px; pointer-events: auto; } .view-switch button, .status-switch button { height: 23px; padding: 0 8px; color: #717984; background: transparent; border: 0; border-radius: 5px; font-size: 6px; cursor: pointer; } .view-switch button.active, .status-switch button.active { color: #64b8e3; background: #20303b; }
.cluster-stage { --stage-zoom: 1; --stage-x: 0px; --stage-y: 0px; position: absolute; inset: 48px 55px 34px; display: flex; align-items: center; justify-content: space-around; gap: 30px; transform: translate3d(var(--stage-x),var(--stage-y),0) scale(var(--stage-zoom)); transform-origin: center; will-change: transform; }
.cluster-stage.camera-animate { transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.account-cluster { position: relative; width: 245px; height: 245px; flex: 0 0 auto; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.13); border-radius: 50%; } .account-cluster::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .6; } .account-cluster.pink::before { background: radial-gradient(circle,rgba(178,29,111,.18),rgba(93,18,63,.07) 70%); } .account-cluster.gold::before { background: radial-gradient(circle,rgba(204,161,35,.17),rgba(94,73,14,.06) 70%); } .account-cluster.slate::before { background: radial-gradient(circle,rgba(87,105,124,.15),rgba(43,52,61,.04) 70%); }
.accounts-canvas.panning .account-node { animation-play-state: paused; }
.cluster-heading { position: absolute; top: -34px; left: 50%; width: 180px; transform: translateX(-50%); text-align: center; } .cluster-heading strong, .cluster-heading small { display: block; } .cluster-heading strong { color: #e3e7eb; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; } .cluster-heading small { margin-top: 3px; color: #59616a; font-size: 7px; }
.cluster-orbit { position: absolute; z-index: 1; inset: 12%; }
.account-node { position: absolute; left: calc(50% + var(--node-x)); top: calc(50% + var(--node-y)); width: 72px; padding: 0; color: #dce2e7; background: transparent; border: 0; text-align: center; cursor: pointer; animation: node-float calc(4.6s + var(--float-index) * .55s) ease-in-out infinite alternate; animation-delay: calc(var(--node-delay) - var(--float-index) * .7s); } .account-node > span { position: relative; width: 42px; height: 42px; margin: auto; display: grid; place-items: center; overflow: visible; color: white; background: linear-gradient(145deg,#435262,#1f2934); border: 3px solid #596774; border-radius: 50%; box-shadow: 0 5px 14px rgba(0,0,0,.35); font-size: 9px; font-weight: 700; } .account-node > span img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .account-node > span em { font-style: normal; } .pink .account-node > span { border-color: #db3d99; } .gold .account-node > span { border-color: #e1a622; } .account-node.connected > span { box-shadow: 0 0 0 2px rgba(50,213,131,.85),0 5px 14px rgba(0,0,0,.35); } .account-node.sleeping > span { opacity: .72; } .account-node.paused > span { border-color: #e5a61d; } .account-node.offline > span { border-color: #d43f5f; filter: saturate(.65); } .account-node i { position: absolute; z-index: 2; right: -1px; bottom: 1px; width: 9px; height: 9px; background: #32d583; border: 2px solid #11171d; border-radius: 50%; } .account-node.sleeping i { background: #efb62d; } .account-node.paused i { background: #efb62d; } .account-node.offline i { background: #f04461; } .account-node b { max-width: 72px; margin-top: 4px; display: block; overflow: hidden; color: #d9dfe4; font-size: 6.5px; text-overflow: ellipsis; white-space: nowrap; } .account-node small { display: block; margin-top: 3px; color: #55d99b; font-size: 7px; font-weight: 700; } .account-node.offline small { color: #ff8295; } .account-node.filtered-out { display: none; }
.account-canvas-status { position: absolute; z-index: 6; top: 58px; left: 14px; padding: 8px 10px; display: grid; grid-template-columns: 9px auto; gap: 2px 7px; align-items: center; color: #dfe8ed; background: rgba(18,22,27,.9); border: 1px solid #29323a; border-radius: 9px; pointer-events: none; }
.account-canvas-status i { width: 8px; height: 8px; background: #32d583; border-radius: 50%; box-shadow: 0 0 0 4px rgba(50,213,131,.09); }
.account-canvas-status i.has-offline { background: #f04461; box-shadow: 0 0 0 4px rgba(240,68,97,.09); }
.account-canvas-status strong { font-size: 9px; }
.account-canvas-status span { grid-column: 2; color: #77838d; font-size: 7px; }
.cluster-stage.grid-view { inset: 55px 90px; display: grid; grid-template-columns: repeat(3,minmax(170px,1fr)); align-items: stretch; } .cluster-stage.grid-view .account-cluster { width: auto; height: auto; padding: 18px; border-radius: 12px; } .cluster-stage.grid-view .cluster-heading { position: static; transform: none; } .cluster-stage.grid-view .cluster-orbit { position: static; width: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; } .cluster-stage.grid-view .account-node { position: static; animation: none; transform: none; }
.cluster-stage.ring-view .account-cluster { margin-left: -70px; background: rgba(18,24,31,.62); } .cluster-stage.ring-view .account-cluster:nth-child(2) { margin-top: 100px; } .cluster-stage.ring-view .account-cluster:nth-child(3) { margin-top: -90px; }
.zoom-tools { position: absolute; z-index: 5; left: 10px; top: 50%; padding: 4px; display: grid; gap: 3px; background: rgba(23,26,32,.94); border: 1px solid #303741; border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,.28); } .zoom-tools button { width: 29px; min-height: 29px; padding: 0; display: grid; place-items: center; color: #8d98a3; background: transparent; border: 0; border-radius: 6px; font-size: 7px; cursor: pointer; } .zoom-tools button:hover { color: white; background: #2a313b; } .zoom-tools .zoom-reset { width: 48px; min-height: 42px; gap: 2px; color: #8dcdf0; background: #1c3444; border: 1px solid #2e536b; } .zoom-reset span { font-size: 6px; font-weight: 700; text-transform: uppercase; }
.canvas-map { position: absolute; right: 12px; bottom: 12px; width: 100px; height: 66px; overflow: hidden; background: #172733; border: 1px solid #294050; border-radius: 7px; opacity: .75; } .canvas-map span, .canvas-map i, .canvas-map b { position: absolute; border-radius: 50%; } .canvas-map span { width: 36px; height: 36px; left: 12px; top: 12px; background: rgba(205,43,133,.3); } .canvas-map i { width: 30px; height: 30px; left: 42px; top: 22px; background: rgba(217,165,32,.3); } .canvas-map b { width: 20px; height: 20px; right: 8px; top: 10px; background: rgba(114,136,154,.3); }
.account-panels { min-height: 150px; display: grid; grid-template-columns: .9fr 1.05fr .9fr .9fr; gap: 8px; } .ops-panel { min-width: 0; padding: 11px; background: #111318; border: 1px solid #1b2027; border-radius: 8px; } .ops-panel header { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; } .ops-panel header > span { display: flex; align-items: center; gap: 6px; color: #dce1e6; font-size: 7px; font-weight: 750; text-transform: uppercase; letter-spacing: .4px; } .ops-panel header small, .ops-panel header button { color: #5f6872; background: transparent; border: 0; font-size: 6px; }
.activity-pulse { height: 90px; display: grid; place-items: center; align-content: center; gap: 8px; color: #505963; font-size: 7px; } .activity-pulse i { width: 8px; height: 8px; background: #2e9ed7; border-radius: 50%; box-shadow: 0 0 0 0 rgba(46,158,215,.4); animation: pulse 1.8s infinite; }
.health-row + .health-row { margin-top: 12px; } .health-row > div { display: flex; align-items: center; gap: 5px; } .health-row i { width: 6px; height: 6px; border-radius: 50%; } .health-row i.pink { background: #d93f9d; } .health-row i.gold { background: #e2ab28; } .health-row strong { color: #cdd3d8; font-size: 6.5px; } .health-row b { margin-left: auto; color: #d7a72b; font-size: 7px; } .health-row progress { width: 100%; height: 3px; margin: 6px 0 3px; display: block; accent-color: #2da6df; } .health-row small { color: #565f69; font-size: 5.5px; }
.status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .status-grid span { padding: 10px 8px; display: flex; color: #78828d; background: #171b21; border: 1px solid #20262e; border-radius: 6px; font-size: 6px; } .status-grid b { margin-left: auto; color: #dfe4e8; }
.squads-list > div { padding: 6px 0; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 6px; border-top: 1px solid #1d2228; } .squad-avatar { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 6px; } .squad-avatar.pink { color: #ef7bc0; background: #392036; } .squad-avatar.gold { color: #efc55c; background: #37301b; } .squad-avatar.slate { color: #a4b0bb; background: #252c34; } .squads-list strong { color: #bdc4ca; font-size: 6.5px; } .squads-list b { color: #606974; font-size: 5.5px; }
.account-modal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; background: rgba(2,5,9,.72); opacity: 0; visibility: hidden; backdrop-filter: blur(4px); transition: .18s; } .account-modal.open { opacity: 1; visibility: visible; } .account-dialog { width: min(390px,calc(100vw - 28px)); padding: 17px; background: #151d27; border: 1px solid #2a3947; border-radius: 12px; box-shadow: 0 28px 80px rgba(0,0,0,.45); transform: translateY(8px); transition: .18s; } .account-modal.open .account-dialog { transform: translateY(0); } .account-dialog header { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; } .account-dialog h2 { margin: 0; font-size: 14px; } .account-dialog label { margin-top: 12px; display: block; color: #9ca8b3; font-size: 8px; font-weight: 650; } .account-dialog input, .account-dialog select { width: 100%; height: 38px; margin-top: 7px; padding: 0 10px; color: #e7ecf0; background: #1c2834; border: 1px solid #2a3a49; border-radius: 7px; outline: 0; font: inherit; font-size: 8px; } .dialog-note { margin-top: 14px; padding: 10px; display: flex; align-items: flex-start; gap: 7px; color: #71808d; background: #111923; border-radius: 7px; font-size: 7px; line-height: 1.5; } .dialog-note svg { flex: 0 0 auto; color: #4daedc; } .account-dialog footer { margin-top: 17px; display: flex; justify-content: flex-end; gap: 7px; } .account-dialog footer button { height: 34px; padding: 0 12px; display: flex; align-items: center; gap: 5px; background: #1e2a35; border: 1px solid #2b3b49; border-radius: 6px; font-size: 8px; cursor: pointer; }
.dialog-error { min-height: 17px; margin-top: 10px; color: #ff8297; font-size: 9px; line-height: 1.5; }
.credential-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 9px; }
.credential-help { margin: 9px 0 2px; color: #71808d; font-size: 8px; line-height: 1.5; }
.credential-help a { color: #51b4e5; }
.credential-mode { margin-top: 12px; padding: 3px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: #111923; border: 1px solid #253542; border-radius: 7px; }
.credential-mode button { min-height: 34px; padding: 6px 8px; color: #71808d; background: transparent; border: 0; border-radius: 5px; font-size: 7px; cursor: pointer; }
.credential-mode button.active { color: #e7ecf0; background: #243747; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.account-dialog [hidden] { display: none; }
.account-dialog button:disabled, .auth-submit:disabled { cursor: wait; opacity: .55; }
.auth-shell { min-height: 100vh; padding: 24px; display: grid; place-items: center; overflow-y: auto; background: radial-gradient(circle at 50% 0,rgba(45,151,205,.16),transparent 38%),#090e16; }
.auth-card { width: min(420px,100%); padding: 32px; color: #e8edf3; background: #121a24; border: 1px solid #263544; border-radius: 16px; box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.auth-brand { margin-bottom: 32px; display: flex; align-items: center; gap: 10px; font-size: 18px; }
.auth-card h1 { margin: 7px 0 9px; font-size: 27px; letter-spacing: -.7px; }
.auth-card > p { margin: 0 0 24px; color: #7f8d9a; font-size: 12px; line-height: 1.7; }
.auth-card label { margin-top: 15px; display: block; color: #9daab5; font-size: 10px; font-weight: 650; }
.auth-card input { width: 100%; height: 45px; margin-top: 8px; padding: 0 12px; color: #edf2f6; background: #192532; border: 1px solid #2a3c4c; border-radius: 8px; outline: 0; }
.auth-card input:focus { border-color: #37a9e8; box-shadow: 0 0 0 3px rgba(55,169,232,.1); }
.auth-submit { width: 100%; height: 44px; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: white; background: linear-gradient(135deg,#45b9ef,#238fc8); border: 0; border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700; }
.loading-card { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.loading-card p { margin: 0; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(46,158,215,0); } 100% { box-shadow: 0 0 0 0 rgba(46,158,215,0); } }
@keyframes node-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes node-float { from { transform: translate3d(calc(-50% - 3px),calc(-50% - 4px),0); } to { transform: translate3d(calc(-50% + 4px),calc(-50% + 5px),0); } }
@media (prefers-reduced-motion: reduce) { .account-node { animation: none; transform: translate(-50%,-50%); } .cluster-stage.grid-view .account-node { transform: none; } .cluster-stage.camera-animate { transition: none; } }

/* Readability pass: keep the dense console style without miniature UI text. */
.brand { font-size: 15px; }
.channel-switch button { font-size: 10px; }
.calls-button { height: 38px; font-size: 12px; }
.nav p, .sidebar-bottom > p { font-size: 9px; }
.nav-item { height: 36px; font-size: 11px; }
.profile strong { font-size: 10px; }
.profile small { font-size: 8px; }
.inbox-header { height: 56px; }
.inbox-header h1 { font-size: 15px; }
.inbox-count { font-size: 8px; }
.search-wrap { height: 38px; }
.search-wrap input { font-size: 11px; }
.search-wrap kbd { font-size: 8px; }
.filter-tabs, .filter-tabs button { height: 36px; }
.filter-tabs button { font-size: 10px; }
.filter-tabs b { font-size: 8px; }
.conversation { min-height: 78px; padding: 11px 13px; grid-template-columns: 43px 1fr; gap: 11px; }
.conversation .avatar { width: 43px; height: 43px; font-size: 11px; }
.conversation-title strong { font-size: 11px; }
.conversation-title time { font-size: 8px; }
.conversation-preview { max-width: 210px; margin-top: 6px; font-size: 9px; }
.conversation-tag { margin-top: 7px; font-size: 8px; }
.unread { min-width: 18px; height: 18px; font-size: 8px; }
.chat-workspace { grid-template-rows: 56px minmax(0,1fr) 56px; }
.selected-avatar { width: 36px; height: 36px; font-size: 10px; }
.selected-person strong { font-size: 11px; }
.selected-person small { font-size: 8px; }
.empty-chat-state { width: min(390px,calc(100% - 40px)); padding: 32px; }
.empty-chat-icon { width: 60px; height: 60px; }
.empty-chat-state h2 { font-size: 18px; }
.empty-chat-state p { max-width: 310px; font-size: 10px; }
.secure-label { font-size: 8px; }
.composer-shell { padding: 9px 12px; }
.composer-placeholder, .composer-input { height: 38px; font-size: 10px; }
.send-button { width: 38px; height: 38px; }
.details-header { height: 66px; }
.eyebrow { font-size: 8px; }
.details-header h2 { font-size: 16px; }
.details-tabs { height: 42px; }
.details-tabs button { font-size: 10px; }
.contact-card { padding: 15px; grid-template-columns: 48px 1fr 30px; }
.contact-avatar { width: 48px; height: 48px; font-size: 11px; }
.contact-card h3 { font-size: 11px; }
.contact-card p { font-size: 8px; }
.section-title { min-height: 36px; font-size: 9px; }
.section-title small, .section-title button { font-size: 8px; }
.insight-row { padding: 16px 0; grid-template-columns: 80px 1fr; }
.insight-label { font-size: 8px; }
.insight-value { font-size: 10px; }
.insight-value small { font-size: 8px; }
.tags span { padding: 6px 8px; font-size: 8px; }
.ai-card h3, .suggestion-card strong { font-size: 11px; }
.ai-card p, .suggestion-card p { font-size: 9px; }
.accounts-workspace { padding: 20px 22px 16px; }
.app-shell.accounts-view .accounts-workspace { grid-template-rows: auto auto minmax(460px,1fr) auto; gap: 12px; }
.accounts-toolbar { min-height: 62px; padding: 10px 13px; gap: 12px; }
.accounts-title { min-width: 220px; }
.accounts-title h1 { font-size: 20px; }
.accounts-title p { margin-top: 5px; font-size: 9px; }
.account-channel button { height: 32px; padding: 0 11px; font-size: 9px; }
.account-search { min-width: 145px; height: 36px; padding: 0 10px; }
.account-search input { font-size: 10px; }
.account-actions button { height: 34px; padding: 0 9px; font-size: 9px; }
.account-metrics { min-height: 64px; }
.account-metrics div { padding: 12px 11px; }
.account-metrics strong { font-size: 16px; }
.account-metrics span { margin-top: 5px; font-size: 8px; }
.accounts-canvas { min-height: 460px; }
.canvas-controls { inset: 13px 13px auto; }
.view-switch button, .status-switch button { height: 28px; padding: 0 10px; font-size: 8px; }
.cluster-stage { inset: 65px 65px 42px; gap: 18px; }
.account-cluster { width: 270px; height: 270px; }
.cluster-heading { top: -43px; width: 220px; }
.cluster-heading strong { font-size: 13px; }
.cluster-heading small { margin-top: 4px; font-size: 9px; }
.cluster-orbit { inset: 12%; }
.account-node { width: 66px; }
.account-node > span { width: 52px; height: 52px; font-size: 12px; }
.account-node i { width: 11px; height: 11px; }
.account-node b { max-width: 66px; margin-top: 6px; font-size: 9px; }
.zoom-tools button { width: 30px; height: 30px; font-size: 8px; }
.canvas-map { width: 120px; height: 78px; }
.account-panels { min-height: 180px; gap: 10px; }
.ops-panel { padding: 14px; }
.ops-panel header { margin-bottom: 13px; }
.ops-panel header > span { font-size: 9px; }
.ops-panel header small, .ops-panel header button { font-size: 8px; }
.activity-pulse { height: 105px; font-size: 9px; }
.health-row strong { font-size: 9px; }
.health-row b { font-size: 10px; }
.health-row small { font-size: 7px; }
.status-grid span { padding: 13px 10px; font-size: 8px; }
.squads-list > div { padding: 8px 0; grid-template-columns: 30px 1fr auto; }
.squad-avatar { width: 27px; height: 27px; font-size: 8px; }
.squads-list strong { font-size: 9px; }
.squads-list b { font-size: 7px; }

/* Accounts manager drawer */
.manager-backdrop { position: fixed; inset: 0; z-index: 89; background: rgba(0,0,0,.62); opacity: 0; visibility: hidden; backdrop-filter: blur(1px); transition: .2s ease; }
.manager-backdrop.open { opacity: 1; visibility: visible; }
.manager-drawer { position: fixed; z-index: 90; top: 0; right: -100vw; bottom: 0; width: min(810px,calc(100vw - 205px)); display: flex; flex-direction: column; color: #e9edf1; background: #111114; border-left: 1px solid #28282d; box-shadow: -28px 0 70px rgba(0,0,0,.48); visibility: hidden; }
.manager-drawer.open { right: 0; visibility: visible; }
.manager-drawer > header { min-height: 58px; padding: 0 14px 0 20px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #242429; }
.manager-drawer h2 { margin: 0; font-size: 17px; }
.manager-tabs { align-self: stretch; display: flex; align-items: center; gap: 3px; }
.manager-tabs button { position: relative; height: 100%; padding: 0 13px; color: #777982; background: transparent; border: 0; font-size: 10px; cursor: pointer; }
.manager-tabs button.active { color: #edf1f4; }
.manager-tabs button.active::after { content: ""; position: absolute; right: 11px; bottom: 0; left: 11px; height: 2px; background: var(--blue); }
.manager-drawer > header .icon-button { margin-left: auto; }
.manager-tools { padding: 12px 18px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #202025; }
.manager-tools label { height: 36px; padding: 0 10px; display: flex; flex: 1; align-items: center; gap: 7px; color: #656873; background: #17171b; border: 1px solid #25262b; border-radius: 7px; }
.manager-tools input { width: 100%; color: #e0e4e8; background: transparent; border: 0; outline: 0; font-size: 10px; }
.manager-tools span { color: #6f737c; font-size: 9px; }
.manager-content { min-height: 0; flex: 1; overflow-y: auto; }
.manager-panel { display: none; padding: 14px 18px 24px; }
.manager-panel.active { display: block; }
.manager-card-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.manager-card { min-height: 118px; padding: 13px; background: #19191d; border: 1px solid #24252a; border-radius: 7px; box-shadow: 0 7px 18px rgba(0,0,0,.12); }
.manager-card:hover { border-color: #34363d; background: #1c1c21; }
.manager-card-title, .manager-card-title label, .manager-card footer { display: flex; align-items: center; }
.manager-card-title label { min-width: 0; flex: 1; gap: 7px; }
.manager-card-title input { width: 14px; height: 14px; margin: 0; accent-color: var(--blue); }
.manager-card-title strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.manager-card-title b { color: #d9aa31; font-size: 10px; }
.fleet-dot { width: 8px; height: 8px; flex: 0 0 auto; background: #969ca4; border-radius: 50%; }
.fleet-dot.healthy, .manager-activity i.healthy { background: #32d583; }
.fleet-dot.incomplete, .manager-activity i.incomplete { background: #e7aa28; }
.fleet-dot.risky, .manager-activity i.risky { background: #f04461; }
.fleet-dot.warning, .manager-activity i.warning { background: #d89428; }
.manager-card p { margin: 17px 0 0; color: #888b93; font-size: 9px; }
.manager-identity { margin-top: 13px; padding: 9px; display: grid; gap: 7px; background: #151519; border: 1px solid #25262b; border-radius: 6px; }
.manager-identity span { min-width: 0; display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 7px; }
.manager-identity b { color: #686d76; font-size: 7px; text-transform: uppercase; }
.manager-identity strong { overflow: hidden; color: #cdd4da; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.manager-card footer { margin-top: 12px; justify-content: space-between; color: #696c74; font-size: 8px; text-transform: capitalize; }
.manager-card footer small { font-size: inherit; }
.manager-empty, .fleet-empty { display: none; padding: 50px 20px; color: #646873; text-align: center; font-size: 10px; }
.manager-empty.visible, .fleet-empty.visible { display: block; }
.manager-summary-table > div { min-height: 52px; padding: 0 12px; display: grid; grid-template-columns: 10px 1.2fr 1fr 80px 90px 40px; align-items: center; gap: 10px; border-bottom: 1px solid #24252a; color: #858993; font-size: 9px; }
.manager-summary-table strong { color: #e4e8ec; }
.manager-summary-table b { color: #aeb4bb; text-transform: capitalize; }
.manager-summary-table small { color: #d2a632; font-size: 9px; text-align: right; }
.manager-table-config { width: max-content; padding: 5px 8px; color: #89949d; background: #20252b; border-radius: 999px; }
.manager-table-config.running { color: #83d9ff; background: #173143; }.manager-table-config.pending { color: #edc76e; background: #302917; }.manager-table-config.complete { color: #7de0b2; background: #173026; }.manager-table-config.partial { color: #ffd083; background: #3a2a16; }.manager-table-config.error { color: #ff98a7; background: #371d23; }.manager-table-config.excluded { color: #e6b373; background: #332719; }
.manager-config-state { margin: 10px 0 2px; padding: 9px 10px; display: grid; grid-template-columns: 9px minmax(0,1fr); gap: 8px; align-items: center; background: #15191e; border: 1px solid #282e35; border-radius: 8px; }
.manager-config-state > i { width: 8px; height: 8px; background: #626b75; border-radius: 50%; }
.manager-config-state > span { display: grid; gap: 3px; }
.manager-config-state strong { color: #b8c2ca; font-size: 9px; }
.manager-config-state small { overflow: hidden; color: #6f7b84; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.manager-config-state.ready > i { background: #45b8ed; }.manager-config-state.ready strong { color: #8ddaff; }
.manager-config-state.pending > i { background: #e6bb56; }.manager-config-state.pending strong { color: #f2ce79; }
.manager-config-state.running { background: #152532; border-color: #28516a; }
.manager-config-state.running > i { background: #42bff4; box-shadow: 0 0 0 0 rgba(66,191,244,.6); animation: config-pulse 1.25s infinite; }
.manager-config-state.running strong { color: #8bdcff; }
.manager-config-state.complete > i { background: #57d39d; }.manager-config-state.complete strong { color: #83e4b8; }
.manager-config-state.partial { background: #2b2115; border-color: #594322; }.manager-config-state.partial > i { background: #efb85d; }.manager-config-state.partial strong { color: #ffd083; }
.manager-config-state.error { background: #29191d; border-color: #523039; }.manager-config-state.error > i { background: #f16f82; }.manager-config-state.error strong { color: #ff9cab; }
.manager-config-state.excluded > i { background: #d49a55; }.manager-config-state.excluded strong { color: #eab879; }
@keyframes config-pulse { 70% { box-shadow: 0 0 0 7px rgba(66,191,244,0); } 100% { box-shadow: 0 0 0 0 rgba(66,191,244,0); } }
.manager-kanban { display: grid; grid-template-columns: repeat(4,minmax(140px,1fr)); gap: 10px; }
.manager-kanban > section { min-height: 330px; padding: 10px; background: #16161a; border: 1px solid #24252a; border-radius: 8px; }
.manager-kanban section > header { padding: 2px 2px 10px; display: flex; justify-content: space-between; color: #888c95; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.manager-kanban header b { min-width: 18px; padding: 2px 5px; color: #cfd5db; background: #24262b; border-radius: 9px; text-align: center; }
.manager-kanban article { margin-top: 7px; padding: 12px; background: #1d1d22; border: 1px solid #292a30; border-radius: 6px; }
.manager-kanban strong, .manager-kanban small { display: block; }
.manager-kanban strong { font-size: 10px; }
.manager-kanban small { margin-top: 6px; color: #6f737c; font-size: 8px; }
.manager-activity article { padding: 15px 8px; display: flex; align-items: flex-start; gap: 11px; border-bottom: 1px solid #24252a; }
.manager-activity i { width: 9px; height: 9px; margin-top: 3px; border-radius: 50%; }
.manager-activity strong, .manager-activity small { display: block; }
.manager-activity strong { font-size: 10px; }
.manager-activity small { margin-top: 5px; color: #71757e; font-size: 8px; }

/* Anti-spam fleet workspace */
.antispam-workspace { display: none; min-height: 100%; padding: 20px max(18px,calc((100% - 1040px)/2)) 40px; align-content: start; gap: 12px; }
.accounts-workspace.antispam-view { display: block !important; padding: 0; }
.accounts-workspace.antispam-view > .accounts-toolbar, .accounts-workspace.antispam-view > .account-metrics, .accounts-workspace.antispam-view > .accounts-canvas, .accounts-workspace.antispam-view > .account-panels { display: none; }
.accounts-workspace.antispam-view .antispam-workspace { display: grid; }
.antispam-header { min-height: 68px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.antispam-header > div:first-child { position: relative; }
.antispam-header .mobile-menu { position: absolute; top: 0; left: -42px; }
.antispam-header h1 { margin: 0; font-size: 22px; letter-spacing: -.45px; }
.antispam-header p { margin: 7px 0 0; color: #6f7780; font-size: 10px; }
.antispam-header > div:last-child { display: flex; gap: 8px; }
.antispam-header > div:last-child button, .fleet-policy > button { height: 35px; padding: 0 12px; display: flex; align-items: center; gap: 6px; color: #b7bec5; background: #111318; border: 1px solid #20242a; border-radius: 7px; font-size: 9px; cursor: pointer; }
.fleet-metrics { display: grid; grid-template-columns: repeat(3,1fr) 2.4fr; gap: 10px; }
.fleet-metrics article { min-height: 78px; padding: 13px 15px; background: #111318; border: 1px solid #1d2127; border-radius: 8px; }
.fleet-metrics span, .fleet-metrics strong, .fleet-metrics small { display: block; }
.fleet-metrics span { color: #777f88; font-size: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.fleet-metrics strong { margin-top: 8px; font-size: 19px; }
.fleet-metrics small { margin-top: 5px; color: #555d66; font-size: 8px; }
.fleet-health header { display: flex; align-items: center; justify-content: space-between; }
.fleet-health header b { color: #dce2e7; font-size: 12px; }
.fleet-health progress { width: 100%; height: 5px; margin: 13px 0 0; accent-color: #33b876; }
.fleet-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) auto 128px 36px; align-items: center; gap: 8px; }
.fleet-toolbar > label { height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: #626b75; background: #111318; border: 1px solid #1f242a; border-radius: 7px; }
.fleet-toolbar input { width: 100%; color: #e1e6ea; background: transparent; border: 0; outline: 0; font-size: 9px; }
.fleet-filters { display: flex; gap: 5px; }
.fleet-filters button { height: 30px; padding: 0 10px; display: flex; align-items: center; gap: 6px; color: #8d949c; background: #16181d; border: 1px solid #23272d; border-radius: 16px; font-size: 8px; white-space: nowrap; cursor: pointer; }
.fleet-filters button.active { color: white; background: #298fc4; border-color: #298fc4; }
.fleet-filters i { width: 7px; height: 7px; border-radius: 50%; }
.fleet-filters i.healthy { background: #32d583; }.fleet-filters i.incomplete { background: #e4ac2d; }.fleet-filters i.risky { background: #f04461; }.fleet-filters i.warning { background: #d88e26; }
.fleet-toolbar select { height: 36px; padding: 0 9px; color: #b8bec5; background: #16181d; border: 1px solid #23272d; border-radius: 7px; outline: 0; font-size: 9px; }
.square-action { width: 36px; height: 36px; display: grid; place-items: center; color: #aeb5bc; background: #16181d; border: 1px solid #23272d; border-radius: 7px; cursor: pointer; }
.fleet-policy { min-height: 52px; display: flex; align-items: center; gap: 10px; }
.fleet-policy div { flex: 1; }
.fleet-policy strong, .fleet-policy small { display: block; }
.fleet-policy strong { font-size: 9px; text-transform: uppercase; letter-spacing: .25px; }
.fleet-policy strong em { color: #f04461; font-style: normal; }
.fleet-policy small { margin-top: 4px; color: #6c737b; font-size: 8px; text-transform: uppercase; }
.switch-control input { position: absolute; opacity: 0; }
.switch-control span { position: relative; width: 32px; height: 18px; display: block; background: #34383e; border-radius: 10px; cursor: pointer; }
.switch-control span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; background: white; border-radius: 50%; transition: .18s; }
.switch-control input:checked + span { background: #2698d0; }
.switch-control input:checked + span::after { transform: translateX(14px); }
.fleet-table-wrap { overflow: auto; background: #101216; border: 1px solid #1e2228; border-radius: 8px; }
.fleet-table { width: 100%; border-collapse: collapse; min-width: 940px; }
.fleet-table th { height: 40px; padding: 0 13px; color: #7a818a; background: #191b20; font-size: 8px; text-align: left; text-transform: uppercase; letter-spacing: .45px; }
.fleet-table td { padding: 13px; border-top: 1px solid #20242a; color: #c7cdd3; font-size: 9px; vertical-align: middle; }
.fleet-table tr:hover td { background: #14171b; }
.fleet-account { display: flex; align-items: center; gap: 9px; }
.fleet-avatar { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; color: #dbe8f0; background: #203544; border-radius: 50%; font-size: 8px; font-weight: 700; }
.fleet-account strong, .fleet-account small, .cell-note { display: block; }
.fleet-account strong, .fleet-table td > strong { color: #e1e5e9; font-size: 9px; }
.fleet-account small, .cell-note { margin-top: 5px; color: #636b74; font-size: 7px; }
.health-pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 12px; font-size: 8px; }
.health-pill i { width: 6px; height: 6px; border-radius: 50%; }
.health-pill.healthy { color: #69dda3; background: rgba(50,213,131,.1); }.health-pill.healthy i { background: #32d583; }
.health-pill.incomplete, .health-pill.warning { color: #e4bd63; background: rgba(228,172,45,.1); }.health-pill.incomplete i, .health-pill.warning i { background: #e4ac2d; }
.health-pill.risky { color: #f2778d; background: rgba(240,68,97,.1); }.health-pill.risky i { background: #f04461; }
.fleet-row-action { width: 30px; height: 30px; display: grid; place-items: center; color: #7a838c; background: transparent; border: 0; border-radius: 6px; cursor: pointer; }
.fleet-row-action:hover { color: white; background: #242830; }
.square-action.refreshing svg { animation: fleet-spin .45s linear; }
@keyframes fleet-spin { to { transform: rotate(360deg); } }

/* Managed proxy inventory */
.proxies-workspace { display: none; min-height: 100%; padding: 20px max(18px,calc((100% - 1120px)/2)) 40px; align-content: start; gap: 12px; }
.accounts-workspace.proxies-view { display: block !important; padding: 0; }
.accounts-workspace.proxies-view > .accounts-toolbar, .accounts-workspace.proxies-view > .account-metrics, .accounts-workspace.proxies-view > .accounts-canvas, .accounts-workspace.proxies-view > .account-panels, .accounts-workspace.proxies-view > .antispam-workspace { display: none; }
.accounts-workspace.proxies-view .proxies-workspace { display: grid; }
.proxy-page-header { min-height: 68px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.proxy-page-header > div:first-child { position: relative; }
.proxy-page-header .mobile-menu { position: absolute; top: 0; left: -42px; }
.proxy-page-header h1 { margin: 0; font-size: 22px; letter-spacing: -.45px; }
.proxy-page-header p { margin: 7px 0 0; color: #6f7780; font-size: 10px; }
.proxy-page-header > div:last-child, .proxy-editor-actions, .proxy-assignment-actions { display: flex; gap: 8px; }
.proxy-page-header button, .proxy-toolbar button, .proxy-editor-actions button, .proxy-assignment-actions button { height: 35px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #b7bec5; background: #16181d; border: 1px solid #252a31; border-radius: 7px; font-size: 9px; cursor: pointer; }
.proxy-primary { color: #fff !important; background: #278fc6 !important; border-color: #36a7df !important; }
.proxy-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.proxy-metrics article { min-height: 78px; padding: 13px 15px; background: #111318; border: 1px solid #1d2127; border-radius: 8px; }
.proxy-metrics span,.proxy-metrics strong,.proxy-metrics small { display: block; }
.proxy-metrics span { color: #777f88; font-size: 8px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.proxy-metrics strong { margin-top: 8px; font-size: 19px; }.proxy-metrics small { margin-top: 5px; color: #555d66; font-size: 8px; }
.proxy-toolbar { display: grid; grid-template-columns: minmax(220px,1fr) auto; gap: 8px; }
.proxy-toolbar label { height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 7px; color: #626b75; background: #111318; border: 1px solid #1f242a; border-radius: 7px; }
.proxy-toolbar input { width: 100%; color: #e1e6ea; background: transparent; border: 0; outline: 0; font-size: 9px; }
.proxy-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 12px; align-items: start; }
.proxy-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.proxy-card { padding: 14px; background: #111318; border: 1px solid #20242a; border-radius: 9px; cursor: pointer; transition: border-color .16s,background .16s; }
.proxy-card:hover,.proxy-card.active { background: #151a20; border-color: #348eb9; }
.proxy-card header { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.proxy-type-icon { width: 36px; height: 36px; display: grid; place-items: center; color: #66c5f0; background: #172a36; border-radius: 9px; }
.proxy-card header div { min-width: 0; }.proxy-card strong,.proxy-card small { display: block; }.proxy-card strong { font-size: 10px; }.proxy-card small { margin-top: 4px; overflow: hidden; color: #6d7680; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.proxy-test-state { max-width: 112px; display: flex; align-items: center; gap: 5px; overflow: hidden; color: #8c959d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.proxy-test-state i { width: 7px; height: 7px; flex: 0 0 auto; background: #68717a; border-radius: 50%; }.proxy-test-state.success i { background: #39cc8a; }.proxy-test-state.error i { background: #ef667a; }
.proxy-card footer { margin-top: 13px; padding-top: 11px; display: flex; align-items: center; gap: 10px; color: #69727b; border-top: 1px solid #20242a; font-size: 8px; }
.proxy-card footer span:nth-child(2) { margin-left: auto; }.proxy-card footer button { height: 26px; padding: 0 8px; display: flex; align-items: center; gap: 5px; color: #8fcfeb; background: #172731; border: 1px solid #264654; border-radius: 6px; cursor: pointer; }
.proxy-editor { position: sticky; top: 14px; min-height: 390px; padding: 16px; background: #111318; border: 1px solid #20242a; border-radius: 9px; }
.proxy-editor-empty { min-height: 355px; display: grid; place-content: center; justify-items: center; gap: 8px; color: #59636c; text-align: center; }.proxy-editor-empty strong { color: #a4adb5; font-size: 11px; }.proxy-editor-empty p { margin: 0; font-size: 9px; }
.proxy-editor form { display: grid; gap: 12px; }.proxy-editor form > header { display: flex; align-items: center; }.proxy-editor h2 { margin: 2px 0 0; font-size: 16px; }.proxy-editor form > header button { width: 32px; height: 32px; margin-left: auto; display: grid; place-items: center; color: #ff8fa0; background: #342026; border: 1px solid #563039; border-radius: 7px; }
.proxy-editor label { display: grid; gap: 6px; color: #949ca4; font-size: 9px; font-weight: 600; }.proxy-editor input,.proxy-editor select { height: 36px; padding: 0 10px; color: #dce3e8; background: #0d1014; border: 1px solid #282e35; border-radius: 7px; outline: 0; }
.proxy-help { margin: -3px 0 0; color: #68727b; font-size: 8px; line-height: 1.5; }.proxy-editor-actions { justify-content: flex-end; }
.proxy-assignment { margin-top: 4px; padding-top: 14px; border-top: 1px solid #25292f; }.proxy-assignment > header strong,.proxy-assignment > header small { display: block; }.proxy-assignment > header strong { font-size: 10px; }.proxy-assignment > header small { margin-top: 4px; color: #656e77; font-size: 8px; }
.proxy-assignment > label { margin-top: 11px; }.proxy-account-list { max-height: 205px; margin-top: 9px; display: grid; gap: 5px; overflow-y: auto; }
.proxy-account-list label { min-height: 43px; padding: 6px 8px; grid-template-columns: auto minmax(0,1fr); align-items: center; background: #15181d; border: 1px solid #24292f; border-radius: 7px; }.proxy-account-list input { width: 15px; height: 15px; padding: 0; }.proxy-account-list span { min-width: 0; }.proxy-account-list strong,.proxy-account-list small { display: block; }.proxy-account-list strong { color: #d9dfe4; font-size: 9px; }.proxy-account-list small { margin-top: 3px; overflow: hidden; color: #68727b; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.proxy-assignment-actions { margin-top: 10px; justify-content: flex-end; }.proxy-empty { grid-column: 1 / -1; min-height: 220px; display: grid; place-items: center; color: #68717a; background: #111318; border: 1px dashed #292f36; border-radius: 9px; font-size: 10px; }
.toast { position: fixed; z-index: 180; right: 20px; bottom: 20px; width: min(360px,calc(100vw - 32px)); min-height: 52px; padding: 11px 42px 11px 13px; display: grid; grid-template-columns: 24px minmax(0,1fr); align-items: center; gap: 9px; overflow: hidden; color: #edf5f9; background: #172833; border: 1px solid #365265; border-radius: 11px; box-shadow: 0 16px 44px rgba(0,0,0,.44); font-size: 10px; line-height: 1.4; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); pointer-events: none; transition: opacity .18s ease,transform .18s ease,visibility .18s; }
.toast.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; }
.toast-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #62d99d; background: rgba(52,211,153,.12); border-radius: 50%; }
.toast.error { background: #352126; border-color: #71404b; }
.toast.error .toast-icon { color: #ff8da0; background: rgba(255,92,117,.13); }
.toast-message { min-width: 0; overflow-wrap: anywhere; }
.toast-close { position: absolute; top: 50%; right: 9px; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; color: #9dafbb; background: transparent; border: 0; border-radius: 7px; cursor: pointer; transform: translateY(-50%); }
.toast-close:hover { color: white; background: rgba(255,255,255,.09); }
.toast-progress { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #4fc98d; transform-origin: left; animation: toast-progress 3.2s linear forwards; }
.toast.error .toast-progress { background: #f26c82; }
@keyframes toast-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.mobile-scrim { display: none; } button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid rgba(55,169,232,.75); outline-offset: 2px; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 70px 290px minmax(400px,1fr) 300px; } .sidebar { padding-inline: 10px; } .brand-row { justify-content: center; }
  .brand span:last-child, .collapse-button, .channel-switch, .calls-button, .nav p, .sidebar-bottom > p, .nav-item span, .profile > span:nth-child(2), .profile > svg { display: none; }
  .timezone-row { padding-inline: 4px; }.timezone-row > svg { display: none; }.timezone-row select { padding: 0; font-size: 8px; text-align: center; }.theme-toggle { padding-inline: 7px; grid-template-columns: 1fr; justify-items: center; }.theme-toggle > svg,.theme-toggle > span { display: none; }
  .nav-item { justify-content: center; padding: 0; } .nav-item b { position: absolute; top: 1px; right: 2px; min-width: 13px; height: 13px; padding: 0 3px; } .nav-item.active::before { left: -10px; } .profile { display: flex; justify-content: center; padding-inline: 0; }
  .app-shell.accounts-view { grid-template-columns: 70px minmax(0,1fr); } .accounts-toolbar { flex-wrap: wrap; } .accounts-title { min-width: 180px; } .account-actions { flex: 1; justify-content: flex-end; } .account-actions button:nth-child(-n+3) { display: none; } .account-cluster { width: 210px; height: 210px; }
  .manager-drawer { width: calc(100vw - 70px); }
  .manager-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .antispam-workspace { padding-inline: 18px; }
  .fleet-toolbar { grid-template-columns: minmax(220px,1fr) auto 120px 36px; }
  .fleet-filters button { padding-inline: 8px; }
  .proxy-layout { grid-template-columns: minmax(0,1fr) 310px; }.proxy-card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 920px) {
  .app-shell { grid-template-columns: 290px minmax(0,1fr); }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 80; width: 205px; transform: translateX(-100%); box-shadow: 20px 0 50px rgba(0,0,0,.35); transition: transform .22s ease; } .sidebar.mobile-open { transform: translateX(0); }
  .proxy-layout { grid-template-columns: 1fr; }.proxy-editor { position: static; }.proxy-page-header { flex-wrap: wrap; }.proxy-page-header > div:last-child { width: 100%; }.proxy-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .sidebar .brand-row { justify-content: space-between; } .sidebar .brand span:last-child, .sidebar .collapse-button, .sidebar .channel-switch, .sidebar .calls-button, .sidebar .nav p, .sidebar .sidebar-bottom > p, .sidebar .nav-item span, .sidebar .profile > span:nth-child(2), .sidebar .profile > svg { display: flex; }
  .sidebar .timezone-row { padding-inline: 9px; }.sidebar .timezone-row > svg { display: block; }.sidebar .timezone-row select { padding: 0 2px; font-size: 10px; text-align: left; }.sidebar .theme-toggle { padding-inline: 9px; grid-template-columns: 14px 1fr auto; justify-items: stretch; }.sidebar .theme-toggle > svg { display: block; }.sidebar .theme-toggle > span { display: inline; }
  .sidebar .nav-item { justify-content: flex-start; padding: 0 9px; } .sidebar .nav-item b { position: static; min-width: 18px; height: 17px; margin-left: auto; } .sidebar .nav-item.active::before { left: -7px; } .sidebar .profile { display: grid; justify-content: normal; padding-inline: 7px; }
  .mobile-menu { display: grid; } .details-panel { position: fixed; inset: 0 0 0 auto; z-index: 80; width: min(330px,90vw); transform: translateX(100%); box-shadow: -20px 0 50px rgba(0,0,0,.32); transition: transform .22s ease; } .details-panel.mobile-open { transform: translateX(0); } .details-close { display: grid; }
  .mobile-scrim { position: fixed; inset: 0; z-index: 70; display: block; background: rgba(2,7,12,.64); opacity: 0; visibility: hidden; transition: .2s; } .mobile-scrim.visible { opacity: 1; visibility: visible; }
  .app-shell.accounts-view { display: block; } .accounts-workspace { grid-column: auto; height: 100vh; padding: 10px; } .accounts-menu { display: grid; } .account-metrics { grid-template-columns: repeat(4,1fr); } .account-metrics div:nth-child(4) { border-right: 0; } .account-metrics div:nth-child(-n+4) { border-bottom: 1px solid #1c2026; } .cluster-stage { justify-content: flex-start; overflow-x: auto; } .account-panels { grid-template-columns: 1fr 1fr; }
  .manager-drawer { width: 100vw; }
  .manager-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .manager-kanban { overflow-x: auto; }
  .manager-kanban > section { min-width: 180px; }
  .antispam-header .mobile-menu { display: grid; position: static; float: left; margin: -4px 8px 0 0; }
  .fleet-metrics { grid-template-columns: repeat(3,1fr); }
  .fleet-health { grid-column: 1 / -1; }
  .fleet-toolbar { grid-template-columns: 1fr 128px 36px; }
  .fleet-filters { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; }
}
@media (max-width: 650px) {
  .app-shell { display: block; } .inbox-panel { position: fixed; inset: 0; z-index: 40; transition: transform .22s ease; } .inbox-panel:not(.mobile-open) { transform: translateX(-100%); } .inbox-panel.mobile-open { transform: translateX(0); } .chat-workspace { height: 100vh; } .inbox-back { display: grid; }
  .header-actions .icon-button:nth-child(2), .header-actions .icon-button:last-child { display: none; } .empty-chat-state { padding: 20px; }
  .app-shell.accounts-view .accounts-workspace { display: grid; } .accounts-title { min-width: 100%; } .account-channel { display: none; } .account-search { order: 3; min-width: 100%; } .account-actions { width: 100%; } .account-actions button { display: none; } .account-actions .quick-add, .account-actions #connect-account { display: flex; flex: 1; justify-content: center; } .app-shell.accounts-view .accounts-workspace { grid-template-rows: auto auto minmax(390px,1fr) auto; } .accounts-canvas { min-height: 390px; } .status-switch button { padding: 0 5px; } .view-switch button:not(.active) { display: none; } .cluster-stage { inset: 65px 20px 30px 48px; } .account-cluster { width: 190px; height: 190px; } .account-panels { grid-template-columns: 1fr; }
  .account-actions #manager-open, .account-actions #antispam-open { display: flex; }
  .manager-drawer > header { padding-left: 12px; gap: 8px; flex-wrap: wrap; }
  .manager-drawer h2 { width: calc(100% - 44px); }
  .manager-tabs { width: 100%; order: 3; overflow-x: auto; height: 42px; }
  .manager-tabs button { flex: 0 0 auto; }
  .manager-tools { padding-inline: 12px; }
  .manager-card-grid { grid-template-columns: 1fr; }
  .manager-panel { padding-inline: 12px; }
  .manager-summary-table > div { grid-template-columns: 10px 1fr 80px 32px; }
  .manager-summary-table > div > span:nth-child(3) { display: none; }
  .antispam-workspace { padding: 14px 10px 30px; }
  .antispam-header { display: block; }
  .antispam-header h1 { font-size: 19px; }
  .antispam-header > div:last-child { margin-top: 14px; }
  .fleet-metrics { grid-template-columns: 1fr; }
  .fleet-health { grid-column: auto; }
  .fleet-toolbar { grid-template-columns: 1fr 36px; }
  .fleet-toolbar > label { grid-column: 1 / -1; }
  .fleet-toolbar select { grid-column: 1; }
  .fleet-filters { grid-column: 1 / -1; grid-row: auto; }
  .fleet-policy { align-items: flex-start; flex-wrap: wrap; }
  .fleet-policy div { min-width: calc(100% - 48px); }
  .fleet-policy > button { margin-left: 42px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* 2026 reference layout: shared Telegram operations shell */
:root { --bg: #08090b; --sidebar: #121215; --panel: #17232d; --panel-2: #1b2833; --canvas: #0c1622; --line: #29333d; --text: #f3f5f7; --muted: #87919e; }
.app-shell { grid-template-columns: 250px 340px minmax(440px,1fr) 340px; background: #08090b; }
.sidebar { padding: 27px 19px 16px; background: #121215; border-color: #2a2a2e; }
.brand-row { height: 42px; padding-inline: 10px; }.brand { font-size: 15px; }.brand-mark { width: 28px; height: 28px; }
.channel-switch { margin: 22px 5px 35px; height: 34px; }.channel-switch button { font-size: 11px; }
.nav p { margin: 0 11px 13px; color: #727885; font-size: 9px; }.nav-item { height: 38px; padding: 0 11px; border-radius: 8px; color: #b5bbc5; font-size: 12px; }.nav-item.active { background: #1d1d21; }.nav-item.active::before { left: -19px; height: 23px; }
.sidebar-bottom { padding-top: 12px; }.sidebar-preferences { display: grid; gap: 7px; }.timezone-row { position: relative; height: 34px; padding: 0 9px; display: flex; align-items: center; gap: 7px; color: #8c939e; background: #1a1a1e; border: 1px solid #2c2d32; border-radius: 8px; font-size: 10px; }.timezone-row select { width: 100%; min-width: 0; height: 100%; padding: 0 2px; color: inherit; background: transparent; border: 0; outline: 0; appearance: none; cursor: pointer; font-size: 10px; }.timezone-row select option { color: #e8edf3; background: #1a1a1e; }.timezone-row > svg:last-child { pointer-events: none; }.theme-toggle { width: 100%; height: 34px; padding: 0 9px; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 7px; color: #8c939e; background: #1a1a1e; border: 1px solid #2c2d32; border-radius: 8px; cursor: pointer; text-align: left; font-size: 10px; }.theme-toggle > i { position: relative; width: 30px; height: 17px; background: #2b2c31; border: 1px solid #3b3d43; border-radius: 10px; }.theme-toggle > i b { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; background: #8d949e; border-radius: 50%; transition: transform .18s ease,background .18s ease; }.theme-toggle[aria-pressed="true"] > i { background: #ccecff; border-color: #7dc8ed; }.theme-toggle[aria-pressed="true"] > i b { background: #299ed6; transform: translateX(13px); }.profile { min-height: 49px; margin-top: 9px; padding: 8px; background: #1a1a1e; border: 1px solid #2c2d32; border-radius: 9px; }.profile strong { font-size: 11px; }.profile small { font-size: 9px; }
.dashboard-workspace { display: none; grid-column: 2 / -1; min-width: 0; min-height: 0; overflow-y: auto; background: #08090b; }.overview-view .overview-workspace,.sender-view .sender-workspace { display: block; }.overview-view .inbox-panel,.overview-view .chat-workspace,.overview-view .details-panel,.overview-view .accounts-workspace,.overview-view .resolver-workspace,.overview-view .agents-workspace,.sender-view .inbox-panel,.sender-view .chat-workspace,.sender-view .details-panel,.sender-view .accounts-workspace,.sender-view .resolver-workspace,.sender-view .agents-workspace,.chats-view .accounts-workspace,.chats-view .resolver-workspace,.chats-view .agents-workspace,.accounts-view .overview-workspace,.accounts-view .sender-workspace,.accounts-view .resolver-workspace,.accounts-view .agents-workspace,.chats-view .overview-workspace,.chats-view .sender-workspace { display: none; }
.workspace-inner { width: min(1435px,calc(100% - 64px)); margin: 0 auto; padding: 28px 0 48px; }.dashboard-card { background: #141416; border: 1px solid #2b2b30; border-radius: 15px; }.dashboard-card h2,.dashboard-card h3,.dashboard-card p { margin: 0; }.dashboard-card h3 { font-size: 13px; }.dashboard-card p { margin-top: 7px; color: #8b929d; font-size: 10px; }
.welcome-row { min-height: 72px; display: flex; align-items: center; gap: 13px; }.welcome-avatar { width: 52px; height: 52px; display: grid; place-items: center; color: white; background: linear-gradient(145deg,#65e5c6,#078cc5); border-radius: 13px; box-shadow: 0 8px 22px rgba(26,176,184,.28); font-size: 16px; font-weight: 700; }.welcome-row h1 { margin: 0; color: #aeb8c5; font-size: 16px; font-weight: 400; }.welcome-row h1 strong { color: white; }.welcome-row p { margin: 6px 0 0; color: #71808e; font-size: 10px; }.live-pill,.queue-pill { margin-left: auto; padding: 7px 12px; color: #9fa7b2; background: #18191d; border: 1px solid #2b2d31; border-radius: 18px; font-size: 9px; }.live-pill i,.queue-pill i { width: 7px; height: 7px; margin-right: 5px; display: inline-block; background: #26cf73; border-radius: 50%; box-shadow: 0 0 8px rgba(38,207,115,.6); }.breadcrumb,.sender-breadcrumb { margin: 13px 0 28px; color: #8494a6; font-size: 11px; }.breadcrumb span,.sender-breadcrumb b { margin: 0 9px; color: #4e5760; }.breadcrumb strong,.sender-breadcrumb strong { color: white; }
.analytics-card { padding: 24px; }.analytics-card > header,.line-card > header,.conversations-card > header,.reach-card > header,.account-list-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }.analytics-card h2 { font-size: 21px; }.analytics-card header p { font-size: 11px; }.card-controls,.segmented { display: flex; gap: 8px; }.card-controls button,.segmented button,.text-link { height: 34px; padding: 0 13px; display: flex; align-items: center; gap: 7px; color: #d3d7dd; background: #1c1c20; border: 1px solid #303137; border-radius: 9px; font-size: 10px; cursor: pointer; }.analytics-metrics { margin-top: 22px; padding-top: 16px; display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid #28292d; }.analytics-metrics div { min-height: 68px; padding: 7px 16px; border-right: 1px solid #292a2e; }.analytics-metrics div:last-child { border: 0; }.analytics-metrics strong,.analytics-metrics span { display: block; }.analytics-metrics strong { font-size: 22px; }.analytics-metrics span { margin-top: 8px; color: #8f98a5; font-size: 9px; }
.overview-primary { margin-top: 34px; display: grid; grid-template-columns: minmax(0,2.2fr) minmax(280px,1fr); gap: 14px; }.line-card { min-height: 356px; padding: 21px; }.line-card h3 { font-size: 24px; }.line-card header p { font-size: 10px; }.segmented button { height: 31px; padding-inline: 12px; background: transparent; border-color: transparent; }.segmented button.active { background: #25262b; border-color: #393a40; }.legend { margin-top: 21px; display: flex; gap: 14px; color: #a7afba; font-size: 9px; }.legend span { display: flex; align-items: center; gap: 6px; }.legend i,.donut-legend i { width: 7px; height: 7px; display: inline-block; background: #4ea0ff; border-radius: 50%; }.legend i.cyan { background: #2ab8ef; }.chart-grid { position: relative; height: 220px; margin-top: 17px; }.chart-lines { position: absolute; inset: 0 0 23px; display: flex; flex-direction: column; justify-content: space-between; }.chart-lines i { border-top: 1px solid #282a2f; }.chart-lines::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; border-top: 2px solid #4da5ff; }.chart-axis { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #797f89; font-size: 8px; }
.ai-card-chart { min-height: 356px; padding: 22px; }.ai-card-chart h3 { display: flex; align-items: center; gap: 7px; }.ai-card-chart h3 svg { color: #21a8e8; }.donut { width: 170px; height: 170px; margin: 30px auto 22px; display: grid; place-items: center; background: conic-gradient(#ff9f0a 0 100%); border-radius: 50%; box-shadow: 0 0 28px rgba(24,157,217,.22); }.donut::before { content: ""; width: 128px; height: 128px; background: #141416; border-radius: 50%; }.donut span { position: absolute; text-align: center; }.donut strong,.donut small { display: block; }.donut strong { font-size: 23px; }.donut small { margin-top: 7px; color: #9da3ad; font-size: 8px; text-transform: uppercase; }.donut-legend { padding-top: 14px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #292a2e; text-align: center; }.donut-legend span { color: #97a1ad; font-size: 8px; text-transform: uppercase; }.donut-legend span:nth-child(3) i { background: #ff9f0a; }.donut-legend b { margin-top: 7px; display: block; color: white; font-size: 13px; }
.overview-secondary { margin-top: 14px; display: grid; grid-template-columns: 1fr 1.18fr; gap: 14px; }.line-card.compact,.conversations-card { min-height: 290px; }.line-card.compact h3 { display: flex; align-items: center; gap: 7px; font-size: 13px; }.line-card.compact .chart-grid { height: 155px; }.conversations-card { padding: 21px; }.text-link { height: auto; padding: 0; color: #2db6f4; background: transparent; border: 0; }.dashboard-search { width: 55%; height: 36px; margin-top: 19px; padding: 0 12px; display: flex; align-items: center; gap: 8px; color: #78808b; background: #1d1d21; border: 1px solid #303137; border-radius: 9px; font-size: 10px; }.conversation-table { margin-top: 11px; padding: 10px 5px; display: grid; grid-template-columns: 45px 1fr 1fr 1fr; color: #8a93a0; border-bottom: 1px solid #292a2e; font-size: 8px; text-transform: uppercase; }.dashboard-empty { padding: 28px 12px; color: #808996; font-size: 9px; text-align: center; }
.overview-tertiary { margin-top: 14px; display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }.reach-card { min-height: 430px; padding: 21px; }.world-map { position: relative; height: 340px; margin-top: 13px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at center,#1b2026 0,#101114 68%); border: 1px solid #27292e; border-radius: 13px; }.world-map::before,.world-map::after { content: ""; position: absolute; width: 75%; height: 46%; border: 1px solid #282d33; border-radius: 50%; transform: rotate(11deg); }.world-map::after { transform: rotate(-14deg); }.world-map span { z-index: 1; display: grid; place-items: center; color: #252c33; }.world-map small { margin-top: 12px; color: #89929d; font-size: 9px; }.overview-tertiary aside { display: grid; gap: 14px; }.small-stat { min-height: 130px; padding: 20px; }.small-stat h3 { display: flex; align-items: center; gap: 7px; }.small-stat h3 svg,.reach-card h3 svg,.overview-footer-grid h3 svg,.overview-bottom h3 svg { color: #25afea; }
.overview-footer-grid { margin-top: 14px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 14px; }.overview-footer-grid article { min-height: 175px; padding: 20px; }.funnel-list { margin-top: 13px; }.funnel-list span { margin: 6px 0; display: flex; align-items: center; justify-content: flex-end; gap: 15px; color: #9aa3ae; font-size: 9px; }.funnel-list b { width: 105px; padding: 4px 7px; color: white; background: #1d1e22; border: 1px solid #303137; border-radius: 5px; text-align: right; }.small-stat progress { width: 100%; margin: 16px 0 10px; }.small-stat > strong { font-size: 17px; }.small-stat > strong small { color: #78818c; font-size: 9px; }.overview-bottom { margin-top: 14px; display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }.overview-bottom > article { min-height: 110px; padding: 19px; }.overview-account { margin-top: 10px; padding-top: 10px; display: flex; align-items: center; gap: 9px; border-top: 1px solid #292a2e; }.mini-avatar { width: 27px; height: 27px; display: grid; place-items: center; background: #24455a; border-radius: 50%; font-size: 8px; }.overview-account strong,.overview-account small { display: block; }.overview-account strong { font-size: 9px; }.overview-account small { margin-top: 3px; color: #7e8792; font-size: 8px; }.status-dot { width: 7px; height: 7px; margin-left: auto; border-radius: 50%; }.status-dot.online { background: #23cf73; }.status-dot.offline { background: #59616c; }

/* Sender */
.sender-inner { padding-top: 35px; }.sender-breadcrumb { display: flex; align-items: center; }.sender-toolbar { min-height: 70px; padding: 15px 18px; display: flex; align-items: center; gap: 22px; }.sender-toolbar > div:first-child { display: flex; align-items: baseline; gap: 12px; }.sender-toolbar h1 { margin: 0; font-size: 18px; }.sender-toolbar p { margin: 0; }.sender-channel { margin-left: 6px; }.sender-stats { margin-left: auto; display: flex; align-items: center; gap: 15px; color: #949ca7; font-size: 9px; }.sender-stats span { white-space: nowrap; }.sender-stats i { width: 6px; height: 6px; display: inline-block; background: #818995; border-radius: 50%; }.sender-stats i.red { background: #ef4c57; }.sender-stats button { height: 36px; padding: 0 13px; display: flex; align-items: center; gap: 7px; color: white; background: #1d1d21; border: 1px solid #313238; border-radius: 9px; cursor: pointer; font-size: 10px; }.sender-layout { margin-top: 40px; display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 14px; }.campaign-sidebar { min-height: 500px; padding: 21px; }.campaign-sidebar > header { padding-bottom: 12px; display: flex; justify-content: space-between; border-bottom: 1px solid #292a2e; font-size: 10px; text-transform: uppercase; }.campaign-sidebar > header span { color: #8b929d; }.campaign-sidebar > label { height: 38px; margin-top: 12px; padding: 0 11px; display: flex; align-items: center; gap: 8px; color: #737b86; background: #1c1c20; border: 1px solid #303137; border-radius: 8px; }.campaign-sidebar input { width: 100%; color: white; background: transparent; border: 0; outline: 0; font-size: 10px; }.campaign-sidebar kbd { color: #838a94; background: #292a2f; border: 1px solid #38393f; border-radius: 4px; font-size: 8px; }.campaign-filters { margin: 18px 0; display: flex; gap: 6px; }.campaign-filters button { height: 28px; padding: 0 12px; color: #9ba2ac; background: transparent; border: 1px solid #2e3035; border-radius: 15px; font-size: 9px; }.campaign-filters button.active { color: #42b9ef; background: #17364a; border-color: #22678d; }.primary-action { min-height: 36px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: white; background: #31a8e8; border: 0; border-radius: 9px; cursor: pointer; font-size: 10px; }.campaign-sidebar > .primary-action { width: 100%; }.campaign-empty { margin-top: 22px; padding: 30px 20px; color: #8d949e; background: #1b1b1e; border: 1px dashed #33343a; border-radius: 9px; font-size: 9px; line-height: 1.5; text-align: center; }.campaign-empty strong { color: white; }.campaign-sidebar footer { margin-top: 30px; padding-top: 16px; display: grid; gap: 16px; border-top: 1px solid #292a2e; }.campaign-sidebar footer span { display: flex; align-items: center; gap: 8px; color: #9ba2ac; font-size: 9px; }.campaign-sidebar footer span kbd { margin-left: auto; }.campaign-sidebar footer .disabled { color: #4f545b; }.campaign-stage { min-height: 350px; display: grid; place-items: center; }.campaign-zero { display: grid; place-items: center; color: #80909d; text-align: center; }.campaign-zero > span { width: 58px; height: 58px; display: grid; place-items: center; color: #63717d; background: #1b1c20; border-radius: 50%; }.campaign-zero h2 { margin: 15px 0 0; color: white; font-size: 14px; }.campaign-zero p { margin: 9px 0 20px; }