/* ══════════════════════════════════════════════════════════════════════════
   DeskRemote brand system — authority 2026-07-09
   Canonical tokens from docs/ux-ui/authority-2026-07-09/01-brand-system.png.
   Inter is self-hosted (no CDN); the WOFF2 lives next to this stylesheet.
   ══════════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Inter";
  src: url("/brand/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Authority palette (mockup 01) */
  --dr-navy: #0B1D3A;
  --dr-blue: #2563EB;
  --dr-cyan: #06B6D4;
  --dr-surface: #F1F5F9;
  --dr-border-hairline: #E5E7EB;
  --dr-grad-brand: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
  --dr-grad-primary: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  /* Semantic tokens (mockups 01/04/05/06) */
  --dr-success: #16A34A;
  --dr-success-tint: #E7F6EC;
  --dr-info: #2563EB;
  --dr-info-tint: #EAF1FE;
  --dr-warning: #F59E0B;
  --dr-warning-tint: #FEF3C7;
  --dr-danger: #DC2626;
  --dr-danger-tint: #FDECEC;
  --dr-offline: #94A3B8;
  --dr-offline-tint: #F1F5F9;
  --dr-text: #0B1D3A;
  --dr-text-2: #64748B;
  --dr-text-3: #94A3B8;

  /* Legacy token names, remapped onto the authority palette so every existing
     surface (admin console, viewer, web viewer) picks the new system up. */
  --dr-brand-bg: #F1F5F9;
  --dr-brand-surface: #ffffff;
  --dr-brand-surface-soft: #F8FAFC;
  --dr-brand-surface-muted: #EAF1FE;
  --dr-brand-border: #E5E7EB;
  --dr-brand-border-strong: #D6DDE7;
  --dr-brand-shadow: 0 1px 3px rgba(11, 29, 58, 0.06), 0 8px 24px rgba(11, 29, 58, 0.07);
  --dr-brand-shadow-strong: 0 12px 32px rgba(11, 29, 58, 0.12);
  --dr-brand-text: #0B1D3A;
  --dr-brand-muted: #64748B;
  --dr-brand-subtle: #94A3B8;
  --dr-brand-accent: #2563EB;
  --dr-brand-accent-2: #06B6D4;
  --dr-brand-success: #16A34A;
  --dr-brand-warning: #F59E0B;
  --dr-brand-danger: #DC2626;
  --dr-brand-pill: #EAF1FE;
  --dr-brand-pill-active: #DBEAFE;
}

body[data-dr-brand-surface] {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.06), transparent 28%),
    radial-gradient(circle at bottom right, rgba(6, 182, 212, 0.08), transparent 26%),
    linear-gradient(180deg, #F6F9FC 0%, #F1F5F9 100%);
  color: var(--dr-brand-text);
  color-scheme: light;
  font-family: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

body[data-dr-brand-surface] a {
  color: var(--dr-brand-accent);
  text-decoration: none;
}

body[data-dr-brand-surface] a:hover {
  text-decoration: underline;
}

body[data-dr-brand-surface] .brand-shell,
body[data-dr-brand-surface] .brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

body[data-dr-brand-surface] .brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

body[data-dr-brand-surface] .brand-wordmark .brand-desk {
  color: var(--dr-brand-text);
}

/* Authority 2026-07-09: the wordmark is a single deep-navy word. */
body[data-dr-brand-surface] .brand-wordmark .brand-remote {
  color: var(--dr-brand-text);
}

body[data-dr-brand-surface] .brand-logo {
  display: block;
  height: 42px;
  width: auto;
}

body[data-dr-brand-surface] .brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 0;
  object-fit: contain;
  /* Authority 2026-07-09: the mark is an inline SVG glyph — no tile, no clipping. */
}

body[data-dr-brand-surface] .brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body[data-dr-brand-surface] .brand-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

body[data-dr-brand-surface] .brand-title.brand-wordmark {
  font-size: 24px;
}

body[data-dr-brand-surface] .brand-subtitle {
  color: var(--dr-brand-muted);
  font-size: 12px;
  line-height: 1.35;
}

body[data-dr-brand-surface="admin"] #header,
body[data-dr-brand-surface="viewer"] #toolbar,
body[data-dr-brand-surface="web-viewer"] #chrome {
  position: relative;
  background: rgba(255, 255, 255, 0.86);
  border-bottom-color: var(--dr-brand-border);
  backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset, 0 1px 0 rgba(15, 23, 42, 0.03);
}

body[data-dr-brand-surface="admin"] #header {
  height: auto;
  min-height: 76px;
  padding: 14px 24px;
  align-items: center;
  gap: 16px;
}

body[data-dr-brand-surface="admin"] #header::before,
body[data-dr-brand-surface="viewer"] #toolbar::before,
body[data-dr-brand-surface="web-viewer"] #chrome::before,
body[data-dr-brand-surface="admin"] #login-box h2::before,
body[data-dr-brand-surface="viewer"] #token-prompt > span:first-child::before,
body[data-dr-brand-surface="web-viewer"] #connect h1::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  background: url("/brand/deskremote-logo.png") no-repeat left center / contain;
}

body[data-dr-brand-surface="admin"] #header::before {
  width: 184px;
  height: 38px;
  margin-right: 8px;
}

body[data-dr-brand-surface="admin"] #login-box h2::before {
  width: 172px;
  height: 36px;
  margin-bottom: 12px;
}

body[data-dr-brand-surface="viewer"] #toolbar,
body[data-dr-brand-surface="web-viewer"] #chrome {
  padding-left: 190px;
}

body[data-dr-brand-surface="viewer"] #toolbar::before,
body[data-dr-brand-surface="web-viewer"] #chrome::before {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 168px;
  height: 34px;
  transform: translateY(-50%);
}

body[data-dr-brand-surface="viewer"] #token-prompt > span:first-child,
body[data-dr-brand-surface="web-viewer"] #connect h1 {
  position: relative;
  padding-left: 188px;
}

body[data-dr-brand-surface="viewer"] #token-prompt > span:first-child::before,
body[data-dr-brand-surface="web-viewer"] #connect h1::before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 176px;
  height: 38px;
  transform: translateY(-50%);
}

body[data-dr-brand-surface="admin"] #header h1,
body[data-dr-brand-surface="admin"] #login-box h2,
body[data-dr-brand-surface="viewer"] #toolbar label,
body[data-dr-brand-surface="web-viewer"] #chrome .brand {
  color: var(--dr-brand-text);
}

body[data-dr-brand-surface="admin"] #header h1,
body[data-dr-brand-surface="admin"] #login-box h2,
body[data-dr-brand-surface="viewer"] #token-prompt > span:first-child,
body[data-dr-brand-surface="web-viewer"] #connect h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

body[data-dr-brand-surface="admin"] #header h1 {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body[data-dr-brand-surface="admin"] #login-box h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body[data-dr-brand-surface="admin"] .container {
  max-width: 1480px;
  padding: 24px 20px 28px;
}

body[data-dr-brand-surface="admin"] .card,
body[data-dr-brand-surface="admin"] #login-box,
body[data-dr-brand-surface="viewer"] #helpModalBox,
body[data-dr-brand-surface="viewer"] #connect-form,
body[data-dr-brand-surface="web-viewer"] #connect .card {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--dr-brand-border);
  border-radius: 24px;
  box-shadow: var(--dr-brand-shadow);
}

