:root {
  color-scheme: dark;
  --bg: #000516;
  --bg2: #060a10;
  --surface: #0f172a;
  --surface2: #151920;
  --surface3: #161b22;
  --border: rgba(255, 255, 255, 0.10);
  --border2: rgba(148, 163, 184, 0.36);
  --blue: #FF8200;
  --blue-dim: rgba(255, 130, 0, 0.13);
  --green: #238636;
  --green-dim: rgba(35, 134, 54, 0.14);
  --amber: #d29922;
  --amber-dim: rgba(210, 153, 34, 0.14);
  --red: #f85149;
  --red-dim: rgba(248, 81, 73, 0.13);
  --purple: #FF8200;
  --purple-dim: rgba(255, 130, 0, 0.13);
  --orange: #FF8200;
  --orange-dim: rgba(255, 130, 0, 0.13);
  --text: #e6edf3;
  --text2: #cbd5e1;
  --text3: #94a3b8;
}

* {
  scrollbar-color: rgba(148, 163, 184, 0.38) transparent;
}

body {
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.82) 0, rgba(0, 5, 22, 0) 260px),
    #000516 !important;
  color: var(--text) !important;
}

body::selection,
*::selection {
  background: rgba(255, 130, 0, 0.35);
  color: #fff;
}

a {
  color: inherit;
}

img[src="/sentitel-logo.png"] {
  filter: drop-shadow(0 0 14px rgba(255, 130, 0, 0.28));
}

.topbar {
  background: rgba(6, 10, 16, 0.9) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(18px);
}

.topbar-brand,
.brand-name,
h1,
.page-title,
.panel-title,
.section-title,
.drop-title,
.profile-name,
.security-row-title,
.call-phone,
.modal-title {
  color: var(--text) !important;
}

.brand-sub,
.subtitle,
.page-sub,
.topbar-status,
.drop-sub,
.drop-hint,
.security-row-sub,
.call-info-mid,
.call-company,
.result-count,
.footer,
.signin-link,
.modal-body,
.field-label {
  color: var(--text3) !important;
}

.topbar-nav a,
.nav-link,
.nav-logout,
#settingsLink,
#adminLink,
.topbar a[href="/logout"] {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 999px !important;
  color: var(--text3) !important;
}

.topbar-nav a:hover,
.nav-link:hover,
#settingsLink:hover,
#adminLink:hover {
  background: rgba(255, 130, 0, 0.12) !important;
  border-color: rgba(255, 130, 0, 0.42) !important;
  color: #fff !important;
}

.topbar-nav a.active,
.nav-link.active {
  background: rgba(255, 130, 0, 0.16) !important;
  border-color: rgba(255, 130, 0, 0.48) !important;
  color: #FF8200 !important;
}

.nav-logout:hover,
.topbar-nav a.logout:hover {
  border-color: rgba(248, 81, 73, 0.55) !important;
  color: #f85149 !important;
}

.main-row {
  background: rgba(255, 255, 255, 0.08) !important;
}

.panel,
.phone-panel,
.transcript-panel,
.analysis-panel,
.log-panel,
.results-card,
.chat-card,
.analyzing-card,
.drop-zone,
.call-card,
.stat-card,
.detail-box,
.card,
.user-row,
.settings-card,
.modal-card,
.modal-scan-card,
.call-modal {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.panel,
.phone-panel,
.transcript-panel,
.analysis-panel {
  box-shadow: none;
}

.phone-panel,
.transcript-panel,
.analysis-panel,
.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    #0f172a !important;
}

.panel-header,
.risk-header,
.call-detail,
.profile-fields,
.pw-panel.open,
.field-row,
.detail-inner {
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.rh {
  background: rgba(255, 255, 255, 0.08) !important;
}

.rh:hover,
.rh.dragging {
  background: #FF8200 !important;
}

input,
textarea,
select,
.modal-input,
.chat-input,
.form-input,
.search-wrap input,
.modal-scan-chat-input {
  background: rgba(6, 10, 16, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.13) !important;
  color: var(--text) !important;
}

input::placeholder,
textarea::placeholder,
.modal-input::placeholder,
.chat-input::placeholder,
.form-input::placeholder {
  color: rgba(148, 163, 184, 0.78) !important;
}

input:focus,
textarea:focus,
.modal-input:focus,
.chat-input:focus,
.form-input:focus,
.search-wrap input:focus,
.modal-scan-chat-input:focus {
  border-color: #FF8200 !important;
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.18) !important;
}

.btn-upload,
.btn-send,
.btn-primary,
.btn.blue,
.btn-modal-search,
.modal-scan-chat-send {
  background: #FF8200 !important;
  border-color: #FF8200 !important;
  color: #060a10 !important;
  box-shadow: 0 14px 34px rgba(255, 130, 0, 0.18);
}

