/*
 * Glue Theme System
 *
 * One token set, thirteen identities. Pages must not invent their own chrome.
 *
 *   Graphite   — true black, violet accent
 *   Daylight   — paper white, indigo accent
 *   Midnight   — navy, electric blue accent
 *   Nord       — polar night, frost teal accent
 *   Ember      — warm charcoal, copper
 *   Umber      — warm charcoal, dusty brass
 *   Wick       — Graphite contrast, flame accent
 *   Wick Flat  — Graphite contrast, red-orange accent
 *   Pine       — forest floor, moss gold
 *   Wine       — burgundy night, rose
 *   Voltage    — true black, acid lime
 *   Solar      — cream paper, terracotta
 *   Ink        — cool newsprint, crimson
 *
 * Gray variables are space-separated RGB for Tailwind alpha modifiers.
 * On dark themes, gray-50 is the brightest text and gray-950 is the canvas.
 * Daylight inverts that so existing bg-gray-950 / text-gray-100 classes work.
 */

/* ================================================================
   THEME PALETTES
   ================================================================ */

:root,
[data-theme="graphite"] {
  /* True black canvas. Cards lift off it. Text stays near-white. */
  --gray-50:  248 248 250;
  --gray-100: 228 228 232;
  --gray-200: 196 196 202;
  --gray-300: 168 168 176;
  --gray-400: 138 138 148;
  --gray-500: 108 108 118;
  --gray-600: 58 58 64;
  --gray-700: 36 36 40;
  --gray-800: 18 18 20;
  --gray-900: 8 8 9;
  --gray-950: 0 0 0;

  --accent: 116 87 209;
  --accent-text: #c4b5fd;
  --accent-strong: #7457d1;
  --theme-name: "Graphite";
  --theme-desc: "True black, &loop indigo";
  color-scheme: dark;
}

[data-theme="daylight"] {
  --gray-50:  17 17 19;
  --gray-100: 28 28 32;
  --gray-200: 55 55 62;
  --gray-300: 82 82 90;
  --gray-400: 112 112 120;
  --gray-500: 140 140 148;
  --gray-600: 198 198 204;
  --gray-700: 226 226 230;
  --gray-800: 240 240 243;
  --gray-900: 248 248 250;
  --gray-950: 255 255 255;

	--accent: 116 87 209;
	--accent-text: #4338ca;
	--accent-strong: #7457d1;
  --theme-name: "Daylight";
  --theme-desc: "Paper, indigo";
  color-scheme: light;
}

[data-theme="midnight"] {
  /* Navy you can actually see, not a black with a rumor of blue. */
  --gray-50:  236 240 255;
  --gray-100: 210 218 248;
  --gray-200: 174 186 230;
  --gray-300: 140 154 210;
  --gray-400: 112 126 180;
  --gray-500: 88 100 150;
  --gray-600: 48 58 102;
  --gray-700: 32 40 78;
  --gray-800: 18 24 52;
  --gray-900: 10 14 34;
  --gray-950: 5 8 22;

  --accent: 91 140 255;
  --accent-text: #93b4ff;
  --accent-strong: #6b9aff;
  --theme-name: "Midnight";
  --theme-desc: "Navy, electric blue";
  color-scheme: dark;
}

[data-theme="nord"] {
  /* Polar Night + Frost. Not GitHub dark. */
  --gray-50:  236 239 244;
  --gray-100: 216 222 233;
  --gray-200: 180 190 210;
  --gray-300: 148 160 184;
  --gray-400: 118 130 154;
  --gray-500: 94 106 128;
  --gray-600: 67 76 94;
  --gray-700: 59 66 82;
  --gray-800: 46 52 64;
  --gray-900: 36 41 51;
  --gray-950: 24 28 36;

  --accent: 136 192 208;
  --accent-text: #88c0d0;
  --accent-strong: #8fbcbb;
  --theme-name: "Nord";
  --theme-desc: "Polar night, frost";
  color-scheme: dark;
}

