/* ============================================================
   D-SITE DESIGN SYSTEM — themes.css
   Token-based theming: DARK · LIGHT · OUTSIDE
   Load AFTER main.css

   Usage: html[data-theme="dark" | "light" | "outside" | "outsite"]
   ============================================================ */

/* ──────────────────────────────────────────────────────────
   LAYER 1: SEMANTIC DESIGN TOKENS
   All components MUST use only these variables.
   No raw rgba/hex allowed in component rules.
   ────────────────────────────────────────────────────────── */

:root,
[data-theme="dark"] {
  /* ── Backgrounds ── */
  --bg-main:      #07101f;
  --bg-card:      rgba(13,22,44,.82);
  --bg-card-solid:#0d1e36;
  --bg-nav:       rgba(5,8,20,.99);
  --bg-sidebar:   #0d1e36;
  --bg-elevated:  #172d4b;
  --bg-input:     rgba(10,6,25,.8);
  --bg-hover:     rgba(100,170,230,.09);
  --bg-overlay:   rgba(0,0,0,.65);

  /* ── Text ── */
  --text-main:    #dce8f8;
  --text-muted:   #9bb8d8;
  --text-faint:   #6a90b4;
  --text-on-accent:#ffffff;
  --text-on-nav:  rgba(220,210,255,.95);

  /* ── Borders ── */
  --border:        rgba(100,170,230,.18);
  --border-strong: rgba(100,170,230,.38);
  --border-muted:  rgba(100,170,230,.08);
  --border-input:  rgba(100,170,230,.30);

  /* ── Accent ── */
  --accent:        #7dd3fc;
  --accent-soft:   rgba(100,170,230,.18);
  --accent-hover:  rgba(100,170,230,.35);
  --accent-solid:  #2563eb;
  --accent-glow:   rgba(100,170,230,.4);

  /* ── Semantic status ── */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error:   #fb7185;
  --color-info:    #7dd3fc;

  /* ── Effects (dark: glow + shadow) ── */
  --shadow:         0 4px 24px rgba(0,0,0,.45);
  --shadow-sm:      0 2px 8px rgba(0,0,0,.3);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.6);
  --shadow-card:    0 8px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  --glow:           0 0 10px rgba(100,170,230,.15);
  --glow-hover:     0 0 20px rgba(100,170,230,.4), 0 4px 16px rgba(0,0,0,.4);
  --blur:           blur(14px);

  /* ── Nav specific ── */
  --nav-tab-color:  rgba(180,210,255,.65);
  --nav-tab-hover:  rgba(220,210,255,.95);
  --nav-tab-active: #7dd3fc;
  --nav-border:     rgba(100,170,230,.2);

  /* ── Scrollbar ── */
  --scrollbar-thumb: rgba(100,170,230,.35);

  color-scheme: dark;
}

/* ──────────────────────────────────────────────────────────
   LAYER 2: LIGHT MODE
   Inspired by Claude.ai — minimal, clean, readable
   ────────────────────────────────────────────────────────── */

[data-theme="light"] {
  /* ── Backgrounds ── */
  --bg-main:      #f5f0e8;
  --bg-card:      #fefcf8;
  --bg-card-solid:#fefcf8;
  --bg-nav:       #1e3a5f;      /* dark navy nav — stays dark */
  --bg-sidebar:   #ede8df;
  --bg-elevated:  #e4ddd0;
  --bg-input:     #fefcf8;
  --bg-hover:     rgba(37,99,235,.055);
  --bg-overlay:   rgba(0,0,0,.35);

  /* ── Text ── */
  --text-main:    #1c1917;
  --text-muted:   #44403c;
  --text-faint:   #6b6560;
  --text-on-accent:#ffffff;
  --text-on-nav:  rgba(255,255,255,.9);

  /* ── Borders ── */
  --border:        #d6cfc0;
  --border-strong: #b8b0a0;
  --border-muted:  #e8e2d8;
  --border-input:  #c4bca8;

  /* ── Accent ── */
  --accent:        #2563eb;
  --accent-soft:   rgba(37,99,235,.08);
  --accent-hover:  rgba(37,99,235,.14);
  --accent-solid:  #2563eb;
  --accent-glow:   rgba(37,99,235,.35);

  /* ── Effects (light: clean, no glow) ── */
  --shadow:         0 1px 4px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
  --shadow-sm:      0 1px 2px rgba(0,0,0,.05);
  --shadow-lg:      0 8px 24px rgba(0,0,0,.1);
  --shadow-card:    0 1px 3px rgba(0,0,0,.07), 0 4px 12px rgba(0,0,0,.04);
  --glow:           none;
  --glow-hover:     none;
  --blur:           none;

  /* ── Nav specific ── */
  --nav-tab-color:  rgba(255,255,255,.75);
  --nav-tab-hover:  #ffffff;
  --nav-tab-active: #93c5fd;
  --nav-border:     #162d4a;

  /* ── Scrollbar ── */
  --scrollbar-thumb: rgba(0,0,0,.16);

  color-scheme: light;
}

/* ──────────────────────────────────────────────────────────
   LAYER 3: OUTSIDE MODE  (sunlight / plac budowy)
   Pure white bg · pure black text · max contrast
   No transparency · no blur · no animations · thick borders
   Support both "outside" and legacy "outsite" spelling
   ────────────────────────────────────────────────────────── */

