/*
 * Skins: one shared iOS-style layer (shapes, font, shadows, frosted bars); Classic, iOS and Summer differ by palette (tokens).
 * Formerly the iOS look (Tier 1). Plain CSS on top of the frozen Tailwind bundle: it only
 * restyles classes that already exist, so no views change. Everything is
 * scoped under html.skin, switched on by partials/skin.blade.php
 * (config app.ios_ui, or ?ui=ios / ?ui=classic per browser).
 */
html.skin {
  /* ── tokens. Base = shared style + the CLASSIC (brand navy) palette. iOS and Summer override the palette below. ── */
  --accent: #0a58b8; --accent-dark: #084a9a; --accent-rgb: 10, 88, 184;
  --ok: #16a34a; --ok-text: #166534; --ok-rgb: 22, 163, 74;
  --danger: #dc2626; --danger-text: #b91c1c; --danger-rgb: 220, 38, 38;
  --warn: #f59e0b; --warn-text: #92400e; --warn-rgb: 245, 158, 11;
  --bg: #f3f4f6; --bg-2: #f9fafb;
  --label: #111827; --label-2: #4b5563; --label-3: #6b7280; --label-gray: #6b7280;
  --sep: #e5e7eb; --sep-strong: #d1d5db;
  --nav-glass: rgba(11, 83, 168, .94); --nav-glass-top: rgba(11, 83, 168, .94);
  --sidebar-bg: linear-gradient(180deg, #0f5fba 0%, #0a4a9a 100%); --sidebar-solid: #0b53a8; --sidebar-solid-2: #3b7fd0;
  --header-bg: var(--sidebar-bg); --header-solid: var(--sidebar-solid); --header-solid-2: var(--sidebar-solid-2);
  --tabbar-bg: rgba(11, 83, 168, .96); --tabbar-line: rgba(255, 255, 255, .12);
  --tab-idle: rgba(255, 255, 255, .82); --tab-active: #fff;
  --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-3xl: 28px; --r-input: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ═══ iOS skin: sharp emerald on iOS neutrals ═══ */
html.skin[data-skin="ios"] {
  --accent: #027a59; --accent-dark: #025f46; --accent-rgb: 2, 122, 89;
  --ok: #34c759; --ok-text: #1b7a34; --ok-rgb: 52, 199, 89;
  --danger: #ff3b30; --danger-text: #c20015; --danger-rgb: 255, 59, 48;
  --warn: #ff9500; --warn-text: #9a4a00; --warn-rgb: 255, 149, 0;
  --bg: #f2f2f7; --bg-2: #f7f7fa;
  --label: #1c1c1e; --label-2: #5a5a5e; --label-3: #70707a; --label-gray: #636366;
  --sep: rgba(60, 60, 67, .14); --sep-strong: rgba(60, 60, 67, .22);
  --nav-glass: rgba(4, 110, 80, .92); --nav-glass-top: rgba(4, 110, 80, .90);
  --sidebar-bg: linear-gradient(180deg, #067a58 0%, #04523d 100%); --sidebar-solid: #05694c; --sidebar-solid-2: #1f9873;
  --tabbar-bg: rgba(249, 249, 251, .86); --tabbar-line: rgba(60, 60, 67, .29);
  --tab-idle: #636366; --tab-active: #027a59;
}

/* ── Typography ─────────────────────────────────────────── */
html.skin body,
html.skin .font-sans,
html.skin input,
html.skin select,
html.skin textarea,
html.skin button {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html.skin h1, html.skin h2, html.skin h3,
html.skin .text-xl, html.skin .text-2xl, html.skin .text-3xl, html.skin .text-4xl {
  letter-spacing: -.022em;
}
html.skin h1, html.skin .text-3xl, html.skin .text-4xl { font-weight: 700; }
html.skin .text-gray-900, html.skin .text-gray-800 { color: var(--label); }
html.skin .text-gray-700 { color: #3a3a3c; }
html.skin .text-gray-600 { color: var(--label-2); }
html.skin .text-gray-500 { color: var(--label-gray); }
html.skin .text-gray-400 { color: var(--label-3); }

/* ── Surfaces ───────────────────────────────────────────── */
html.skin body { background: var(--bg) !important; color: var(--label); }
html.skin .bg-gray-100 { background-color: var(--bg); }
html.skin .bg-gray-50 { background-color: var(--bg-2); }
html.skin .border-gray-100 { border-color: rgba(60, 60, 67, .08); }
html.skin .border-gray-200 { border-color: var(--sep); }
html.skin .border-gray-300 { border-color: var(--sep-strong); }
html.skin .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
html.skin .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--sep); }

/* ── Radius: softer, continuous-feeling corners ─────────── */
html.skin .rounded-md { border-radius: var(--r-md); }
html.skin .rounded-lg { border-radius: var(--r-lg); }
html.skin .rounded-xl { border-radius: var(--r-xl); }
html.skin .rounded-2xl { border-radius: var(--r-2xl); }
html.skin .rounded-3xl { border-radius: var(--r-3xl); }

/* ── Shadows: diffuse and light ─────────────────────────── */
html.skin .shadow-sm { --tw-shadow: 0 1px 2px rgba(0,0,0,.04); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
html.skin .shadow { --tw-shadow: 0 1px 3px rgba(0,0,0,.06); --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
html.skin .shadow-md { --tw-shadow: 0 4px 14px rgba(0,0,0,.06); --tw-shadow-colored: 0 4px 14px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
html.skin .shadow-lg { --tw-shadow: 0 8px 28px rgba(0,0,0,.08); --tw-shadow-colored: 0 8px 28px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
html.skin .shadow-xl { --tw-shadow: 0 14px 40px rgba(0,0,0,.10); --tw-shadow-colored: 0 14px 40px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
html.skin .shadow-2xl { --tw-shadow: 0 20px 50px rgba(0,0,0,.14); --tw-shadow-colored: 0 20px 50px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }

/* ── System colours: one neutral iOS palette ────────────── */
html.skin .bg-blue-600, html.skin .bg-blue-500, html.skin .bg-indigo-600, html.skin .bg-indigo-500 { background-color: var(--accent); }
html.skin .hover\:bg-blue-700:hover, html.skin .hover\:bg-blue-600:hover, html.skin .hover\:bg-indigo-700:hover, html.skin .hover\:bg-indigo-600:hover { background-color: var(--accent-dark); }
html.skin .bg-blue-700, html.skin .bg-indigo-700 { background-color: var(--accent-dark); }
html.skin .bg-blue-50, html.skin .bg-indigo-50, html.skin .bg-blue-100, html.skin .bg-indigo-100 { background-color: rgba(var(--accent-rgb), .09); }
html.skin .text-blue-500, html.skin .text-blue-600, html.skin .text-blue-700,
html.skin .text-indigo-500, html.skin .text-indigo-600, html.skin .text-indigo-700 { color: var(--accent); }
html.skin .border-blue-200, html.skin .border-blue-300, html.skin .border-indigo-200, html.skin .border-indigo-300 { border-color: rgba(var(--accent-rgb), .3); }
html.skin .bg-green-600, html.skin .bg-green-500, html.skin .bg-emerald-600, html.skin .bg-emerald-500 { background-color: var(--ok); }
html.skin .bg-green-50, html.skin .bg-green-100, html.skin .bg-emerald-50, html.skin .bg-emerald-100 { background-color: rgba(var(--ok-rgb), .12); }
html.skin .text-green-600, html.skin .text-green-700, html.skin .text-emerald-600, html.skin .text-emerald-700 { color: var(--ok-text); }
html.skin .bg-red-600, html.skin .bg-red-500 { background-color: var(--danger); }
html.skin .bg-red-50, html.skin .bg-red-100 { background-color: rgba(var(--danger-rgb), .10); }
html.skin .text-red-500, html.skin .text-red-600, html.skin .text-red-700 { color: var(--danger-text); }
html.skin .bg-orange-500, html.skin .bg-orange-600, html.skin .bg-amber-500 { background-color: var(--warn); }
html.skin .bg-orange-50, html.skin .bg-orange-100, html.skin .bg-amber-50, html.skin .bg-amber-100, html.skin .bg-yellow-50, html.skin .bg-yellow-100 { background-color: rgba(var(--warn-rgb), .12); }
html.skin .text-orange-600, html.skin .text-orange-700, html.skin .text-amber-700, html.skin .text-amber-800 { color: var(--warn-text); }

/* ── Buttons: no hard edges, tactile press ──────────────── */
html.skin button,
html.skin a.rounded-lg, html.skin a.rounded-xl, html.skin a.rounded-full {
  transition: transform .14s ease, background-color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
html.skin button:not(:disabled):active,
html.skin a.rounded-lg:active, html.skin a.rounded-xl:active, html.skin a.rounded-full:active { transform: scale(.97); }
html.skin button:disabled { opacity: .45; }
html.skin button.rounded-lg, html.skin button.rounded-md { border-radius: 12px; }
html.skin button.font-bold, html.skin button.font-semibold, html.skin a.font-bold.rounded-lg, html.skin a.font-semibold.rounded-lg { letter-spacing: -.01em; }

/* ── Inputs: filled, borderless, blue focus halo ────────── */
html.skin input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html.skin select,
html.skin textarea {
  border-radius: var(--r-input);
  border-color: transparent;
  background-color: var(--bg);
  transition: box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
html.skin input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):focus,
html.skin select:focus,
html.skin textarea:focus {
  background-color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18);
  outline: none;
}
html.skin input[type=checkbox], html.skin input[type=radio] { color: var(--accent); }
html.skin ::placeholder { color: var(--label-3); }

/* ── Navigation bars: dark frosted glass instead of flat navy ── */
html.skin [data-ep-tbar],
html.skin [data-ep-bnav] {
  background: var(--nav-glass) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-color: rgba(255, 255, 255, .08);
}
html.skin [data-ep-tbar] { box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
html.skin [data-ep-bnav] { box-shadow: 0 -1px 0 rgba(255, 255, 255, .06); }
html.skin #sidebar-container { box-shadow: 1px 0 0 rgba(255, 255, 255, .05), 8px 0 30px rgba(0, 0, 0, .10); }

/* ── Tables and modals ──────────────────────────────────── */
html.skin table thead th { letter-spacing: .02em; }
html.skin .fixed.inset-0 > .bg-white, html.skin [role=dialog] .bg-white { border-radius: 20px; }
html.skin .bg-black.bg-opacity-50, html.skin .bg-gray-500.bg-opacity-75 {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Reduced motion: keep the look, drop the movement */
@media (prefers-reduced-motion: reduce) {
  html.skin button, html.skin a { transition: none !important; transform: none !important; }
}

/* ═══ Tier 1b: brand navy controls become iOS controls ═══════════════════ */

/* Solid navy / slate buttons, links and chips → iOS blue (bars and hero sections stay navy). */
html.skin button.bg-navy-blue, html.skin a.bg-navy-blue, html.skin input[type=submit].bg-navy-blue,
html.skin button.bg-dark-blue, html.skin a.bg-dark-blue, html.skin input[type=submit].bg-dark-blue,
html.skin .rounded-full.bg-navy-blue:not([data-ep-tbar]), html.skin .rounded-full.bg-dark-blue {
  background-color: var(--accent);
  border-color: var(--accent);
}
html.skin button.bg-navy-blue:hover, html.skin a.bg-navy-blue:hover,
html.skin button.bg-dark-blue:hover, html.skin a.bg-dark-blue:hover,
html.skin .hover\:bg-blue-800:hover, html.skin .hover\:bg-navy-blue\/90:hover { background-color: var(--accent-dark); }
html.skin .text-navy-blue, html.skin .text-dark-blue { color: var(--accent); }
html.skin .border-navy-blue, html.skin .border-dark-blue { border-color: var(--accent); }
html.skin button.rounded-lg.py-3, html.skin a.rounded-lg.py-3 { border-radius: 14px; }

/* Tables: header cells with a navy fill become quiet grey labels. */
html.skin thead th, html.skin table th { color: var(--label-gray); }
html.skin thead .bg-dark-blue, html.skin thead .bg-navy-blue, html.skin th.bg-dark-blue, html.skin th.bg-navy-blue {
  background-color: rgba(60, 60, 67, .08) !important;
  color: var(--label) !important;
}
html.skin thead .text-white, html.skin th.text-white { color: var(--label) !important; }

/* ── Bottom tab bar: light frosted glass with blue active tab (the iPhone one) ── */
html.skin nav[data-ep-bnav] {
  background: var(--tabbar-bg) !important;
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  border-top: .5px solid var(--tabbar-line);
  box-shadow: none;
}
html.skin nav[data-ep-bnav] a { color: var(--tab-idle); transition: color .15s ease; }
html.skin nav[data-ep-bnav] a.text-white\/60, html.skin nav[data-ep-bnav] a.text-white\/70 { color: var(--tab-idle); }
html.skin nav[data-ep-bnav] a:hover,
html.skin nav[data-ep-bnav] a.nav-active,
html.skin nav[data-ep-bnav] a[aria-current=page] { color: var(--tab-active) !important; }
html.skin nav[data-ep-bnav] a.nav-active, html.skin nav[data-ep-bnav] a[aria-current=page] { background: transparent !important; }
html.skin nav[data-ep-bnav] .text-white:not(a):not(.bg-red-500) { color: inherit; }
html.skin nav[data-ep-bnav] .bg-red-500 { background-color: var(--danger); color: #fff; }

/* ── Top bar: dark glass, a touch lighter than flat navy ── */
html.skin [data-ep-tbar] { background: var(--nav-glass-top) !important; }
html.skin .md\:hidden.fixed.top-0.bg-navy-blue { background: var(--nav-glass-top); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }

/* ── Modals as iOS sheets: rounder, softer overlay ── */
html.skin .fixed.inset-0 .rounded-2xl, html.skin .fixed.inset-0 .rounded-xl { border-radius: 24px; }
html.skin .fixed.inset-0 .shadow-2xl, html.skin .fixed.inset-0 .shadow-xl { --tw-shadow: 0 24px 60px rgba(0,0,0,.22); box-shadow: var(--tw-shadow); }
html.skin .bg-black\/50, html.skin .bg-black\/40, html.skin .bg-black\/60 { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ── Form details ── */
html.skin select { background-position: right .75rem center; padding-right: 2.25rem; }
html.skin input[type=checkbox] { border-radius: 6px; }
html.skin input[type=checkbox]:checked, html.skin input[type=radio]:checked { background-color: var(--accent); border-color: var(--accent); }
html.skin a { text-underline-offset: 3px; }
html.skin ::selection { background: rgba(var(--accent-rgb), .25); }
html.skin * { scrollbar-width: thin; scrollbar-color: rgba(60,60,67,.3) transparent; }

/* Page-level navy leftovers */
html.skin .sticky-actions-header { background: rgba(60, 60, 67, .08) !important; color: var(--label) !important; }
html.skin #ep-push-card .ep-pc-on { background: var(--accent); border-radius: 12px; font-weight: 600; }
html.skin #ep-push-card { border-radius: 20px; }

/* Buttons / links hard-coded navy in inline styles */
html.skin button[style*="background:#00274c" i], html.skin button[style*="background: #00274c" i], html.skin button[style*="background-color:#00274c" i],
html.skin a[style*="background:#00274c" i]:not([data-ep-bnav]), html.skin a[style*="background: #00274c" i]:not([data-ep-bnav]),
html.skin input[type=submit][style*="background:#00274c" i] {
  background: var(--accent) !important;
  border-radius: var(--r-lg) !important;
}


/* ═══ Shared: navy brand surfaces follow the skin ═══════════════════════ */
html.skin #sidebar-container { background: var(--sidebar-bg) !important; }
html.skin .w-full.bg-navy-blue,
html.skin .bg-navy-blue.fixed:not(.rounded-full):not(.top-0) { background: var(--header-bg) !important; }
html.skin #sidebar-container [style*="00274c" i] { background: transparent !important; }
html.skin .from-navy-blue { --tw-gradient-from: var(--header-solid); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0,0,0,0)); }
html.skin .via-dark-blue { --tw-gradient-stops: var(--tw-gradient-from), var(--header-solid-2), var(--tw-gradient-to, rgba(0,0,0,0)); }
html.skin .to-dark-blue { --tw-gradient-to: var(--header-solid-2); }

/* ═══ Appearance card (profile page) ════════════════════════════════════ */
.ep-skin-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ep-skin-choice-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px; border-radius: 16px; border: 2px solid #e5e7eb; background: #fff; cursor: pointer; position: relative; transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.ep-skin-choice-grid button:hover { border-color: #cbd5e1; }
.ep-skin-choice-grid button:active { transform: scale(.98); }
.ep-skin-choice-grid button[aria-pressed="true"] { border-color: var(--accent, #0a58b8); box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 10, 88, 184), .18); }
.ep-skin-choice-grid button[aria-pressed="true"]::after { content: "\2713"; position: absolute; top: 10px; right: 12px; font: 700 14px/1 system-ui, sans-serif; color: var(--accent, #0a58b8); }
.ep-skin-swatch { width: 48px; height: 30px; border-radius: 10px; display: block; border: 1px solid rgba(0,0,0,.08); }
.ep-skin-swatch-original { background: linear-gradient(135deg, #00274c 50%, #f9fafb 50%); }
.ep-skin-swatch-classic { background: linear-gradient(135deg, #0f5fba 50%, #0a4a9a 50%); }
.ep-skin-swatch-ios { background: linear-gradient(135deg, #067a58 50%, #f2f2f7 50%); }
.ep-skin-swatch-aqua { background: linear-gradient(135deg, #8fe1ee 50%, #0a7f99 50%); }
.ep-skin-swatch-summer { background: linear-gradient(135deg, #ffc97a 50%, #d4431c 50%); }
.ep-skin-name { font-weight: 700; font-size: 14px; color: #111827; }
.ep-skin-about { font-size: 12px; color: #6b7280; line-height: 1.35; }

/* ═══ SUMMER skin: sun, sand and sea ═══════════════════════════════════ */
html.skin[data-skin="summer"] {
  --accent: #d03d1b; --accent-dark: #b03014; --accent-rgb: 208, 61, 27;
  --ok: #12c2a0; --ok-text: #08705b; --ok-rgb: 18, 194, 160;
  --danger: #f2495a; --danger-text: #b8232b; --danger-rgb: 242, 73, 90;
  --warn: #ffc233; --warn-text: #8a5200; --warn-rgb: 255, 194, 51;
  --bg: #fffbf0; --bg-2: #fffdf7;
  --label: #2b2118; --label-2: #5e4d3c; --label-3: #7d6c5a; --label-gray: #76654f;
  --sep: rgba(150, 90, 20, .16); --sep-strong: rgba(150, 90, 20, .26);
  --nav-glass: rgba(206, 66, 30, .95); --nav-glass-top: rgba(206, 66, 30, .93);
  --sidebar-bg: linear-gradient(180deg, #ffe58a 0%, #ffcb7c 55%, #ffb67e 100%); --sidebar-solid: #ffcb7c; --sidebar-solid-2: #ffb67e;
  --header-bg: linear-gradient(135deg, #d4431c 0%, #b93412 100%); --header-solid: #c93d17; --header-solid-2: #e0643f;
  --tabbar-bg: rgba(255, 251, 240, .94); --tabbar-line: rgba(150, 90, 20, .22);
  --tab-idle: #7d6c5a; --tab-active: #d03d1b;
  --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --r-3xl: 32px; --r-input: 14px;
}
html.skin[data-skin="summer"] body { background: linear-gradient(180deg, #ffe48a 0, #fff1bd 150px, #fff8e3 380px, var(--bg) 640px) fixed !important; }
html.skin[data-skin="summer"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html.skin[data-skin="summer"] select, html.skin[data-skin="summer"] textarea { background-color: #fff5d8; }
html.skin[data-skin="summer"] .bg-white { box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; }

/* Hard-coded navy headers (modal title bars etc.) follow the skin; the bars keep their glass. */
html.skin div[style*="background:#00274c" i]:not([data-ep-tbar]):not([data-ep-bnav]),
html.skin div[style*="background: #00274c" i]:not([data-ep-tbar]):not([data-ep-bnav]) { background: var(--header-bg) !important; }




/* ═══ Contrast: menu text stays readable on the coloured menu in every skin ═══ */
html.skin #sidebar-container .text-white\/80, html.skin #sidebar-container .text-white\/70,
html.skin #more-drawer .text-white\/80, html.skin #more-drawer .text-white\/70 { color: rgba(255, 255, 255, .95); }
html.skin #sidebar-container .text-white\/60, html.skin #sidebar-container .text-white\/50,
html.skin #more-drawer .text-white\/60, html.skin #more-drawer .text-white\/50 { color: rgba(255, 255, 255, .86); }
html.skin [data-ep-tbar] .text-white\/60, html.skin [data-ep-tbar] .text-white\/70 { color: rgba(255, 255, 255, .92); }



/* ═══ AQUA skin: fresh, cool and watery — a light aqua menu with dark teal text ═══ */
html.skin[data-skin="aqua"] {
  --accent: #0a7f99; --accent-dark: #07657a; --accent-rgb: 10, 127, 153;
  --ok: #1fbf75; --ok-text: #0b7a4a; --ok-rgb: 31, 191, 117;
  --danger: #f0506e; --danger-text: #be1e3c; --danger-rgb: 240, 80, 110;
  --warn: #ffb020; --warn-text: #8a5200; --warn-rgb: 255, 176, 32;
  --bg: #f0fbfd; --bg-2: #f7fdfe;
  --label: #0b2a33; --label-2: #3d5963; --label-3: #5a7480; --label-gray: #4f6872;
  --sep: rgba(0, 90, 110, .14); --sep-strong: rgba(0, 90, 110, .24);
  --nav-glass: rgba(7, 120, 145, .94); --nav-glass-top: rgba(7, 120, 145, .92);
  --sidebar-bg: linear-gradient(180deg, #dff8fc 0%, #b6edf6 55%, #8fe1ee 100%); --sidebar-solid: #b6edf6; --sidebar-solid-2: #8fe1ee;
  --header-bg: linear-gradient(135deg, #067f9c 0%, #05647c 100%); --header-solid: #067f9c; --header-solid-2: #2aa8c4;
  --tabbar-bg: rgba(240, 251, 253, .94); --tabbar-line: rgba(0, 90, 110, .20);
  --tab-idle: #4f6872; --tab-active: #0a7f99;
  --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-2xl: 26px; --r-3xl: 32px; --r-input: 14px;
}
html.skin[data-skin="aqua"] body { background: linear-gradient(180deg, #c4f1f9 0, #e3f8fc 160px, #f3fcfe 400px, var(--bg) 640px) fixed !important; }
html.skin[data-skin="aqua"] input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
html.skin[data-skin="aqua"] select, html.skin[data-skin="aqua"] textarea { background-color: #e4f7fb; }

/* ═══ Summer: a light, sunny menu with dark text (the coral header/bars keep white text) ═══ */
html.skin[data-skin="summer"] #sidebar-container { color: #3d2610; }
html.skin[data-skin="summer"] #sidebar-container .text-white:not([class*="bg-red-"]):not([class*="bg-amber-"]):not([class*="bg-orange-"]):not([class*="bg-yellow-"]):not([class*="bg-green-"]),
html.skin[data-skin="summer"] #sidebar-container .text-white\/90, html.skin[data-skin="summer"] #sidebar-container .text-white\/80,
html.skin[data-skin="summer"] #sidebar-container .text-white\/70, html.skin[data-skin="summer"] #sidebar-container .text-white\/60,
html.skin[data-skin="summer"] #sidebar-container .text-white\/50 { color: #4a2a10; }
html.skin[data-skin="summer"] #sidebar-container .hover\:text-white:hover { color: #1f1006; }
html.skin[data-skin="summer"] #sidebar-container .bg-white\/10, html.skin[data-skin="summer"] #sidebar-container .bg-white\/5,
html.skin[data-skin="summer"] #sidebar-container .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, .62); }
html.skin[data-skin="summer"] #sidebar-container .border-white\/10, html.skin[data-skin="summer"] #sidebar-container .border-white\/5,
html.skin[data-skin="summer"] #sidebar-container .border-white\/15 { border-color: rgba(140, 70, 0, .18); }
html.skin[data-skin="summer"] #sidebar-container .via-white\/15 { --tw-gradient-stops: transparent, rgba(140, 70, 0, .25), transparent; }
html.skin[data-skin="summer"] #sidebar-container .text-amber-300, html.skin[data-skin="summer"] #sidebar-container .text-amber-400 { color: #a14a00; }
html.skin[data-skin="summer"] #sidebar-container .text-teal-300, html.skin[data-skin="summer"] #sidebar-container .text-teal-400 { color: #0b6b63; }
html.skin[data-skin="summer"] #sidebar-container .text-blue-300, html.skin[data-skin="summer"] #sidebar-container .text-blue-400 { color: #065a8a; }
html.skin[data-skin="summer"] #sidebar-container .text-slate-300, html.skin[data-skin="summer"] #sidebar-container .text-slate-400 { color: #5a4630; }
html.skin[data-skin="summer"] #sidebar-container img { filter: brightness(0) opacity(.82); }


/* ═══ Aqua: the same light-menu treatment in cool teal ═══ */
html.skin[data-skin="aqua"] #sidebar-container { color: #06323f; }
html.skin[data-skin="aqua"] #sidebar-container .text-white:not([class*="bg-red-"]):not([class*="bg-amber-"]):not([class*="bg-orange-"]):not([class*="bg-yellow-"]):not([class*="bg-green-"]),
html.skin[data-skin="aqua"] #sidebar-container .text-white\/90, html.skin[data-skin="aqua"] #sidebar-container .text-white\/80,
html.skin[data-skin="aqua"] #sidebar-container .text-white\/70, html.skin[data-skin="aqua"] #sidebar-container .text-white\/60,
html.skin[data-skin="aqua"] #sidebar-container .text-white\/50 { color: #0b4252; }
html.skin[data-skin="aqua"] #sidebar-container .hover\:text-white:hover { color: #03212b; }
html.skin[data-skin="aqua"] #sidebar-container .bg-white\/10, html.skin[data-skin="aqua"] #sidebar-container .bg-white\/5,
html.skin[data-skin="aqua"] #sidebar-container .hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, .62); }
html.skin[data-skin="aqua"] #sidebar-container .border-white\/10, html.skin[data-skin="aqua"] #sidebar-container .border-white\/5,
html.skin[data-skin="aqua"] #sidebar-container .border-white\/15 { border-color: rgba(0, 90, 110, .18); }
html.skin[data-skin="aqua"] #sidebar-container .via-white\/15 { --tw-gradient-stops: transparent, rgba(0, 90, 110, .25), transparent; }
html.skin[data-skin="aqua"] #sidebar-container .text-amber-300, html.skin[data-skin="aqua"] #sidebar-container .text-amber-400 { color: #0b6b7e; }
html.skin[data-skin="aqua"] #sidebar-container .text-teal-300, html.skin[data-skin="aqua"] #sidebar-container .text-teal-400 { color: #0a6a5e; }
html.skin[data-skin="aqua"] #sidebar-container .text-blue-300, html.skin[data-skin="aqua"] #sidebar-container .text-blue-400 { color: #0a5aa0; }
html.skin[data-skin="aqua"] #sidebar-container .text-slate-300, html.skin[data-skin="aqua"] #sidebar-container .text-slate-400 { color: #3f5560; }
html.skin[data-skin="aqua"] #sidebar-container img { filter: brightness(0) opacity(.82); }


/* The tab strip under the page title follows the accent in every skin */
html.skin [style*="border-bottom-color:#00274c" i] { border-bottom-color: var(--accent) !important; }

/* Summer menu: section cards as soft white glass on the sunny gradient */
html.skin[data-skin="summer"] #sidebar-container .rounded-xl.overflow-hidden.border { background-color: rgba(255, 255, 255, .34) !important; border-color: rgba(140, 70, 0, .20) !important; }
html.skin[data-skin="summer"] #sidebar-container .rounded-xl.overflow-hidden.border > div:first-child { background-color: rgba(255, 255, 255, .42) !important; border-color: rgba(140, 70, 0, .15) !important; }