/* ============================================================
   1. THEME VARIABLES
   ============================================================ */
/* ---------------------------------------------------------------
   Bảng màu đã hiệu chỉnh lại cho 3 theme — mỗi theme có 1 câu chuyện
   màu sắc rõ ràng, nhất quán từ accent → nền → glass → chữ,
   thay vì các giá trị rời rạc trước đây (ví dụ theme Light trước
   kia dùng --c-action màu xanh dương nhưng phần chữ/nút lại đang
   override sang tím — gây lệch tông. Nay đã thống nhất 1 tông chủ đạo
   cho từng theme).
   - Dark  = "Midnight Aurora": cyan điện trên nền navy sâu.
   - Light = "Soft Violet Premium": tím-chàm sang trọng trên nền
             lavender trắng ngà, đồng bộ accent ↔ chữ ↔ nút.
   - Dim   = "Midnight Rose": magenta-hồng trên nền rượu vang đậm,
             phản chiếu kính đổi sang tông hồng-vàng ấm thay vì cyan
             lạc tông như trước.
   --------------------------------------------------------------- */
:root,
html[data-theme="dark"] {
  --c-glass: #bbbbbc;
  --c-light: #fff;
  --c-dark: #000;

  --c-content: #e4e6f0;
  --c-action: #06d6f0;

  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.3;
  --saturation: 150%;

  --bg-overlay: rgba(8, 9, 26, 0.5);
  --bg-vignette: radial-gradient(ellipse at center, transparent 35%, rgba(4, 6, 22, 0.68) 100%);
  --glass-bg: rgba(13, 15, 40, 0.48);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: rgba(0, 0, 0, 0.42);
  --glass-inset: rgba(255, 255, 255, 0.13);
  --card-bg: linear-gradient(135deg, rgba(24, 28, 62, 0.55) 0%, rgba(9, 10, 32, 0.38) 100%);
  --nav-bg: rgba(11, 12, 36, 0.58);
  --footer-bg: rgba(5, 6, 20, 0.52);
}

html[data-theme="light"] {
  --c-glass: #c7bce0;
  --c-light: #fff;
  --c-dark: #2a1c4a;

  --c-content: #2d2350;
  --c-action: #6d28d9;

  --glass-reflex-dark: 1;
  --glass-reflex-light: 1;
  --saturation: 160%;

  --bg-overlay: rgba(255, 255, 255, 0.32);
  --bg-vignette: radial-gradient(ellipse at center, transparent 45%, rgba(179, 155, 224, 0.32) 100%);
  --glass-bg: rgba(255, 255, 255, 0.46);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: rgba(109, 40, 217, 0.16);
  --glass-inset: rgba(255, 255, 255, 0.55);
  --card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(232, 219, 250, 0.36) 100%);
  --nav-bg: rgba(255, 255, 255, 0.46);
  --footer-bg: rgba(255, 255, 255, 0.34);
}

html[data-theme="dim"] {
  --c-light: #99deff;
  --c-dark: #20001b;
  --c-glass: hsl(335 250% 74% / 1);

  --c-content: #d5dbe2;
  --c-action: #ff48a9;

  --glass-reflex-dark: 2;
  --glass-reflex-light: 0.7;
  --saturation: 200%;

  --bg-overlay: rgba(22, 4, 30, 0.54);
  --bg-vignette: radial-gradient(ellipse at center, transparent 35%, rgba(34, 0, 42, 0.58) 100%);
  --glass-bg: rgba(34, 12, 50, 0.48);
  --glass-border: rgba(255, 210, 240, 0.13);
  --glass-shadow: rgba(20, 0, 30, 0.42);
  --glass-inset: rgba(255, 210, 240, 0.13);
  --card-bg: linear-gradient(135deg, rgba(46, 16, 60, 0.55) 0%, rgba(26, 5, 40, 0.38) 100%);
  --nav-bg: rgba(27, 6, 42, 0.58);
  --footer-bg: rgba(20, 0, 30, 0.54);
}

/* ============================================================
   2. BASE
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  min-height: 100vh;
  background-color: #0f172a;
  background-image: url('/assets/img/nen-web.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1);
}

html[data-theme="light"] body {
  background-color: #e8dff0;
  background-blend-mode: luminosity;
}

html[data-theme="dim"] body {
  background-color: #1a0a25;
  background-blend-mode: multiply;
}

/* Widgets */
#weatherContent,
#factContent {
  min-height: 90px;
}

/* ============================================================
   3. BACKGROUND OVERLAY & ORBS
   ============================================================ */
.bg-overlay {
  position: absolute;
  inset: 0;
  background: var(--bg-overlay);
  transition: background 600ms ease;
}

.bg-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-vignette);
  transition: background 600ms ease;
}

/* Floating light orbs - soft ambient glow */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.25;
  mix-blend-mode: screen;
  will-change: transform;
}

.orb-1 {
  width: 400px;
  height: 400px;
  top: -10%;
  left: -5%;
  background: radial-gradient(circle, rgba(200, 150, 255, 0.5) 0%, transparent 70%);
  animation: orbFloat1 20s ease-in-out infinite alternate;
}