[data-theme="outside"],
[data-theme="outsite"] {
  /* ── Backgrounds ── */
  --bg-main:      #ffffff;
  --bg-card:      #ffffff;
  --bg-card-solid:#ffffff;
  --bg-nav:       #000000;
  --bg-sidebar:   #f5f5f5;
  --bg-elevated:  #eeeeee;
  --bg-input:     #ffffff;
  --bg-hover:     #f0f0f0;
  --bg-overlay:   rgba(0,0,0,.5);

  /* ── Text ── */
  --text-main:    #000000;
  --text-muted:   #222222;
  --text-faint:   #555555;
  --text-on-accent:#ffffff;
  --text-on-nav:  #ffffff;

  /* ── Borders (thick, fully opaque) ── */
  --border:        #888888;
  --border-strong: #000000;
  --border-muted:  #cccccc;
  --border-input:  #333333;

  /* ── Accent (pure black) ── */
  --accent:        #000000;
  --accent-soft:   #eeeeee;
  --accent-hover:  #dddddd;
  --accent-solid:  #000000;
  --accent-glow:   transparent;

  /* ── Semantic status — saturated, opaque ── */
  --color-success: #166534;
  --color-warning: #92400e;
  --color-error:   #991b1b;
  --color-info:    #1e40af;

  /* ── Effects (none) ── */
  --shadow:         none;
  --shadow-sm:      none;
  --shadow-lg:      none;
  --shadow-card:    none;
  --glow:           none;
  --glow-hover:     none;
  --blur:           none;

  /* ── Nav specific ── */
  --nav-tab-color:  rgba(255,255,255,.8);
  --nav-tab-hover:  #ffffff;
  --nav-tab-active: #ffffff;
  --nav-border:     #333333;

  /* ── Scrollbar ── */
  --scrollbar-thumb: #666666;

  color-scheme: light;
}

/* ──────────────────────────────────────────────────────────
   LAYER 4: COMPONENT OVERRIDES — use only token variables
   These fix components that have hardcoded rgba() in main.css
   ────────────────────────────────────────────────────────── */

/* ── Scrollbar ── */
::-webkit-scrollbar-thumb           { background: var(--scrollbar-thumb) !important; }
::-webkit-scrollbar-track           { background: transparent; }
::-webkit-scrollbar                 { width: 4px; height: 4px; }

/* ── Body / App shell ── */
body { background: var(--bg-main); color: var(--text-main); }
#app { background: var(--bg-main); }
.app-body,
.content-area,
.main-content { background: var(--bg-main); }

/* ── Top Nav ── */
.topnav {
  background: var(--bg-nav) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  box-shadow: var(--shadow-sm) !important;
  backdrop-filter: var(--blur);
}
.nav-tab {
  color: var(--nav-tab-color) !important;
}
.nav-tab:hover {
  color: var(--nav-tab-hover) !important;
}
.nav-tab.active {
  color: var(--nav-tab-active) !important;
  border-bottom-color: var(--nav-tab-active) !important;
}
.nav-more-btn        { color: var(--nav-tab-color) !important; }
.nav-more-btn:hover  { color: var(--nav-tab-hover) !important; }
.nav-more-dropdown {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.nav-more-item       { color: var(--text-muted) !important; }
.nav-more-item:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }
.nav-logout          { color: var(--nav-tab-color) !important; border-color: var(--nav-border) !important; }
.nav-logout:hover    { color: var(--nav-tab-hover) !important; border-color: var(--nav-tab-hover) !important; }
.theme-toggle-btn {
  background: var(--accent-soft) !important;
  border-color: var(--border) !important;
  color: var(--accent) !important;
}
.nav-hamburger { color: var(--nav-tab-color) !important; }

/* ── Token pill (nav right) ── */
.token-pill {
  background: var(--accent-soft) !important;
  border-color: var(--border) !important;
}
.token-label { color: var(--text-faint) !important; }
.token-val   { color: var(--accent) !important; }
.token-dot   { background: var(--accent) !important; }
.token-bar-wrap { background: var(--border-muted) !important; }

