/* ============================================================================
   Cotton Web QC — Claymorphism Design System
   Loaded on every page. Layers on top of Tailwind CDN + Font Awesome.
   Direction: soft "clay" UI — puffy, inflated elements with big rounded corners,
   a soft coloured drop shadow plus dual inner highlights (bright top edge, soft
   dark bottom edge) for a squishy 3D feel. Refined Cotton green accent kept.
   Responsive left sidebar + mobile slide-in drawer. Accessibility guardrails:
   contrast-safe text, visible focus rings, reduced motion.
   ========================================================================== */

/* ---- Design tokens --------------------------------------------------------- */
:root {
  /* Clay surfaces (soft cool pastel base + slightly lighter puffy surfaces) */
  --clay-bg:        #e6ebf5;
  --clay-surface:   #eef1f9;
  --clay-surface-2: #e2e7f2;   /* nested / pressed inputs */

  --clay-hi:   rgba(255, 255, 255, 0.9);    /* top inner highlight */
  --clay-lo:   rgba(174, 186, 209, 0.45);   /* bottom inner shade */
  --clay-cast: rgba(120, 137, 166, 0.5);    /* ambient drop shadow */

  /* Brand + status */
  --cw-accent:        #16a34a;
  --cw-accent-strong: #15803d;
  --cw-accent-soft:   #2fbe57;
  --cw-accent-tint:   rgba(22, 163, 74, 0.16);
  --cw-ring:          rgba(22, 163, 74, 0.45);

  --cw-danger:  #e5484d;
  --cw-danger-tint: rgba(229, 72, 77, 0.16);
  --cw-warn:    #d97706;
  --cw-warn-tint:  rgba(217, 119, 6, 0.16);
  --cw-ok:      #16a34a;
  --cw-info:    #2563eb;

  /* Text (dark for AA contrast on the light pastel) */
  --cw-text:        #2d3748;
  --cw-text-soft:   #4a5568;
  --cw-text-muted:  #5a6577;

  --cw-hairline: rgba(45, 55, 72, 0.07);

  /* Clay shadow presets: outer soft cast + inner top highlight + inner bottom shade */
  --clay-raised:
     0 22px 45px -16px var(--clay-cast),
     inset 0 -8px 13px var(--clay-lo),
     inset 0 10px 18px var(--clay-hi);
  --clay-raised-lg:
     0 34px 60px -20px var(--clay-cast),
     inset 0 -10px 16px var(--clay-lo),
     inset 0 14px 22px var(--clay-hi);
  --clay-raised-sm:
     0 10px 22px -8px var(--clay-cast),
     inset 0 -4px 8px var(--clay-lo),
     inset 0 5px 10px var(--clay-hi);
  --clay-pressed:
     0 4px 10px -6px var(--clay-cast),
     inset 0 6px 12px var(--clay-lo),
     inset 0 -3px 8px rgba(255,255,255,0.55);
  --clay-inset:
     inset 0 3px 8px var(--clay-lo),
     inset 0 -3px 6px rgba(255,255,255,0.8);

  /* Radius — generous, that's the clay signature */
  --cw-r-sm: 18px;
  --cw-r:    24px;
  --cw-r-lg: 30px;
  --cw-pill: 999px;

  /* Motion */
  --cw-fast: 150ms;
  --cw-base: 240ms;
  --cw-ease: cubic-bezier(0.34, 1.56, 0.64, 1);   /* gentle overshoot = squishy */
  --cw-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --cw-sidebar-w: 268px;
  --cw-topbar-h: 66px;

  --cw-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ── UI Style tokens (overridden per [data-ui-theme]) ── */
  --ui-btn-radius:    var(--cw-pill);
  --ui-input-radius:  14px;
  --ui-card-radius:   var(--cw-r-lg);
  --ui-btn-shadow:    var(--clay-raised-sm);
  --ui-btn-border:    none;
  --ui-btn-border-width: 0px;
  --ui-card-shadow:   var(--clay-raised);
  --ui-card-border:   none;
  --ui-surface-blur:  0px;
  --ui-font-weight:   500;
  --ui-letter-spacing: 0em;
  --ui-input-shadow:  var(--clay-inset);
  --ui-input-border:  none;
  --ui-neu-light:     rgba(255,255,255,0.85);
  --ui-neu-dark:      rgba(160,175,200,0.45);
}

/* ---- Base ------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }

body.app-shell,
body.cw-auth {
  font-family: var(--cw-font);
  color: var(--cw-text);
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(47, 190, 87, 0.10), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(96, 130, 255, 0.10), transparent 55%),
    var(--clay-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.app-shell { font-variant-numeric: tabular-nums; }
body.app-shell table,
body.app-shell .cw-kpi__value,
body.app-shell .tabular { font-variant-numeric: tabular-nums; }

::selection { background: var(--cw-accent-tint); color: var(--cw-text); }

/* Soft scrollbars */
body.app-shell * { scrollbar-width: thin; scrollbar-color: #c2cad9 transparent; }
body.app-shell *::-webkit-scrollbar { width: 12px; height: 12px; }
body.app-shell *::-webkit-scrollbar-thumb {
  background: #c2cad9; border-radius: 999px;
  border: 3px solid transparent; background-clip: content-box;
}

/* Visible, on-brand keyboard focus everywhere */
body.app-shell :focus-visible,
body.cw-auth :focus-visible {
  outline: 2px solid var(--cw-accent);
  outline-offset: 3px;
  border-radius: 10px;
}

/* ============================================================================
   SIDEBAR SHELL  (rendered by app-header.js)
   ========================================================================== */
body.app-shell { padding-left: 0; padding-top: var(--cw-topbar-h); }
@media (min-width: 1024px) { body.app-shell { padding-left: var(--cw-sidebar-w); } }

/* --- Sidebar --- */
.cw-sidebar {
  position: fixed;
  inset: 10px auto 10px 10px;
  width: var(--cw-sidebar-w);
  z-index: 60;
  display: flex; flex-direction: column;
  padding: 18px 16px; gap: 6px;
  background: var(--clay-surface);
  border-radius: var(--cw-r-lg);
  box-shadow: var(--clay-raised);
  transform: translateX(calc(-100% - 16px));
  transition: transform var(--cw-base) var(--cw-ease-soft);
}
@media (min-width: 1024px) { .cw-sidebar { transform: none; } }
body.cw-drawer-open .cw-sidebar { transform: translateX(0); }

.cw-brand {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 18px; margin-bottom: 6px;
}
.cw-brand__logo {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px; color: #fff; font-size: 18px;
  background: linear-gradient(180deg, var(--cw-accent-soft), var(--cw-accent));
  box-shadow: 0 10px 18px -8px rgba(22,163,74,0.55),
              inset 0 -4px 8px rgba(13,90,40,0.35),
              inset 0 5px 10px rgba(220,255,225,0.5);
}
.cw-brand__text { min-width: 0; line-height: 1.15; }
.cw-brand__title { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--cw-text); }
.cw-brand__sub { font-size: 11px; color: var(--cw-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cw-nav { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; padding: 6px 2px; }
.cw-nav__label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--cw-text-muted); padding: 10px 12px 6px;
}