[data-theme="ember"] {
  --gray-50:  248 236 220;
  --gray-100: 240 228 212;
  --gray-200: 212 192 168;
  --gray-300: 184 160 132;
  --gray-400: 168 144 120;
  --gray-500: 128 108 88;
  --gray-600: 72 52 36;
  --gray-700: 52 36 24;
  --gray-800: 36 24 16;
  --gray-900: 26 18 12;
  --gray-950: 18 12 8;

  --accent: 224 138 60;
  --accent-text: #f0b060;
  --accent-strong: #f0b060;
  --theme-name: "Ember";
  --theme-desc: "Warm charcoal, copper";
  color-scheme: dark;
}

[data-theme="umber"] {
  --gray-50:  244 240 232;
  --gray-100: 232 228 220;
  --gray-200: 200 196 184;
  --gray-300: 168 164 152;
  --gray-400: 144 136 120;
  --gray-500: 112 104 92;
  --gray-600: 64 58 50;
  --gray-700: 44 40 36;
  --gray-800: 32 28 24;
  --gray-900: 24 22 20;
  --gray-950: 18 17 15;

  --accent: 196 168 130;
  --accent-text: #d4c4a0;
  --accent-strong: #d4c4a0;
  --theme-name: "Umber";
  --theme-desc: "Warm charcoal, dusty brass";
  color-scheme: dark;
}

[data-theme="wick"] {
  /* Graphite’s gray ladder. Flame on chrome. Type stays near-white. */
  --gray-50:  248 248 250;
  --gray-100: 228 228 232;
  --gray-200: 196 196 202;
  --gray-300: 168 168 176;
  --gray-400: 138 138 148;
  --gray-500: 108 108 118;
  --gray-600: 58 58 64;
  --gray-700: 36 36 40;
  --gray-800: 18 18 22;
  --gray-900: 8 8 10;
  --gray-950: 0 0 0;

  --accent: 224 112 40;
  --accent-text: #e4e4e8;
  --accent-strong: #d4482c;
  --theme-name: "Wick";
  --theme-desc: "True black, flame";
  color-scheme: dark;
}

[data-theme="wick-flat"] {
  --gray-50:  248 248 250;
  --gray-100: 228 228 232;
  --gray-200: 196 196 202;
  --gray-300: 168 168 176;
  --gray-400: 138 138 148;
  --gray-500: 108 108 118;
  --gray-600: 58 58 64;
  --gray-700: 36 36 40;
  --gray-800: 18 18 22;
  --gray-900: 8 8 10;
  --gray-950: 0 0 0;

  --accent: 212 72 44;
  --accent-text: #e4e4e8;
  --accent-strong: #e07028;
  --theme-name: "Wick Flat";
  --theme-desc: "True black, red-orange";
  color-scheme: dark;
}

[data-theme="pine"] {
  --gray-50:  236 242 236;
  --gray-100: 228 238 228;
  --gray-200: 180 200 184;
  --gray-300: 148 172 152;
  --gray-400: 122 148 128;
  --gray-500: 90 112 96;
  --gray-600: 48 64 52;
  --gray-700: 36 48 38;
  --gray-800: 24 32 24;
  --gray-900: 16 24 16;
  --gray-950: 10 18 12;

  --accent: 196 179 90;
  --accent-text: #d4c878;
  --accent-strong: #d4c878;
  --theme-name: "Pine";
  --theme-desc: "Forest floor, moss gold";
  color-scheme: dark;
}

[data-theme="wine"] {
  --gray-50:  248 232 236;
  --gray-100: 244 228 232;
  --gray-200: 210 170 182;
  --gray-300: 186 140 156;
  --gray-400: 176 128 144;
  --gray-500: 130 88 102;
  --gray-600: 72 36 48;
  --gray-700: 56 28 38;
  --gray-800: 40 16 24;
  --gray-900: 28 12 18;
  --gray-950: 20 8 12;

  --accent: 232 90 122;
  --accent-text: #f090a4;
  --accent-strong: #f090a4;
  --theme-name: "Wine";
  --theme-desc: "Burgundy night, rose";
  color-scheme: dark;
}

[data-theme="voltage"] {
  --gray-50:  248 248 244;
  --gray-100: 244 244 240;
  --gray-200: 196 196 188;
  --gray-300: 168 168 160;
  --gray-400: 138 138 128;
  --gray-500: 108 108 100;
  --gray-600: 58 58 54;
  --gray-700: 36 36 36;
  --gray-800: 20 20 20;
  --gray-900: 10 10 10;
  --gray-950: 0 0 0;

  --accent: 200 240 0;
  --accent-text: #d8ff40;
  --accent-strong: #d8ff40;
  --theme-name: "Voltage";
  --theme-desc: "True black, acid lime";
  color-scheme: dark;
}

