@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700;800;900&display=swap");

:root {
  color-scheme: dark;

  --color-bg: #0e1416;
  --color-bg-deep: #090f11;
  --color-surface: rgba(22, 29, 30, 0.65);
  --color-surface-solid: #161d1e;
  --color-surface-high: rgba(36, 43, 45, 0.72);
  --color-surface-highest: rgba(47, 54, 56, 0.84);
  --color-stroke: rgba(255, 255, 255, 0.05);
  --color-stroke-strong: rgba(138, 235, 255, 0.24);
  --color-accent: #22d3ee;
  --color-accent-soft: rgba(34, 211, 238, 0.14);
  --color-accent-hover: #8aebff;
  --color-text: #f8fafc;
  --color-text-soft: rgba(248, 250, 252, 0.78);
  --color-muted: rgba(255, 255, 255, 0.60);
  --color-muted-2: rgba(255, 255, 255, 0.48);
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #fb7185;
  --color-violet: #a855f7;
  --radius-main: 12px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --shadow-panel: 0 24px 70px rgba(0, 0, 0, 0.32);
  --shadow-control: 0 12px 32px rgba(0, 0, 0, 0.22);
  --blur-panel: 12px;

  --bg: var(--color-bg);
  --bg-deep: var(--color-bg-deep);
  --panel: var(--color-surface);
  --panel2: rgba(22, 29, 30, 0.46);
  --panel-2: rgba(22, 29, 30, 0.46);
  --panel-glass: var(--color-surface);
  --panel-soft: rgba(22, 29, 30, 0.46);
  --surface: var(--color-surface);
  --surface-strong: var(--color-surface-high);
  --surface-soft: rgba(255, 255, 255, 0.035);
  --stroke: var(--color-stroke);
  --stroke-glass: var(--color-stroke);
  --line: var(--color-stroke);
  --line-strong: rgba(255, 255, 255, 0.10);
  --txt: var(--color-text);
  --text: var(--color-text);
  --text-primary: var(--color-text);
  --text-soft: var(--color-text-soft);
  --text-muted: var(--color-muted);
  --muted: var(--color-muted);
  --muted2: var(--color-muted-2);
  --cta: var(--color-accent);
  --ctaText: var(--color-bg);
  --primary: var(--color-accent-hover);
  --primary-strong: var(--color-accent);
  --primary-ink: var(--color-bg);
  --ok: var(--color-success);
  --success: var(--color-success);
  --warn: var(--color-warning);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --error: var(--color-danger);
  --radius: var(--radius-panel);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow: var(--shadow-panel);
}

* {
  scrollbar-color: rgba(138, 235, 255, 0.22) rgba(9, 15, 17, 0.72);
}

html {
  background: var(--color-bg);
}

body {
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  color: var(--color-text) !important;
  background:
    radial-gradient(900px 460px at 80% -12%, rgba(34, 211, 238, 0.08), transparent 58%),
    linear-gradient(180deg, #0e1416 0%, #090f11 100%) !important;
  background-attachment: fixed !important;
  letter-spacing: 0;
}

body::before {
  background:
    linear-gradient(180deg, rgba(14, 20, 22, 0.18), rgba(9, 15, 17, 0.78)),
    repeating-linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 0,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px,
      transparent 96px
    ) !important;
}

body,
button,
input,
select,
textarea {
  font-variant-ligatures: common-ligatures;
}

a {
  color: inherit;
}

a:hover {
  color: var(--color-accent-hover);
}

::selection {
  background: rgba(34, 211, 238, 0.28);
  color: var(--color-text);
}

.glass,
.glass-soft,
.glass-card,
.glass-panel,
.panel,
.card,
.hero,
.hero-card,
.sidebar,
.main.panel,
.main.glass,
.nav-shell,
.topbar,
.popup-card,
.modal-content,
.question-tools,
.question-header,
.question-card,
.progress-wrap,
.intro-shell,
.org-editor,
.metric,
.stat,
.side-link,
.side-booking,
.expert-cta,
.col,
.drop,
.note,
.notePanel,
.shell-topbar,
.shell-dropdown,
.shell-nav,
.shell-context-banner,
.shell-content-cta,
.shell-code-dialog {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-stroke) !important;
  border-radius: var(--radius-panel) !important;
  box-shadow: var(--shadow-panel) !important;
  backdrop-filter: blur(var(--blur-panel)) !important;
  -webkit-backdrop-filter: blur(var(--blur-panel)) !important;
}