.cw-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 11px 14px;
  border-radius: var(--cw-r-sm);
  color: var(--cw-text-soft);
  font-size: 13.5px; font-weight: 500;
  text-decoration: none; cursor: pointer;
  background: transparent;
  transition: box-shadow var(--cw-fast) var(--cw-ease-soft), color var(--cw-fast), transform var(--cw-fast), background var(--cw-fast);
}
.cw-nav-link i { width: 20px; text-align: center; font-size: 15px; color: var(--cw-text-muted); transition: color var(--cw-fast); }
.cw-nav-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-nav-link:hover { background: var(--clay-surface); box-shadow: var(--clay-raised-sm); color: var(--cw-text); }
.cw-nav-link:hover i { color: var(--cw-text-soft); }
.cw-nav-link:active { transform: scale(0.98); }
.cw-nav-link.is-active {
  color: var(--cw-accent-strong);
  font-weight: 600;
  background: var(--cw-accent-tint);
  box-shadow: 0 8px 16px -8px rgba(22,163,74,0.4),
              inset 0 -3px 7px rgba(22,163,74,0.18),
              inset 0 5px 10px rgba(255,255,255,0.7);
}
.cw-nav-link.is-active i { color: var(--cw-accent); }

/* Nav toggle button (parent items with children) */
button.cw-nav-link { border: none; width: 100%; text-align: left; }
.cw-nav-chev { margin-left: auto; font-size: 9px; flex-shrink: 0; color: var(--cw-text-muted); transition: transform .2s ease; }
.cw-nav-chev.is-open { transform: rotate(180deg); }

/* Sub-nav child items (e.g. Entry Form tab list) */
.cw-nav-child {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 34px; padding: 6px 14px 6px 32px;
  border-radius: var(--cw-r-sm);
  color: var(--cw-text-muted);
  font-size: 12px; font-weight: 400;
  text-decoration: none; cursor: pointer;
  background: transparent;
  border-left: 2px solid var(--clay-hi);
  margin-left: 18px;
  transition: color var(--cw-fast), background var(--cw-fast);
}
.cw-nav-child i { width: 15px; text-align: center; font-size: 11px; color: var(--cw-text-muted); transition: color var(--cw-fast); }
.cw-nav-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-nav-child:hover { background: var(--clay-surface); color: var(--cw-text-soft); }
.cw-nav-child:hover i { color: var(--cw-text-soft); }
.cw-nav-child.is-active { color: var(--cw-accent-strong); font-weight: 600; background: var(--cw-accent-tint); border-left-color: var(--cw-accent); }
.cw-nav-child.is-active i { color: var(--cw-accent); }

.cw-sidebar__footer {
  margin-top: auto; padding-top: 14px;
  display: flex; flex-direction: column; gap: 12px;
}
.cw-user {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--cw-r-sm);
  background: var(--clay-surface-2);
  box-shadow: var(--clay-inset);
}
.cw-user__avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fdfefe, #dbe2ee);
  color: var(--cw-accent-strong); font-weight: 700; font-size: 13px;
  box-shadow: 0 6px 12px -6px var(--clay-cast), inset 0 3px 6px rgba(255,255,255,0.85);
}
.cw-user__meta { min-width: 0; line-height: 1.2; }
.cw-user__name { font-size: 13px; font-weight: 600; color: var(--cw-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-user__role { font-size: 11px; color: var(--cw-text-muted); }

.cw-logout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; width: 100%; padding: 11px;
  border-radius: var(--cw-r-sm); border: none;
  background: var(--clay-surface); color: var(--cw-text-soft);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--clay-raised-sm);
  transition: box-shadow var(--cw-fast) var(--cw-ease-soft), color var(--cw-fast), transform var(--cw-fast);
}
.cw-logout:hover { color: var(--cw-danger); }
.cw-logout:active { box-shadow: var(--clay-pressed); transform: translateY(1px); }

/* --- Topbar (fixed, offset by the sidebar on desktop) --- */
.cw-topbar {
  position: fixed; top: 10px; left: 10px; right: 10px; z-index: 40;
  height: var(--cw-topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  background: var(--clay-surface);
  border-radius: var(--cw-r);
  box-shadow: var(--clay-raised-sm);
}
@media (min-width: 768px) { .cw-topbar { padding: 10px 22px; } }
@media (min-width: 1024px) { .cw-topbar { left: calc(var(--cw-sidebar-w) + 20px); right: 20px; } }

.cw-hamburger {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; flex: none;
  border-radius: 16px; border: none;
  background: var(--clay-surface); color: var(--cw-text); font-size: 17px; cursor: pointer;
  box-shadow: var(--clay-raised-sm);
  transition: box-shadow var(--cw-fast), transform var(--cw-fast);
}
.cw-hamburger:active { box-shadow: var(--clay-pressed); transform: translateY(1px); }
@media (min-width: 1024px) { .cw-hamburger { display: none; } }

.cw-topbar__titles { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.cw-topbar__icon {
  width: 42px; height: 42px; flex: none;
  display: none; place-items: center;
  border-radius: 15px; font-size: 16px;
  color: var(--cw-accent-strong); background: var(--clay-surface-2);
  box-shadow: var(--clay-inset);
}
@media (min-width: 640px) { .cw-topbar__icon { display: grid; } }
.cw-topbar__text { min-width: 0; line-height: 1.2; }
.cw-topbar__title {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--cw-text);
  margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (min-width: 768px) { .cw-topbar__title { font-size: 17px; } }
.cw-topbar__sub { font-size: 12px; color: var(--cw-text-muted); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* --- Scrim (mobile drawer backdrop) --- */
.cw-scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(45, 55, 72, 0.35);
  opacity: 0; visibility: hidden;
  transition: opacity var(--cw-base) var(--cw-ease-soft), visibility var(--cw-base);
}
body.cw-drawer-open .cw-scrim { opacity: 1; visibility: visible; }
@media (min-width: 1024px) { .cw-scrim { display: none; } }

/* ============================================================================
   COMPONENTS
   ========================================================================== */

.cw-card {
  background: var(--clay-surface);
  border-radius: var(--cw-r-lg);
  box-shadow: var(--clay-raised);
}

/* Buttons */
.cw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 20px;
  border-radius: var(--cw-r-sm); border: none;
  background: var(--clay-surface); color: var(--cw-text);
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--clay-raised-sm);
  transition: box-shadow var(--cw-fast) var(--cw-ease-soft), transform var(--cw-fast) var(--cw-ease), color var(--cw-fast);
}
.cw-btn:hover { transform: translateY(-1px); }
.cw-btn:active { box-shadow: var(--clay-pressed); transform: translateY(1px); }
.cw-btn-primary {
  background: linear-gradient(180deg, var(--cw-accent-soft), var(--cw-accent));
  color: #fff;
  box-shadow: 0 14px 26px -8px rgba(22,163,74,0.5),
              inset 0 -5px 10px rgba(13,90,40,0.35),
              inset 0 6px 12px rgba(220,255,225,0.5);
}
.cw-btn-primary:active {
  box-shadow: 0 5px 12px -6px rgba(22,163,74,0.5),
              inset 0 6px 12px rgba(13,90,40,0.4),
              inset 0 -3px 8px rgba(220,255,225,0.4);
}
.cw-btn-ghost { box-shadow: none; background: transparent; color: var(--cw-text-soft); }
.cw-btn-ghost:hover { background: var(--clay-surface); box-shadow: var(--clay-raised-sm); color: var(--cw-text); }
.cw-btn-danger {
  background: linear-gradient(180deg, #f2686c, var(--cw-danger)); color: #fff;
  box-shadow: 0 14px 26px -8px rgba(229,72,77,0.5),
              inset 0 -5px 10px rgba(120,20,22,0.3),
              inset 0 6px 12px rgba(255,225,226,0.5);
}
.cw-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: var(--clay-inset); transform: none; }