body[data-dr-brand-surface="admin"] .card-header,
body[data-dr-brand-surface="admin"] .hist-filter-row,
body[data-dr-brand-surface="admin"] .perm-session-title {
  background: rgba(246, 249, 254, 0.92);
  border-bottom-color: var(--dr-brand-border);
}

body[data-dr-brand-surface="admin"] .card-header h2,
body[data-dr-brand-surface="admin"] .stat-value,
body[data-dr-brand-surface="admin"] #login-box h2,
body[data-dr-brand-surface="viewer"] #helpModalBox h2,
body[data-dr-brand-surface="viewer"] #overlay-title,
body[data-dr-brand-surface="web-viewer"] #overlay .msg {
  color: var(--dr-brand-text);
}

body[data-dr-brand-surface="admin"] .stat-label,
body[data-dr-brand-surface="admin"] .stat-sub,
body[data-dr-brand-surface="admin"] .empty-state,
body[data-dr-brand-surface="admin"] .form-group label,
body[data-dr-brand-surface="admin"] .hist-filter-row label,
body[data-dr-brand-surface="viewer"] #helpModalBox th,
body[data-dr-brand-surface="viewer"] #helpModalBox .help-footer,
body[data-dr-brand-surface="web-viewer"] #overlay .sub,
body[data-dr-brand-surface="web-viewer"] #stats {
  color: var(--dr-brand-muted);
}

body[data-dr-brand-surface="admin"] table thead th,
body[data-dr-brand-surface="admin"] tbody td,
body[data-dr-brand-surface="viewer"] #helpModalBox td,
body[data-dr-brand-surface="web-viewer"] #connect p,
body[data-dr-brand-surface="web-viewer"] #connect label {
  color: var(--dr-brand-text);
}

body[data-dr-brand-surface="admin"] tbody tr:hover td,
body[data-dr-brand-surface="admin"] .streaming-live td,
body[data-dr-brand-surface="admin"] .streaming-stale td {
  background: #f7faff;
}

body[data-dr-brand-surface="admin"] .badge,
body[data-dr-brand-surface="admin"] .btn-sm,
body[data-dr-brand-surface="admin"] .btn-primary,
body[data-dr-brand-surface="admin"] .tier-select,
body[data-dr-brand-surface="viewer"] button,
body[data-dr-brand-surface="viewer"] #toolbar input[type="text"],
body[data-dr-brand-surface="viewer"] #helpModalBox kbd,
body[data-dr-brand-surface="web-viewer"] .btn,
body[data-dr-brand-surface="web-viewer"] #connect input,
body[data-dr-brand-surface="web-viewer"] .pill {
  border-radius: 12px;
}

body[data-dr-brand-surface="admin"] button[style*="background:#1d5fff"],
body[data-dr-brand-surface="admin"] button[style*="background: #1d5fff"],
body[data-dr-brand-surface="admin"] button[style*="background:#0078d4"],
body[data-dr-brand-surface="admin"] button[style*="background: #0078d4"],
body[data-dr-brand-surface="admin"] button[style*="background:#1a73e8"],
body[data-dr-brand-surface="admin"] button[style*="background: #1a73e8"],
body[data-dr-brand-surface="viewer"] button[style*="background:#1d5fff"],
body[data-dr-brand-surface="viewer"] button[style*="background: #1d5fff"],
body[data-dr-brand-surface="viewer"] button[style*="background:#0078d4"],
body[data-dr-brand-surface="viewer"] button[style*="background: #0078d4"],
body[data-dr-brand-surface="viewer"] button[style*="background:#1a73e8"],
body[data-dr-brand-surface="viewer"] button[style*="background: #1a73e8"],
body[data-dr-brand-surface="web-viewer"] button[style*="background:#1d5fff"],
body[data-dr-brand-surface="web-viewer"] button[style*="background: #1d5fff"],
body[data-dr-brand-surface="web-viewer"] button[style*="background:#0078d4"],
body[data-dr-brand-surface="web-viewer"] button[style*="background: #0078d4"],
body[data-dr-brand-surface="web-viewer"] button[style*="background:#1a73e8"],
body[data-dr-brand-surface="web-viewer"] button[style*="background: #1a73e8"] {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.30) !important;
}

body[data-dr-brand-surface="admin"] button[style*="background:#1a9a5e"],
body[data-dr-brand-surface="admin"] button[style*="background: #1a9a5e"],
body[data-dr-brand-surface="viewer"] button[style*="background:#1a9a5e"],
body[data-dr-brand-surface="viewer"] button[style*="background: #1a9a5e"],
body[data-dr-brand-surface="web-viewer"] button[style*="background:#1a9a5e"],
body[data-dr-brand-surface="web-viewer"] button[style*="background: #1a9a5e"] {
  background: linear-gradient(180deg, #22C55E 0%, #16A34A 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 24px rgba(26, 154, 94, 0.18) !important;
}

body[data-dr-brand-surface="admin"] a,
body[data-dr-brand-surface="viewer"] a,
body[data-dr-brand-surface="web-viewer"] a,
body[data-dr-brand-surface="admin"] [style*="color:#1d5fff"],
body[data-dr-brand-surface="admin"] [style*="color: #1d5fff"],
body[data-dr-brand-surface="viewer"] [style*="color:#1d5fff"],
body[data-dr-brand-surface="viewer"] [style*="color: #1d5fff"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#1d5fff"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #1d5fff"] {
  color: var(--dr-brand-accent) !important;
}

body[data-dr-brand-surface="admin"] [style*="color:#1a9a5e"],
body[data-dr-brand-surface="admin"] [style*="color: #1a9a5e"],
body[data-dr-brand-surface="viewer"] [style*="color:#1a9a5e"],
body[data-dr-brand-surface="viewer"] [style*="color: #1a9a5e"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#1a9a5e"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #1a9a5e"] {
  color: var(--dr-brand-success) !important;
}

body[data-dr-brand-surface="admin"] .btn-primary,
body[data-dr-brand-surface="admin"] #btn-logout,
body[data-dr-brand-surface="admin"] .btn-sm,
body[data-dr-brand-surface="viewer"] button,
body[data-dr-brand-surface="web-viewer"] .btn,
body[data-dr-brand-surface="web-viewer"] #connect button {
  border: 1px solid var(--dr-brand-border-strong);
  background: var(--dr-brand-surface-soft);
  color: var(--dr-brand-text);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) inset;
}

body[data-dr-brand-surface="admin"] .btn-primary,
body[data-dr-brand-surface="viewer"] #btn-connect-form,
body[data-dr-brand-surface="web-viewer"] #connect button {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.30);
}

body[data-dr-brand-surface="admin"] .btn-sm.danger,
body[data-dr-brand-surface="admin"] #btn-logout.danger,
body[data-dr-brand-surface="web-viewer"] .btn.danger {
  border-color: rgba(214, 62, 62, 0.28);
  color: var(--dr-brand-danger);
}

body[data-dr-brand-surface="admin"] .btn-sm:hover,
body[data-dr-brand-surface="admin"] .btn-primary:hover,
body[data-dr-brand-surface="admin"] #btn-logout:hover,
body[data-dr-brand-surface="viewer"] button:hover,
body[data-dr-brand-surface="web-viewer"] .btn:hover,
body[data-dr-brand-surface="web-viewer"] #connect button:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
}