.orb-2 {
  width: 350px;
  height: 350px;
  top: 50%;
  right: -8%;
  background: radial-gradient(circle, rgba(150, 200, 255, 0.4) 0%, transparent 70%);
  animation: orbFloat2 25s ease-in-out infinite alternate;
}

.orb-3 {
  width: 300px;
  height: 300px;
  bottom: -5%;
  left: 30%;
  background: radial-gradient(circle, rgba(255, 150, 200, 0.4) 0%, transparent 70%);
  animation: orbFloat3 22s ease-in-out infinite alternate;
}

html[data-theme="light"] .orb {
  opacity: 0.15;
  mix-blend-mode: multiply;
}

html[data-theme="light"] .orb-1 {
  background: radial-gradient(circle, rgba(180, 130, 230, 0.4) 0%, transparent 70%);
}

html[data-theme="light"] .orb-2 {
  background: radial-gradient(circle, rgba(130, 180, 240, 0.3) 0%, transparent 70%);
}

html[data-theme="light"] .orb-3 {
  background: radial-gradient(circle, rgba(240, 130, 180, 0.3) 0%, transparent 70%);
}

@keyframes orbFloat1 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(60px, 40px) scale(1.15);
  }

  100% {
    transform: translate(-30px, 80px) scale(0.95);
  }
}

@keyframes orbFloat2 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(-50px, -60px) scale(1.2);
  }

  100% {
    transform: translate(40px, -30px) scale(0.9);
  }
}

@keyframes orbFloat3 {
  0% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(50px, -40px) scale(1.1);
  }

  100% {
    transform: translate(-40px, 30px) scale(1.05);
  }
}

/* ============================================================
   4. GLASS COMPONENTS
   ============================================================ */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow:
    0 10px 40px -10px var(--glass-shadow),
    inset 0 1px 0 0 var(--glass-inset);
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

.glass-nav {
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px -10px var(--glass-shadow);
  transition: background 400ms ease, border-color 400ms ease, box-shadow 400ms ease;
}

/* ============================================================
   SIDEBAR - Liquid Glass Floating Menu & Circular Button
   (Exact match to Theme Switcher glassmorphism & hover physics)
   ============================================================ */

:root {
  --menu-btn-size: 48px;
  --menu-top: 1.5rem;
  /* 24px - exactly matches switcher top */
  --menu-left: 1.5rem;
  /* 24px - exactly matches switcher right */
  --menu-radius: 28px;
  --menu-width: 265px;
}

/* Toggle button - circular liquid glass button identical to theme switcher */
.sidebar-toggle-btn {
  --c: var(--c-content);
  position: fixed;
  top: var(--menu-top);
  left: var(--menu-left);
  z-index: 70;
  width: var(--menu-btn-size);
  height: var(--menu-btn-size);
  min-width: var(--menu-btn-size);
  min-height: var(--menu-btn-size);
  padding: 0;
  margin: 0;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  cursor: pointer;
  color: var(--c);
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
    color 160ms ease,
    transform 160ms ease;
}

/* Hover physics: identical to .switcher__option:hover */
.sidebar-toggle-btn:hover {
  --c: var(--c-action);
  color: var(--c-action);
}

.sidebar-toggle-btn:hover .sidebar-icon-menu {
  transform: scale(1.15);
  color: var(--c-action);
}

.sidebar-toggle-btn.active:hover .sidebar-icon-close {
  transform: rotate(0deg) scale(1.15);
  color: var(--c-action);
}

.sidebar-toggle-btn:active {
  transform: scale(0.95);
}

.sidebar-toggle-btn.active {
  background-color: color-mix(in srgb, var(--c-glass) 20%, transparent);
}

/* Icon wrap for smooth morph between hamburger and close (X) */
.sidebar-toggle-icon-wrap {
  position: relative;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-toggle-btn .sidebar-icon-menu,
.sidebar-toggle-btn .sidebar-icon-close {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 22px;
  height: 22px;
  color: inherit;
  transition: transform 200ms cubic-bezier(0.5, 0, 0, 1),
    opacity 200ms ease,
    color 160ms ease;
}

.sidebar-toggle-btn .sidebar-icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
  pointer-events: none;
}

.sidebar-toggle-btn.active .sidebar-icon-menu {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
  pointer-events: none;
}

.sidebar-toggle-btn.active .sidebar-icon-close {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  pointer-events: auto;
}

/* Transparent click-outside overlay (no dark/milky veil over the webpage) */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.sidebar-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Sidebar panel - crystal-clear liquid glass card with exact switcher reflex */
.sidebar {
  position: fixed;
  top: var(--menu-top);
  left: var(--menu-left);
  z-index: 65;
  width: var(--menu-width);
  max-width: calc(100vw - 3rem);
  border-radius: var(--menu-radius);
  overflow: hidden;
  border: none;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  clip-path: inset(0 calc(100% - var(--menu-btn-size)) calc(100% - var(--menu-btn-size)) 0 round calc(var(--menu-btn-size) / 2));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: clip-path 450ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease,
    visibility 0s linear 450ms;
}

.sidebar.open {
  clip-path: inset(0 0 0 0 round var(--menu-radius));
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: clip-path 450ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 150ms ease,
    visibility 0s linear 0s;
}

