:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ecf4ff;
  background: #08121f;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  min-width: 300px;
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(circle at 85% 2%, #153b52 0, transparent 31%),
              radial-gradient(circle at 3% 63%, #172a54 0, transparent 38%),
              #08121f;
}

.layout {
  width: min(100%, 1120px);
  min-height: 100vh;
  margin: auto;
  padding: max(26px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}

.topbar, .brand, .welcome, .admin-chip, .section-heading, .queue,
.provider-top { display: flex; align-items: center; justify-content: space-between; }
.brand { justify-content: flex-start; gap: 11px; }
.brand-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 11px;
  color: #06242b; background: #6be1cc;
  font-weight: 900; font-size: 21px;
  box-shadow: 0 0 26px #6be1cc55;
}
.brand-name { font-size: 15px; font-weight: 800; letter-spacing: .13em; }
.brand-name span { color: #8ca3b9; font-size: 10px; letter-spacing: .18em; }

.refresh-button {
  border: 1px solid #365066; border-radius: 11px;
  padding: 9px 13px; color: #d9eeff; background: #1b3041;
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.refresh-button:hover { background: #254354; }
.refresh-button:disabled { opacity: .55; cursor: wait; }
.refresh-button:focus-visible, a:focus-visible { outline: 2px solid #6be1cc; outline-offset: 3px; }

.panel {
  border: 1px solid #2b465b;
  border-radius: 21px;
  background: linear-gradient(145deg, #172b3c 0%, #101d2e 75%);
  box-shadow: 0 16px 48px #02081133;
}
.gate { width: min(100%, 560px); margin: auto; padding: 34px 28px; }
.gate h1 { margin: 21px 0 9px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #81dfcb; font-size: 11px; font-weight: 800; letter-spacing: .19em; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #6be1cc; box-shadow: 0 0 12px #6be1cc; }
h1 { font-size: clamp(30px, 6vw, 42px); line-height: 1.12; letter-spacing: -.045em; }
.muted { color: #9fb2c6; font-size: 15px; line-height: 1.55; }
.denied .dot { background: #eead79; box-shadow: 0 0 12px #eead79; }
.denied .eyebrow { color: #eead79; }

.section-nav { display: flex; gap: 6px; margin: 0 0 23px; padding: 5px; width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid #2d4659; border-radius: 13px; background: #122537; }
.nav-button { flex-shrink: 0; border: 0; border-radius: 9px; padding: 10px 17px; color: #8faabe; background: transparent; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.nav-button:hover { color: #e4f6ff; }
.nav-button.active { color: #eafffa; background: #2c635b; }
.nav-button:focus-visible, .user-row:focus-visible, .request-row:focus-visible, .pagination button:focus-visible, .back-button:focus-visible, .users-search button:focus-visible, .users-search input:focus-visible, .requests-filters button:focus-visible, .requests-filters select:focus-visible, .requests-filters input:focus-visible { outline: 2px solid #6be1cc; outline-offset: 2px; }

.welcome { gap: 20px; margin: 48px 0 27px; }
.welcome h1 { margin: 13px 0 7px; }
.welcome .muted { margin: 0; }
.admin-chip { justify-content: flex-start; gap: 11px; padding: 10px 14px; border: 1px solid #344f61; border-radius: 14px; background: #182c3c; }
.chip-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #397268; color: #d4fff6; font-weight: 800; }
.admin-chip strong, .admin-chip small { display: block; white-space: nowrap; }
.admin-chip strong { font-size: 13px; }
.admin-chip small { margin-top: 3px; color: #a8bbcb; font-size: 11px; }
.load-error { margin: 0 0 17px; padding: 13px 16px; border: 1px solid #9c614c; border-radius: 12px; color: #ffd3c1; background: #452c2c; font-size: 13px; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.metric { min-height: 158px; padding: 18px 19px; }
.metric-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; font-size: 17px; font-weight: 800; }
.metric-icon.teal { color: #91e5d7; background: #23665e; }
.metric-icon.blue { color: #9ed5ff; background: #2c5275; }
.metric-icon.green { color: #a6ecc0; background: #265d48; }
.metric-icon.amber { color: #ffda9a; background: #71502c; }
.metric p { margin: 14px 0 4px; color: #aabed0; font-size: 12px; font-weight: 650; }
.metric strong { display: block; font-size: 30px; line-height: 1.2; letter-spacing: -.035em; }
.metric small { display: block; margin-top: 5px; color: #82dcc8; font-size: 11px; line-height: 1.4; }

.queue { gap: 14px; margin-top: 13px; padding: 16px 20px; }
.queue div { display: flex; align-items: center; gap: 10px; }
.queue strong { font-size: 13px; }
.queue p { margin: 0; color: #adc3d4; font-size: 13px; }
.queue p span:not(.separator) { color: #e9f6ff; font-weight: 750; }
.queue-light { width: 9px; height: 9px; border-radius: 50%; background: #74dfc9; box-shadow: 0 0 12px #74dfc9aa; }
.separator { padding: 0 7px; color: #66869b; }

.insights { display: grid; grid-template-columns: 1.35fr 1fr; gap: 13px; margin-top: 13px; }
.insight-panel { min-height: 280px; padding: 23px 24px; }
.section-heading h2 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.section-heading p { margin: 5px 0 0; color: #91a9bc; font-size: 12px; }
.daily-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; height: 181px; margin-top: 20px; }
.chart-column { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.chart-column strong { color: #d5e9f5; font-size: 11px; font-weight: 650; }
.chart-track { display: flex; align-items: flex-end; width: min(100%, 31px); height: 130px; margin: 7px 0 8px; border-radius: 7px; background: #22384a; overflow: hidden; }
.chart-bar { width: 100%; border-radius: 7px 7px 0 0; background: linear-gradient(#80edd6, #36a995); }
.chart-bar[data-level="0"] { height: 3px; background: #607788; }
.chart-bar[data-level="1"] { height: 10%; }
.chart-bar[data-level="2"] { height: 20%; }
.chart-bar[data-level="3"] { height: 30%; }
.chart-bar[data-level="4"] { height: 40%; }
.chart-bar[data-level="5"] { height: 50%; }
.chart-bar[data-level="6"] { height: 60%; }
.chart-bar[data-level="7"] { height: 70%; }
.chart-bar[data-level="8"] { height: 80%; }
.chart-bar[data-level="9"] { height: 90%; }
.chart-bar[data-level="10"] { height: 100%; }
.chart-column small { color: #8eaabd; font-size: 11px; }
.providers { display: flex; flex-direction: column; gap: 18px; margin-top: 27px; }
.provider-top { gap: 9px; margin-bottom: 8px; font-size: 12px; }
.provider-top span { color: #a2bacb; }
.provider-row progress { display: block; width: 100%; height: 8px; border: 0; border-radius: 7px; overflow: hidden; accent-color: #65d6c1; }
.provider-row progress::-webkit-progress-bar { border-radius: 7px; background: #263e50; }
.provider-row progress::-webkit-progress-value { border-radius: 7px; background: linear-gradient(90deg, #3da895, #83ead8); }
.provider-row progress::-moz-progress-bar { border-radius: 7px; background: #65d6c1; }
.empty { color: #90aabd; font-size: 13px; }

.activity-panel { margin-top: 13px; padding: 23px 24px 8px; }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 20px; text-align: left; }
th { padding: 0 11px 13px 0; color: #7895aa; font-size: 10px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
td { overflow: hidden; padding: 14px 11px 14px 0; border-top: 1px solid #2b4153; color: #c9dce9; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
th:nth-child(1) { width: 13%; }
th:nth-child(2) { width: 25%; }
th:nth-child(3) { width: 18%; }
th:nth-child(4) { width: 18%; }
th:nth-child(5) { width: 26%; }
.user-cell strong, .user-cell small { display: block; overflow: hidden; text-overflow: ellipsis; }
.user-cell strong { color: #e0f0fa; }
.user-cell small { margin-top: 3px; color: #829eb2; font-size: 10px; }
.status { display: inline-block; padding: 5px 8px; border-radius: 7px; font-size: 11px; font-weight: 700; }
.status-sent { color: #a7ebc5; background: #224a3d; }
.status-pending { color: #ebd7a1; background: #51482e; }
.status-failed { color: #ffb8ae; background: #57343a; }
a { color: #80e4d1; text-decoration: none; }
a:hover { text-decoration: underline; }
.updated-at { margin: 16px 0 3px; color: #6f8a9f; text-align: right; font-size: 11px; }

.users-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 2px 0 17px; }
.users-heading h2 { margin: 0 0 5px; font-size: 23px; letter-spacing: -.02em; }
.users-heading p { margin: 0; color: #91a9bc; font-size: 13px; }
.users-search { display: flex; gap: 7px; }
.users-search input { width: min(38vw, 270px); min-width: 150px; border: 1px solid #365066; border-radius: 10px; padding: 11px 12px; color: #e9f6ff; background: #14293a; font: inherit; font-size: 13px; }
.users-search input::placeholder { color: #7895aa; }
.users-search button, .pagination button, .back-button { border: 1px solid #365066; border-radius: 10px; padding: 10px 14px; color: #d7f8f0; background: #20453f; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.users-search button:hover, .pagination button:hover:not(:disabled), .back-button:hover { background: #2c635b; }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.users-panel, .user-history-panel { overflow: hidden; padding: 22px 24px 12px; }
.list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; }
.list-heading h3 { margin: 0; font-size: 16px; }
.list-heading span { color: #91a9bc; font-size: 12px; }
.users-list, .user-history { border-top: 1px solid #2b4153; }
.list-empty { margin: 22px 0; }
.user-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(120px, 1fr) 16px; align-items: center; gap: 12px; width: 100%; border: 0; border-bottom: 1px solid #2b4153; padding: 14px 3px; text-align: left; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.user-row:hover { background: #20394b66; }
.list-avatar { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; color: #b8f4e8; background: #2a665c; font-size: 16px; font-weight: 800; }
.list-identity, .list-stats { display: block; min-width: 0; }
.list-identity strong, .list-identity small, .list-stats strong, .list-stats small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-identity strong, .list-stats strong { font-size: 13px; }
.list-identity small, .list-stats small { margin-top: 4px; color: #90aabd; font-size: 11px; }
.list-stats { text-align: right; }
.chevron { color: #80e4d1; font-size: 23px; text-align: right; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 15px; }
.pagination span { color: #9fb7c9; font-size: 12px; }
.back-button { margin: 0 0 12px; background: #193748; }
.user-profile { padding: 23px 24px; }
.profile-head { display: flex; align-items: center; gap: 14px; }
.profile-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: #2c635b; font-size: 23px; }
.profile-head h3 { margin: 0 0 3px; font-size: 20px; overflow-wrap: anywhere; }
.profile-head p { margin: 0; color: #91a9bc; font-size: 12px; }
.profile-message-button { margin-top: 16px; border: 1px solid #3b7468; border-radius: 10px; padding: 10px 13px; color: #c5ffef; background: #26594f; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.profile-message-button:hover:not(:disabled) { background: #327667; }
.profile-message-button:disabled { opacity: .45; cursor: not-allowed; }
.profile-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #2b4153; }
.profile-facts small, .profile-facts strong { display: block; }
.profile-facts small { min-height: 29px; color: #91a9bc; font-size: 11px; }
.profile-facts strong { margin-top: 5px; font-size: 14px; overflow-wrap: anywhere; }
.user-history-panel { margin-top: 13px; }
.history-row { padding: 15px 0; border-bottom: 1px solid #2b4153; }
.history-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.history-top strong { font-size: 13px; }
.history-meta { margin: 7px 0; color: #92aabd; font-size: 11px; }
.history-source { color: #91a9bc; font-size: 12px; overflow-wrap: anywhere; }
.history-error { margin: 10px 0 0; padding: 9px 11px; border-radius: 9px; color: #ffc1b7; background: #4d323a; font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.history-detail { margin-top: 10px; border: 0; padding: 0; color: #80e4d1; background: transparent; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.history-detail:hover { text-decoration: underline; }
.history-detail:focus-visible { outline: 2px solid #6be1cc; outline-offset: 3px; }
.requests-filters { display: grid; grid-template-columns: minmax(125px, 1fr) minmax(145px, 1fr) minmax(170px, 1.4fr) auto; align-items: end; gap: 10px; margin: 0 0 16px; }
.requests-filters label { display: block; color: #91a9bc; font-size: 11px; font-weight: 700; }
.requests-filters select, .requests-filters input { display: block; width: 100%; height: 40px; margin-top: 6px; border: 1px solid #365066; border-radius: 10px; padding: 0 11px; color: #e9f6ff; background: #14293a; font: inherit; font-size: 13px; }
.requests-filters input::placeholder { color: #7895aa; }
.requests-filters button { height: 40px; border: 1px solid #365066; border-radius: 10px; padding: 0 15px; color: #d7f8f0; background: #20453f; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.requests-filters button:hover { background: #2c635b; }
.requests-list { border-top: 1px solid #2b4153; }
.request-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 17px; align-items: center; gap: 15px; width: 100%; border: 0; border-bottom: 1px solid #2b4153; padding: 15px 3px; text-align: left; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.request-row:hover { background: #20394b66; }
.request-row-main, .request-row-info { display: block; min-width: 0; }
.request-row-main strong, .request-row-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.request-row-main strong { font-size: 13px; }
.request-row-main small { margin-top: 4px; color: #90aabd; font-size: 11px; }
.request-row-info { display: flex; align-items: center; gap: 11px; color: #9cb4c5; font-size: 12px; white-space: nowrap; }
.request-profile { padding: 24px; }
.request-detail-head { display: flex; align-items: start; justify-content: space-between; gap: 15px; }
.request-detail-head h3 { margin: 10px 0 5px; font-size: 22px; }
.request-detail-head p { margin: 0; color: #91a9bc; font-size: 12px; }
.request-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 24px; padding: 20px 0; border-top: 1px solid #2b4153; border-bottom: 1px solid #2b4153; }
.request-facts small, .request-facts strong, .request-url small, .diagnostic-box small { display: block; }
.request-facts small, .request-url small, .diagnostic-box small { color: #91a9bc; font-size: 11px; }
.request-facts strong { margin-top: 6px; font-size: 13px; overflow-wrap: anywhere; }
.request-url { padding: 20px 0 6px; }
.request-url div { margin-top: 8px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.diagnostic-box { margin-top: 16px; border: 1px solid #344f61; border-radius: 12px; padding: 14px 15px; background: #1a3040; }
.diagnostic-box p { margin: 7px 0 0; color: #d2e5f0; font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.diagnostic-box .job-error { color: #ffc1b7; }
#request-error-box { border-color: #87515a; background: #3b2b37; }
#request-error-box p { color: #ffc1b7; }
.system-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.system-card { min-height: 140px; padding: 21px 19px; }
.system-label { display: block; color: #9fb8ca; font-size: 12px; font-weight: 700; }
.system-card strong { display: block; margin: 16px 0 5px; font-size: 20px; }
.system-card small { color: #89a4b8; font-size: 11px; line-height: 1.4; }
.health-ok { color: #85e4c9; }
.health-warn { color: #f0d49b; }
.health-error { color: #ffaba5; }
.system-insights { grid-template-columns: 1fr 1fr; }
.system-queue { display: flex; gap: 48px; margin-top: 25px; }
.system-queue strong { display: block; font-size: 34px; line-height: 1.2; }
.system-queue small { color: #98b1c2; font-size: 12px; }
.system-note, .system-explanation { color: #8fa9bc; font-size: 12px; line-height: 1.5; }
.system-note { margin: 24px 0 0; }
.system-explanation { margin: 16px 2px 0; }
.system-limits { display: grid; gap: 12px; margin: 23px 0 0; }
.system-limits div { display: flex; justify-content: space-between; gap: 15px; }
.system-limits dt { color: #99b2c4; font-size: 12px; }
.system-limits dd { margin: 0; color: #e2f3fb; font-size: 12px; font-weight: 700; text-align: right; }
footer { margin-top: auto; padding-top: 32px; color: #597389; text-align: center; font-size: 10px; letter-spacing: .12em; }
footer span { padding: 0 6px; }

.broadcast-heading { align-items: center; }
.audience-pill { flex: 0 0 auto; padding: 9px 12px; border: 1px solid #3b665f; border-radius: 999px; color: #a8efdd; background: #1d433e; font-size: 12px; font-weight: 700; }
.broadcast-audience-card { margin-bottom: 14px; padding: 24px 25px; }
.audience-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.audience-option { display: flex; align-items: center; gap: 13px; min-width: 0; border: 1px solid #375367; border-radius: 13px; padding: 15px 16px; background: #152b3a; cursor: pointer; }
.audience-option:hover { border-color: #68b9a9; }
.audience-option.is-active { border-color: #71dfc6; background: linear-gradient(115deg, #23584f, #193c43); box-shadow: 0 0 0 2px #53bfa921; }
.audience-option input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: #79e5cc; }
.audience-option span, .audience-option strong, .audience-option small { display: block; min-width: 0; }
.audience-option strong { color: #edf9f5; font-size: 13px; }
.audience-option small { margin-top: 5px; color: #a1b9c5; font-size: 11px; }
.audience-picker { margin-top: 21px; padding-top: 19px; border-top: 1px solid #334d5e; }
.audience-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.audience-picker-head strong { font-size: 13px; }
.audience-picker-head small { color: #89a5b7; font-size: 11px; }
.audience-selected { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-height: 47px; margin-bottom: 15px; }
.audience-chip { max-width: 100%; border: 1px solid #4b9786; border-radius: 999px; padding: 7px 11px; color: #d5fff4; background: #265b50; font: inherit; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.audience-chip:hover { background: #347466; }
.audience-search { display: flex; gap: 8px; }
.audience-search input { flex: 1; min-width: 0; border: 1px solid #3b5c70; border-radius: 10px; padding: 10px 12px; color: #eff9ff; background: #0d2131; font: inherit; font-size: 12px; }
.audience-search input::placeholder { color: #7895aa; }
.audience-search button, .audience-more { border: 1px solid #3a645e; border-radius: 10px; padding: 10px 13px; color: #d6fff1; background: #24564b; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.audience-search button:hover, .audience-more:hover { background: #307064; }
.audience-search-error { color: #ffb8ae; font-size: 12px; }
.audience-results { max-height: 296px; margin-top: 12px; overflow-y: auto; border-top: 1px solid #314c5c; }
.audience-results > .empty { padding: 10px 0; }
.audience-result { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; border-bottom: 1px solid #314c5c; padding: 12px 4px; color: inherit; background: transparent; font: inherit; text-align: left; cursor: pointer; }
.audience-result:hover, .audience-result.is-selected { background: #24473f77; }
.audience-result-avatar { display: grid; flex: 0 0 auto; place-items: center; width: 35px; height: 35px; border-radius: 11px; color: #c8ffef; background: #276154; font-size: 13px; font-weight: 800; }
.audience-result-identity { display: block; flex: 1; min-width: 0; }
.audience-result-identity strong, .audience-result-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audience-result-identity strong { font-size: 12px; }
.audience-result-identity small { margin-top: 4px; color: #91adbd; font-size: 10px; }
.audience-result-mark { display: grid; flex: 0 0 auto; place-items: center; width: 25px; height: 25px; border: 1px solid #5b9d8e; border-radius: 8px; color: #a3f5de; font-size: 15px; }
.audience-more { margin-top: 11px; }
.audience-more:disabled { opacity: .5; cursor: wait; }
.broadcast-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 14px; }
.broadcast-composer, .broadcast-preview-card { min-width: 0; padding: 25px; }
.broadcast-card-head, .broadcast-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.broadcast-step { display: block; color: #71d6c4; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
.broadcast-card-head h3, .broadcast-launch-card h3, .broadcast-history-head h3 { margin: 8px 0 0; font-size: 21px; letter-spacing: -.025em; }
.broadcast-icon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; color: #bdf6e9; background: #2a665c; font-size: 23px; }
.broadcast-hint { min-height: 35px; margin: 13px 0 19px; color: #95adbf; font-size: 12px; line-height: 1.5; }
.format-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 9px; }
.format-toolbar button, .broadcast-link-row button { min-width: 38px; border: 1px solid #385669; border-radius: 9px; padding: 8px 10px; color: #d8eaf3; background: #1c3345; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.format-toolbar button:hover, .broadcast-link-row button:hover { border-color: #6dd7c2; background: #285049; }
.broadcast-link-row { display: flex; gap: 7px; margin-bottom: 10px; }
.broadcast-link-row input { min-width: 0; flex: 1; border: 1px solid #385669; border-radius: 9px; padding: 9px 11px; color: #ecf4ff; background: #102435; font: inherit; font-size: 12px; }
.broadcast-link-row button { white-space: nowrap; }
#broadcast-body { display: block; width: 100%; min-height: 225px; resize: vertical; border: 1px solid #3b5c70; border-radius: 12px; padding: 15px; color: #eff9ff; background: #0d2131; font: inherit; font-size: 14px; line-height: 1.55; outline: none; }
#broadcast-body:focus, .broadcast-link-row input:focus { border-color: #70dcc7; box-shadow: 0 0 0 3px #4cbaaa25; outline: none; }
#broadcast-body::placeholder, .broadcast-link-row input::placeholder { color: #68869a; }
.broadcast-editor-foot { display: flex; justify-content: space-between; gap: 9px; margin-top: 9px; color: #849fb3; font-size: 11px; }
.broadcast-editor-foot .over-limit { color: #ffaea8; }
.telegram-mock { overflow: hidden; border: 1px solid #355267; border-radius: 16px; background: #0c1c2b; }
.telegram-mock-header { display: flex; align-items: center; gap: 10px; padding: 12px 15px; border-bottom: 1px solid #294456; background: #172c3d; }
.telegram-mock-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 50%; color: #07362e; background: #79dfc6; font-weight: 900; }
.telegram-mock-header strong, .telegram-mock-header small { display: block; }
.telegram-mock-header strong { font-size: 12px; }
.telegram-mock-header small { margin-top: 2px; color: #92adbd; font-size: 10px; }
.telegram-mock-chat { display: flex; align-items: flex-start; min-height: 274px; max-height: 380px; overflow: auto; padding: 20px 16px; background: radial-gradient(circle at 85% 15%, #16364a 0, transparent 40%), #102234; }
.telegram-bubble { width: fit-content; max-width: 90%; border-radius: 4px 14px 14px 14px; padding: 11px 14px; color: #e9f3f9; background: #223b4d; box-shadow: 0 7px 20px #01091555; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.telegram-bubble.is-placeholder { color: #8da7ba; }
.telegram-bubble a { color: #88d9ff; text-decoration: underline; }
.telegram-bubble pre { white-space: pre-wrap; }
.mock-spoiler { border-radius: 3px; color: transparent; background: #a0b4c1; }
.broadcast-secondary, .broadcast-primary { border: 0; border-radius: 11px; padding: 12px 16px; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.broadcast-secondary { width: 100%; margin-top: 17px; color: #c7fff1; background: #27584f; }
.broadcast-secondary:hover { background: #326c60; }
.broadcast-state { min-height: 16px; margin: 11px 0 0; color: #91b4ad; font-size: 11px; text-align: center; }
.broadcast-launch-card { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 14px; padding: 23px 25px; background: linear-gradient(115deg, #173a3b, #122738 75%); }
.broadcast-launch-card h3 { font-size: 18px; }
.broadcast-launch-card p { margin: 8px 0 0; color: #a5bfc4; font-size: 12px; line-height: 1.5; }
.broadcast-primary { flex: 0 0 auto; color: #0c2b28; background: #76e7cc; box-shadow: 0 7px 22px #53d6b63d; }
.broadcast-primary:hover:not(:disabled) { background: #a0f2dd; }
.broadcast-primary:disabled, .broadcast-secondary:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.broadcast-history-card { margin-top: 14px; padding: 24px 25px; }
.broadcast-history-head h3 { margin-top: 0; font-size: 17px; }
.broadcast-history-head p { margin: 5px 0 0; color: #91a9bc; font-size: 12px; }
.broadcast-history-icon { color: #70d9c7; font-size: 24px; }
.broadcast-history { margin-top: 17px; }
.broadcast-row { padding: 17px 0; border-top: 1px solid #2b4153; }
.broadcast-row-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.broadcast-row-top strong { font-size: 12px; }
.broadcast-badge { padding: 5px 9px; border-radius: 7px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.broadcast-queued, .broadcast-running { color: #ffdc9e; background: #55452b; }
.broadcast-completed { color: #a7ebc5; background: #224a3d; }
.broadcast-cancelled { color: #bac6d3; background: #374453; }
.broadcast-row-text { overflow: hidden; margin: 9px 0 13px; color: #b4c9d7; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.broadcast-row progress { display: block; width: 100%; height: 7px; border: 0; border-radius: 9px; overflow: hidden; accent-color: #64d8be; }
.broadcast-row progress::-webkit-progress-bar { background: #2a4051; }
.broadcast-row progress::-webkit-progress-value { background: #64d8be; }
.broadcast-row-meta { margin-top: 9px; color: #97b4c4; font-size: 11px; }
.broadcast-stop { margin-top: 10px; border: 0; padding: 0; color: #ffa9a2; background: none; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.broadcast-stop:hover { text-decoration: underline; }
.format-toolbar button:focus-visible, .broadcast-link-row button:focus-visible, .broadcast-secondary:focus-visible, .broadcast-primary:focus-visible, .broadcast-stop:focus-visible, .profile-message-button:focus-visible, .audience-chip:focus-visible, .audience-result:focus-visible, .audience-search input:focus-visible, .audience-search button:focus-visible, .audience-more:focus-visible { outline: 2px solid #6be1cc; outline-offset: 2px; }

@media (max-width: 760px) {
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insights { grid-template-columns: 1fr; }
  .welcome { align-items: flex-start; }
  .admin-chip { margin-top: 6px; }
  .profile-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .requests-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .broadcast-grid { grid-template-columns: 1fr; }
  .audience-options { grid-template-columns: 1fr; }
  .telegram-mock-chat { min-height: 190px; }
}

@media (max-width: 560px) {
  .layout { padding-left: 15px; padding-right: 15px; }
  .brand-name span { display: none; }
  .refresh-button span { display: none; }
  .refresh-button { font-size: 19px; line-height: 17px; }
  .welcome { display: block; margin-top: 39px; }
  .welcome h1 { font-size: 34px; }
  .admin-chip { width: fit-content; margin-top: 17px; }
  .section-nav { width: 100%; }
  .nav-button { flex: 0 0 auto; padding: 10px 11px; font-size: 12px; }
  .users-heading { display: block; }
  .users-search { margin-top: 15px; }
  .users-search input { min-width: 0; width: 100%; }
  .users-panel, .user-history-panel, .user-profile { padding-left: 17px; padding-right: 17px; }
  .user-row { grid-template-columns: 39px minmax(0, 1fr) 16px; gap: 9px; }
  .list-stats { grid-column: 2; text-align: left; }
  .chevron { grid-column: 3; grid-row: 1 / 3; }
  .requests-filters { gap: 9px; }
  .requests-filters label:nth-child(3) { grid-column: 1 / -1; }
  .requests-filters button { grid-column: 1 / -1; }
  .request-row { grid-template-columns: minmax(0, 1fr) 17px; gap: 8px; }
  .request-row-info { grid-column: 1; grid-row: 2; }
  .request-row .chevron { grid-column: 2; grid-row: 1 / 3; }
  .request-profile { padding: 19px 17px; }
  .system-card { min-height: 125px; padding: 17px 15px; }
  .system-card strong { font-size: 17px; }
  .system-insights { grid-template-columns: 1fr; }
  .broadcast-heading { display: flex; flex-wrap: wrap; align-items: flex-start; }
  .broadcast-audience-card, .broadcast-composer, .broadcast-preview-card, .broadcast-launch-card, .broadcast-history-card { padding: 19px 17px; }
  .broadcast-launch-card { align-items: stretch; flex-direction: column; gap: 17px; }
  .broadcast-primary { width: 100%; }
  .metrics { gap: 9px; }
  .metric { min-height: 150px; padding: 16px 15px; }
  .metric strong { font-size: 27px; }
  .queue { align-items: flex-start; flex-direction: column; gap: 8px; }
  .insight-panel, .activity-panel { padding: 20px 17px; }
  .activity-panel { padding-bottom: 8px; }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 13px; padding: 15px 0; border-top: 1px solid #2b4153; }
  td { min-width: 0; padding: 0; border: 0; }
  td::before { display: block; margin-bottom: 4px; color: #7895aa; content: attr(data-label); font-size: 10px; font-weight: 700; text-transform: uppercase; }
  td:last-child { grid-column: 1 / -1; }
  td.empty { grid-column: 1 / -1; }
  td.empty::before { display: none; }
}