body[data-dr-brand-surface="admin"] .form-group input,
body[data-dr-brand-surface="admin"] .tier-select,
body[data-dr-brand-surface="admin"] .hist-filter-row input,
body[data-dr-brand-surface="viewer"] #toolbar input[type="text"],
body[data-dr-brand-surface="viewer"] #connect-form input,
body[data-dr-brand-surface="web-viewer"] #connect input {
  background: #ffffff;
  border: 1px solid var(--dr-brand-border);
  color: var(--dr-brand-text);
  box-shadow: none;
}

body[data-dr-brand-surface="admin"] .form-group input:focus,
body[data-dr-brand-surface="admin"] .tier-select:focus,
body[data-dr-brand-surface="admin"] .hist-filter-row input:focus,
body[data-dr-brand-surface="viewer"] #toolbar input[type="text"]:focus,
body[data-dr-brand-surface="viewer"] #connect-form input:focus,
body[data-dr-brand-surface="web-viewer"] #connect input:focus {
  outline: 2px solid rgba(37, 99, 235, 0.30);
  outline-offset: 2px;
  border-color: rgba(37, 99, 235, 0.32);
}

body[data-dr-brand-surface="admin"] .badge-active,
body[data-dr-brand-surface="admin"] .badge-running,
body[data-dr-brand-surface="admin"] .badge-succeeded,
body[data-dr-brand-surface="admin"] .badge-direct {
  background: rgba(26, 154, 94, 0.12);
  border-color: rgba(26, 154, 94, 0.24);
  color: var(--dr-brand-success);
}

body[data-dr-brand-surface="admin"] .badge-pending,
body[data-dr-brand-surface="admin"] .badge-queued,
body[data-dr-brand-surface="admin"] .badge-warning,
body[data-dr-brand-surface="admin"] .badge-relay {
  background: rgba(197, 138, 16, 0.12);
  border-color: rgba(197, 138, 16, 0.24);
  color: var(--dr-brand-warning);
}

body[data-dr-brand-surface="admin"] .badge-failed,
body[data-dr-brand-surface="admin"] .badge-danger,
body[data-dr-brand-surface="admin"] .badge-offline {
  background: rgba(214, 62, 62, 0.12);
  border-color: rgba(214, 62, 62, 0.24);
  color: var(--dr-brand-danger);
}

body[data-dr-brand-surface="admin"] .badge-proof,
body[data-dr-brand-surface="admin"] .badge-offload,
body[data-dr-brand-surface="admin"] .badge-free,
body[data-dr-brand-surface="admin"] .badge-pro,
body[data-dr-brand-surface="admin"] .badge-business,
body[data-dr-brand-surface="admin"] .badge-fallback {
  background: rgba(37, 99, 235, 0.08);
  border-color: rgba(37, 99, 235, 0.16);
  color: var(--dr-brand-accent);
}

body[data-dr-brand-surface="admin"] .perm-session-block,
body[data-dr-brand-surface="admin"] .hist-filter-row,
body[data-dr-brand-surface="admin"] .table-wrap,
body[data-dr-brand-surface="viewer"] #helpModalBox table {
  overflow: hidden;
}

body[data-dr-brand-surface="viewer"] #toolbar,
body[data-dr-brand-surface="web-viewer"] #chrome {
  min-height: 64px;
  gap: 10px;
  padding-right: 16px;
}

body[data-dr-brand-surface="viewer"] #main,
body[data-dr-brand-surface="viewer"] #frame-area,
body[data-dr-brand-surface="web-viewer"] #stage {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.06), transparent 40%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

body[data-dr-brand-surface="viewer"] #overlay,
body[data-dr-brand-surface="web-viewer"] #overlay,
body[data-dr-brand-surface="web-viewer"] #connect {
  background:
    radial-gradient(circle at top, rgba(37, 99, 235, 0.08), transparent 35%),
    rgba(245, 248, 253, 0.92);
}

body[data-dr-brand-surface="viewer"] #helpModalBox,
body[data-dr-brand-surface="viewer"] #connect-form,
body[data-dr-brand-surface="web-viewer"] #connect .card {
  box-shadow: var(--dr-brand-shadow-strong);
}

body[data-dr-brand-surface="viewer"] #overlay-icon,
body[data-dr-brand-surface="viewer"] #quality-indicator,
body[data-dr-brand-surface="viewer"] #overlay-sub,
body[data-dr-brand-surface="web-viewer"] #route-text,
body[data-dr-brand-surface="web-viewer"] #conn-text,
body[data-dr-brand-surface="web-viewer"] #overlay-sub {
  color: var(--dr-brand-muted);
}

body[data-dr-brand-surface="viewer"] .remote-cursor {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.2);
}

body[data-dr-brand-surface="viewer"] .codec-tag,
body[data-dr-brand-surface="web-viewer"] .pill {
  background: var(--dr-brand-pill);
  border: 1px solid var(--dr-brand-border);
  color: var(--dr-brand-text);
}

body[data-dr-brand-surface="viewer"] .codec-tag,
body[data-dr-brand-surface="web-viewer"] .pill.ok,
body[data-dr-brand-surface="web-viewer"] .pill.warn,
body[data-dr-brand-surface="web-viewer"] .pill.err {
  font-weight: 600;
}

body[data-dr-brand-surface="viewer"] .pill.ok,
body[data-dr-brand-surface="web-viewer"] .pill.ok {
  background: rgba(26, 154, 94, 0.12);
  color: var(--dr-brand-success);
  border-color: rgba(26, 154, 94, 0.24);
}

body[data-dr-brand-surface="viewer"] .pill.warn,
body[data-dr-brand-surface="web-viewer"] .pill.warn {
  background: rgba(197, 138, 16, 0.14);
  color: var(--dr-brand-warning);
  border-color: rgba(197, 138, 16, 0.24);
}

body[data-dr-brand-surface="viewer"] .pill.err,
body[data-dr-brand-surface="web-viewer"] .pill.err {
  background: rgba(214, 62, 62, 0.14);
  color: var(--dr-brand-danger);
  border-color: rgba(214, 62, 62, 0.24);
}

body[data-dr-brand-surface="viewer"] #remote-cmd-menu,
body[data-dr-brand-surface="viewer"] #helpModalBox,
body[data-dr-brand-surface="viewer"] #audit-log-panel,
body[data-dr-brand-surface="web-viewer"] #connect .card {
  border-radius: 24px;
}

body[data-dr-brand-surface="viewer"] #remote-cmd-menu,
body[data-dr-brand-surface="viewer"] #audit-log-panel {
  background: rgba(255, 255, 255, 0.97) !important;
  border: 1px solid var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
  box-shadow: var(--dr-brand-shadow-strong) !important;
}