/* Sidebar inner container */
.sidebar-inner {
  width: 100%;
  padding: 8px 10px 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
  overflow-x: hidden;
}

/* Top header row inside the card (aligns with the toggle button) */
.sidebar-header {
  height: var(--menu-btn-size);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: calc(var(--menu-btn-size) + 8px);
  padding-right: 8px;
}

.sidebar-header-spacer {
  flex: 1;
}

.sidebar-header-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-content);
  opacity: 0.8;
  padding: 4px 12px;
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass) 18%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent);
  transition: transform 200ms ease, color 160ms ease;
  cursor: default;
}

.sidebar-header-badge:hover {
  transform: scale(1.03);
  color: var(--c-action);
}

/* Sidebar profile with soft hover scale */
.sidebar-profile {
  padding: 6px 8px 8px;
  border-radius: 16px;
  transition: transform 200ms ease, background-color 200ms ease;
  cursor: default;
}

.sidebar-profile:hover {
  transform: scale(1.01);
  background-color: color-mix(in srgb, var(--c-glass) 8%, transparent);
}

.sidebar-profile .zap-icon-badge {
  transition: transform 200ms ease;
}

.sidebar-profile:hover .zap-icon-badge {
  transform: scale(1.05);
}

.sidebar-divider {
  height: 1px;
  margin: 6px 8px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 20%), transparent), transparent);
}

.sidebar-nav,
.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 2px 0;
}

/* Sidebar links with subtle zoom fitting snugly inside menu */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 99em;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--c-content);
  text-decoration: none;
  border: none;
  transform-origin: center;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 200ms ease,
    box-shadow 200ms ease,
    color 160ms ease;
  position: relative;
  cursor: pointer;
  background: none;
  text-align: left;
  width: 100%;
}

.sidebar-link span {
  display: inline-block;
  color: inherit;
  transition: color 160ms ease;
}

.sidebar-link svg,
.sidebar-link i {
  width: 18px;
  height: 18px;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), color 160ms ease;
  color: inherit;
  flex-shrink: 0;
}

/* Hover: subtle, elegant zoom fitting neatly within menu bounds */
.sidebar-link:hover {
  transform: scale(1.018);
  color: var(--c-action);
  background-color: color-mix(in srgb, var(--c-glass) 22%, transparent);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 15%), transparent),
    inset 1.8px 2px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    0px 2px 8px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent);
}

.sidebar-link:hover svg,
.sidebar-link:hover i {
  transform: scale(1.08);
  color: var(--c-action);
}

.sidebar-link:active {
  transform: scale(0.98);
  transition-duration: 100ms;
}

/* Glass effect cho nút đăng nhập / đăng xuất */
.sidebar-action-btn {
  background: rgba(255, 255, 255, 0);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5.1px);
  -webkit-backdrop-filter: blur(5.1px);
  border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.sidebar-action-btn:hover {
  background: color-mix(in srgb, var(--c-glass) 14%, transparent) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Staggered entry animation for sidebar children */
.sidebar.open .sidebar-profile {
  animation: sidebarItemIn 350ms ease forwards;
  animation-delay: 60ms;
  opacity: 0;
}

.sidebar.open .sidebar-nav {
  animation: sidebarItemIn 350ms ease forwards;
  animation-delay: 110ms;
  opacity: 0;
}

.sidebar.open .sidebar-actions {
  animation: sidebarItemIn 350ms ease forwards;
  animation-delay: 160ms;
  opacity: 0;
}

@keyframes sidebarItemIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Light theme sidebar overrides */
html[data-theme="light"] #navName {
  color: #1a0e3a !important;
}

html[data-theme="light"] .sidebar-profile p:last-child {
  color: #6b5590 !important;
}

.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 500ms ease,
    background 400ms ease;
  position: relative;
  overflow: hidden;
  opacity: 0.95;
}

.glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, transparent 50%);
  pointer-events: none;
  transition: opacity 400ms ease;
}

.glass-card:hover {
  transform: translateY(-10px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 25px 50px -12px var(--glass-shadow),
    0 0 40px 0 rgba(180, 140, 255, 0.1),
    inset 0 1px 0 0 var(--glass-inset);
}

html[data-theme="light"] .glass-card:hover {
  border-color: rgba(180, 150, 230, 0.4);
  box-shadow:
    0 25px 50px -12px rgba(100, 80, 140, 0.2),
    0 0 40px 0 rgba(180, 140, 255, 0.08),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6);
}

/* ============================================================
   5. SPRING ANIMATIONS
   ============================================================ */
.spring-btn {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 400ms ease;
}

.spring-btn:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.5);
}

.spring-btn:active {
  transform: scale(0.94);
}

@keyframes springSlideUp {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.9);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.animate-spring {
  animation: springSlideUp 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}

.delay-100 {
  animation-delay: 100ms;
}

.delay-200 {
  animation-delay: 200ms;
}

.delay-300 {
  animation-delay: 300ms;
}

.delay-400 {
  animation-delay: 400ms;
}

