:root {
  --brand-orange: #ff6a00;
  --brand-orange-soft: #ff8a3d;
  --brand-orange-deep: #d94f00;
  --brand-cyan: #00e0ff;
  --brand-cyan-soft: #5cebff;
  --brand-cyan-deep: #00b8d4;
  --brand-red: #ff3b3b;
  --brand-green: #1ec773;
  --brand-yellow: #ffc83d;
  --neutral-0: #ffffff;
  --neutral-50: #f6f7f9;
  --neutral-100: #ececf1;
  --neutral-200: #d6d6df;
  --neutral-300: #b3b3c1;
  --neutral-400: #8b8b9b;
  --neutral-500: #62626f;
  --neutral-600: #45454f;
  --neutral-700: #2c2c33;
  --neutral-800: #1c1c22;
  --neutral-900: #121217;
  --neutral-950: #0a0a0e;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 2rem;
  --fs-4xl: 2.5rem;
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-modal-backdrop: 800;
  --z-modal: 900;
  --z-toast: 1000;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --container-max: 1280px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: var(--neutral-950);
    --bg-elevated: var(--neutral-900);
    --surface: var(--neutral-800);
    --surface-2: var(--neutral-700);
    --card-bg: #16161c;
    --card-border: #25252e;
    --fg: var(--neutral-50);
    --fg-muted: var(--neutral-300);
    --fg-subtle: var(--neutral-400);
    --fg-on-accent: #ffffff;
    --border: #25252e;
    --border-soft: #1f1f26;
    --border-strong:#3a3a44;
    --input-bg: #1a1a21;
    --input-border: #2d2d36;
    --input-fg: var(--neutral-50);
    --input-placeholder: var(--neutral-500);
    --input-focus-ring: rgba(255, 106, 0, 0.35);
    --accent: var(--brand-orange);
    --accent-soft: var(--brand-orange-soft);
    --accent-deep: var(--brand-orange-deep);
    --accent-fg: #ffffff;
    --accent-glow: 0 0 0 3px rgba(255, 106, 0, 0.18), 0 0 24px -4px rgba(255, 106, 0, 0.45);
    --info: var(--brand-cyan);
    --success: var(--brand-green);
    --warning: var(--brand-yellow);
    --danger: var(--brand-red);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
    --grid-line: rgba(255, 255, 255, 0.04);
    --scanline: linear-gradient(180deg, transparent 50%, rgba(255, 255, 255, 0.015) 50%);
  }
}
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f4f5f8;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-2: #f0f1f5;
    --card-bg: #ffffff;
    --card-border: #e3e5ec;
    --fg: #15151b;
    --fg-muted: #4a4a55;
    --fg-subtle: #72727d;
    --fg-on-accent: #ffffff;
    --border: #e3e5ec;
    --border-soft: #ececf1;
    --border-strong:#c8cad3;
    --input-bg: #ffffff;
    --input-border: #d6d8e0;
    --input-fg: #15151b;
    --input-placeholder: #9c9ca6;
    --input-focus-ring: rgba(255, 106, 0, 0.25);
    --accent: #e85d00;
    --accent-soft: #ff8a3d;
    --accent-deep: #b84800;
    --accent-fg: #ffffff;
    --accent-glow: 0 0 0 3px rgba(232, 93, 0, 0.18);
    --info: #007fa1;
    --success: #128a4f;
    --warning: #b27c00;
    --danger: #c92626;
    --shadow-sm: 0 1px 2px rgba(20, 22, 32, 0.06);
    --shadow-md: 0 4px 12px rgba(20, 22, 32, 0.08);
    --shadow-lg: 0 10px 30px rgba(20, 22, 32, 0.12);
    --grid-line: rgba(0, 0, 0, 0.04);
    --scanline: none;
  }
}
:root[data-theme=dark] {
  color-scheme: dark;
  --bg: var(--neutral-950);
  --bg-elevated: var(--neutral-900);
  --surface: var(--neutral-800);
  --surface-2: var(--neutral-700);
  --card-bg: #16161c;
  --card-border: #25252e;
  --fg: var(--neutral-50);
  --fg-muted: var(--neutral-300);
  --fg-subtle: var(--neutral-400);
  --fg-on-accent: #ffffff;
  --border: #25252e;
  --border-soft: #1f1f26;
  --border-strong:#3a3a44;
  --input-bg: #1a1a21;
  --input-border: #2d2d36;
  --input-fg: var(--neutral-50);
  --input-placeholder: var(--neutral-500);
  --input-focus-ring: rgba(255, 106, 0, 0.35);
  --accent: var(--brand-orange);
  --accent-soft: var(--brand-orange-soft);
  --accent-deep: var(--brand-orange-deep);
  --accent-fg: #ffffff;
  --accent-glow: 0 0 0 3px rgba(255, 106, 0, 0.18), 0 0 24px -4px rgba(255, 106, 0, 0.45);
  --info: var(--brand-cyan);
  --success: var(--brand-green);
  --warning: var(--brand-yellow);
  --danger: var(--brand-red);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.55);
  --grid-line: rgba(255, 255, 255, 0.04);
  --scanline: linear-gradient(180deg, transparent 50%, rgba(255, 255, 255, 0.015) 50%);
}

