:root {
  
  --b-bg: #1e1e1e;
  --b-surface: #252526;
  --b-surface-card: #252526;
  --b-surface-hover: #2a2d2e;
  --b-surface-active: #094771;
  --b-ink: #d4d4d4;
  --b-ink-secondary: #9cdcfe;
  --b-ink-muted: #858585;
  --b-ink-dim: #6e7681;
  --b-ink-inverse: #ffffff;
  
  --b-border: 1px solid #3c3c3c;
  --b-border-subtle: 1px solid #2b2b2b;
  --b-border-strong: 1px solid #007acc;
  --b-border-thick: 2px solid #007acc;
  
  --vsc-accent: #007acc;
  --vsc-btn: #0e639c;
  --vsc-btn-hover: #1177bb;
  --vsc-btn-secondary: #3a3d41;
  --vsc-tab-active: #1e1e1e;
  --vsc-tab-inactive: #2d2d2d;
  --vsc-titlebar: #323233;
  --vsc-sidebar: #252526;
  --vsc-editor: #1e1e1e;
  
  --b-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --b-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3);
  --b-shadow-dark: 0 4px 16px rgba(0, 0, 0, 0.6);
  --b-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.85);
  
  --font-brutalist: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, Monaco, monospace;

  --system-bg: #1e1e1e;
  --system-secondary-bg: #252526;
  --system-tertiary-bg: #2d2d2d;
  --system-grouped-bg: #252526;
  --system-elevated-bg: #2a2d2e;
  
  --label-primary: #ffffff;
  --label-secondary: #d4d4d4;
  --label-tertiary: #858585;
  --label-quaternary: #6e7681;
  
  --hairline-border: #3c3c3c;
  --hairline-border-subtle: #2b2b2b;
  --hairline-border-bright: #007acc;
  
  --system-blue: #007acc;
  --system-orange: #ce9178;
  --system-cyan: #4ec9b0;
  --system-green: #6a9955;
  --system-yellow: #dcdcaa;
}

*, *::before, *::after {
  border-radius: 0 !important;
  box-sizing: border-box !important;
}