body[data-dr-brand-surface="viewer"] #pin-modal,
body[data-dr-brand-surface="viewer"] .session-end-card,
body[data-dr-brand-surface="viewer"] #recordings-panel,
body[data-dr-brand-surface="viewer"] #clipboard-history-panel,
body[data-dr-brand-surface="viewer"] #permissions-panel,
body[data-dr-brand-surface="viewer"] #wol-panel,
body[data-dr-brand-surface="viewer"] #auto-quality-panel,
body[data-dr-brand-surface="viewer"] #res-popover,
body[data-dr-brand-surface="viewer"] #contacts-panel,
body[data-dr-brand-surface="viewer"] #env-panel,
body[data-dr-brand-surface="viewer"] #fn-key-pad,
body[data-dr-brand-surface="viewer"] #pwa-install-banner,
body[data-dr-brand-surface="viewer"] #notes-panel,
body[data-dr-brand-surface="viewer"] #chat-panel,
body[data-dr-brand-surface="viewer"] #saved-panel,
body[data-dr-brand-surface="viewer"] #launch-app-panel,
body[data-dr-brand-surface="viewer"] #audit-log-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
  box-shadow: var(--dr-brand-shadow-strong) !important;
}

body[data-dr-brand-surface="viewer"] #pin-modal h3,
body[data-dr-brand-surface="viewer"] #notes-header span,
body[data-dr-brand-surface="viewer"] #chat-header span,
body[data-dr-brand-surface="viewer"] #permissions-header span,
body[data-dr-brand-surface="viewer"] #wol-header span,
body[data-dr-brand-surface="viewer"] #rp-header span,
body[data-dr-brand-surface="viewer"] #chp-header span,
body[data-dr-brand-surface="viewer"] #env-panel-header span,
body[data-dr-brand-surface="viewer"] #audit-log-panel strong,
body[data-dr-brand-surface="viewer"] #special-keys-menu button,
body[data-dr-brand-surface="viewer"] .session-end-card h3 {
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] #pin-inp,
body[data-dr-brand-surface="viewer"] #notes-area,
body[data-dr-brand-surface="viewer"] #chat-input,
body[data-dr-brand-surface="viewer"] .wol-field input,
body[data-dr-brand-surface="viewer"] #env-search,
body[data-dr-brand-surface="viewer"] #launch-app-custom-input,
body[data-dr-brand-surface="viewer"] #saved-panel input,
body[data-dr-brand-surface="viewer"] #totp-code-input,
body[data-dr-brand-surface="viewer"] #two-fa-code,
body[data-dr-brand-surface="viewer"] #branding-banner {
  background: #ffffff !important;
  border-color: var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] #notes-panel,
body[data-dr-brand-surface="viewer"] #chat-panel,
body[data-dr-brand-surface="viewer"] #permissions-panel,
body[data-dr-brand-surface="viewer"] #wol-panel,
body[data-dr-brand-surface="viewer"] #recordings-panel,
body[data-dr-brand-surface="viewer"] #clipboard-history-panel {
  overflow: hidden;
}

body[data-dr-brand-surface="viewer"] #notes-header,
body[data-dr-brand-surface="viewer"] #chat-header,
body[data-dr-brand-surface="viewer"] #permissions-header,
body[data-dr-brand-surface="viewer"] #wol-header,
body[data-dr-brand-surface="viewer"] #rp-header,
body[data-dr-brand-surface="viewer"] #chp-header,
body[data-dr-brand-surface="viewer"] #env-panel-header,
body[data-dr-brand-surface="viewer"] #special-keys-menu,
body[data-dr-brand-surface="viewer"] #session-end-modal .session-end-card,
body[data-dr-brand-surface="viewer"] #launch-app-panel,
body[data-dr-brand-surface="viewer"] #saved-panel {
  background: rgba(246, 249, 254, 0.94) !important;
}

body[data-dr-brand-surface="viewer"] #notes-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #chat-messages::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #permissions-body::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #wol-panel::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #res-popover::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #contacts-panel::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #recordings-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #chp-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #env-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18) !important;
}

body[data-dr-brand-surface="viewer"] .note-item,
body[data-dr-brand-surface="viewer"] .chat-msg,
body[data-dr-brand-surface="viewer"] .rp-entry,
body[data-dr-brand-surface="viewer"] .chp-item,
body[data-dr-brand-surface="viewer"] .perm-row,
body[data-dr-brand-surface="viewer"] .env-row,
body[data-dr-brand-surface="viewer"] .res-opt,
body[data-dr-brand-surface="viewer"] .wol-field input,
body[data-dr-brand-surface="viewer"] #res-popover button,
body[data-dr-brand-surface="viewer"] #contacts-panel .cp-row {
  background: #ffffff !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] .chat-bubble.from-host,
body[data-dr-brand-surface="viewer"] .session-end-value.clickable,
body[data-dr-brand-surface="viewer"] #btn-session-end-reconnect,
body[data-dr-brand-surface="viewer"] #btn-connect-form,
body[data-dr-brand-surface="viewer"] #btn-pin-submit,
body[data-dr-brand-surface="viewer"] #btn-wol-send,
body[data-dr-brand-surface="viewer"] #btn-notes-save,
body[data-dr-brand-surface="viewer"] #btn-chat-send,
body[data-dr-brand-surface="viewer"] #launch-app-custom-btn,
body[data-dr-brand-surface="viewer"] #aq-apply-btn,
body[data-dr-brand-surface="viewer"] #btn-contacts-add,
body[data-dr-brand-surface="viewer"] .btn-perm-request {
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
}

body[data-dr-brand-surface="viewer"] #btn-session-end-close,
body[data-dr-brand-surface="viewer"] #btn-pin-cancel,
body[data-dr-brand-surface="viewer"] #btn-wol-close,
body[data-dr-brand-surface="viewer"] #btn-notes-close,
body[data-dr-brand-surface="viewer"] #btn-chat-close,
body[data-dr-brand-surface="viewer"] #btn-permissions-close,
body[data-dr-brand-surface="viewer"] #btn-rp-close,
body[data-dr-brand-surface="viewer"] #btn-chp-close,
body[data-dr-brand-surface="viewer"] #btn-env-close,
body[data-dr-brand-surface="viewer"] #aq-reset-btn,
body[data-dr-brand-surface="viewer"] #btn-contacts-close,
body[data-dr-brand-surface="viewer"] #btn-session-end-reconnect {
  background: #f0f4fb !important;
  border: 1px solid var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] .rp-btn-dl,
body[data-dr-brand-surface="viewer"] .cp-connect-btn,
body[data-dr-brand-surface="viewer"] .fn-btn,
body[data-dr-brand-surface="viewer"] .sk-btn,
body[data-dr-brand-surface="viewer"] .res-opt,
body[data-dr-brand-surface="viewer"] #launch-app-grid button,
body[data-dr-brand-surface="viewer"] #special-keys-menu button {
  background: #ffffff !important;
  border: 1px solid var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] .rp-btn-del,
body[data-dr-brand-surface="viewer"] #btn-wol-send.invalid,
body[data-dr-brand-surface="viewer"] #btn-local-record.recording-active,
body[data-dr-brand-surface="viewer"] .fn-btn-close {
  background: rgba(214, 62, 62, 0.08) !important;
  border: 1px solid rgba(214, 62, 62, 0.24) !important;
  color: var(--dr-brand-danger) !important;
}

body[data-dr-brand-surface="viewer"] #aq-status,
body[data-dr-brand-surface="viewer"] #wol-status,
body[data-dr-brand-surface="viewer"] #permissions-note,
body[data-dr-brand-surface="viewer"] #notes-wordcount,
body[data-dr-brand-surface="viewer"] #chp-empty,
body[data-dr-brand-surface="viewer"] #chat-empty,
body[data-dr-brand-surface="viewer"] #env-panel .env-row-val,
body[data-dr-brand-surface="viewer"] #contacts-panel .cp-device,
body[data-dr-brand-surface="viewer"] .rp-entry-meta,
body[data-dr-brand-surface="viewer"] .session-end-label {
  color: var(--dr-brand-muted) !important;
}