:root[data-theme=light] {
  color-scheme: light;
  --bg: #f4f5f8;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-2: #f0f1f5;
  --card-bg: #ffffff;
  --card-border: #e3e5ec;
  --fg: #15151b;
  --fg-muted: #4a4a55;
  --fg-subtle: #72727d;
  --fg-on-accent: #ffffff;
  --border: #e3e5ec;
  --border-soft: #ececf1;
  --border-strong:#c8cad3;
  --input-bg: #ffffff;
  --input-border: #d6d8e0;
  --input-fg: #15151b;
  --input-placeholder: #9c9ca6;
  --input-focus-ring: rgba(255, 106, 0, 0.25);
  --accent: #e85d00;
  --accent-soft: #ff8a3d;
  --accent-deep: #b84800;
  --accent-fg: #ffffff;
  --accent-glow: 0 0 0 3px rgba(232, 93, 0, 0.18);
  --info: #007fa1;
  --success: #128a4f;
  --warning: #b27c00;
  --danger: #c92626;
  --shadow-sm: 0 1px 2px rgba(20, 22, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 22, 32, 0.08);
  --shadow-lg: 0 10px 30px rgba(20, 22, 32, 0.12);
  --grid-line: rgba(0, 0, 0, 0.04);
  --scanline: none;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
  background-color: var(--bg);
  background-image: radial-gradient(circle at top right, rgba(255, 106, 0, 0.06), transparent 40%), radial-gradient(circle at bottom left, rgba(0, 224, 255, 0.04), transparent 40%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--t-base), color var(--t-base);
}

img, svg, video {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}

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

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

button {
  font: inherit;
  cursor: pointer;
}

input, textarea, select, button {
  font-family: inherit;
}

::selection {
  background: var(--accent);
  color: var(--accent-fg);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
  background-clip: padding-box;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--fg);
  letter-spacing: -0.01em;
}

h1 {
  font-size: var(--fs-4xl);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--fs-2xl);
}

h4 {
  font-size: var(--fs-xl);
}

h5 {
  font-size: var(--fs-lg);
}

h6 {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
}

p {
  margin: 0 0 var(--space-4);
  color: var(--fg);
}

small, .text-sm {
  font-size: var(--fs-sm);
}

.text-xs {
  font-size: var(--fs-xs);
}

.text-muted {
  color: var(--fg-muted);
}

.text-subtle {
  color: var(--fg-subtle);
}

.text-accent {
  color: var(--accent);
}

.text-success {
  color: var(--success);
}

.text-danger {
  color: var(--danger);
}

.text-warning {
  color: var(--warning);
}

.text-info {
  color: var(--info);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.lead {
  font-size: var(--fs-lg);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.app-shell {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.app-body {
  display: flex;
  flex: 1;
  align-items: stretch;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: var(--space-6) var(--space-6) var(--space-10);
}
@media (max-width: 900px) {
  .app-main {
    padding: var(--space-4);
  }
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.page-header .page-title h1 {
  margin: 0 0 4px;
  font-size: var(--fs-2xl);
}
.page-header .page-title .breadcrumb {
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.page-header .page-title .breadcrumb a {
  color: var(--fg-subtle);
}
.page-header .page-title .breadcrumb a:hover {
  color: var(--accent);
}
.page-header .page-title .breadcrumb .sep {
  margin: 0 4px;
  opacity: 0.5;
}
.page-header .page-actions {
  display: flex;
  gap: var(--space-2);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
}
.auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  pointer-events: none;
}
.auth-shell::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 106, 0, 0.18), transparent 60%);
  top: -120px;
  right: -120px;
  pointer-events: none;
  filter: blur(20px);
}
.auth-shell > * {
  position: relative;
  z-index: 1;
}

.grid {
  display: grid;
  gap: var(--space-4);
}
.grid.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 {
    grid-template-columns: 1fr;
  }
}