.btn-upload:hover,
.btn-send:hover,
.btn-primary:hover,
.btn.blue:hover,
.btn-modal-search:hover,
.modal-scan-chat-send:hover {
  background: #e57400 !important;
  border-color: #e57400 !important;
}

.btn-call,
.btn.green,
.btn-modal-call {
  background: #238636 !important;
  border-color: #238636 !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(35, 134, 54, 0.28) !important;
}

.btn-call.unverified,
.btn-call.searching {
  background: #30363d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text3) !important;
  box-shadow: none !important;
}

.btn-hang,
.btn.red,
.btn-delete:hover,
.btn-modal-stop {
  background: #f85149 !important;
  border-color: #f85149 !important;
  color: #fff !important;
  box-shadow: 0 16px 38px rgba(248, 81, 73, 0.28) !important;
}

.btn-modal-warn {
  background: rgba(248, 81, 73, 0.12) !important;
  border: 1px solid rgba(248, 81, 73, 0.42) !important;
  color: #ffb4ae !important;
}

.btn-modal-secondary,
.btn-camera,
.btn-clear,
.btn-copy,
.btn-export,
.btn-ghost,
.filter-btn,
.file-link,
.transcript-toggle button,
.btn-scan-another,
.btn-redact,
.btn-delete,
.btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: var(--text2) !important;
}

.btn-modal-secondary:hover,
.btn-camera:hover,
.btn-clear:hover,
.btn-copy:hover,
.btn-export:hover,
.btn-ghost:hover,
.filter-btn:hover,
.file-link:hover,
.transcript-toggle button:hover,
.btn-scan-another:hover,
.btn-redact:hover {
  background: rgba(255, 130, 0, 0.10) !important;
  border-color: rgba(255, 130, 0, 0.42) !important;
  color: #FF8200 !important;
}

.filter-btn.active-all,
.filter-btn.active-transcript,
.transcript-toggle button.active {
  background: rgba(255, 130, 0, 0.15) !important;
  border-color: rgba(255, 130, 0, 0.5) !important;
  color: #FF8200 !important;
}

.filter-btn.active-high,
.stage-pill.high-risk,
.stage-pill.critical,
.call-tag,
.error-box,
.msg-box.error {
  background: rgba(248, 81, 73, 0.12) !important;
  border-color: rgba(248, 81, 73, 0.38) !important;
  color: #ff9b95 !important;
}

.filter-btn.active-medium,
.stage-pill.suspicious,
.stage-pill.elevated {
  background: rgba(210, 153, 34, 0.14) !important;
  border-color: rgba(210, 153, 34, 0.38) !important;
  color: #e3b341 !important;
}

.filter-btn.active-low,
.stage-pill.benign,
.msg-box.success {
  background: rgba(35, 134, 54, 0.16) !important;
  border-color: rgba(63, 185, 80, 0.36) !important;
  color: #3fb950 !important;
}

.drop-zone {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    #0f172a !important;
  border-style: dashed !important;
  border-color: rgba(255, 130, 0, 0.25) !important;
}

.drop-zone:hover,
.drop-zone.drag-over {
  background: rgba(255, 130, 0, 0.09) !important;
  border-color: #FF8200 !important;
}

.drop-icon {
  color: #FF8200 !important;
  display: inline-flex;
}

.drop-icon svg,
.button-icon,
.flag-warning-icon,
.chat-family-icon,
.btn-call svg,
.btn-hang svg,
.btn-incall svg,
.incall-bar-hang svg,
.modal-actions svg,
.modal-icon svg,
.monitoring-banner-icon svg,
.tab-icon svg {
  width: 1em;
  height: 1em;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-icon {
  margin-right: 7px;
  vertical-align: -2px;
}

.flag-warning-icon,
.chat-family-icon {
  color: #FF8200;
  flex: 0 0 auto;
}

.flag-warning-icon {
  width: 22px !important;
  height: 22px !important;
  margin-top: 1px;
  filter: drop-shadow(0 0 8px rgba(255, 130, 0, 0.22));
}

.chat-family-icon {
  width: 17px !important;
  height: 17px !important;
}

.btn-call svg,
.btn-hang svg {
  width: 30px;
  height: 30px;
}

.btn-incall svg {
  width: 20px;
  height: 20px;
}

.incall-bar-hang svg {
  width: 20px;
  height: 20px;
}

.btn-upload,
.btn-camera,
.btn-scan-another,
.btn-modal-search,
.btn-modal-secondary,
.btn-modal-warn,
.btn-modal-call,
.modal-scan-chat-send,
.btn-send {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.modal-icon svg {
  width: 36px;
  height: 36px;
  margin: 0 auto;
}

.monitoring-banner-icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 6px;
  color: #FF8200;
}

.monitoring-banner-icon svg,
.tab-icon svg {
  width: 18px;
  height: 18px;
}

.search-wrap::before {
  content: "" !important;
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-radius: 50%;
  left: 11px !important;
  color: var(--text3);
}

.search-wrap::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 7px;
  height: 2px;
  background: currentColor;
  color: var(--text3);
  border-radius: 999px;
  transform: translateY(4px) rotate(45deg);
  pointer-events: none;
}

