/* One appearance layer. Feature layout and data/permission rules stay in app.js. */
:root {
  --ui-bg:#f1f5fa; --ui-surface:#fff; --ui-soft:#f6f8fc; --ui-hover:#edf4fd;
  --ui-text:#19283e; --ui-muted:#596b82; --ui-border:#dce5ef;
  --ui-accent:#245edb; --ui-accent-soft:#eaf1ff; --ui-accent-text:#fff;
  --ui-nav:#14243b; --ui-nav-text:#bdcce0; --ui-nav-active:#203d62;
  --ui-nav-border:#2d3e56; --ui-nav-muted:#9eb3ce;
  --ui-success-bg:#e7f5ee; --ui-success:#166344; --ui-warning-bg:#fff3dc; --ui-warning:#8c5807;
  --ui-danger-bg:#fff0ef; --ui-danger:#ab302f; --ui-danger-border:#efc1bd;
  --ui-shadow:0 3px 14px rgb(33 56 91 / 4%); --ui-sidebar:248px;
  --ui-text-size:15px;
  --panel-text:var(--ui-text); --panel-muted:var(--ui-muted); --panel-border:var(--ui-border);
  --panel-bg:var(--ui-bg); --panel-surface:var(--ui-surface);
  color-scheme:light;
}
:root[data-panel-theme="linen"] {
  --ui-bg:#f5f6f8; --ui-soft:#fafbfc; --ui-hover:#f0f3f6; --ui-text:#253342;
  --ui-muted:#596b7a; --ui-border:#e0e5eb; --ui-accent:#2c6570; --ui-accent-soft:#e9f3f4;
  --ui-nav:#fff; --ui-nav-text:#526377; --ui-nav-active:#edf4f5; --ui-nav-border:#e0e5eb;
  --ui-nav-muted:#596b7a;
}
:root[data-panel-theme="midnight"] {
  --ui-bg:#101827; --ui-surface:#192537; --ui-soft:#202e43; --ui-hover:#263954;
  --ui-text:#edf3ff; --ui-muted:#adbdd2; --ui-border:#34455e;
  --ui-accent:#8ab6ff; --ui-accent-soft:#273f65; --ui-accent-text:#11243c;
  --ui-nav:#121c2d; --ui-nav-text:#b3c3da; --ui-nav-active:#263c5a;
  --ui-nav-border:#34455e; --ui-nav-muted:#9db2ce;
  --ui-success-bg:#1b4036; --ui-success:#96e1b9; --ui-warning-bg:#43351e; --ui-warning:#f7d48d;
  --ui-danger-bg:#442b35; --ui-danger:#ffb2ae; --ui-danger-border:#6b404a;
  --ui-shadow:0 3px 14px rgb(0 0 0 / 10%);
  color-scheme:dark;
}
body,.app { background:var(--ui-bg); color:var(--ui-text); }
body { -webkit-text-size-adjust:100%; }
.app { font-family:"Segoe UI",Tahoma,Arial,sans-serif; font-size:var(--ui-text-size); line-height:1.6; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
:where(button,a,input,select,textarea):focus-visible { outline:3px solid var(--ui-accent); outline-offset:3px; }
[hidden] { display:none !important; }
.app aside {
  inset:0; inset-inline-start:0; inset-inline-end:auto; width:var(--ui-sidebar);
  height:100vh; height:100dvh; padding:0; background:var(--ui-nav);
  color:var(--ui-nav-text); border-inline-end:1px solid var(--ui-nav-border);
  box-shadow:none; z-index:40; display:flex; flex-direction:column;
}
.app .logo { height:auto; min-height:76px; flex-shrink:0; padding:22px 22px 12px; background:none; box-shadow:none; justify-content:space-between; }
.app .logo .brand { color:var(--ui-nav-text); font-size:22px; font-weight:800; letter-spacing:-.4px; }
.app .logo .brand-mark { width:35px; height:35px; flex-basis:35px; }
.sidebar-role { display:block; margin:0 22px 17px; padding:0 0 16px; border-bottom:1px solid var(--ui-nav-border); color:var(--ui-nav-muted); font-size:14px; }
.app nav { padding:0 12px 16px; margin:0; display:flex; flex-direction:column; gap:3px; max-height:none; }
.app nav button {
  width:100%; margin:0; padding:10px 12px; min-height:42px; border:0;
  border-radius:9px; background:transparent; color:var(--ui-nav-text); box-shadow:none;
  font-size:var(--ui-text-size); font-weight:500; line-height:1.5; text-align:start;
  display:flex; align-items:center; gap:11px; transform:none;
}
.app nav button::before { display:none; }
.app nav button:hover,html[dir] .app nav button:hover { background:var(--ui-nav-active); transform:none; }
.app nav button.active,html[dir] .app nav button.active { background:var(--ui-nav-active); box-shadow:none; color:#fff; }
html[data-panel-theme="linen"] .app nav button.active { color:var(--ui-accent); font-weight:700; }
.nav-icon { width:19px; height:19px; flex:0 0 19px; color:var(--ui-nav-muted); fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.active .nav-icon { color:#8cbeff; }
html[data-panel-theme="linen"] .active .nav-icon { color:var(--ui-accent); }
.app .aside-footer { flex-shrink:0; display:grid; gap:8px; padding:15px 20px 18px; background:transparent; border-top:1px solid var(--ui-nav-border); box-shadow:none; font-size:14px; }
.app .aside-footer #account-name { color:var(--ui-nav-text); font-weight:600; }
.app .aside-footer button { padding:8px 10px; border:1px solid var(--ui-nav-border); border-radius:8px; color:var(--ui-nav-text); min-height:36px; }
.app .aside-footer button:hover { background:var(--ui-nav-active); }
.support-link,.support-link .support-label { color:var(--ui-nav-muted); }
.support-link:hover { color:var(--ui-nav-text); }
/* Desktop navigation fits ordinary monitor heights; mobile keeps touch targets. */
@media(min-width:1025px) {
  :root { --ui-text-size:14.5px; }
  .app .logo { min-height:52px; padding:10px 14px 6px; }
  .app .logo .brand { font-size:20px; }
  .app .logo .brand-mark { width:28px; height:28px; flex-basis:28px; }
  .app .sidebar-role { margin:0 14px 8px; padding-bottom:6px; font-size:13px; }
  .app #navigation { flex:1; min-height:0; padding:0 8px 8px; gap:1px; }
  .app #navigation button {
    flex-shrink:0; min-height:30px; padding:5px 8px; font-size:var(--ui-text-size);
    line-height:1.35; gap:8px; white-space:nowrap; border-radius:7px;
  }
  .app #navigation .nav-icon { width:17px; height:17px; flex-basis:17px; }
  .app .aside-footer { padding:10px 14px; gap:5px; font-size:13px; }
  .app .aside-footer .support-link { padding:3px 0; font-size:13px; }
  .app .aside-footer .telegram-icon { width:20px; height:20px; }
  .app .aside-footer button { min-height:28px; padding:4px 8px; font-size:14px; }
}
@media(min-width:1025px) and (max-height:800px) {
  :root { --ui-text-size:14px; }
  .app .logo { min-height:44px; padding:8px 14px 4px; }
  .app .sidebar-role { margin-bottom:5px; padding-bottom:4px; }
  .app #navigation button { min-height:24px; padding:3px 8px; font-size:var(--ui-text-size); line-height:1.25; }
  .app #navigation .nav-icon { width:15px; height:15px; flex-basis:15px; }
  .app .aside-footer { padding:8px 14px; gap:4px; }
  .app .aside-footer button { min-height:26px; padding:3px 8px; font-size:13.5px; }
}
@media(min-width:1025px) and (max-height:680px) {
  .app .logo { min-height:40px; padding:6px 14px 4px; }
  .app .sidebar-role { margin-bottom:4px; padding-bottom:2px; }
  .app #navigation button { min-height:22px; padding:2px 8px; }
  .app .aside-footer button { min-height:24px; padding:2px 8px; font-size:13px; }
}
.app .workspace { margin:0; margin-inline-start:var(--ui-sidebar); padding:28px 30px; background:var(--ui-bg); min-height:100vh; }
.app .workspace>header {
  height:auto; min-height:76px; margin:0 0 28px; padding:0 0 22px;
  background:none; border-bottom:1px solid var(--ui-border); box-shadow:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:18px 24px;
}
.page-heading { display:flex; align-items:center; gap:12px; flex:1 1 240px; min-width:0; }
.page-heading>div { min-width:0; }
.app .workspace h2 { margin:2px 0 0; font-size:26px; line-height:1.4; font-weight:700; letter-spacing:-.5px; color:var(--ui-text); }
.app .workspace header #context-label { color:var(--ui-muted); font-size:12px; }
.app .header-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px 14px; min-width:0; }
.header-preferences,.header-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.app .header-actions input,.app .header-actions select,.app .header-actions .secondary { height:38px; min-height:38px; border:1px solid var(--ui-border); border-radius:8px; padding:8px 10px; background:var(--ui-surface); color:var(--ui-text); box-shadow:none; font-size:12px; }
.app .header-actions input { width:170px; }
.app .header-actions select { width:auto; max-width:170px; }
.app-download { display:inline-flex; align-items:center; text-decoration:none; white-space:nowrap; }
.appearance-button { display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.app .workspace header .appearance-button span { color:inherit; }
.appearance-button svg,.ui-icon-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.ui-icon-button { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; flex-shrink:0; border:1px solid var(--ui-border); background:var(--ui-surface); color:var(--ui-text); border-radius:9px; padding:0; }
#open-navigation,#close-navigation { display:none; }
.navigation-backdrop { position:fixed; inset:0; border:0; border-radius:0; background:rgb(5 17 34 / 55%); backdrop-filter:blur(2px); z-index:35; }
.app #content { max-width:1800px; margin-inline:auto; min-width:0; }
.app #app-message:empty { display:none; }
.app #app-message:not(:empty) { padding:12px 16px; border:1px solid var(--ui-danger-border); background:var(--ui-danger-bg); border-radius:10px; color:var(--ui-danger); }
.app .stats { grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:20px; }
.app .stats article {
  min-width:0; padding:20px; border:1px solid var(--ui-border); border-radius:14px;
  background:var(--ui-surface); box-shadow:var(--ui-shadow); transform:none;
}
.app .stats article::after { display:none; }
.app .stats article:nth-child(n) { border-top:1px solid var(--ui-border); }
.app .stats span,.app .stats small { color:var(--ui-muted); font-size:12px; line-height:1.6; }
.app .stats strong { color:var(--ui-text); font-size:28px; font-weight:750; line-height:1.3; margin:10px 0 2px; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.app .stats article:nth-child(2) strong { color:var(--ui-success); }
.app .stats article:nth-child(3) strong { color:var(--ui-warning); }
.app .stats article:nth-child(4) strong { color:var(--ui-danger); }
.app .message-summary { max-width:none; }
.app .device-summary article { min-width:0; }
.app .panel { min-width:0; margin-bottom:22px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-surface); box-shadow:var(--ui-shadow); }
.app .panel:hover { box-shadow:var(--ui-shadow); }
.app .panel-head { padding:18px 20px; background:var(--ui-surface); border-bottom:1px solid var(--ui-border); flex-wrap:wrap; gap:10px 18px; }
.app .panel h3,.app .panel-head h3 { color:var(--ui-text); font-size:16px; line-height:1.5; font-weight:700; margin:0 0 4px; }
.app .panel-head p { color:var(--ui-muted); font-size:12px; line-height:1.6; max-width:780px; }
.app .primary,.app .secondary { border-radius:8px; min-height:36px; padding:8px 13px; font-size:13px; font-weight:600; box-shadow:none; transform:none; }
.app .primary,.auth-card .primary { background:var(--ui-accent); color:var(--ui-accent-text); border:1px solid var(--ui-accent); box-shadow:none; }
.app .secondary { background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); }
.app .primary:hover,.app .secondary:hover { box-shadow:none; transform:none; filter:brightness(.97); }
.app .secondary:hover { background:var(--ui-soft); border-color:var(--ui-muted); }
.app button.danger { background:var(--ui-danger); border-color:var(--ui-danger); color:var(--ui-surface); }
.app button.danger-outline { background:var(--ui-danger-bg); color:var(--ui-danger); border-color:var(--ui-danger-border); }
.app .badge { padding:4px 9px; border-radius:6px; font-size:11px; font-weight:650; background:var(--ui-soft); color:var(--ui-muted); border:1px solid var(--ui-border); white-space:nowrap; }
.app .badge.active,.app .badge.online,.app .badge.delivered { background:var(--ui-success-bg); color:var(--ui-success); border-color:transparent; }
.app .badge.sent,.app .badge.undelivered,.app .badge.queued,.app .badge.assigned,.app .badge.enrolled { background:var(--ui-warning-bg); color:var(--ui-warning); border-color:transparent; }
.app .badge.suspended,.app .badge.failed,.app .badge.cancelled,.app .badge.offline { background:var(--ui-danger-bg); color:var(--ui-danger); border-color:transparent; }
.app input,.app select,.app textarea,dialog input,dialog select,dialog textarea {
  min-width:0; min-height:40px; padding:10px 12px; border:1px solid var(--ui-border); border-radius:8px;
  background:var(--ui-surface); color:var(--ui-text); font:inherit; font-size:13px;
}
.app input[type="checkbox"],dialog input[type="checkbox"] { width:16px; min-height:16px; height:16px; padding:0; accent-color:var(--ui-accent); }
.app input::placeholder,dialog input::placeholder { color:var(--ui-muted); opacity:1; }
.app label,dialog label { color:var(--ui-muted); font-size:12px; font-weight:600; line-height:1.6; }
.app input:focus,.app select:focus,.app textarea:focus { border-color:var(--ui-accent); box-shadow:0 0 0 3px var(--ui-accent-soft); }
.app .message-filters {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px;
  width:auto; max-width:none; margin:18px 20px; padding:18px; background:var(--ui-soft);
  border:1px solid var(--ui-border); border-radius:10px; align-items:start;
}
.app .message-filters label { display:flex; flex-direction:column; gap:6px; align-self:start; min-width:0; }
.app .message-filters .message-id-filter { grid-column:span 2; }
.app .message-id-filter input { text-align:left; }
.app .message-filters input:not([type="checkbox"]),.app .message-filters select { width:100%; height:44px; min-height:44px; }
.app .message-source-filter { grid-column:auto; display:grid; grid-template-columns:1fr; gap:6px; align-self:stretch; }
.app .message-source-filter>label:first-child { flex:1; }
.app .message-filters .message-source-visibility,.app .message-filters .record-archive-toggle { flex-direction:row; align-items:center; }
.app .message-source-visibility { padding:0; font-size:11px; white-space:normal; min-height:18px; }
.app .message-source-visibility input[type="checkbox"] { width:16px; height:16px; }
.app .message-source-filter select { min-height:40px; }
.app .message-filters .record-archive-toggle { grid-column:1/-1; min-width:0; }
.app .message-filters .form-actions { padding-top:14px; border-top:1px solid var(--ui-border); gap:9px; }
.app .record-limit-note,.app .live-summary-note { color:var(--ui-muted); font-size:12px; line-height:1.8; padding:12px 20px; margin:0; }
.app #content>.record-limit-note { padding:0 2px 18px; }
.app .record-history-form { gap:12px; padding:18px 20px; background:var(--ui-soft); border-bottom:1px solid var(--ui-border); }
.app .record-history-form label { min-width:0; flex:1 1 180px; }
.app .table-list { min-width:0; }
.app .table-wrap,.app .table-list .table-wrap { padding:0; max-height:none; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:var(--ui-muted) var(--ui-soft); }
.app .table-wrap table { min-width:100%; width:100%; border:0; border-radius:0; border-collapse:separate; border-spacing:0; font-size:12px; }
.app .table-wrap th,.app .table-wrap td { border:0; border-bottom:1px solid var(--ui-border); padding:12px 16px; text-align:start; line-height:1.65; color:var(--ui-text); }
.app .table-wrap th,.app .table-list .table-wrap thead th { background:var(--ui-soft); color:var(--ui-muted); font-weight:650; box-shadow:0 1px var(--ui-border); }
.app .table-wrap tbody tr { background:var(--ui-surface); }
.app .table-wrap tbody tr:nth-child(even) { background:var(--ui-soft); }
.app .table-wrap tbody tr:hover,.app .table-wrap tbody tr:nth-child(even):hover { background:var(--ui-hover); }
.app .table-wrap tbody tr:last-child td { border-bottom:0; }
.app .table-wrap tfoot .table-total,.app .table-wrap tfoot .table-total th { background:var(--ui-accent-soft); color:var(--ui-text); border-top:1px solid var(--ui-border); }
.app .table-pagination { padding:14px 20px; border-top:1px solid var(--ui-border); color:var(--ui-muted); background:var(--ui-surface); gap:12px; flex-wrap:wrap; }
.app .table-page-size select { padding:6px 10px; min-height:34px; }
.app .table-pagination-controls { gap:6px; }
.app .table-pagination-controls button { min-width:36px; }
.app .table-page-number.active,.app .table-page-number.active:disabled { background:var(--ui-accent); color:var(--ui-accent-text); border-color:var(--ui-accent); }
.app .table-view-tools { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; border-bottom:1px solid var(--ui-border); background:var(--ui-soft); }
.app .table-view-tools small { color:var(--ui-muted); }
.table-view-tools,.mobile-row-toggle { display:none !important; }
.app code,.app pre { background:var(--ui-soft); color:var(--ui-muted); border:1px solid var(--ui-border); font-size:11px; }
.app .message-body,.app .inbound-message { color:var(--ui-text); }
.app .message-error,.app .message-error code { color:var(--ui-danger); }
.app .delivery-duration.fast { color:var(--ui-success); background:var(--ui-success-bg); border-color:transparent; }
.app .delivery-duration.slow { color:var(--ui-danger); background:var(--ui-danger-bg); border-color:var(--ui-danger-border); }
.app .delivery-duration.pending { color:var(--ui-muted); background:var(--ui-soft); border-color:var(--ui-border); }
/* Fit SMS details and source settings to the page without horizontal scrolling. */
@media(min-width:1025px) {
  .app:has(.fit-record-list) { --ui-sidebar:232px; }
  .app:has(.fit-record-list) .workspace { padding-inline:16px; }
}
.app:has(.fit-record-list) #content { max-width:none; }
.app .fit-record-list .table-wrap { overflow:visible; }
.app .fit-record-list .table-wrap table { table-layout:fixed; width:100%; min-width:0; white-space:normal; }
.app .fit-record-list .table-wrap th,.app .fit-record-list .table-wrap td {
  min-width:0; padding:12px 8px; font-size:14px; vertical-align:top;
  white-space:normal; overflow-wrap:anywhere;
}
.app .fit-record-list td>*,.app .fit-record-list td code {
  min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere;
}
.app .fit-record-list .message-body,.app .fit-record-list .message-device,
.app .fit-record-list .message-error,.app .fit-record-list .delivery-duration {
  min-width:0; max-width:100%;
}
.app .fit-record-list td code { display:block; padding:4px; font-size:13px; }
.app .fit-record-list td small,.app .fit-record-list td .badge,.app .fit-record-list .delivery-duration { font-size:13px; }
.app .fit-record-list .badge,.app .fit-record-list .delivery-duration { padding:5px 7px; white-space:normal; }
.app .fit-record-list td button { margin-block:3px; font-size:14px; min-height:40px; }
.app .fit-record-list .record-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:start; }
.app .users-panel { width:100%; min-width:0; max-width:none; }
.app .user-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:start; }
.app .user-actions button { max-width:100%; white-space:normal; }
.app .inbound-search-form { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:16px; }
.app .inbound-search-form label { flex:1 1 280px; min-width:0; }
.app .inbound-search-form .form-actions { display:flex; flex-wrap:wrap; gap:8px; }
#form-dialog:has(form[data-action="user-update"]) { width:min(760px,calc(100vw - 32px)); }
#form-dialog form[data-action="user-update"] .form-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
#form-dialog .user-edit-note { grid-column:1/-1; margin:0; color:var(--ui-muted); }
#form-dialog:has([data-transform-pattern]) { width:min(700px,calc(100vw - 32px)); }
#form-dialog:has([data-transform-pattern]) .form-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#form-dialog:has([data-transform-pattern]) .form-fields>* { grid-column:1/-1; min-width:0; }
#form-dialog:has([data-transform-pattern]) .form-fields>label:has([name="name"],[name="trafficSourceId"],input[disabled],[name="otpWordSeparator"]),#form-dialog:has([data-transform-pattern]) [data-transform-template] { grid-column:auto; }
#form-dialog [data-transform-pattern]:not([hidden]) { display:grid; gap:10px; }
#form-dialog [data-transform-pattern]>small,#form-dialog [data-transform-template-help] { color:var(--ui-muted); line-height:1.8; }
#form-dialog [data-transform-pattern]>button { justify-self:start; }
#form-dialog [name="pattern"] { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; line-height:1.7; resize:vertical; }
#form-dialog [data-transform-preview-output] { unicode-bidi:plaintext; }
#form-dialog .transform-preview-inputs:has([data-transform-otp-field][hidden]) { grid-template-columns:minmax(0,1fr); }
@media(max-width:560px) { #form-dialog:has([data-transform-pattern]) .form-fields { grid-template-columns:minmax(0,1fr); } }
#pending-users-dialog { width:min(560px,calc(100vw - 32px)); }
#pending-users-list { display:grid; gap:10px; max-height:45vh; overflow-y:auto; padding-inline-start:24px; }
#pending-users-list li { overflow-wrap:anywhere; }
#pending-users-list span { display:block; color:var(--ui-muted); }
#pending-payouts-dialog { width:min(620px,calc(100vw - 32px)); }
#pending-payouts-list { display:grid; gap:12px; max-height:45vh; overflow-y:auto; padding-inline-start:24px; }
#pending-payouts-list li { display:flex; flex-wrap:wrap; align-items:center; gap:10px; overflow-wrap:anywhere; }
#pending-payouts-list strong { flex:1 1 160px; }
.app .pending-payout-notice { width:fit-content; max-width:100%; white-space:normal; margin-block:0 16px; }
@media(max-width:600px) {
  #form-dialog form[data-action="user-update"] .form-fields { grid-template-columns:minmax(0,1fr); }
  .app .inbound-search-form .form-actions { width:100%; }
}
.app .fit-record-list .record-actions button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
@media(max-width:2200px) {
  .app .fit-record-list table,.app .fit-record-list tbody { display:block; }
  .app .fit-record-list .table-wrap thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .app .fit-record-list tbody tr {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px;
    margin:14px; padding:14px; border:1px solid var(--ui-border); border-radius:10px;
  }
  .app .fit-record-list .table-wrap tbody td {
    display:grid; grid-template-columns:minmax(80px,30%) minmax(0,1fr); gap:10px;
    padding:10px 0; font-size:14px; align-items:start;
  }
  .app .fit-record-list tbody td::before { content:attr(data-label); color:var(--ui-muted); font-weight:650; }
}
@media(max-width:600px) {
  .app .fit-record-list tbody tr { grid-template-columns:minmax(0,1fr); margin:10px; padding:12px; }
}
.app .device-groups { margin:0; padding:20px; gap:22px; }
.app .device-group { min-width:0; padding:20px; background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:12px; }
.app .device-group-head { padding:0 0 14px; border-color:var(--ui-border); }
.app .device-group-head h4 { color:var(--ui-text); font-size:15px; }
.app .device-group-head div span { color:var(--ui-muted); }
.app .device-group-count { color:var(--ui-accent) !important; background:var(--ui-accent-soft); border-color:transparent; border-radius:7px; font-size:12px; }
.app .device-group-head { flex-wrap:wrap; align-items:center; gap:16px; }
.app .device-group-owner { flex:0 1 260px; min-width:0; }
.app .device-user-summary { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); flex:1 1 640px; min-width:0; margin:0; gap:10px; }
.app .device-user-metric { min-width:0; padding:10px 12px; border:1px solid var(--ui-border); border-radius:8px; background:var(--ui-soft); }
.app .device-user-metric dt { color:var(--ui-muted); line-height:1.5; min-height:3em; overflow-wrap:anywhere; }
.app .device-user-metric dd { margin:4px 0 0; color:var(--ui-text); font-weight:700; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.app .device-quota-note { margin:0; padding:14px 20px 0; color:var(--ui-muted); line-height:1.7; }
.app .device-capacity-hint { line-height:1.5; color:var(--ui-muted); }
@media(max-width:700px) {
  .app .device-group-owner { flex:1 1 100%; }
  .app .device-user-summary { flex:1 1 100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app .device-user-metric:last-child { grid-column:1 / -1; }
}
.app .device-grid { grid-template-columns:repeat(auto-fill,minmax(min(100%,520px),1fr)); gap:16px; }
.app .device { container-type:inline-size; min-width:0; padding:20px; background:var(--ui-surface); border:1px solid var(--ui-border); border-radius:12px; box-shadow:none; transform:none; }
.app .device>.row { align-items:flex-start; flex-wrap:wrap; }
.app .device-identity { flex:1 1 260px; min-width:0; }
.app .device-identity>strong { overflow-wrap:anywhere; line-height:1.5; }
.app .device-network,.app .device-app-version { overflow-wrap:anywhere; white-space:normal; }
.app .device:hover { transform:none; border-color:var(--ui-accent); }
.app .device p,.app .device small,.app .device-id,.app .device-network,.app .message-device-id,.app .device-app-version { color:var(--ui-muted); }
.app .device-id,.app .sim-identifiers code { border:0; background:transparent; }
.app .device.is-offline { background:var(--ui-danger-bg); border-color:var(--ui-danger-border); box-shadow:none; }
.app .device.is-offline:hover { border-color:var(--ui-danger); }
.app .sim-limit-grid { gap:12px; }
.app .sim-limit-card,.app .device.is-offline .sim-limit-card { display:flex; flex-direction:column; gap:12px; padding:14px; background:var(--ui-soft); border-color:var(--ui-border); border-radius:9px; }
.app .sim-limit-head { align-items:flex-start; flex-wrap:wrap; border-color:var(--ui-border); }
.app .sim-limit-head strong { flex-shrink:0; white-space:nowrap; line-height:1.5; }
.app .sim-limit-head .badge { max-width:100%; white-space:normal; line-height:1.5; text-align:start; }
.app .sim-meta { min-height:0; white-space:normal; overflow:visible; overflow-wrap:anywhere; line-height:1.5; }
.app .sim-identifiers { gap:10px; padding:0; }
.app .sim-identifiers>div { grid-template-columns:minmax(0,1fr); gap:4px; }
.app .sim-identifiers small { white-space:normal; line-height:1.5; }
.app .sim-identifiers span { line-height:1.5; text-align:start; }
.app .sim-identifiers>div>span { overflow:visible; overflow-wrap:anywhere; white-space:normal; }
.app .sim-signal-reading { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.app .sim-signal-bars { display:inline-flex; align-items:flex-end; gap:3px; height:18px; }
.app .sim-signal-bars i { display:block; width:4px; height:5px; border-radius:1px; background:var(--ui-border); }
.app .sim-signal-bars i:nth-child(2) { height:9px; }
.app .sim-signal-bars i:nth-child(3) { height:13px; }
.app .sim-signal-bars i:nth-child(4) { height:17px; }
.app .sim-signal-bars i.is-filled { background:var(--ui-accent); }
.app .sim-limit-values { grid-template-columns:minmax(0,1fr); gap:12px; }
.app .sim-quota-item { padding-top:10px; border-top:1px solid var(--ui-border); }
.app .sim-quota-number { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:flex-start; gap:6px; min-width:0; line-height:1.5; }
html[dir="rtl"] .app .sim-quota-number { justify-content:flex-end; }
.app .sim-limit-card>button:last-child { margin-top:auto; align-self:stretch; white-space:normal; line-height:1.5; }
.app .sim-limit-head strong,.app .sim-limit-values strong,.app .sim-identifiers span { color:var(--ui-text); }
.app .sim-meta,.app .sim-limit-values small,.app .sim-limit-values span,.app .sim-identifiers small { color:var(--ui-muted); }
.app .sim-limit-values strong { font-size:17px; font-variant-numeric:tabular-nums; }
.app .sim-limit-values small { white-space:normal; overflow:visible; min-height:0; line-height:1.5; font-size:11px; }
.app .device-summary article { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.app .device-summary article>span:first-child { min-height:3em; line-height:1.5; }
.app .device-summary strong { margin:0; }
@container(max-width:440px) {
  .app .sim-limit-grid { grid-template-columns:minmax(0,1fr); }
}
.app .sim-limit-card.sim-locked { background:var(--ui-danger-bg); border-color:var(--ui-danger-border); }
.app .sims span { color:var(--ui-text); background:var(--ui-soft); border-color:var(--ui-border); }
.app .referral-share,.app .smpp-allowlist-form,.app .smpp-log-empty,.app .transform-preview,.app .empty { background:var(--ui-soft); border-color:var(--ui-border); color:var(--ui-muted); }
.app .referral-share>label,.app .smpp-source-picker,.app .transform-preview>small { color:var(--ui-muted); }
.app .smpp-diagnostics .smpp-log-error { color:var(--ui-danger); background:var(--ui-danger-bg); }
.app .transform-preview-result output { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
.app .test-sim-panel { max-width:850px; }
.app #test-sim-form { width:100%; max-width:760px; padding:20px; }
.app #test-sim-form label,.app .settings-grid .compact-form label { color:var(--ui-muted); }
.app #test-sim-form input,.app #test-sim-form select,.app #test-sim-form textarea,.app .settings-grid .compact-form input { background:var(--ui-surface); }
.app .settings-grid { max-width:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.app .settings-grid .panel>h3 { background:var(--ui-surface); color:var(--ui-text); border-color:var(--ui-border); }
.app .settings-grid .compact-form { padding:20px; }
.app .warning,.app .settings-grid .warning>p { background:var(--ui-surface); border-color:var(--ui-border); color:var(--ui-warning); }
.app .event { padding:14px 20px; border-color:var(--ui-border); }
.app .event small,.app .event time,.app dt { color:var(--ui-muted); }
.app .support-action { background:var(--ui-soft); color:var(--ui-text); border-color:var(--ui-border); }
dialog { background:var(--ui-surface); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:16px; max-height:calc(100dvh - 32px); overflow-y:auto; font-family:"Segoe UI",Tahoma,sans-serif; }
dialog::backdrop { background:rgb(5 17 34 / 60%); backdrop-filter:blur(3px); }
dialog .dialog-head h3 { margin:0; font-size:18px; }
dialog .icon { color:var(--ui-muted); min-width:44px; min-height:44px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
dialog .primary,dialog .secondary { min-height:44px; }
dialog .primary { background:var(--ui-accent); color:var(--ui-accent-text); }
dialog .secondary { background:var(--ui-soft); color:var(--ui-text); border-color:var(--ui-border); }
dialog pre { color:var(--ui-text); background:var(--ui-soft); }
#appearance-dialog { width:min(760px,calc(100% - 32px)); padding:26px; }
#appearance-description,.appearance-note { color:var(--ui-muted); line-height:1.8; font-size:13px; }
.theme-choices { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:22px 0; }
.theme-choice { position:relative; display:grid; gap:9px; text-align:start; padding:12px; border:2px solid var(--ui-border); border-radius:12px; background:var(--ui-surface); color:var(--ui-text); }
.theme-choice:hover { border-color:var(--ui-accent); }
.theme-choice[aria-pressed="true"] { border-color:var(--ui-accent); background:var(--ui-accent-soft); }
.theme-choice strong { font-size:14px; }
.theme-choice small { color:var(--ui-muted); font-size:12px; line-height:1.7; }
.theme-selected { display:none; position:absolute; inset-inline-end:18px; top:18px; width:22px; height:22px; border-radius:50%; text-align:center; background:var(--ui-accent); color:var(--ui-accent-text); }
[aria-pressed="true"]>.theme-selected { display:block; }
.theme-mini { display:flex; height:115px; overflow:hidden; border:1px solid #d7dfe8; border-radius:8px; direction:ltr; background:#f1f5fa; }
.theme-mini>i { width:25%; background:#14243b; border-inline-end:1px solid #d7dfe8; }
.theme-mini>span { flex:1; padding:13px 9px; display:flex; align-content:start; gap:7px; flex-wrap:wrap; }
.theme-mini b { height:8px; flex:0 0 80%; background:#245edb; border-radius:2px; margin-bottom:7px; }
.theme-mini em { width:calc(33.33% - 5px); height:25px; border-radius:3px; background:#fff; box-shadow:0 0 0 1px #d7dfe8; }
.theme-mini em:last-child { width:100%; height:35px; }
.theme-mini-linen { background:#f5f6f8; }.theme-mini-linen>i { background:#fff; }.theme-mini-linen b { background:#2c6570; }
.theme-mini-midnight { background:#101827; border-color:#34455e; }.theme-mini-midnight>i { background:#121c2d; border-color:#34455e; }.theme-mini-midnight b { background:#8ab6ff; }.theme-mini-midnight em { background:#202e43; box-shadow:0 0 0 1px #34455e; }
.auth-layout { gap:50px; width:min(1060px,calc(100% - 40px)); }
.auth-layout::before,.auth-layout::after { display:none; }
.hero { padding:20px; }.hero h1 { background:none; color:var(--ui-text); font-size:clamp(32px,4vw,50px); letter-spacing:-1px; }
.hero p { color:var(--ui-muted); font-size:16px; }
.hero .brand::before,.signal { display:none; }
.auth-card { width:100%; max-width:430px; background:var(--ui-surface); border-color:var(--ui-border); border-radius:16px; box-shadow:var(--ui-shadow); padding:30px; }
.auth-card label { color:var(--ui-muted); font-size:13px; }
.auth-card input,.language-picker select { color:var(--ui-text); background:var(--ui-surface); border-color:var(--ui-border); }
.auth-card input:hover { background:var(--ui-soft); border-color:var(--ui-muted); }
.tabs { background:var(--ui-soft); }.tabs button { color:var(--ui-muted); }.tabs button.active { background:var(--ui-surface); color:var(--ui-text); box-shadow:var(--ui-shadow); }
.auth-card .primary:hover { transform:none; box-shadow:none; }
.support-contact { background:var(--ui-soft); color:var(--ui-muted); border-color:var(--ui-border); }.support-contact .support-label { color:var(--ui-text); }
@media(min-width:1600px) { .app .workspace { padding:32px 40px; }.app .stats article { padding:22px; } }
@media(min-width:701px) and (max-width:1500px) { .app .stats { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1200px) { .app .workspace { padding:22px; }.app .header-actions { justify-content:flex-start; }.app .message-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1024px) {
  #open-navigation,#close-navigation { display:inline-flex; }
  #close-navigation { color:var(--ui-nav-text); background:var(--ui-nav-active); border-color:var(--ui-nav-border); }
  .app aside { position:fixed; width:min(310px,calc(100vw - 48px)); visibility:hidden; transform:translateX(-105%); transition:transform .18s ease,visibility .18s; }
  html[dir="rtl"] .app aside { transform:translateX(105%); }
  body.navigation-open .app aside,html[dir="rtl"] body.navigation-open .app aside { visibility:visible; transform:translateX(0); }
  body.navigation-open { overflow:hidden; }
  .app .workspace { margin:0; padding:22px; }
  .app .workspace>header { align-items:flex-start; gap:18px; padding-bottom:20px; margin-bottom:22px; }
  .page-heading { flex-basis:100%; align-items:center; }
  .app .header-actions { width:100%; justify-content:space-between; }
  .app .settings-grid { grid-template-columns:1fr; }
}
@media(max-width:700px) {
  dialog input,dialog select,dialog textarea,.auth-card button { min-height:44px; }
  .app { font-size:var(--ui-text-size); }.app .workspace { padding:16px; }
  .app .workspace h2 { font-size:22px; letter-spacing:0; }
  .app .header-actions { display:grid; grid-template-columns:1fr; gap:12px; }
  .header-preferences { display:flex; flex-wrap:nowrap; gap:7px; }
  .app .header-preferences>* { flex:1; min-width:0; max-width:none; justify-content:center; }
  .app .header-preferences .app-download { flex:1.3; font-size:11px; }
  .header-tools { display:flex; flex-wrap:nowrap; }
  .app .header-tools input { flex:1 1 90px; width:0; min-width:0; }
  .app .header-tools select { max-width:125px; }
  .app .header-tools button { flex-shrink:0; }
  .app .header-actions input,.app .header-actions select,.app .header-actions .secondary { min-height:44px; height:44px; }
  .app .stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .app .stats article { padding:15px; border-radius:11px; }.app .stats strong { font-size:26px; }
  .app .stats span { font-size:12px; }
  .app .panel { border-radius:11px; margin-bottom:18px; }
  .app .panel-head { padding:16px; align-items:flex-start; }
  .app .panel-head>div { min-width:0; }
  .app .message-filters { grid-template-columns:repeat(2,minmax(0,1fr)); margin:14px; padding:14px; gap:14px; }
  .app .message-source-filter { grid-column:1/-1; }
  .app input,.app select,.app .primary,.app .secondary { min-height:44px; font-size:13px; }
  .app .small { padding:9px 12px; }
  .app .record-limit-note { padding:12px 16px; }
  .app .record-history-form { padding:16px; }.app .record-history-form label { flex-basis:calc(50% - 12px); }
  .app .table-pagination { padding:14px; flex-direction:column; align-items:stretch; gap:12px; }
  .app .table-pagination-controls { justify-content:center; flex-wrap:wrap; }
  .app .table-page-size { justify-content:space-between; }.app .table-pagination>span { text-align:center; }
  .app .table-wrap th,.app .table-wrap td { padding:12px; }
  .app .table-view-tools { display:flex !important; }
  .app .mobile-record-table .table-wrap { overflow:visible; }
  .app .mobile-record-table table,.app .mobile-record-table tbody { display:block; min-width:0; width:100%; }
  .app .mobile-record-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .app .mobile-record-table tbody tr { display:grid; grid-template-columns:1fr; margin:12px; padding:12px; border:1px solid var(--ui-border); border-radius:10px; background:var(--ui-surface); }
  .app .mobile-record-table tbody tr:hover { background:var(--ui-surface); }
  .app .mobile-record-table tbody td {
    display:grid; grid-template-columns:100px minmax(0,1fr); gap:8px; align-items:start;
    min-width:0; padding:8px 0; border:0; white-space:normal; text-align:start;
  }
  .app .mobile-record-table tbody td::before { content:attr(data-label); font-size:11px; color:var(--ui-muted); font-weight:600; }
  .app .mobile-record-table td>* { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  .app .mobile-record-table td .message-body,.app .mobile-record-table td .message-device,.app .mobile-record-table td .message-error,.app .mobile-record-table td .inbound-message { min-width:0; max-width:none; }
  .app .mobile-record-table td .badge { justify-self:start; }
  .app .mobile-record-table td code { white-space:normal; overflow-wrap:anywhere; font-size:10px; }
  .app .mobile-record-table tr:not(.record-expanded) td[data-mobile-detail="true"] { display:none; }
  .app .mobile-record-table td:first-child { border-bottom:1px solid var(--ui-border); padding-bottom:12px; margin-bottom:5px; }
  .app .mobile-record-table .mobile-row-toggle { display:inline-flex !important; grid-column:2; width:fit-content; color:var(--ui-accent); border:0; background:transparent; min-height:36px; padding:6px 0; text-align:start; font-size:12px; }
  .app .mobile-record-table tfoot,.app .mobile-record-table tfoot tr { display:block; }
  .app .mobile-record-table tfoot th { display:block; white-space:normal; }
  .app .mobile-record-table tfoot th[data-label]::before { content:attr(data-label) ": "; color:var(--ui-muted); }
  .app .device-groups { padding:16px; }.app .device-group { padding:14px; }.app .device-grid { grid-template-columns:minmax(0,1fr); }
  .app .device { padding:16px; }.app .device-group-head { flex-direction:row; flex-wrap:wrap; }
  .app .device-group-count { align-self:center; }
  .app .sim-limit-grid { grid-template-columns:minmax(0,1fr); gap:10px; }.app .sim-limit-card { padding:12px; }
  .app .sim-limit-values { grid-template-columns:1fr; gap:10px; }.app .sim-limit-values small { min-height:0; }
  .app .smpp-allowlist-form { grid-template-columns:1fr; padding:16px; }
  .app #test-sim-form { padding:16px; grid-template-columns:1fr; }
  .app .grid.two { grid-template-columns:1fr; }
  .theme-choices { grid-template-columns:1fr; gap:12px; }
  .theme-choice { grid-template-columns:90px 1fr; gap:4px 14px; align-items:center; }
  .theme-mini { grid-row:span 2; height:76px; }.theme-mini>span { padding:9px 6px; gap:4px; }.theme-mini em { height:13px; }.theme-mini em:last-child { height:16px; }
  .theme-choice strong,.theme-choice small { grid-column:2; }.theme-selected { inset-inline-end:8px; top:8px; }
  #appearance-dialog { padding:20px; }
  .auth-layout { grid-template-columns:1fr; gap:12px; padding:24px 0; min-height:100dvh; }.hero { padding:12px; }.hero h1 { font-size:30px; }.hero p { font-size:14px; }.language-picker { margin-bottom:20px; }
  .auth-card { justify-self:center; padding:24px; }
}
@media(max-width:380px) {
  .app .workspace { padding:12px; }.app .message-filters { grid-template-columns:1fr; }
  .app .message-filters .message-id-filter { grid-column:auto; }
  .app .message-source-filter { grid-column:auto; }.appearance-button svg { display:none; }
  .app .header-actions input,.app .header-actions select,.app .header-actions .secondary { padding:8px; font-size:11px; }
  .app .stats strong { font-size:23px; }.app .mobile-record-table tbody td { grid-template-columns:85px minmax(0,1fr); }
}
/* Admin-only daily breakdown; nested rows remain attached to their report day. */
.app .daily-report-day { cursor:pointer; }
.app .daily-report-day:hover>td,.app .daily-report-day.is-expanded>td,.app .daily-users-detail>td { background:var(--ui-accent-soft); }
.app .daily-users-toggle { display:inline-flex; align-items:center; gap:10px; padding:4px 0; border:0; background:transparent; color:var(--ui-text); font-weight:600; white-space:nowrap; box-shadow:none; }
.app .daily-users-chevron { display:inline-block; color:var(--ui-accent); font-size:22px; line-height:1; transition:transform .15s; }
.app .daily-users-toggle[aria-expanded="true"] .daily-users-chevron { transform:rotate(180deg); }
.app .daily-users-detail[hidden] { display:none !important; }
.app .daily-users-detail .daily-user-name { padding-inline-start:28px; }
/* Share the navigation text size across panel content, including older feature styles. */
.app .workspace { font-size:var(--ui-text-size); }
.app .workspace :is(#content,.workspace-header) :is(p,span,small,label,input,select,textarea,button,a,th,td,code,pre,dt,dd,output,strong) {
  font-size:var(--ui-text-size);
}
.app .workspace #content .table-wrap td::before,
.app .workspace #content .table-wrap th::before { font-size:var(--ui-text-size); }
.app .workspace #content :is(h3,h4) { font-size:16px; }
.app .workspace h2 { font-size:20px; }
.app .workspace #content .stats strong { font-size:20px; }
dialog { font-size:var(--ui-text-size); }
dialog :is(input,select,textarea,label,button,pre),
dialog#appearance-dialog :is(p,small,strong) { font-size:var(--ui-text-size); }
dialog .dialog-head h3 { font-size:18px; }
@media(prefers-reduced-motion:reduce) { .app *,dialog * { transition:none !important; } }
@media print {
  .app aside,.workspace-header,.header-actions,.table-view-tools,.mobile-row-toggle { display:none !important; }
  .app .workspace { margin:0; padding:0; }.app .table-wrap { overflow:visible; }
  .app .panel { box-shadow:none; }.app .table-wrap th { color:#222; }
}

@media(max-width:1024px){.device:not(.mobile-device-expanded) .sim-limit-card>[data-edit-sim-device]{display:none}}

.app .device-send-readiness{display:grid;gap:6px;margin-block:10px}.app .device-send-readiness .badge{justify-self:start}.app .device-send-readiness small{color:var(--ui-muted);line-height:1.7}

/* Download variants share the panel theme on desktop and mobile. */
#app-download-dialog { width:min(900px, calc(100vw - 32px)); max-width:900px; }
.app-download-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.app-download-card { display:flex; flex-direction:column; gap:12px; padding:20px; border:1px solid var(--ui-border); border-radius:14px; background:var(--ui-soft); color:var(--ui-text); }
.app-download-card h4,.app-download-card p { margin:0; }
.app-download-card h4 { font-size:18px; }
.app-download-android { font-weight:600; }
.app-download-card>.app-download { justify-content:center; margin-top:auto; min-height:44px; }
@media(max-width:720px) { .app-download-options { grid-template-columns:1fr; } #app-download-dialog { max-height:calc(100dvh - 32px); overflow:auto; } }

.app .badge.disabled { background:var(--ui-surface-alt,#eef0f3); color:var(--ui-muted,#667085); border-color:transparent; }