.flex {
  display: flex;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: var(--space-1);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-6 {
  gap: var(--space-6);
}

.mt-2 {
  margin-top: var(--space-2);
}

.mt-4 {
  margin-top: var(--space-4);
}

.mt-6 {
  margin-top: var(--space-6);
}

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.w-full {
  width: 100%;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.btn {
  --_bg: transparent;
  --_fg: var(--fg);
  --_border: var(--border-strong);
  --_hover-bg: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:hover {
  background: var(--_hover-bg);
  color: var(--_fg);
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--accent-glow);
}
.btn:active {
  transform: translateY(1px);
}
.btn[disabled], .btn.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}
.btn.btn-primary {
  --_bg: var(--accent);
  --_fg: var(--accent-fg);
  --_border: var(--accent);
  --_hover-bg: var(--accent-soft);
  box-shadow: 0 6px 20px -8px var(--accent);
}
.btn.btn-primary:hover {
  border-color: var(--accent-soft);
  box-shadow: var(--accent-glow);
}
.btn.btn-secondary {
  --_bg: var(--surface);
  --_border: var(--border);
  --_hover-bg: var(--surface-2);
}
.btn.btn-ghost {
  --_bg: transparent;
  --_border: transparent;
  --_hover-bg: var(--surface-2);
}
.btn.btn-outline {
  --_bg: transparent;
  --_border: var(--accent);
  --_fg: var(--accent);
  --_hover-bg: rgba(255, 106, 0, 0.08);
}
.btn.btn-danger {
  --_bg: var(--danger);
  --_fg: #fff;
  --_border: var(--danger);
  --_hover-bg: #ff5252;
}
.btn.btn-success {
  --_bg: var(--success);
  --_fg: #fff;
  --_border: var(--success);
  --_hover-bg: #28d97d;
}
.btn.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
}
.btn.btn-lg {
  padding: 0.85rem 1.5rem;
  font-size: var(--fs-md);
  border-radius: var(--radius-lg);
}
.btn.btn-icon {
  padding: 0.5rem;
  aspect-ratio: 1/1;
}
.btn.btn-block {
  width: 100%;
}

.btn-group {
  display: inline-flex;
}
.btn-group .btn {
  border-radius: 0;
}
.btn-group .btn:first-child {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
}
.btn-group .btn:last-child {
  border-top-right-radius: var(--radius-md);
  border-bottom-right-radius: var(--radius-md);
}
.btn-group .btn + .btn {
  border-left-width: 0;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.form-label .required {
  color: var(--accent);
  margin-left: 2px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.7rem 0.95rem;
  font-size: var(--fs-sm);
  color: var(--input-fg);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}
.form-control::placeholder {
  color: var(--input-placeholder);
}
.form-control:hover:not(:disabled):not(:focus) {
  border-color: var(--border-strong);
}
.form-control:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
.form-control:disabled, .form-control[readonly] {
  background: var(--surface-2);
  cursor: not-allowed;
  opacity: 0.7;
}
.form-control.is-invalid {
  border-color: var(--danger);
}
.form-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.25);
}

textarea.form-control {
  min-height: 110px;
  resize: vertical;
  line-height: var(--lh-snug);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='%238b8b9b' d='M4 6l4 4 4-4z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

.input-with-icon {
  position: relative;
}
.input-with-icon .form-control {
  padding-left: 2.5rem;
}
.input-with-icon .icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-subtle);
  pointer-events: none;
  width: 18px;
  height: 18px;
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  cursor: pointer;
  user-select: none;
}
.form-check input[type=checkbox], .form-check input[type=radio] {
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  border-radius: var(--radius-sm);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-check input[type=checkbox]:hover, .form-check input[type=radio]:hover {
  border-color: var(--accent);
}
.form-check input[type=checkbox]:checked, .form-check input[type=radio]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.form-check input[type=checkbox]:checked::after, .form-check input[type=radio]:checked::after {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--accent-fg);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
.form-check input[type=checkbox]:focus-visible, .form-check input[type=radio]:focus-visible {
  box-shadow: var(--accent-glow);
  outline: none;
}
.form-check input[type=radio] {
  border-radius: 50%;
}
.form-check input[type=radio]:checked::after {
  width: 8px;
  height: 8px;
  clip-path: none;
  border-radius: 50%;
}

.invalid-feedback {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--danger);
}