/* ── Sidebar ── */
.sidebar {
  background: var(--bg-sidebar) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.sb-title        { color: var(--text-faint) !important; }
.sb-toggle       { color: var(--text-faint) !important; }
.sb-toggle:hover { color: var(--accent) !important; background: var(--accent-soft) !important; }
.proj-item       { color: var(--text-muted) !important; }
.proj-item:hover { background: var(--bg-hover) !important; color: var(--text-main) !important; }
.proj-item.active-proj {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
}
.proj-badge {
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
}
.sb-empty { color: var(--text-faint) !important; }
.sb-api   { border-top-color: var(--border-muted) !important; }

/* Drop zones (sidebar) */
.dzone {
  border-color: var(--border-strong) !important;
  background: transparent !important;
}
.dzone:hover, .dzone.drag {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.dzone p     { color: var(--text-muted) !important; }
.dzone small { color: var(--text-faint) !important; }

/* File items */
.fitem {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.fitem:hover    { border-color: var(--accent) !important; }
.fitem-name     { color: var(--text-main) !important; }
.fitem-meta     { color: var(--text-faint) !important; }
.fitem-del      { color: var(--text-faint) !important; }
.fitem-del:hover { color: var(--color-error) !important; }

/* Cloud buttons */
.cloud-btn {
  background: var(--accent-soft) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.cloud-btn:hover {
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
  background: var(--accent-hover) !important;
}
.fmt-chip {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* ── Main Panel & Modules ── */
.main-panel { background: var(--bg-main) !important; }
.module {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
.module:hover { border-color: var(--border-strong) !important; }
.mod-hdr {
  background: var(--bg-sidebar) !important;
  border-bottom-color: var(--border-muted) !important;
}
.mod-hdr h2   { color: var(--text-main) !important; }
.mod-hdr p    { color: var(--text-muted) !important; }

/* ── Sub-tabs ── */
.sub-tabs {
  background: var(--bg-elevated) !important;
  border-bottom-color: var(--border-muted) !important;
}
.sub-tab {
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
  background: var(--bg-card) !important;
}
.sub-tab.active {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
  box-shadow: var(--glow) !important;
}
.sub-tab:hover:not(.active) {
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}

/* ── Buttons ── */
.btn-primary,
.send-btn {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
  box-shadow: var(--glow) !important;
}
.btn-primary:hover,
.send-btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--glow-hover) !important;
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.btn-secondary:hover {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
}

.action-btn {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.action-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
}

/* Action bar buttons */
.ab-btn {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.ab-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
  transform: translateY(-1px);
}
.ab-btn.danger:hover {
  background: rgba(251,113,133,.1) !important;
  border-color: rgba(251,113,133,.35) !important;
  color: var(--color-error) !important;
}

/* Export button */
.export-btn {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
}
.export-btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--glow) !important;
}
.export-dropdown {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.export-option {
  color: var(--text-muted) !important;
}
.export-option:hover {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

/* ── Action bars ── */
.action-bar,
.action-bar-unified {
  background: var(--bg-elevated) !important;
  border-top-color: var(--border-muted) !important;
}

/* ── Chat ── */
.chat-input-area {
  background: var(--bg-sidebar) !important;
  border-top-color: var(--border-muted) !important;
}
.chat-bottom-bar {
  background: var(--bg-elevated) !important;
  border-top-color: var(--border-muted) !important;
}
.full-chat-input-wrap {
  background: var(--bg-sidebar) !important;
  border-top-color: var(--border-muted) !important;
}
.full-chat-hdr {
  background: var(--bg-sidebar) !important;
  border-bottom-color: var(--border-muted) !important;
}
.full-chat-icon {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
}
.full-chat-title { color: var(--text-main) !important; }
.full-chat-sub   { color: var(--text-muted) !important; }

/* Chat input */
.chat-inp,
.chat-ta,
#chat-input,
#ci1, #ci2, #ci3 {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}
.chat-inp:focus,
.chat-ta:focus,
#chat-input:focus,
#ci1:focus, #ci2:focus, #ci3:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none !important;
}
.chat-ta::placeholder,
.chat-inp::placeholder,
#chat-input::placeholder { color: var(--text-faint) !important; }

/* Chat messages */
.chat-msg.assistant .msg-bubble,
.msg-body {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
}
.chat-msg.user .msg-bubble {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}
.msg-bubble h2, .msg-body h2,
.msg-bubble h3, .msg-body h3 { color: var(--text-main) !important; }
.msg-bubble th, .msg-body th  {
  background: var(--accent-soft) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.msg-bubble td, .msg-body td  {
  color: var(--text-main) !important;
  border-color: var(--border-muted) !important;
}
.msg-bubble tr:nth-child(even) td,
.msg-body tr:nth-child(even) td { background: var(--bg-hover) !important; }
.msg-bubble code, .msg-body code {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.msg-loading span { background: var(--accent) !important; opacity: .5; }

/* Chat chips */
.quick-chip, .quick-btn, .bento-chip {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.quick-chip:hover, .quick-btn:hover, .bento-chip:hover {
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}

/* ── Result boxes ── */
.result-box,
.result-area {
  background: var(--bg-main) !important;
  color: var(--text-main) !important;
  border-color: var(--border) !important;
}
.result-placeholder { color: var(--text-faint) !important; }

/* ── Inputs / Form controls ── */
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}
select:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
}
select::placeholder,
input::placeholder,
textarea::placeholder { color: var(--text-faint) !important; }
.modal-input {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}
.modal-input::placeholder { color: var(--text-faint) !important; }
.modal-input:focus { border-color: var(--accent) !important; }
.rewizje-ctx-input {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}
.rewizje-ctx-input::placeholder { color: var(--text-faint) !important; }
.rewizje-ctx-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }

/* ── Toast notifications ── */
#toast {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: var(--blur);
}
#toast.ok   { background: rgba(52,211,153,.08) !important; border-color: rgba(52,211,153,.35) !important; color: var(--color-success) !important; }
#toast.warn { background: rgba(251,191,36,.08) !important; border-color: rgba(251,191,36,.35) !important; color: var(--color-warning) !important; }
#toast.err  { background: rgba(251,113,133,.08) !important; border-color: rgba(251,113,133,.35) !important; color: var(--color-error) !important; }

/* ── Loader ── */
#loader { background: var(--bg-overlay) !important; backdrop-filter: var(--blur); }
.loader-box {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.loader-spin { border-color: var(--border-strong); border-top-color: var(--accent); }
.loader-txt  { color: var(--text-muted) !important; }

/* ── Modal ── */
.modal-overlay { background: var(--bg-overlay) !important; backdrop-filter: var(--blur); }
.modal-box {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-title   { color: var(--text-main) !important; }
.proj-modal    { background: var(--bg-overlay) !important; }
.proj-modal-card {
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-lg) !important;
}
.proj-field label { color: var(--text-muted) !important; }

/* ── Settings cards ── */
.settings-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.settings-card h3 { color: var(--text-main) !important; }
.set-label        { color: var(--text-muted) !important; }
.set-val          { color: var(--text-main) !important; }

/* ── Home tiles ── */
.home-tile {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.home-tile:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow) !important;
}
.tile-name       { color: var(--text-main) !important; }
.tile-desc,
.home-tile-desc  { color: var(--text-muted) !important; }
.home-tile-name  { color: var(--text-main) !important; }

/* ── Bento grid ── */
.bento-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}
.bento-card:hover {
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow) !important;
}
.bento-hdr        { border-bottom-color: var(--border-muted) !important; }
.bento-title      { color: var(--text-main) !important; }
.bento-sub        { color: var(--text-faint) !important; }
.bento-msg-ai     { background: var(--bg-elevated) !important; border-color: var(--border) !important; color: var(--text-main) !important; }
.bento-msg-who    { color: var(--accent) !important; }
.bento-open-btn {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
  box-shadow: var(--glow) !important;
}
.bento-open-btn:hover { background: var(--accent-hover) !important; box-shadow: var(--glow-hover) !important; }
.bento-prow       { background: var(--bg-hover) !important; border-color: var(--border-muted) !important; }
.bento-prow:hover { border-color: var(--border-strong) !important; }
.bento-prow-name  { color: var(--text-main) !important; }
.bento-prow-date  { color: var(--text-faint) !important; }
.bento-prow-empty { color: var(--text-faint) !important; }
.bento-new-proj   { border-color: var(--border-muted) !important; color: var(--text-faint) !important; }
.bento-new-proj:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
.bento-lrow-name  { color: var(--text-muted) !important; }
.bento-bar-bg     { background: var(--border-muted) !important; }
.bento-warn {
  background: rgba(251,191,36,.07) !important;
  border-color: rgba(251,191,36,.25) !important;
}

/* ── Scan zones ── */
.scan-zone {
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
}
.scan-zone:hover, .scan-zone.drag {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--glow) !important;
}
.scan-zone-title { color: var(--text-main) !important; }
.scan-zone-sub   { color: var(--text-muted) !important; }
.scan-zone svg   { opacity: 1 !important; }