/* ============================================================
   6. SCROLLBAR & FORM
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(5, 5, 20, 0.4);
}

::-webkit-scrollbar-thumb {
  background: rgba(150, 130, 180, 0.4);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(180, 160, 210, 0.5);
}

html[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(220, 210, 240, 0.4);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(160, 140, 200, 0.4);
}

html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 120, 180, 0.5);
}

::placeholder {
  color: #64748b;
  opacity: 1;
}

/* ============================================================
   7. EXPLORE BUTTON
   ============================================================ */
.explore-btn {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.12) 0%,
      rgba(240, 230, 250, 0.06) 100%);
  color: #e2e8f0;
  border: 1px solid rgba(180, 150, 230, 0.28);
  box-shadow: 0 8px 24px -8px rgba(180, 140, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.explore-btn:hover {
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(240, 230, 250, 0.14) 100%);
  border-color: rgba(180, 150, 230, 0.45);
  box-shadow: 0 12px 30px -8px rgba(180, 140, 255, 0.35);
}

html[data-theme="light"] .explore-btn {
  background: linear-gradient(135deg,
      rgba(109, 40, 217, 0.12) 0%,
      rgba(124, 58, 237, 0.06) 100%);
  color: #4c1d95;
  border: 1px solid rgba(109, 40, 217, 0.35);
  box-shadow: 0 8px 24px -8px rgba(109, 40, 217, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

html[data-theme="light"] .explore-btn:hover {
  background: linear-gradient(135deg,
      rgba(109, 40, 217, 0.2) 0%,
      rgba(124, 58, 237, 0.12) 100%);
  border-color: rgba(109, 40, 217, 0.5);
}

/* ============================================================
   8. THEME SWITCHER (fixed top-right)
   ============================================================ */
.switcher {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  margin: 0;
  border: none;
  border-radius: 99em;
  background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
  backdrop-filter: blur(8px) saturate(var(--saturation));
  -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
    inset -1.5px 2px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
    box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

.switcher__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.switcher__input {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  overflow: hidden;
  white-space: nowrap;
}

.switcher__option {
  --c: var(--c-content);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 160ms ease;
}

.switcher__option:hover {
  --c: var(--c-action);
}

.switcher__option:hover .switcher__icon {
  transform: scale(1.15);
}

.switcher__option:has(input:checked) {
  --c: var(--c-content);
  cursor: default;
}

.switcher__option:has(input:checked) .switcher__icon {
  transform: scale(1);
}

.switcher__icon {
  width: 22px;
  height: 22px;
  transition: transform 200ms cubic-bezier(0.5, 0, 0, 1);
}

/* Sliding pill */
.switcher::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 6px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--c-glass) 36%, transparent);
  z-index: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
    inset 2px 1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
    inset -1.5px -1px 0px -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
    inset -2px -6px 1px -5px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
    inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
    inset 0px -4px 1px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
    0px 3px 6px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);
  transition: transform 400ms cubic-bezier(1, 0, 0.4, 1);
}

.switcher:has(input[c-option="1"]:checked)::after {
  transform: translateX(0);
}

.switcher:has(input[c-option="2"]:checked)::after {
  transform: translateX(52px);
}

.switcher:has(input[c-option="3"]:checked)::after {
  transform: translateX(104px);
}

/* Hide switcher on mobile (nav button occupies that corner) */
@media (max-width: 767px) {
  .switcher {
    display: none;
  }
}

/* ============================================================
   9. LIGHT THEME TEXT OVERRIDES
   ============================================================ */
html[data-theme="light"] body {
  color: #2d2350;
}

html[data-theme="light"] .text-white,
html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3 {
  color: #1e1440 !important;
}

html[data-theme="light"] .text-slate-200,
html[data-theme="light"] .text-slate-300 {
  color: #3a2c60 !important;
}

html[data-theme="light"] .text-slate-400 {
  color: #5b4a85 !important;
}

html[data-theme="light"] .text-slate-500 {
  color: #6d5c9a !important;
}

html[data-theme="light"] #navName {
  color: #1e1440 !important;
}

html[data-theme="light"] .text-cyan-400 {
  color: #6d28d9 !important;
}

html[data-theme="light"] .bg-cyan-400 {
  background-color: #8f5ce8 !important;
}

/* Light theme gradient text — 1 dải tím-chàm-hồng liền mạch,
   đồng bộ với --c-action thay vì 3 tông tím rời rạc như trước */
html[data-theme="light"] .bg-gradient-to-r.from-cyan-400 {
  background-image: linear-gradient(to right, #6d28d9, #9333ea, #c026a3) !important;
}

/* Light theme form inputs */
html[data-theme="light"] input,
html[data-theme="light"] textarea {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(109, 40, 217, 0.18) !important;
  color: #1e1440 !important;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus {
  border-color: #6d28d9 !important;
  box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.3) !important;
}

/* Light theme footer */
html[data-theme="light"] footer {
  background: var(--footer-bg) !important;
  backdrop-filter: blur(16px);
  border-color: rgba(109, 40, 217, 0.16) !important;
}

/* ============================================================
   10. FOOTER IMPROVEMENTS
   ============================================================ */
footer {
  background: var(--footer-bg) !important;
  backdrop-filter: blur(16px);
  transition: background 400ms ease;
}

/* ============================================================
   11. MODAL IMPROVEMENTS
   ============================================================ */
#editorModal .glass-panel {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}