/* Status badges (puffy pills) */
.cw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 13px; border-radius: var(--cw-pill);
  font-size: 11px; font-weight: 700;
  background: var(--clay-surface); box-shadow: var(--clay-raised-sm);
}
.cw-badge--ok    { color: var(--cw-accent-strong); }
.cw-badge--warn  { color: var(--cw-warn); }
.cw-badge--bad   { color: var(--cw-danger); }
.cw-badge--muted { color: var(--cw-text-soft); }

/* KPI tile */
.cw-kpi { display: flex; flex-direction: column; gap: 4px; }
.cw-kpi__label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cw-text-muted); }
.cw-kpi__value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--cw-text); }
.cw-kpi__hint  { font-size: 11px; color: var(--cw-text-muted); }

/* ============================================================================
   AUTO-POLISH: turn existing Tailwind markup into clay inside the shell.
   Scoped to rounded panels, form controls, tables — small chips are left alone.
   ========================================================================== */

/* Panels: white/light rounded cards become puffy clay surfaces (big radius, no border) */
body.app-shell main :is(.bg-white, .bg-slate-50, .bg-gray-50):is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl),
body.app-shell section :is(.bg-white, .bg-slate-50, .bg-gray-50):is(.rounded-lg, .rounded-xl, .rounded-2xl, .rounded-3xl) {
  background: var(--clay-surface) !important;
  border-color: transparent !important;
  border-radius: var(--cw-r-lg) !important;
  box-shadow: var(--clay-raised);
}
/* Nested inner light panels read as pressed (inset) so hierarchy stays legible */
body.app-shell main :is(.bg-slate-50, .bg-gray-50):is(.rounded-lg, .rounded-xl, .rounded-2xl),
body.app-shell main .bg-indigo-50:is(.rounded-lg, .rounded-xl, .rounded-2xl) {
  background: var(--clay-surface-2) !important;
  box-shadow: var(--clay-inset);
}