[data-theme="solar"] {
  --gray-50:  42 32 24;
  --gray-100: 42 32 24;
  --gray-200: 80 64 48;
  --gray-300: 100 84 68;
  --gray-400: 122 106 88;
  --gray-500: 160 144 120;
  --gray-600: 198 182 158;
  --gray-700: 226 214 196;
  --gray-800: 232 220 200;
  --gray-900: 239 230 212;
  --gray-950: 246 240 228;

  --accent: 196 92 42;
  --accent-text: #a44820;
  --accent-strong: #c45c2a;
  --theme-name: "Solar";
  --theme-desc: "Cream paper, terracotta";
  color-scheme: light;
}

[data-theme="ink"] {
  --gray-50:  26 32 36;
  --gray-100: 26 32 36;
  --gray-200: 55 64 70;
  --gray-300: 70 82 90;
  --gray-400: 90 104 112;
  --gray-500: 140 152 160;
  --gray-600: 198 206 210;
  --gray-700: 214 222 226;
  --gray-800: 220 228 232;
  --gray-900: 228 234 238;
  --gray-950: 238 242 244;

  --accent: 180 35 24;
  --accent-text: #8f1c14;
  --accent-strong: #b42318;
  --theme-name: "Ink";
  --theme-desc: "Cool newsprint, crimson";
  color-scheme: light;
}


/* ================================================================
   TYPOGRAPHY
   ================================================================ */

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: 'cv01' on, 'ss03' on, 'zero' on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 480;
  letter-spacing: -0.009em;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--gray-100));
}

/* Light themes: default smoothing so glyphs stay full, not etched */
[data-theme="daylight"] body,
[data-theme="solar"] body,
[data-theme="ink"] body {
  -webkit-font-smoothing: auto;
  font-weight: 450;
}

h1, h2, h3, h4,
.text-2xl, .text-xl, .text-lg,
.font-bold, .font-semibold {
  font-weight: 560 !important;
  letter-spacing: -0.02em;
}

h1 {
  color: rgb(var(--gray-50));
}

.text-xs {
  font-size: 12px !important;
  letter-spacing: 0 !important;
  line-height: 1.4;
}

.text-sm {
  font-size: 13px !important;
  letter-spacing: -0.006em;
  line-height: 1.5;
}

.text-base {
  font-size: 14px !important;
  letter-spacing: -0.009em;
}

.text-lg {
  font-size: 16px !important;
  letter-spacing: -0.014em;
}

.text-xl {
  font-size: 18px !important;
  letter-spacing: -0.016em;
}

.text-2xl {
  font-size: 22px !important;
  letter-spacing: -0.02em;
}

.text-3xl {
  font-size: 28px !important;
  letter-spacing: -0.024em;
}

.uppercase {
  letter-spacing: 0.05em !important;
  font-weight: 550 !important;
  font-size: 11px !important;
}

code, pre, .font-mono {
  font-family: 'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace;
  font-feature-settings: normal;
  letter-spacing: 0;
}

/* Page titles are product chrome, not a per-page hue */
#feature-content h1 {
  color: rgb(var(--gray-50));
}


/* ================================================================
   DENSITY
   ================================================================ */

.p-8   { padding: 20px !important; }
.p-6   { padding: 16px !important; }
.p-5   { padding: 14px !important; }

.px-8  { padding-left: 20px !important; padding-right: 20px !important; }
.px-6  { padding-left: 16px !important; padding-right: 16px !important; }
.px-4  { padding-left: 12px !important; padding-right: 12px !important; }

.py-3  { padding-top: 8px !important;  padding-bottom: 8px !important; }
.py-2\.5 { padding-top: 7px !important; padding-bottom: 7px !important; }

.space-y-4 > * + * { margin-top: 12px !important; }
.space-y-3 > * + * { margin-top: 8px !important; }
.space-y-2 > * + * { margin-top: 6px !important; }

.mb-8  { margin-bottom: 20px !important; }
.mb-6  { margin-bottom: 16px !important; }
.mb-4  { margin-bottom: 12px !important; }
.mt-8  { margin-top: 20px !important; }