html[data-theme="light"] #editorModal {
  background: rgba(220, 210, 240, 0.6) !important;
}

html[data-theme="light"] #editorModal .glass-panel {
  background: rgba(255, 255, 255, 0.7) !important;
}

/* ============================================================
   12. TOAST IMPROVEMENTS
   ============================================================ */
html[data-theme="light"] #toast {
  background: rgba(255, 255, 255, 0.85) !important;
  border-color: rgba(150, 120, 200, 0.2) !important;
  color: #1a0e3a !important;
}

/* ============================================================
   13. PAGE TRANSITIONS — View Transitions API (macOS Premium)
   ============================================================ */

/* Enable cross-document transitions cho Chrome/Edge 126+ */
@view-transition {
  navigation: auto;
}

/* Root transition group: bật blending + kéo dài thời lượng nhóm
   để 2 pseudo-element (old/new) có thể chồng lớp mượt hơn */
::view-transition-group(root) {
  animation-duration: 900ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Trang CŨ: thu nhỏ về góc dưới phải, mờ dần, kèm blur + tối màu
   tạo cảm giác "chìm vào nền" thay vì biến mất đột ngột */
::view-transition-old(root) {
  animation: vt-old-out 900ms cubic-bezier(0.5, 0, 0.3, 1) both;
  transform-origin: bottom right;
}

/* Trang MỚI: từ góc dưới phải phóng lên với hiệu ứng "genie" macOS —
   scale + xoay nhẹ theo trục Y + blur giảm dần + glow neon bừng sáng */
::view-transition-new(root) {
  animation:
    vt-new-in 900ms cubic-bezier(0.34, 1.56, 0.44, 1) both,
    vt-new-glow 900ms cubic-bezier(0.34, 1.56, 0.44, 1) both;
  transform-origin: bottom right;
}

@keyframes vt-old-out {
  0% {
    transform: scale(1) translateY(0) rotate(0deg);
    filter: blur(0px) brightness(1);
    opacity: 1;
  }

  60% {
    filter: blur(6px) brightness(0.7);
    opacity: 0.5;
  }

  100% {
    transform: scale(0.88) translateY(14px) rotate(-1.5deg);
    filter: blur(14px) brightness(0.4);
    opacity: 0;
  }
}

@keyframes vt-new-in {
  0% {
    transform: scale(0.86) translateY(24px) rotate(1.5deg);
    filter: blur(16px) brightness(0.6);
    opacity: 0;
  }

  55% {
    filter: blur(4px) brightness(1.15);
    opacity: 0.9;
  }

  100% {
    transform: scale(1) translateY(0) rotate(0deg);
    filter: blur(0px) brightness(1);
    opacity: 1;
  }
}

/* Vệt sáng neon "quét" qua trang mới lúc vừa hiện ra,
   đồng bộ tông màu cyan-purple-fuchsia của theme */
@keyframes vt-new-glow {

  0%,
  100% {
    box-shadow: 0 0 0 rgba(6, 182, 212, 0);
  }

  45% {
    box-shadow:
      0 0 120px 30px rgba(147, 51, 234, 0.25),
      0 0 60px 10px rgba(6, 182, 212, 0.2);
  }
}

/* Tôn trọng cài đặt giảm chuyển động */
@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Fallback cho Firefox/Safari — không hỗ trợ view transitions
   Chỉ animate trang mới scale + blur vào, KHÔNG fade out trang cũ → không chớp */
@supports not (view-transition-name: none) {
  body {
    animation: fb-page-in 480ms cubic-bezier(0.34, 1.56, 0.44, 1) both;
    transform-origin: bottom right;
  }

  @keyframes fb-page-in {
    from {
      transform: scale(0.94) translateY(16px);
      filter: blur(10px);
      opacity: 0;
    }

    to {
      transform: scale(1) translateY(0);
      filter: blur(0px);
      opacity: 1;
    }
  }
}

/* ============================================================
   14. SWITCHER INLINE (dùng trong header watch/notes)
   ============================================================ */
.switcher.switcher--inline {
  position: static;
  top: auto;
  right: auto;
  z-index: 1;
}

/* Trên mobile vẫn ẩn switcher cho gọn header */
@media (max-width: 767px) {
  .switcher.switcher--inline {
    display: none;
  }
}

/* ============================================================
   15. PREMIUM UPGRADE — Global Polish (an toàn, chỉ cộng thêm)
   Áp dụng cho mọi trang dùng chung file này: Portfolio, Dashboard,
   Notes, Tasks, Watch — không sửa/xoá rule cũ, chỉ tăng chiều sâu,
   thêm glow tinh tế và easing mượt hơn.
   ============================================================ */

:root,
html[data-theme="dark"] {
  --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --premium-ease-spring: cubic-bezier(0.16, 1.3, 0.3, 1);
  --accent-glow-1: rgba(6, 214, 240, 0.35);
  /* cyan — khớp --c-action */
  --accent-glow-2: rgba(147, 51, 234, 0.3);
  /* purple — bổ trợ chiều sâu */
  --accent-glow-3: rgba(217, 70, 239, 0.22);
  /* fuchsia — điểm nhấn ấm */
  --premium-border-sheen: rgba(255, 255, 255, 0.35);
}

html[data-theme="light"] {
  --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --premium-ease-spring: cubic-bezier(0.16, 1.3, 0.3, 1);
  --accent-glow-1: rgba(109, 40, 217, 0.24);
  /* violet — khớp --c-action mới */
  --accent-glow-2: rgba(147, 51, 234, 0.18);
  --accent-glow-3: rgba(192, 38, 163, 0.14);
  --premium-border-sheen: rgba(255, 255, 255, 0.65);
}

html[data-theme="dim"] {
  --premium-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --premium-ease-spring: cubic-bezier(0.16, 1.3, 0.3, 1);
  --accent-glow-1: rgba(255, 79, 174, 0.34);
  /* magenta — khớp --c-action */
  --accent-glow-2: rgba(255, 217, 236, 0.2);
  /* hồng-vàng ấm, thay cyan lạc tông cũ */
  --accent-glow-3: rgba(220, 90, 160, 0.2);
  --premium-border-sheen: rgba(255, 217, 236, 0.4);
}

/* ---------- 15.1 Glass panel/nav: thêm chiều sâu + viền sáng ---------- */
.glass-panel,
.glass-nav {
  position: relative;
  box-shadow:
    0 10px 40px -10px var(--glass-shadow),
    inset 0 1px 0 0 var(--glass-inset),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 30px 60px -25px rgba(0, 0, 0, 0.45);
  transition:
    background 400ms var(--premium-ease),
    border-color 400ms var(--premium-ease),
    box-shadow 500ms var(--premium-ease),
    transform 500ms var(--premium-ease);
}

/* Viền sáng mỏng chạy quanh mép panel, rất tinh tế, không gây rối mắt */
.glass-panel::before,
.glass-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      var(--premium-border-sheen) 0%,
      transparent 30%,
      transparent 70%,
      var(--premium-border-sheen) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 500ms var(--premium-ease);
}