.glass-soft,
.panel-soft,
.shell-context-banner,
.shell-content-cta,
.question-tools,
.drop,
.metric,
.stat,
.note,
.notePanel {
  background: rgba(22, 29, 30, 0.46) !important;
}

.glass-card,
.card,
.side-link,
.side-booking,
.metric,
.stat {
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.glass-card:hover,
.card:hover,
.side-link:hover,
.side-booking:hover {
  border-color: rgba(138, 235, 255, 0.18) !important;
  background: rgba(36, 43, 45, 0.72) !important;
}

.section,
.page-shell {
  padding-top: clamp(32px, 5vw, 72px);
  padding-bottom: clamp(32px, 5vw, 72px);
}

h1,
h2,
h3,
.page-title,
.title,
.brand-title strong,
.brand-title,
.brand-name,
.shell-brand-name {
  color: var(--color-text) !important;
  letter-spacing: 0 !important;
}

h1,
.page-title {
  font-weight: 800 !important;
  line-height: 1.12 !important;
}

h2,
h3 {
  line-height: 1.22 !important;
}

p,
li,
.sub,
.subtitle,
.lead,
.muted,
.muted2,
.meta,
.side-copy,
.small,
.helper,
.desc,
.tools-text,
.brand-title span,
.brand-kicker,
.shell-page-title,
.shell-code-sub,
.field-help {
  color: var(--color-muted) !important;
}

.eyebrow,
.side-title,
.tools-label,
.expert-cta-badge {
  color: var(--color-accent-hover) !important;
  letter-spacing: 0.08em;
}

.divider {
  background: var(--color-stroke) !important;
  border-color: var(--color-stroke) !important;
}

.btn,
button.btn,
.nav-btn,
.tab,
.dashboard-tab,
.side-toggle,
.copy-code-btn,
.k-btn,
.noteBtn,
.shell-menu-btn,
.shell-menu-fab,
.shell-account-btn,
.shell-dd-btn,
.shell-code-btn,
.shell-context-banner button,
.shell-content-cta button,
.pdf-btn,
.toggle-btn,
.back-btn,
.validate-modal,
button[type="submit"] {
  border-radius: var(--radius-control) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(22, 29, 30, 0.58) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
  transition: transform 150ms ease, border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.btn:hover,
button.btn:hover,
.nav-btn:hover,
.tab:hover,
.dashboard-tab:hover,
.side-toggle:hover,
.copy-code-btn:hover,
.k-btn:hover,
.noteBtn:hover,
.shell-menu-btn:hover,
.shell-menu-fab:hover,
.shell-account-btn:hover,
.shell-dd-btn:hover,
.shell-code-btn:hover,
.pdf-btn:hover,
.toggle-btn:hover,
.back-btn:hover,
.validate-modal:hover {
  transform: translateY(-1px);
  border-color: rgba(138, 235, 255, 0.24) !important;
  background: rgba(47, 54, 56, 0.76) !important;
}

.btn.cta,
.btn.primary,
.btn-primary,
.btn-cta,
#login-btn,
#register-btn,
.tab.active,
.dashboard-tab.active,
.shell-code-btn.primary,
.shell-link.active,
.pill.ok,
.badge.good,
.badge.ok {
  border-color: rgba(34, 211, 238, 0.42) !important;
  background: var(--color-accent) !important;
  color: var(--color-bg) !important;
  box-shadow: 0 12px 30px rgba(34, 211, 238, 0.14) !important;
}

.btn.secondary,
.btn.danger,
.btn-ghost {
  background: rgba(22, 29, 30, 0.36) !important;
}

.btn.danger,
.badge.low,
.tag.danger {
  border-color: rgba(251, 113, 133, 0.36) !important;
  background: rgba(251, 113, 133, 0.12) !important;
  color: #fecdd3 !important;
}

input,
select,
textarea,
.input,
.select,
.input-field,
.shell-code-input,
.shell-org-select {
  border-radius: var(--radius-control) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(9, 15, 17, 0.72) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-muted-2) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
.input-field:focus,
.shell-code-input:focus,
.shell-org-select:focus {
  border-color: rgba(34, 211, 238, 0.56) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12) !important;
  outline: none !important;
}

.chip,
.pill,
.badge,
.tag,
.shell-chip,
.shell-breadcrumb,
.side-count,
.side-booking-status,
.micro-pill,
.glass-chip {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(22, 29, 30, 0.52) !important;
  color: var(--color-text-soft) !important;
  border-radius: 999px !important;
}

.badge.warn,
.tag.warn,
.side-booking-status.hold {
  border-color: rgba(245, 158, 11, 0.36) !important;
  background: rgba(245, 158, 11, 0.12) !important;
  color: #fde68a !important;
}

.badge.good,
.tag.ok,
.side-booking-status.confirmed,
.side-booking-status.in_progress {
  border-color: rgba(34, 197, 94, 0.36) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  color: #bbf7d0 !important;
}

.topbar,
.site-header,
.shell-root {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.topbar {
  background: rgba(14, 20, 22, 0.72) !important;
  border-bottom: 1px solid var(--color-stroke) !important;
}

.brand img,
.brand-mark,
.shell-logo {
  border-radius: var(--radius-control) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(9, 15, 17, 0.55) !important;
}

#answers button,
#answers label,
.answer-btn {
  border-radius: var(--radius-panel) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  background: rgba(22, 29, 30, 0.48) !important;
  color: var(--color-text) !important;
  box-shadow: none !important;
}

#answers button:hover,
#answers label:hover,
.answer-btn:hover {
  border-color: rgba(34, 211, 238, 0.26) !important;
  background: rgba(36, 43, 45, 0.74) !important;
}

.answer-btn.selected {
  border-color: rgba(34, 211, 238, 0.55) !important;
  background: rgba(34, 211, 238, 0.12) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.10) !important;
}

#progress-background {
  border: 1px solid rgba(34, 211, 238, 0.18) !important;
  background: linear-gradient(90deg, var(--color-accent), var(--color-success)) !important;
}