.gap-6 { gap: 16px !important; }
.gap-4 { gap: 12px !important; }
.gap-3 { gap: 8px !important; }

.max-w-6xl { max-width: 1100px !important; }
.max-w-4xl { max-width: 860px !important; }


/* ================================================================
   BORDERS & DEPTH
   ================================================================ */

.border,
.border-r, .border-b, .border-t, .border-l {
  border-width: 0.5px !important;
}

.border-gray-800 {
  border-color: rgb(var(--gray-700) / 0.55) !important;
}
.divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--gray-700) / 0.55) !important;
}
.border-gray-700 {
  border-color: rgb(var(--gray-600) / 0.55) !important;
}

.rounded-lg  { border-radius: 6px !important; }
.rounded-xl  { border-radius: 8px !important; }
.rounded-2xl { border-radius: 10px !important; }

.shadow-xl, .shadow-2xl, .shadow-lg {
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.24), 0 0 0 0.5px rgb(var(--gray-700) / 0.4) !important;
}

.bg-gray-900 { box-shadow: none; }

[data-theme="daylight"] .border-gray-800,
[data-theme="solar"] .border-gray-800,
[data-theme="ink"] .border-gray-800,
[data-theme="daylight"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]),
[data-theme="solar"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]),
[data-theme="ink"] .divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(var(--gray-600) / 0.7) !important;
}
[data-theme="daylight"] .border-gray-700,
[data-theme="solar"] .border-gray-700,
[data-theme="ink"] .border-gray-700 {
  border-color: rgb(var(--gray-500) / 0.45) !important;
}
[data-theme="daylight"] .shadow-xl,
[data-theme="daylight"] .shadow-2xl,
[data-theme="solar"] .shadow-xl,
[data-theme="solar"] .shadow-2xl,
[data-theme="ink"] .shadow-xl,
[data-theme="ink"] .shadow-2xl {
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.06), 0 0 0 0.5px rgb(var(--gray-600) / 0.35) !important;
}


/* ================================================================
   MOTION
   ================================================================ */

:root {
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
}

button, a, [role="button"], .nav-item,
input, textarea, select {
  transition: background-color 120ms var(--ease-out),
              color 120ms var(--ease-out),
              border-color 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out),
              opacity 120ms var(--ease-out),
              transform 80ms var(--ease-out);
}

button:active, a:active, [role="button"]:active, .nav-item:active {
  transform: scale(0.97);
}

@keyframes glue-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#feature-content > *:first-child {
  animation: glue-fade-in 100ms ease-out both;
}

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition: background-color 200ms var(--ease-out),
              border-color 200ms var(--ease-out),
              color 200ms var(--ease-out),
              box-shadow 200ms var(--ease-out) !important;
}

#app-sidebar {
  transition: width 220ms var(--ease-out) !important;
}
#workspace-frame {
  transition: margin-left 220ms var(--ease-out) !important;
}

.htmx-indicator { opacity: 0; transition: opacity 150ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }


/* ================================================================
   FOCUS, SELECTION, SCROLLBAR
   ================================================================ */

:focus-visible {
  outline: 1.5px solid rgb(var(--accent) / 0.65);
  outline-offset: 1px;
}

::selection {
  background: rgb(var(--accent) / 0.28);
  color: inherit;
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(var(--gray-500) / 0.45);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--gray-400) / 0.65);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--gray-500) / 0.45) transparent;
}


/* ================================================================
   ONE ACCENT — chrome, links, primary buttons
   Status colors (green / red / amber) stay semantic.
   ================================================================ */

.text-orange-500, .text-orange-400,
.text-blue-400, .text-blue-300, .text-blue-500,
.text-indigo-400, .text-indigo-300, .text-indigo-500,
.text-sky-400, .text-cyan-400 {
  color: var(--accent-text) !important;
}

.hover\:text-blue-300:hover,
.hover\:text-indigo-300:hover,
.hover\:text-cyan-300:hover,
.hover\:text-orange-300:hover {
  color: var(--accent-strong) !important;
}

.bg-orange-500, .bg-orange-600,
.bg-blue-600, .bg-blue-500, .bg-blue-700,
.bg-indigo-600, .bg-indigo-500, .bg-indigo-700 {
  background-color: rgb(var(--accent)) !important;
  color: #fff !important;
}