.glass-panel:hover::before,
.glass-nav:hover::before {
  opacity: 0.5;
}

/* ---------- 15.2 Card (project/notes/task item...) — nâng cấp hover ---------- */
.glass-card {
  position: relative;
  transition:
    transform 550ms var(--premium-ease-spring),
    box-shadow 550ms var(--premium-ease),
    border-color 400ms var(--premium-ease);
  will-change: transform;
}

.glass-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow:
    0 25px 50px -20px rgba(0, 0, 0, 0.5),
    0 0 40px -8px var(--accent-glow-1),
    0 0 70px -20px var(--accent-glow-2);
}

/* Sheen quét nhẹ qua card lúc hover — 1 lần duy nhất, không lặp gây rối */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg,
      transparent 30%,
      rgba(255, 255, 255, 0.06) 48%,
      rgba(255, 255, 255, 0.1) 50%,
      rgba(255, 255, 255, 0.06) 52%,
      transparent 70%);
  background-size: 250% 250%;
  background-position: -60% -60%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms ease;
}

.glass-card:hover::after {
  opacity: 1;
  background-position: 60% 60%;
  transition: background-position 900ms var(--premium-ease), opacity 300ms ease;
}

/* ---------- 15.3 Nút bấm (.spring-btn) — glow + sheen cao cấp ---------- */
.spring-btn {
  position: relative;
  overflow: hidden;
  transition:
    transform 450ms var(--premium-ease-spring),
    box-shadow 450ms var(--premium-ease),
    background-color 400ms ease,
    filter 300ms ease;
}

.spring-btn:hover {
  transform: scale(1.055) translateY(-2px);
  box-shadow:
    0 15px 30px -10px rgba(0, 0, 0, 0.5),
    0 0 24px -4px var(--accent-glow-1);
  filter: brightness(1.06);
}

.spring-btn:active {
  transform: scale(0.94);
  filter: brightness(0.96);
}

/* Fix: khung avatar (trong #hero) cũng dùng chung class .spring-btn,
   nhưng cần overflow VISIBLE để lớp hào quang blur tràn ra ngoài viền
   tròn không bị cắt cụt. Chỉ khung avatar được loại trừ, các nút bấm
   khác vẫn giữ overflow:hidden để hiệu ứng sheen không bị tràn lem. */
#hero .spring-btn {
  overflow: visible;
  border-radius: 9999px;
}

/* Vệt sáng lướt qua nút lúc hover lần đầu — subtle, không loè loẹt */
.spring-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(120deg,
      transparent 0%,
      rgba(255, 255, 255, 0.18) 50%,
      transparent 100%);
  transform: skewX(-20deg);
  transition: left 650ms var(--premium-ease);
  pointer-events: none;
}

.spring-btn:hover::before {
  left: 120%;
}

/* Avatar không cần hiệu ứng vệt sáng lướt (sheen) vì đã có hào quang
   blur riêng — tắt để tránh lộ thanh sáng hình chữ nhật ra ngoài viền tròn */
#hero .spring-btn::before {
  display: none;
}

/* ---------- 15.4 Explore button — glow đậm hơn 1 chút, vẫn tinh tế ---------- */
.explore-btn {
  transition:
    background 450ms var(--premium-ease),
    box-shadow 450ms var(--premium-ease),
    transform 450ms var(--premium-ease-spring);
}