/* ── Col zones (D-Kolizje / D-Kalkulator) ── */
.col-zone {
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
}
.col-zone:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.col-zone p, .col-zone small, .col-zone span { color: var(--text-muted) !important; }
.col-zone svg { color: var(--accent) !important; stroke: var(--accent) !important; opacity: 1 !important; }

/* ── Rewizje slots ── */
.rewizje-slot {
  background: var(--bg-card) !important;
  border-color: var(--border-strong) !important;
}
.rewizje-slot:hover, .rewizje-slot.drag {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--glow) !important;
}
.rewizje-slot-title { color: var(--text-main) !important; }
.rewizje-slot-sub   { color: var(--text-muted) !important; }
.bento-rewizje-ctx, .rewizje-result {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}
.rewizje-run-btn {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent) !important;
  box-shadow: var(--glow) !important;
}
.rewizje-run-btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: var(--glow-hover) !important;
}

/* ── Diff / Rewizje tables ── */
.diff-table th {
  background: var(--accent-soft) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.diff-table td   { border-color: var(--border-muted) !important; color: var(--text-main) !important; }
.diff-section    { border-bottom-color: var(--border-muted) !important; }
.diff-section-title { color: var(--text-muted) !important; }
.diff-impact     { background: var(--bg-elevated) !important; color: var(--text-main) !important; }
.impact-label    { color: var(--text-faint) !important; }

/* Arch / Rebar tables */
.arch-table th, .rb-table th {
  background: var(--accent-soft) !important;
  color: var(--text-muted) !important;
  border-color: var(--border) !important;
}
.arch-table td, .rb-table td { border-color: var(--border-muted) !important; color: var(--text-main) !important; }
.arch-table tr:nth-child(even) td,
.rb-table tr:nth-child(even) td { background: var(--bg-hover) !important; }

/* ── Arch tabs ── */
.arch-tab {
  color: var(--text-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
}
.arch-tab:hover  { color: var(--text-main) !important; }
.arch-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }

/* ── AI Toolbar ── */
.ai-toolbar {
  border-color: var(--border) !important;
  background: var(--bg-card) !important;
}
.ai-toolbar-title  { color: var(--text-main) !important; }
.ai-toolbar-status { color: var(--text-faint) !important; }
.ai-toolbar-input {
  background: var(--bg-input) !important;
  border-color: var(--border-input) !important;
  color: var(--text-main) !important;
}
.ai-toolbar-input::placeholder { color: var(--text-faint) !important; }
.ai-toolbar-input:focus { border-color: var(--accent) !important; }
.ai-toolbar-btn {
  background: var(--accent-soft) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-main) !important;
}
.ai-toolbar-btn:hover { background: var(--accent-hover) !important; }
.ai-toolbar-btn.ghost {
  background: var(--bg-hover) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}
.ai-provider-chip {
  border-color: var(--border) !important;
  background: var(--bg-hover) !important;
  color: var(--text-faint) !important;
}
.ai-provider-chip.active {
  border-color: var(--border-strong) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}
.ai-toolbar-note { color: var(--text-faint) !important; }

/* ── DZ-Large drop areas ── */
.dz-large {
  border-color: var(--border-strong) !important;
}
.dz-large:hover, .dz-large.drag {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
  box-shadow: var(--glow) !important;
}
.dz-large-txt  { color: var(--text-main) !important; }
.dz-large-sub  { color: var(--text-faint) !important; }
.dz-card {
  border-color: var(--border-strong) !important;
}
.dz-card:hover {
  border-color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.dz-card-lbl { color: var(--text-main) !important; }
.dz-card-sub { color: var(--text-faint) !important; }

/* ── Login screen ── */
#screen-start {
  background: var(--bg-overlay) !important;
  backdrop-filter: var(--blur);
}
.start-box {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.start-box label { color: var(--text-muted) !important; }

/* ── MCP banner ── */
.mpp-banner {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.2) !important;
  color: var(--color-warning) !important;
}