body[data-dr-brand-surface="viewer"] #reconnect-bar {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--dr-brand-border);
  color: var(--dr-brand-muted);
  box-shadow: var(--dr-brand-shadow);
}

body[data-dr-brand-surface="viewer"] #reconnect-banner-text,
body[data-dr-brand-surface="viewer"] #remote-cmd-menu button,
body[data-dr-brand-surface="viewer"] #audit-log-panel strong {
  color: var(--dr-brand-text);
}

body[data-dr-brand-surface="admin"] [style*="background:#1a1a1a"],
body[data-dr-brand-surface="admin"] [style*="background: #1a1a1a"],
body[data-dr-brand-surface="admin"] [style*="background:#1a1d21"],
body[data-dr-brand-surface="admin"] [style*="background: #1a1d21"],
body[data-dr-brand-surface="admin"] [style*="background:#242424"],
body[data-dr-brand-surface="admin"] [style*="background: #242424"],
body[data-dr-brand-surface="admin"] [style*="background:#1a1a35"],
body[data-dr-brand-surface="admin"] [style*="background: #1a1a35"],
body[data-dr-brand-surface="admin"] [style*="background:#1a1a2e"],
body[data-dr-brand-surface="admin"] [style*="background: #1a1a2e"],
body[data-dr-brand-surface="admin"] [style*="background:#1a1a30"],
body[data-dr-brand-surface="admin"] [style*="background: #1a1a30"],
body[data-dr-brand-surface="admin"] [style*="background:#1e1e1e"],
body[data-dr-brand-surface="admin"] [style*="background: #1e1e1e"],
body[data-dr-brand-surface="admin"] [style*="background:#2a2a2a"],
body[data-dr-brand-surface="admin"] [style*="background: #2a2a2a"],
body[data-dr-brand-surface="admin"] [style*="background:#2a2a55"],
body[data-dr-brand-surface="admin"] [style*="background: #2a2a55"],
body[data-dr-brand-surface="admin"] [style*="background:#2a4a2a"],
body[data-dr-brand-surface="admin"] [style*="background: #2a4a2a"],
body[data-dr-brand-surface="admin"] [style*="background:#111"],
body[data-dr-brand-surface="admin"] [style*="background: #111"],
body[data-dr-brand-surface="admin"] [style*="background:#101010"],
body[data-dr-brand-surface="viewer"] [style*="background:#1a1a1a"],
body[data-dr-brand-surface="viewer"] [style*="background: #1a1a1a"],
body[data-dr-brand-surface="viewer"] [style*="background:#1a1d21"],
body[data-dr-brand-surface="viewer"] [style*="background: #1a1d21"],
body[data-dr-brand-surface="viewer"] [style*="background:#242424"],
body[data-dr-brand-surface="viewer"] [style*="background: #242424"],
body[data-dr-brand-surface="viewer"] [style*="background:#1a1a35"],
body[data-dr-brand-surface="viewer"] [style*="background: #1a1a35"],
body[data-dr-brand-surface="viewer"] [style*="background:#1a1a2e"],
body[data-dr-brand-surface="viewer"] [style*="background: #1a1a2e"],
body[data-dr-brand-surface="viewer"] [style*="background:#1a1a30"],
body[data-dr-brand-surface="viewer"] [style*="background: #1a1a30"],
body[data-dr-brand-surface="viewer"] [style*="background:#1e1e1e"],
body[data-dr-brand-surface="viewer"] [style*="background: #1e1e1e"],
body[data-dr-brand-surface="viewer"] [style*="background:#2a2a2a"],
body[data-dr-brand-surface="viewer"] [style*="background: #2a2a2a"],
body[data-dr-brand-surface="viewer"] [style*="background:#2a2a55"],
body[data-dr-brand-surface="viewer"] [style*="background: #2a2a55"],
body[data-dr-brand-surface="viewer"] [style*="background:#2a4a2a"],
body[data-dr-brand-surface="viewer"] [style*="background: #2a4a2a"],
body[data-dr-brand-surface="viewer"] [style*="background:#111827"],
body[data-dr-brand-surface="viewer"] [style*="background: #111827"],
body[data-dr-brand-surface="viewer"] [style*="background:#101010"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#1a1a1a"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #1a1a1a"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#1a1d21"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #1a1d21"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#242424"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #242424"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#1a1a35"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #1a1a35"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#1a1a2e"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #1a1a2e"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#1a1a30"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #1a1a30"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#1e1e1e"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #1e1e1e"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#2a2a2a"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #2a2a2a"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#2a2a55"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #2a2a55"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#2a4a2a"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #2a4a2a"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#111827"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #111827"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#101010"] {
  background: var(--dr-brand-surface) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="admin"] [style*="border:1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #444"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #444"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #242424"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #444"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #444"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #444"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #444"] {
  border-color: var(--dr-brand-border) !important;
}

body[data-dr-brand-surface="admin"] [style*="border-top:1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border-top: 1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border-bottom:1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border-bottom: 1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border-top:1px solid #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="border-top: 1px solid #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="border-bottom:1px solid #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="border-bottom: 1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border-top:1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border-top: 1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border-bottom:1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border-bottom: 1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border-top:1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border-top: 1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border-bottom:1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border-bottom: 1px solid #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="border-top:1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border-top: 1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border-bottom:1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border-bottom: 1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border-top:1px solid #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="border-top: 1px solid #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="border-bottom:1px solid #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="border-bottom: 1px solid #2a2a45"] {
  border-color: var(--dr-brand-border) !important;
}

body[data-dr-brand-surface="admin"] [style*="color:#e0e0e0"],
body[data-dr-brand-surface="admin"] [style*="color: #e0e0e0"],
body[data-dr-brand-surface="admin"] [style*="color:#d8d8d8"],
body[data-dr-brand-surface="admin"] [style*="color: #d8d8d8"],
body[data-dr-brand-surface="admin"] [style*="color:#c0c0e0"],
body[data-dr-brand-surface="admin"] [style*="color: #c0c0e0"],
body[data-dr-brand-surface="admin"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="admin"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="admin"] [style*="color:#e0e0f0"],
body[data-dr-brand-surface="admin"] [style*="color: #e0e0f0"],
body[data-dr-brand-surface="admin"] [style*="color:#8888bb"],
body[data-dr-brand-surface="admin"] [style*="color: #8888bb"],
body[data-dr-brand-surface="admin"] [style*="color:#ccc"],
body[data-dr-brand-surface="admin"] [style*="color: #ccc"],
body[data-dr-brand-surface="viewer"] [style*="color:#e0e0e0"],
body[data-dr-brand-surface="viewer"] [style*="color: #e0e0e0"],
body[data-dr-brand-surface="viewer"] [style*="color:#d8d8d8"],
body[data-dr-brand-surface="viewer"] [style*="color: #d8d8d8"],
body[data-dr-brand-surface="viewer"] [style*="color:#c0c0e0"],
body[data-dr-brand-surface="viewer"] [style*="color: #c0c0e0"],
body[data-dr-brand-surface="viewer"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="viewer"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="viewer"] [style*="color:#e0e0f0"],
body[data-dr-brand-surface="viewer"] [style*="color: #e0e0f0"],
body[data-dr-brand-surface="viewer"] [style*="color:#8888bb"],
body[data-dr-brand-surface="viewer"] [style*="color: #8888bb"],
body[data-dr-brand-surface="viewer"] [style*="color:#ccc"],
body[data-dr-brand-surface="viewer"] [style*="color: #ccc"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#e0e0e0"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #e0e0e0"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#d8d8d8"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #d8d8d8"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#c0c0e0"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #c0c0e0"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#e0e0f0"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #e0e0f0"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#8888bb"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #8888bb"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#ccc"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #ccc"] {
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="admin"] [style*="background:#0f0f1a"],
body[data-dr-brand-surface="admin"] [style*="background: #0f0f1a"],
body[data-dr-brand-surface="admin"] [style*="background:#161625"],
body[data-dr-brand-surface="admin"] [style*="background: #161625"],
body[data-dr-brand-surface="viewer"] [style*="background:#0f0f1a"],
body[data-dr-brand-surface="viewer"] [style*="background: #0f0f1a"],
body[data-dr-brand-surface="viewer"] [style*="background:#161625"],
body[data-dr-brand-surface="viewer"] [style*="background: #161625"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#0f0f1a"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #0f0f1a"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#161625"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #161625"] {
  background: var(--dr-brand-surface) !important;
}