.explore-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 36px -10px rgba(180, 140, 255, 0.5),
    0 0 30px -6px var(--accent-glow-2);
}

/* ---------- 15.5 Entrance animation — easing mượt hơn, ít "giật" ---------- */
.animate-spring {
  animation-timing-function: var(--premium-ease-spring);
}

/* ---------- 15.6 Scrollbar — gradient tinh tế thay vì màu phẳng ---------- */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent-glow-1), var(--accent-glow-2));
  transition: background 300ms ease;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--accent-glow-2), var(--accent-glow-3));
}

/* ---------- 15.7 Focus state cao cấp cho input/textarea/select dùng chung ---------- */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  box-shadow:
    0 0 0 1px var(--accent-glow-1),
    0 0 16px -2px var(--accent-glow-1);
  transition: box-shadow 300ms var(--premium-ease);
}

/* ---------- 15.8 Tôn trọng người dùng giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {

  .glass-card,
  .spring-btn,
  .glass-panel,
  .glass-nav,
  .explore-btn {
    transition: none !important;
  }

  .glass-card::after,
  .spring-btn::before {
    display: none !important;
  }
}

/* ============================================================
   16. PROJECT CARD — HOVER SLIDE-UP ACTIONS
   ============================================================ */
.proj-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.75rem 1.75rem 5rem;
  /* bottom padding nhường chỗ cho actions */
  min-height: 260px;
}

/* Nội dung card: mờ nhẹ mặc định, lift lên khi hover */
.proj-content {
  position: relative;
  z-index: 1;
  opacity: 0.72;
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.proj-card:hover .proj-content {
  opacity: 1;
  transform: translateY(-10px);
}

/* Danh sách nút actions */
.proj-actions {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  padding: 0 1.75rem;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}

/* Mỗi nút ẩn và dịch xuống mặc định */
.proj-actions li {
  transform: translateY(28px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s ease, opacity 0.45s ease;
  transition-delay: calc(0.08s * var(--i, 1));
}

/* Khi hover card: slide lên */
.proj-card:hover .proj-actions li {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Style chung cho từng nút */
.proj-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease,
    border-color 0.2s ease;
}

.proj-action-btn:hover {
  background: color-mix(in srgb, var(--c-action) 18%, transparent);
  border-color: color-mix(in srgb, var(--c-action) 40%, transparent);
  color: var(--c-action);
  transform: scale(1.06);
}

.proj-action-btn:active {
  transform: scale(0.96);
}

/* Li chứa nút Xóa — đẩy hẳn sang phải */
.proj-actions li:last-child {
  margin-left: auto;
}

/* Nút Xóa — tông đỏ */
.proj-action-delete {
  border-color: rgba(239, 68, 68, 0.18);
  color: rgba(248, 113, 113, 0.7);
}

.proj-action-delete:hover {
  background: rgba(239, 68, 68, 0.15) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

/* ============================================================
   16B. WATCHLIST & NOTES CARDS — HOVER SLIDE-UP ACTIONS
   ============================================================ */

/* --- Watchlist Cards --- */
.watch-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.watch-card .watch-content {
  position: relative;
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.watch-card:hover .watch-content {
  transform: translateY(-2px);
}

.watch-actions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.watch-actions li {
  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
  transition-delay: calc(0.06s * var(--i, 1));
}

.watch-card:hover .watch-actions li {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* --- Note Cards --- */
.note-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.note-card .note-content {
  position: relative;
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.note-card:hover .note-content {
  transform: translateY(-2px);
}

/* Checkbox chọn ở góc trên trái: ẩn khi không hover (trừ khi đã chọn) */
.note-select-btn {
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.note-card:hover .note-select-btn,
.note-card.is-selected .note-select-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Danh sách nút action ở footer note: ẩn và slide up khi hover */
.note-actions {
  list-style: none;
  margin: 0;
  padding: 0;
}

.note-actions li {
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.35s ease;
  transition-delay: calc(0.05s * var(--i, 1));
}

.note-card:hover .note-actions li {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Hỗ trợ thiết bị cảm ứng / touch */
@media (hover: none) {

  .watch-actions li,
  .note-actions li,
  .note-select-btn,
  .proj-actions li {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {

  .proj-content,
  .proj-actions li,
  .watch-content,
  .watch-actions li,
  .note-content,
  .note-actions li,
  .note-select-btn {
    transition: none !important;
  }
}

/* ============================================================
   17. GLASS-BTN — Nút glass dùng chung
   ============================================================ */
.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0);
  color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: background 220ms ease,
    border-color 220ms ease,
    color 180ms ease,
    transform 150ms ease,
    box-shadow 220ms ease;
}

.glass-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.glass-btn:active {
  transform: scale(0.96) translateY(0);
  transition-duration: 80ms;
}

/* Modifier: nhỏ hơn — dùng cho nút +1/-1 */
.glass-btn--sm {
  padding: 5px 12px;
  font-size: 0.75rem;
  border-radius: 9px;
}

/* Modifier: accent color theo theme */
.glass-btn--accent {
  background: color-mix(in srgb, var(--c-action) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-action) 35%, transparent);
  color: var(--c-action);
}

.glass-btn--accent:hover {
  background: color-mix(in srgb, var(--c-action) 22%, transparent);
  border-color: color-mix(in srgb, var(--c-action) 55%, transparent);
  color: var(--c-action);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c-action) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Modifier: danger/xóa */
.glass-btn--danger {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.2);
  color: rgba(248, 113, 113, 0.8);
}

.glass-btn--danger:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.4) !important;
  color: #f87171 !important;
}

/* select dùng glass-btn cần thêm appearance */
select.glass-btn {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

select.glass-btn option {
  background: #1e1e2e;
  color: #e2e8f0;
}

/* ============================================================
   18. MODAL EDITOR — dọn viền sheen + scrollbar gọn
   ============================================================ */
#modalContent::before,
#editorModal .glass-panel::before,
#modal .glass-panel::before {
  display: none;
}

#modalContent::-webkit-scrollbar,
#modal .glass-panel::-webkit-scrollbar {
  width: 6px;
}

#modalContent::-webkit-scrollbar-track,
#modal .glass-panel::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

#modalContent::-webkit-scrollbar-thumb,
#modal .glass-panel::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 99px;
}

#modalContent::-webkit-scrollbar-thumb:hover,
#modal .glass-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.45);
}

#modalContent,
#modal .glass-panel {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.25) transparent;
}