.help-text {
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--fg-subtle);
}

.password-field {
  position: relative;
}
.password-field .form-control {
  padding-right: 2.6rem;
}
.password-field .reveal {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  padding: 6px;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
}
.password-field .reveal:hover {
  color: var(--accent);
  background: var(--surface-2);
}
.password-field .reveal:focus-visible {
  outline: none;
  box-shadow: var(--accent-glow);
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
}
.card.is-hoverable:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card.is-accent {
  position: relative;
}
.card.is-accent::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--info));
}

.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
}
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 {
  margin: 0;
}

.card-body {
  padding: var(--space-5);
}

.card-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--card-border);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent, var(--surface));
}

.stat {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.stat .stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
}
.stat .stat-value {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  color: var(--fg);
  line-height: 1.1;
}
.stat .stat-delta {
  font-size: var(--fs-xs);
  color: var(--success);
}
.stat .stat-delta.is-down {
  color: var(--danger);
}

.auth-card {
  width: 100%;
  max-width: 460px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-8) var(--space-6);
  box-shadow: var(--shadow-lg);
}
.auth-card .auth-header {
  text-align: center;
  margin-bottom: var(--space-6);
}
.auth-card .auth-header .logo {
  height: 38px;
  margin: 0 auto var(--space-4);
}
.auth-card .auth-header h1 {
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-1);
}
.auth-card .auth-header p {
  color: var(--fg-muted);
  margin-bottom: 0;
  font-size: var(--fs-sm);
}
.auth-card .auth-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-soft);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.table-wrap {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  overflow: hidden;
  overflow-x: auto;
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
  color: var(--fg);
}
.table th, .table td {
  padding: 0.85rem 1rem;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-soft);
}
.table thead th {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  background: var(--surface-2);
  border-bottom: 1px solid var(--card-border);
  white-space: nowrap;
}
.table tbody tr {
  transition: background var(--t-fast);
}
.table tbody tr:hover {
  background: var(--surface-2);
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table.is-compact th, .table.is-compact td {
  padding: 0.55rem 0.75rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px 0.6rem;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  background: var(--surface-2);
  color: var(--fg-muted);
  border: 1px solid var(--border-soft);
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.pill.pill-success {
  color: var(--success);
  background: rgba(30, 199, 115, 0.12);
  border-color: rgba(30, 199, 115, 0.3);
}
.pill.pill-danger {
  color: var(--danger);
  background: rgba(255, 59, 59, 0.12);
  border-color: rgba(255, 59, 59, 0.3);
}
.pill.pill-warning {
  color: var(--warning);
  background: rgba(255, 200, 61, 0.14);
  border-color: rgba(255, 200, 61, 0.32);
}
.pill.pill-info {
  color: var(--info);
  background: rgba(0, 224, 255, 0.1);
  border-color: rgba(0, 224, 255, 0.28);
}
.pill.pill-accent {
  color: var(--accent);
  background: rgba(255, 106, 0, 0.1);
  border-color: rgba(255, 106, 0, 0.3);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-6);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-soft);
}

/* Mobile responsive topbar — squeeze padding/gap, hide non-essential
   actions, and beef up the hamburger touch target so it's always
   reachable without scrolling. The hamburger is the first child of
   .topbar so it stays at the start regardless of which actions are
   hidden. */
@media (max-width: 720px) {
  .topbar {
    padding: 0 0.6rem;
    gap: 0.4rem;
  }
  .topbar > [data-action="toggle-sidebar"] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: inline-grid !important;
    place-items: center;
    z-index: 1;
  }
  .topbar > [data-action="toggle-sidebar"] svg { width: 22px; height: 22px; }
  .topbar-brand { font-size: 1rem; min-width: 0; }
  .topbar-brand .brand-mark { width: 24px; height: 24px; }
  .topbar-brand span:not(.brand-mark) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 35vw;
  }
  .topbar-actions { gap: 4px; }
  /* Hide secondary actions to keep the bell + avatar reachable */
  .topbar-actions .theme-toggle,
  .topbar-actions .qt-lang .qt-lang-code,
  .topbar-actions form button[type="submit"]:not(.qt-test-btn) {
    display: none !important;
  }
  .topbar-actions .qt-lang #qt-lang-btn {
    padding: 0.3rem 0.45rem;
  }
  /* Avatar shrinks slightly */
  .topbar-actions .avatar { width: 32px; height: 32px; font-size: 0.78rem; }
}