/* Dark header band inside form cards → readable clay dark control bar */
body.app-shell main .bg-slate-800 {
  background: linear-gradient(180deg, #3c465c, #333c4e) !important;
  box-shadow: 0 12px 24px -12px var(--clay-cast),
              inset 0 -5px 10px rgba(0,0,0,0.25),
              inset 0 6px 12px rgba(255,255,255,0.14);
}

/* Form controls: pressed (concave) clay fields */
body.app-shell input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
body.app-shell select,
body.app-shell textarea {
  background: var(--clay-surface-2);
  border: none;
  border-radius: var(--cw-r-sm);
  color: var(--cw-text);
  box-shadow: var(--clay-inset);
  transition: box-shadow var(--cw-fast);
}
body.app-shell input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
body.app-shell select:focus,
body.app-shell textarea:focus {
  outline: 2px solid var(--cw-accent);
  outline-offset: 2px;
  box-shadow: inset 0 3px 9px var(--clay-lo), inset 0 -3px 6px rgba(255,255,255,0.85);
}
body.app-shell input[type=checkbox], body.app-shell input[type=radio] { accent-color: var(--cw-accent); }

/* Tables: flat rows on the clay surface, subtle header, accent row hover */
body.app-shell main table thead,
body.app-shell section table thead { background: transparent !important; }
body.app-shell main table thead th,
body.app-shell section table thead th {
  color: var(--cw-text-soft) !important;
  font-size: 11px; letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(174,186,209,0.5);
}
body.app-shell main tbody tr,
body.app-shell section tbody tr { transition: background var(--cw-fast); }
body.app-shell main tbody tr:hover,
body.app-shell section tbody tr:hover { background: var(--cw-accent-tint) !important; }
body.app-shell main table .bg-white,
body.app-shell main tbody.bg-white,
body.app-shell section table .bg-white { background: transparent !important; }
/* Frozen (sticky) table headers must stay OPAQUE so scrolling rows never show
   through them. The clay surface colour matches the panel behind the table, so
   the header looks seamless when still but fully hides rows once you scroll.
   The `.bg-white` variants are needed to out-specify the transparent rule above. */
body.app-shell main table thead th,
body.app-shell section table thead th,
body.app-shell main table thead th.bg-white,
body.app-shell section table thead th.bg-white { background: var(--clay-surface) !important; }
/* Soften Tailwind divide/borders to the clay palette */
body.app-shell main :is(.divide-slate-200, .divide-gray-200) > :not([hidden]) ~ :not([hidden]),
body.app-shell main :is(.border-slate-200, .border-slate-300, .border-gray-200) { border-color: rgba(174,186,209,0.5) !important; }

/* Press feedback on common Tailwind action buttons */
body.app-shell main button.rounded-lg:active,
body.app-shell section button.rounded-lg:active { transform: translateY(1px); }

body.app-shell main { position: relative; }

/* ============================================================================
   AUTH PAGES (login / super-login / index) — clay, no shell
   ========================================================================== */
.cw-auth__wrap { width: 100%; max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.cw-auth__card {
  background: var(--clay-surface);
  border-radius: var(--cw-r-lg);
  box-shadow: var(--clay-raised-lg);
  padding: 28px 26px 30px;
}
.cw-auth__logo {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: grid; place-items: center; border-radius: 18px;
  color: #fff; font-size: 22px;
  background: linear-gradient(180deg, var(--cw-accent-soft), var(--cw-accent));
  box-shadow: 0 12px 22px -8px rgba(22,163,74,0.55),
              inset 0 -5px 10px rgba(13,90,40,0.35),
              inset 0 6px 12px rgba(220,255,225,0.5);
}

/* ============================================================================
   HIDE NAVIGATION (desktop collapse; remembered per browser)
   ========================================================================== */

/* Old inline hide button — hidden; replaced by the floater */
.cw-nav-hide { display: none !important; }

/* Floating bottom toggle — always visible, bottom-left corner */
.cw-nav-floater {
  position: fixed;
  bottom: 18px;
  left: calc(var(--cw-sidebar-w) + 18px);
  z-index: 70;
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: none; border-radius: 999px;
  background: var(--clay-surface);
  color: var(--cw-text-soft);
  font-family: var(--cw-font); font-size: 12.5px; font-weight: 600; cursor: pointer;
  box-shadow: var(--clay-raised-sm);
  transition: left var(--cw-base) var(--cw-ease-soft),
              box-shadow var(--cw-fast), transform var(--cw-fast),
              color var(--cw-fast);
  white-space: nowrap;
}
.cw-nav-floater:hover { color: var(--cw-accent-strong); box-shadow: var(--clay-raised); }
.cw-nav-floater:active { transform: scale(0.97); }
@media (min-width: 1024px) { .cw-nav-floater { display: inline-flex; } }

@media (min-width: 1024px) {
  body.cw-nav-hidden { padding-left: 0; }
  body.cw-nav-hidden .cw-sidebar { transform: translateX(calc(-100% - 24px)); }
  body.cw-nav-hidden .cw-topbar { left: 12px; }
  body.cw-nav-hidden .cw-hamburger { display: inline-grid; }
  body.cw-nav-hidden .cw-nav-floater { left: 18px; }
}

/* ============================================================================
   MOTION PREFERENCES
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * , *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cw-sidebar { transition: none; }
}

/* ============================================================================
   THEMES — override :root tokens via [data-theme] on <html>.
   "clay" (default) needs no override — :root already defines it.
   ========================================================================== */

/* Midnight Dark — deep navy, indigo accent */
[data-theme="dark"] {
  --clay-bg:        #0d1117;
  --clay-surface:   #161b22;
  --clay-surface-2: #0d1117;
  --clay-hi:   rgba(255, 255, 255, 0.06);
  --clay-lo:   rgba(0, 0, 0, 0.45);
  --clay-cast: rgba(0, 0, 0, 0.6);
  --cw-accent:        #818cf8;
  --cw-accent-strong: #6366f1;
  --cw-accent-soft:   #a5b4fc;
  --cw-accent-tint:   rgba(129, 140, 248, 0.16);
  --cw-ring:          rgba(129, 140, 248, 0.5);
  --cw-text:        #e2e8f0;
  --cw-text-soft:   #94a3b8;
  --cw-text-muted:  #64748b;
  --cw-hairline: rgba(255, 255, 255, 0.06);
  --clay-raised:
     0 22px 45px -16px var(--clay-cast),
     inset 0 -8px 13px var(--clay-lo),
     inset 0 10px 18px var(--clay-hi);
  --clay-raised-lg:
     0 34px 60px -20px var(--clay-cast),
     inset 0 -10px 16px var(--clay-lo),
     inset 0 14px 22px var(--clay-hi);
  --clay-raised-sm:
     0 10px 22px -8px var(--clay-cast),
     inset 0 -4px 8px var(--clay-lo),
     inset 0 5px 10px var(--clay-hi);
  --clay-pressed:
     0 4px 10px -6px var(--clay-cast),
     inset 0 6px 12px var(--clay-lo),
     inset 0 -3px 8px rgba(255,255,255,0.04);
  --clay-inset:
     inset 0 3px 8px var(--clay-lo),
     inset 0 -3px 6px rgba(255,255,255,0.04);
}
[data-theme="dark"] body.app-shell,
[data-theme="dark"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(99,102,241,0.12), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(129,140,248,0.08), transparent 55%),
    var(--clay-bg);
}
[data-theme="dark"] body.app-shell * { scrollbar-color: #2d3748 transparent; }
[data-theme="dark"] body.app-shell *::-webkit-scrollbar-thumb { background: #2d3748; }

/* Ocean Blue — corporate cool */
[data-theme="ocean"] {
  --clay-bg:        #dbeafe;
  --clay-surface:   #eff6ff;
  --clay-surface-2: #dbeafe;
  --clay-hi:   rgba(255, 255, 255, 0.92);
  --clay-lo:   rgba(147, 197, 253, 0.55);
  --clay-cast: rgba(59, 130, 246, 0.28);
  --cw-accent:        #2563eb;
  --cw-accent-strong: #1d4ed8;
  --cw-accent-soft:   #3b82f6;
  --cw-accent-tint:   rgba(37, 99, 235, 0.14);
  --cw-ring:          rgba(37, 99, 235, 0.45);
  --cw-text:        #1e3a5f;
  --cw-text-soft:   #3b5a8a;
  --cw-text-muted:  #5b7ba6;
  --cw-hairline: rgba(37, 99, 235, 0.08);
}
[data-theme="ocean"] body.app-shell,
[data-theme="ocean"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(59,130,246,0.14), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(147,197,253,0.18), transparent 55%),
    var(--clay-bg);
}

/* Warm Amber — golden tone */
[data-theme="amber"] {
  --clay-bg:        #fef3c7;
  --clay-surface:   #fffbeb;
  --clay-surface-2: #fde68a;
  --clay-hi:   rgba(255, 255, 255, 0.9);
  --clay-lo:   rgba(217, 119, 6, 0.3);
  --clay-cast: rgba(180, 100, 10, 0.35);
  --cw-accent:        #d97706;
  --cw-accent-strong: #b45309;
  --cw-accent-soft:   #f59e0b;
  --cw-accent-tint:   rgba(217, 119, 6, 0.14);
  --cw-ring:          rgba(217, 119, 6, 0.45);
  --cw-text:        #451a03;
  --cw-text-soft:   #78350f;
  --cw-text-muted:  #92400e;
  --cw-hairline: rgba(217, 119, 6, 0.10);
}
[data-theme="amber"] body.app-shell,
[data-theme="amber"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(245,158,11,0.14), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(253,230,138,0.22), transparent 55%),
    var(--clay-bg);
}

/* Rose Luxury — pink mauve */
[data-theme="rose"] {
  --clay-bg:        #fce7f3;
  --clay-surface:   #fdf2f8;
  --clay-surface-2: #fbcfe8;
  --clay-hi:   rgba(255, 255, 255, 0.92);
  --clay-lo:   rgba(236, 72, 153, 0.25);
  --clay-cast: rgba(190, 50, 110, 0.3);
  --cw-accent:        #db2777;
  --cw-accent-strong: #be185d;
  --cw-accent-soft:   #ec4899;
  --cw-accent-tint:   rgba(219, 39, 119, 0.14);
  --cw-ring:          rgba(219, 39, 119, 0.45);
  --cw-text:        #500724;
  --cw-text-soft:   #831843;
  --cw-text-muted:  #9d174d;
  --cw-hairline: rgba(219, 39, 119, 0.09);
}
[data-theme="rose"] body.app-shell,
[data-theme="rose"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(236,72,153,0.12), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(251,207,232,0.22), transparent 55%),
    var(--clay-bg);
}

