:root {
  --bg-wallpaper: url('../assets/images/bg-bliss.jpg');
  --theme-name: 'Sunny Bliss';

  --ink-title: #04273f;
  --ink-heading: #063c63;
  --ink-body: #0e304d;
  --ink-muted: #2d5573;
  --ink-emboss: 0 1px 1px rgba(255, 255, 255, 0.85);

  --aero-blue: #0284c7;
  --aero-blue-dark: #0369a1;
  --aero-blue-bright: #38bdf8;
  --aero-cyan: #00bcd4;
  --aero-aqua: #06b6d4;
  --aero-green: #16a34a;
  --aero-lime: #65a30d;

  --glass-bg: rgba(255, 255, 255, 0.25);
  --glass-bg-card: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.92);
  --glass-border-subtle: rgba(255, 255, 255, 0.75);
  --glass-bevel: inset 0 1.5px 2px rgba(255, 255, 255, 1), inset 0 -1.5px 2px rgba(2, 132, 199, 0.18);
  --glass-shadow: 0 16px 45px rgba(2, 84, 130, 0.22), 0 0 20px rgba(56, 189, 248, 0.25);

  --card-subbox-bg: rgba(255, 255, 255, 0.88);
  --card-subbox-border: rgba(255, 255, 255, 0.95);
  --card-subbox-shadow: 0 2px 8px rgba(2, 84, 130, 0.08), inset 0 1px 1px #ffffff;

  --btn-pill-grad: linear-gradient(180deg, #7de0fc 0%, #38bdf8 48%, #0284c7 52%, #0369a1 100%);
  --btn-tab-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(224, 242, 254, 0.88) 50%, rgba(186, 230, 253, 0.8) 51%, rgba(125, 211, 252, 0.9) 100%);
  --btn-tab-text: #05486d;
  --btn-tab-active-grad: linear-gradient(180deg, #7de0fc 0%, #38bdf8 48%, #0284c7 52%, #0369a1 100%);
  --btn-tab-active-text: #ffffff;

  --row-pill-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(240, 249, 255, 0.88) 48%, rgba(224, 242, 254, 0.9) 52%, rgba(186, 230, 253, 0.94) 100%);
  --row-pill-hover: linear-gradient(180deg, #ffffff 0%, rgba(224, 242, 254, 0.96) 48%, rgba(186, 230, 253, 0.96) 52%, rgba(125, 211, 252, 0.98) 100%);
  --row-pill-border: rgba(255, 255, 255, 0.95);
  --row-pill-shadow: 0 4px 14px rgba(2, 132, 199, 0.16), inset 0 1px 2px #ffffff;

  --tag-bg: rgba(2, 132, 199, 0.12);
  --tag-border: rgba(2, 132, 199, 0.35);
  --tag-text: #0369a1;
}

[data-theme="dark"] {
  --bg-wallpaper: url('../assets/images/bg-aurora.jpg');
  --theme-name: 'Aurora Night';

  --ink-title: #ffffff;
  --ink-heading: #38bdf8;
  --ink-body: #e0f2fe;
  --ink-muted: #93c5fd;
  --ink-emboss: 0 1px 2px rgba(0, 0, 0, 0.7);

  --aero-blue: #38bdf8;
  --aero-blue-dark: #0284c7;
  --aero-blue-bright: #7de0fc;
  --aero-cyan: #22d3ee;
  --aero-aqua: #06b6d4;
  --aero-green: #22c55e;
  --aero-lime: #84cc16;

  --glass-bg: rgba(6, 25, 42, 0.42);
  --glass-bg-card: rgba(8, 32, 54, 0.58);
  --glass-border: rgba(56, 189, 248, 0.5);
  --glass-border-subtle: rgba(56, 189, 248, 0.3);
  --glass-bevel: inset 0 1.5px 2px rgba(255, 255, 255, 0.35), inset 0 -1.5px 2px rgba(0, 0, 0, 0.7);
  --glass-shadow: 0 18px 55px rgba(0, 0, 0, 0.8), 0 0 30px rgba(34, 211, 238, 0.35);

  --card-subbox-bg: rgba(6, 25, 42, 0.82);
  --card-subbox-border: rgba(56, 189, 248, 0.4);
  --card-subbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.2);

  --btn-pill-grad: linear-gradient(180deg, #38bdf8 0%, #0284c7 48%, #0369a1 52%, #075985 100%);
  --btn-tab-grad: linear-gradient(180deg, rgba(14, 45, 68, 0.88) 0%, rgba(8, 30, 48, 0.75) 50%, rgba(4, 20, 32, 0.88) 100%);
  --btn-tab-text: #bae6fd;
  --btn-tab-active-grad: linear-gradient(180deg, #22d3ee 0%, #0284c7 48%, #0369a1 52%, #075985 100%);
  --btn-tab-active-text: #ffffff;

  --row-pill-grad: linear-gradient(180deg, rgba(14, 45, 70, 0.92) 0%, rgba(8, 32, 52, 0.85) 48%, rgba(4, 22, 38, 0.88) 52%, rgba(2, 18, 32, 0.95) 100%);
  --row-pill-hover: linear-gradient(180deg, rgba(34, 211, 238, 0.45) 0%, rgba(14, 165, 233, 0.55) 48%, rgba(2, 132, 199, 0.75) 52%, rgba(3, 105, 161, 0.95) 100%);
  --row-pill-border: rgba(56, 189, 248, 0.45);
  --row-pill-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.25);

  --tag-bg: rgba(56, 189, 248, 0.18);
  --tag-border: rgba(56, 189, 248, 0.4);
  --tag-text: #7dd3fc;
}

.glass-panel {
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  box-shadow: var(--glass-bevel), var(--glass-shadow);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
}

html,
body,
* {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.45' stop-color='%23e0f7ff'/%3E%3Cstop offset='1' stop-color='%2338bdf8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 2l20 17-9 .7 5 8-4.5 2.5-5-8-5.5 6.5L5 2z' fill='url(%23g)' stroke='%230369a1' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M9 7l10 9' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") 5 2, auto !important;
}