/* RZRouter macOS Sequoia Liquid Glass Dark Theme */
:root {
  --rz-canvas: #0b0b0d;
  --rz-surface: rgba(24, 24, 27, 0.88);
  --rz-raised: #202023;
  --rz-text: #f4f4f5;
  --rz-muted: #b4b4bc;
  --rz-line: rgba(255, 255, 255, 0.12);
  --rz-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.65);
  --rz-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dark palette for the app's own design tokens. The pre-rendered pages ship a
   light default; these override it so the shell is dark on any build. */
:root,
html,
html[data-theme="dark"],
body {
  --color-bg: #08090d !important;
  --color-bg-alt: #0d0f15 !important;
  --color-surface: rgba(18, 22, 32, 0.78) !important;
  --color-surface-2: rgba(28, 33, 45, 0.72) !important;
  --color-surface-3: rgba(45, 52, 68, 0.62) !important;
  --color-sidebar: rgba(12, 15, 22, 0.85) !important;
  --color-border: rgba(255, 255, 255, 0.12) !important;
  --color-border-subtle: rgba(255, 255, 255, 0.07) !important;
  --color-text: #f4f4f5 !important;
  --color-text-main: #ffffff !important;
  --color-text-muted: #a1a1aa !important;
  --color-text-subtle: #71717a !important;
  --color-brand-500: #ffffff !important;
  --color-primary: #ffffff !important;
  --color-primary-hover: #e4e4e7 !important;
  --color-primary-foreground: #08090d !important;
  background-color: var(--rz-canvas) !important;
  color-scheme: dark !important;
}

/* Fix stock 9router primary and brand buttons so text and icons are legible */
.bg-primary,
.bg-brand-500,
.bg-brand-600,
button[class*="bg-primary"],
button[class*="bg-brand-"],
a[class*="bg-primary"],
a[class*="bg-brand-"],
button.bg-primary {
  background-color: #f4f4f5 !important;
  color: #08090d !important;
  font-weight: 600 !important;
}
.bg-primary *,
.bg-brand-500 *,
.bg-brand-600 *,
button[class*="bg-primary"] *,
button[class*="bg-brand-"] *,
a[class*="bg-primary"] *,
a[class*="bg-brand-"] * {
  color: #08090d !important;
}