/* Graphite Pro — dark charcoal minimal, teal accent */
[data-theme="graphite"] {
  --clay-bg:        #18181b;
  --clay-surface:   #27272a;
  --clay-surface-2: #18181b;
  --clay-hi:   rgba(255, 255, 255, 0.07);
  --clay-lo:   rgba(0, 0, 0, 0.5);
  --clay-cast: rgba(0, 0, 0, 0.65);
  --cw-accent:        #2dd4bf;
  --cw-accent-strong: #14b8a6;
  --cw-accent-soft:   #5eead4;
  --cw-accent-tint:   rgba(45, 212, 191, 0.15);
  --cw-ring:          rgba(45, 212, 191, 0.5);
  --cw-text:        #f4f4f5;
  --cw-text-soft:   #a1a1aa;
  --cw-text-muted:  #71717a;
  --cw-hairline: rgba(255, 255, 255, 0.06);
  --clay-raised:
     0 22px 45px -16px var(--clay-cast),
     inset 0 -8px 13px var(--clay-lo),
     inset 0 10px 18px var(--clay-hi);
  --clay-raised-lg:
     0 34px 60px -20px var(--clay-cast),
     inset 0 -10px 16px var(--clay-lo),
     inset 0 14px 22px var(--clay-hi);
  --clay-raised-sm:
     0 10px 22px -8px var(--clay-cast),
     inset 0 -4px 8px var(--clay-lo),
     inset 0 5px 10px var(--clay-hi);
  --clay-pressed:
     0 4px 10px -6px var(--clay-cast),
     inset 0 6px 12px var(--clay-lo),
     inset 0 -3px 8px rgba(255,255,255,0.04);
  --clay-inset:
     inset 0 3px 8px var(--clay-lo),
     inset 0 -3px 6px rgba(255,255,255,0.04);
}
[data-theme="graphite"] body.app-shell,
[data-theme="graphite"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(45,212,191,0.08), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(45,212,191,0.05), transparent 55%),
    var(--clay-bg);
}
[data-theme="graphite"] body.app-shell * { scrollbar-color: #3f3f46 transparent; }
[data-theme="graphite"] body.app-shell *::-webkit-scrollbar-thumb { background: #3f3f46; }

/* Deep Forest — rich emerald on warm green base */
[data-theme="forest"] {
  --clay-bg:        #d1fae5;
  --clay-surface:   #ecfdf5;
  --clay-surface-2: #a7f3d0;
  --clay-hi:   rgba(255, 255, 255, 0.92);
  --clay-lo:   rgba(16, 120, 60, 0.28);
  --clay-cast: rgba(6, 95, 50, 0.35);
  --cw-accent:        #059669;
  --cw-accent-strong: #047857;
  --cw-accent-soft:   #10b981;
  --cw-accent-tint:   rgba(5, 150, 105, 0.15);
  --cw-ring:          rgba(5, 150, 105, 0.45);
  --cw-text:        #022c22;
  --cw-text-soft:   #064e3b;
  --cw-text-muted:  #065f46;
  --cw-hairline: rgba(5, 150, 105, 0.09);
}
[data-theme="forest"] body.app-shell,
[data-theme="forest"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(16,185,129,0.16), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(167,243,208,0.22), transparent 55%),
    var(--clay-bg);
}

/* Slate Purple — soft lavender surfaces, violet accent */
[data-theme="slate-purple"] {
  --clay-bg:        #ede9fe;
  --clay-surface:   #f5f3ff;
  --clay-surface-2: #ddd6fe;
  --clay-hi:   rgba(255, 255, 255, 0.92);
  --clay-lo:   rgba(139, 92, 246, 0.28);
  --clay-cast: rgba(109, 40, 217, 0.30);
  --cw-accent:        #7c3aed;
  --cw-accent-strong: #6d28d9;
  --cw-accent-soft:   #8b5cf6;
  --cw-accent-tint:   rgba(124, 58, 237, 0.14);
  --cw-ring:          rgba(124, 58, 237, 0.45);
  --cw-text:        #2e1065;
  --cw-text-soft:   #4c1d95;
  --cw-text-muted:  #5b21b6;
  --cw-hairline: rgba(124, 58, 237, 0.09);
}
[data-theme="slate-purple"] body.app-shell,
[data-theme="slate-purple"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(139,92,246,0.15), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(221,214,254,0.25), transparent 55%),
    var(--clay-bg);
}