.meter,
.progress-bar-background {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  background: rgba(9, 15, 17, 0.86) !important;
}

.meter > span,
#progress-background::before {
  background: linear-gradient(90deg, var(--color-accent), var(--color-success)) !important;
}

.status.status-yes,
.status-yes {
  border-color: rgba(34, 197, 94, 0.36) !important;
  background: rgba(34, 197, 94, 0.18) !important;
  color: #d1fae5 !important;
}

.status.status-neutral,
.status-neutral {
  border-color: rgba(187, 201, 205, 0.20) !important;
  background: rgba(187, 201, 205, 0.10) !important;
  color: rgba(248, 250, 252, 0.80) !important;
}

.status.status-other,
.status-other {
  border-color: rgba(251, 113, 133, 0.36) !important;
  background: rgba(251, 113, 133, 0.14) !important;
  color: #fecdd3 !important;
}

.status.status-x,
.status-x,
.status.status-current,
.status-current {
  border-color: rgba(34, 211, 238, 0.45) !important;
  background: rgba(34, 211, 238, 0.16) !important;
  color: #cffafe !important;
}

.status.status-current,
.status-current {
  background: var(--color-accent) !important;
  color: var(--color-bg) !important;
}

.question-status-background {
  border-radius: var(--radius-panel) !important;
  background: rgba(14, 20, 22, 0.62) !important;
  border: 1px solid var(--color-stroke) !important;
}

.dashboard-tab.active {
  color: var(--color-bg) !important;
}

.cards,
.grid,
.card-grid,
.kanban,
.summary,
.stats {
  gap: 14px !important;
}

table {
  border-color: var(--color-stroke) !important;
}

thead th,
tbody td {
  border-color: var(--color-stroke) !important;
}

tbody tr:hover td {
  background: rgba(255, 255, 255, 0.025) !important;
}

.circle,
.line {
  border-color: rgba(138, 235, 255, 0.20) !important;
}

.text-bg1,
.text-bg2,
.text-bg3,
.text-bg4,
.text-bg5,
.text-bg6,
.text-bg7,
.text-bg8,
.text-bg9,
.text-bg10,
.text-bg11,
.text-bg12 {
  border: 1px solid rgba(34, 211, 238, 0.18) !important;
  background: rgba(22, 29, 30, 0.78) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-panel) !important;
}

.badge-container .score,
.score,
#score-percent {
  color: var(--color-accent-hover) !important;
}

.prp-auth-modal,
.shell-code-modal,
.modal {
  background: rgba(9, 15, 17, 0.72) !important;
}

@media (max-width: 760px) {
  :root {
    --radius-panel: 10px;
  }

  .section,
  .page-shell {
    padding-top: 28px;
    padding-bottom: 36px;
  }

  .glass,
  .glass-soft,
  .glass-card,
  .panel,
  .card,
  .hero,
  .hero-card {
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26) !important;
  }
}