body[data-dr-brand-surface="admin"] [style*="border:1px solid #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #333"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #444"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #444"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #555"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #555"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #374151"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #374151"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #333"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #444"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #444"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #555"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #555"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #374151"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #374151"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #333"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #444"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #444"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #555"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #555"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #374151"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #374151"] {
  border-color: var(--dr-brand-border) !important;
}

body[data-dr-brand-surface="admin"] [style*="color:#e0e0e0"],
body[data-dr-brand-surface="admin"] [style*="color: #e0e0e0"],
body[data-dr-brand-surface="admin"] [style*="color:#d8d8d8"],
body[data-dr-brand-surface="admin"] [style*="color: #d8d8d8"],
body[data-dr-brand-surface="admin"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="admin"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="admin"] [style*="color:#ccc"],
body[data-dr-brand-surface="admin"] [style*="color: #ccc"],
body[data-dr-brand-surface="admin"] [style*="color:#aaa"],
body[data-dr-brand-surface="admin"] [style*="color: #aaa"],
body[data-dr-brand-surface="admin"] [style*="color:#888"],
body[data-dr-brand-surface="admin"] [style*="color: #888"],
body[data-dr-brand-surface="viewer"] [style*="color:#e0e0e0"],
body[data-dr-brand-surface="viewer"] [style*="color: #e0e0e0"],
body[data-dr-brand-surface="viewer"] [style*="color:#d8d8d8"],
body[data-dr-brand-surface="viewer"] [style*="color: #d8d8d8"],
body[data-dr-brand-surface="viewer"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="viewer"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="viewer"] [style*="color:#ccc"],
body[data-dr-brand-surface="viewer"] [style*="color: #ccc"],
body[data-dr-brand-surface="viewer"] [style*="color:#aaa"],
body[data-dr-brand-surface="viewer"] [style*="color: #aaa"],
body[data-dr-brand-surface="viewer"] [style*="color:#888"],
body[data-dr-brand-surface="viewer"] [style*="color: #888"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#e0e0e0"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #e0e0e0"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#d8d8d8"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #d8d8d8"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#ccc"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #ccc"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#aaa"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #aaa"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#888"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #888"] {
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="admin"] [style*="background:#111827"],
body[data-dr-brand-surface="admin"] [style*="background: #111827"],
body[data-dr-brand-surface="admin"] [style*="background:#2a2a45"],
body[data-dr-brand-surface="admin"] [style*="background: #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="background:#333"],
body[data-dr-brand-surface="admin"] [style*="background: #333"],
body[data-dr-brand-surface="admin"] [style*="background:#444"],
body[data-dr-brand-surface="admin"] [style*="background: #444"],
body[data-dr-brand-surface="admin"] [style*="background:#0f0f1a"],
body[data-dr-brand-surface="admin"] [style*="background: #0f0f1a"],
body[data-dr-brand-surface="admin"] [style*="background:#161625"],
body[data-dr-brand-surface="admin"] [style*="background: #161625"],
body[data-dr-brand-surface="admin"] [style*="background:#101010"],
body[data-dr-brand-surface="admin"] [style*="background: #101010"],
body[data-dr-brand-surface="admin"] [style*="background:#111"],
body[data-dr-brand-surface="admin"] [style*="background: #111"],
body[data-dr-brand-surface="viewer"] [style*="background:#111827"],
body[data-dr-brand-surface="viewer"] [style*="background: #111827"],
body[data-dr-brand-surface="viewer"] [style*="background:#2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="background: #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="background:#333"],
body[data-dr-brand-surface="viewer"] [style*="background: #333"],
body[data-dr-brand-surface="viewer"] [style*="background:#444"],
body[data-dr-brand-surface="viewer"] [style*="background: #444"],
body[data-dr-brand-surface="viewer"] [style*="background:#0f0f1a"],
body[data-dr-brand-surface="viewer"] [style*="background: #0f0f1a"],
body[data-dr-brand-surface="viewer"] [style*="background:#161625"],
body[data-dr-brand-surface="viewer"] [style*="background: #161625"],
body[data-dr-brand-surface="viewer"] [style*="background:#101010"],
body[data-dr-brand-surface="viewer"] [style*="background: #101010"],
body[data-dr-brand-surface="viewer"] [style*="background:#111"],
body[data-dr-brand-surface="viewer"] [style*="background: #111"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#111827"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #111827"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#333"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #333"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#444"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #444"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#0f0f1a"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #0f0f1a"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#161625"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #161625"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#101010"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #101010"],
body[data-dr-brand-surface="web-viewer"] [style*="background:#111"],
body[data-dr-brand-surface="web-viewer"] [style*="background: #111"] {
  background: var(--dr-brand-surface) !important;
}

body[data-dr-brand-surface="admin"] [style*="color:#fff"],
body[data-dr-brand-surface="admin"] [style*="color: #fff"],
body[data-dr-brand-surface="admin"] [style*="color:#e0eaff"],
body[data-dr-brand-surface="admin"] [style*="color: #e0eaff"],
body[data-dr-brand-surface="admin"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="admin"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="admin"] [style*="color:#eee"],
body[data-dr-brand-surface="admin"] [style*="color: #eee"],
body[data-dr-brand-surface="admin"] [style*="color:#ddd"],
body[data-dr-brand-surface="admin"] [style*="color: #ddd"],
body[data-dr-brand-surface="viewer"] [style*="color:#fff"],
body[data-dr-brand-surface="viewer"] [style*="color: #fff"],
body[data-dr-brand-surface="viewer"] [style*="color:#e0eaff"],
body[data-dr-brand-surface="viewer"] [style*="color: #e0eaff"],
body[data-dr-brand-surface="viewer"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="viewer"] [style*="color: #d0d0f0"],
body[data-dr-brand-surface="viewer"] [style*="color:#eee"],
body[data-dr-brand-surface="viewer"] [style*="color: #eee"],
body[data-dr-brand-surface="viewer"] [style*="color:#ddd"],
body[data-dr-brand-surface="viewer"] [style*="color: #ddd"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#fff"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #fff"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#e0eaff"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #e0eaff"],
body[data-dr-brand-surface="web-viewer"] [style*="color:#d0d0f0"],
body[data-dr-brand-surface="web-viewer"] [style*="color: #d0d0f0"] {
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="admin"] [style*="border:1px solid #555"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #555"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #374151"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #374151"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #2a2a45"],
body[data-dr-brand-surface="admin"] [style*="border:1px solid #334155"],
body[data-dr-brand-surface="admin"] [style*="border: 1px solid #334155"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #555"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #555"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #374151"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #374151"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #2a2a45"],
body[data-dr-brand-surface="viewer"] [style*="border:1px solid #334155"],
body[data-dr-brand-surface="viewer"] [style*="border: 1px solid #334155"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #555"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #555"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #374151"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #374151"],
body[data-dr-brand-surface="web-viewer"] [style*="border:1px solid #2a2a45"],
body[data-dr-brand-surface="web-viewer"] [style*="border: 1px solid #2a2a45"] {
  border-color: var(--dr-brand-border) !important;
}

@media (max-width: 960px) {
  body[data-dr-brand-surface="viewer"] #toolbar,
  body[data-dr-brand-surface="web-viewer"] #chrome {
    padding-left: 16px;
  }

  body[data-dr-brand-surface="viewer"] #toolbar::before,
  body[data-dr-brand-surface="web-viewer"] #chrome::before {
    display: none;
  }

  body[data-dr-brand-surface="viewer"] #token-prompt > span:first-child,
  body[data-dr-brand-surface="web-viewer"] #connect h1 {
    padding-left: 0;
  }

  body[data-dr-brand-surface="viewer"] #token-prompt > span:first-child::before,
  body[data-dr-brand-surface="web-viewer"] #connect h1::before {
    display: none;
  }
}

body[data-dr-brand-surface="viewer"] #notes-panel,
body[data-dr-brand-surface="viewer"] #chat-panel,
body[data-dr-brand-surface="viewer"] #files-panel,
body[data-dr-brand-surface="viewer"] #permissions-panel,
body[data-dr-brand-surface="viewer"] #wol-panel,
body[data-dr-brand-surface="viewer"] #auto-quality-panel,
body[data-dr-brand-surface="viewer"] #recordings-panel,
body[data-dr-brand-surface="viewer"] #clipboard-history-panel,
body[data-dr-brand-surface="viewer"] #terminal-panel,
body[data-dr-brand-surface="viewer"] #env-panel,
body[data-dr-brand-surface="viewer"] #session-end-modal .session-end-card,
body[data-dr-brand-surface="viewer"] #pin-modal,
body[data-dr-brand-surface="viewer"] #res-popover,
body[data-dr-brand-surface="viewer"] #contacts-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] #notes-header,
body[data-dr-brand-surface="viewer"] #chat-header,
body[data-dr-brand-surface="viewer"] #files-header,
body[data-dr-brand-surface="viewer"] #permissions-header,
body[data-dr-brand-surface="viewer"] #wol-header,
body[data-dr-brand-surface="viewer"] #rp-header,
body[data-dr-brand-surface="viewer"] #chp-header,
body[data-dr-brand-surface="viewer"] #terminal-header,
body[data-dr-brand-surface="viewer"] #env-panel-header,
body[data-dr-brand-surface="viewer"] #launch-app-panel .la-title {
  background: rgba(246, 249, 254, 0.94) !important;
  border-color: var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] #notes-area,
body[data-dr-brand-surface="viewer"] #chat-input,
body[data-dr-brand-surface="viewer"] #file-search,
body[data-dr-brand-surface="viewer"] #fb-search,
body[data-dr-brand-surface="viewer"] #terminal-input,
body[data-dr-brand-surface="viewer"] #env-search,
body[data-dr-brand-surface="viewer"] #pin-inp,
body[data-dr-brand-surface="viewer"] #clipboard-content,
body[data-dr-brand-surface="viewer"] .wol-field input,
body[data-dr-brand-surface="viewer"] .form-row input,
body[data-dr-brand-surface="viewer"] .form-row select,
body[data-dr-brand-surface="viewer"] .hist-filter-row input,
body[data-dr-brand-surface="viewer"] .hist-filter-row select,
body[data-dr-brand-surface="viewer"] #launch-app-custom-input,
body[data-dr-brand-surface="viewer"] #script-editor,
body[data-dr-brand-surface="viewer"] #script-lang {
  background: #ffffff !important;
  border: 1px solid var(--dr-brand-border) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] .note-item,
body[data-dr-brand-surface="viewer"] .chat-msg,
body[data-dr-brand-surface="viewer"] .rp-entry,
body[data-dr-brand-surface="viewer"] .chp-item,
body[data-dr-brand-surface="viewer"] .perm-row,
body[data-dr-brand-surface="viewer"] .env-row,
body[data-dr-brand-surface="viewer"] .res-opt,
body[data-dr-brand-surface="viewer"] .file-row,
body[data-dr-brand-surface="viewer"] .fb-row,
body[data-dr-brand-surface="viewer"] .terminal-tab,
body[data-dr-brand-surface="viewer"] .session-end-grid,
body[data-dr-brand-surface="viewer"] .contacts-row {
  background: #ffffff !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] #notes-list,
body[data-dr-brand-surface="viewer"] #chat-messages,
body[data-dr-brand-surface="viewer"] #file-list,
body[data-dr-brand-surface="viewer"] #fb-list,
body[data-dr-brand-surface="viewer"] #permissions-body,
body[data-dr-brand-surface="viewer"] #recordings-list,
body[data-dr-brand-surface="viewer"] #chp-list,
body[data-dr-brand-surface="viewer"] #terminal-output,
body[data-dr-brand-surface="viewer"] #env-list,
body[data-dr-brand-surface="viewer"] #contacts-panel,
body[data-dr-brand-surface="viewer"] #res-popover {
  background: #ffffff !important;
}

body[data-dr-brand-surface="viewer"] #notes-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #chat-messages::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #file-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #fb-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #permissions-body::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #recordings-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #chp-list::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #terminal-output::-webkit-scrollbar-thumb,
body[data-dr-brand-surface="viewer"] #env-list::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18) !important;
}