/* ============================================================
   19. HERO PANEL — reveal nút theo thứ tự stagger
   Thứ tự hiện: Khám phá (0ms) → GitHub (80ms) → Chỉnh sửa (160ms)
   Thứ tự ẩn: ngược lại (Chỉnh sửa xuống trước)
   ============================================================ */

.hero-panel {
  position: relative;
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.hero-panel:hover {
  border-color: rgba(6, 214, 240, 0.35);
  box-shadow:
    0 10px 40px -10px var(--glass-shadow),
    inset 0 1px 0 0 var(--glass-inset),
    0 0 40px -10px rgba(6, 214, 240, 0.2);
}

/* --- Nút Chỉnh sửa góc trên phải --- */
.hero-edit-btn {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 5;
  opacity: 0;
  transform: translateY(28px);
  pointer-events: none;
  transition:
    transform 0.45s ease var(--r-delay, 0ms),
    opacity 0.45s ease var(--r-delay, 0ms),
    background 200ms ease;
}

.hero-panel:hover .hero-edit-btn {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-edit-btn.flex {
  display: flex;
}

/* --- Wrapper 2 nút CTA --- */
.hero-actions {
  pointer-events: none;
}

.hero-panel:hover .hero-actions {
  pointer-events: auto;
}

.hero-actions>a {
  opacity: 0;
  transform: translateY(28px);
  transition:
    transform 0.45s ease var(--r-delay, 0ms),
    opacity 0.45s ease var(--r-delay, 0ms);
}

.hero-panel:hover .hero-actions>a {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Delay stagger — 2 chiều
   - Khi HIỆN (hover): xuôi — Khám phá → GitHub → Chỉnh sửa
   - Khi ẨN (rời chuột): ngược — Chỉnh sửa → GitHub → Khám phá
   ------------------------------------------------------------ */

/* Default (đang ẩn): stagger ngược */
.hero-edit-btn {
  --r-delay: 0ms;
}

.hero-actions>a:nth-child(1) {
  --r-delay: 160ms;
}

/* Khám phá */
.hero-actions>a:nth-child(2) {
  --r-delay: 80ms;
}

/* GitHub */

/* Hover (đang hiện): stagger xuôi */
.hero-panel:hover .hero-edit-btn {
  --r-delay: 160ms;
}

/* Chỉnh sửa */
.hero-panel:hover .hero-actions>a:nth-child(1) {
  --r-delay: 0ms;
}

/* Khám phá */
.hero-panel:hover .hero-actions>a:nth-child(2) {
  --r-delay: 80ms;
}

/* GitHub */

/* --- Mobile: hover khó → hiện luôn --- */
@media (hover: none) {

  .hero-edit-btn,
  .hero-actions>a {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* --- Giảm chuyển động --- */
@media (prefers-reduced-motion: reduce) {

  .hero-edit-btn,
  .hero-actions>a {
    transition: opacity 200ms ease;
    transform: none;
  }
}

/* Hiển thị sao đánh giá */
.rating-stars {
  color: #fbbf24; /* amber-400 */
  letter-spacing: 1px;
}

/* ============================================================
   PERFORMANCE — Watch/Notes/Quotes với nhiều card
   Chỉ tắt backdrop-filter (thủ phạm lag), giữ animation + hover
   ============================================================ */

/* 1. Bỏ backdrop-filter trên card — đây mới là thứ gây lag */
.watch-card.glass-card,
.note-card.glass-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--card-bg);
}

/* 2. Card ngoài viewport bị skip render → load nhanh */
#watchGrid > .watch-card,
#notesGrid > .note-card,
#quotesGrid > .note-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 140px;
}

/* 3. Entrance animation mượt, stagger ngắn (không quá 400ms cho 20 card) */
.watch-card.animate-spring,
.note-card.animate-spring {
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* 4. Hover giống proj-card: lift nhẹ + sheen chạy qua */
.watch-card.glass-card:hover,
.note-card.glass-card:hover {
  transform: translateY(-6px) scale(1.012);
}