/* Even tighter for ultra-narrow phones */
@media (max-width: 380px) {
  .topbar { padding: 0 0.4rem; }
  .topbar-brand span:not(.brand-mark) { display: none; }
  .topbar-actions .qt-lang { display: none; }
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--fg);
  letter-spacing: -0.01em;
}
.topbar-brand .brand-mark {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--accent), var(--info));
  box-shadow: 0 4px 14px -4px var(--accent);
}

.topbar-spacer {
  flex: 1;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  display: inline-grid;
  place-items: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow: hidden;
  user-select: none;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 0;
}
.theme-toggle button {
  background: transparent;
  border: 0;
  color: var(--fg-subtle);
  width: 32px;
  height: 28px;
  border-radius: var(--radius-pill);
  display: inline-grid;
  place-items: center;
  transition: color var(--t-fast), background var(--t-fast);
}
.theme-toggle button:hover {
  color: var(--fg);
}
.theme-toggle button.is-active {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 4px 14px -4px var(--accent);
}
.theme-toggle button svg {
  width: 16px;
  height: 16px;
}

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  padding: var(--space-5) var(--space-3);
  overflow-y: auto;
  transition: width var(--t-base);
}
.sidebar .nav-group + .nav-group {
  margin-top: var(--space-5);
}
.sidebar .nav-group .nav-group-label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-subtle);
  padding: 0 var(--space-3) var(--space-2);
}
.sidebar .nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem var(--space-3);
  margin: 2px 0;
  color: var(--fg-muted);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background var(--t-fast), color var(--t-fast);
  position: relative;
}
.sidebar .nav-item .icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.sidebar .nav-item:hover {
  background: var(--surface-2);
  color: var(--fg);
}
.sidebar .nav-item.is-active {
  background: linear-gradient(90deg, rgba(255, 106, 0, 0.1), transparent);
  color: var(--accent);
}
.sidebar .nav-item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sidebar .nav-item .badge {
  margin-left: auto;
  background: var(--surface-2);
  color: var(--fg-muted);
  border-radius: var(--radius-pill);
  padding: 0 0.5rem;
  font-size: var(--fs-xs);
  font-family: var(--font-mono);
}

body[data-sidebar=collapsed] .sidebar {
  width: var(--sidebar-w-collapsed);
}
/* In collapsed mode hide everything EXCEPT the icon wrapper. The sidebar's
   icon is wrapped in `<span class="icon">` (see partials/sidebar.php), so
   the selector must read `span:not(.icon)` — not `.icon-wrap`, which is a
   class that doesn't exist anywhere in the views and previously caused
   every span (icon + label) to be hidden, making the collapsed sidebar
   look empty / broken / unresponsive. */
body[data-sidebar=collapsed] .sidebar .nav-group-label, body[data-sidebar=collapsed] .sidebar .nav-item span:not(.icon), body[data-sidebar=collapsed] .sidebar .badge {
  display: none;
}
body[data-sidebar=collapsed] .sidebar .nav-item {
  justify-content: center;
  padding: 0.625rem 0;
}
/* The icon span itself should be visible (in case the inherited rule above
   somehow matches it). Belt-and-braces. */
body[data-sidebar=collapsed] .sidebar .nav-item .icon {
  display: inline-flex;
}

/* ─── Mobile drawer (≤900px) ──────────────────────────────────────────── */
/* The sidebar becomes a fixed-position drawer that slides in from the
   start side. The toggle button in the topbar swaps body[data-sidebar]
   to "mobile-open" and back; tap a nav item or the backdrop to close. */
.qt-sb-backdrop {
  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 840;
}

/* Explicit close button inside the drawer — hidden on desktop, shown on
   mobile. Placed top-right of the sidebar so it sits next to where the
   user's thumb naturally goes after opening. */
.qt-sb-close {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2, rgba(255,255,255,.06));
  color: var(--fg, #fff);
  font-size: 1.05rem;
  cursor: pointer;
  z-index: 1;
}
.qt-sb-close:hover { background: var(--surface-3, rgba(255,255,255,.1)); }