/* Crimson Night — deep dark red surfaces, crimson accent */
[data-theme="crimson"] {
  --clay-bg:        #1a0505;
  --clay-surface:   #2d0f0f;
  --clay-surface-2: #1a0505;
  --clay-hi:   rgba(255, 255, 255, 0.07);
  --clay-lo:   rgba(0, 0, 0, 0.50);
  --clay-cast: rgba(0, 0, 0, 0.65);
  --cw-accent:        #f43f5e;
  --cw-accent-strong: #e11d48;
  --cw-accent-soft:   #fb7185;
  --cw-accent-tint:   rgba(244, 63, 94, 0.18);
  --cw-ring:          rgba(244, 63, 94, 0.50);
  --cw-text:        #ffe4e6;
  --cw-text-soft:   #fda4af;
  --cw-text-muted:  #fb7185;
  --cw-hairline: rgba(255, 255, 255, 0.06);
  --clay-raised:
     0 22px 45px -16px var(--clay-cast),
     inset 0 -8px 13px var(--clay-lo),
     inset 0 10px 18px var(--clay-hi);
  --clay-raised-lg:
     0 34px 60px -20px var(--clay-cast),
     inset 0 -10px 16px var(--clay-lo),
     inset 0 14px 22px var(--clay-hi);
  --clay-raised-sm:
     0 10px 22px -8px var(--clay-cast),
     inset 0 -4px 8px var(--clay-lo),
     inset 0 5px 10px var(--clay-hi);
  --clay-pressed:
     0 4px 10px -6px var(--clay-cast),
     inset 0 6px 12px var(--clay-lo),
     inset 0 -3px 8px rgba(255,255,255,0.04);
  --clay-inset:
     inset 0 3px 8px var(--clay-lo),
     inset 0 -3px 6px rgba(255,255,255,0.04);
}
[data-theme="crimson"] body.app-shell,
[data-theme="crimson"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(244,63,94,0.12), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(244,63,94,0.07), transparent 55%),
    var(--clay-bg);
}
[data-theme="crimson"] body.app-shell * { scrollbar-color: #450a0a transparent; }
[data-theme="crimson"] body.app-shell *::-webkit-scrollbar-thumb { background: #450a0a; }

/* Arctic White — ultra-clean ice surfaces, sky-blue accent */
[data-theme="arctic"] {
  --clay-bg:        #e0f2fe;
  --clay-surface:   #f0f9ff;
  --clay-surface-2: #bae6fd;
  --clay-hi:   rgba(255, 255, 255, 0.96);
  --clay-lo:   rgba(14, 165, 233, 0.22);
  --clay-cast: rgba(2, 132, 199, 0.22);
  --cw-accent:        #0284c7;
  --cw-accent-strong: #0369a1;
  --cw-accent-soft:   #0ea5e9;
  --cw-accent-tint:   rgba(2, 132, 199, 0.12);
  --cw-ring:          rgba(2, 132, 199, 0.45);
  --cw-text:        #082f49;
  --cw-text-soft:   #0c4a6e;
  --cw-text-muted:  #075985;
  --cw-hairline: rgba(2, 132, 199, 0.08);
}
[data-theme="arctic"] body.app-shell,
[data-theme="arctic"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(14,165,233,0.14), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(186,230,253,0.28), transparent 55%),
    var(--clay-bg);
}

/* Sunset Coral — warm peach surfaces, orange-red accent */
[data-theme="sunset"] {
  --clay-bg:        #ffedd5;
  --clay-surface:   #fff7ed;
  --clay-surface-2: #fed7aa;
  --clay-hi:   rgba(255, 255, 255, 0.92);
  --clay-lo:   rgba(234, 88, 12, 0.28);
  --clay-cast: rgba(194, 65, 12, 0.32);
  --cw-accent:        #ea580c;
  --cw-accent-strong: #c2410c;
  --cw-accent-soft:   #f97316;
  --cw-accent-tint:   rgba(234, 88, 12, 0.14);
  --cw-ring:          rgba(234, 88, 12, 0.45);
  --cw-text:        #431407;
  --cw-text-soft:   #7c2d12;
  --cw-text-muted:  #9a3412;
  --cw-hairline: rgba(234, 88, 12, 0.10);
}
[data-theme="sunset"] body.app-shell,
[data-theme="sunset"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(249,115,22,0.16), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(254,215,170,0.28), transparent 55%),
    var(--clay-bg);
}