body[data-dr-brand-surface="viewer"] #annotationToolbar,
body[data-dr-brand-surface="viewer"] #special-keys-menu,
body[data-dr-brand-surface="viewer"] #launch-app-panel,
body[data-dr-brand-surface="viewer"] #saved-panel,
body[data-dr-brand-surface="viewer"] #bw-panel,
body[data-dr-brand-surface="viewer"] #info-panel {
  background: rgba(255, 255, 255, 0.98) !important;
  border: 1px solid var(--dr-brand-border) !important;
  box-shadow: var(--dr-brand-shadow-strong) !important;
  color: var(--dr-brand-text) !important;
}

body[data-dr-brand-surface="viewer"] #annotationToolbar button,
body[data-dr-brand-surface="viewer"] #launch-app-grid button,
body[data-dr-brand-surface="viewer"] #res-popover button,
body[data-dr-brand-surface="viewer"] #contacts-panel .cp-connect-btn,
body[data-dr-brand-surface="viewer"] #aq-apply-btn,
body[data-dr-brand-surface="viewer"] #aq-reset-btn,
body[data-dr-brand-surface="viewer"] #btn-env-refresh,
body[data-dr-brand-surface="viewer"] #btn-signup,
body[data-dr-brand-surface="viewer"] #btn-session-end-close,
body[data-dr-brand-surface="viewer"] #btn-session-end-reconnect,
body[data-dr-brand-surface="viewer"] #btn-notes-save,
body[data-dr-brand-surface="viewer"] #btn-chat-send,
body[data-dr-brand-surface="viewer"] #btn-wol-send,
body[data-dr-brand-surface="viewer"] #btn-pin-submit,
body[data-dr-brand-surface="viewer"] #btn-pin-cancel,
body[data-dr-brand-surface="viewer"] #btn-permissions-close,
body[data-dr-brand-surface="viewer"] #btn-files-close,
body[data-dr-brand-surface="viewer"] #btn-rp-close,
body[data-dr-brand-surface="viewer"] #btn-chp-close,
body[data-dr-brand-surface="viewer"] #btn-terminal-close,
body[data-dr-brand-surface="viewer"] #btn-env-close {
  border-color: var(--dr-brand-border) !important;
}