.risk-header {
  background:
    linear-gradient(180deg, rgba(248, 81, 73, 0.16), rgba(248, 81, 73, 0.07)),
    #151920 !important;
  border-bottom-color: rgba(248, 81, 73, 0.22) !important;
}

.risk-header.caution {
  background:
    linear-gradient(180deg, rgba(210, 153, 34, 0.16), rgba(210, 153, 34, 0.07)),
    #151920 !important;
  border-bottom-color: rgba(210, 153, 34, 0.24) !important;
}

.risk-icon,
.modal-hazard-icon {
  background: rgba(248, 81, 73, 0.12) !important;
  border-color: rgba(248, 81, 73, 0.42) !important;
  color: #f85149 !important;
  box-shadow: 0 18px 40px rgba(248, 81, 73, 0.20) !important;
}

.risk-header.caution .risk-icon,
.modal-hazard-icon.caution {
  background: rgba(210, 153, 34, 0.12) !important;
  border-color: rgba(210, 153, 34, 0.42) !important;
  color: #e3b341 !important;
  box-shadow: 0 18px 40px rgba(210, 153, 34, 0.16) !important;
}

.risk-label,
.modal-scan-title-danger,
.result-label.danger,
.modal-scan-section-label.danger {
  color: #ff6b63 !important;
}

.risk-header.caution .risk-label {
  color: #e3b341 !important;
}

.result-text,
.modal-scan-text,
.detail-text,
.transcript-line,
.log-line {
  color: var(--text2) !important;
}

.result-text.recommendation,
.modal-scan-safety-callout {
  background: rgba(248, 81, 73, 0.10) !important;
  border-color: rgba(248, 81, 73, 0.42) !important;
  color: #ffd7d4 !important;
}

.red-flags,
.modal-scan-flags {
  background: rgba(255, 130, 0, 0.055) !important;
  border-color: rgba(255, 130, 0, 0.24) !important;
}

.red-flag,
.modal-scan-flag {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px !important;
  color: #f1f5f9 !important;
  border-bottom-color: rgba(255, 130, 0, 0.14) !important;
}

.red-flag::before,
.modal-scan-flag::before {
  content: none !important;
  display: none !important;
}

.red-flag span:last-child,
.modal-scan-flag span:last-child {
  min-width: 0;
}

.chat-header,
.modal-scan-chat-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.chat-card,
.modal-scan-chat {
  background: rgba(6, 10, 16, 0.56) !important;
}

.chat-msg,
.modal-scan-chat-msg {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.chat-msg.ai,
.modal-scan-chat-msg.assistant {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text2) !important;
}

.chat-msg.user,
.modal-scan-chat-msg.user {
  background: rgba(255, 130, 0, 0.16) !important;
  color: #fff !important;
}

.call-modal-overlay {
  background: rgba(0, 5, 22, 0.74) !important;
  backdrop-filter: blur(8px);
}

.call-modal,
.modal-card {
  color: var(--text) !important;
  border-radius: 24px !important;
}

.modal-actions {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(15, 23, 42, 0.96)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.modal-actions button {
  border-radius: 14px !important;
}

.score-circle,
.avatar {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--text3) !important;
}

.score-circle.benign {
  background: rgba(35, 134, 54, 0.14) !important;
  border-color: #3fb950 !important;
  color: #3fb950 !important;
}

.score-circle.suspicious,
.score-circle.elevated {
  background: rgba(210, 153, 34, 0.14) !important;
  border-color: #e3b341 !important;
  color: #e3b341 !important;
}

.score-circle.high-risk,
.score-circle.critical {
  background: rgba(248, 81, 73, 0.14) !important;
  border-color: #f85149 !important;
  color: #f85149 !important;
}

.call-card:hover {
  border-color: rgba(148, 163, 184, 0.40) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.30) !important;
}

.call-card.expanded {
  border-color: rgba(255, 130, 0, 0.46) !important;
  box-shadow: 0 0 0 3px rgba(255, 130, 0, 0.10), 0 18px 42px rgba(0, 0, 0, 0.30) !important;
}

.detail-box,
.signal-item,
.field-row,
.security-row,
.pw-panel {
  background: rgba(255, 255, 255, 0.025) !important;
}

.security-row:hover {
  background: rgba(255, 130, 0, 0.08) !important;
}

.brand-dot {
  background: #FF8200 !important;
  box-shadow: 0 0 18px rgba(255, 130, 0, 0.55) !important;
}

.status-card,
.verify-card,
.warning-card {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

@media (max-width: 768px) {
  .topbar {
    background: rgba(6, 10, 16, 0.95) !important;
  }

  .topbar-nav,
  .topbar-nav a,
  .nav-link,
  .nav-logout {
    border-radius: 999px !important;
  }
}