/* Coffee House — warm dark mocha surfaces, caramel accent */
[data-theme="coffee"] {
  --clay-bg:        #1c1208;
  --clay-surface:   #2d1e0e;
  --clay-surface-2: #1c1208;
  --clay-hi:   rgba(255, 230, 180, 0.07);
  --clay-lo:   rgba(0, 0, 0, 0.50);
  --clay-cast: rgba(0, 0, 0, 0.60);
  --cw-accent:        #d4872a;
  --cw-accent-strong: #b86e1a;
  --cw-accent-soft:   #e8a84a;
  --cw-accent-tint:   rgba(212, 135, 42, 0.18);
  --cw-ring:          rgba(212, 135, 42, 0.50);
  --cw-text:        #fdf6e3;
  --cw-text-soft:   #e8c99a;
  --cw-text-muted:  #c49a6c;
  --cw-hairline: rgba(255, 255, 255, 0.06);
  --clay-raised:
     0 22px 45px -16px var(--clay-cast),
     inset 0 -8px 13px var(--clay-lo),
     inset 0 10px 18px var(--clay-hi);
  --clay-raised-lg:
     0 34px 60px -20px var(--clay-cast),
     inset 0 -10px 16px var(--clay-lo),
     inset 0 14px 22px var(--clay-hi);
  --clay-raised-sm:
     0 10px 22px -8px var(--clay-cast),
     inset 0 -4px 8px var(--clay-lo),
     inset 0 5px 10px var(--clay-hi);
  --clay-pressed:
     0 4px 10px -6px var(--clay-cast),
     inset 0 6px 12px var(--clay-lo),
     inset 0 -3px 8px rgba(255,230,180,0.04);
  --clay-inset:
     inset 0 3px 8px var(--clay-lo),
     inset 0 -3px 6px rgba(255,230,180,0.05);
}
[data-theme="coffee"] body.app-shell,
[data-theme="coffee"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(212,135,42,0.10), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(212,135,42,0.06), transparent 55%),
    var(--clay-bg);
}
[data-theme="coffee"] body.app-shell * { scrollbar-color: #3d2a14 transparent; }
[data-theme="coffee"] body.app-shell *::-webkit-scrollbar-thumb { background: #3d2a14; }

/* Violet Night — deep purple surfaces, bright violet accent */
[data-theme="violet-night"] {
  --clay-bg:        #0f0a1e;
  --clay-surface:   #1e1035;
  --clay-surface-2: #0f0a1e;
  --clay-hi:   rgba(255, 255, 255, 0.07);
  --clay-lo:   rgba(0, 0, 0, 0.50);
  --clay-cast: rgba(0, 0, 0, 0.65);
  --cw-accent:        #a855f7;
  --cw-accent-strong: #9333ea;
  --cw-accent-soft:   #c084fc;
  --cw-accent-tint:   rgba(168, 85, 247, 0.18);
  --cw-ring:          rgba(168, 85, 247, 0.50);
  --cw-text:        #f3e8ff;
  --cw-text-soft:   #d8b4fe;
  --cw-text-muted:  #a78bfa;
  --cw-hairline: rgba(255, 255, 255, 0.06);
  --clay-raised:
     0 22px 45px -16px var(--clay-cast),
     inset 0 -8px 13px var(--clay-lo),
     inset 0 10px 18px var(--clay-hi);
  --clay-raised-lg:
     0 34px 60px -20px var(--clay-cast),
     inset 0 -10px 16px var(--clay-lo),
     inset 0 14px 22px var(--clay-hi);
  --clay-raised-sm:
     0 10px 22px -8px var(--clay-cast),
     inset 0 -4px 8px var(--clay-lo),
     inset 0 5px 10px var(--clay-hi);
  --clay-pressed:
     0 4px 10px -6px var(--clay-cast),
     inset 0 6px 12px var(--clay-lo),
     inset 0 -3px 8px rgba(255,255,255,0.04);
  --clay-inset:
     inset 0 3px 8px var(--clay-lo),
     inset 0 -3px 6px rgba(255,255,255,0.04);
}
[data-theme="violet-night"] body.app-shell,
[data-theme="violet-night"] body.cw-auth {
  background:
    radial-gradient(1100px 700px at 8% -10%, rgba(168,85,247,0.12), transparent 55%),
    radial-gradient(1000px 720px at 112% 4%, rgba(168,85,247,0.07), transparent 55%),
    var(--clay-bg);
}
[data-theme="violet-night"] body.app-shell * { scrollbar-color: #2e1065 transparent; }
[data-theme="violet-night"] body.app-shell *::-webkit-scrollbar-thumb { background: #2e1065; }

/* ============================================================================
   UI STYLE THEMES — [data-ui-theme] on <html>
   Controls shape language: button/input radius, shadows, borders, glass, etc.
   Persisted via localStorage.cw_ui_theme
   ========================================================================== */

/* --- Wire tokens to actual elements --- */
.cw-btn, button.cw-btn, a.cw-btn,
[class*="btn-"],
button[class*="rounded"], button[class*="px-"] {
  border-radius: var(--ui-btn-radius) !important;
  box-shadow: var(--ui-btn-shadow) !important;
  border: var(--ui-btn-border) !important;
  font-weight: var(--ui-font-weight);
  letter-spacing: var(--ui-letter-spacing);
}
input, select, textarea {
  border-radius: var(--ui-input-radius) !important;
  box-shadow: var(--ui-input-shadow) !important;
  border: var(--ui-input-border) !important;
}
.cw-card, .clay-card, [class*="rounded-2xl"], [class*="rounded-xl"] {
  border-radius: var(--ui-card-radius) !important;
  box-shadow: var(--ui-card-shadow) !important;
  border: var(--ui-card-border) !important;
}

/* Sharp — geometric, zero radius, flat surfaces */
[data-ui-theme="sharp"] {
  --ui-btn-radius:    4px;
  --ui-input-radius:  4px;
  --ui-card-radius:   6px;
  --ui-btn-shadow:    none;
  --ui-btn-border:    1px solid var(--cw-accent);
  --ui-btn-border-width: 1px;
  --ui-card-shadow:   0 1px 4px rgba(0,0,0,0.10);
  --ui-card-border:   1px solid var(--cw-hairline);
  --ui-input-shadow:  none;
  --ui-input-border:  1px solid var(--cw-hairline);
  --ui-font-weight:   500;
  --ui-letter-spacing: 0.01em;
}

/* Pill — maximum softness, full-radius buttons and inputs */
[data-ui-theme="pill"] {
  --ui-btn-radius:    999px;
  --ui-input-radius:  999px;
  --ui-card-radius:   28px;
  --ui-btn-shadow:    0 6px 18px -6px var(--clay-cast), inset 0 3px 8px var(--clay-hi);
  --ui-btn-border:    none;
  --ui-card-shadow:   var(--clay-raised);
  --ui-card-border:   none;
  --ui-input-shadow:  var(--clay-inset);
  --ui-input-border:  none;
  --ui-font-weight:   600;
  --ui-letter-spacing: 0.01em;
}

/* Brutalist — stark, thick borders, no shadows, strong contrast */
[data-ui-theme="brutalist"] {
  --ui-btn-radius:    0px;
  --ui-input-radius:  0px;
  --ui-card-radius:   0px;
  --ui-btn-shadow:    3px 3px 0 var(--cw-text);
  --ui-btn-border:    2px solid var(--cw-text);
  --ui-btn-border-width: 2px;
  --ui-card-shadow:   4px 4px 0 var(--cw-text);
  --ui-card-border:   2px solid var(--cw-text);
  --ui-input-shadow:  none;
  --ui-input-border:  2px solid var(--cw-text);
  --ui-font-weight:   700;
  --ui-letter-spacing: 0.03em;
}

/* Glass — frosted panels, soft radius, translucent surfaces */
[data-ui-theme="glass"] {
  --ui-btn-radius:    14px;
  --ui-input-radius:  12px;
  --ui-card-radius:   22px;
  --ui-btn-shadow:    0 4px 20px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  --ui-btn-border:    1px solid rgba(255,255,255,0.45);
  --ui-card-shadow:   0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.5);
  --ui-card-border:   1px solid rgba(255,255,255,0.35);
  --ui-surface-blur:  12px;
  --ui-input-shadow:  inset 0 2px 8px rgba(0,0,0,0.08);
  --ui-input-border:  1px solid rgba(255,255,255,0.4);
  --ui-font-weight:   500;
  --ui-letter-spacing: 0em;
}
[data-ui-theme="glass"] .cw-card,
[data-ui-theme="glass"] [class*="rounded-2xl"],
[data-ui-theme="glass"] [class*="rounded-xl"],
[data-ui-theme="glass"] .cw-sidebar,
[data-ui-theme="glass"] .cw-topbar {
  backdrop-filter: blur(var(--ui-surface-blur));
  -webkit-backdrop-filter: blur(var(--ui-surface-blur));
  background: rgba(255,255,255,0.22) !important;
}

/* Neumorphic — extruded/inset soft light, no borders, monochrome */
[data-ui-theme="neumorphic"] {
  --ui-btn-radius:    16px;
  --ui-input-radius:  14px;
  --ui-card-radius:   24px;
  --ui-btn-shadow:
    6px 6px 12px var(--ui-neu-dark),
    -6px -6px 12px var(--ui-neu-light);
  --ui-btn-border:    none;
  --ui-card-shadow:
    10px 10px 22px var(--ui-neu-dark),
    -10px -10px 22px var(--ui-neu-light);
  --ui-card-border:   none;
  --ui-input-shadow:
    inset 4px 4px 8px var(--ui-neu-dark),
    inset -4px -4px 8px var(--ui-neu-light);
  --ui-input-border:  none;
  --ui-font-weight:   500;
  --ui-letter-spacing: 0em;
}

/* Clay (reset — explicit default override block) */
[data-ui-theme="clay"] {
  --ui-btn-radius:    var(--cw-pill);
  --ui-input-radius:  14px;
  --ui-card-radius:   var(--cw-r-lg);
  --ui-btn-shadow:    var(--clay-raised-sm);
  --ui-btn-border:    none;
  --ui-card-shadow:   var(--clay-raised);
  --ui-card-border:   none;
  --ui-input-shadow:  var(--clay-inset);
  --ui-input-border:  none;
  --ui-font-weight:   500;
  --ui-letter-spacing: 0em;
}

/* 4D Shadow — deep stacked perspective layers, rich colored cast */
[data-ui-theme="shadow-4d"] {
  --ui-btn-radius:    16px;
  --ui-input-radius:  12px;
  --ui-card-radius:   22px;
  --ui-btn-shadow:
    0 2px 0 rgba(0,0,0,0.22),
    0 6px 0 rgba(0,0,0,0.14),
    0 12px 24px -6px rgba(0,0,0,0.30),
    0 28px 48px -12px rgba(var(--cw-accent, 22,163,74), 0.22);
  --ui-btn-border:    none;
  --ui-card-shadow:
    0 2px 0 rgba(0,0,0,0.18),
    0 8px 0 rgba(0,0,0,0.10),
    0 20px 40px -10px rgba(0,0,0,0.28),
    0 40px 80px -20px rgba(0,0,0,0.16);
  --ui-card-border:   1px solid rgba(255,255,255,0.6);
  --ui-input-shadow:
    inset 0 2px 0 rgba(0,0,0,0.10),
    inset 0 6px 16px rgba(0,0,0,0.12),
    0 1px 0 rgba(255,255,255,0.8);
  --ui-input-border:  1px solid rgba(0,0,0,0.10);
  --ui-font-weight:   600;
  --ui-letter-spacing: 0.01em;
}

/* 4D Elevation — stepped planar lift with hard and soft layers */
[data-ui-theme="elevation-4d"] {
  --ui-btn-radius:    10px;
  --ui-input-radius:  8px;
  --ui-card-radius:   16px;
  --ui-btn-shadow:
    0 1px 0 rgba(0,0,0,0.30),
    0 3px 0 rgba(0,0,0,0.18),
    0 6px 0 rgba(0,0,0,0.10),
    0 10px 20px rgba(0,0,0,0.20);
  --ui-btn-border:    1px solid rgba(0,0,0,0.12);
  --ui-card-shadow:
    0 1px 0 rgba(0,0,0,0.24),
    0 4px 0 rgba(0,0,0,0.14),
    0 10px 0 rgba(0,0,0,0.07),
    0 20px 40px rgba(0,0,0,0.18),
    0 40px 60px -10px rgba(0,0,0,0.10);
  --ui-card-border:   1px solid rgba(0,0,0,0.08);
  --ui-input-shadow:
    inset 0 1px 0 rgba(0,0,0,0.14),
    inset 0 3px 0 rgba(0,0,0,0.08),
    inset 0 8px 16px rgba(0,0,0,0.10);
  --ui-input-border:  1px solid rgba(0,0,0,0.14);
  --ui-font-weight:   500;
  --ui-letter-spacing: 0em;
}

/* 5D Holo — multi-color holographic cyan + magenta + gold shadow rings */
[data-ui-theme="holo-5d"] {
  --ui-btn-radius:    18px;
  --ui-input-radius:  14px;
  --ui-card-radius:   24px;
  --ui-btn-shadow:
    0 0 0 1px rgba(6,182,212,0.35),
    0 4px 12px -2px rgba(6,182,212,0.45),
    0 8px 24px -4px rgba(217,70,239,0.35),
    0 16px 40px -8px rgba(234,179,8,0.25),
    0 28px 56px -14px rgba(0,0,0,0.20);
  --ui-btn-border:    1px solid rgba(6,182,212,0.40);
  --ui-card-shadow:
    0 0 0 1px rgba(6,182,212,0.20),
    0 8px 24px -4px rgba(6,182,212,0.30),
    0 16px 40px -8px rgba(217,70,239,0.22),
    0 28px 60px -14px rgba(234,179,8,0.18),
    0 48px 80px -20px rgba(0,0,0,0.22);
  --ui-card-border:   1px solid rgba(6,182,212,0.25);
  --ui-input-shadow:
    inset 0 2px 8px rgba(6,182,212,0.18),
    inset 0 -1px 0 rgba(217,70,239,0.20),
    0 0 0 1px rgba(6,182,212,0.15);
  --ui-input-border:  1px solid rgba(6,182,212,0.30);
  --ui-font-weight:   500;
  --ui-letter-spacing: 0.01em;
}

/* 5D Aura — pulsed ambient rings expanding outward in 5 tinted layers */
[data-ui-theme="aura-5d"] {
  --ui-btn-radius:    999px;
  --ui-input-radius:  999px;
  --ui-card-radius:   28px;
  --ui-btn-shadow:
    0 0 0 3px rgba(var(--cw-accent,22,163,74), 0.10),
    0 0 0 6px rgba(var(--cw-accent,22,163,74), 0.07),
    0 6px 16px -4px rgba(var(--cw-accent,22,163,74), 0.40),
    0 14px 32px -8px rgba(var(--cw-accent,22,163,74), 0.25),
    0 28px 56px -16px rgba(var(--cw-accent,22,163,74), 0.15);
  --ui-btn-border:    none;
  --ui-card-shadow:
    0 0 0 2px rgba(var(--cw-accent,22,163,74), 0.08),
    0 0 0 6px rgba(var(--cw-accent,22,163,74), 0.05),
    0 10px 30px -8px rgba(var(--cw-accent,22,163,74), 0.28),
    0 24px 60px -16px rgba(var(--cw-accent,22,163,74), 0.18),
    0 48px 96px -24px rgba(0,0,0,0.12);
  --ui-card-border:   1px solid rgba(var(--cw-accent,22,163,74), 0.15);
  --ui-input-shadow:
    inset 0 2px 10px rgba(var(--cw-accent,22,163,74), 0.12),
    0 0 0 2px rgba(var(--cw-accent,22,163,74), 0.10),
    0 0 0 5px rgba(var(--cw-accent,22,163,74), 0.05);
  --ui-input-border:  none;
  --ui-font-weight:   600;
  --ui-letter-spacing: 0.01em;
}