/* ── Labels / helpers ── */
.field-label { color: var(--text-muted) !important; }
label, .label { color: var(--text-muted); }
h1, h2, h3 { color: var(--text-main); }
.page-title  { color: var(--text-main) !important; }

/* ── FAB ── */
.fab-sub-label {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text-faint) !important;
}

/* ── Comp card ── */
.comp-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
}

/* ─────────────────────────────────────────────────────────────
   LAYER 5: LIGHT MODE — component-specific refinements
   Removes glow, glassmorphism, and dark-only effects
   ─────────────────────────────────────────────────────────────
   (Variables already handle most of it; these handle edge cases
   that the component's own !important rules in main.css override)
   ───────────────────────────────────────────────────────────── */

[data-theme="light"] .topnav {
  /* Keep navy nav readable on light bg — already handled via --bg-nav */
}
[data-theme="light"] .module {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
[data-theme="light"] .bento-card {
  backdrop-filter: none !important;
}
[data-theme="light"] .fab-scan { display: none !important; }
[data-theme="light"] .fab-doc {
  background: linear-gradient(135deg, #ffffff, var(--bg-elevated)) !important;
  border-color: var(--accent) !important;
  animation: none !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .fab-doc svg   { stroke: var(--accent) !important; }
[data-theme="light"] .fab-doc-txt   { color: var(--accent) !important; }
[data-theme="light"] .fab-corner    { border-color: var(--accent) !important; }
[data-theme="light"] .btn-primary,
[data-theme="light"] .send-btn {
  background: var(--accent-solid) !important;
  border-color: var(--accent-solid) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}
[data-theme="light"] .btn-primary:hover,
[data-theme="light"] .send-btn:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 4px 16px rgba(37,99,235,.35) !important;
  transform: translateY(-1px);
}
/* Logo: invert for white on navy */
[data-theme="light"] .nav-logo-img {
  filter: brightness(0) invert(1);
  opacity: .95;
}
/* Token bar — on navy nav */
[data-theme="light"] .token-pill {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
}
[data-theme="light"] .token-label { color: rgba(255,255,255,.6) !important; }
[data-theme="light"] .token-val   { color: #93c5fd !important; }
[data-theme="light"] .token-dot   { background: #60a5fa !important; }
[data-theme="light"] .nav-logout  { color: rgba(255,255,255,.8) !important; border-color: rgba(255,255,255,.3) !important; }
[data-theme="light"] .nav-logout:hover { background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.5) !important; color: #ffffff !important; }
[data-theme="light"] .theme-toggle-btn { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.3) !important; color: #ffffff !important; }
[data-theme="light"] .nav-hamburger    { color: rgba(255,255,255,.8) !important; }

/* ─────────────────────────────────────────────────────────────
   LAYER 6: OUTSIDE / OUTSITE MODE
   Strip everything — pure high-contrast, sunlight-ready
   ───────────────────────────────────────────────────────────── */

[data-theme="outside"],
[data-theme="outsite"] {
  font-size: 16px;
}

/* Kill all decorative effects */
[data-theme="outside"] *,
[data-theme="outsite"] * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  animation: none !important;
  text-shadow: none !important;
  background-image: none !important;   /* kill all gradients */
  transition: background .1s, color .1s, border-color .1s !important;
}

/* Restore box-shadows selectively — use thick borders instead */
[data-theme="outside"] *,
[data-theme="outsite"] * {
  box-shadow: none !important;
}

/* Body & app shell */
[data-theme="outside"] body,  [data-theme="outsite"] body  { background: #ffffff !important; color: #000000 !important; font-size: 16px; }
[data-theme="outside"] #app,  [data-theme="outsite"] #app  { background: #ffffff !important; }
[data-theme="outside"] .app-body, [data-theme="outsite"] .app-body { background: #ffffff !important; }

/* Nav — full black */
[data-theme="outside"] .topnav,  [data-theme="outsite"] .topnav  {
  background: #000000 !important;
  border-bottom: 2px solid #ffffff !important;
}
[data-theme="outside"] .nav-tab, [data-theme="outsite"] .nav-tab {
  color: rgba(255,255,255,.8) !important;
  font-weight: 700 !important;
  font-size: 15px;
}
[data-theme="outside"] .nav-tab:hover, [data-theme="outsite"] .nav-tab:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,.12) !important;
}
[data-theme="outside"] .nav-tab.active, [data-theme="outsite"] .nav-tab.active {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  font-weight: 900 !important;
}
[data-theme="outside"] .nav-logo-img, [data-theme="outsite"] .nav-logo-img {
  filter: brightness(0) invert(1);
}
[data-theme="outside"] .nav-more-btn,  [data-theme="outsite"] .nav-more-btn  { color: rgba(255,255,255,.8) !important; }
[data-theme="outside"] .nav-more-dropdown, [data-theme="outsite"] .nav-more-dropdown {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
}
[data-theme="outside"] .nav-more-item, [data-theme="outsite"] .nav-more-item { color: #000000 !important; font-weight: 700 !important; }
[data-theme="outside"] .nav-logout,    [data-theme="outsite"] .nav-logout    { color: rgba(255,255,255,.9) !important; border-color: rgba(255,255,255,.5) !important; font-weight: 700 !important; }

/* Token pill on black nav */
[data-theme="outside"] .token-pill, [data-theme="outsite"] .token-pill { background: rgba(255,255,255,.1) !important; border: 1px solid rgba(255,255,255,.4) !important; }
[data-theme="outside"] .token-val,  [data-theme="outsite"] .token-val  { color: #ffffff !important; font-weight: 900 !important; }
[data-theme="outside"] .token-dot,  [data-theme="outsite"] .token-dot  { background: #ffffff !important; }

/* Sidebar */
[data-theme="outside"] .sidebar,   [data-theme="outsite"] .sidebar   { background: #f5f5f5 !important; border-right: 2px solid #000000 !important; }
[data-theme="outside"] .sb-title,  [data-theme="outsite"] .sb-title  { color: #000000 !important; font-weight: 900 !important; font-size: 12px; }
[data-theme="outside"] .sb-toggle, [data-theme="outsite"] .sb-toggle { color: #555555 !important; }
[data-theme="outside"] .proj-item, [data-theme="outsite"] .proj-item { color: #222222 !important; font-weight: 600 !important; }
[data-theme="outside"] .proj-item:hover, [data-theme="outsite"] .proj-item:hover { background: #eeeeee !important; }
[data-theme="outside"] .proj-item.active-proj, [data-theme="outsite"] .proj-item.active-proj {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}
[data-theme="outside"] .proj-badge, [data-theme="outsite"] .proj-badge {
  background: #000000 !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
  font-weight: 800 !important;
}
[data-theme="outside"] .sb-empty,  [data-theme="outsite"] .sb-empty  { color: #555555 !important; font-weight: 600 !important; }
[data-theme="outside"] .fitem, [data-theme="outsite"] .fitem {
  background: #ffffff !important;
  border: 2px solid #cccccc !important;
}
[data-theme="outside"] .fitem:hover, [data-theme="outsite"] .fitem:hover { border-color: #000000 !important; }
[data-theme="outside"] .fitem-name, [data-theme="outsite"] .fitem-name { color: #000000 !important; font-weight: 700 !important; }
[data-theme="outside"] .fitem-meta, [data-theme="outsite"] .fitem-meta { color: #555555 !important; }
[data-theme="outside"] .cloud-btn, [data-theme="outsite"] .cloud-btn {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
[data-theme="outside"] .cloud-btn:hover, [data-theme="outsite"] .cloud-btn:hover { border-color: #000000 !important; }

/* Module */
[data-theme="outside"] .module, [data-theme="outsite"] .module {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
  backdrop-filter: none !important;
}
[data-theme="outside"] .module:hover, [data-theme="outsite"] .module:hover { border-color: #000000 !important; }
[data-theme="outside"] .mod-hdr, [data-theme="outsite"] .mod-hdr { background: #eeeeee !important; border-bottom: 2px solid #888888 !important; }
[data-theme="outside"] .mod-hdr h2, [data-theme="outsite"] .mod-hdr h2 { color: #000000 !important; font-weight: 900 !important; }
[data-theme="outside"] .mod-hdr p,  [data-theme="outsite"] .mod-hdr p  { color: #333333 !important; }
[data-theme="outside"] .sub-tabs, [data-theme="outsite"] .sub-tabs { background: #f0f0f0 !important; border-bottom: 2px solid #888888 !important; }
[data-theme="outside"] .sub-tab, [data-theme="outsite"] .sub-tab {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
  color: #222222 !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}
[data-theme="outside"] .sub-tab.active, [data-theme="outsite"] .sub-tab.active {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Buttons — outside */
[data-theme="outside"] .btn-primary,   [data-theme="outsite"] .btn-primary,
[data-theme="outside"] .send-btn,      [data-theme="outsite"] .send-btn,
[data-theme="outside"] .rewizje-run-btn, [data-theme="outsite"] .rewizje-run-btn {
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
[data-theme="outside"] .btn-primary:hover, [data-theme="outsite"] .btn-primary:hover,
[data-theme="outside"] .send-btn:hover,    [data-theme="outsite"] .send-btn:hover {
  background: #222222 !important;
  transform: none !important;
}
[data-theme="outside"] .btn-secondary, [data-theme="outsite"] .btn-secondary,
[data-theme="outside"] .action-btn,    [data-theme="outsite"] .action-btn,
[data-theme="outside"] .ab-btn,        [data-theme="outsite"] .ab-btn {
  background: #ffffff !important;
  border: 2px solid #555555 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
[data-theme="outside"] .action-btn:hover, [data-theme="outsite"] .action-btn:hover,
[data-theme="outside"] .ab-btn:hover,     [data-theme="outsite"] .ab-btn:hover {
  background: #eeeeee !important;
  border-color: #000000 !important;
  transform: none !important;
}
[data-theme="outside"] .export-btn, [data-theme="outsite"] .export-btn {
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}
[data-theme="outside"] .export-dropdown, [data-theme="outsite"] .export-dropdown {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
}
[data-theme="outside"] .export-option, [data-theme="outsite"] .export-option {
  color: #000000 !important;
  font-weight: 700 !important;
}
[data-theme="outside"] .export-option:hover, [data-theme="outsite"] .export-option:hover { background: #eeeeee !important; }

/* Chat — outside */
[data-theme="outside"] .chat-input-area, [data-theme="outsite"] .chat-input-area { background: #f5f5f5 !important; border-top: 2px solid #888888 !important; }
[data-theme="outside"] .chat-bottom-bar, [data-theme="outsite"] .chat-bottom-bar { background: #eeeeee !important; border-top: 2px solid #888888 !important; }
[data-theme="outside"] .chat-ta,       [data-theme="outsite"] .chat-ta,
[data-theme="outside"] .chat-inp,      [data-theme="outsite"] .chat-inp,
[data-theme="outside"] #chat-input,    [data-theme="outsite"] #chat-input {
  background: #ffffff !important;
  border: 2px solid #555555 !important;
  color: #000000 !important;
  font-size: 16px !important;
}
[data-theme="outside"] .chat-ta:focus, [data-theme="outsite"] .chat-ta:focus,
[data-theme="outside"] .chat-inp:focus,[data-theme="outsite"] .chat-inp:focus {
  border-color: #000000 !important;
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
}
[data-theme="outside"] .chat-msg.assistant .msg-bubble,
[data-theme="outsite"] .chat-msg.assistant .msg-bubble,
[data-theme="outside"] .msg-body, [data-theme="outsite"] .msg-body {
  background: #f5f5f5 !important;
  border: 2px solid #cccccc !important;
  color: #000000 !important;
  font-size: 15px !important;
}
[data-theme="outside"] .chat-msg.user .msg-bubble,
[data-theme="outsite"] .chat-msg.user .msg-bubble {
  background: #eeeeee !important;
  border: 2px solid #888888 !important;
  color: #000000 !important;
}
[data-theme="outside"] .quick-chip, [data-theme="outsite"] .quick-chip,
[data-theme="outside"] .quick-btn,  [data-theme="outsite"] .quick-btn {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}

/* Inputs — outside */
[data-theme="outside"] select,    [data-theme="outsite"] select,
[data-theme="outside"] input,     [data-theme="outsite"] input,
[data-theme="outside"] textarea,  [data-theme="outsite"] textarea {
  background: #ffffff !important;
  border: 2px solid #555555 !important;
  color: #000000 !important;
  font-size: 15px !important;
}
[data-theme="outside"] input:focus, [data-theme="outsite"] input:focus,
[data-theme="outside"] select:focus,[data-theme="outsite"] select:focus,
[data-theme="outside"] textarea:focus,[data-theme="outsite"] textarea:focus {
  outline: 3px solid #000000 !important;
  outline-offset: 2px !important;
  border-color: #000000 !important;
}

/* Result boxes */
[data-theme="outside"] .result-box,  [data-theme="outsite"] .result-box,
[data-theme="outside"] .result-area, [data-theme="outsite"] .result-area {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #cccccc !important;
  font-size: 15px !important;
}

/* Scan / Col zones */
[data-theme="outside"] .scan-zone, [data-theme="outsite"] .scan-zone,
[data-theme="outside"] .col-zone,  [data-theme="outsite"] .col-zone,
[data-theme="outside"] .dzone,     [data-theme="outsite"] .dzone {
  background: #ffffff !important;
  border: 2px dashed #888888 !important;
}
[data-theme="outside"] .scan-zone:hover, [data-theme="outsite"] .scan-zone:hover,
[data-theme="outside"] .col-zone:hover,  [data-theme="outsite"] .col-zone:hover,
[data-theme="outside"] .dzone:hover,     [data-theme="outsite"] .dzone:hover {
  border-color: #000000 !important;
  background: #f5f5f5 !important;
}
[data-theme="outside"] .scan-zone-title, [data-theme="outsite"] .scan-zone-title { color: #000000 !important; font-weight: 900 !important; font-size: 16px !important; }
[data-theme="outside"] .scan-zone-sub,   [data-theme="outsite"] .scan-zone-sub   { color: #333333 !important; font-size: 13px !important; font-weight: 700 !important; }
[data-theme="outside"] .col-zone p, [data-theme="outsite"] .col-zone p,
[data-theme="outside"] .dzone p,    [data-theme="outsite"] .dzone p    { color: #333333 !important; font-weight: 700 !important; }

/* Action bars */
[data-theme="outside"] .action-bar, [data-theme="outsite"] .action-bar,
[data-theme="outside"] .action-bar-unified, [data-theme="outsite"] .action-bar-unified {
  background: #f0f0f0 !important;
  border-top: 2px solid #888888 !important;
}

/* Toast — outside */
[data-theme="outside"] #toast,  [data-theme="outsite"] #toast  {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
  font-size: 15px !important;
}

/* Modal — outside */
[data-theme="outside"] .modal-overlay, [data-theme="outsite"] .modal-overlay { background: rgba(0,0,0,.7) !important; }
[data-theme="outside"] .modal-box,     [data-theme="outsite"] .modal-box,
[data-theme="outside"] .proj-modal-card,[data-theme="outsite"] .proj-modal-card {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
}
[data-theme="outside"] .modal-title, [data-theme="outsite"] .modal-title { color: #000000 !important; font-weight: 900 !important; }

/* Home tiles */
[data-theme="outside"] .home-tile, [data-theme="outsite"] .home-tile {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
}
[data-theme="outside"] .home-tile:hover, [data-theme="outsite"] .home-tile:hover { border-color: #000000 !important; transform: none !important; }
[data-theme="outside"] .tile-name,      [data-theme="outsite"] .tile-name,
[data-theme="outside"] .home-tile-name, [data-theme="outsite"] .home-tile-name { color: #000000 !important; font-weight: 800 !important; }
[data-theme="outside"] .tile-desc,      [data-theme="outsite"] .tile-desc,
[data-theme="outside"] .home-tile-desc, [data-theme="outsite"] .home-tile-desc { color: #333333 !important; font-weight: 600 !important; }

/* Bento */
[data-theme="outside"] .bento-card, [data-theme="outsite"] .bento-card {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
}
[data-theme="outside"] .bento-title, [data-theme="outsite"] .bento-title { color: #000000 !important; font-weight: 800 !important; }
[data-theme="outside"] .bento-sub,   [data-theme="outsite"] .bento-sub   { color: #333333 !important; }
[data-theme="outside"] .bento-open-btn, [data-theme="outsite"] .bento-open-btn {
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* FAB — outside: no glow, simple */
[data-theme="outside"] .fab-doc, [data-theme="outsite"] .fab-doc {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
}
[data-theme="outside"] .fab-doc svg,  [data-theme="outsite"] .fab-doc svg  { stroke: #000000 !important; }
[data-theme="outside"] .fab-doc-txt,  [data-theme="outsite"] .fab-doc-txt  { color: #000000 !important; }
[data-theme="outside"] .fab-corner,   [data-theme="outsite"] .fab-corner   { border-color: #000000 !important; }
[data-theme="outside"] .fab-scan,     [data-theme="outsite"] .fab-scan     { display: none !important; }
[data-theme="outside"] .fab-sub-label,[data-theme="outsite"] .fab-sub-label {
  background: #ffffff !important;
  border: 2px solid #000000 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Rewizje — outside */
[data-theme="outside"] .rewizje-slot, [data-theme="outsite"] .rewizje-slot {
  background: #ffffff !important;
  border: 2px dashed #888888 !important;
}
[data-theme="outside"] .rewizje-slot:hover, [data-theme="outsite"] .rewizje-slot:hover { border-color: #000000 !important; }
[data-theme="outside"] .bento-rewizje-ctx, [data-theme="outsite"] .bento-rewizje-ctx,
[data-theme="outside"] .rewizje-result,    [data-theme="outsite"] .rewizje-result {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
}

/* Tables — outside */
[data-theme="outside"] .arch-table th, [data-theme="outsite"] .arch-table th,
[data-theme="outside"] .rb-table th,   [data-theme="outsite"] .rb-table th,
[data-theme="outside"] .diff-table th, [data-theme="outsite"] .diff-table th {
  background: #eeeeee !important;
  color: #000000 !important;
  border: 2px solid #888888 !important;
  font-weight: 800 !important;
}
[data-theme="outside"] .arch-table td, [data-theme="outsite"] .arch-table td,
[data-theme="outside"] .rb-table td,   [data-theme="outsite"] .rb-table td,
[data-theme="outside"] .diff-table td, [data-theme="outsite"] .diff-table td {
  color: #000000 !important;
  border: 1px solid #cccccc !important;
  font-weight: 600 !important;
}
[data-theme="outside"] .arch-table tr:nth-child(even) td,
[data-theme="outsite"] .arch-table tr:nth-child(even) td,
[data-theme="outside"] .rb-table tr:nth-child(even) td,
[data-theme="outsite"] .rb-table tr:nth-child(even) td { background: #f5f5f5 !important; }

/* Scrollbar — outside: thick, visible */
[data-theme="outside"] ::-webkit-scrollbar,
[data-theme="outsite"] ::-webkit-scrollbar { width: 8px; height: 8px; }
[data-theme="outside"] ::-webkit-scrollbar-thumb,
[data-theme="outsite"] ::-webkit-scrollbar-thumb { background: #666666 !important; border-radius: 0; }

/* Login — outside */
[data-theme="outside"] .start-box, [data-theme="outsite"] .start-box {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
}

/* AI toolbar — outside */
[data-theme="outside"] .ai-toolbar, [data-theme="outsite"] .ai-toolbar {
  background: #f5f5f5 !important;
  border: 2px solid #888888 !important;
}
[data-theme="outside"] .ai-toolbar-input, [data-theme="outsite"] .ai-toolbar-input {
  background: #ffffff !important;
  border: 2px solid #555555 !important;
  color: #000000 !important;
}
[data-theme="outside"] .ai-toolbar-btn, [data-theme="outsite"] .ai-toolbar-btn {
  background: #000000 !important;
  border: 2px solid #000000 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
[data-theme="outside"] .ai-provider-chip, [data-theme="outsite"] .ai-provider-chip {
  background: #ffffff !important;
  border: 2px solid #888888 !important;
  color: #333333 !important;
  font-weight: 700 !important;
}
[data-theme="outside"] .ai-provider-chip.active, [data-theme="outsite"] .ai-provider-chip.active {
  background: #000000 !important;
  border-color: #000000 !important;
  color: #ffffff !important;
}

/* Loader — outside */
[data-theme="outside"] .loader-box, [data-theme="outsite"] .loader-box {
  background: #ffffff !important;
  border: 3px solid #000000 !important;
}
[data-theme="outside"] .loader-spin, [data-theme="outsite"] .loader-spin { border-color: #cccccc; border-top-color: #000000; }
[data-theme="outside"] .loader-txt,  [data-theme="outsite"] .loader-txt  { color: #000000 !important; font-weight: 700 !important; }

/* Mobile nav — outside */
[data-theme="outside"] .mob-bottom-nav,  [data-theme="outsite"] .mob-bottom-nav  { background: #ffffff !important; border-top: 3px solid #000000 !important; }
[data-theme="outside"] .mob-bn-item,     [data-theme="outsite"] .mob-bn-item     { color: #666666 !important; font-weight: 700 !important; }
[data-theme="outside"] .mob-bn-item.active, [data-theme="outsite"] .mob-bn-item.active { color: #000000 !important; }

/* ─────────────────────────────────────────────────────────────
   LAYER 7: ACCESSIBILITY
   Ensure focus rings are visible in all themes
   ───────────────────────────────────────────────────────────── */

[data-theme="dark"] :focus-visible,
[data-theme="light"] :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
[data-theme="outside"] :focus-visible,
[data-theme="outsite"] :focus-visible {
  outline: 3px solid #000000;
  outline-offset: 3px;
}
/* Remove focus ring from non-keyboard interactions */
:focus:not(:focus-visible) { outline: none; }