/* ============================================================
   Sub2API Cartoon Theme v9 (Kawaii / Sticker Style)
   v9: dark-mode table headers unified — every thead th gets the
       same pastel night-yellow, no more yellow/purple mix.
       Root cause: app pages paint some <th> with their own
       tailwind bg-* classes at higher specificity than our
       element selector; fixed by adding class-attr sweep + :where()
       zero-specificity fallback and !important everywhere.
   - Light: cream + sticker hard-shadow
   - Dark : deep night cocoa, full cartoon restyle (not partial)
   Injected via nginx sub_filter - safe to remove anytime
   ============================================================ */
:root {
  --ct-orange: #ff8a3d;
  --ct-orange-soft: #ffb25c;
  --ct-blue: #5ca8ff;
  --ct-green: #58c9a5;
  --ct-green-soft: #7fe0c0;
  --ct-yellow: #ffd166;
  --ct-pink: #ff9eb5;

  /* light palette */
  --ct-light-bg: #fff7ea;
  --ct-light-surface: #fffdf7;
  --ct-light-surface-2: #fff1d6;
  --ct-light-ink: #4a3b32;
  --ct-light-muted: #806f64;
  --ct-light-line: rgba(74, 59, 50, 0.38);
  --ct-light-line-strong: #4a3b32;
  --ct-light-shadow: rgba(74, 59, 50, 0.72);

  /* dark palette — night cocoa cartoon */
  --ct-dark-bg: #14101e;
  --ct-dark-bg-2: #1b1528;
  --ct-dark-surface: #241b33;
  --ct-dark-surface-2: #2d2140;
  --ct-dark-ink: #f6ecff;
  --ct-dark-muted: #b3a4cc;
  --ct-dark-line: #4a3a63;
  --ct-dark-line-strong: #f6ecff;
  --ct-dark-shadow: rgba(5, 2, 12, 0.85);

  /* dark accent variants (softer pastel on dark) */
  --ct-dk-orange: #ffab6b;
  --ct-dk-green: #7fe0c0;
  --ct-dk-yellow: #ffe29a;
  --ct-dk-pink: #ffb3c8;
  --ct-dk-blue: #8fc3ff;
}

html:not(.dark) {
  --ct-bg: var(--ct-light-bg);
  --ct-surface: var(--ct-light-surface);
  --ct-surface-2: var(--ct-light-surface-2);
  --ct-ink: var(--ct-light-ink);
  --ct-muted: var(--ct-light-muted);
  --ct-line: var(--ct-light-line);
  --ct-line-strong: var(--ct-light-line-strong);
  --ct-shadow: var(--ct-light-shadow);
  --ct-accent: var(--ct-orange);
}
html.dark {
  --ct-bg: var(--ct-dark-bg);
  --ct-surface: var(--ct-dark-surface);
  --ct-surface-2: var(--ct-dark-surface-2);
  --ct-ink: var(--ct-dark-ink);
  --ct-muted: var(--ct-dark-muted);
  --ct-line: var(--ct-dark-line);
  --ct-line-strong: var(--ct-dark-line-strong);
  --ct-shadow: var(--ct-dark-shadow);
  --ct-accent: var(--ct-dk-orange);
}

html,
body {
  background-color: var(--ct-bg) !important;
}