.hover\:bg-orange-600:hover,
.hover\:bg-blue-700:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-500:hover,
.hover\:bg-indigo-700:hover,
.hover\:bg-indigo-600:hover {
  background-color: rgb(var(--accent) / 0.85) !important;
}

.border-orange-500, .border-blue-500, .border-indigo-500,
.border-b-2.border-blue-500 {
  border-color: rgb(var(--accent)) !important;
}

.focus\:ring-orange-500:focus,
.focus\:ring-orange-500\/50:focus,
.focus\:ring-blue-500:focus,
.focus\:ring-indigo-500:focus {
  --tw-ring-color: rgb(var(--accent) / 0.4) !important;
}
.focus\:border-orange-500:focus,
.focus\:border-blue-500:focus {
  border-color: rgb(var(--accent)) !important;
}

.animate-spin.border-blue-500,
.animate-spin.border-orange-500 {
  border-color: rgb(var(--accent) / 0.25);
  border-top-color: rgb(var(--accent));
}

input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.18);
}

/* Sidebar: current page gets an accent rail */
#app-sidebar a.nav-item.bg-gray-800\/60,
#app-sidebar a.nav-item.text-gray-100 {
  box-shadow: inset 2px 0 0 rgb(var(--accent));
  color: rgb(var(--gray-50)) !important;
}

#app-sidebar .nav-item:hover .w-4,
#app-sidebar .nav-item.text-gray-100 .w-4 {
  color: var(--accent-text);
}


/* Status pills: mix semantic hue with the theme canvas so they recolor on switch. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0;
  border-radius: 999px;
  border: 0.5px solid;
  line-height: 1.4;
}
.status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-pill-ok {
  color: #3dbe6e;
  background: color-mix(in srgb, #3dbe6e 16%, rgb(var(--gray-900)));
  border-color: color-mix(in srgb, #3dbe6e 32%, rgb(var(--gray-700)));
}
.status-pill-warn {
  color: #d4a017;
  background: color-mix(in srgb, #d4a017 16%, rgb(var(--gray-900)));
  border-color: color-mix(in srgb, #d4a017 32%, rgb(var(--gray-700)));
}
.status-pill-err {
  color: #e05656;
  background: color-mix(in srgb, #e05656 16%, rgb(var(--gray-900)));
  border-color: color-mix(in srgb, #e05656 32%, rgb(var(--gray-700)));
}
.status-pill-muted {
  color: rgb(var(--gray-400));
  background: rgb(var(--gray-800));
  border-color: rgb(var(--gray-700) / 0.55);
}
[data-theme="daylight"] .status-pill-ok,
[data-theme="solar"] .status-pill-ok,
[data-theme="ink"] .status-pill-ok { color: #157a3c; }
[data-theme="daylight"] .status-pill-warn,
[data-theme="solar"] .status-pill-warn,
[data-theme="ink"] .status-pill-warn { color: #a16207; }
[data-theme="daylight"] .status-pill-err,
[data-theme="solar"] .status-pill-err,
[data-theme="ink"] .status-pill-err { color: #b91c1c; }

.status-callout-err {
  background: color-mix(in srgb, #e05656 12%, rgb(var(--gray-900)));
  border: 0.5px solid color-mix(in srgb, #e05656 28%, rgb(var(--gray-700)));
  color: #e05656;
}
[data-theme="daylight"] .status-callout-err,
[data-theme="solar"] .status-callout-err,
[data-theme="ink"] .status-callout-err { color: #b91c1c; }

/* ================================================================
   THEME PICKER
   ================================================================ */

.theme-swatch {
  width: 100%;
  height: 72px;
  border-radius: 8px;
  border: 1.5px solid rgb(var(--gray-700) / 0.6);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  padding: 0;
  text-align: left;
  transition: border-color 120ms var(--ease-out),
              transform 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out);
}
.theme-swatch:hover {
  transform: translateY(-1px);
  border-color: rgb(var(--accent) / 0.5);
}
.theme-swatch.active {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgb(var(--accent) / 0.22);
}
.theme-swatch-preview {
  display: flex;
  height: 44px;
  width: 100%;
}
.theme-swatch-rail {
  width: 18px;
  flex-shrink: 0;
}
.theme-swatch-canvas {
  flex: 1;
  position: relative;
}
.theme-swatch-line {
  position: absolute;
  left: 8px;
  height: 3px;
  border-radius: 2px;
  opacity: 0.85;
}
.theme-swatch-chip {
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 18px;
  height: 8px;
  border-radius: 2px;
}
.theme-swatch-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 8px 0;
}
.theme-swatch-name {
  font-size: 12px;
  font-weight: 550;
  color: rgb(var(--gray-100));
  letter-spacing: -0.01em;
}
.theme-swatch-desc {
  font-size: 10.5px;
  color: rgb(var(--gray-400));
}