html {
  background-color: #1e1e1e !important;
  color: #d4d4d4 !important;
  font-family: var(--font-brutalist) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

body {
  background-color: #1e1e1e !important;
  color: #d4d4d4 !important;
  font-family: var(--font-brutalist) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-left: 1px solid #2b2b2b;
}
::-webkit-scrollbar-thumb {
  background: #424242;
  border: 1px solid #1e1e1e;
}
::-webkit-scrollbar-thumb:hover {
  background: #4f4f4f;
}

a {
  color: #3794ff !important;
  text-decoration: none !important;
}
a:hover {
  color: #4fc1ff !important;
  text-decoration: underline !important;
  background: transparent !important;
}

.macos-window {
  background: #1e1e1e !important;
  border: none !important;
  box-shadow: none !important;
  height: 100vh !important;
  max-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.window-toolbar {
  background: #323233 !important;
  border-bottom: 1px solid #2b2b2b !important;
  padding: 0.45rem 1rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 48px !important;
  min-height: 48px !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box !important;
  gap: 0.75rem !important;
  z-index: 100 !important;
}

.window-left, .window-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
}

.app-branding {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.app-title {
  font-family: var(--font-brutalist) !important;
  font-weight: 800 !important;
  font-size: 0.88rem !important;
  letter-spacing: 0.04em !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
}

.app-pill {
  font-family: var(--font-brutalist) !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
  background: #007acc !important;
  color: #ffffff !important;
  border: 1px solid #007acc !important;
  padding: 0.15rem 0.5rem !important;
}

.traffic-lights {
  display: flex !important;
  gap: 5px !important;
}

.traffic-dot {
  width: 12px !important;
  height: 12px !important;
  border: 1px solid #3c3c3c !important;
  background: #252526 !important;
}

.traffic-dot.dot-close {
  background: #ff5f56 !important;
  border-color: #e0443e !important;
}
.traffic-dot.dot-min {
  background: #ffbd2e !important;
  border-color: #dea123 !important;
}
.traffic-dot.dot-max {
  background: #27c93f !important;
  border-color: #1aab29 !important;
}

.toolbar-search {
  background: #3c3c3c !important;
  border: 1px solid #3c3c3c !important;
  color: #cccccc !important;
  font-family: var(--font-brutalist) !important;
  padding: 0.35rem 0.85rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  transition: all 0.1s ease !important;
}

.toolbar-search:hover {
  background: #3c3c3c !important;
  border-color: #007acc !important;
  color: #ffffff !important;
}

.search-kbd {
  background: #252526 !important;
  color: #858585 !important;
  border: 1px solid #3c3c3c !important;
  font-weight: bold !important;
  font-size: 0.7rem !important;
  padding: 0.15rem 0.45rem !important;
}

.apple-btn {
  background: #0e639c !important;
  color: #ffffff !important;
  border: 1px solid #007acc !important;
  box-shadow: none !important;
  font-family: var(--font-brutalist) !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  padding: 0.4rem 0.85rem !important;
  cursor: pointer !important;
  transition: all 0.1s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.apple-btn:hover {
  background: #1177bb !important;
  color: #ffffff !important;
  border-color: #007acc !important;
  box-shadow: 0 2px 6px rgba(0, 122, 204, 0.4) !important;
}

.apple-btn:hover svg {
  stroke: #ffffff !important;
}

.apple-btn:active {
  background: #007acc !important;
}

.apple-btn.active {
  background: #007acc !important;
  color: #ffffff !important;
}

#zoom-out-btn, #zoom-in-btn, #open-tools-btn, #copy-link-btn, #close-tools-modal {
  background: #3a3d41 !important;
  border-color: #45494e !important;
  color: #cccccc !important;
}
#zoom-out-btn:hover, #zoom-in-btn:hover, #open-tools-btn:hover, #copy-link-btn:hover, #close-tools-modal:hover {
  background: #45494e !important;
  color: #ffffff !important;
  border-color: #007acc !important;
}

.split-view-container {
  display: flex !important;
  flex: 1 !important;
  min-height: 0 !important;
  height: calc(100vh - 48px) !important;
  overflow: hidden !important;
  background: #1e1e1e !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.apple-sidebar {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  background: #252526 !important;
  border-right: 1px solid #2b2b2b !important;
  color: #cccccc !important;
  box-shadow: none !important;
  padding: 0.85rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

.sidebar-section-title {
  color: #858585 !important;
  font-weight: 800 !important;
  font-size: 0.74rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  border-bottom: 1px solid #333333 !important;
  padding-bottom: 0.4rem !important;
  margin-bottom: 0.75rem !important;
}

.sidebar-menu {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
}

.sidebar-item {
  background: transparent !important;
  color: #cccccc !important;
  border: 1px solid transparent !important;
  margin-bottom: 0.2rem !important;
  padding: 0.45rem 0.75rem !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.08s ease !important;
}

.sidebar-item:hover {
  background: #2a2d2e !important;
  color: #ffffff !important;
}

.sidebar-item.active {
  background: #094771 !important;
  color: #ffffff !important;
  border: 1px solid #007acc !important;
  font-weight: 700 !important;
}

.sidebar-item.active .sidebar-icon svg {
  stroke: #ffffff !important;
}

.sidebar-item.active .badge-count,
.sidebar-item.active .sidebar-badge {
  background: #007acc !important;
  color: #ffffff !important;
  border-color: #007acc !important;
}

.badge-count, .sidebar-badge {
  background: #333333 !important;
  color: #cccccc !important;
  border: 1px solid #3c3c3c !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  padding: 0.1rem 0.45rem !important;
}

.apple-master-pane,
.apple-master-feed {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  flex-shrink: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #252526 !important;
  border-right: 1px solid #2b2b2b !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.master-header,
.master-feed-header {
  background: #252526 !important;
  border-bottom: 1px solid #2b2b2b !important;
  padding: 0.75rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.segmented-control {
  background: #2d2d2d !important;
  border: 1px solid #3c3c3c !important;
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.segmented-item {
  color: #969696 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  border-right: 1px solid #3c3c3c !important;
  padding: 0.42rem 0.2rem !important;
  cursor: pointer !important;
  flex: 1 !important;
  text-align: center !important;
  transition: all 0.08s ease !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.segmented-item:last-child {
  border-right: none !important;
}

.segmented-item:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

.segmented-item.active {
  background: #094771 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

.master-search-box {
  background: #3c3c3c !important;
  border: 1px solid #3c3c3c !important;
  margin: 0 !important;
  padding: 0.4rem 0.6rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.master-search-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #858585 !important;
  flex-shrink: 0 !important;
}

.master-search-icon svg {
  width: 14px !important;
  height: 14px !important;
  display: block !important;
}

.master-search-input {
  background: transparent !important;
  color: #cccccc !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100% !important;
  flex: 1 !important;
  outline: none !important;
  font-family: var(--font-brutalist) !important;
}

.master-search-input::placeholder {
  color: #858585 !important;
}

.master-search-box:focus-within {
  border-color: #007acc !important;
  background: #3c3c3c !important;
}

#feed-counter-label {
  font-weight: 700 !important;
  color: #cccccc !important;
  background: #333333 !important;
  border: 1px solid #3c3c3c !important;
  padding: 0.1rem 0.45rem !important;
  font-size: 0.7rem !important;
}

.topic-list-feed {
  padding: 0.65rem !important;
  gap: 0.65rem !important;
  overflow-y: auto !important;
  flex: 1 !important;
}

.topic-cell {
  background: #1f1f1f !important;
  color: #cccccc !important;
  border: 1px solid #2d2d2d !important;
  box-shadow: none !important;
  padding: 0.85rem !important;
  margin-bottom: 0.5rem !important;
  cursor: pointer !important;
  transition: all 0.08s ease !important;
}

.topic-cell:hover {
  background: #2a2d2e !important;
  border-color: #007acc !important;
  box-shadow: none !important;
  transform: none !important;
}

.topic-cell.selected {
  background: #094771 !important;
  color: #ffffff !important;
  border-color: #007acc !important;
  box-shadow: none !important;
}

.topic-cell.selected .cell-branch-tag {
  background: #007acc !important;
  color: #ffffff !important;
  border: 1px solid #007acc !important;
}

.topic-cell.selected .cell-title {
  color: #ffffff !important;
}

.topic-cell.selected .cell-snippet,
.topic-cell.selected .cell-tagline {
  color: #d4d4d4 !important;
}

.topic-cell.selected .cell-level-badge {
  border-color: #007acc !important;
  color: #ffffff !important;
  background: rgba(0, 122, 204, 0.4) !important;
}

.topic-cell.selected .cell-read-time {
  color: #9cdcfe !important;
}

.topic-cell.selected svg {
  stroke: #ffffff !important;
}

.cell-branch-tag {
  background: #2d2d2d !important;
  color: #9cdcfe !important;
  border: 1px solid #3c3c3c !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 0.15rem 0.45rem !important;
}

.cell-title {
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
  margin: 0.4rem 0 !important;
}

.cell-snippet,
.cell-tagline {
  color: #858585 !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
}

.cell-level-badge {
  border: 1px solid #3c3c3c !important;
  color: #4ec9b0 !important;
  background: #252526 !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 0.1rem 0.4rem !important;
}

.cell-read-time {
  color: #6e7681 !important;
  font-size: 0.72rem !important;
}

.apple-detail-pane {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  flex: 1 !important;
  min-width: 0 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.canvas-toolbar {
  background: #1e1e1e !important;
  border-bottom: 1px solid #2b2b2b !important;
  padding: 0.5rem 1.25rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  flex-shrink: 0 !important;
  gap: 1rem !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

.canvas-breadcrumbs {
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #858585 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  min-width: 0 !important;
  flex: 1 !important;
}

#canvas-crumb-branch {
  color: #858585 !important;
  flex-shrink: 0 !important;
}

.crumb-active,
#canvas-crumb-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.canvas-actions {
  display: flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  flex-shrink: 0 !important;
}

.canvas-body {
  padding: 1.5rem 2rem 5rem !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.detail-control-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.85rem !important;
  border-bottom: 1px solid #2b2b2b !important;
}

.detail-mode-switch {
  max-width: 440px !important;
  flex: 1 !important;
  min-width: 260px !important;
}

.brutalist-hero-box {
  background: #252526 !important;
  border: 1px solid #007acc !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 1.75rem !important;
  font-family: var(--font-brutalist) !important;
}

.brutalist-hero-title {
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
}

.brutalist-hero-divider {
  font-weight: 800 !important;
  margin: 0.4rem 0 !important;
  color: #007acc !important;
}

.brutalist-hero-desc {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  color: #d4d4d4 !important;
}

.brutalist-hero-meta {
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #858585 !important;
}

.doc-passport-card,
.hig-card {
  background: #252526 !important;
  color: #d4d4d4 !important;
  border: 1px solid #3c3c3c !important;
  box-shadow: none !important;
  padding: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.doc-passport-header {
  border-bottom: 1px solid #3c3c3c !important;
  padding-bottom: 0.75rem !important;
  margin-bottom: 1.25rem !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.doc-spec-id {
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  color: #9cdcfe !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.doc-status-badge {
  background: #0e639c !important;
  color: #ffffff !important;
  border: 1px solid #007acc !important;
  font-size: 0.74rem !important;
  font-weight: 700 !important;
  padding: 0.2rem 0.65rem !important;
}

.doc-meta-grid {
  border: 1px solid #3c3c3c !important;
  background: #2b2b2b !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 1px !important;
}

.doc-meta-item {
  background: #252526 !important;
  padding: 0.75rem !important;
}

.doc-meta-label {
  color: #858585 !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 0.25rem !important;
}

.doc-meta-value {
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
}

.doc-section-header {
  border-bottom: 1px solid #3c3c3c !important;
  padding-bottom: 0.6rem !important;
  margin-bottom: 1.25rem !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  color: #ffffff !important;
  letter-spacing: 0.04em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.65rem !important;
}

.doc-section-num {
  background: #007acc !important;
  color: #ffffff !important;
  border: 1px solid #007acc !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  padding: 0.2rem 0.5rem !important;
}

.hig-callout {
  background: #252526 !important;
  color: #d4d4d4 !important;
  border: 1px solid #3c3c3c !important;
  border-left: 4px solid #007acc !important;
  padding: 1.25rem 1.5rem !important;
  margin-bottom: 2rem !important;
}

.hig-callout.warning {
  border-left: 4px solid #cca700 !important;
}

.ordered-step-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ordered-step-item {
  margin-bottom: 0.75rem !important;
  display: flex !important;
  gap: 0.85rem !important;
  align-items: flex-start !important;
}

.step-circle {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  background: #007acc !important;
  color: #ffffff !important;
  border: 1px solid #007acc !important;
  font-weight: 800 !important;
  font-size: 0.75rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tool-pill-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.tool-pill {
  background: #1e1e1e !important;
  color: #4ec9b0 !important;
  border: 1px solid #3c3c3c !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  padding: 0.25rem 0.65rem !important;
}

.doc-table-wrapper {
  border: 1px solid #3c3c3c !important;
  background: #252526 !important;
  margin: 1.25rem 0 !important;
  overflow-x: auto !important;
}

.doc-table {
  border-collapse: collapse !important;
  width: 100% !important;
  font-size: 0.82rem !important;
}

.doc-table th {
  background: #2d2d2d !important;
  color: #ffffff !important;
  border: 1px solid #3c3c3c !important;
  font-weight: 800 !important;
  padding: 0.65rem 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-align: left !important;
}

.doc-table td {
  border: 1px solid #2b2b2b !important;
  background: #252526 !important;
  color: #cccccc !important;
  padding: 0.65rem 0.85rem !important;
}

.doc-table tr:hover td {
  background: #2a2d2e !important;
}

.doc-badge-tag {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  border: 1px solid #3c3c3c !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.45rem !important;
  font-size: 0.72rem !important;
}

.doc-badge-tag.critical {
  background: #a1260d !important;
  color: #ffffff !important;
  border: 1px solid #f14c4c !important;
}

.doc-badge-tag.warning {
  background: #8e6c00 !important;
  color: #ffffff !important;
  border: 1px solid #cca700 !important;
}

pre {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  border: 1px solid #3c3c3c !important;
  padding: 1.25rem !important;
  overflow-x: auto !important;
}

.inset-group-box {
  background: #252526 !important;
  border: 1px solid #3c3c3c !important;
  padding: 1.25rem !important;
  margin: 1.5rem 0 !important;
}

.inset-title {
  color: #9cdcfe !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

.lang-tab-bar {
  background: #252526 !important;
  border: 1px solid #3c3c3c !important;
  padding: 0.35rem !important;
  gap: 0.35rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  margin-bottom: 1rem !important;
}

.lang-tab-btn {
  background: #2d2d2d !important;
  color: #969696 !important;
  border: 1px solid #3c3c3c !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  padding: 0.35rem 0.75rem !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.lang-tab-btn:hover {
  background: #2a2d2e !important;
  color: #ffffff !important;
}

.lang-tab-btn.active {
  background: #1e1e1e !important;
  color: #ffffff !important;
  border-top: 2px solid #007acc !important;
}

.lang-tab-btn.active svg {
  stroke: #007acc !important;
}

.apple-sheet-overlay,
.modal-overlay {
  background: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(2px) !important;
}

.apple-sheet-modal,
.spotlight-modal {
  background: #252526 !important;
  color: #d4d4d4 !important;
  border: 1px solid #007acc !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85) !important;
  overflow: hidden !important;
}

.sheet-header,
.spotlight-input-row {
  background: #2d2d2d !important;
  border-bottom: 1px solid #3c3c3c !important;
  padding: 0.85rem 1.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.sheet-title {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
}

.sheet-close-btn {
  background: #3a3d41 !important;
  color: #cccccc !important;
  border: 1px solid #45494e !important;
  font-weight: 800 !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

.sheet-close-btn:hover {
  background: #45494e !important;
  color: #ffffff !important;
}

.sheet-body {
  padding: 1.5rem !important;
  background: #252526 !important;
}

.spotlight-item {
  background: #252526 !important;
  color: #cccccc !important;
  border-bottom: 1px solid #2b2b2b !important;
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  transition: all 0.08s ease !important;
}

.spotlight-title {
  color: #d4d4d4 !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
}

.spotlight-tag {
  color: #9cdcfe !important;
  background: #2d2d2d !important;
  border: 1px solid #3c3c3c !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  padding: 0.15rem 0.5rem !important;
  text-transform: uppercase !important;
}

.spotlight-item:hover,
.spotlight-item.highlighted,
.spotlight-item.active {
  background: #094771 !important;
  color: #ffffff !important;
  border-left: 4px solid #007acc !important;
}

.spotlight-item:hover .spotlight-title,
.spotlight-item.highlighted .spotlight-title,
.spotlight-item.active .spotlight-title {
  color: #ffffff !important;
  font-weight: 700 !important;
}

input[type="text"],
input[type="number"],
select,
textarea {
  background: #3c3c3c !important;
  color: #cccccc !important;
  border: 1px solid #3c3c3c !important;
  border-radius: 0 !important;
  font-family: var(--font-brutalist) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
}

select option {
  background: #252526 !important;
  color: #ffffff !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: 1px solid #007acc !important;
  background: #3c3c3c !important;
  border-color: #007acc !important;
  color: #ffffff !important;
}

#modal-calc-angle {
  color: #4ec9b0 !important;
  font-family: var(--font-brutalist) !important;
  font-size: 1.8rem !important;
  font-weight: 800 !important;
}

#modal-fp-output {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  border: 1px solid #3c3c3c !important;
  border-radius: 0 !important;
  font-family: var(--font-brutalist) !important;
  padding: 0.75rem !important;
  margin-top: 0.75rem !important;
}

.doc-cli-banner {
  background: #1e1e1e !important;
  border: 1px solid #3c3c3c !important;
  padding: 0.5rem 0.85rem !important;
  margin-bottom: 0.75rem !important;
  color: #ffffff !important;
  font-family: var(--font-brutalist) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.doc-cli-banner span.flag {
  color: #ffffff !important;
  background: #007acc !important;
  border: 1px solid #007acc !important;
  padding: 0.1rem 0.4rem !important;
  font-weight: 700 !important;
  font-size: 0.72rem !important;
}

.doc-cli-banner code {
  color: #4ec9b0 !important;
}

#apple-toast {
  background: #252526 !important;
  border: 1px solid #007acc !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-family: var(--font-brutalist) !important;
  font-weight: 700 !important;
}

.vsc-editor-window {
  background: #1e1e1e !important;
  border: 1px solid #3c3c3c !important;
  border-radius: 0 !important;
  margin: 1.25rem 0 !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, Monaco, monospace !important;
}

.vsc-tab-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #252526 !important;
  height: 35px !important;
  border-bottom: 1px solid #1e1e1e !important;
  padding: 0 !important;
  user-select: none !important;
}

.vsc-tab {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  height: 35px !important;
  background: #1e1e1e !important;
  padding: 0 0.95rem !important;
  border-top: 2px solid #007acc !important;
  border-right: 1px solid #252526 !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: #ffffff !important;
}

.vsc-tab-icon {
  display: inline-flex !important;
  align-items: center !important;
}

.vsc-tab-name {
  color: #cccccc !important;
  letter-spacing: 0.02em !important;
}

.vsc-tab-close {
  color: #858585 !important;
  font-size: 13px !important;
  margin-left: 0.35rem !important;
  transition: color 0.15s ease !important;
}

.vsc-tab-close:hover {
  color: #ffffff !important;
}

.vsc-tab-actions {
  display: flex !important;
  align-items: center !important;
  padding-right: 0.65rem !important;
  gap: 0.4rem !important;
}

.vsc-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: #3a3d41 !important;
  border: 1px solid #45494e !important;
  color: #cccccc !important;
  padding: 0.22rem 0.55rem !important;
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

.vsc-action-btn:hover {
  background: #45494e !important;
  color: #ffffff !important;
  border-color: #007acc !important;
}

.vsc-breadcrumb-bar {
  display: flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: #1e1e1e !important;
  padding: 0.35rem 0.95rem !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  font-size: 0.73rem !important;
  color: #858585 !important;
  overflow-x: auto !important;
}

.vsc-crumb {
  color: #858585 !important;
}

.vsc-crumb-sep {
  color: #555555 !important;
  font-size: 0.82rem !important;
}

.vsc-crumb-active {
  color: #d4d4d4 !important;
  font-weight: 500 !important;
}

.vsc-cli-tag {
  margin-left: auto !important;
  background: #141414 !important;
  padding: 0.18rem 0.55rem !important;
  border-radius: 0 !important;
  font-size: 0.72rem !important;
  color: #4ec9b0 !important;
  border: 1px solid rgba(78, 201, 176, 0.25) !important;
  white-space: nowrap !important;
}

.vsc-cli-tag code {
  color: #4ec9b0 !important;
  font-family: inherit !important;
}

.vsc-editor-body {
  background: #1e1e1e !important;
  padding: 0.65rem 0 !important;
  overflow-x: auto !important;
}

.vsc-editor-code {
  display: table !important;
  width: 100% !important;
}

.vsc-line {
  display: flex !important;
  line-height: 1.55 !important;
  font-size: 0.81rem !important;
  min-height: 1.25rem !important;
  transition: background 0.08s ease !important;
}

.vsc-line:hover {
  background: #282828 !important;
}

.vsc-line-num {
  min-width: 48px !important;
  width: 48px !important;
  text-align: right !important;
  padding-right: 18px !important;
  user-select: none !important;
  color: #6e7681 !important;
  font-size: 0.76rem !important;
  flex-shrink: 0 !important;
}

.vsc-line-code {
  color: #d4d4d4 !important;
  white-space: pre !important;
  flex: 1 !important;
  padding-right: 1.25rem !important;
  tab-size: 4 !important;
}

.vsc-status-bar {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: #007acc !important;
  color: #ffffff !important;
  padding: 0.18rem 0.85rem !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  user-select: none !important;
}

.vsc-status-left,
.vsc-status-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

.vsc-status-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.vsc-keyword {
  color: #c586c0 !important;
  font-weight: 500 !important;
}

.vsc-type {
  color: #569cd6 !important;
}

.vsc-class {
  color: #4ec9b0 !important;
}

.vsc-function {
  color: #dcdcaa !important;
}

.vsc-string {
  color: #ce9178 !important;
}

.vsc-escape {
  color: #d7ba7d !important;
  font-weight: 600 !important;
}

.vsc-number {
  color: #b5cea8 !important;
}

.vsc-comment {
  color: #6a9955 !important;
  font-style: italic !important;
}

.vsc-variable {
  color: #9cdcfe !important;
}

.vsc-key {
  color: #9cdcfe !important;
}

.vsc-preproc {
  color: #c586c0 !important;
}

.vsc-flag {
  color: #d4d4d4 !important;
}

.vsc-b1 {
  color: #ffd700 !important;
}

.vsc-b2 {
  color: #da70d6 !important;
}

.vsc-b3 {
  color: #179fff !important;
}

@media (max-width: 1200px) {
  .apple-sidebar {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }
  .apple-master-pane,
  .apple-master-feed {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
  }
}

@media (max-width: 992px) {
  .apple-sidebar {
    display: none !important;
  }
  .toolbar-search {
    width: 200px !important;
  }
}

@media (max-width: 768px) {
  .macos-window {
    height: auto !important;
    min-height: 100vh !important;
    overflow: auto !important;
  }
  .split-view-container {
    flex-direction: column !important;
    height: auto !important;
  }
  .apple-master-pane,
  .apple-master-feed {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 380px !important;
    border-right: none !important;
    border-bottom: 2px solid #2b2b2b !important;
  }
  .apple-detail-pane {
    height: auto !important;
    overflow: visible !important;
  }
  .toolbar-search {
    display: none !important;
  }
  .window-toolbar {
    padding: 0.4rem 0.6rem !important;
  }
  .canvas-body {
    padding: 1rem 1rem 4rem !important;
  }
}

.window-nav-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 0.75rem;
}

.nav-tab-item {
  background: #2d2d2d !important;
  border: 1px solid #3c3c3c !important;
  border-bottom: none !important;
  color: #969696 !important;
  padding: 0.4rem 0.85rem !important;
  font-family: var(--font-brutalist) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  letter-spacing: 0.03em !important;
  transition: all 0.1s ease !important;
}

.nav-tab-item:hover {
  background: #333333 !important;
  color: #ffffff !important;
}

.nav-tab-item.active {
  background: #1e1e1e !important;
  color: #ffffff !important;
  border-color: #3c3c3c !important;
  border-top: 2px solid #007acc !important;
  box-shadow: none !important;
}

.nav-tab-item.active svg {
  stroke: #007acc !important;
}

.nav-tab-badge {
  background: #007acc !important;
  color: #ffffff !important;
  font-size: 0.65rem !important;
  padding: 1px 5px !important;
  font-weight: 800 !important;
}

.nav-tab-item:not(.active) .nav-tab-badge {
  background: #3c3c3c !important;
  color: #cccccc !important;
}

.sidebar-item-shop {
  border: 1px solid #3c3c3c !important;
  background: #252526 !important;
}

.sidebar-item-shop:hover {
  background: #2a2d2e !important;
  border-color: #007acc !important;
}

.sidebar-item-shop.active {
  background: #094771 !important;
  color: #ffffff !important;
  border-color: #007acc !important;
}

.sidebar-item-shop.active * {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.shop-badge {
  background: #007acc !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.68rem !important;
  padding: 2px 6px !important;
}

.shop-feed-card {
  display: block !important;
  padding: 1rem !important;
  border: 1px solid #3c3c3c !important;
  background: #252526 !important;
  cursor: pointer !important;
  transition: all 0.1s ease !important;
  margin-bottom: 0.75rem !important;
}

.shop-feed-card:hover {
  background: #2a2d2e !important;
  border-color: #007acc !important;
}

.shop-feed-card.selected {
  background: #094771 !important;
  border-color: #007acc !important;
  color: #ffffff !important;
}

.shop-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.shop-card-country {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
}

.shop-card-price-badge {
  font-size: 0.75rem;
  font-weight: 800;
  background: #007acc;
  color: #ffffff;
  padding: 2px 6px;
  font-family: var(--font-brutalist);
  white-space: nowrap;
}

.shop-hero-banner {
  background: #252526;
  border: 1px solid #007acc;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.shop-hero-left {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
  min-width: 260px;
}

.shop-hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin: 0 0 0.35rem;
}

.shop-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.shop-hero-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border: 1px solid #3c3c3c;
  background: #1e1e1e;
  color: #d4d4d4;
  text-transform: uppercase;
}

.shop-hero-price-box {
  text-align: right;
  flex-shrink: 0;
}

.shop-hero-price {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-brutalist);
  line-height: 1;
}

.shop-hero-btn {
  margin-top: 0.6rem;
  background: #0e639c !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  padding: 0.65rem 1.4rem !important;
  border: 1px solid #007acc !important;
  box-shadow: 0 2px 8px rgba(0, 122, 204, 0.4) !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-transform: uppercase;
  transition: all 0.12s ease;
}

.shop-hero-btn:hover {
  background: #1177bb !important;
  border-color: #007acc !important;
  box-shadow: 0 4px 12px rgba(0, 122, 204, 0.6) !important;
  transform: translate(-1px, -1px);
}

.shop-specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.shop-spec-card {
  background: #252526;
  border: 1px solid #3c3c3c;
  padding: 1.1rem;
}

.shop-spec-label {
  font-size: 0.72rem;
  color: #858585;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.shop-spec-val {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}