body {
  color: var(--ct-ink) !important;
  font-family: "Comic Sans MS", "Chalkboard SE", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

body * {
  font-family: inherit;
}

/* ============================================================
   CARDS / PANELS
   ============================================================ */
.card,
.card-glass,
.bg-white.rounded-xl,
.bg-white[class*="rounded-lg"],
.bg-white[class*="rounded-xl"],
.bg-white[class*="rounded-2xl"],
.bg-white[class*="rounded-3xl"] {
  background-color: var(--ct-surface) !important;
  border: 2px solid var(--ct-line) !important;
  border-radius: 18px !important;
  box-shadow: 4px 4px 0 var(--ct-shadow) !important;
}

html.dark .card-glass,
html.dark .shadow-glass {
  background-color: var(--ct-dark-surface) !important;
}

/* generic dark-mode surfaces the app paints with tailwind grays/slates */
html.dark .bg-white:not([role="switch"]):not(span) {
  background-color: var(--ct-dark-surface) !important;
}
html.dark [class*="bg-gray-50"]:not([role="switch"]),
html.dark [class*="bg-gray-100"],
html.dark [class*="bg-slate-50"],
html.dark [class*="bg-slate-100"] {
  background-color: var(--ct-dark-bg-2) !important;
}
html.dark [class*="bg-gray-200"],
html.dark [class*="bg-gray-300"] {
  background-color: var(--ct-dark-surface-2) !important;
}
html.dark [class*="text-gray-900"],
html.dark [class*="text-gray-800"],
html.dark [class*="text-gray-700"] {
  color: var(--ct-dark-ink) !important;
}
html.dark [class*="text-gray-600"],
html.dark [class*="text-gray-500"],
html.dark [class*="text-gray-400"],
html.dark [class*="text-slate-500"],
html.dark [class*="text-slate-400"] {
  color: var(--ct-dark-muted) !important;
}
html.dark hr,
html.dark [class*="divide-y"] > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--ct-dark-line) !important;
}
html.dark [class*="border-gray-200"],
html.dark [class*="border-gray-100"],
html.dark [class*="border-slate-200"] {
  border-color: var(--ct-dark-line) !important;
}
/* amber notice strips inside cards -> dark cocoa honey tone */
html.dark [class*="bg-amber-50"] {
  background-color: rgba(255, 210, 120, 0.08) !important;
  border-color: rgba(255, 226, 154, 0.35) !important;
}
html.dark [class*="bg-blue-50"], html.dark [class*="bg-indigo-50"],
html.dark [class*="bg-green-50"], html.dark [class*="bg-emerald-50"],
html.dark [class*="bg-red-50"], html.dark [class*="bg-rose-50"] {
  background-color: var(--ct-dark-bg-2) !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  background-color: var(--ct-bg) !important;
  border-right: 2px solid var(--ct-line) !important;
}

.sidebar-header {
  border-bottom: 2px dashed var(--ct-line) !important;
}

.sidebar-link {
  border-radius: 12px !important;
  border: 2px solid transparent;
  transition: transform 0.12s ease, background-color 0.12s ease;
}

.sidebar-link:hover {
  background: rgba(255, 178, 92, 0.2) !important;
  transform: translateX(3px) rotate(-0.4deg);
}