html {
  background: var(--rz-canvas) !important;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* One key button (header) + one dock — drop copies injected by older markup. */
#rz-floating-key-btn,
#rz-traffic-lights-fixed,
#rz-traffic-lights-root,
.macos-traffic-lights,
.macos-window-controls {
  display: none !important;
}

body {
  color: var(--rz-text) !important;
  background: var(--rz-canvas) !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body:has(#rz-bottom-dock) {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body:has(#rz-bottom-dock) .flex.h-screen.w-full {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

body:has(#rz-bottom-dock) .landing-grid {
  opacity: 0.12;
}

/* Hide stock 9router sidebar completely */
aside,
body:has(#rz-bottom-dock) aside,
body:has(#rz-bottom-dock) .hidden.lg\:flex:has(> aside),
body:has(#rz-bottom-dock) .fixed.inset-y-0.left-0:has(> aside),
body:has(#rz-bottom-dock) div:has(> aside) {
  display: none !important;
}

/* Hide excised features */
body:has(#rz-bottom-dock) a[href*="/dashboard/9remote"],
body:has(#rz-bottom-dock) a[href*="/dashboard/proxy-pools"],
body:has(#rz-bottom-dock) a[href*="/dashboard/skills"],
body:has(#rz-bottom-dock) a[href="https://9remote.cc"],
body:has(#rz-bottom-dock) a[href="https://9english.net/"] {
  display: none !important;
}

/* Main full width layout */
body:has(#rz-bottom-dock) main {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  min-width: 0;
}

/* macOS Frosted Header */
body:has(#rz-bottom-dock) main > header {
  position: relative;
  margin: 12px 20px 0;
  padding: 18px 24px !important;
  background: var(--rz-surface) !important;
  border: 1px solid var(--rz-line) !important;
  border-radius: 18px;
  box-shadow: var(--rz-shadow);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: calc(100vw - 40px);
  overflow: hidden;
  box-sizing: border-box;
}

/* Hide mobile hamburger that opened the old sidebar */
body:has(#rz-bottom-dock) main > header .lg\:hidden button:has(.material-symbols-outlined) {
  display: none !important;
}

/* macOS Window Traffic Lights */
.rz-traffic-lights {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-right: 8px;
  user-select: none;
}
.rz-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform 160ms var(--rz-ease), filter 160ms var(--rz-ease);
}
.rz-dot-red { background: #ff5f56; border: 1px solid #e0443e; }
.rz-dot-yellow { background: #ffbd2e; border: 1px solid #dea123; }
.rz-dot-green { background: #27c93f; border: 1px solid #1aab29; }
.rz-traffic-lights:hover .rz-dot { filter: brightness(1.1); transform: scale(1.08); }

/* Header Action Key Button */
.rz-header-key-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
  color: var(--rz-text);
  cursor: pointer;
  backdrop-filter: blur(16px);
  transition: all 180ms var(--rz-ease);
}
.rz-header-key-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.rz-header-key-btn .rz-btn-glyph {
  font-size: 15px;
}

/* Native macOS Bottom Dock */
#rz-bottom-dock {
  position: fixed;
  z-index: 2147483000;
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 4px;
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100vw - 24px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 8px 10px;
  border-radius: 22px;
  border: 1px solid var(--rz-line);
  background: var(--rz-surface);
  box-shadow: var(--rz-shadow), inset 0 1px rgba(255, 255, 255, 0.15);
  scroll-behavior: smooth;
  backdrop-filter: blur(36px) saturate(190%);
  -webkit-backdrop-filter: blur(36px) saturate(190%);
}

#rz-bottom-dock::-webkit-scrollbar {
  display: none;
}

#rz-bottom-dock a,
#rz-bottom-dock button {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 66px;
  min-height: 52px;
  padding: 5px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--rz-muted);
  font: 500 11px/1.2 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 180ms var(--rz-ease);
}

#rz-bottom-dock a:hover,
#rz-bottom-dock button:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--rz-text);
  transform: translateY(-4px) scale(1.06);
}

#rz-bottom-dock a[aria-current="page"] {
  background: rgba(255, 255, 255, 0.18);
  color: var(--rz-text);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25);
}

#rz-bottom-dock a:active,
#rz-bottom-dock button:active {
  transform: translateY(0) scale(0.98);
}

#rz-bottom-dock :focus-visible,
#rz-key-modal :focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px;
}

#rz-bottom-dock .rz-dock-glyph {
  font: 500 20px/1 -apple-system, BlinkMacSystemFont, "Segoe UI Symbol", sans-serif;
  height: 20px;
}

#rz-bottom-dock .rz-dock-key {
  color: var(--rz-text);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
#rz-bottom-dock .rz-dock-key:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.38);
}

/* Smooth Slide Transitions Between Pages */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: 140ms ease-in both rz-fade-out;
}

::view-transition-new(root) {
  animation: 220ms ease-out both rz-fade-in;
}

@keyframes rz-fade-out {
  to { opacity: 0; transform: scale(0.995); }
}

@keyframes rz-fade-in {
  from { opacity: 0; transform: scale(1.005); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes rz-content-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body:has(#rz-bottom-dock) main > :not(header):not(.landing-grid) {
  animation: rz-content-enter 240ms var(--rz-ease) both;
}

/* Custom Key Modal Dialog */
#rz-key-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4, 6, 10, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
}

#rz-key-modal.open {
  display: flex !important;
}

#rz-key-modal .rz-modal-card {
  width: min(100%, 560px) !important;
  max-height: min(90vh, 740px) !important;
  overflow: auto;
  box-sizing: border-box;
  border: 1px solid var(--rz-line) !important;
  border-radius: 20px !important;
  background: var(--rz-raised) !important;
  color: var(--rz-text) !important;
  box-shadow: var(--rz-shadow) !important;
  animation: rz-dialog-enter 220ms var(--rz-ease) both;
}

#rz-key-modal label {
  color: var(--rz-muted);
}

#rz-key-modal input:not([type="checkbox"]) {
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  color: var(--rz-text);
  background: var(--rz-canvas);
  border: 1px solid var(--rz-line);
  border-radius: 8px;
  padding: 0 12px;
}

#rz-key-modal button {
  min-height: 44px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 160ms var(--rz-ease);
}

#rz-key-modal #rz-create-error {
  color: #ffb3aa !important;
  font-size: 13px;
  margin: 0;
}

#rz-key-modal [hidden] {
  display: none !important;
}

#rz-key-modal .rz-dialog-title {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid var(--rz-line);
}

#rz-key-modal .rz-dialog-title h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