@media (max-width: 900px) {
  /* Override sticky/flex layout — drawer is fixed, doesn't affect flow.
     2026-06 — height uses `dvh` (dynamic viewport height) so the
     sidebar shrinks/grows as the mobile browser's address bar slides
     in and out, exposing the bottom-most nav items (Sign out) which
     used to be tucked behind the URL bar permanently. `vh` is kept as
     a fallback for browsers that don't support dvh yet. Also adds
     extra bottom-padding via env(safe-area-inset-bottom) for the iOS
     home-indicator area. */
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    height: calc(100vh - var(--topbar-h));               /* fallback */
    height: calc(100dvh - var(--topbar-h));              /* dynamic */
    max-height: calc(100vh - var(--topbar-h));
    max-height: calc(100dvh - var(--topbar-h));
    width: min(78vw, 320px);
    z-index: 850;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.25, 0.7, 0.25, 1);
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.45);
    /* Keep the icon-rail collapse from desktop from leaking into mobile */
    width: min(78vw, 320px) !important;
    display: block;
    overflow-y: auto;
    /* Smooth touch-momentum scroll on iOS, otherwise the panel feels
       sticky and the bottom rows are hard to reach. */
    -webkit-overflow-scrolling: touch;
    /* Reserve room past the last nav row so Sign out doesn't hug
       the iOS home-indicator (or Android's nav-pill area). */
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px) + 24px);
  }

  body[data-sidebar=mobile-open] .sidebar {
    transform: translateX(0);
  }

  body[data-sidebar=mobile-open] .qt-sb-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Show the explicit X close button only on mobile. The sidebar gets
     a bit of top-padding so the X doesn't overlap the first nav row. */
  .sidebar { padding-top: 52px; }
  .qt-sb-close { display: grid; place-items: center; }

  /* On mobile the icon-rail-collapsed treatment doesn't apply — restore
     the full nav so the drawer is always usable. Same selector fix as
     the desktop block above: `span:not(.icon)` matches the actual class. */
  body[data-sidebar=collapsed] .sidebar .nav-group-label,
  body[data-sidebar=collapsed] .sidebar .nav-item span:not(.icon),
  body[data-sidebar=collapsed] .sidebar .badge {
    display: revert;
  }
  body[data-sidebar=collapsed] .sidebar .nav-item {
    justify-content: flex-start;
    padding: 0.625rem var(--space-3);
  }

  /* RTL — slide in from the right */
  [dir=rtl] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.45);
  }
  [dir=rtl] body[data-sidebar=mobile-open] .sidebar {
    transform: translateX(0);
  }
}
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg-muted);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--fg);
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.alert .alert-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--fg-muted);
}
.alert .alert-body {
  flex: 1;
}
.alert .alert-title {
  font-weight: var(--fw-semibold);
  margin-bottom: 2px;
}
.alert .alert-close {
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm);
}
.alert .alert-close:hover {
  color: var(--fg);
  background: var(--surface-2);
}
.alert.alert-success {
  border-left-color: var(--success);
}
.alert.alert-success .alert-icon {
  color: var(--success);
}
.alert.alert-danger, .alert.alert-error {
  border-left-color: var(--danger);
}
.alert.alert-danger .alert-icon, .alert.alert-error .alert-icon {
  color: var(--danger);
}
.alert.alert-warning {
  border-left-color: var(--warning);
}
.alert.alert-warning .alert-icon {
  color: var(--warning);
}
.alert.alert-info {
  border-left-color: var(--info);
}
.alert.alert-info .alert-icon {
  color: var(--info);
}

.toast-region {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-3) var(--space-4);
  animation: toast-in 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.auth-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
  mask-image: radial-gradient(ellipse at center, black 35%, transparent 80%);
}

.auth-bg__lanes {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 240%;
  height: 70%;
  transform: translateX(-50%) perspective(900px) rotateX(62deg);
  transform-origin: 50% 100%;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(255, 255, 255, 0.07) 80px, rgba(255, 255, 255, 0.07) 81px), repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(255, 255, 255, 0.05) 60px, rgba(255, 255, 255, 0.05) 61px);
  animation: auth-lanes 6s linear infinite;
}
:root[data-theme=light] .auth-bg__lanes {
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(0, 0, 0, 0.08) 80px, rgba(0, 0, 0, 0.08) 81px), repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(0, 0, 0, 0.06) 60px, rgba(0, 0, 0, 0.06) 61px);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .auth-bg__lanes {
    background-image: repeating-linear-gradient(90deg, transparent 0, transparent 80px, rgba(0, 0, 0, 0.08) 80px, rgba(0, 0, 0, 0.08) 81px), repeating-linear-gradient(0deg, transparent 0, transparent 60px, rgba(0, 0, 0, 0.06) 60px, rgba(0, 0, 0, 0.06) 61px);
  }
}