.sidebar-link.router-link-active,
.sidebar-link.active {
  background: var(--ct-yellow) !important;
  border-color: var(--ct-line-strong) !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
  color: #33261e !important;
  font-weight: 700;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  border-radius: 999px !important;
  font-weight: 700 !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.btn:active {
  transform: scale(0.97) translateY(1px);
}

.btn-primary {
  background-image: linear-gradient(135deg, var(--ct-green), var(--ct-green-soft)) !important;
  border: 2px solid var(--ct-line-strong) !important;
  color: #143d31 !important;
  text-shadow: none !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

html.dark .btn-primary {
  background-image: linear-gradient(135deg, #3aa98a, var(--ct-dk-green)) !important;
  color: #06251b !important;
  border-color: var(--ct-dark-line-strong) !important;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 4px 5px 0 var(--ct-shadow) !important;
}

.btn-secondary {
  background: rgba(92, 168, 255, 0.16) !important;
  border: 2px solid var(--ct-blue) !important;
  color: var(--ct-blue) !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

html.dark .btn-secondary {
  background: rgba(143, 195, 255, 0.14) !important;
  border-color: var(--ct-dk-blue) !important;
  color: var(--ct-dk-blue) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #ff7a7a, var(--ct-pink)) !important;
  border: 2px solid var(--ct-line-strong) !important;
  color: #fff !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

html.dark .btn-danger {
  background: linear-gradient(135deg, #e05f75, var(--ct-dk-pink)) !important;
  color: #2b0812 !important;
  border-color: var(--ct-dark-line-strong) !important;
}

button[type="submit"],
.btn-success {
  background: linear-gradient(135deg, var(--ct-green), var(--ct-green-soft)) !important;
  border: 2px solid var(--ct-line-strong) !important;
  color: #143d31 !important;
  box-shadow: 3px 3px 0 var(--ct-shadow) !important;
}

html.dark button[type="submit"],
html.dark .btn-success {
  background: linear-gradient(135deg, #3aa98a, var(--ct-dk-green)) !important;
  color: #06251b !important;
  border-color: var(--ct-dark-line-strong) !important;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */
input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  border-radius: 12px !important;
  border: 2px solid var(--ct-line) !important;
  background: var(--ct-surface) !important;
  color: var(--ct-ink) !important;
}

html:not(.dark) input:not([type="radio"]):not([type="checkbox"]),
html:not(.dark) select,
html:not(.dark) textarea {
  background: var(--ct-light-surface) !important;
}

html.dark input:not([type="radio"]):not([type="checkbox"]),
html.dark select,
html.dark textarea {
  background: rgba(10, 6, 18, 0.55) !important;
  color: var(--ct-dark-ink) !important;
  border-color: var(--ct-dark-line) !important;
}

input:not([type="radio"]):not([type="checkbox"]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--ct-accent) !important;
  box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.22) !important;
}

/* select dropdown arrow keeps native; option list inherits system */

input[type="radio"],
input[type="checkbox"] {
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  min-height: 1rem !important;
  flex-shrink: 0 !important;
  margin: 0 0.45rem 0 0 !important;
  padding: 0 !important;
  accent-color: var(--ct-accent) !important;
  vertical-align: middle !important;
  /* cartoon sticker look, geometry preserved */
  border: 2px solid var(--ct-line-strong) !important;
  background: var(--ct-surface) !important;
  box-shadow: 2px 2px 0 var(--ct-shadow) !important;
  cursor: pointer;
}
input[type="radio"] {
  border-radius: 9999px !important;
}
input[type="checkbox"] {
  border-radius: 5px !important;
}
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible {
  outline: 2px dashed var(--ct-accent);
  outline-offset: 2px;
}

/* ============================================================
   TOGGLE SWITCH — cartoon sticker style, geometry untouched
   (track stays 44x24 flex; knob is a real circle with border)
   ============================================================ */
[role="switch"] {
  /* keep size/roundness from app; restyle surface only */
  background-color: var(--ct-surface-2) !important;
  border: 2px solid var(--ct-line) !important;
  border-radius: 9999px !important;
  box-shadow: inset 0 0 0 2px var(--ct-bg), 2px 2px 0 var(--ct-shadow) !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

html:not(.dark) [role="switch"][aria-checked="true"],
html:not(.dark) [role="switch"][aria-checked="true" i] {
  background-color: var(--ct-green-soft) !important;
  border-color: var(--ct-line-strong) !important;
}

html.dark [role="switch"][aria-checked="true"] {
  background-color: rgba(127, 224, 192, 0.28) !important;
  border-color: var(--ct-dk-green) !important;
}

html.dark [role="switch"] {
  background-color: var(--ct-dark-surface-2) !important;
  border-color: var(--ct-dark-line) !important;
}

[role="switch"] > span,
[role="switch"] > .translate-x-0,
[role="switch"] > .translate-x-5 {
  background-color: #ffffff !important;
  border: 2px solid var(--ct-line-strong) !important;
  border-radius: 9999px !important;
  box-shadow: 1.5px 1.5px 0 var(--ct-shadow) !important;
  z-index: 1;
}

html:not(.dark) [role="switch"][aria-checked="true"] > span {
  background-color: #fffbe8 !important;
  border-color: var(--ct-line-strong) !important;
}
html.dark [role="switch"][aria-checked="true"] > span {
  background-color: var(--ct-dk-yellow) !important;
  border-color: var(--ct-dark-line-strong) !important;
}

/* tiny white round chips elsewhere must stay circles (not knobs) */
span.rounded-full.bg-white:not([role="switch"] > span) {
  border-radius: 9999px !important;
}

/* ============================================================
   TABLES
   ============================================================ */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

thead th {
  background: var(--ct-yellow) !important;
  color: #33261e !important;
  border-bottom: 2px solid var(--ct-line-strong) !important;
  font-weight: 800 !important;
}

html.dark thead th {
  background: var(--ct-dk-yellow) !important;
  color: #33261e !important;
  border-bottom-color: var(--ct-dark-line-strong) !important;
}

tbody tr:nth-child(even) td {
  background: rgba(255, 247, 234, 0.12) !important;
}
html.dark tbody tr:nth-child(even) td {
  background: rgba(255, 236, 255, 0.04) !important;
}

tbody tr:hover td {
  background: rgba(255, 209, 102, 0.18) !important;
}
html.dark tbody tr:hover td {
  background: rgba(255, 226, 154, 0.10) !important;
}

tbody td, tbody th {
  border-color: var(--ct-line) !important;
}
html.dark tbody td, html.dark tbody th {
  border-color: var(--ct-dark-line) !important;
}

/* ============================================================
   MODALS / TOASTS
   ============================================================ */
.modal-overlay {
  backdrop-filter: blur(3px);
  background-color: rgba(20, 16, 30, 0.45) !important;
}

.modal-overlay > div,
[class*="modal"] .card {
  border: 2px solid var(--ct-line) !important;
  border-radius: 20px !important;
  box-shadow: 6px 6px 0 var(--ct-shadow) !important;
}
html.dark .modal-overlay > div {
  background-color: var(--ct-dark-surface) !important;
}

.modal-header {
  border-bottom: 2px dashed var(--ct-line) !important;
  font-weight: 800;
}

[class*="toast"] {
  border: 2px solid var(--ct-line-strong) !important;
  border-radius: 14px !important;
  box-shadow: 4px 4px 0 var(--ct-shadow) !important;
}
html.dark [class*="toast"] {
  background-color: var(--ct-dark-surface-2) !important;
  color: var(--ct-dark-ink) !important;
}

/* tabs / pills row on settings page */
html.dark [class*="rounded-full"][class*="bg-gray"],
html.dark nav [class*="bg-white"] {
  background-color: var(--ct-dark-surface-2) !important;
}

/* ============================================================
   BADGES & CHIPS
   ============================================================ */
[class*="badge"],
span[class*="rounded-full"][class*="px-"] {
  border-radius: 999px !important;
  border: 1.5px solid var(--ct-line) !important;
  font-weight: 700 !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ct-accent);
  border-radius: 999px;
  border: 2px solid var(--ct-bg);
}

/* selection color for extra kawaii */
::selection {
  background: var(--ct-yellow);
  color: #33261e;
}

/* ============================================================
   DARK MODE SWEEP — catch every tailwind light surface the app
   paints inline (audit found: tables, inputs, badges, code,
   dropdown panels, hovers, placeholders, disabled states)
   ============================================================ */

/* --- table cells / headers not covered by themed thead ---
   v9: app pages paint some <th> with tailwind bg-* utility classes
   (bg-gray-50, bg-dark-800, bg-indigo-600/10 ...). Those class
   selectors beat our bare `thead th` element selector, so a few
   columns kept their own (purple/blue) background in dark mode.
   Fix: re-assert header style with attribute-class sweep that
   matches ANY th inside thead regardless of its classes. */
html.dark th, html.dark td {
  background-color: transparent !important;
  border-color: var(--ct-dark-line) !important;
  color: var(--ct-dark-ink) !important;
}
/* v9 core fix: match every th that sits in a thead row —
   classList-proof (works with bg-gray-*, bg-dark-*, gradient bg) */
html.dark thead tr > th,
html.dark thead tr > th[class*="bg-"],
html.dark thead tr > th[class*="dark"],
html.dark thead tr > th[style] {
  background-color: var(--ct-dk-yellow) !important;
  background-image: none !important;
  color: #33261e !important;
  border-bottom-color: var(--ct-dark-line-strong) !important;
  font-weight: 800 !important;
}
html:not(.dark) thead tr > th[class*="bg-"],
html:not(.dark) thead tr > th[style] {
  background-image: none !important;
}
/* dark-mode striped/hover rows (override earlier generic rules) */
html.dark tbody tr:nth-child(even) td { background-color: rgba(255,236,255,0.045) !important; }
html.dark tbody tr:hover td { background-color: rgba(255,226,154,0.09) !important; }
/* v9: sticky/frozen header clones rendered as div tables (some admin grids)
   keep header cells consistent too */
html.dark [class*="table"] > div:first-child [class*="font-bold"][class*="uppercase"],
html.dark [role="columnheader"] {
  background-color: var(--ct-dk-yellow) !important;
  background-image: none !important;
  color: #33261e !important;
}

/* --- text inputs inside dark cards: deep ink well + readable text ---
   (audit found inputs with dark-on-dark or light borders) */
html.dark input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]),
html.dark select,
html.dark textarea {
  background-color: #0d0817 !important;
  color: var(--ct-dark-ink) !important;
  border: 2px solid var(--ct-dark-line) !important;
  caret-color: var(--ct-dk-orange);
}
html.dark input::placeholder,
html.dark textarea::placeholder {
  color: rgba(179,164,204,0.55) !important;
}
html.dark input:focus:not([type="radio"]):not([type="checkbox"]),
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--ct-dk-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,171,107,0.25) !important;
}

/* --- badges / status chips with light pastel backgrounds --- */
html.dark [class*="bg-green-100"], html.dark [class*="bg-emerald-100"],
html.dark [class*="bg-red-100"], html.dark [class*="bg-rose-100"],
html.dark [class*="bg-yellow-100"], html.dark [class*="bg-amber-100"],
html.dark [class*="bg-blue-100"], html.dark [class*="bg-indigo-100"],
html.dark [class*="bg-purple-100"], html.dark [class*="bg-pink-100"],
html.dark [class*="bg-gray-200"], html.dark [class*="bg-slate-200"] {
  background-color: var(--ct-dark-bg-2) !important;
  border: 1.5px solid var(--ct-dark-line) !important;
  color: var(--ct-dark-muted) !important;
}

/* --- hover/active row & menu surfaces --- */
html.dark [class*="hover:bg-gray-50"]:hover,
html.dark [class*="hover:bg-gray-100"]:hover,
html.dark [class*="hover:bg-slate-50"]:hover,
html.dark [class*="hover:bg-slate-100"]:hover {
  background-color: var(--ct-dark-surface-2) !important;
}

/* --- dropdown menus / popovers rendered at body level --- */
html.dark [class*="absolute"][class*="bg-white"],
html.dark [class*="fixed"][class*="bg-white"],
html.dark [class*="rounded-md"][class*="shadow-lg"] {
  background-color: var(--ct-dark-surface) !important;
  border: 2px solid var(--ct-dark-line) !important;
}

/* --- code blocks / pre --- */
html.dark pre, html.dark code[class*="bg-"] {
  background-color: #0d0817 !important;
  color: var(--ct-dk-green) !important;
  border-color: var(--ct-dark-line) !important;
}

/* --- disabled controls --- */
html.dark input:disabled,
html.dark select:disabled,
html.dark textarea:disabled,
html.dark button:disabled {
  opacity: 0.45;
  filter: saturate(0.4);
}

/* --- links --- */
html.dark a { color: var(--ct-dk-blue); }
html.dark a:hover { color: var(--ct-dk-orange); }

/* --- scrollbars in dark --- */
html.dark ::-webkit-scrollbar-thumb {
  background: var(--ct-dk-orange);
  border-color: var(--ct-dark-bg);
}

/* ============================================================
   UNIVERSAL BUTTON CARTOON PASS
   Covers non-.btn controls: .select-trigger dropdowns, pagination,
   row action buttons, icon buttons — both light & dark.
   ============================================================ */

/* --- dropdown select triggers --- */
.select-trigger {
  border: 2px solid var(--ct-line) !important;
  border-radius: 12px !important;
  box-shadow: 2px 2px 0 var(--ct-shadow) !important;
  font-weight: 600 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}
html:not(.dark) .select-trigger {
  background: var(--ct-light-surface) !important;
  color: var(--ct-light-ink) !important;
  border-color: var(--ct-light-line) !important;
}
html:not(.dark) .select-trigger .select-value { color: var(--ct-light-ink) !important; }
html.dark .select-trigger {
  background: var(--ct-dark-surface) !important;
  color: var(--ct-dark-ink) !important;
  border-color: var(--ct-dark-line) !important;
  box-shadow: 2px 2px 0 var(--ct-dark-shadow) !important;
}
html.dark .select-trigger .select-value { color: var(--ct-dark-ink) !important; }
.select-trigger:hover { transform: translateY(-1px); }

/* --- pagination buttons --- */
main button[class*="relative inline-flex items-center border"] {
  border-radius: 10px !important;
  border-width: 2px !important;
  font-weight: 700 !important;
  transition: transform 0.1s ease !important;
}
html:not(.dark) main button[class*="relative inline-flex items-center border"] {
  border-color: var(--ct-light-line) !important;
  background: var(--ct-light-surface) !important;
  color: var(--ct-light-ink) !important;
}
html:not(.dark) main button[class*="relative inline-flex items-center border"][aria-current="page"],
html:not(.dark) main button[class*="relative inline-flex items-center border"].bg-primary-50 {
  background: var(--ct-yellow) !important;
  border-color: var(--ct-line-strong) !important;
  color: #33261e !important;
  box-shadow: 2px 2px 0 var(--ct-shadow) !important;
}
html.dark main button[class*="relative inline-flex items-center border"] {
  border-color: var(--ct-dark-line) !important;
  background: var(--ct-dark-surface) !important;
  color: var(--ct-dark-ink) !important;
}
html.dark main button[class*="relative inline-flex items-center border"][aria-current="page"],
html.dark main button[class*="relative inline-flex items-center border"].bg-primary-50 {
  background: var(--ct-dk-yellow) !important;
  border-color: var(--ct-dark-line-strong) !important;
  color: #33261e !important;
  box-shadow: 2px 2px 0 var(--ct-dark-shadow) !important;
}

/* --- small square icon buttons (row actions 编辑/删除/更多) --- */
html.dark main button[class*="flex flex-col items-center"] {
  border: 1.5px solid var(--ct-dark-line) !important;
  border-radius: 10px !important;
  background: var(--ct-dark-bg-2) !important;
  transition: transform 0.1s ease !important;
}
html.dark main button[class*="flex flex-col items-center"]:hover {
  border-color: var(--ct-dk-orange) !important;
  transform: translateY(-1px);
}
html:not(.dark) main button[class*="flex flex-col items-center"] {
  border: 1.5px solid var(--ct-light-line) !important;
  border-radius: 10px !important;
  background: var(--ct-light-surface) !important;
}
html:not(.dark) main button[class*="flex flex-col items-center"]:hover {
  border-color: var(--ct-orange) !important;
  transform: translateY(-1px);
}

/* --- generic small round icon buttons (h-6 w-6 etc.) --- */
main button[class*="inline-flex h-6 w-6"],
main button[class*="h-8 w-8"],
main button[class*="h-9 w-9"] {
  border-radius: 10px !important;
  transition: transform 0.1s ease !important;
}
main button[class*="inline-flex h-6 w-6"]:hover { transform: scale(1.08); }

/* --- light mode: ensure ALL buttons get ink border for sticker feel --- */
html:not(.dark) main button[class*="rounded-lg"]:not(.btn):not([class*="text-primary"]):not([class*="select-trigger"]) {
  border: 1.5px solid var(--ct-light-line) !important;
}
html.dark main button[class*="rounded-lg"]:not(.btn):not([class*="text-primary"]):not([class*="select-trigger"]) {
  border: 1.5px solid var(--ct-dark-line) !important;
}

/* ============================================================
   MOBILE TWEAKS
   ============================================================ */
@media (max-width: 640px) {
  .card,
  .card-glass,
  .bg-white.rounded-xl,
  .bg-white[class*="rounded-lg"],
  .bg-white[class*="rounded-xl"],
  .bg-white[class*="rounded-2xl"],
  .bg-white[class*="rounded-3xl"] {
    border-radius: 14px !important;
    box-shadow: 3px 3px 0 var(--ct-shadow) !important;
  }
}