.theme-swatch-dot {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid transparent;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 120ms var(--ease-out),
              box-shadow 120ms var(--ease-out);
}
.theme-swatch-dot.active {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 2px rgb(var(--accent) / 0.25);
}
.theme-swatch-dot-accent {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}

/* ================================================================
   &loop brand marks
   ================================================================ */

.brand-wordmark-light { display: none; }
[data-theme="daylight"] .brand-wordmark-dark,
[data-theme="solar"] .brand-wordmark-dark,
[data-theme="ink"] .brand-wordmark-dark { display: none; }
[data-theme="daylight"] .brand-wordmark-light,
[data-theme="solar"] .brand-wordmark-light,
[data-theme="ink"] .brand-wordmark-light { display: block; }

#app-sidebar .brand-mark { display: none; width: 24px; height: 24px; }
#app-sidebar.sidebar-collapsed .brand-mark { display: block; }
#app-sidebar.sidebar-collapsed .sidebar-brand { justify-content: center; }

.hidden { display: none !important; }

/* ================================================================
   COOKIE CONSENT (works without Tailwind)
   ================================================================ */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  padding-bottom: env(safe-area-inset-bottom);
}
.cookie-banner__bar {
  background: rgb(var(--gray-900));
  border-top: 1px solid rgb(var(--gray-700));
  box-shadow: 0 -12px 40px rgb(0 0 0 / 0.35);
}
.cookie-banner__inner {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.15rem 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
}
.cookie-banner__copy { flex: 1 1 16rem; }
.cookie-banner__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.cookie-banner__title h3 {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgb(var(--gray-100));
}
.cookie-banner__icon {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--accent-text);
  flex-shrink: 0;
}
.cookie-banner__copy p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.55;
  color: rgb(var(--gray-400));
}
.cookie-banner__copy a {
  color: var(--accent-text);
  text-decoration: underline;
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 0 1 auto;
}
.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 550;
  cursor: pointer;
  font-family: inherit;
}
.cookie-btn--ghost {
  color: rgb(var(--gray-300));
  background: rgb(var(--gray-800));
  border: 1px solid rgb(var(--gray-700));
}
.cookie-btn--accent {
  color: #fff;
  background: rgb(var(--accent));
  border: 1px solid transparent;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
}
.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.6);
}
.cookie-modal__center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}
.cookie-modal__panel {
  position: relative;
  background: rgb(var(--gray-900));
  border: 1px solid rgb(var(--gray-700));
  border-radius: 0.9rem;
  width: 100%;
  max-width: 32rem;
  max-height: min(90vh, 40rem);
  overflow: auto;
  box-shadow: 0 24px 80px rgb(0 0 0 / 0.45);
}
.cookie-modal__head,
.cookie-modal__foot {
  position: sticky;
  background: rgb(var(--gray-900));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
}
.cookie-modal__head {
  top: 0;
  border-bottom: 1px solid rgb(var(--gray-800));
  z-index: 1;
}
.cookie-modal__head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}
.cookie-modal__close {
  color: rgb(var(--gray-400));
  background: none;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
}
.cookie-modal__close svg { width: 1.15rem; height: 1.15rem; }
.cookie-modal__body { padding: 1rem 1.25rem; }
.cookie-modal__body > p {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: rgb(var(--gray-400));
}
.cookie-pref {
  background: rgb(var(--gray-800) / 0.5);
  border: 1px solid rgb(var(--gray-700));
  border-radius: 0.65rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.75rem;
}
.cookie-pref__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.cookie-pref h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
}
.cookie-pref p {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgb(var(--gray-400));
}
.cookie-pref__always {
  font-size: 0.7rem;
  font-weight: 550;
  color: #3dbe6e;
  border: 1px solid color-mix(in srgb, #3dbe6e 32%, rgb(var(--gray-700)));
  background: color-mix(in srgb, #3dbe6e 12%, rgb(var(--gray-900)));
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
}
.cookie-modal__foot {
  bottom: 0;
  border-top: 1px solid rgb(var(--gray-800));
  flex-wrap: wrap;
}
.cookie-switch {
  position: relative;
  width: 2.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.cookie-switch span {
  position: absolute;
  inset: 0;
  background: rgb(var(--gray-600));
  border-radius: 999px;
  cursor: pointer;
}
.cookie-switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 150ms ease;
}
.cookie-switch input:checked + span { background: rgb(var(--accent)); }
.cookie-switch input:checked + span::after { transform: translateX(16px); }
.cookie-switch input:focus-visible + span {
  outline: 1.5px solid rgb(var(--accent) / 0.65);
  outline-offset: 2px;
}

.app-nav-open,
.sidebar-backdrop,
.app-mobile-bar { display: none; }

@media (max-width: 767px) {
  html { overflow-x: hidden; }
  body.nav-locked { overflow: hidden; }

  input, select, textarea { font-size: 16px !important; }

  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .cookie-btn,
  .cookie-modal__foot .cookie-btn { flex: 1 1 9rem; }
  .cookie-modal__foot { flex-direction: column; align-items: stretch; }
  .cookie-modal__foot .cookie-banner__actions { width: 100%; }

  .app-mobile-bar {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 46;
    height: calc(3.25rem + env(safe-area-inset-top));
    padding: env(safe-area-inset-top) 0.75rem 0;
    align-items: center;
    gap: 0.65rem;
    background: rgb(var(--gray-950) / 0.92);
    border-bottom: 1px solid rgb(var(--gray-800));
    backdrop-filter: blur(12px);
  }
  .app-mobile-bar img { height: 1.35rem; width: auto; display: block; }
  .app-nav-open {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.55rem;
    border: 1px solid rgb(var(--gray-700));
    background: rgb(var(--gray-900));
    color: rgb(var(--gray-100));
    cursor: pointer;
    flex-shrink: 0;
  }
  .app-nav-open svg { width: 1.15rem; height: 1.15rem; }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    z-index: 55;
  }
  .sidebar-backdrop.is-on { display: block !important; }

  #app-sidebar {
    width: min(20rem, 88vw) !important;
    transform: translateX(-110%);
    transition: transform 220ms var(--ease-out) !important;
    z-index: 60;
  }
  #app-sidebar.is-mobile-open { transform: translateX(0); }
  #app-sidebar.sidebar-collapsed .sidebar-text,
  #app-sidebar .sidebar-text {
    opacity: 1 !important;
    width: auto !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  #app-sidebar.sidebar-collapsed .brand-mark { display: none; }
  #app-sidebar.sidebar-collapsed .brand-wordmark-dark { display: block; }
  [data-theme="daylight"] #app-sidebar.sidebar-collapsed .brand-wordmark-dark,
  [data-theme="solar"] #app-sidebar.sidebar-collapsed .brand-wordmark-dark,
  [data-theme="ink"] #app-sidebar.sidebar-collapsed .brand-wordmark-dark { display: none; }
  [data-theme="daylight"] #app-sidebar.sidebar-collapsed .brand-wordmark-light,
  [data-theme="solar"] #app-sidebar.sidebar-collapsed .brand-wordmark-light,
  [data-theme="ink"] #app-sidebar.sidebar-collapsed .brand-wordmark-light { display: block; }
  #sidebar-toggle { display: none; }

  #workspace-frame,
  #main-content {
    margin-left: 0 !important;
  }
  #workspace-frame {
    padding-top: calc(3.25rem + env(safe-area-inset-top));
    min-height: 100dvh;
  }
  #feature-content:has(#desk-root) {
    height: calc(100dvh - 3.25rem - env(safe-area-inset-top));
  }
  #desk-root {
    height: calc(100dvh - 3.25rem - env(safe-area-inset-top)) !important;
  }
  #main-content {
    padding-top: calc(3.25rem + env(safe-area-inset-top));
  }

  #agent-panel.agent-expanded {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    z-index: 70;
  }
}