body[data-dr-brand-surface="viewer"] #notes-header span,
body[data-dr-brand-surface="viewer"] #chat-header span,
body[data-dr-brand-surface="viewer"] #files-header span,
body[data-dr-brand-surface="viewer"] #permissions-header span,
body[data-dr-brand-surface="viewer"] #wol-header span,
body[data-dr-brand-surface="viewer"] #rp-header span,
body[data-dr-brand-surface="viewer"] #chp-header span,
body[data-dr-brand-surface="viewer"] #terminal-header span,
body[data-dr-brand-surface="viewer"] #env-panel-header span,
body[data-dr-brand-surface="viewer"] #files-empty,
body[data-dr-brand-surface="viewer"] #chp-empty,
body[data-dr-brand-surface="viewer"] #chat-empty,
body[data-dr-brand-surface="viewer"] #notes-empty,
body[data-dr-brand-surface="viewer"] #wol-status,
body[data-dr-brand-surface="viewer"] #aq-status,
body[data-dr-brand-surface="viewer"] #notes-wordcount,
body[data-dr-brand-surface="viewer"] #session-end-recordings-link {
  color: var(--dr-brand-muted) !important;
}

/* ==========================================================================
   Reusable wizard stepper — .dr-wizard-steps
   A numbered-circle progress header for multi-step flows (e.g. the signup
   wizard). Add data-active="N" (1-based) on .dr-wizard-steps to light up the
   current step; steps before it get .is-done styling automatically via the
   [data-active] selectors below only when the host script also toggles the
   per-step classes. To keep it framework-free, the host page toggles
   .is-active / .is-done on each .dr-wizard-step; the base styles here cover
   the default (upcoming) look.
   ========================================================================== */
.dr-wizard-steps {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}
.dr-wizard-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  color: var(--dr-brand-subtle);
  font-size: 13px;
  font-weight: 600;
}
.dr-wizard-step .dr-wizard-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid var(--dr-brand-border-strong);
  background: var(--dr-brand-surface);
  color: var(--dr-brand-subtle);
  font-size: 13px;
  font-weight: 700;
  flex: 0 0 auto;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.dr-wizard-step .dr-wizard-label {
  white-space: nowrap;
}
.dr-wizard-sep {
  flex: 1 1 auto;
  height: 2px;
  min-width: 18px;
  margin: 0 12px;
  border-radius: 2px;
  background: var(--dr-brand-border-strong);
  transition: background .18s ease;
}
.dr-wizard-step.is-active {
  color: var(--dr-brand-text);
}
.dr-wizard-step.is-active .dr-wizard-num {
  border-color: var(--dr-brand-accent);
  background: linear-gradient(180deg, #3B82F6 0%, #2563EB 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.30);
}
.dr-wizard-step.is-done {
  color: var(--dr-brand-success);
}
.dr-wizard-step.is-done .dr-wizard-num {
  border-color: var(--dr-brand-success);
  background: rgba(26, 154, 94, 0.14);
  color: var(--dr-brand-success);
}
.dr-wizard-step.is-done .dr-wizard-sep,
.dr-wizard-sep.is-done {
  background: var(--dr-brand-success);
}
@media (max-width: 560px) {
  .dr-wizard-step .dr-wizard-label { display: none; }
  .dr-wizard-sep { margin: 0 8px; }
}

/* ==========================================================================
   Authority 2026-07-09 shared components
   Used by the customer web pages (login/signup/dashboard/pricing/billing/
   download). Class names are additive — nothing below restyles legacy ids.
   ========================================================================== */

/* Inline SVG brand mark (replaces the old PNG tile on app surfaces). */
.dr-mark {
  display: block;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}
.dr-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.dr-lockup .dr-wordmark {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--dr-text);
}

/* Compact brand pill — "Secure. Reliable. Effortless." (mockups 02/06). */
.dr-brand-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--dr-info-tint);
  color: var(--dr-blue);
  font-size: 13px;
  font-weight: 600;
}
.dr-brand-pill svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* Full-width brand strip (mockups 01/03/05). */
.dr-brand-strip {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-radius: 16px;
  background: var(--dr-surface);
  border: 1px solid var(--dr-border-hairline);
}
.dr-brand-strip .strip-badge {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dr-info-tint); color: var(--dr-blue);
}
.dr-brand-strip .strip-badge svg { width: 20px; height: 20px; }
.dr-brand-strip .strip-title { font-size: 16px; font-weight: 700; color: var(--dr-text); white-space: nowrap; }
.dr-brand-strip .strip-sep { width: 1px; align-self: stretch; background: var(--dr-border-hairline); }
.dr-brand-strip .strip-copy { font-size: 13px; color: var(--dr-text-2); line-height: 1.5; }
@media (max-width: 720px) {
  .dr-brand-strip { flex-wrap: wrap; }
  .dr-brand-strip .strip-sep { display: none; }
}

/* Status pills — dot + tinted background, fully rounded (mockup 01). */
.dr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dr-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.dr-pill.online    { background: var(--dr-success-tint); color: var(--dr-success); }
.dr-pill.connected { background: var(--dr-info-tint);    color: var(--dr-info); }
.dr-pill.away      { background: var(--dr-warning-tint); color: #B45309; }
.dr-pill.offline   { background: var(--dr-offline-tint); color: var(--dr-offline); }
.dr-pill.danger    { background: var(--dr-danger-tint);  color: var(--dr-danger); }
.dr-pill.secure    { background: var(--dr-info-tint);    color: var(--dr-info); }
.dr-pill.secure svg { width: 13px; height: 13px; flex: 0 0 auto; }

/* Icon tile — 44px rounded-12 blue-tint tile with a line icon (mockup 02/04). */
.dr-icon-tile {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dr-info-tint); color: var(--dr-blue);
}
.dr-icon-tile svg { width: 20px; height: 20px; }

/* Decorative dotted world-map motif (aria-hidden wherever it is used). */
.dr-worldmap { color: #CBD5E1; opacity: 0.9; max-width: 100%; height: auto; }