@keyframes auth-lanes {
  0% {
    background-position: 0 0, 0 0;
  }
  100% {
    background-position: 0 0, 0 122px;
  }
}
.auth-bg__streak {
  position: absolute;
  left: -30%;
  width: 60%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  filter: blur(1px);
  opacity: 0.65;
  animation: auth-streak 7s linear infinite;
  will-change: transform, opacity;
}

.auth-bg__streak:nth-child(2) {
  top: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--info), transparent);
  animation-duration: 9s;
  animation-delay: -2s;
  opacity: 0.5;
}

.auth-bg__streak:nth-child(3) {
  top: 65%;
  height: 3px;
  animation-duration: 11s;
  animation-delay: -5s;
  opacity: 0.4;
}

.auth-bg__streak:nth-child(4) {
  top: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  animation-duration: 8s;
  animation-delay: -3.5s;
  opacity: 0.35;
}

@keyframes auth-streak {
  0% {
    transform: translateX(0) scaleX(0.4);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  60% {
    opacity: 0.5;
  }
  100% {
    transform: translateX(220%) scaleX(1.1);
    opacity: 0;
  }
}
.auth-bg__scan {
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  top: -80px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04), transparent);
  animation: auth-scan 12s ease-in-out infinite;
}
:root[data-theme=light] .auth-bg__scan {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.04), transparent);
}

@keyframes auth-scan {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .auth-bg__lanes,
  .auth-bg__streak,
  .auth-bg__scan {
    animation: none !important;
  }
  .auth-bg__streak {
    opacity: 0.25;
    transform: none;
  }
  .auth-bg__scan {
    opacity: 0;
  }
}
.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  min-height: 140px;
  background: var(--input-bg);
  border: 1.5px dashed var(--input-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  text-align: center;
}
.dropzone:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, var(--input-bg));
}
.dropzone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--input-bg));
  transform: scale(1.005);
}
.dropzone.has-file {
  border-style: solid;
  border-color: var(--success);
  background: color-mix(in srgb, var(--success) 8%, var(--input-bg));
}
.dropzone__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--fg-muted);
  pointer-events: none;
}
.dropzone__inner svg {
  color: var(--fg-subtle);
}
.dropzone__inner strong {
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.dropzone__file {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--fg);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  max-width: 100%;
}
.dropzone__file .clear {
  background: transparent;
  border: 0;
  color: var(--fg-subtle);
  cursor: pointer;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.dropzone__file .clear:hover {
  color: var(--danger);
  background: var(--surface-2);
}
.dropzone__file .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropzone__file .size {
  color: var(--fg-subtle);
  flex-shrink: 0;
}

.opt-pill {
  /* 2026-06 — relative containment for the hidden checkbox below.
     Without this, the absolutely-positioned input's containing block
     becomes the viewport (or the next ancestor that has any positioning,
     which on the upload form was the form's submit button area).
     Clicking an option deep in the scrollable list focused the hidden
     input, the browser ran "scroll the focused element into view", and
     yanked the viewport to wherever it thought the input lived. */
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  user-select: none;
}
.opt-pill:hover {
  border-color: var(--border-strong);
}
.opt-pill.is-checked, .opt-pill:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
/* Visually-hidden but accessibility-tree-visible. 1px square anchored
   INSIDE the label (thanks to .opt-pill's position:relative above), so
   when the browser focuses it the "scroll into view" call has nowhere
   to scroll TO — the input already sits within the visible label. */
.opt-pill input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.opt-pill__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  display: grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.opt-pill__icon img {
  max-width: 24px;
  max-height: 24px;
}
.opt-pill__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1;
  min-width: 0;
}

.chat-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-decoration: none;
  color: inherit;
}
.chat-attach:hover {
  background: rgba(0, 0, 0, 0.28);
  color: inherit;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-fg) !important;
  border-radius: var(--radius-md) !important;
  height: auto !important;
  min-height: 42px;
  padding: 0.18rem 0.4rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--input-fg) !important;
  line-height: 32px !important;
  padding-left: 0.55rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--input-placeholder) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 38px !important;
  right: 8px !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--fg-subtle) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent var(--fg-subtle) transparent !important;
}
.select2-container--default .select2-selection--multiple {
  padding: 4px 6px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border: 0 !important;
  border-radius: var(--radius-sm) !important;
  padding: 2px 6px !important;
  margin-top: 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--accent-fg) !important;
  margin-right: 4px !important;
}
.select2-container--default .select2-selection--multiple .select2-search__field {
  color: var(--input-fg) !important;
}
.select2-container--default .select2-search--inline .select2-search__field {
  color: var(--input-fg) !important;
}
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--input-focus-ring) !important;
  outline: none !important;
}