#rz-key-modal #rz-close-key {
  min-width: 44px;
  height: 44px;
  color: var(--rz-muted);
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
}
#rz-key-modal #rz-close-key:hover {
  color: var(--rz-text);
}

#rz-key-modal .rz-dialog-body {
  display: grid;
  gap: 12px;
  padding: 20px;
}

#rz-key-modal .rz-dialog-body > label {
  font-size: 13px;
  font-weight: 500;
}

#rz-key-modal .rz-dialog-body > label:has(input) {
  display: flex;
  align-items: center;
  min-height: 36px;
  gap: 8px;
}

/* Preset Pill Buttons for Quota */
.rz-quota-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: -4px;
}
.rz-preset-pill {
  padding: 3px 10px;
  font-size: 11px;
  border-radius: 9999px;
  border: 1px solid var(--rz-line);
  background: rgba(255, 255, 255, 0.05);
  color: var(--rz-muted);
  cursor: pointer;
}
.rz-preset-pill:hover {
  background: rgba(255, 255, 255, 0.15);
  color: var(--rz-text);
}

#rz-key-modal fieldset {
  min-width: 0;
  max-height: 180px;
  overflow: auto;
  border: 1px solid var(--rz-line);
  border-radius: 10px;
  padding: 8px 12px;
}

#rz-key-modal fieldset legend {
  padding: 0 6px;
  font-size: 12px;
  color: var(--rz-muted);
}

.rz-model-helpers {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
#rz-model-search {
  flex: 1;
  min-width: 0;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--rz-line);
  color: var(--rz-text);
  margin-bottom: 0 !important;
}
#rz-model-search:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}
.rz-model-count {
  font-size: 11px;
  color: var(--rz-muted);
  margin-top: 6px;
  text-align: right;
}
.rz-model-helpers button {
  padding: 2px 8px;
  min-height: 44px !important;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--rz-line);
  color: var(--rz-muted);
}
.rz-model-helpers button:hover {
  color: var(--rz-text);
}

#rz-key-modal #rz-model-list-container {
  display: grid;
  gap: 4px;
}

#rz-key-modal #rz-model-list-container label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  overflow-wrap: anywhere;
  cursor: pointer;
  font-size: 13px;
}

#rz-key-modal #rz-model-list-container label:hover {
  background: rgba(255, 255, 255, 0.08);
}

#rz-key-modal .rz-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--rz-line);
  padding-top: 16px;
}

#rz-key-modal .rz-dialog-actions button,
#rz-key-modal #rz-copy-key-btn {
  padding: 8px 18px;
  border: 1px solid var(--rz-line);
  border-radius: 8px;
  background: var(--rz-raised);
  color: var(--rz-text);
  font-size: 13px;
  font-weight: 500;
}

#rz-key-modal #rz-submit-key-btn {
  background: var(--rz-text);
  color: var(--rz-canvas);
  border-color: transparent;
  font-weight: 600;
}
#rz-key-modal #rz-submit-key-btn:hover {
  filter: brightness(1.15);
}

#rz-key-modal button:disabled {
  opacity: 0.5;
  cursor: wait;
}

#rz-key-modal #rz-create-result:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px !important;
  border: 1px solid rgba(34, 197, 94, 0.4) !important;
  background: rgba(34, 197, 94, 0.08) !important;
  border-radius: 12px !important;
}

#rz-key-modal #rz-generated-key {
  width: 100% !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
}

#rz-key-modal #rz-copy-key-btn {
  align-self: flex-start !important;
  background: rgba(255, 255, 255, 0.12) !important;
  color: var(--rz-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  padding: 6px 14px !important;
  min-height: 44px !important;
  cursor: pointer !important;
  border-radius: 8px !important;
}
#rz-key-modal #rz-copy-key-btn:hover {
  background: rgba(255, 255, 255, 0.22) !important;
}

@keyframes rz-dialog-enter {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  body:has(#rz-bottom-dock) main > header {
    margin: 8px 12px 0;
    padding: 12px 14px !important;
    max-width: calc(100vw - 24px) !important;
    gap: 8px;
  }
  .rz-header-key-btn {
    display: none !important;
  }
  #rz-bottom-dock {
    max-width: calc(100vw - 16px);
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #rz-bottom-dock a,
  #rz-bottom-dock button {
    min-width: 58px;
    font-size: 10px;
  }
  #rz-key-modal .rz-modal-card {
    max-height: calc(100dvh - 32px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  @view-transition {
    navigation: none;
  }
}