.select2-dropdown {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}

.select2-search--dropdown .select2-search__field {
  background: var(--input-bg) !important;
  border: 1px solid var(--input-border) !important;
  color: var(--input-fg) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.4rem 0.6rem !important;
}
.select2-search--dropdown .select2-search__field:focus {
  border-color: var(--accent) !important;
}

.select2-results__option {
  color: var(--fg) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: var(--fs-sm);
}
.select2-results__option--highlighted, .select2-results__option--highlighted[aria-selected], .select2-results__option.select2-results__option--highlighted {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
}
.select2-results__option[aria-selected=true] {
  background: var(--surface-2) !important;
  color: var(--fg) !important;
}

[dir=rtl] {
  text-align: right;
}
[dir=rtl] .app-shell {
  direction: rtl;
}
[dir=rtl] .app-body {
  flex-direction: row-reverse;
}
[dir=rtl] .sidebar {
  border-right: 0;
  border-left: 1px solid var(--border-soft);
}
[dir=rtl] .topbar {
  flex-direction: row-reverse;
}
[dir=rtl] .topbar-brand {
  flex-direction: row-reverse;
}
[dir=rtl] .topbar-actions {
  flex-direction: row-reverse;
}
[dir=rtl] .btn .icon-left,
[dir=rtl] .btn > svg:first-child:not(:only-child) {
  margin-right: 0;
  margin-left: 0.4rem;
}
[dir=rtl] .btn .icon-right,
[dir=rtl] .btn > svg:last-child:not(:only-child) {
  margin-left: 0;
  margin-right: 0.4rem;
}
[dir=rtl] table {
  text-align: right;
}
[dir=rtl] th, [dir=rtl] td {
  text-align: right;
}
[dir=rtl] .text-right {
  text-align: left !important;
}
[dir=rtl] .text-left {
  text-align: right !important;
}
[dir=rtl] .form-row label {
  text-align: right;
}
[dir=rtl] input[type=checkbox], [dir=rtl] input[type=radio] {
  margin-right: 0;
  margin-left: 0.4rem;
}
[dir=rtl] .alert {
  flex-direction: row-reverse;
  text-align: right;
}
[dir=rtl] .alert .alert-icon {
  margin-right: 0;
  margin-left: 0.6rem;
}
[dir=rtl] .alert .alert-close {
  margin-left: 0;
  margin-right: auto;
}
[dir=rtl] .card-row,
[dir=rtl] .list-row {
  flex-direction: row-reverse;
}
[dir=rtl] .qt-notif-panel {
  right: auto;
  left: 0;
}
[dir=rtl] .qt-notif-row {
  flex-direction: row-reverse;
}
[dir=rtl] .qt-notif-row .ic {
  margin-right: 0;
  margin-left: 0.7rem;
}
[dir=rtl] .qt-lang-panel {
  right: auto;
  left: 0;
}
[dir=rtl] code, [dir=rtl] pre, [dir=rtl] kbd, [dir=rtl] samp,
[dir=rtl] .text-mono,
[dir=rtl] .num,
[dir=rtl] [data-keep-ltr] {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}
[dir=rtl] [data-mtp-style] {
  text-align: right;
}


/* === Collapsible sidebar nav groups (added Round 36) === */
.sidebar .nav-collapse { margin: 0 0 .25rem; }
.sidebar .nav-collapse > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .8rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  border-radius: var(--radius-md);
  transition: background .15s ease, color .15s ease;
}
.sidebar .nav-collapse > summary::-webkit-details-marker { display: none; }
.sidebar .nav-collapse > summary:hover { background: var(--surface-2); color: var(--text); }
.sidebar .nav-collapse > summary .icon { width: 1rem; flex: 0 0 auto; }
.sidebar .nav-collapse > summary .nav-collapse-caret {
  margin-left: auto;
  font-size: .65rem;
  color: var(--text-subtle);
  transition: transform .2s ease;
}
.sidebar .nav-collapse[open] > summary .nav-collapse-caret { transform: rotate(180deg); }
.sidebar .nav-collapse-body { padding: .15rem 0 .25rem .35rem; }
.sidebar .nav-collapse-body .nav-item { padding-left: 1.6rem; font-size: .85rem; }
/*# sourceMappingURL=app.css.map */