/* ============================================================
   FV-UI — 100% Match design-kit.html
   Apple-style spatial 3D, glass, gradient tactile
   ============================================================ */

/* ---- TOKENS (exact from design-kit.html) ---- */
:root {
  --bg-body: #EAEFF3;
  --bg-card: linear-gradient(145deg, rgba(255,255,255,0.75) 0%, rgba(243,246,249,0.45) 100%);
  --bg-item: linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(245,247,250,0.7) 100%);
  --text-primary: #1D1D1F;
  --text-secondary: #6E6E73;
  --text-tertiary: #86868B;

  --accent: #0071E3;
  --accent-gradient: linear-gradient(180deg, #3897FF 0%, #0071E3 100%);
  --accent-soft: rgba(0,113,227,0.08);

  --success-gradient: linear-gradient(180deg, #4DE077 0%, #24B049 100%);
  --warning-gradient: linear-gradient(180deg, #FFB340 0%, #E68A00 100%);
  --danger-gradient: linear-gradient(180deg, #FF6961 0%, #D7261E 100%);

  --color-success: #24B049;
  --color-warning: #E68A00;
  --color-danger: #D7261E;
  --color-star: #F5A623;

  --border-outer: rgba(0,0,0,0.06);
  --border-inner: rgba(255,255,255,0.9);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --shadow-spatial-card:
    0 1px 2px rgba(0,0,0,0.02),
    0 12px 30px rgba(0,0,0,0.06),
    0 25px 60px rgba(0,0,0,0.08),
    inset 0 1px 1px var(--border-inner),
    inset 0 -1px 2px rgba(0,0,0,0.03);

  --shadow-spatial-item:
    0 4px 10px rgba(0,0,0,0.03),
    0 1px 2px rgba(0,0,0,0.02),
    inset 0 1px 0px #ffffff;

  --shadow-spatial-btn:
    0 4px 12px rgba(0,113,227,0.2),
    inset 0 1.5px 1px rgba(255,255,255,0.4),
    inset 0 -1.5px 1px rgba(0,0,0,0.15);

  --shadow-spatial-btn-secondary:
    0 4px 10px rgba(0,0,0,0.04),
    0 1px 2px rgba(0,0,0,0.03),
    inset 0 1px 1px rgba(255,255,255,0.8),
    inset 0 -1px 1px rgba(0,0,0,0.05);

  --shadow-spatial-btn-danger:
    0 4px 12px rgba(215,38,30,0.25),
    inset 0 1.5px 1px rgba(255,255,255,0.4),
    inset 0 -1.5px 1px rgba(0,0,0,0.15);

  --shadow-spatial-btn-success:
    0 4px 12px rgba(36,176,73,0.25),
    inset 0 1.5px 1px rgba(255,255,255,0.4),
    inset 0 -1.5px 1px rgba(0,0,0,0.15);

  --shadow-spatial-btn-warning:
    0 4px 12px rgba(230,138,0,0.25),
    inset 0 1.5px 1px rgba(255,255,255,0.4),
    inset 0 -1.5px 1px rgba(0,0,0,0.15);

  --shadow-inset-pod:
    inset 0 2px 4px rgba(0,0,0,0.06),
    0 1px 1px rgba(255,255,255,0.8);
}

[data-fv-theme="dark"] {
  color-scheme: dark;
  --bg-body: #0E0E10;
  --bg-card: linear-gradient(145deg, rgba(32,32,36,0.75) 0%, rgba(22,22,24,0.5) 100%);
  --bg-item: linear-gradient(180deg, rgba(42,42,46,0.6) 0%, rgba(30,30,34,0.5) 100%);
  --text-primary: #F5F5F7;
  --text-secondary: #A1A1A6;
  --text-tertiary: #6E6E73;

  --accent-gradient: linear-gradient(180deg, #54A6FF 0%, #0071E3 100%);

  --border-outer: rgba(0,0,0,0.4);
  --border-inner: rgba(255,255,255,0.12);

  --shadow-spatial-card:
    0 20px 50px rgba(0,0,0,0.5),
    0 4px 12px rgba(0,0,0,0.3),
    inset 0 1px 1px var(--border-inner),
    inset 0 -1px 2px rgba(0,0,0,0.5);

  --shadow-spatial-item:
    0 4px 10px rgba(0,0,0,0.2),
    inset 0 1px 0px rgba(255,255,255,0.05);

  --shadow-spatial-btn:
    0 6px 16px rgba(0,113,227,0.3),
    inset 0 1.5px 1px rgba(255,255,255,0.3),
    inset 0 -1.5px 1px rgba(0,0,0,0.3);

  --shadow-spatial-btn-secondary:
    0 4px 10px rgba(0,0,0,0.2),
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 1px rgba(0,0,0,0.3);

  --shadow-spatial-btn-danger:
    0 6px 16px rgba(215,38,30,0.35),
    inset 0 1.5px 1px rgba(255,255,255,0.3),
    inset 0 -1.5px 1px rgba(0,0,0,0.3);

  --shadow-spatial-btn-success:
    0 6px 16px rgba(36,176,73,0.35),
    inset 0 1.5px 1px rgba(255,255,255,0.3),
    inset 0 -1.5px 1px rgba(0,0,0,0.3);

  --shadow-spatial-btn-warning:
    0 6px 16px rgba(230,138,0,0.35),
    inset 0 1.5px 1px rgba(255,255,255,0.3),
    inset 0 -1.5px 1px rgba(0,0,0,0.3);

  --shadow-inset-pod:
    inset 0 2px 4px rgba(0,0,0,0.3),
    0 1px 1px rgba(255,255,255,0.02);
}

/* ---- COLOR THEMES (must come AFTER :root and dark to override) ---- */
[data-fv-accent="green"] {
  --accent: #24B049;
  --accent-gradient: linear-gradient(180deg, #4DE077 0%, #24B049 100%);
  --accent-soft: rgba(36,176,73,0.08);
  --shadow-spatial-btn: 0 4px 12px rgba(36,176,73,0.25), inset 0 1.5px 1px rgba(255,255,255,0.4), inset 0 -1.5px 1px rgba(0,0,0,0.15);
}
[data-fv-accent="purple"] {
  --accent: #8B5CF6;
  --accent-gradient: linear-gradient(180deg, #A78BFA 0%, #7C3AED 100%);
  --accent-soft: rgba(139,92,246,0.08);
  --shadow-spatial-btn: 0 4px 12px rgba(139,92,246,0.25), inset 0 1.5px 1px rgba(255,255,255,0.4), inset 0 -1.5px 1px rgba(0,0,0,0.15);
}
[data-fv-accent="orange"] {
  --accent: #E68A00;
  --accent-gradient: linear-gradient(180deg, #FFB340 0%, #E68A00 100%);
  --accent-soft: rgba(230,138,0,0.08);
  --shadow-spatial-btn: 0 4px 12px rgba(230,138,0,0.25), inset 0 1.5px 1px rgba(255,255,255,0.4), inset 0 -1.5px 1px rgba(0,0,0,0.15);
}
[data-fv-accent="red"] {
  --accent: #D7261E;
  --accent-gradient: linear-gradient(180deg, #FF6961 0%, #D7261E 100%);
  --accent-soft: rgba(215,38,30,0.08);
  --shadow-spatial-btn: 0 4px 12px rgba(215,38,30,0.25), inset 0 1.5px 1px rgba(255,255,255,0.4), inset 0 -1.5px 1px rgba(0,0,0,0.15);
}
[data-fv-accent="pink"] {
  --accent: #EC4899;
  --accent-gradient: linear-gradient(180deg, #F472B6 0%, #DB2777 100%);
  --accent-soft: rgba(236,72,153,0.08);
  --shadow-spatial-btn: 0 4px 12px rgba(236,72,153,0.25), inset 0 1.5px 1px rgba(255,255,255,0.4), inset 0 -1.5px 1px rgba(0,0,0,0.15);
}
[data-fv-accent="teal"] {
  --accent: #0D9488;
  --accent-gradient: linear-gradient(180deg, #2DD4BF 0%, #0D9488 100%);
  --accent-soft: rgba(13,148,136,0.08);
  --shadow-spatial-btn: 0 4px 12px rgba(13,148,136,0.25), inset 0 1.5px 1px rgba(255,255,255,0.4), inset 0 -1.5px 1px rgba(0,0,0,0.15);
}
[data-fv-accent="green"][data-fv-theme="dark"] {
  --accent-gradient: linear-gradient(180deg, #6EE7A0 0%, #24B049 100%);
  --shadow-spatial-btn: 0 6px 16px rgba(36,176,73,0.35), inset 0 1.5px 1px rgba(255,255,255,0.3), inset 0 -1.5px 1px rgba(0,0,0,0.3);
}
[data-fv-accent="purple"][data-fv-theme="dark"] {
  --accent-gradient: linear-gradient(180deg, #C4B5FD 0%, #7C3AED 100%);
  --shadow-spatial-btn: 0 6px 16px rgba(139,92,246,0.35), inset 0 1.5px 1px rgba(255,255,255,0.3), inset 0 -1.5px 1px rgba(0,0,0,0.3);
}
[data-fv-accent="orange"][data-fv-theme="dark"] {
  --accent-gradient: linear-gradient(180deg, #FFD080 0%, #E68A00 100%);
  --shadow-spatial-btn: 0 6px 16px rgba(230,138,0,0.35), inset 0 1.5px 1px rgba(255,255,255,0.3), inset 0 -1.5px 1px rgba(0,0,0,0.3);
}
[data-fv-accent="red"][data-fv-theme="dark"] {
  --accent-gradient: linear-gradient(180deg, #FF9089 0%, #D7261E 100%);
  --shadow-spatial-btn: 0 6px 16px rgba(215,38,30,0.35), inset 0 1.5px 1px rgba(255,255,255,0.3), inset 0 -1.5px 1px rgba(0,0,0,0.3);
}
[data-fv-accent="pink"][data-fv-theme="dark"] {
  --accent-gradient: linear-gradient(180deg, #F9A8D4 0%, #DB2777 100%);
  --shadow-spatial-btn: 0 6px 16px rgba(236,72,153,0.35), inset 0 1.5px 1px rgba(255,255,255,0.3), inset 0 -1.5px 1px rgba(0,0,0,0.3);
}
[data-fv-accent="teal"][data-fv-theme="dark"] {
  --accent-gradient: linear-gradient(180deg, #5EEAD4 0%, #0D9488 100%);
  --shadow-spatial-btn: 0 6px 16px rgba(13,148,136,0.35), inset 0 1.5px 1px rgba(255,255,255,0.3), inset 0 -1.5px 1px rgba(0,0,0,0.3);
}

/* ---- RESET ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-body);
  color: var(--text-primary);
  transition: background-color 0.5s cubic-bezier(0.25,1,0.5,1), color 0.5s cubic-bezier(0.25,1,0.5,1);
}

/* ---- GLOBAL CUSTOM SCROLLBAR ---- */
.fv-scroll::-webkit-scrollbar,
textarea.fv-input::-webkit-scrollbar,
.fv-modal__body::-webkit-scrollbar,
.fv-drawer__body::-webkit-scrollbar,
.fv-sheet__body::-webkit-scrollbar,
.fv-combobox__dropdown::-webkit-scrollbar,
.fv-command__list::-webkit-scrollbar,
.fv-autocomplete__dropdown::-webkit-scrollbar,
.fv-spotlight__results::-webkit-scrollbar,
.fv-table-wrap::-webkit-scrollbar,
.fv-resizable__panel::-webkit-scrollbar,
.fv-sidebar__content::-webkit-scrollbar { width: 5px; }
.fv-scroll::-webkit-scrollbar-track,
textarea.fv-input::-webkit-scrollbar-track,
.fv-modal__body::-webkit-scrollbar-track,
.fv-drawer__body::-webkit-scrollbar-track,
.fv-sheet__body::-webkit-scrollbar-track,
.fv-combobox__dropdown::-webkit-scrollbar-track,
.fv-command__list::-webkit-scrollbar-track,
.fv-autocomplete__dropdown::-webkit-scrollbar-track,
.fv-spotlight__results::-webkit-scrollbar-track,
.fv-table-wrap::-webkit-scrollbar-track,
.fv-resizable__panel::-webkit-scrollbar-track,
.fv-sidebar__content::-webkit-scrollbar-track { background: transparent; }
.fv-scroll::-webkit-scrollbar-thumb,
textarea.fv-input::-webkit-scrollbar-thumb,
.fv-modal__body::-webkit-scrollbar-thumb,
.fv-drawer__body::-webkit-scrollbar-thumb,
.fv-sheet__body::-webkit-scrollbar-thumb,
.fv-combobox__dropdown::-webkit-scrollbar-thumb,
.fv-command__list::-webkit-scrollbar-thumb,
.fv-autocomplete__dropdown::-webkit-scrollbar-thumb,
.fv-spotlight__results::-webkit-scrollbar-thumb,
.fv-table-wrap::-webkit-scrollbar-thumb,
.fv-resizable__panel::-webkit-scrollbar-thumb,
.fv-sidebar__content::-webkit-scrollbar-thumb { background: var(--border-outer); border-radius: 999px; }
.fv-scroll::-webkit-scrollbar-thumb:hover,
textarea.fv-input::-webkit-scrollbar-thumb:hover,
.fv-modal__body::-webkit-scrollbar-thumb:hover,
.fv-drawer__body::-webkit-scrollbar-thumb:hover,
.fv-sheet__body::-webkit-scrollbar-thumb:hover,
.fv-combobox__dropdown::-webkit-scrollbar-thumb:hover,
.fv-command__list::-webkit-scrollbar-thumb:hover,
.fv-autocomplete__dropdown::-webkit-scrollbar-thumb:hover,
.fv-spotlight__results::-webkit-scrollbar-thumb:hover,
.fv-table-wrap::-webkit-scrollbar-thumb:hover,
.fv-resizable__panel::-webkit-scrollbar-thumb:hover,
.fv-sidebar__content::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
/* Firefox */
.fv-scroll, textarea.fv-input, .fv-modal__body, .fv-drawer__body, .fv-sheet__body,
.fv-combobox__dropdown, .fv-command__list, .fv-autocomplete__dropdown,
.fv-spotlight__results, .fv-table-wrap, .fv-resizable__panel,
.fv-sidebar__content { scrollbar-width: thin; scrollbar-color: var(--border-outer) transparent; }

/* ---- OPTION STYLING ---- */
select.fv-native option,
select.fv-ns-trigger option {
  background: var(--bg-body); color: var(--text-primary);
  padding: 8px 12px; font-size: 14px;
}
[data-fv-theme="dark"] select.fv-native option,
[data-fv-theme="dark"] select.fv-ns-trigger option {
  background: #1a1a1e; color: #f5f5f7;
}

/* ---- TEXTAREA RESIZE ---- */
textarea.fv-input { resize: vertical; }

/* ============================================================
   CARD — glass morphism, spatial shadow
   ============================================================ */
.fv-card {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 28px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25,1,0.5,1), box-shadow 0.4s cubic-bezier(0.25,1,0.5,1);
}
.fv-card:hover { transform: translateY(-2px); }
.fv-card--no-hover:hover { transform: none; }

/* ============================================================
   BUTTONS — exact from design-kit.html
   ============================================================ */
.fv-btn {
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-xl);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25,1,0.5,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  font-family: inherit;
  gap: 8px;
  white-space: nowrap;
}
.fv-btn:active { transform: scale(0.97) translateY(1px); }
.fv-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* Primary — gradient + spatial shadow */
.fv-btn--primary {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}
.fv-btn--primary:hover { filter: brightness(1.05); box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-btn); }
.fv-btn--primary:hover i { animation: btnBounce 0.4s ease; }
@keyframes btnBounce {
  0%,100% { transform: translateX(0); }
  40% { transform: translateX(3px); }
  70% { transform: translateX(-1px); }
}

/* Ghost / Secondary — glass */
.fv-btn--ghost,
.fv-btn--secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(242,244,247,0.85) 100%);
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-btn-secondary);
  border: 1px solid rgba(0,0,0,0.04);
  border-top: 1px solid rgba(255,255,255,0.6);
}
[data-fv-theme="dark"] .fv-btn--ghost,
[data-fv-theme="dark"] .fv-btn--secondary {
  background: linear-gradient(180deg, rgba(54,54,58,0.85) 0%, rgba(38,38,42,0.85) 100%);
  color: var(--text-primary);
  border: 1px solid rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* Danger */
.fv-btn--danger {
  background: var(--danger-gradient);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn-danger);
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

/* Sizes */
.fv-btn--xs { padding: 4px 8px; font-size: 12px; border-radius: var(--radius-sm); }
.fv-btn--sm { padding: 7px 14px; font-size: 13px; }
.fv-btn--lg { padding: 14px 28px; font-size: 17px; }
.fv-btn--icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; }
.fv-btn--icon.fv-btn--sm { width: 28px; height: 28px; font-size: 13px; }
.fv-btn--icon.fv-btn--lg { width: 44px; height: 44px; font-size: 18px; }
.fv-btn--block { width: 100%; }

/* Danger ghost */
.fv-btn--danger-ghost {
  background: transparent; color: var(--color-danger);
  border: none; box-shadow: none;
}
.fv-btn--danger-ghost:hover {
  background: rgba(215,38,30,0.08); color: var(--color-danger);
}

/* ============================================================
   BADGES — gradient + spatial shadow
   ============================================================ */
.fv-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
  gap: 6px;
}
.fv-badge--accent { background: var(--accent-gradient); color: #fff; }
.fv-badge--success { background: var(--success-gradient); color: #fff; }
.fv-badge--warning { background: var(--warning-gradient); color: #fff; }
.fv-badge--danger { background: var(--danger-gradient); color: #fff; }
.fv-badge--accent-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
.fv-badge--success-outline { background: transparent; color: var(--color-success); border: 1.5px solid var(--color-success); box-shadow: none; }
.fv-badge--warning-outline { background: transparent; color: var(--color-warning); border: 1.5px solid var(--color-warning); box-shadow: none; }
.fv-badge--danger-outline { background: transparent; color: var(--color-danger); border: 1.5px solid var(--color-danger); box-shadow: none; }
.fv-badge--count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.fv-badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   FOLDER ICON — signature element
   ============================================================ */
.fv-folder { position: relative; width: 84px; height: 66px; flex-shrink: 0; }
.fv-folder__back {
  position: absolute; inset: 0; border-radius: 12px;
  background: linear-gradient(160deg, #3a3a3c, #17171a);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.14), 0 6px 14px rgba(0,0,0,0.2);
}
.fv-folder__sheet {
  position: absolute; top: -8px; left: 16px; width: 40px; height: 46px;
  background: linear-gradient(180deg, #fdfdfd, #e9e9ec);
  border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.fv-folder__sheet:nth-child(2) { left: 22px; top: -4px; transform: rotate(-3deg); }
.fv-folder__sheet:nth-child(3) { left: 28px; top: 0; transform: rotate(-6deg); }
.fv-folder__front {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(70,70,74,0.55), rgba(20,20,22,0.85));
  backdrop-filter: blur(2px);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.15);
}

/* Folder color variants */
.fv-folder--blue .fv-folder__back { background: linear-gradient(160deg, #4FA6FB, #0040C1); }
.fv-folder--blue .fv-folder__front { background: linear-gradient(180deg, rgba(180,215,255,0.35), rgba(0,40,120,0.75)); }
.fv-folder--coral .fv-folder__back { background: linear-gradient(160deg, #FF6B57, #B0182A); }
.fv-folder--coral .fv-folder__front { background: linear-gradient(180deg, rgba(255,200,190,0.35), rgba(110,10,20,0.75)); }

/* ============================================================
   FOLDER CARD — project cards
   ============================================================ */
.fv-folder-card {
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1);
  cursor: pointer;
}
.fv-folder-card:hover { transform: translateY(-3px); }
.fv-folder-card .fv-folder { margin-bottom: 18px; }
.fv-folder-card h4 { font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.fv-folder-card p { font-size: 12px; color: var(--text-tertiary); margin: 0; }

/* ============================================================
   FILE BROWSER
   ============================================================ */
.fv-browser { display: grid; grid-template-columns: 220px 1fr; gap: 0; overflow: hidden; padding: 0; }
.fv-browser__side { padding: 20px 14px; border-right: 1px solid var(--border-outer); }
.fv-browser__search-wrap { position: relative; margin-bottom: 16px; }
.fv-browser__search-wrap i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--text-tertiary); pointer-events: none; }
.fv-browser__search-wrap .fv-browser__search { padding-left: 30px; }
.fv-browser__search {
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-primary);
  padding: 8px 12px;
  border: none;
  width: 100%;
  outline: none;
  font-family: inherit;
}
.fv-browser__search::placeholder { color: var(--text-tertiary); }
.fv-browser__main { padding: 24px; }
.fv-browser__breadcrumb { font-size: 13px; color: var(--text-tertiary); margin-bottom: 18px; }
.fv-browser__breadcrumb b { color: var(--text-primary); font-weight: 600; }

/* Tree items */
.fv-tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-secondary);
  margin-bottom: 3px;
  cursor: pointer;
  transition: background 0.15s;
}
.fv-tree-item:hover { background: var(--accent-soft); }
.fv-tree-item.active {
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow-spatial-btn);
}
.fv-tree-item i { width: 18px; text-align: center; flex-shrink: 0; font-size: 14px; }
.fv-tree-item span { flex: 1; }
.fv-tree-item .count {
  font-size: 11px;
  background: var(--bg-item);
  color: var(--text-tertiary);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-spatial-item);
  flex-shrink: 0;
}
.fv-tree-item.active .count {
  background: rgba(255,255,255,0.25);
  color: #fff;
  box-shadow: none;
}
.fv-tree-indent { padding-left: 30px; }

/* File row */
.fv-file-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  margin-bottom: 6px;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
}
.fv-file-row:hover { transform: translateY(-1px); border-color: var(--accent-soft); box-shadow: var(--shadow-spatial-card); }
.fv-file-name { display: flex; align-items: center; gap: 10px; color: var(--text-primary); font-weight: 500; flex: 1; min-width: 0; }
.fv-file-name i { font-size: 16px; flex-shrink: 0; }
.fv-file-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-file-name .dot { width: 8px; height: 8px; border-radius: 2px; background: var(--accent-gradient); flex-shrink: 0; }
.fv-file-meta { display: flex; align-items: center; gap: 8px; color: var(--text-tertiary); font-size: 12px; flex-shrink: 0; margin-left: 16px; }

/* ============================================================
   DARK PANEL — version/checkpoint panel
   ============================================================ */
.fv-dark-panel {
  background: var(--bg-card);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border-outer);
  box-shadow: var(--shadow-spatial-card);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
[data-fv-theme="dark"] .fv-dark-panel {
  background: #0E0E10;
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.fv-dark-panel h3 { font-size: 20px; font-weight: 700; margin: 0 0 20px; color: var(--text-primary); }
.fv-version-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fv-v-card {
  background: var(--bg-item);
  border: 1px solid var(--border-outer);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-spatial-item);
  transition: background 0.3s, border-color 0.3s;
}
[data-fv-theme="dark"] .fv-v-card {
  background: linear-gradient(180deg, rgba(42,42,46,0.7), rgba(24,24,26,0.6));
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.fv-v-card .badge-dot {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--bg-body);
  border: 1px solid var(--border-outer);
  margin-bottom: 26px;
  transition: background 0.3s;
}
[data-fv-theme="dark"] .fv-v-card .badge-dot {
  background: linear-gradient(160deg,#3a3a3e,#1c1c1e);
  border-color: transparent;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.12);
}
.fv-v-card h5 { color: var(--text-primary); font-size: 14px; font-weight: 600; margin: 0 0 2px; }
.fv-v-card span { color: var(--text-tertiary); font-size: 12px; }
.fv-v-card--wide { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; }
.fv-v-card--wide .pill {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 2px solid var(--border-outer);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 700;
  background: var(--bg-body);
  box-shadow: var(--shadow-inset-pod);
}
[data-fv-theme="dark"] .fv-v-card--wide .pill {
  border-color: #38383c;
  color: #fff;
  background: transparent;
}
.fv-v-card--checkpoint { grid-column: span 2; display: flex; align-items: center; justify-content: space-between; }
.fv-v-card--checkpoint .progress { width: 130px; height: 4px; background: var(--bg-body); border-radius: 2px; margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow-inset-pod); }
.fv-v-card--checkpoint .progress i { display: block; width: 62%; height: 100%; background: var(--accent-gradient); }
.fv-v-card--checkpoint .go {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
  border: none; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.fv-v-card--checkpoint .go:hover { transform: scale(1.1); box-shadow: 0 4px 16px var(--accent); }
.fv-v-card--checkpoint .go:active { transform: scale(0.95); }

/* Interactive states */
.fv-v-card { cursor: pointer; transition: all 0.2s; position: relative; }
.fv-v-card:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.fv-v-card:active { transform: scale(0.98); }
.fv-v-card--active { border-color: var(--accent) !important; box-shadow: 0 0 0 2px var(--accent-soft), 0 4px 16px rgba(0,0,0,0.1) !important; }
.fv-v-card__meta { margin-top: 8px; font-size: 11px; color: var(--text-tertiary); display: flex; align-items: center; gap: 4px; }
.fv-v-card__progress { display: flex; align-items: center; gap: 8px; }
.fv-v-card__progress-bar { flex: 1; height: 4px; background: var(--bg-body); border-radius: 2px; overflow: hidden; box-shadow: var(--shadow-inset-pod); }
.fv-v-card__progress-bar > div { height: 100%; border-radius: 2px; transition: width 1.5s ease; }

/* Timeline */
.fv-version-timeline { margin-top: 4px; }

/* ============================================================
   CHECKLIST
   ============================================================ */
.fv-checklist { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.fv-check-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--bg-item);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
  transition: all 0.3s cubic-bezier(0.25,1,0.5,1);
  cursor: pointer;
}
.fv-check-item .box {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-body);
  box-shadow: var(--shadow-inset-pod);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: transparent;
  flex-shrink: 0;
}
.fv-check-item span { font-size: 15px; font-weight: 500; }
.fv-check-item.done { opacity: 0.85; }
.fv-check-item.done .box {
  background: var(--success-gradient);
  color: #fff;
  box-shadow: 0 4px 10px rgba(52,199,89,0.35), inset 0 1.5px 1px rgba(255,255,255,0.4);
}
.fv-check-item.done span { text-decoration: line-through; color: var(--text-tertiary); }

/* ============================================================
   STACKED CARDS — wallet-style
   ============================================================ */
.fv-stack-wrap { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.fv-add-card { width: 200px; text-align: center; padding: 20px; }
.fv-add-card .icon-badge {
  width: 44px; height: 44px;
  border-radius: 50%;
  margin: 0 auto 14px;
  background: linear-gradient(145deg, #6D5DF6, #C13584);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: var(--shadow-spatial-btn);
}
.fv-add-card p { font-size: 14px; font-weight: 700; margin-bottom: 16px; }

.fv-stack { position: relative; width: 200px; height: 190px; }
.fv-stack__layer {
  position: absolute; left: 0; right: 0;
  border-radius: var(--radius-lg);
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.fv-stack__layer--l1 { top: 0; height: 46px; background: linear-gradient(90deg,#4B3FA0,#7A4FB8); z-index: 1; }
.fv-stack__layer--l2 { top: 20px; height: 46px; background: linear-gradient(90deg,#B8306A,#D8506A); z-index: 2; }
.fv-stack__main {
  position: absolute; top: 40px; left: 0; right: 0; bottom: 0;
  background: linear-gradient(160deg,#2a1810,#0d0704);
  border-radius: var(--radius-lg);
  padding: 16px;
  z-index: 3;
  box-shadow: 0 20px 40px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.1);
}
.fv-stack__main .edit {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px;
}
.fv-stack__main .label { color: #d8b9a3; font-size: 11px; margin-bottom: 10px; }
.fv-stack__main .amount { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.fv-stack__main .sub { color: #a68a78; font-size: 11px; }
.fv-stack-caption {
  text-align: center; margin-top: 12px; font-size: 12px; color: var(--text-secondary);
  background: var(--bg-item); border-radius: 999px; padding: 7px 14px; display: inline-block;
  box-shadow: var(--shadow-spatial-item);
}

/* ============================================================
   DATE PICKER
   ============================================================ */
.fv-picker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.fv-picker-head .icon-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--text-secondary);
  border: none; cursor: pointer;
}
.fv-picker-head h4 { font-size: 15px; font-weight: 700; }
.fv-picker-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 8px; }
.fv-picker-dow span { text-align: center; font-size: 11px; color: var(--text-tertiary); font-weight: 600; }
.fv-picker-month { font-size: 12px; font-weight: 700; color: var(--text-secondary); margin: 14px 0 8px; }
.fv-picker-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.fv-picker-day {
  aspect-ratio: 1; border-radius: 10px;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--text-primary);
  cursor: pointer; transition: all 0.15s;
}
.fv-picker-day:hover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.08); }
.fv-picker-day.muted { color: var(--text-tertiary); box-shadow: none; background: transparent; }
.fv-picker-day.muted:hover { background: transparent; transform: none; }
.fv-picker-day.selected { background: var(--accent-gradient); color: #fff; border-radius: 10px; box-shadow: var(--shadow-spatial-btn); }
.fv-picker-day.today { border: 2px solid var(--accent); font-weight: 700; }
.fv-picker-day.range { background: var(--accent-gradient); color: #fff; border-radius: 8px; box-shadow: var(--shadow-spatial-btn); }
.fv-picker-day.range.start { border-radius: 10px 0 0 10px; }
.fv-picker-day.range.end { border-radius: 0 10px 10px 0; }

/* ============================================================
   FORM INPUTS — spatial style
   ============================================================ */
.fv-input {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: none;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  outline: none;
}
.fv-input::placeholder { color: var(--text-tertiary); }
.fv-input:focus { box-shadow: var(--shadow-inset-pod), 0 0 0 2px var(--accent); }

.fv-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.fv-native {
  width: 100%;
  padding: 9px 32px 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: none;
  font-size: 13px;
  color: var(--text-primary);
  font-family: inherit;
  appearance: none;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236e6e73'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* ============================================================
   TABLE
   ============================================================ */
.fv-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-outer);
  border-radius: var(--radius-md);
}
.fv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.fv-table th {
  background: var(--bg-item);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-outer);
  position: sticky;
  top: 0;
}
.fv-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-outer);
  color: var(--text-primary);
  transition: background 0.2s;
}
.fv-table tr:last-child td { border-bottom: none; }
.fv-table tr:hover td { background: var(--accent-soft); }

/* ============================================================
   MODAL — spatial glass
   ============================================================ */
.fv-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.fv-modal-overlay.active { opacity: 1; visibility: visible; }
.fv-modal {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  width: 90%; max-width: 520px; max-height: 85vh;
  display: flex; flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.25,1,0.5,1);
}
.fv-modal-overlay.active .fv-modal { transform: translateY(0) scale(1); }
.fv-modal__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-outer);
}
.fv-modal__title { font-size: 18px; font-weight: 700; }
.fv-modal__close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: none; color: var(--text-secondary); font-size: 16px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.fv-modal__close:hover { background: var(--danger-gradient); color: #fff; }
.fv-modal__body { padding: 24px; overflow-y: auto; flex: 1; }
.fv-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-outer);
  display: flex; gap: 12px; justify-content: flex-end;
}

/* ============================================================
   DROPDOWN
   ============================================================ */
.fv-dropdown { position: relative; display: inline-block; }
.fv-dropdown__menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 180px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-card);
  padding: 6px; z-index: 100;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all 0.15s;
}
.fv-dropdown.open .fv-dropdown__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fv-dropdown__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px;
  border: none; background: none;
  color: var(--text-primary); font-size: 14px; font-family: inherit;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
  transition: background 0.15s;
}
.fv-dropdown__item:hover { background: var(--accent-soft); }
.fv-dropdown__item--danger { color: var(--color-danger); }
.fv-dropdown__divider { height: 1px; background: var(--border-outer); margin: 4px 0; }

/* ============================================================
   TABS
   ============================================================ */
.fv-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-outer); }
.fv-tab {
  padding: 10px 20px; font-size: 14px; font-weight: 500;
  color: var(--text-secondary); background: none; border: none;
  border-bottom: 2px solid transparent; cursor: pointer;
  transition: all 0.2s; font-family: inherit;
}
.fv-tab:hover { color: var(--text-primary); }
.fv-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* ============================================================
   AVATAR
   ============================================================ */
.fv-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(145deg,#FF9F0A,#B0182A);
  box-shadow: var(--shadow-spatial-item);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; color: #fff; flex-shrink: 0;
}
.fv-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.fv-avatar--xl { width: 64px; height: 64px; font-size: 22px; }

/* ============================================================
   TOAST
   ============================================================ */
.fv-toast {
  position: fixed; bottom: 24px; right: 24px;
  padding: 14px 20px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 600; color: #fff;
  box-shadow: var(--shadow-spatial-card);
  z-index: 2000;
  transform: translateY(20px); opacity: 0;
  transition: all 0.3s cubic-bezier(0.25,1,0.5,1);
}
.fv-toast.show { transform: translateY(0); opacity: 1; }
.fv-toast--success { background: var(--success-gradient); }
.fv-toast--warning { background: var(--warning-gradient); }
.fv-toast--danger { background: var(--danger-gradient); }
.fv-toast--accent { background: var(--accent-gradient); }

/* ============================================================
   SKELETON
   ============================================================ */
.fv-skeleton {
  background: linear-gradient(90deg, #e8e8e8 25%, #d4d4d4 50%, #e8e8e8 75%);
  background-size: 200% 100%;
  animation: fv-shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}
@keyframes fv-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
[data-fv-theme="dark"] .fv-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.08) 75%);
  background-size: 200% 100%;
  animation: fv-shimmer 1.5s infinite;
}
.fv-skeleton--text { height: 14px; width: 100%; margin-bottom: 10px; }
.fv-skeleton--text:last-child { margin-bottom: 0; }
.fv-skeleton--title { height: 22px; width: 60%; margin-bottom: 10px; }
.fv-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.fv-skeleton--card { height: 120px; width: 100%; border-radius: var(--radius-md); margin-bottom: 12px; }
.fv-skeleton--card:last-child { margin-bottom: 0; }

/* ============================================================
   TOOLTIP
   ============================================================ */
.fv-tooltip { position: relative; }
.fv-tooltip::after {
  content: attr(data-fv-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 12px; background: var(--text-primary); color: var(--bg-body);
  font-size: 12px; font-weight: 500; border-radius: var(--radius-sm);
  white-space: nowrap; pointer-events: none;
  opacity: 0; transition: all 0.15s;
}
.fv-tooltip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   ACCORDION
   ============================================================ */
.fv-accordion { display: flex; flex-direction: column; gap: 8px; }
.fv-accordion__item {
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-item);
  overflow: hidden;
}
.fv-accordion__trigger {
  width: 100%; padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  font-family: inherit; text-align: left;
}
.fv-accordion__trigger i { transition: transform 0.2s; color: var(--text-secondary); }
.fv-accordion__item.open .fv-accordion__trigger i { transform: rotate(180deg); }
.fv-accordion__content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.25,1,0.5,1);
}
.fv-accordion__item.open .fv-accordion__content { max-height: 500px; }
.fv-accordion__body { padding: 0 18px 14px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

/* ============================================================
   ALERT
   ============================================================ */
.fv-alert {
  padding: 14px 18px; border-radius: var(--radius-md);
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.5;
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
  position: relative;
}
.fv-alert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.fv-alert__close {
  background: none; border: none; cursor: pointer; color: inherit; opacity: 0.5;
  font-size: 16px; padding: 2px; transition: opacity 0.15s; flex-shrink: 0;
}
.fv-alert__close:hover { opacity: 1; }
.fv-alert--info { background: var(--accent-soft); color: var(--accent); border-left: 3px solid var(--accent); }
.fv-alert--info i { color: var(--accent); }
.fv-alert--success { background: linear-gradient(180deg, rgba(36,176,73,0.08), rgba(36,176,73,0.04)); color: var(--color-success); border-left: 3px solid var(--color-success); }
.fv-alert--success i { color: var(--color-success); }
.fv-alert--warning { background: linear-gradient(180deg, rgba(230,138,0,0.08), rgba(230,138,0,0.04)); color: var(--color-warning); border-left: 3px solid var(--color-warning); }
.fv-alert--warning i { color: var(--color-warning); }
.fv-alert--danger { background: linear-gradient(180deg, rgba(215,38,30,0.08), rgba(215,38,30,0.04)); color: var(--color-danger); border-left: 3px solid var(--color-danger); }
.fv-alert--danger i { color: var(--color-danger); }
.fv-alert__title { font-weight: 700; margin-bottom: 2px; }
.fv-alert__desc { color: var(--text-secondary); }

/* ============================================================
   ALERT DIALOG
   ============================================================ */
.fv-alert-dialog {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.fv-alert-dialog.active { opacity: 1; visibility: visible; }
.fv-alert-dialog__box {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  width: 90%; max-width: 420px; padding: 24px;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.25,1,0.5,1);
}
.fv-alert-dialog.active .fv-alert-dialog__box { transform: translateY(0) scale(1); }
.fv-alert-dialog__title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.fv-alert-dialog__desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; line-height: 1.5; }
.fv-alert-dialog__footer { display: flex; gap: 10px; justify-content: flex-end; }

/* ============================================================
   ASPECT RATIO
   ============================================================ */
.fv-aspect-ratio { position: relative; width: 100%; }
.fv-aspect-ratio::before { content: ""; display: block; }
.fv-aspect-ratio--16x9::before { padding-top: 56.25%; }
.fv-aspect-ratio--4x3::before { padding-top: 75%; }
.fv-aspect-ratio--1x1::before { padding-top: 100%; }
.fv-aspect-ratio--3x2::before { padding-top: 66.67%; }
.fv-aspect-ratio > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.fv-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.fv-breadcrumb__item { color: var(--text-secondary); text-decoration: none; transition: color 0.15s; }
.fv-breadcrumb__item:hover { color: var(--accent); }
.fv-breadcrumb__item.active { color: var(--text-primary); font-weight: 600; pointer-events: none; }
.fv-breadcrumb__sep { color: var(--text-tertiary); font-size: 11px; }

/* ============================================================
   BUTTON GROUP
   ============================================================ */
.fv-btn-group { display: inline-flex; }
.fv-btn-group .fv-btn { border-radius: 0; margin-left: -1px; }
.fv-btn-group .fv-btn:first-child { border-radius: var(--radius-xl) 0 0 var(--radius-xl); margin-left: 0; }
.fv-btn-group .fv-btn:last-child { border-radius: 0 var(--radius-xl) var(--radius-xl) 0; }

/* ============================================================
   CAROUSEL
   ============================================================ */
.fv-carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.fv-carousel__track { display: flex; transition: transform 0.4s cubic-bezier(0.25,1,0.5,1); }
.fv-carousel__slide { min-width: 100%; }
.fv-carousel__slide img { width: 100%; height: 100%; object-fit: cover; }
.fv-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(10px);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; color: #1D1D1F;
  transition: all 0.15s; z-index: 2;
}
[data-fv-theme="dark"] .fv-carousel__btn {
  background: rgba(30,30,34,0.9); color: #f5f5f7;
  border-color: rgba(255,255,255,0.1);
}
.fv-carousel__btn:hover { background: #fff; box-shadow: var(--shadow-spatial-card); }
[data-fv-theme="dark"] .fv-carousel__btn:hover { background: rgba(50,50,55,0.95); }
.fv-carousel__btn--prev { left: 12px; }
.fv-carousel__btn--next { right: 12px; }
.fv-carousel__dots { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.fv-carousel__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-tertiary); border: none; cursor: pointer;
  transition: all 0.2s;
}
.fv-carousel__dot.active { background: var(--accent); width: 20px; border-radius: 4px; }

/* === stats-carousel === */
.fv-stats-carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.fv-stats-carousel .fv-carousel__track { display: flex; transition: transform 0.45s cubic-bezier(0.25,1,0.5,1); }
.fv-stats-carousel .fv-carousel__slide { min-width: 100%; height: 180px; }
.fv-stats-carousel .fv-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; color: #fff; z-index: 3;
  transition: background 0.15s, transform 0.15s;
}
.fv-stats-carousel .fv-carousel__btn:hover { background: rgba(255,255,255,0.32); }
.fv-stats-carousel .fv-carousel__btn:active { transform: translateY(-50%) scale(0.9); }
.fv-stats-carousel .fv-carousel__btn--prev { left: 12px; }
.fv-stats-carousel .fv-carousel__btn--next { right: 12px; }
.fv-stats-carousel .fv-carousel__dots {
  position: absolute; left: 0; right: 0; bottom: 14px;
  display: flex; gap: 6px; justify-content: center; z-index: 3;
}
.fv-stats-carousel .fv-carousel__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0;
  transition: all 0.2s;
}
.fv-stats-carousel .fv-carousel__dot.active {
  background: #fff; width: 18px; border-radius: 4px;
}

/* ============================================================
   CHECKBOX
   ============================================================ */
.fv-checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.fv-checkbox input { display: none; }
.fv-checkbox__box {
  width: 20px; height: 20px; border-radius: 6px;
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: 1.5px solid var(--border-outer);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.fv-checkbox input:checked + .fv-checkbox__box {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 2px 8px var(--accent-soft);
}
.fv-checkbox input:checked + .fv-checkbox__box::after {
  content: "✓"; color: #fff; font-size: 12px; font-weight: 700;
}
.fv-checkbox__label { color: var(--text-primary); user-select: none; }

/* ============================================================
   COLLAPSIBLE
   ============================================================ */
.fv-collapsible {}
.fv-collapsible__trigger {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-item); border: 1px solid var(--border-outer); border-radius: var(--radius-sm);
  cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-primary);
  font-family: inherit; padding: 10px 14px; width: 100%;
  transition: all 0.15s;
}
.fv-collapsible__trigger:hover { border-color: var(--accent); background: var(--accent-soft); }
.fv-collapsible__trigger:active { transform: scale(0.98); }
.fv-collapsible__trigger i { transition: transform 0.2s; color: var(--text-secondary); }
.fv-collapsible.open .fv-collapsible__trigger i { transform: rotate(90deg); }
.fv-collapsible__content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.25,1,0.5,1);
}
.fv-collapsible.open .fv-collapsible__content { max-height: 500px; }

/* ============================================================
   CUSTOM SELECT (dropdown style)
   ============================================================ */
.fv-cselect { position: relative; width: 100%; }
.fv-cselect__trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); cursor: pointer; font-size: 14px;
  color: var(--text-primary); box-shadow: var(--shadow-spatial-item);
  transition: border-color 0.2s;
}
.fv-cselect__trigger:hover { border-color: var(--accent); }
.fv-cselect__trigger i { font-size: 12px; color: var(--text-tertiary); transition: transform 0.2s; }
.fv-cselect.open .fv-cselect__trigger i { transform: rotate(180deg); }
.fv-cselect__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; width: 100%; z-index: 100;
  background: var(--bg-card); backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner); border-radius: var(--radius-md);
  padding: 4px; box-shadow: var(--shadow-spatial-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.fv-cselect.open .fv-cselect__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.fv-cselect__item {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  border-radius: var(--radius-sm); font-size: 14px; color: var(--text-primary);
  cursor: pointer; transition: background 0.15s; text-align: left;
}
.fv-cselect__item:hover { background: var(--accent-soft); }
.fv-cselect__item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.fv-cselect__item .bi-check2 { opacity: 0; font-size: 14px; flex-shrink: 0; }
.fv-cselect__item.active .bi-check2 { opacity: 1; }
.fv-cselect__item .bi-plus-lg { font-size: 12px; color: var(--accent); flex-shrink: 0; }
.fv-cselect__divider { height: 1px; background: var(--border-outer); margin: 4px 8px; }

/* ============================================================
   COMBOBOX
   ============================================================ */
.fv-combobox { position: relative; width: 100%; }
.fv-combobox__trigger {
  width: 100%; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: none; font-size: 13px; color: var(--text-primary);
  font-family: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.fv-combobox__trigger i { color: var(--text-tertiary); font-size: 12px; }
.fv-combobox__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-card);
  padding: 6px; z-index: 100;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all 0.15s;
  max-height: 200px; overflow-y: auto;
}
.fv-combobox.open .fv-combobox__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.fv-combobox__search {
  width: 100%; padding: 8px 10px; border: none; background: var(--bg-item);
  border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 4px;
  font-family: inherit; outline: none; color: var(--text-primary);
  border: 1px solid transparent; transition: border-color 0.15s;
}
.fv-combobox__search:focus { border-color: var(--accent); }
.fv-combobox__option {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 10px; border: none; background: none;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
}
.fv-combobox__option:hover { background: var(--accent-soft); }
.fv-combobox__option.selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ============================================================
   COMMAND
   ============================================================ */
.fv-command {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden; width: 100%; max-width: 480px;
}
.fv-command__input-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border-outer);
  transition: border-color 0.15s;
}
.fv-command__input-wrap:focus-within { border-color: var(--accent); }
.fv-command__input-wrap i { color: var(--text-tertiary); font-size: 16px; }
.fv-command__input {
  flex: 1; border: none; background: none; font-size: 14px;
  font-family: inherit; color: var(--text-primary); outline: none;
}
.fv-command__input::placeholder { color: var(--text-tertiary); }
.fv-command__list { padding: 6px; max-height: 280px; overflow-y: auto; }
.fv-command__group-label { padding: 6px 10px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }
.fv-command__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px; border: none; background: none;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
}
.fv-command__item:hover { background: var(--accent-soft); }
.fv-command__item i { color: var(--text-tertiary); font-size: 14px; }
.fv-command__item-shortcut { margin-left: auto; font-size: 11px; color: var(--text-tertiary); font-family: ui-monospace, monospace; }
.fv-command__divider { height: 1px; background: var(--border-outer); margin: 4px 0; }

/* ============================================================
   CONTEXT MENU
   ============================================================ */
.fv-context-menu {
  position: fixed; min-width: 180px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-card);
  padding: 6px; z-index: 2000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
}
.fv-context-menu.active { opacity: 1; visibility: visible; }
.fv-context-menu__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 12px; border: none; background: none;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
}
.fv-context-menu__item:hover { background: var(--accent-soft); }
.fv-context-menu__item--danger { color: var(--color-danger); }
.fv-context-menu__divider { height: 1px; background: var(--border-outer); margin: 4px 0; }
.fv-context-menu__shortcut { margin-left: auto; font-size: 11px; color: var(--text-tertiary); }

/* ============================================================
   DATE PICKER (FULL)
   ============================================================ */
.fv-date-picker { position: relative; display: inline-block; }
.fv-date-picker__input {
  width: 100%; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: none; font-size: 13px; color: var(--text-primary);
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}
.fv-date-picker__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  padding: 16px; z-index: 100;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all 0.15s;
}
.fv-date-picker.open .fv-date-picker__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }

/* ============================================================
   DRAWER
   ============================================================ */
.fv-drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.fv-drawer-overlay.active { opacity: 1; visibility: visible; }
.fv-drawer {
  position: fixed; top: 0; bottom: 0;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  z-index: 1001;
  display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1);
  width: 360px; max-width: 90vw;
}
.fv-drawer--left { left: 0; transform: translateX(-100%); }
.fv-drawer--right { right: 0; transform: translateX(100%); }
.fv-drawer-overlay.active .fv-drawer { transform: translateX(0); }
.fv-drawer__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border-outer);
}
.fv-drawer__title { font-size: 16px; font-weight: 700; }
.fv-drawer__close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-item); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); font-size: 14px;
}
.fv-drawer__body { flex: 1; padding: 20px; overflow-y: auto; }
.fv-drawer__footer { padding: 16px 20px; border-top: 1px solid var(--border-outer); display: flex; gap: 10px; justify-content: flex-end; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.fv-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center;
}
.fv-empty__icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--accent); margin-bottom: 16px;
}
.fv-empty__title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.fv-empty__desc { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; max-width: 300px; }

/* ============================================================
   FIELD
   ============================================================ */
.fv-field { display: flex; flex-direction: column; gap: 6px; }
.fv-field__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.fv-field__label .required { color: var(--color-danger); }
.fv-field__description { font-size: 12px; color: var(--text-tertiary); }
.fv-field__error { font-size: 12px; color: var(--color-danger); display: flex; align-items: center; gap: 4px; }
.fv-field--error .fv-input { box-shadow: var(--shadow-inset-pod), 0 0 0 2px #FF3B30; }

/* ============================================================
   HOVER CARD
   ============================================================ */
.fv-hover-card { position: relative; display: inline-block; }
.fv-hover-card__trigger { cursor: pointer; }
.fv-hover-card__content {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  width: 280px; padding: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  z-index: 100;
  opacity: 0; visibility: hidden;
  transition: all 0.15s;
}
.fv-hover-card:hover .fv-hover-card__content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ============================================================
   INPUT GROUP
   ============================================================ */
.fv-input-group { display: flex; align-items: stretch; }
.fv-input-group .fv-input { border-radius: 0; flex: 1; }
.fv-input-group__addon {
  padding: 0 12px;
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: none; font-size: 13px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.fv-input-group__addon:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.fv-input-group__addon:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.fv-input-group .fv-input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.fv-input-group .fv-input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ============================================================
   INPUT OTP
   ============================================================ */
.fv-otp { display: flex; gap: 8px; }
.fv-otp__input {
  width: 44px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: none; text-align: center;
  font-size: 20px; font-weight: 700; font-family: inherit;
  color: var(--text-primary); outline: none;
}
.fv-otp__input:focus { box-shadow: var(--shadow-inset-pod), 0 0 0 2px var(--accent); }
.fv-otp__separator { display: flex; align-items: center; color: var(--text-tertiary); font-size: 18px; }

/* ============================================================
   KBD
   ============================================================ */
.fv-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px; min-width: 24px; height: 24px;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
  border-radius: 6px;
  font-size: 12px; font-weight: 600; font-family: ui-monospace, monospace;
  color: var(--text-secondary);
}

/* ============================================================
   MARKER
   ============================================================ */
.fv-marker {
  display: inline;
  background: linear-gradient(180deg, transparent 60%, rgba(255,179,0,0.3) 60%);
  padding: 0 2px;
}

/* ============================================================
   MENUBAR
   ============================================================ */
.fv-menubar {
  display: flex; align-items: center; gap: 2px;
  padding: 4px; border-radius: var(--radius-md);
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
}
.fv-menubar__item { position: relative; }
.fv-menubar__trigger {
  padding: 6px 12px; border-radius: var(--radius-sm);
  background: none; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  font-family: inherit; transition: background 0.15s;
}
.fv-menubar__trigger:hover { background: var(--accent-soft); }
.fv-menubar__menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 180px; padding: 4px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-card);
  z-index: 100;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: all 0.15s;
}
.fv-menubar__item.open .fv-menubar__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.fv-menubar__menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 10px; border: none; background: none;
  color: var(--text-primary); font-size: 13px; font-family: inherit;
  border-radius: var(--radius-sm); cursor: pointer; text-align: left;
}
.fv-menubar__menu-item:hover { background: var(--accent-soft); }
.fv-menubar__menu-item i { color: var(--text-tertiary); font-size: 14px; width: 16px; }
.fv-menubar__menu-shortcut { margin-left: auto; font-size: 11px; color: var(--text-tertiary); }
.fv-menubar__divider { height: 1px; background: var(--border-outer); margin: 4px 0; }

/* ============================================================
   MESSAGE
   ============================================================ */
.fv-message {
  display: flex; gap: 12px; padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
}
.fv-message__avatar { flex-shrink: 0; }
.fv-message__content { flex: 1; }
.fv-message__name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.fv-message__text { font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.fv-message__time { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }

/* ============================================================
   NAVIGATION MENU
   ============================================================ */
.fv-nav { display: flex; align-items: center; gap: 4px; }
.fv-nav__item { position: relative; }
.fv-nav__trigger {
  padding: 8px 14px; border-radius: var(--radius-xl);
  background: none; border: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-secondary);
  font-family: inherit; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
}
.fv-nav__trigger:hover { color: var(--text-primary); background: var(--accent-soft); }
.fv-nav__trigger.active { color: var(--accent); }
.fv-nav__dropdown {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 200px; padding: 8px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  z-index: 100;
  opacity: 0; visibility: hidden;
  transition: all 0.15s;
}
.fv-nav__item.open .fv-nav__dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.fv-nav__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text-primary);
  font-size: 13px; transition: background 0.15s;
}
.fv-nav__link:hover { background: var(--accent-soft); }
.fv-nav__link i { color: var(--text-tertiary); font-size: 16px; }
.fv-nav__link-text { display: flex; flex-direction: column; }
.fv-nav__link-title { font-weight: 600; }
.fv-nav__link-desc { font-size: 12px; color: var(--text-tertiary); }

/* ============================================================
   PAGINATION
   ============================================================ */
.fv-pagination { display: flex; align-items: center; gap: 4px; }
.fv-pagination__item {
  min-width: 36px; height: 36px; padding: 0 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  cursor: pointer; transition: all 0.15s; border: none;
  font-family: inherit;
}
.fv-pagination__item:hover { background: var(--accent-soft); }
.fv-pagination__item.active {
  background: var(--accent-gradient); color: #fff;
  box-shadow: var(--shadow-spatial-btn);
}
.fv-pagination__item:disabled { opacity: 0.4; cursor: not-allowed; }
.fv-pagination__ellipsis { color: var(--text-tertiary); padding: 0 4px; }

/* ============================================================
   POPOVER
   ============================================================ */
.fv-popover { position: relative; display: inline-block; }
.fv-popover__content {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 220px; padding: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  z-index: 100;
  opacity: 0; visibility: hidden;
  transition: all 0.15s;
}
.fv-popover.open .fv-popover__content { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.fv-popover__title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.fv-popover__desc { font-size: 13px; color: var(--text-secondary); }
.fv-popover--bottom .fv-popover__content { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
.fv-popover--bottom.open .fv-popover__content { transform: translateX(-50%) translateY(0); }

/* ============================================================
   PROGRESS
   ============================================================ */
.fv-progress { width: 100%; height: 8px; background: var(--bg-item); border-radius: 999px; overflow: hidden; box-shadow: var(--shadow-inset-pod); }
.fv-progress__bar {
  height: 100%; border-radius: 999px;
  background: var(--accent-gradient);
  box-shadow: 0 2px 8px var(--accent-soft);
  transition: width 0.4s cubic-bezier(0.25,1,0.5,1);
}
.fv-progress--sm { height: 4px; }
.fv-progress--lg { height: 12px; }
.fv-progress--success .fv-progress__bar { background: var(--success-gradient); box-shadow: 0 2px 6px rgba(36,176,73,0.3); }
.fv-progress--warning .fv-progress__bar { background: var(--warning-gradient); box-shadow: 0 2px 6px rgba(230,138,0,0.3); }
.fv-progress--danger .fv-progress__bar { background: var(--danger-gradient); box-shadow: 0 2px 6px rgba(215,38,30,0.3); }

/* ============================================================
   RADIO GROUP
   ============================================================ */
.fv-radio-group { display: flex; flex-direction: column; gap: 10px; }
.fv-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.fv-radio input { display: none; }
.fv-radio__circle {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: 1.5px solid var(--border-outer);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s; flex-shrink: 0;
}
.fv-radio input:checked + .fv-radio__circle {
  border-color: var(--accent);
}
.fv-radio input:checked + .fv-radio__circle::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: 0 1px 4px var(--accent-soft);
}
.fv-radio__label { color: var(--text-primary); user-select: none; }

/* ============================================================
   RESIZABLE
   ============================================================ */
.fv-resizable { display: flex; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--border-outer); position: relative; box-shadow: var(--shadow-spatial-item); }
.fv-resizable__panel { overflow: auto; padding: 16px; background: var(--bg-item); min-width: 60px; flex: 1 1 0; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04); }
.fv-resizable__handle {
  width: 8px; cursor: col-resize;
  background: var(--border-outer);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
  position: relative;
}
.fv-resizable__handle::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -4px; right: -4px;
}
.fv-resizable__handle:hover { background: var(--accent); }
.fv-resizable__handle::after {
  content: ""; width: 2px; height: 20px;
  background: var(--text-tertiary); border-radius: 1px;
}
.fv-resizable__handle:hover::after { background: #fff; }
.fv-resizable__handle.dragging { background: var(--accent); }
.fv-resizable__handle.dragging::after { background: #fff; }

/* ============================================================
   SCROLL AREA
   ============================================================ */
.fv-scroll-area {
  position: relative; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  border: 1px solid var(--border-outer);
  box-shadow: var(--shadow-inset-pod);
}
.fv-scroll-area__content {
  overflow-y: scroll;
  height: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.25) transparent;
}
.fv-scroll-area__content::-webkit-scrollbar { width: 8px; }
.fv-scroll-area__content::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 4px; }
.fv-scroll-area__content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.25);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.fv-scroll-area__content::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.4);
  background-clip: content-box;
}
[data-fv-theme="dark"] .fv-scroll-area__content {
  scrollbar-color: rgba(255,255,255,0.25) transparent;
}
[data-fv-theme="dark"] .fv-scroll-area__content::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); }
[data-fv-theme="dark"] .fv-scroll-area__content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  background-clip: content-box;
}
[data-fv-theme="dark"] .fv-scroll-area__content::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.4);
  background-clip: content-box;
}

/* ============================================================
   SEPARATOR
   ============================================================ */
.fv-separator { border: none; background: var(--border-outer); }
.fv-separator--h { height: 1px; width: 100%; }
.fv-separator--v { width: 1px; height: 100%; align-self: stretch; }
.fv-separator--subtle { background: var(--border-inner); }

/* ============================================================
   SHEET
   ============================================================ */
.fv-sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.fv-sheet-overlay.active { opacity: 1; visibility: visible; }
.fv-sheet {
  position: fixed; top: 0; bottom: 0;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  z-index: 1001;
  display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1);
  width: 400px; max-width: 90vw;
}
.fv-sheet--left { left: 0; transform: translateX(-100%); }
.fv-sheet--right { right: 0; transform: translateX(100%); }
.fv-sheet--top { top: 0; bottom: auto; left: 0; right: 0; width: 100%; max-width: 100%; height: auto; max-height: 80vh; transform: translateY(-100%); }
.fv-sheet--bottom { bottom: 0; top: auto; left: 0; right: 0; width: 100%; max-width: 100%; height: auto; max-height: 80vh; transform: translateY(100%); }
.fv-sheet-overlay.active .fv-sheet { transform: translateX(0) translateY(0); }
.fv-sheet__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--border-outer);
}
.fv-sheet__title { font-size: 16px; font-weight: 700; }
.fv-sheet__close {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--bg-item); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-secondary); font-size: 14px;
}
.fv-sheet__body { flex: 1; padding: 20px; overflow-y: auto; }

/* ============================================================
   SIDEBAR
   ============================================================ */
.fv-sidebar {
  width: 260px; height: 100vh;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border-right: 1px solid var(--border-outer);
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.fv-sidebar__header { padding: 16px 16px 12px; border-bottom: 1px solid var(--border-outer); }
.fv-sidebar__content { flex: 1; overflow-y: auto; padding: 12px 8px; }
.fv-sidebar__footer { padding: 12px 16px; border-top: 1px solid var(--border-outer); }
.fv-sidebar__group { margin-bottom: 16px; }
.fv-sidebar__group-label { padding: 4px 10px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.fv-sidebar__item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: all 0.15s; text-decoration: none;
  border: none; background: none; width: 100%;
  font-family: inherit; text-align: left;
}
.fv-sidebar__item:hover { background: var(--accent-soft); color: var(--text-primary); }
.fv-sidebar__item.active { background: var(--accent-gradient); color: #fff; box-shadow: var(--shadow-spatial-btn); font-weight: 600; }
.fv-sidebar__item i { font-size: 16px; width: 20px; text-align: center; }
.fv-sidebar__item .badge {
  margin-left: auto; padding: 2px 8px; border-radius: 999px;
  background: var(--bg-item); font-size: 11px; color: var(--text-tertiary);
}
.fv-sidebar__item.active .badge { background: rgba(255,255,255,0.25); color: #fff; }

/* ============================================================
   SLIDER
   ============================================================ */
.fv-slider { position: relative; width: 100%; height: 20px; display: flex; align-items: center; cursor: pointer; }
.fv-slider__track {
  width: 100%; height: 6px; background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border-radius: 999px; position: relative;
}
.fv-slider__fill {
  position: absolute; left: 0; top: 0; height: 100%;
  background: var(--accent-gradient); border-radius: 999px;
  box-shadow: 0 2px 8px var(--accent-soft);
}
.fv-slider__thumb {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15), var(--shadow-spatial-item);
  border: 2px solid var(--accent);
  cursor: grab; transition: box-shadow 0.15s;
}
.fv-slider__thumb:active { cursor: grabbing; box-shadow: 0 2px 12px var(--accent-soft); }
.fv-slider--sm { height: 14px; }
.fv-slider--sm .fv-slider__track { height: 4px; }
.fv-slider--sm .fv-slider__thumb { width: 14px; height: 14px; }

/* ============================================================
   SPINNER
   ============================================================ */
.fv-spinner {
  display: inline-block;
  width: 20px; height: 20px;
  border: 2.5px solid var(--border-outer);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fv-spin 0.6s linear infinite;
}
@keyframes fv-spin { to { transform: rotate(360deg); } }
.fv-spinner--sm { width: 14px; height: 14px; border-width: 2px; }
.fv-spinner--lg { width: 32px; height: 32px; border-width: 3px; }
.fv-spinner--accent { border-color: var(--accent-soft); border-top-color: var(--accent); }
.fv-spinner--dots {
  width: auto; height: auto; border: none; background: none;
  display: inline-flex; gap: 4px;
}
.fv-spinner--dots::before, .fv-spinner--dots::after, .fv-spinner--dots {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.fv-spinner--dots::before { animation: fvDotBounce 0.6s 0s ease-in-out infinite; }
.fv-spinner--dots::after { animation: fvDotBounce 0.6s 0.15s ease-in-out infinite; }
@keyframes fvDotBounce { 0%,80%,100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* ============================================================
   SWITCH
   ============================================================ */
.fv-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.fv-switch input { display: none; }
.fv-switch__track {
  width: 44px; height: 24px; border-radius: 12px;
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  border: 1.5px solid var(--border-outer);
  position: relative; transition: all 0.2s;
}
.fv-switch__thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.2s cubic-bezier(0.25,1,0.5,1);
}
.fv-switch input:checked + .fv-switch__track {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: 0 2px 8px var(--accent-soft);
}
.fv-switch input:checked + .fv-switch__track .fv-switch__thumb {
  transform: translateX(20px);
}
.fv-switch__label { font-size: 14px; color: var(--text-primary); user-select: none; }

/* ============================================================
   TOGGLE
   ============================================================ */
.fv-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px; border-radius: var(--radius-sm);
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
  color: var(--text-secondary); font-size: 16px;
  cursor: pointer; transition: all 0.15s;
  border: none;
}
.fv-toggle:hover { background: var(--accent-soft); color: var(--text-primary); }
.fv-toggle.active {
  background: var(--accent-soft); color: var(--accent);
  box-shadow: var(--shadow-spatial-btn);
}
.fv-toggle--sm { padding: 6px; font-size: 14px; }
.fv-toggle--lg { padding: 10px; font-size: 18px; }

/* ============================================================
   TOGGLE GROUP
   ============================================================ */
.fv-toggle-group { display: inline-flex; gap: 0; }
.fv-toggle-group .fv-toggle { border-radius: 0; margin-left: -1px; }
.fv-toggle-group .fv-toggle:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.fv-toggle-group .fv-toggle:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.fv-h1 { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.fv-h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.3px; line-height: 1.3; }
.fv-h3 { font-size: 22px; font-weight: 700; line-height: 1.3; }
.fv-h4 { font-size: 18px; font-weight: 600; line-height: 1.4; }
.fv-p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }
.fv-lead { font-size: 18px; line-height: 1.6; color: var(--text-secondary); }
.fv-large { font-size: 17px; font-weight: 600; }
.fv-small { font-size: 13px; color: var(--text-secondary); }
.fv-muted { color: var(--text-tertiary); }
.fv-code { font-family: ui-monospace, monospace; background: var(--accent-soft); padding: 2px 6px; border-radius: 4px; font-size: 13px; color: var(--accent); }
.fv-blockquote { border-left: 3px solid var(--accent); padding-left: 16px; font-style: italic; color: var(--text-secondary); }
.fv-list { padding-left: 20px; }
.fv-list li { margin-bottom: 4px; font-size: 14px; color: var(--text-secondary); }

/* ============================================================
   RATING
   ============================================================ */
.fv-rating { display: inline-flex; gap: 4px; align-items: center; }
.fv-rating__star {
  font-size: 20px; cursor: pointer; color: var(--border-outer);
  transition: color 0.15s, transform 0.15s;
}
.fv-rating__star:hover { transform: scale(1.15); }
.fv-rating__star.active { color: var(--color-star); }
.fv-rating__star.half { position: relative; color: var(--border-outer); }
.fv-rating__star.half::before { content: "\f521"; position: absolute; left: 0; width: 50%; overflow: hidden; color: var(--color-star); }
.fv-rating__label { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-left: 6px; }
.fv-rating--sm .fv-rating__star { font-size: 16px; }
.fv-rating--readonly .fv-rating__star { cursor: default; pointer-events: none; }

/* ============================================================
   AUTOCOMPLETE
   ============================================================ */
.fv-autocomplete { position: relative; width: 100%; }
.fv-autocomplete__input {
  width: 100%; padding: 10px 14px; font-size: 14px; color: var(--text-primary);
  background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); outline: none; transition: border-color 0.2s;
  box-shadow: var(--shadow-spatial-item);
}
.fv-autocomplete__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fv-autocomplete__dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; width: 100%; z-index: 100;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md); padding: 4px; max-height: 200px; overflow-y: auto;
  box-shadow: var(--shadow-spatial-card);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.fv-autocomplete.open .fv-autocomplete__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.fv-autocomplete__item {
  padding: 9px 12px; font-size: 14px; color: var(--text-primary);
  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s;
}
.fv-autocomplete__item:hover, .fv-autocomplete__item.active { background: var(--accent-soft); }
.fv-autocomplete__item mark { background: var(--accent-soft); color: var(--accent); border-radius: 2px; padding: 0 1px; }
.fv-autocomplete__empty { padding: 12px; text-align: center; font-size: 13px; color: var(--text-tertiary); }

/* ============================================================
   TIMELINE
   ============================================================ */
.fv-timeline { position: relative; padding-left: 28px; }
.fv-timeline::before {
  content: ""; position: absolute; left: 10px; top: 4px; bottom: 4px;
  width: 2px; background: var(--border-outer);
}
.fv-timeline__item { position: relative; padding-bottom: 20px; }
.fv-timeline__item:last-child { padding-bottom: 0; }
.fv-timeline__dot {
  position: absolute; left: -22px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--bg-item); border: 2px solid var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.fv-timeline__item.done .fv-timeline__dot { background: var(--accent); }
.fv-timeline__item.active .fv-timeline__dot { background: var(--accent-gradient); box-shadow: 0 0 0 3px var(--accent-soft), 0 0 8px var(--accent); animation: timelinePulse 2s ease-in-out infinite; }
.fv-timeline__item.pending .fv-timeline__dot { background: var(--bg-item); border-color: var(--border-outer); box-shadow: none; }
@keyframes timelinePulse { 0%,100% { box-shadow: 0 0 0 3px var(--accent-soft); } 50% { box-shadow: 0 0 0 6px var(--accent-soft), 0 0 12px var(--accent); } }
.fv-timeline__title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.fv-timeline__desc { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.fv-timeline__time { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
.fv-timeline__content {
  background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 8px;
  box-shadow: var(--shadow-spatial-item);
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.fv-countdown { display: inline-flex; gap: 8px; align-items: center; }
.fv-countdown__block {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); padding: 10px 14px; min-width: 56px;
  box-shadow: var(--shadow-spatial-item);
}
.fv-countdown__number { font-size: 24px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.fv-countdown__label { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.fv-countdown__sep { font-size: 20px; font-weight: 700; color: var(--text-tertiary); padding-bottom: 14px; }

/* ============================================================
   CLIPBOARD
   ============================================================ */
.fv-clipboard { display: inline-flex; align-items: center; gap: 6px; }
.fv-clipboard__text {
  font-family: ui-monospace, monospace; font-size: 13px;
  padding: 6px 12px; background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-sm); color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
}
.fv-clipboard__btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--bg-item); border: 1px solid var(--border-outer);
  cursor: pointer; color: var(--text-secondary); transition: all 0.15s;
  box-shadow: var(--shadow-spatial-item);
}
.fv-clipboard__btn:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.fv-clipboard__btn.copied { background: var(--color-success); color: #fff; border-color: var(--color-success); }

/* ============================================================
   TREE VIEW
   ============================================================ */
.fv-tree { list-style: none; margin: 0; padding: 0; font-size: 14px; max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-outer) transparent; }
.fv-tree::-webkit-scrollbar { width: 8px; }
.fv-tree::-webkit-scrollbar-track { background: transparent; }
.fv-tree::-webkit-scrollbar-thumb { background: var(--border-outer); border-radius: 999px; }
.fv-tree::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
.fv-tree__item { padding: 0; }
.fv-tree__toggle {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 10px; border: none; background: none; cursor: pointer;
  color: var(--text-primary); font-size: 14px; border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.fv-tree__toggle:hover { background: var(--accent-soft); }
.fv-tree__toggle .bi { font-size: 10px; color: var(--text-tertiary); transition: transform 0.2s; }
.fv-tree__item.open > .fv-tree__toggle .bi { transform: rotate(90deg); }
.fv-tree__icon { font-size: 14px; color: var(--accent); }
.fv-tree__children { list-style: none; margin: 0; padding-left: 20px; display: none; }
.fv-tree__item.open > .fv-tree__children { display: block; }
.fv-tree__leaf {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 26px;
  font-size: 13px; color: var(--text-secondary); border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.15s;
}
.fv-tree__leaf:hover { background: var(--accent-soft); color: var(--text-primary); }

/* ============================================================
   SPOTLIGHT
   ============================================================ */
.fv-spotlight {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh;
  opacity: 0; visibility: hidden; transition: all 0.2s;
}
.fv-spotlight.open { opacity: 1; visibility: visible; }
.fv-spotlight__dialog {
  width: 100%; max-width: 520px; background: var(--bg-card);
  border: 1px solid var(--border-outer); border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,0.3); overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
}
.fv-spotlight.open .fv-spotlight__dialog { transform: scale(1) translateY(0); }
.fv-spotlight__input-wrap {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid var(--border-outer);
  transition: border-color 0.15s;
}
.fv-spotlight__input-wrap:focus-within { border-color: var(--accent); }
.fv-spotlight__input-wrap .bi { font-size: 18px; color: var(--text-tertiary); }
.fv-spotlight__input {
  flex: 1; border: none; outline: none; background: transparent;
  font-size: 15px; color: var(--text-primary);
}
.fv-spotlight__results { max-height: 300px; overflow-y: auto; padding: 6px; }
.fv-spotlight__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); cursor: pointer; transition: background 0.15s;
}
.fv-spotlight__item:hover, .fv-spotlight__item.active { background: var(--accent-soft); }
.fv-spotlight__item-icon { font-size: 16px; color: var(--text-tertiary); width: 20px; text-align: center; }
.fv-spotlight__item-text { font-size: 14px; color: var(--text-primary); }
.fv-spotlight__item-hint { margin-left: auto; font-size: 11px; color: var(--text-tertiary); }
.fv-spotlight__empty { padding: 20px; text-align: center; font-size: 13px; color: var(--text-tertiary); }
.fv-spotlight__footer {
  display: flex; align-items: center; gap: 12px; padding: 10px 18px;
  border-top: 1px solid var(--border-outer); font-size: 11px; color: var(--text-tertiary);
}
.fv-spotlight__kbd {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 6px; background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: 4px; font-size: 10px; font-family: ui-monospace, monospace;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ============================================================
   SORTABLE
   ============================================================ */
.fv-sortable { display: flex; flex-direction: column; gap: 6px; }
.fv-sortable__item {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); cursor: grab; transition: all 0.15s;
  box-shadow: var(--shadow-spatial-item);
}
.fv-sortable__item:hover { border-color: var(--accent); }
.fv-sortable__item.dragging { opacity: 0.5; transform: scale(0.98); box-shadow: none; }
.fv-sortable__item.over { border-color: var(--accent); background: var(--accent-soft); }
.fv-sortable__grip {
  color: var(--text-tertiary); font-size: 14px; cursor: grab;
  display: flex; align-items: center;
}
.fv-sortable__content { flex: 1; font-size: 14px; color: var(--text-primary); }

/* ============================================================
   MARQUEE
   ============================================================ */
.fv-marquee {
  overflow: hidden; white-space: nowrap; width: 100%; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.fv-marquee__content {
  display: inline-block; animation: fv-marquee 20s linear infinite;
  font-size: 14px; color: var(--text-secondary); font-weight: 500;
}
.fv-marquee:hover .fv-marquee__content { animation-play-state: paused; }
@keyframes fv-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ============================================================
   QR CODE (placeholder — rendered via canvas)
   ============================================================ */
.fv-qrcode { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; }
.fv-qrcode canvas { border-radius: var(--radius-sm); border: 1px solid var(--border-outer); }
.fv-qrcode__label { font-size: 12px; color: var(--text-tertiary); }

/* ============================================================
   SELECT
   ============================================================ */
.fv-select { position: relative; width: 100%; }
.fv-select__trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; font-size: 13px; color: var(--text-primary);
  background: var(--bg-item); border: none;
  border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s;
  box-shadow: var(--shadow-inset-pod);
}
.fv-select__trigger .bi { font-size: 12px; color: var(--text-tertiary); transition: transform 0.2s; }
.fv-select.open .fv-select__trigger .bi { transform: rotate(180deg); }
.fv-select__dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; z-index: 100;
  background: var(--bg-body);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); padding: 6px;
  box-shadow: var(--shadow-spatial-card);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.fv-select.open .fv-select__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.fv-select__item {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  font-size: 13px; color: var(--text-primary); border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.15s;
}
.fv-select__item:hover { background: var(--accent-soft); }
.fv-select__item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.fv-select__item .bi-check { margin-left: auto; opacity: 0; font-size: 14px; }
.fv-select__item.active .bi-check { opacity: 1; }
.fv-select__label { padding: 6px 12px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.fv-select__divider { height: 1px; background: var(--border-outer); margin: 4px 8px; }

/* ============================================================
   NATIVE SELECT (form-style custom dropdown)
   ============================================================ */
.fv-native-select-group { margin-bottom: 4px; }
.fv-native-select-group label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text-primary);
  margin-bottom: 6px;
}
.fv-native-select-group .fv-hint { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
.fv-ns-wrap { position: relative; width: 100%; }
.fv-ns-trigger {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 14px; font-size: 14px; color: var(--text-primary);
  background: var(--bg-body); border: 1.5px solid var(--border-outer);
  border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s;
  box-shadow: var(--shadow-spatial-item);
}
.fv-ns-wrap:hover .fv-ns-trigger { border-color: var(--accent); }
.fv-ns-trigger .fv-ns-label { flex: 1; text-align: left; }
.fv-ns-trigger .fv-ns-label:empty::before { content: attr(data-placeholder); color: var(--text-tertiary); }
.fv-ns-arrow { font-size: 12px; color: var(--text-tertiary); transition: transform 0.2s; }
.fv-ns-wrap.open .fv-ns-arrow { transform: rotate(180deg); }
.fv-ns-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; width: 100%; z-index: 100;
  background: var(--bg-body);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); padding: 6px;
  box-shadow: var(--shadow-spatial-card);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.fv-ns-wrap.open .fv-ns-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.fv-ns-item {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
  font-size: 14px; color: var(--text-primary); border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.15s;
}
.fv-ns-item:hover { background: var(--accent-soft); }
.fv-ns-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.fv-ns-check { margin-left: auto; opacity: 0; font-size: 14px; }
.fv-ns-item.active .fv-ns-check { opacity: 1; }
.fv-ns-group-label { padding: 6px 12px 4px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; }
.fv-ns-divider { height: 1px; background: var(--border-outer); margin: 4px 8px; }
.fv-ns-wrap--sm .fv-ns-trigger { padding: 7px 12px; font-size: 13px; }
.fv-ns-wrap--lg .fv-ns-trigger { padding: 14px 16px; font-size: 15px; }
.fv-ns-wrap[style*="pointer-events:none"] .fv-ns-trigger { cursor: not-allowed; }

/* ============================================================
   STEPPER
   ============================================================ */
.fv-stepper { display: flex; align-items: center; gap: 0; width: 100%; }
.fv-step { display: flex; align-items: center; gap: 10px; flex: 1; position: relative; }
.fv-step:last-child { flex: 0 0 auto; }
.fv-step__indicator {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0;
  background: var(--bg-item); border: 2px solid var(--border-outer);
  color: var(--text-tertiary); transition: all 0.3s;
  box-shadow: var(--shadow-spatial-item);
}
.fv-step.active .fv-step__indicator {
  background: var(--accent-gradient); border-color: var(--accent);
  color: #fff; box-shadow: 0 4px 12px var(--accent-soft);
}
.fv-step.done .fv-step__indicator {
  background: var(--accent-gradient); border-color: var(--accent);
  color: #fff; box-shadow: 0 4px 12px var(--accent-soft);
}
.fv-step__content { flex: 1; }
.fv-step__title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.fv-step.active .fv-step__title { color: var(--accent); }
.fv-step.done .fv-step__title { color: var(--text-primary); }
.fv-step__desc { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.fv-step__line {
  flex: 1; height: 2px; background: var(--border-outer); margin: 0 12px;
  transition: background 0.3s;
}
.fv-step.done .fv-step__line { background: var(--accent); }

/* ============================================================
   NUMBER FIELD
   ============================================================ */
.fv-number-field { display: inline-flex; align-items: center; gap: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-outer); box-shadow: var(--shadow-spatial-item); }
.fv-number-field__btn {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-item); border: none; cursor: pointer;
  color: var(--text-secondary); font-size: 16px; transition: all 0.15s;
}
.fv-number-field__btn:hover { background: var(--accent-soft); color: var(--accent); }
.fv-number-field__btn:active { transform: scale(0.92); }
.fv-number-field__input {
  width: 56px; height: 38px; text-align: center; border: none; border-left: 1px solid var(--border-outer); border-right: 1px solid var(--border-outer);
  background: var(--bg-item); font-size: 14px; font-weight: 600;
  color: var(--text-primary); outline: none; -moz-appearance: textfield;
}
.fv-number-field__input::-webkit-outer-spin-button,
.fv-number-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ============================================================
   TAGS INPUT
   ============================================================ */
.fv-tags-input {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px; min-height: 42px;
  background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); box-shadow: var(--shadow-spatial-item);
  cursor: text; transition: border-color 0.2s;
}
.fv-tags-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.fv-tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
  font-size: 12px; font-weight: 500; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
}
.fv-tag__remove {
  display: flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; cursor: pointer;
  font-size: 10px; transition: background 0.15s;
}
.fv-tag__remove:hover { background: var(--accent); color: #fff; }
.fv-tags-input__field {
  flex: 1; min-width: 80px; border: none; outline: none; background: transparent;
  font-size: 14px; color: var(--text-primary);
}

/* ============================================================
   ATTACHMENT / FILE UPLOAD
   ============================================================ */
.fv-attachment {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 20px; border: 2px dashed var(--border-outer);
  border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s;
  text-align: center;
}
.fv-attachment:hover { border-color: var(--accent); background: var(--accent-soft); }
.fv-attachment.dragover { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.fv-attachment__icon { font-size: 28px; color: var(--text-tertiary); }
.fv-attachment:hover .fv-attachment__icon { color: var(--accent); }
.fv-attachment__text { font-size: 13px; color: var(--text-secondary); }
.fv-attachment__text strong { color: var(--accent); }
.fv-attachment__hint { font-size: 11px; color: var(--text-tertiary); }
.fv-attachment__file {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-sm); margin-top: 8px; width: 100%;
}
.fv-attachment__file-icon { font-size: 18px; color: var(--accent); }
.fv-attachment__file-info { flex: 1; text-align: left; }
.fv-attachment__file-name { font-size: 13px; font-weight: 500; color: var(--text-primary); }
.fv-attachment__file-size { font-size: 11px; color: var(--text-tertiary); }
.fv-attachment__file-remove { cursor: pointer; color: var(--text-tertiary); font-size: 14px; transition: color 0.15s; }
.fv-attachment__file-remove:hover { color: var(--color-danger); }

/* Compact Upload */
.fv-attachment--compact {
  flex-direction: row; gap: 6px; padding: 8px 14px; border-style: solid;
  border: 1px solid var(--border-outer); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-secondary); cursor: pointer;
  transition: all 0.15s; white-space: nowrap;
}
.fv-attachment--compact:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* File Chip */
.fv-file-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--bg-item); border: 1px solid var(--border-outer);
  border-radius: var(--radius-sm); font-size: 12px; color: var(--text-primary);
}
.fv-file-chip i { font-size: 14px; color: var(--accent); }
.fv-file-chip button {
  background: none; border: none; color: var(--text-tertiary); cursor: pointer;
  font-size: 12px; padding: 0; line-height: 1; transition: color 0.15s;
}
.fv-file-chip button:hover { color: var(--color-danger); }

/* Image Upload */
.fv-attachment--image { padding: 20px; }
.fv-attachment--image .fv-attachment__preview {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 13px; color: var(--text-secondary);
}
.fv-attachment--image .fv-attachment__preview i { font-size: 32px; color: var(--text-tertiary); }
.fv-attachment--image:hover .fv-attachment__preview i { color: var(--accent); }

/* ============================================================
   BUBBLE (Chat)
   ============================================================ */
.fv-bubble {
  display: inline-block; max-width: 75%; padding: 10px 14px;
  font-size: 14px; line-height: 1.5; border-radius: var(--radius-lg);
  position: relative; margin-bottom: 6px;
}
.fv-bubble--sent {
  background: var(--accent-gradient); color: #fff;
  border-bottom-right-radius: 4px; margin-left: auto;
}
.fv-bubble--received {
  background: var(--bg-item); color: var(--text-primary);
  border: 1px solid var(--border-outer); border-bottom-left-radius: 4px;
  box-shadow: var(--shadow-spatial-item);
}
.fv-bubble__time { font-size: 10px; opacity: 0.6; margin-top: 4px; display: block; }
.fv-bubble--sent .fv-bubble__time { text-align: right; }
.fv-bubble-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.fv-bubble-group--sent { align-items: flex-end; }
.fv-bubble-group--received { align-items: flex-start; }

/* ============================================================
   CHART
   ============================================================ */
.fv-chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding: 12px 0; perspective: 400px; }
.fv-chart__bar {
  flex: 1; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--accent-gradient); min-height: 8px;
  transition: height 0.4s cubic-bezier(0.16,1,0.3,1), filter 0.2s, transform 0.2s;
  position: relative; cursor: pointer;
  transform: rotateX(3deg); transform-origin: bottom center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -2px 0 rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.1);
}
.fv-chart__bar:hover { opacity: 0.9; filter: brightness(1.08); transform: rotateX(3deg) translateY(-4px); }
.fv-chart__bar::after {
  content: attr(data-label); position: absolute; bottom: -22px; left: 50%;
  transform: translateX(-50%); font-size: 10px; color: var(--text-tertiary); white-space: nowrap;
}
.fv-chart__bar::before {
  content: attr(data-value); position: absolute; top: -20px; left: 50%;
  transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--text-primary); white-space: nowrap;
}

/* Stacked Bar */
.fv-chart--stacked { flex-direction: row; align-items: flex-end; height: 160px; padding: 12px 0; perspective: 400px; }
.fv-chart__bar-stack {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  height: 100%; gap: 2px; position: relative; cursor: pointer;
  transform: rotateX(2deg); transform-origin: bottom center;
}
.fv-chart__bar-stack::after {
  content: attr(data-label); position: absolute; bottom: -22px; left: 50%;
  transform: translateX(-50%); font-size: 10px; color: var(--text-tertiary); white-space: nowrap;
}
.fv-chart__bar-segment {
  border-radius: 2px; min-height: 3px; transition: height 0.4s cubic-bezier(0.16,1,0.3,1), filter 0.2s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.15);
}
.fv-chart__bar-stack:hover .fv-chart__bar-segment { opacity: 0.85; filter: brightness(1.08); }
.fv-chart__bar-stack:hover { transform: rotateX(2deg) translateY(-4px); }

/* Horizontal Bar */
.fv-chart--horizontal { flex-direction: column; align-items: stretch; height: auto; gap: 10px; }
.fv-chart__hbar { display: flex; align-items: center; gap: 12px; }
.fv-chart__hbar-label { width: 80px; font-size: 12px; color: var(--text-secondary); text-align: right; flex-shrink: 0; }
.fv-chart__hbar-track {
  flex: 1; height: 26px; background: var(--bg-sunken); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: inset 0 2px 4px rgba(0,0,0,0.08);
}
.fv-chart__hbar-fill {
  height: 100%; border-radius: var(--radius-sm); display: flex; align-items: center;
  padding: 0 8px; font-size: 11px; font-weight: 600; color: #fff;
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1); white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), inset 0 -1px 0 rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.12);
  background-image: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 50%, rgba(0,0,0,0.1) 100%);
}
.fv-chart__hbar:hover .fv-chart__hbar-fill { filter: brightness(1.08); }

/* Donut */
.fv-chart--donut {
  position: relative; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
  transition: transform 0.3s, filter 0.3s;
}
.fv-chart--donut:hover { transform: scale(1.04); filter: drop-shadow(0 6px 20px rgba(0,0,0,0.2)); }
.fv-chart__donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fv-chart__donut-svg circle { transition: stroke-width 0.2s; }
.fv-chart__donut-svg circle:hover { stroke-width: 4; }
.fv-chart__donut-center {
  position: absolute; z-index: 1; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.fv-chart__donut-value { font-size: 16px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.fv-chart__donut-label { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }

/* Line Chart */
.fv-chart--line { flex-direction: column; align-items: stretch; height: auto; gap: 0; position: relative; }
.fv-chart--line svg { overflow: visible; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1)); }
.fv-chart--line circle { cursor: pointer; transition: r 0.15s, filter 0.15s; }
.fv-chart--line circle:hover { r: 6; filter: drop-shadow(0 0 6px var(--accent)); }

/* Chart Tooltip */
.fv-chart__tooltip {
  position: absolute; z-index: 10; padding: 6px 10px; border-radius: var(--radius-sm);
  background: var(--bg-elevated); border: 1px solid var(--border-outer);
  box-shadow: var(--shadow-sm); font-size: 12px; color: var(--text-primary);
  line-height: 1.4; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.15s;
  transform: translate(-50%, -130%);
}

/* ============================================================
   SONNER (Toast Notification)
   ============================================================ */
.fv-sonner {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.fv-sonner__item {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--bg-card); border: 1px solid var(--border-outer);
  border-radius: var(--radius-md); min-width: 280px; max-width: 380px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.15);
  pointer-events: auto; animation: fv-sonner-in 0.3s cubic-bezier(0.16,1,0.3,1);
}
.fv-sonner__item.removing { animation: fv-sonner-out 0.25s ease-in forwards; }
.fv-sonner__icon { font-size: 18px; flex-shrink: 0; }
.fv-sonner__text { font-size: 13px; color: var(--text-primary); flex: 1; }
.fv-sonner__close { cursor: pointer; color: var(--text-tertiary); font-size: 14px; flex-shrink: 0; transition: color 0.15s; }
.fv-sonner__close:hover { color: var(--text-primary); }
.fv-sonner__item--success { background: color-mix(in srgb, var(--color-success) 10%, var(--bg-card)); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); }
.fv-sonner__item--success .fv-sonner__icon { color: var(--color-success); }
.fv-sonner__item--error { background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-card)); border-color: color-mix(in srgb, var(--color-danger) 30%, transparent); }
.fv-sonner__item--error .fv-sonner__icon { color: var(--color-danger); }
.fv-sonner__item--warning { background: color-mix(in srgb, var(--color-warning) 10%, var(--bg-card)); border-color: color-mix(in srgb, var(--color-warning) 30%, transparent); }
.fv-sonner__item--warning .fv-sonner__icon { color: var(--color-warning); }
.fv-sonner__item--info { background: color-mix(in srgb, var(--accent) 10%, var(--bg-card)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.fv-sonner__item--info .fv-sonner__icon { color: var(--accent); }
@keyframes fv-sonner-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fv-sonner-out { to { opacity: 0; transform: translateX(40px); } }

/* ============================================================
   UTILITIES
   ============================================================ */
.fv-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.fv-grid { display: grid; gap: 16px; }
.fv-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fv-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fv-grid--4 { grid-template-columns: repeat(4, 1fr); }
.fv-wrap { width: 100%; max-width: 760px; }
.fv-mb-sm { margin-bottom: 8px; }
.fv-mb-md { margin-bottom: 16px; }
.fv-mb-lg { margin-bottom: 24px; }
.fv-mt-md { margin-top: 16px; }
.fv-text-sm { font-size: 13px; }
.fv-text-muted { color: var(--text-secondary); }
.fv-hidden { display: none; }

@media (max-width: 760px) {
  .fv-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fv-browser { grid-template-columns: 1fr; }
  .fv-browser__side { display: none; }
  .fv-version-grid { grid-template-columns: 1fr; }
  .fv-v-card--wide, .fv-v-card--checkpoint { grid-column: span 1; }
}


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

/* === accordion === */
.fv-accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fv-accordion__item {
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(200%);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
  overflow: hidden;
}

.fv-accordion__trigger {
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  transition: all 0.2s;
}

.fv-accordion__trigger:hover {
  background: var(--accent-soft);
}

.fv-accordion__trigger i {
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1);
  font-size: 14px;
  color: var(--text-secondary);
}

.fv-accordion__item.open .fv-accordion__trigger i {
  transform: rotate(180deg);
}

.fv-accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.25,1,0.5,1);
}

.fv-accordion__item.open .fv-accordion__content {
  max-height: 500px;
}

.fv-accordion__body {
  padding: 0 20px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

[data-fv-theme="dark"] .fv-accordion__item {
  border: 1px solid var(--border-outer);
}

/* === action-sheet === */
.fv-action-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1001;
  max-height: 85vh;
  overflow-y: auto;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-bottom: none;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: var(--shadow-spatial-card);
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.fv-action-sheet--open {
  transform: translateY(0);
}

.fv-action-sheet__handle {
  display: block;
  width: 40px;
  height: 5px;
  margin: 10px auto 4px;
  border-radius: 99px;
  background: var(--border-outer);
  flex-shrink: 0;
}

.fv-action-sheet__title {
  padding: 6px 20px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.fv-action-sheet__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 20px;
  border: none;
  border-bottom: 1px solid var(--border-outer);
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-action-sheet__item:last-child {
  border-bottom: none;
}

.fv-action-sheet__item i,
.fv-action-sheet__item-icon {
  width: 22px;
  text-align: center;
  font-size: 19px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.fv-action-sheet__item-label {
  flex: 1;
  min-width: 0;
}

.fv-action-sheet__item:hover {
  background: var(--bg-item);
}

.fv-action-sheet__item:active {
  background: var(--accent-soft);
}

.fv-action-sheet__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.fv-action-sheet__item:disabled,
.fv-action-sheet__item[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.fv-action-sheet__item--danger {
  color: var(--color-danger);
}

.fv-action-sheet__item--danger i,
.fv-action-sheet__item--danger .fv-action-sheet__item-icon {
  color: var(--color-danger);
}

.fv-action-sheet__item--danger:hover,
.fv-action-sheet__item--danger:active {
  background: rgba(215, 38, 30, 0.1);
}

.fv-action-sheet__item--cancel {
  justify-content: center;
  font-weight: 600;
  color: var(--text-primary);
  border-top: 8px solid var(--border-outer);
}

.fv-action-sheet__divider {
  height: 1px;
  margin: 5px 0;
  background: var(--border-outer);
  border: none;
}

[data-fv-theme="dark"] .fv-action-sheet {
  border-color: var(--border-outer);
}

/* === activity-feed === */
.fv-activity-feed {
  display: flex;
  flex-direction: column;
}

.fv-activity-feed__item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-outer);
}

.fv-activity-feed__item:last-child {
  border-bottom: none;
}

.fv-activity-feed__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
}

.fv-activity-feed__icon--success {
  background: rgba(36, 176, 73, 0.1);
  color: var(--color-success);
}

.fv-activity-feed__icon--warning {
  background: rgba(230, 138, 0, 0.1);
  color: var(--color-warning);
}

.fv-activity-feed__icon--danger {
  background: rgba(215, 38, 30, 0.1);
  color: var(--color-danger);
}

[data-fv-theme="dark"] .fv-activity-feed__item {
  border-bottom: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-activity-feed__text {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-activity-feed__text strong {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-activity-feed__time {
  color: var(--text-tertiary);
}

.fv-activity-feed__content {
  flex: 1;
  min-width: 0;
}

.fv-activity-feed__text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.fv-activity-feed__text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.fv-activity-feed__time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* === ai-response === */
.fv-ai-response {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}

.fv-ai-response p {
  margin: 8px 0;
}

.fv-ai-response p:first-child {
  margin-top: 0;
}

.fv-ai-response p:last-child {
  margin-bottom: 0;
}

.fv-ai-response strong {
  font-weight: 700;
}

.fv-ai-response em {
  font-style: italic;
}

.fv-ai-response code {
  background: var(--bg-item);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: monospace;
}

.fv-ai-response pre {
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 16px;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--border-inner);
}

[data-fv-theme="dark"] .fv-ai-response pre {
  border-color: var(--border-outer);
}

.fv-ai-response pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.fv-ai-response ul,
.fv-ai-response ol {
  margin: 8px 0;
  padding-left: 24px;
}

.fv-ai-response li {
  margin: 4px 0;
}

.fv-ai-response blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 12px 0;
  color: var(--text-secondary);
  font-style: italic;
}

.fv-ai-response a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.fv-ai-response a:hover {
  text-decoration: underline;
}

.fv-ai-response table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.fv-ai-response th,
.fv-ai-response td {
  padding: 8px 12px;
  border: 1px solid var(--border-outer);
  text-align: left;
  font-size: 13px;
}

.fv-ai-response th {
  background: var(--bg-item);
  font-weight: 600;
}

.fv-ai-response h1,
.fv-ai-response h2,
.fv-ai-response h3,
.fv-ai-response h4 {
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--text-primary);
}

.fv-ai-response h1 { font-size: 20px; }
.fv-ai-response h2 { font-size: 18px; }
.fv-ai-response h3 { font-size: 16px; }
.fv-ai-response h4 { font-size: 15px; }

/* === alert === */
.fv-alert {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  position: relative;
}

.fv-alert i {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.fv-alert--info {
  background: var(--accent-soft);
  border: 1px solid rgba(0,113,227,0.15);
  color: var(--accent);
}

.fv-alert--success {
  background: rgba(36,176,73,0.08);
  border: 1px solid rgba(36,176,73,0.15);
  color: var(--color-success);
}

.fv-alert--warning {
  background: rgba(230,138,0,0.08);
  border: 1px solid rgba(230,138,0,0.15);
  color: var(--color-warning);
}

.fv-alert--danger {
  background: rgba(215,38,30,0.08);
  border: 1px solid rgba(215,38,30,0.15);
  color: var(--color-danger);
}

.fv-alert__title {
  font-weight: 700;
  margin-bottom: 4px;
}

.fv-alert__desc {
  opacity: 0.9;
  line-height: 1.5;
}

.fv-alert__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: all 0.2s;
}

.fv-alert__close:hover {
  opacity: 1;
  background: rgba(0,0,0,0.05);
}

/* === analytics-card === */
.fv-analytics-card {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.fv-analytics-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.fv-analytics-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.fv-analytics-card__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.fv-analytics-card__value {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.fv-analytics-card__change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
}

.fv-analytics-card__change--up {
  color: var(--color-success);
}

.fv-analytics-card__change--down {
  color: var(--color-danger);
}

.fv-analytics-card__chart {
  height: 60px;
  margin-top: 12px;
}

.fv-analytics-card__footer {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-outer);
  font-size: 12px;
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-analytics-card {
  background: var(--bg-card);
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-analytics-card__title {
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-analytics-card__value {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-analytics-card__footer {
  border-top: 1px solid var(--border-outer);
  color: var(--text-tertiary);
}

/* === area-chart === */
.fv-area-chart {
  position: relative;
  overflow: hidden;
}

.fv-area-chart__area {
  fill: var(--accent);
  opacity: 0.15;
}

.fv-area-chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-area-chart__dot {
  fill: var(--accent);
  stroke: var(--bg-card);
  stroke-width: 2;
}

.fv-area-chart__grid {
  stroke: var(--border-outer);
  stroke-dasharray: 4 4;
}

.fv-area-chart__label {
  fill: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}

/* === audio-player === */
.fv-audio,
.fv-audio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
}

.fv-audio__art {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bg-item);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 20px;
  overflow: hidden;
}

.fv-audio__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.fv-audio__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-audio__artist {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-audio__wave {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--bg-item);
  border-radius: 999px;
  overflow: hidden;
  cursor: pointer;
}

.fv-audio__progress {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  background: var(--accent-gradient);
  border-radius: 999px;
  transition: width 0.1s linear;
}

.fv-audio__time {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 38px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.fv-audio__controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fv-audio__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-item);
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, transform 0.15s;
}

.fv-audio__btn:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.fv-audio__btn:active {
  transform: scale(0.94);
}

.fv-audio__btn--play {
  width: 44px;
  height: 44px;
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
}

.fv-audio__btn--play:hover {
  filter: brightness(1.05);
  color: #fff;
  background: var(--accent-gradient);
}

.fv-audio__track {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  flex: 1;
  min-width: 0;
}

.fv-audio__bar {
  flex: 1;
  min-height: 3px;
  height: 40%;
  background: var(--bg-item);
  border-radius: 2px;
  transition: background 0.15s, height 0.15s;
}

.fv-audio__bar--active {
  background: var(--accent);
}

[data-fv-theme="dark"] .fv-audio,
[data-fv-theme="dark"] .fv-audio-player {
  border-color: var(--border-outer);
}

/* === avatar === */
.fv-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-spatial-item);
  border: 2px solid var(--border-inner);
  overflow: hidden;
  flex-shrink: 0;
}

.fv-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

.fv-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: 18px;
}

.fv-avatar--xl {
  width: 72px;
  height: 72px;
  font-size: 22px;
}

/* === badge === */
.fv-badge {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid var(--border-inner);
  display: inline-flex;
  align-items: center;
  transition: all 0.2s;
  text-shadow: 0 1px 1px rgba(0,0,0,0.1);
  gap: 6px;
}

.fv-badge--accent { background: var(--accent-gradient); color: #fff; }
.fv-badge--success { background: var(--success-gradient); color: #fff; }
.fv-badge--warning { background: var(--warning-gradient); color: #fff; }
.fv-badge--danger { background: var(--danger-gradient); color: #fff; }
.fv-badge--accent-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); box-shadow: none; }
.fv-badge--success-outline { background: transparent; color: var(--color-success); border: 1.5px solid var(--color-success); box-shadow: none; }
.fv-badge--warning-outline { background: transparent; color: var(--color-warning); border: 1.5px solid var(--color-warning); box-shadow: none; }
.fv-badge--danger-outline { background: transparent; color: var(--color-danger); border: 1.5px solid var(--color-danger); box-shadow: none; }
.fv-badge--count {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.fv-badge--dot::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* === bottom-nav === */
.fv-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 8px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-top: 1px solid var(--border-inner);
  z-index: 100;
}

.fv-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px;
  border-radius: var(--radius-lg);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  background: none;
  border: none;
  position: relative;
}

.fv-bottom-nav__item i {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fv-bottom-nav__item.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.fv-bottom-nav__item.active i {
  transform: scale(1.1) translateY(-1px);
}

.fv-bottom-nav__item:active {
  transform: scale(0.9);
}

.fv-bottom-nav__badge {
  position: absolute;
  top: 2px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--color-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

[data-fv-theme="dark"] .fv-bottom-nav {
  border-top-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-bottom-nav__item.active {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* === bottom-sheet === */
.fv-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  border: 1px solid var(--border-inner);
  border-bottom: none;
  box-shadow: var(--shadow-spatial-card);
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  max-height: 85vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fv-bottom-sheet.open {
  transform: translateY(0);
}

.fv-bottom-sheet__handle {
  width: 40px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 2px;
  margin: 8px auto;
  opacity: 0.5;
}

.fv-bottom-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 12px;
}

.fv-bottom-sheet__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fv-bottom-sheet__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-item);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fv-bottom-sheet__body {
  padding: 0 20px 20px;
}

.fv-bottom-sheet__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.fv-bottom-sheet__overlay.visible {
  opacity: 1;
  visibility: visible;
}

[data-fv-theme="dark"] .fv-bottom-sheet {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-bottom-sheet__overlay {
  background: rgba(0, 0, 0, 0.6);
}

.fv-bottom-sheet__action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-outer);
  font-size: 15px;
  color: var(--text-primary);
  cursor: pointer;
}

.fv-bottom-sheet__action:last-child {
  border-bottom: none;
}

.fv-bottom-sheet__action-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-size: 16px;
}

/* === breadcrumb === */
.fv-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.fv-breadcrumb__item {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.fv-breadcrumb__item:hover {
  color: var(--accent);
}

.fv-breadcrumb__item.active {
  color: var(--text-primary);
  pointer-events: none;
}

.fv-breadcrumb__sep {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* === button === */
.fv-btn {
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-xl);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25,1,0.5,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  font-family: inherit;
  gap: 8px;
  white-space: nowrap;
}

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

.fv-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.fv-btn--primary {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.fv-btn--primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-btn);
}

.fv-btn--secondary,
.fv-btn--ghost {
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(242,244,247,0.85) 100%);
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  border: 1px solid rgba(0,0,0,0.04);
  border-top: 1px solid rgba(255,255,255,0.6);
}

[data-fv-theme="dark"] .fv-btn--secondary,
[data-fv-theme="dark"] .fv-btn--ghost {
  background: linear-gradient(180deg, rgba(54,54,58,0.85) 0%, rgba(38,38,42,0.85) 100%);
  color: var(--text-primary);
  border: 1px solid rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.1);
}

.fv-btn--danger {
  background: var(--danger-gradient);
  color: #fff;
  box-shadow: 0 4px 12px rgba(215,38,30,0.25),
    inset 0 1.5px 1px rgba(255,255,255,0.4),
    inset 0 -1.5px 1px rgba(0,0,0,0.15);
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.fv-btn--sm {
  padding: 7px 14px;
  font-size: 13px;
}

.fv-btn--lg {
  padding: 14px 28px;
  font-size: 17px;
}

.fv-btn--icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
}

.fv-btn--icon.fv-btn--sm {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.fv-btn--icon.fv-btn--lg {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.fv-btn--block {
  width: 100%;
}

/* === calendar-widget === */
.fv-calendar-widget {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 20px;
}

.fv-calendar-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fv-calendar-widget__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fv-calendar-widget__nav {
  display: flex;
  gap: 4px;
}

.fv-calendar-widget__nav-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.fv-calendar-widget__nav-btn:hover {
  background: var(--bg-item);
}

.fv-calendar-widget__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.fv-calendar-widget__weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  padding: 4px 0;
}

.fv-calendar-widget__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.fv-calendar-widget__day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.fv-calendar-widget__day:hover {
  background: var(--bg-item);
}

.fv-calendar-widget__day--today {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.fv-calendar-widget__day--selected {
  background: var(--accent-gradient);
  color: #fff;
  font-weight: 700;
}

.fv-calendar-widget__day--other-month {
  color: var(--text-tertiary);
  opacity: 0.5;
}

.fv-calendar-widget__day--has-event {
  position: relative;
}

.fv-calendar-widget__day--has-event::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

[data-fv-theme="dark"] .fv-calendar-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-calendar-widget__title {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-calendar-widget__weekday {
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-calendar-widget__day {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-calendar-widget__day:hover {
  background: var(--bg-item);
}

[data-fv-theme="dark"] .fv-calendar-widget__day--today {
  background: var(--accent-soft);
  color: var(--accent);
}

[data-fv-theme="dark"] .fv-calendar-widget__day--selected {
  background: var(--accent-gradient);
  color: #fff;
}

[data-fv-theme="dark"] .fv-calendar-widget__day--other-month {
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-calendar-widget__nav-btn {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-calendar-widget__nav-btn:hover {
  background: var(--bg-item);
}

/* === card === */
.fv-card {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 28px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.25,1,0.5,1),
    box-shadow 0.4s cubic-bezier(0.25,1,0.5,1);
}

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

.fv-card--no-hover:hover {
  transform: none;
}

/* === cart-item === */
.fv-cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  position: relative;
  transition: background .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-cart-item + .fv-cart-item {
  border-top: 1px solid var(--border-outer);
}

.fv-cart-item:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.fv-cart-item__media {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
}

.fv-cart-item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fv-cart-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fv-cart-item__title,
.fv-cart-item__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-cart-item__meta {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-cart-item__price {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--accent);
}

.fv-cart-item__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-xl);
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
  flex-shrink: 0;
}

.fv-cart-item__qty-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-primary);
  background: transparent;
  transition: all .15s cubic-bezier(.25, 1, .5, 1);
}

.fv-cart-item__qty-btn:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
}

.fv-cart-item__qty-btn:active {
  transform: scale(.9);
}

.fv-cart-item__qty-value {
  min-width: 22px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.fv-cart-item__remove {
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-tertiary);
  background: transparent;
  transition: all .15s cubic-bezier(.25, 1, .5, 1);
}

.fv-cart-item__remove:hover {
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.fv-cart-item__remove:active {
  transform: scale(.9);
}

.fv-cart-item--compact {
  gap: 10px;
  padding: 10px 12px;
}

.fv-cart-item--compact .fv-cart-item__media {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.fv-cart-item--compact .fv-cart-item__title,
.fv-cart-item--compact .fv-cart-item__name {
  font-size: 13px;
}

[data-fv-theme="dark"] .fv-cart-item + .fv-cart-item {
  border-top: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-cart-item:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

[data-fv-theme="dark"] .fv-cart-item__remove:hover {
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
}

/* === chat-bubble === */
.fv-chat-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: var(--radius-xl);
  font-size: 14px;
  line-height: 1.5;
  animation: fv-chat-bubble-in 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-chat-bubble--user {
  background: var(--accent-gradient);
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
  box-shadow: var(--shadow-spatial-btn);
}

.fv-chat-bubble--assistant {
  background: var(--bg-item);
  color: var(--text-primary);
  margin-right: auto;
  border-bottom-left-radius: 4px;
  border: 1px solid var(--border-inner);
}

.fv-chat-bubble--system {
  background: var(--accent-soft);
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 80%;
  text-align: center;
  font-size: 13px;
  border: 1px solid var(--border-inner);
}

.fv-chat-bubble__sender {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 4px;
  opacity: 0.8;
}

.fv-chat-bubble__time {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}

.fv-chat-bubble--assistant .fv-chat-bubble__time {
  text-align: left;
}

.fv-chat-bubble code {
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: monospace;
}

.fv-chat-bubble--assistant code {
  background: var(--bg-card);
}

[data-fv-theme="dark"] .fv-chat-bubble--assistant {
  background: var(--bg-item);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-chat-bubble--system {
  background: var(--accent-soft);
  border-color: var(--border-outer);
}

@keyframes fv-chat-bubble-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* === chat-window === */
.fv-chat-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
  position: relative;
}

.fv-chat-window__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-outer);
  background: var(--bg-item);
  flex-shrink: 0;
}

.fv-chat-window__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

.fv-chat-window__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-outer) transparent;
}

.fv-chat-window__body::-webkit-scrollbar {
  width: 8px;
}

.fv-chat-window__body::-webkit-scrollbar-thumb {
  background: var(--border-outer);
  border-radius: 999px;
}

.fv-chat-window__messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fv-chat-window__input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-outer);
  background: var(--bg-item);
  flex-shrink: 0;
}

.fv-chat-window__input,
.fv-chat-window__textarea {
  flex: 1;
  min-width: 0;
  padding: 11px 16px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-inner);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  outline: none;
  resize: none;
  min-height: 44px;
  max-height: 140px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-chat-window__textarea {
  max-height: 140px;
}

.fv-chat-window__input::placeholder,
.fv-chat-window__textarea::placeholder {
  color: var(--text-tertiary);
}

.fv-chat-window__input:focus,
.fv-chat-window__textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

.fv-chat-window__input:disabled,
.fv-chat-window__textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fv-chat-window__send {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-spatial-btn);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  transition: filter 0.15s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-chat-window__send:hover {
  filter: brightness(1.05);
}

.fv-chat-window__send:active {
  transform: scale(0.94);
}

.fv-chat-window__send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-btn);
}

.fv-chat-window__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.fv-chat-window__typing {
  padding: 0 18px 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
}

[data-fv-theme="dark"] .fv-chat-window {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-chat-window__header {
  background: var(--bg-item);
  border-bottom-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-chat-window__input-wrapper {
  background: var(--bg-item);
  border-top-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-chat-window__input,
[data-fv-theme="dark"] .fv-chat-window__textarea {
  background: var(--bg-card);
  border-color: var(--border-outer);
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-chat-window__input:focus,
[data-fv-theme="dark"] .fv-chat-window__textarea:focus {
  border-color: var(--accent);
}

/* === checkbox === */
.fv-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.fv-checkbox input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fv-checkbox__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--border-outer);
  background: var(--bg-item);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.fv-checkbox__box::after {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.2s;
  margin-top: -2px;
}

.fv-checkbox input:checked + .fv-checkbox__box {
  background: var(--accent-gradient);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-checkbox input:checked + .fv-checkbox__box::after {
  transform: rotate(-45deg) scale(1);
}

.fv-checkbox__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.fv-checkbox:hover .fv-checkbox__box {
  border-color: var(--accent);
}

/* === checkbox-group === */
.fv-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fv-checkbox-group--row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}

.fv-checkbox-group--sm {
  gap: 8px;
}

.fv-checkbox-group--lg {
  gap: 16px;
}

.fv-checkbox-group__legend {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  letter-spacing: -0.1px;
}

/* === checkout-stepper === */
.fv-checkout-stepper {
  display: flex;
  align-items: flex-start;
  padding: 8px 4px;
}

.fv-checkout-stepper__step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.fv-checkout-stepper__step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 17px;
  left: calc(-50% + 18px);
  right: calc(50% - 18px);
  height: 2px;
  background: var(--border-outer);
  z-index: 0;
  transition: background .35s cubic-bezier(.25, 1, .5, 1);
}

.fv-checkout-stepper__dot {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-tertiary);
  background: var(--bg-item);
  border: 2px solid var(--border-outer);
  box-shadow: var(--shadow-spatial-item);
  transition: all .35s cubic-bezier(.25, 1, .5, 1);
}

.fv-checkout-stepper__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 96px;
  transition: color .35s cubic-bezier(.25, 1, .5, 1);
}

.fv-checkout-stepper__connector {
  flex: 1;
  height: 2px;
  background: var(--border-outer);
  margin: 17px 4px 0;
  transition: background .35s cubic-bezier(.25, 1, .5, 1);
}

.fv-checkout-stepper__step--done .fv-checkout-stepper__dot,
.fv-checkout-stepper__step.is-done .fv-checkout-stepper__dot {
  background: var(--color-success);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(36, 176, 73, .3), inset 0 1px 1px rgba(255, 255, 255, .4);
}

.fv-checkout-stepper__step--active .fv-checkout-stepper__dot,
.fv-checkout-stepper__step.is-active .fv-checkout-stepper__dot {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  transform: scale(1.1);
  box-shadow: var(--shadow-spatial-btn);
}

.fv-checkout-stepper__step--done .fv-checkout-stepper__label,
.fv-checkout-stepper__step.is-done .fv-checkout-stepper__label {
  color: var(--color-success);
}

.fv-checkout-stepper__step--active .fv-checkout-stepper__label,
.fv-checkout-stepper__step.is-active .fv-checkout-stepper__label {
  color: var(--text-primary);
}

.fv-checkout-stepper__step--done::before,
.fv-checkout-stepper__step.is-done::before {
  background: var(--color-success);
}

.fv-checkout-stepper__step--active::before,
.fv-checkout-stepper__step.is-active::before {
  background: var(--accent);
}

.fv-checkout-stepper__step--done .fv-checkout-stepper__connector,
.fv-checkout-stepper__step.is-done .fv-checkout-stepper__connector {
  background: var(--color-success);
}

.fv-checkout-stepper__step--active .fv-checkout-stepper__connector,
.fv-checkout-stepper__step.is-active .fv-checkout-stepper__connector {
  background: var(--accent);
}

.fv-checkout-stepper--vertical {
  flex-direction: column;
  align-items: stretch;
}

.fv-checkout-stepper--vertical .fv-checkout-stepper__step {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
}

.fv-checkout-stepper--vertical .fv-checkout-stepper__step:not(:first-child)::before {
  top: auto;
  bottom: 50%;
  left: 18px;
  right: auto;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.fv-checkout-stepper--vertical .fv-checkout-stepper__connector {
  width: 2px;
  height: auto;
  flex: 1;
  margin: 0 0 0 17px;
}

[data-fv-theme="dark"] .fv-checkout-stepper__dot {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-checkout-stepper__step:not(:first-child)::before,
[data-fv-theme="dark"] .fv-checkout-stepper__connector {
  background: var(--border-outer);
}

/* === chip === */
.fv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  transition: all 0.15s;
}

.fv-chip:hover {
  box-shadow: var(--shadow-spatial-btn);
}

.fv-chip--accent {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: transparent;
}

.fv-chip--success {
  background: rgba(36,176,73,0.08);
  color: var(--color-success);
  border-color: transparent;
}

.fv-chip--warning {
  background: rgba(230,138,0,0.08);
  color: var(--color-warning);
  border-color: transparent;
}

.fv-chip--danger {
  background: rgba(215,38,30,0.08);
  color: var(--color-danger);
  border-color: transparent;
}

.fv-chip__remove {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.15s;
}

.fv-chip__remove:hover {
  background: rgba(215,38,30,0.1);
  color: var(--color-danger);
}

/* === circular-progress === */
.fv-circular {
  --val: 0;
  --size: 76px;
  --thickness: 8px;
  --ring: var(--accent);
  --track: var(--border-outer);
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: conic-gradient(var(--ring) calc(var(--val) * 1%), var(--track) 0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.fv-circular::before {
  content: "";
  position: absolute;
  inset: var(--thickness);
  border-radius: 50%;
  background: var(--bg-card);
  box-shadow: inset 0 1px 1px var(--border-inner);
}

.fv-circular__label {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.fv-circular--success { --ring: var(--color-success); }
.fv-circular--warning { --ring: var(--color-warning); }
.fv-circular--danger  { --ring: var(--color-danger); }

.fv-circular--sm { --size: 50px; --thickness: 6px; }
.fv-circular--sm .fv-circular__label { font-size: 12px; }

.fv-circular--lg { --size: 110px; --thickness: 12px; }
.fv-circular--lg .fv-circular__label { font-size: 24px; }

.fv-circular-progress {
  --ring: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fv-circular-progress__svg {
  transform: rotate(-90deg);
  display: block;
}

.fv-circular-progress__track {
  fill: none;
  stroke: var(--border-outer);
}

.fv-circular-progress__value,
.fv-circular-progress__bar {
  fill: none;
  stroke: var(--ring);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-circular-progress--success { --ring: var(--color-success); }
.fv-circular-progress--warning { --ring: var(--color-warning); }
.fv-circular-progress--danger  { --ring: var(--color-danger); }

.fv-circular-progress__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.fv-circular-progress--sm .fv-circular-progress__label { font-size: 12px; }
.fv-circular-progress--lg .fv-circular-progress__label { font-size: 22px; }

[data-fv-theme="dark"] .fv-circular::before {
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.1);
}

/* === citation-block === */
.fv-citation-block {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 12px 0;
}

.fv-citation-block__content {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  font-style: italic;
}

.fv-citation-block__source {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.fv-citation-block__source a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.fv-citation-block__source a:hover {
  text-decoration: underline;
}

.fv-citation-block__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  vertical-align: super;
  margin-left: 2px;
  cursor: pointer;
}

.fv-citation-block__number:hover {
  background: var(--accent-gradient);
  color: #fff;
}

/* === code-block === */
.fv-code-block {
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 16px;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--border-inner);
}

.fv-code-block code {
  font-family: inherit;
  font-size: inherit;
}

.fv-code-block__line {
  display: flex;
}

.fv-code-block__line-number {
  color: var(--text-tertiary);
  margin-right: 16px;
  user-select: none;
  flex-shrink: 0;
  text-align: right;
  min-width: 24px;
}

.fv-code-block__line-content {
  flex: 1;
  white-space: pre;
}

.fv-code-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-item);
  border-bottom: 1px solid var(--border-inner);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-size: 12px;
  color: var(--text-tertiary);
}

.fv-code-block--with-header {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.fv-code-block__copy {
  padding: 4px 8px;
  border: none;
  background: var(--accent-soft);
  color: var(--text-tertiary);
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}

.fv-code-block__copy:hover {
  background: var(--accent);
  color: var(--text-primary);
}

.fv-code-block__keyword { color: #C678DD; }
.fv-code-block__string { color: #98C379; }
.fv-code-block__number { color: #D19A66; }
.fv-code-block__comment { color: #5C6370; font-style: italic; }
.fv-code-block__function { color: #61AFEF; }
.fv-code-block__type { color: #E5C07B; }

[data-fv-theme="dark"] .fv-code-block {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-code-block__copy:hover {
  background: var(--accent);
  color: var(--text-primary);
}

/* === code-renderer === */
.fv-code-renderer {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-inner);
}

.fv-code-renderer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-item);
  border-bottom: 1px solid var(--border-inner);
}

.fv-code-renderer__language {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
}

.fv-code-renderer__copy {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.fv-code-renderer__copy:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.fv-code-renderer__copy.copied {
  color: var(--color-success);
}

.fv-code-renderer__code {
  padding: 16px;
  overflow-x: auto;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  tab-size: 2;
}

.fv-code-renderer__code::-webkit-scrollbar {
  height: 6px;
}

.fv-code-renderer__code::-webkit-scrollbar-track {
  background: transparent;
}

.fv-code-renderer__code::-webkit-scrollbar-thumb {
  background: var(--text-tertiary);
  border-radius: 3px;
}

.fv-code-renderer__line-number {
  display: inline-block;
  width: 32px;
  text-align: right;
  padding-right: 16px;
  color: var(--text-tertiary);
  user-select: none;
}

.fv-code-renderer__line--highlighted {
  background: var(--accent-soft);
  margin: 0 -16px;
  padding: 0 16px;
}

.fv-code-renderer__footer {
  padding: 8px 16px;
  background: var(--bg-item);
  border-top: 1px solid var(--border-inner);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-code-renderer {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-code-renderer__copy:hover {
  background: var(--accent-soft);
}

/* === collapse === */
.fv-collapse {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.fv-collapse__item {
  border-bottom: 1px solid var(--border-outer);
}

.fv-collapse__item:last-child {
  border-bottom: none;
}

.fv-collapse__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  transition: color 0.15s;
}

.fv-collapse__trigger:hover {
  color: var(--accent);
}

.fv-collapse__icon {
  transition: transform 0.25s cubic-bezier(0.25,1,0.5,1);
  color: var(--text-tertiary);
  font-size: 14px;
}

.fv-collapse__item.open .fv-collapse__icon {
  transform: rotate(180deg);
}

.fv-collapse__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.25,1,0.5,1);
}

.fv-collapse__content {
  padding: 0 4px 16px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* === color-picker === */
.fv-color-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 12px;
}

.fv-color-picker__swatch {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 2px solid var(--border-outer);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-spatial-item);
  outline: none;
  position: relative;
  overflow: hidden;
}

.fv-color-picker__swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(
    #ccc 0%, #fff 25%,
    #ccc 25%, #fff 50%,
    #ccc 50%, #fff 75%,
    #ccc 75%, #fff 100%
  );
  background-size: 8px 8px;
  z-index: 0;
}

.fv-color-picker__swatch-color {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}

.fv-color-picker__swatch:hover {
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-item);
  transform: scale(1.05);
}

.fv-color-picker__swatch:active {
  transform: scale(0.95);
}

.fv-color-picker__swatch--sm {
  width: 32px;
  height: 32px;
}

.fv-color-picker__swatch--lg {
  width: 48px;
  height: 48px;
}

.fv-color-picker__palette {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  padding: 12px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
}

.fv-color-picker__swatch-option {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
  padding: 0;
}

.fv-color-picker__swatch-option:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.fv-color-picker__swatch-option--selected {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent), 0 2px 8px rgba(0,0,0,0.2);
  transform: scale(1.1);
}

.fv-color-picker__input {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fv-color-picker__input-field {
  flex: 1;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  font-family: monospace;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
}

.fv-color-picker__input-field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-color-picker__input-field::placeholder {
  color: var(--text-tertiary);
}

/* === command-menu === */
.fv-command-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18vh;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-command-menu.open,
.fv-command-menu.is-open {
  opacity: 1;
  visibility: visible;
}

.fv-command {
  width: 100%;
  max-width: 560px;
  max-height: min(70vh, 640px);
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-command-menu.open .fv-command,
.fv-command-menu.is-open .fv-command {
  transform: translateY(0) scale(1);
}

.fv-command__input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-outer);
  color: var(--text-tertiary);
}

.fv-command__input i {
  font-size: 18px;
  flex-shrink: 0;
}

.fv-command__input input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
}

.fv-command__input input::placeholder {
  color: var(--text-tertiary);
}

.fv-command__list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fv-command__group {
  padding: 10px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}

.fv-command__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1), color 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-command__item i,
.fv-command__item-icon {
  width: 20px;
  text-align: center;
  font-size: 18px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color 0.15s;
}

.fv-command__item-label {
  flex: 1;
  min-width: 0;
}

.fv-command__item-shortcut {
  margin-left: auto;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 2px 7px;
  border-radius: 7px;
  background: var(--bg-item);
  border: 1px solid var(--border-outer);
  white-space: nowrap;
}

.fv-command__item:hover,
.fv-command__item:focus-visible,
.fv-command__item.is-active,
.fv-command__item--active {
  background: var(--accent-soft);
  color: var(--text-primary);
  outline: none;
}

.fv-command__item:hover i,
.fv-command__item:hover .fv-command__item-icon,
.fv-command__item:focus-visible i,
.fv-command__item.is-active i,
.fv-command__item--active i {
  color: var(--accent);
}

.fv-command__item--danger {
  color: var(--color-danger);
}

.fv-command__item--danger i {
  color: var(--color-danger);
}

.fv-command__item--danger:hover,
.fv-command__item--danger:focus-visible {
  background: rgba(215, 38, 30, 0.1);
  color: var(--color-danger);
}

.fv-command__item:disabled,
.fv-command__item[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.fv-command__empty {
  padding: 36px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

[data-fv-theme="dark"] .fv-command,
[data-fv-theme="dark"] .fv-command__item-shortcut {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-command__item-shortcut {
  background: rgba(255, 255, 255, 0.04);
}

/* === confirm-dialog === */
.fv-confirm-dialog__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.fv-confirm-dialog__overlay.active {
  opacity: 1;
  visibility: visible;
}

.fv-confirm-dialog {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  width: 90%;
  max-width: 400px;
  padding: 28px;
  text-align: center;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.25,1,0.5,1);
}

.fv-confirm-dialog__overlay.active .fv-confirm-dialog {
  transform: translateY(0) scale(1);
}

.fv-confirm-dialog__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 22px;
}

.fv-confirm-dialog__icon--danger {
  background: rgba(215,38,30,0.1);
  color: var(--color-danger);
}

.fv-confirm-dialog__icon--warning {
  background: rgba(230,138,0,0.1);
  color: var(--color-warning);
}

.fv-confirm-dialog__icon--info {
  background: var(--accent-soft);
  color: var(--accent);
}

.fv-confirm-dialog__title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
}

.fv-confirm-dialog__description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 24px;
}

.fv-confirm-dialog__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* === copy-button === */
.fv-copy-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.fv-copy-button:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

.fv-copy-button.copied {
  color: var(--color-success);
}

.fv-copy-button__icon {
  font-size: 14px;
}

.fv-copy-button__label {
  white-space: nowrap;
}

/* === coupon-input === */
.fv-coupon-input {
  display: flex;
  gap: 8px;
}

.fv-coupon-input__input {
  flex: 1;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s;
}

.fv-coupon-input__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-coupon-input__input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-tertiary);
}

.fv-coupon-input__btn {
  padding: 10px 18px;
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-spatial-btn);
  transition: filter 0.15s;
}

.fv-coupon-input__btn:hover {
  filter: brightness(1.05);
}

.fv-coupon-input__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
}

.fv-coupon-input__success {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-success);
  font-weight: 500;
}

.fv-coupon-input__error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-danger);
  font-weight: 500;
}

[data-fv-theme="dark"] .fv-coupon-input__input {
  background: var(--bg-item);
  border: 1px solid var(--border-outer);
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-coupon-input__input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

/* === currency-input === */
.fv-currency-input {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.fv-currency-input__prefix {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-tertiary);
  pointer-events: none;
  display: flex;
  align-items: center;
}

.fv-currency-input__field {
  padding: 12px 16px 12px 36px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
  width: 100%;
  font-family: inherit;
}

.fv-currency-input__field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-currency-input__field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fv-currency-input__field::placeholder {
  color: var(--text-tertiary);
}

.fv-currency-input--sm .fv-currency-input__field {
  padding: 8px 12px 8px 32px;
  font-size: 13px;
}

.fv-currency-input--sm .fv-currency-input__prefix {
  left: 12px;
  font-size: 13px;
}

.fv-currency-input--lg .fv-currency-input__field {
  padding: 14px 20px 14px 44px;
  font-size: 17px;
}

.fv-currency-input--lg .fv-currency-input__prefix {
  left: 20px;
  font-size: 17px;
}

[data-fv-theme="dark"] .fv-currency-input__field {
  border: 1px solid var(--border-outer);
}

/* === dashboard-layout === */
.fv-dashboard-layout {
  display: flex;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  background: var(--bg-body);
}

.fv-dashboard-layout__sidebar {
  width: 248px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 14px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-right: 1px solid var(--border-inner);
  overflow-y: auto;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-dashboard-layout__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-spatial-btn);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.fv-dashboard-layout__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.18s cubic-bezier(0.25, 1, 0.5, 1), color 0.18s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-dashboard-layout__nav i {
  font-size: 18px;
  line-height: 1;
}

.fv-dashboard-layout__nav:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

.fv-dashboard-layout__nav.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(0, 113, 227, 0.15);
}

.fv-dashboard-layout__nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-dashboard-layout__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border-top: 1px solid var(--border-outer);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-dashboard-layout__user:hover {
  background: var(--bg-item);
}

.fv-dashboard-layout__user span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-dashboard-layout__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.fv-dashboard-layout__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border-outer);
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.fv-dashboard-layout__content {
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: var(--bg-body);
  scrollbar-width: thin;
  scrollbar-color: var(--border-outer) transparent;
}

.fv-dashboard-layout__content::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.fv-dashboard-layout__content::-webkit-scrollbar-thumb {
  background: var(--border-outer);
  border-radius: 999px;
}

.fv-dashboard-layout--collapsed .fv-dashboard-layout__sidebar {
  width: 78px;
}

.fv-dashboard-layout--collapsed .fv-dashboard-layout__logo {
  font-size: 14px;
}

.fv-dashboard-layout--collapsed .fv-dashboard-layout__nav {
  justify-content: center;
  padding: 12px 0;
  font-size: 0;
}

.fv-dashboard-layout--collapsed .fv-dashboard-layout__nav i {
  font-size: 20px;
}

.fv-dashboard-layout--collapsed .fv-dashboard-layout__user {
  justify-content: center;
  padding: 10px 0;
}

.fv-dashboard-layout--collapsed .fv-dashboard-layout__user span {
  display: none;
}

[data-fv-theme="dark"] .fv-dashboard-layout {
  background: var(--bg-body);
}

[data-fv-theme="dark"] .fv-dashboard-layout__sidebar {
  background: var(--bg-card);
  border-right-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-dashboard-layout__logo {
  background: var(--accent-gradient);
  color: #fff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

[data-fv-theme="dark"] .fv-dashboard-layout__nav {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-dashboard-layout__nav:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-dashboard-layout__nav.is-active {
  background: var(--accent-soft);
  color: #fff;
  border-color: rgba(0, 113, 227, 0.3);
}

[data-fv-theme="dark"] .fv-dashboard-layout__user {
  border-top-color: var(--border-outer);
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-dashboard-layout__user:hover {
  background: var(--bg-item);
}

[data-fv-theme="dark"] .fv-dashboard-layout__header {
  background: var(--bg-card);
  border-bottom-color: var(--border-outer);
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-dashboard-layout__content {
  background: var(--bg-body);
}

@media (max-width: 768px) {
  .fv-dashboard-layout__sidebar {
    width: 78px;
  }

  .fv-dashboard-layout__logo {
    font-size: 14px;
  }

  .fv-dashboard-layout__nav {
    justify-content: center;
    padding: 12px 0;
    font-size: 0;
  }

  .fv-dashboard-layout__nav i {
    font-size: 20px;
  }

  .fv-dashboard-layout__user {
    justify-content: center;
    padding: 10px 0;
  }

  .fv-dashboard-layout__user span {
    display: none;
  }

  .fv-dashboard-layout__header {
    padding: 12px 16px;
  }

  .fv-dashboard-layout__content {
    padding: 16px;
  }
}

/* === data-grid === */
.fv-data-grid {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
}

.fv-data-grid__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 12px;
}

.fv-data-grid__body {
  display: block;
}

.fv-data-grid__row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-outer);
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-data-grid__row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-data-grid__row:hover {
  background: var(--bg-item);
}

.fv-data-grid__row--head {
  position: sticky;
  top: 0;
  z-index: 1;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-bottom: 1px solid var(--border-outer);
}

.fv-data-grid__cell {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fv-data-grid__cell--head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

.fv-data-grid--striped .fv-data-grid__row:nth-child(even) {
  background: var(--bg-item);
}

.fv-data-grid--bordered {
  border: 1px solid var(--border-outer);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.fv-data-grid__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  color: inherit;
}

.fv-data-grid__sort::after {
  content: "\2195";
  font-size: 11px;
  opacity: 0.5;
}

.fv-data-grid__sort.is-asc::after {
  content: "\2191";
  opacity: 1;
}

.fv-data-grid__sort.is-desc::after {
  content: "\2193";
  opacity: 1;
}

.fv-data-grid__empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 14px;
}

[data-fv-theme="dark"] .fv-data-grid__row--head {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-data-grid--bordered,
[data-fv-theme="dark"] .fv-data-grid__row {
  border-color: var(--border-outer);
}

/* === description-list === */
.fv-desc-list,
.fv-description-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
  margin: 0;
}

.fv-desc-list dt,
.fv-description-list dt {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-outer);
  margin: 0;
}

.fv-desc-list dd,
.fv-description-list dd {
  color: var(--text-primary);
  font-size: 14px;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-outer);
}

.fv-desc-list dt:last-of-type,
.fv-desc-list dd:last-of-type,
.fv-description-list dt:last-of-type,
.fv-description-list dd:last-of-type {
  border-bottom: none;
}

.fv-desc-list--compact dt,
.fv-desc-list--compact dd,
.fv-description-list--compact dt,
.fv-description-list--compact dd {
  padding: 4px 0;
}

.fv-desc-list--bordered,
.fv-description-list--bordered {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  padding: 16px 20px;
}

.fv-desc-list--bordered dt,
.fv-description-list--bordered dt,
.fv-desc-list--bordered dd,
.fv-description-list--bordered dd {
  border-bottom: 1px solid var(--border-outer);
}

.fv-desc-list--bordered dt:last-of-type,
.fv-desc-list--bordered dd:last-of-type,
.fv-description-list--bordered dt:last-of-type,
.fv-description-list--bordered dd:last-of-type {
  border-bottom: none;
}

/* === dialog === */
.fv-dialog__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.fv-dialog__overlay.active {
  opacity: 1;
  visibility: visible;
}

.fv-dialog {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.25,1,0.5,1);
}

.fv-dialog__overlay.active .fv-dialog {
  transform: translateY(0) scale(1);
}

.fv-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.fv-dialog__title {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.fv-dialog__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.fv-dialog__close:hover {
  background: var(--danger-gradient);
  color: #fff;
}

.fv-dialog__body {
  padding: 0 24px 24px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.fv-dialog__footer {
  padding: 16px 24px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* === diff-viewer === */
.fv-diff-viewer,
.fv-diff {
  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.fv-diff-viewer__header,
.fv-diff__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--bg-item);
  border-bottom: 1px solid var(--border-outer);
  font-size: 12px;
  color: var(--text-secondary);
}

.fv-diff-viewer__code,
.fv-diff__code {
  display: block;
  overflow: auto;
  padding: 4px 0;
}

.fv-diff-viewer__line,
.fv-diff__line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 2px 14px;
  white-space: pre;
  transition: background 0.1s;
}

.fv-diff-viewer__line-no,
.fv-diff__line-no {
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
  padding-right: 8px;
  color: var(--text-tertiary);
  user-select: none;
}

.fv-diff-viewer__content,
.fv-diff__content {
  flex: 1;
  min-width: 0;
  white-space: pre;
  overflow-x: auto;
}

.fv-diff-viewer__line--context,
.fv-diff__line--context {
  color: var(--text-tertiary);
}

.fv-diff-viewer__line--add,
.fv-diff__line--add {
  background: rgba(36, 176, 73, 0.12);
  color: var(--color-success);
  box-shadow: inset 3px 0 0 var(--color-success);
}

.fv-diff-viewer__line--del,
.fv-diff__line--del {
  background: rgba(215, 38, 30, 0.12);
  color: var(--color-danger);
  box-shadow: inset 3px 0 0 var(--color-danger);
}

[data-fv-theme="dark"] .fv-diff-viewer,
[data-fv-theme="dark"] .fv-diff,
[data-fv-theme="dark"] .fv-diff-viewer__header,
[data-fv-theme="dark"] .fv-diff__header {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-diff-viewer,
[data-fv-theme="dark"] .fv-diff,
[data-fv-theme="dark"] .fv-diff-viewer__header,
[data-fv-theme="dark"] .fv-diff__header {
  background: rgba(255, 255, 255, 0.03);
}

[data-fv-theme="dark"] .fv-diff-viewer__line--add,
[data-fv-theme="dark"] .fv-diff__line--add {
  background: rgba(36, 176, 73, 0.18);
}

[data-fv-theme="dark"] .fv-diff-viewer__line--del,
[data-fv-theme="dark"] .fv-diff__line--del {
  background: rgba(215, 38, 30, 0.18);
}

/* === donut-chart === */
.fv-donut-chart {
  --chart-1: var(--accent);
  --chart-2: var(--color-success);
  --chart-3: var(--color-warning);
  --chart-4: var(--color-danger);
  --chart-5: #5E5CE6;
  --chart-6: #30B0C7;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
}

.fv-donut-chart__svg {
  width: 160px;
  height: 160px;
  transform: rotate(-90deg);
  display: block;
  overflow: visible;
}

.fv-donut-chart__track {
  fill: none;
  stroke: var(--border-outer);
  stroke-width: 10;
}

.fv-donut-chart__slice,
.fv-donut-chart__segment {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-donut-chart__center {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.fv-donut-chart__value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.fv-donut-chart__label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.fv-donut-chart__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 16px;
}

.fv-donut-chart__legend .fv-pie-legend__item,
.fv-donut-chart__legend .fv-donut-chart__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-donut-chart__legend .fv-pie-legend__dot,
.fv-donut-chart__legend .fv-donut-chart__legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
}

.fv-donut-chart__legend-item--1 .fv-donut-chart__legend-dot { background: var(--chart-1); }
.fv-donut-chart__legend-item--2 .fv-donut-chart__legend-dot { background: var(--chart-2); }
.fv-donut-chart__legend-item--3 .fv-donut-chart__legend-dot { background: var(--chart-3); }
.fv-donut-chart__legend-item--4 .fv-donut-chart__legend-dot { background: var(--chart-4); }
.fv-donut-chart__legend-item--5 .fv-donut-chart__legend-dot { background: var(--chart-5); }
.fv-donut-chart__legend-item--6 .fv-donut-chart__legend-dot { background: var(--chart-6); }

[data-fv-theme="dark"] .fv-donut-chart__slice,
[data-fv-theme="dark"] .fv-donut-chart__segment {
  filter: brightness(1.08);
}

/* === dropdown === */
.fv-dropdown {
  position: relative;
  display: inline-block;
}

.fv-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 6px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transition: all 0.2s cubic-bezier(0.25,1,0.5,1);
}

.fv-dropdown.open .fv-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.fv-dropdown__item {
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fv-dropdown__item:hover {
  background: var(--accent-soft);
}

.fv-dropdown__item--danger {
  color: var(--color-danger);
}

.fv-dropdown__item--danger:hover {
  background: rgba(215,38,30,0.08);
}

[data-fv-theme="dark"] .fv-dropdown__menu {
  border: 1px solid var(--border-outer);
}

/* === error-boundary === */
.fv-error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  text-align: center;
}

.fv-error-boundary__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  background: rgba(215,38,30,0.1);
  color: var(--color-danger);
  margin-bottom: 16px;
}

.fv-error-boundary__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.fv-error-boundary__description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  max-width: 400px;
  margin-bottom: 24px;
}

.fv-error-boundary__retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-xl);
  background: var(--accent-gradient);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-spatial-btn);
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
  transition: all 0.2s;
  font-family: inherit;
}

.fv-error-boundary__retry:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-btn);
}

.fv-error-boundary__retry:active {
  transform: scale(0.97) translateY(1px);
}

.fv-error-boundary__details {
  margin-top: 24px;
  padding: 16px;
  background: var(--bg-item);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset-pod);
  font-size: 12px;
  font-family: monospace;
  color: var(--text-tertiary);
  text-align: left;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* === fab === */
.fv-fab {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-spatial-btn);
  z-index: 100;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--shadow-spatial-btn);
}

[data-fv-theme="dark"] .fv-fab {
  box-shadow: var(--shadow-spatial-btn);
}

[data-fv-theme="dark"] .fv-fab:hover {
  box-shadow: var(--shadow-spatial-btn);
}

.fv-fab:active {
  transform: scale(0.95);
}

.fv-fab--sm {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

.fv-fab--lg {
  width: 64px;
  height: 64px;
  font-size: 28px;
}

.fv-fab--extended {
  width: auto;
  border-radius: var(--radius-xl);
  padding: 0 20px;
  gap: 8px;
}

.fv-fab__label {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.fv-fab--bottom-left {
  right: auto;
  left: 24px;
}

.fv-fab--top-right {
  bottom: auto;
  top: 24px;
}

.fv-fab--top-left {
  bottom: auto;
  top: 24px;
  right: auto;
  left: 24px;
}

/* === file-preview === */
.fv-file-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md);
  position: relative;
  transition: all 0.2s;
}

.fv-file-preview:hover {
  box-shadow: var(--shadow-spatial-item);
}

.fv-file-preview__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.fv-file-preview__icon--pdf {
  background: rgba(215, 38, 30, 0.1);
  color: var(--color-danger);
}

.fv-file-preview__icon--image {
  background: rgba(36, 176, 73, 0.1);
  color: var(--color-success);
}

.fv-file-preview__icon--zip {
  background: rgba(230, 138, 0, 0.1);
  color: var(--color-warning);
}

.fv-file-preview__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.fv-file-preview__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-file-preview__meta {
  font-size: 12px;
  color: var(--text-tertiary);
}

.fv-file-preview__remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.15s;
}

.fv-file-preview:hover .fv-file-preview__remove {
  opacity: 1;
}

.fv-file-preview__remove:hover {
  background: rgba(215, 38, 30, 0.1);
  color: var(--color-danger);
}

[data-fv-theme="dark"] .fv-file-preview {
  border: 1px solid var(--border-outer);
}

/* === forgot-password === */
.fv-forgot-password {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fv-forgot-password__header {
  text-align: center;
  margin-bottom: 8px;
}

.fv-forgot-password__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.fv-forgot-password__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.fv-forgot-password__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}

.fv-forgot-password__success {
  text-align: center;
  padding: 20px;
  background: rgba(36, 176, 73, 0.08);
  border: 1px solid rgba(36, 176, 73, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: 14px;
  font-weight: 500;
}

.fv-forgot-password__footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-forgot-password__footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-forgot-password__footer a:hover {
  text-decoration: underline;
}

.fv-forgot-password__error {
  padding: 10px 14px;
  background: rgba(215, 38, 30, 0.08);
  border: 1px solid rgba(215, 38, 30, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 500;
}

/* === gallery === */
.fv-gallery {
  display: grid;
  gap: 8px;
}

.fv-gallery--2 {
  grid-template-columns: repeat(2, 1fr);
}

.fv-gallery--3 {
  grid-template-columns: repeat(3, 1fr);
}

.fv-gallery--4 {
  grid-template-columns: repeat(2, 1fr);
}

.fv-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1;
  transition: opacity 0.2s, transform 0.2s;
}

.fv-gallery__item:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

.fv-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fv-gallery__item--featured {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.fv-gallery__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: flex-end;
  padding: 12px;
}

.fv-gallery__item:hover .fv-gallery__overlay {
  opacity: 1;
}

.fv-gallery__overlay-text {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* === gauge === */
.fv-gauge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.fv-gauge__svg {
  width: 100%;
  overflow: visible;
}

.fv-gauge__track {
  fill: none;
  stroke: var(--bg-item);
  stroke-width: 12;
  stroke-linecap: round;
}

.fv-gauge__fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-gauge__fill--accent {
  stroke: var(--accent);
}

.fv-gauge__fill--success {
  stroke: var(--color-success);
}

.fv-gauge__fill--warning {
  stroke: var(--color-warning);
}

.fv-gauge__fill--danger {
  stroke: var(--color-danger);
}

.fv-gauge__value {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
}

.fv-gauge__label {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: center;
}

.fv-gauge__min,
.fv-gauge__max {
  position: absolute;
  bottom: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.fv-gauge__min {
  left: 10%;
}

.fv-gauge__max {
  right: 10%;
}

/* === gesture-area === */
.fv-gesture-area {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  user-select: none;
}

.fv-gesture-area--swipe-x {
  touch-action: pan-x;
}

.fv-gesture-area--swipe-y {
  touch-action: pan-y;
}

.fv-gesture-area--pinch {
  touch-action: pinch-zoom;
}

.fv-gesture-area--none {
  touch-action: none;
}

/* === heatmap === */
.fv-heatmap {
  display: grid;
  gap: 3px;
}

.fv-heatmap__cell {
  border-radius: var(--radius-sm);
  aspect-ratio: 1;
  transition: transform 0.15s, opacity 0.15s;
  cursor: pointer;
}

.fv-heatmap__cell:hover {
  transform: scale(1.15);
  opacity: 0.85;
}

.fv-heatmap__cell--xs {
  background: var(--bg-item);
}

.fv-heatmap__cell--sm {
  background: rgba(59, 130, 246, 0.15);
}

.fv-heatmap__cell--md {
  background: rgba(59, 130, 246, 0.3);
}

.fv-heatmap__cell--lg {
  background: rgba(59, 130, 246, 0.5);
}

.fv-heatmap__cell--xl {
  background: rgba(59, 130, 246, 0.75);
}

.fv-heatmap__row-labels {
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: space-between;
}

.fv-heatmap__row-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
}

.fv-heatmap__col-labels {
  display: flex;
  gap: 3px;
  justify-content: space-between;
}

.fv-heatmap__col-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: center;
}

.fv-heatmap__tooltip {
  position: absolute;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
}

/* === icon-button === */
.fv-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(242,244,247,0.85) 100%);
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  border-top: 1px solid rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(0,0,0,0.04);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25,1,0.5,1);
  outline: none;
  font-family: inherit;
  font-size: 16px;
  flex-shrink: 0;
}

.fv-icon-btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-item);
}

.fv-icon-btn:active {
  transform: scale(0.93);
}

.fv-icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.fv-icon-btn--sm {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.fv-icon-btn--lg {
  width: 44px;
  height: 44px;
  font-size: 20px;
}

[data-fv-theme="dark"] .fv-icon-btn {
  background: linear-gradient(180deg, rgba(54,54,58,0.85) 0%, rgba(38,38,42,0.85) 100%);
  border: 1px solid rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* === image === */
.fv-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  object-fit: cover;
  transition: opacity 0.3s;
}

.fv-image--lazy {
  filter: blur(8px);
  transition: filter 0.5s, opacity 0.3s;
}

.fv-image--lazy.fv-image--loaded {
  filter: blur(0);
}

.fv-image--rounded {
  border-radius: 50%;
}

.fv-image--cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-image__fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-item);
  color: var(--text-tertiary);
  font-size: 24px;
  border-radius: var(--radius-md);
}

/* === infinite-scroll === */
.fv-infinite-scroll {
  display: flex;
  flex-direction: column;
}

.fv-infinite-scroll__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.fv-infinite-scroll__spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-outer);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fv-infinite-scroll-spin 0.8s linear infinite;
}

.fv-infinite-scroll__end {
  text-align: center;
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.fv-infinite-scroll__error {
  text-align: center;
  padding: 16px;
  color: var(--color-danger);
  font-size: 13px;
}

.fv-infinite-scroll__retry {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.fv-infinite-scroll__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  color: var(--text-tertiary);
  font-size: 13px;
}

@keyframes fv-infinite-scroll-spin {
  to { transform: rotate(360deg); }
}

/* === input === */
.fv-input {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
  width: 100%;
  font-family: inherit;
}

.fv-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fv-input::placeholder {
  color: var(--text-tertiary);
}

.fv-input--sm {
  padding: 8px 12px;
  font-size: 13px;
}

.fv-input--lg {
  padding: 14px 20px;
  font-size: 17px;
}

[data-fv-theme="dark"] .fv-input {
  border: 1px solid var(--border-outer);
}

/* === json-viewer === */
.fv-json-viewer {
  font-family: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  padding: 16px;
  overflow-x: auto;
}

.fv-json-viewer__key {
  color: var(--accent);
}

.fv-json-viewer__string {
  color: #24B049;
}

.fv-json-viewer__number {
  color: #E68A00;
}

.fv-json-viewer__boolean {
  color: #E68A00;
}

.fv-json-viewer__null {
  color: var(--text-tertiary);
  font-style: italic;
}

.fv-json-viewer__bracket {
  color: var(--text-tertiary);
}

.fv-json-viewer__toggle {
  cursor: pointer;
  color: var(--text-tertiary);
  user-select: none;
  display: inline-flex;
  align-items: center;
  transition: color 0.15s;
}

.fv-json-viewer__toggle:hover {
  color: var(--text-primary);
}

.fv-json-viewer__toggle-icon {
  transition: transform 0.2s;
}

.fv-json-viewer__toggle-icon--expanded {
  transform: rotate(90deg);
}

.fv-json-viewer__ellipsis {
  color: var(--text-tertiary);
  font-style: italic;
}

.fv-json-viewer__children {
  padding-left: 20px;
}

/* === key-value === */
.fv-key-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-key-value:last-child {
  border-bottom: none;
}

.fv-key-value__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  font-size: 14px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-key-value__row:last-child {
  border-bottom: none;
}

.fv-key-value__key {
  color: var(--text-secondary);
  font-weight: 500;
}

.fv-key-value__row .fv-key-value__key {
  color: var(--text-secondary);
  font-weight: 500;
}

.fv-key-value__val {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-key-value__row .fv-key-value__val {
  color: var(--text-primary);
  font-weight: 600;
  text-align: right;
}

.fv-key-value__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  flex-shrink: 0;
}

.fv-key-value--bordered {
  background: var(--bg-card);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
}

.fv-key-value--bordered.fv-key-value,
.fv-key-value--bordered .fv-key-value,
.fv-key-value--bordered .fv-key-value__row {
  border-bottom: 1px solid var(--border-outer);
}

.fv-key-value--bordered.fv-key-value:last-child,
.fv-key-value--bordered .fv-key-value:last-child,
.fv-key-value--bordered .fv-key-value__row:last-child {
  border-bottom: none;
}

.fv-key-value--horizontal {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
}

.fv-key-value--horizontal .fv-key-value__val,
.fv-key-value--horizontal .fv-key-value__row .fv-key-value__val {
  text-align: left;
}

[data-fv-theme="dark"] .fv-key-value--bordered {
  border-color: var(--border-outer);
}

/* === kpi-card === */
.fv-kpi-card {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1);
}

.fv-kpi-card:hover {
  transform: translateY(-2px);
}

.fv-kpi-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.fv-kpi-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.fv-kpi-card__label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
}

.fv-kpi-card__value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.fv-kpi-card__target {
  font-size: 12px;
  color: var(--text-tertiary);
  margin: 0;
}

.fv-kpi-card__progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-item);
  overflow: hidden;
}

.fv-kpi-card__progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--accent-gradient);
  transition: width 0.5s cubic-bezier(0.25,1,0.5,1);
}

.fv-kpi-card__progress-bar--success {
  background: var(--success-gradient);
}

.fv-kpi-card__progress-bar--warning {
  background: var(--warning-gradient);
}

.fv-kpi-card__progress-bar--danger {
  background: var(--danger-gradient);
}

.fv-kpi-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-tertiary);
}

.fv-kpi-card__change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.fv-kpi-card__change--up {
  color: var(--color-success);
}

.fv-kpi-card__change--down {
  color: var(--color-danger);
}

[data-fv-theme="dark"] .fv-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-kpi-card__label {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-kpi-card__value {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-kpi-card__target {
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-kpi-card__progress {
  background: var(--bg-item);
}

[data-fv-theme="dark"] .fv-kpi-card__footer {
  color: var(--text-tertiary);
}

/* === lazy-load === */
.fv-lazy-load {
  min-height: 100px;
  position: relative;
}

.fv-lazy-load--loaded {
  opacity: 1;
  transition: opacity 0.3s;
}

.fv-lazy-load__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  background: var(--bg-item);
  border-radius: var(--radius-md);
}

.fv-lazy-load__placeholder .fv-skeleton {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

/* === lightbox === */
.fv-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}

.fv-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.fv-lightbox__image {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  user-select: none;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1);
}

.fv-lightbox.active .fv-lightbox__image {
  transform: scale(1);
}

.fv-lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.fv-lightbox__close:hover {
  background: rgba(255,255,255,0.2);
}

.fv-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.fv-lightbox__nav:hover {
  background: rgba(255,255,255,0.2);
}

.fv-lightbox__nav--prev {
  left: 20px;
}

.fv-lightbox__nav--next {
  right: 20px;
}

.fv-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  font-weight: 500;
}

/* === loading-overlay === */
.fv-loading-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 50;
  border-radius: inherit;
}

[data-fv-theme="dark"] .fv-loading-overlay {
  background: rgba(0,0,0,0.4);
}

.fv-loading-overlay__spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-outer);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fv-spin 0.7s linear infinite;
}

.fv-loading-overlay--sm .fv-loading-overlay__spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.fv-loading-overlay--lg .fv-loading-overlay__spinner {
  width: 44px;
  height: 44px;
  border-width: 4px;
}

.fv-loading-overlay__text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

@keyframes fv-spin {
  to { transform: rotate(360deg); }
}

/* === locale-switcher === */
.fv-locale-switcher {
  position: relative;
  display: inline-flex;
  font-family: inherit;
}

.fv-locale-switcher__current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-item);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  transition: all .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-locale-switcher:hover .fv-locale-switcher__current,
.fv-locale-switcher__current:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-spatial-item);
}

.fv-locale-switcher__current:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-spatial-item);
}

.fv-locale-switcher__flag {
  font-size: 18px;
  line-height: 1;
}

.fv-locale-switcher__label {
  flex: 1;
  white-space: nowrap;
}

.fv-locale-switcher__arrow {
  font-size: 12px;
  color: var(--text-tertiary);
  transition: transform .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-locale-switcher.is-open .fv-locale-switcher__arrow {
  transform: rotate(180deg);
}

.fv-locale-switcher__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  padding: 6px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-spatial-card);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: all .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-locale-switcher.is-open .fv-locale-switcher__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fv-locale-switcher__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s cubic-bezier(.25, 1, .5, 1);
}

.fv-locale-switcher__option-flag {
  font-size: 18px;
  line-height: 1;
}

.fv-locale-switcher__option:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

.fv-locale-switcher__option:focus-visible {
  outline: none;
  background: var(--bg-item);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-locale-switcher__option--active,
.fv-locale-switcher__option.is-active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

[data-fv-theme="dark"] .fv-locale-switcher__current {
  border: 1px solid var(--border-outer);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-fv-theme="dark"] .fv-locale-switcher__menu {
  border: 1px solid var(--border-outer);
}

/* === login-form === */
.fv-login-form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fv-login-form__header {
  text-align: center;
  margin-bottom: 8px;
}

.fv-login-form__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.fv-login-form__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.fv-login-form__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.fv-login-form__divider::before,
.fv-login-form__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-outer);
}

.fv-login-form__social {
  display: flex;
  gap: 8px;
}

.fv-login-form__social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.fv-login-form__social-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-login-form__footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-login-form__footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-login-form__footer a:hover {
  text-decoration: underline;
}

.fv-login-form__remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fv-login-form__forgot {
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-login-form__forgot:hover {
  text-decoration: underline;
}

.fv-login-form__error {
  padding: 10px 14px;
  background: rgba(215, 38, 30, 0.08);
  border: 1px solid rgba(215, 38, 30, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 500;
}

/* === markdown-viewer === */
.fv-markdown-viewer {
  line-height: 1.7;
  color: var(--text-primary);
}

.fv-markdown-viewer h1,
.fv-markdown-viewer h2,
.fv-markdown-viewer h3,
.fv-markdown-viewer h4,
.fv-markdown-viewer h5,
.fv-markdown-viewer h6 {
  font-weight: 700;
  margin: 16px 0 8px;
  color: var(--text-primary);
}

.fv-markdown-viewer h1 { font-size: 24px; }
.fv-markdown-viewer h2 { font-size: 20px; }
.fv-markdown-viewer h3 { font-size: 18px; }
.fv-markdown-viewer h4 { font-size: 16px; }

.fv-markdown-viewer p {
  margin: 8px 0;
}

.fv-markdown-viewer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.fv-markdown-viewer a:hover {
  text-decoration: underline;
}

.fv-markdown-viewer strong {
  font-weight: 700;
}

.fv-markdown-viewer em {
  font-style: italic;
}

.fv-markdown-viewer code {
  background: var(--bg-item);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
  font-family: monospace;
}

.fv-markdown-viewer pre {
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 16px;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  margin: 12px 0;
  border: 1px solid var(--border-inner);
}

[data-fv-theme="dark"] .fv-markdown-viewer pre {
  border-color: var(--border-outer);
}

.fv-markdown-viewer pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  font-size: 13px;
}

.fv-markdown-viewer ul,
.fv-markdown-viewer ol {
  margin: 8px 0;
  padding-left: 24px;
}

.fv-markdown-viewer li {
  margin: 4px 0;
}

.fv-markdown-viewer blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  margin: 12px 0;
  color: var(--text-secondary);
}

.fv-markdown-viewer hr {
  border: none;
  border-top: 1px solid var(--border-outer);
  margin: 16px 0;
}

.fv-markdown-viewer table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

.fv-markdown-viewer th,
.fv-markdown-viewer td {
  padding: 8px 12px;
  border: 1px solid var(--border-outer);
  text-align: left;
  font-size: 14px;
}

.fv-markdown-viewer th {
  background: var(--bg-item);
  font-weight: 600;
}

.fv-markdown-viewer img {
  max-width: 100%;
  border-radius: var(--radius-md);
}

/* === mega-menu === */
.fv-mega-menu {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  padding: 22px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.22s cubic-bezier(0.25, 1, 0.5, 1), transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-mega-menu.open,
.fv-mega-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fv-mega-menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.fv-mega-menu__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fv-mega-menu__title {
  padding: 0 10px 8px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-outer);
}

.fv-mega-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1), color 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-mega-menu__link i {
  width: 20px;
  text-align: center;
  font-size: 17px;
  flex-shrink: 0;
  color: var(--accent);
  transition: transform 0.15s;
}

.fv-mega-menu__link:hover,
.fv-mega-menu__link:focus-visible {
  background: var(--accent-soft);
  color: var(--text-primary);
  outline: none;
}

.fv-mega-menu__link:hover i,
.fv-mega-menu__link:focus-visible i {
  transform: scale(1.08);
}

.fv-mega-menu__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.fv-mega-menu__feature {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  border: 1px solid var(--border-outer);
  transition: background 0.15s;
}

.fv-mega-menu__feature:hover {
  background: var(--accent-soft);
}

.fv-mega-menu__feature-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.fv-mega-menu__feature-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-mega-menu {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-mega-menu__feature {
  background: rgba(255, 255, 255, 0.04);
}

/* === metric-card === */
.fv-metric-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 20px;
  position: relative;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-metric-card:hover {
  transform: translateY(-2px);
}

.fv-metric-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 18px;
  flex-shrink: 0;
}

.fv-metric-card__icon--success {
  background: rgba(36, 176, 73, 0.1);
  color: var(--color-success);
}

.fv-metric-card__icon--warning {
  background: rgba(230, 138, 0, 0.1);
  color: var(--color-warning);
}

.fv-metric-card__icon--danger {
  background: rgba(215, 38, 30, 0.1);
  color: var(--color-danger);
}

.fv-metric-card__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0;
}

.fv-metric-card__value {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.6px;
  color: var(--text-primary);
  line-height: 1.15;
  margin: 0;
}

.fv-metric-card__change {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 2px;
}

.fv-metric-card__change--up {
  background: rgba(36, 176, 73, 0.1);
  color: var(--color-success);
}

.fv-metric-card__change--down {
  background: rgba(215, 38, 30, 0.1);
  color: var(--color-danger);
}

.fv-metric-card__change--neutral {
  background: var(--bg-item);
  color: var(--text-tertiary);
}

.fv-metric-card__spark {
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0));
  overflow: hidden;
}

[data-fv-theme="dark"] .fv-metric-card {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-metric-card__label {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-metric-card__value {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-metric-card__change--up {
  background: rgba(36, 176, 73, 0.16);
  color: var(--color-success);
}

[data-fv-theme="dark"] .fv-metric-card__change--down {
  background: rgba(215, 38, 30, 0.16);
  color: var(--color-danger);
}

[data-fv-theme="dark"] .fv-metric-card__change--neutral {
  background: var(--bg-item);
  color: var(--text-tertiary);
}

/* === mobile-drawer === */
.fv-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
}

.fv-mobile-drawer.open {
  transform: translateX(0);
}

.fv-mobile-drawer--right {
  left: auto;
  right: 0;
  transform: translateX(100%);
}

.fv-mobile-drawer--right.open {
  transform: translateX(0);
}

.fv-mobile-drawer__handle {
  width: 40px;
  height: 4px;
  background: var(--text-tertiary);
  border-radius: 2px;
  margin: 10px auto 0;
  opacity: 0.4;
}

.fv-mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 12px;
}

.fv-mobile-drawer__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fv-mobile-drawer__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-item);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.fv-mobile-drawer__close:hover {
  background: var(--color-danger);
  color: #fff;
}

.fv-mobile-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px 20px;
}

.fv-mobile-drawer__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.fv-mobile-drawer__link:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

.fv-mobile-drawer__link.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.fv-mobile-drawer__link-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.fv-mobile-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--border-outer);
}

.fv-mobile-drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.fv-mobile-drawer__overlay.visible {
  opacity: 1;
  visibility: visible;
}

[data-fv-theme="dark"] .fv-mobile-drawer {
  background: var(--bg-card);
}

[data-fv-theme="dark"] .fv-mobile-drawer__overlay {
  background: rgba(0, 0, 0, 0.6);
}

@media (min-width: 769px) {
  .fv-mobile-drawer {
    width: 360px;
    right: auto;
  }

  .fv-mobile-drawer--right {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }

  .fv-mobile-drawer--right.open {
    transform: translateX(0);
  }
}

/* === mobile-nav === */
.fv-mobile-nav {
  display: none;
}

.fv-mobile-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  border: 1px solid var(--border-outer);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}

.fv-mobile-nav__toggle:hover {
  background: var(--bg-hover);
}

.fv-mobile-nav__toggle:active {
  transform: scale(0.92);
}

.fv-mobile-nav__drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-right: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  z-index: 1000;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  flex-direction: column;
}

.fv-mobile-nav__drawer.open {
  transform: translateX(0);
}

.fv-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-mobile-nav__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}

.fv-mobile-nav__close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-item);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}

.fv-mobile-nav__close:hover {
  background: var(--color-danger);
  color: #fff;
}

.fv-mobile-nav__content {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.fv-mobile-nav__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.fv-mobile-nav__link:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

.fv-mobile-nav__link.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-weight: 600;
}

.fv-mobile-nav__link-icon {
  font-size: 18px;
  width: 24px;
  text-align: center;
}

.fv-mobile-nav__section {
  padding: 16px 16px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
}

.fv-mobile-nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.fv-mobile-nav__overlay.visible {
  opacity: 1;
  visibility: visible;
}

[data-fv-theme="dark"] .fv-mobile-nav__drawer {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-mobile-nav__overlay {
  background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 768px) {
  .fv-mobile-nav {
    display: block;
  }

  .fv-mobile-nav__toggle {
    display: flex;
  }
}

/* === mobile-search === */
.fv-mobile-search {
  position: fixed;
  inset: 0;
  background: var(--bg-body);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.fv-mobile-search.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fv-mobile-search__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border-outer);
  background: var(--bg-card);
}

.fv-mobile-search__back {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.fv-mobile-search__back:hover {
  background: var(--bg-item);
}

.fv-mobile-search__input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-item);
  border-radius: var(--radius-lg);
  padding: 0 12px;
  gap: 8px;
}

.fv-mobile-search__input-icon {
  color: var(--text-tertiary);
  font-size: 16px;
  flex-shrink: 0;
}

.fv-mobile-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  padding: 10px 0;
}

.fv-mobile-search__input::placeholder {
  color: var(--text-tertiary);
}

.fv-mobile-search__clear {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text-tertiary);
  border: none;
  color: var(--bg-card);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.fv-mobile-search__clear.visible {
  opacity: 1;
}

.fv-mobile-search__results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.fv-mobile-search__result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.fv-mobile-search__result:hover {
  background: var(--bg-item);
}

.fv-mobile-search__result-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.fv-mobile-search__result-text {
  flex: 1;
  min-width: 0;
}

.fv-mobile-search__result-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-mobile-search__result-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.fv-mobile-search__empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.fv-mobile-search__empty-icon {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.4;
}

.fv-mobile-search__suggestions {
  padding: 16px;
}

.fv-mobile-search__suggestions-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}

.fv-mobile-search__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-lg);
  background: var(--bg-item);
  border: 1px solid var(--border-outer);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}

.fv-mobile-search__tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

[data-fv-theme="dark"] .fv-mobile-search {
  background: var(--bg-body);
}

[data-fv-theme="dark"] .fv-mobile-search__header {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-mobile-search__clear {
  background: rgba(255,255,255,0.2);
  color: var(--bg-card);
}

/* === mobile-tabs === */
.fv-mobile-tabs {
  display: flex;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-top: 1px solid var(--border-inner);
  padding: 4px 0;
  padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
}

.fv-mobile-tabs__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px 6px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  text-decoration: none;
}

.fv-mobile-tabs__item i {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.fv-mobile-tabs__item.is-active {
  color: var(--accent);
}

.fv-mobile-tabs__item.is-active i {
  transform: scale(1.1) translateY(-1px);
}

.fv-mobile-tabs__item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-gradient);
}

.fv-mobile-tabs__item:active {
  transform: scale(0.92);
}

.fv-mobile-tabs__badge {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(calc(50% + 10px));
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--color-danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

[data-fv-theme="dark"] .fv-mobile-tabs {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

/* === modal === */
.fv-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.fv-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.fv-modal {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.25,1,0.5,1);
}

.fv-modal-overlay.active .fv-modal {
  transform: translateY(0) scale(1);
}

.fv-modal--sm {
  max-width: 400px;
}

.fv-modal--lg {
  max-width: 720px;
}

.fv-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-modal__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.fv-modal__close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
  border: none;
  color: var(--text-secondary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.fv-modal__close:hover {
  background: var(--danger-gradient);
  color: #fff;
}

.fv-modal__body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.fv-modal__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-outer);
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* === multi-select === */
.fv-multi-select {
  position: relative;
  display: block;
  width: 100%;
}

.fv-multi-select__control {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 8px 38px 8px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  cursor: text;
  transition: border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-multi-select__control::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--text-tertiary);
  border-bottom: 2px solid var(--text-tertiary);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.fv-multi-select--open .fv-multi-select__control::after {
  transform: translateY(-25%) rotate(-135deg);
}

.fv-multi-select:focus-within .fv-multi-select__control,
.fv-multi-select--open .fv-multi-select__control {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-multi-select__placeholder {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-tertiary);
  pointer-events: none;
  user-select: none;
}

.fv-multi-select__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 12px;
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.fv-multi-select__tag-label {
  font-size: 13px;
  font-weight: 600;
}

.fv-multi-select__tag-remove {
  width: 18px;
  height: 18px;
  padding: 0;
  margin-left: 2px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  font-size: 12px;
  line-height: 1;
}

.fv-multi-select__tag-remove::before {
  content: "\00d7";
  font-size: 14px;
  font-weight: 700;
}

.fv-multi-select__tag-remove:hover {
  background: var(--accent);
  color: #fff;
}

.fv-multi-select__input {
  flex: 1;
  min-width: 80px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  padding: 2px 0;
}

.fv-multi-select__input::placeholder {
  color: var(--text-tertiary);
}

.fv-multi-select__clear {
  position: absolute;
  top: 50%;
  right: 34px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: var(--border-outer);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  font-size: 12px;
  line-height: 1;
}

.fv-multi-select__clear::before {
  content: "\00d7";
  font-weight: 700;
}

.fv-multi-select__clear:hover {
  background: var(--color-danger);
  color: #fff;
}

.fv-multi-select__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    visibility 0.2s;
}

.fv-multi-select--open .fv-multi-select__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fv-multi-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-multi-select__option::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1.5px solid var(--border-outer);
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  transition: all 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-multi-select__option--highlighted {
  background: var(--accent-soft);
}

.fv-multi-select__option--selected {
  color: var(--accent);
  font-weight: 600;
}

.fv-multi-select__option--selected::before {
  border-color: transparent;
  background: var(--accent-gradient);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

.fv-multi-select--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.fv-multi-select--disabled .fv-multi-select__control {
  cursor: not-allowed;
}

.fv-multi-select--sm .fv-multi-select__control {
  min-height: 36px;
  padding: 5px 34px 5px 12px;
  gap: 4px;
}

.fv-multi-select--sm .fv-multi-select__tag,
.fv-multi-select--sm .fv-multi-select__tag-label {
  padding: 3px 5px 3px 10px;
  font-size: 12px;
}

.fv-multi-select--sm .fv-multi-select__input {
  font-size: 13px;
}

.fv-multi-select--sm .fv-multi-select__option {
  font-size: 13px;
  padding: 7px 10px;
}

.fv-multi-select--lg .fv-multi-select__control {
  min-height: 52px;
  padding: 10px 42px 10px 16px;
  gap: 8px;
}

.fv-multi-select--lg .fv-multi-select__tag,
.fv-multi-select--lg .fv-multi-select__tag-label {
  padding: 5px 7px 5px 14px;
  font-size: 14px;
}

.fv-multi-select--lg .fv-multi-select__input {
  font-size: 17px;
}

.fv-multi-select--lg .fv-multi-select__option {
  font-size: 15px;
  padding: 11px 14px;
}

[data-fv-theme="dark"] .fv-multi-select__control {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-multi-select__menu {
  border: 1px solid var(--border-outer);
}

/* === navbar === */
.fv-navbar {
  display: flex;
  align-items: center;
  padding: 12px 24px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-inner);
  transition: all 0.2s;
}

.fv-navbar__brand {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.fv-navbar__links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.fv-navbar__link {
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.fv-navbar__link:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.fv-navbar__link.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.fv-navbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

[data-fv-theme="dark"] .fv-navbar {
  border-bottom: 1px solid var(--border-outer);
}

/* === notification === */
.fv-notification {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  transition: all 0.3s cubic-bezier(0.25,1,0.5,1);
}

.fv-notification:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.fv-notification__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.fv-notification__icon--info {
  background: var(--accent-soft);
  color: var(--accent);
}

.fv-notification__icon--success {
  background: rgba(36,176,73,0.1);
  color: var(--color-success);
}

.fv-notification__icon--warning {
  background: rgba(230,138,0,0.1);
  color: var(--color-warning);
}

.fv-notification__icon--danger {
  background: rgba(215,38,30,0.1);
  color: var(--color-danger);
}

.fv-notification__content {
  flex: 1;
  min-width: 0;
}

.fv-notification__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.fv-notification__desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.fv-notification__close {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  font-size: 16px;
  color: var(--text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.fv-notification__close:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-notification {
  border: 1px solid var(--border-outer);
}

/* === notification-center === */
.fv-notification-center {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
}

.fv-notification-center__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-notification-center__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fv-notification-center__mark-read {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
}

.fv-notification-center__mark-read:hover {
  text-decoration: underline;
}

.fv-notification-center__list {
  max-height: 400px;
  overflow-y: auto;
}

.fv-notification-center__item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-outer);
  cursor: pointer;
  transition: background 0.15s;
}

.fv-notification-center__item:last-child {
  border-bottom: none;
}

.fv-notification-center__item:hover {
  background: var(--bg-item);
}

.fv-notification-center__unread {
  background: var(--accent-soft);
}

.fv-notification-center__unread:hover {
  background: var(--accent-soft);
}

[data-fv-theme="dark"] .fv-notification-center {
  background: var(--bg-card);
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-notification-center__header {
  border-bottom: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-notification-center__title {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-notification-center__item {
  border-bottom: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-notification-center__item:hover {
  background: var(--bg-item);
}

[data-fv-theme="dark"] .fv-notification-center__unread {
  background: var(--accent-soft);
}

[data-fv-theme="dark"] .fv-notification-center__unread:hover {
  background: var(--accent-soft);
}

[data-fv-theme="dark"] .fv-notification-center__text {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-notification-center__text strong {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-notification-center__time {
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-notification-center__footer {
  border-top: 1px solid var(--border-outer);
}

.fv-notification-center__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  background: var(--bg-item);
  color: var(--text-secondary);
}

.fv-notification-center__content {
  flex: 1;
  min-width: 0;
}

.fv-notification-center__text {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.fv-notification-center__text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.fv-notification-center__time {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.fv-notification-center__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 4px;
}

.fv-notification-center__empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.fv-notification-center__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border-outer);
  text-align: center;
}

.fv-notification-center__footer a {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.fv-notification-center__footer a:hover {
  text-decoration: underline;
}

/* === number-input === */
.fv-number-input {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.fv-number-input__field {
  padding: 12px 48px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 600;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
  font-family: inherit;
  text-align: center;
  -moz-appearance: textfield;
}

.fv-number-input__field::-webkit-outer-spin-button,
.fv-number-input__field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fv-number-input__field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-number-input__field:disabled,
.fv-number-input--disabled .fv-number-input__field {
  opacity: 0.5;
  cursor: not-allowed;
}

.fv-number-input__field::placeholder {
  color: var(--text-tertiary);
}

.fv-number-input__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(242, 244, 247, 0.9) 100%);
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.fv-number-input__btn:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-spatial-item);
}

.fv-number-input__btn:active {
  transform: translateY(-50%) scale(0.9);
}

.fv-number-input__btn--minus,
.fv-number-input__btn--dec {
  left: 8px;
}

.fv-number-input__btn--plus,
.fv-number-input__btn--inc {
  right: 8px;
}

.fv-number-input__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: translateY(-50%);
}

.fv-number-input--sm .fv-number-input__field {
  padding: 8px 40px;
  font-size: 13px;
}

.fv-number-input--sm .fv-number-input__btn {
  width: 26px;
  height: 26px;
  font-size: 15px;
}

.fv-number-input--lg .fv-number-input__field {
  padding: 14px 56px;
  font-size: 17px;
}

.fv-number-input--lg .fv-number-input__btn {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.fv-number-input--disabled {
  pointer-events: none;
}

[data-fv-theme="dark"] .fv-number-input__field {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-number-input__btn,
[data-fv-theme="dark"] .fv-number-field__btn {
  background: linear-gradient(180deg, rgba(54, 54, 58, 0.9) 0%, rgba(38, 38, 42, 0.9) 100%);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* === offline-indicator === */
.fv-offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: var(--color-warning);
  color: #fff;
  text-align: center;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  z-index: 99999;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1);
}

.fv-offline-indicator.hidden {
  transform: translateY(-100%);
}

.fv-offline-indicator__icon {
  margin-right: 8px;
  font-size: 14px;
}

.fv-offline-indicator__retry {
  margin-left: 12px;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}

.fv-offline-indicator__retry:hover {
  background: rgba(255,255,255,0.25);
}

/* === order-timeline === */
.fv-order-timeline {
  display: flex;
  flex-direction: column;
}

.fv-order-timeline--vertical {
  flex-direction: column;
}

.fv-order-timeline__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 36px;
}

.fv-order-timeline__step:last-child {
  padding-bottom: 0;
}

.fv-order-timeline__dot {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--bg-item);
  border: 2px solid var(--border-outer);
  box-sizing: border-box;
  z-index: 1;
}

.fv-order-timeline__step:not(:last-child) .fv-order-timeline__dot::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: var(--border-outer);
}

.fv-order-timeline__step--done .fv-order-timeline__dot,
.fv-order-timeline__step.is-done .fv-order-timeline__dot {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: var(--shadow-spatial-item);
}

.fv-order-timeline__step--done:not(:last-child) .fv-order-timeline__dot::after,
.fv-order-timeline__step.is-done:not(:last-child) .fv-order-timeline__dot::after {
  background: var(--accent);
}

.fv-order-timeline__step--active .fv-order-timeline__dot,
.fv-order-timeline__step.is-active .fv-order-timeline__dot,
.fv-order-timeline__step--current .fv-order-timeline__dot,
.fv-order-timeline__step.is-current .fv-order-timeline__dot {
  background: var(--accent-gradient);
  border-color: transparent;
  box-shadow: var(--shadow-spatial-item);
  animation: fv-order-timeline-pulse 1.8s cubic-bezier(.25, 1, .5, 1) infinite;
}

.fv-order-timeline__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 1px;
}

.fv-order-timeline__title,
.fv-order-timeline__text b {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.fv-order-timeline__time,
.fv-order-timeline__text span {
  font-size: 12px;
  color: var(--text-tertiary);
}

.fv-order-timeline__step--done .fv-order-timeline__title,
.fv-order-timeline__step.is-done .fv-order-timeline__title,
.fv-order-timeline__step--done .fv-order-timeline__text b,
.fv-order-timeline__step.is-done .fv-order-timeline__text b,
.fv-order-timeline__step--active .fv-order-timeline__title,
.fv-order-timeline__step.is-active .fv-order-timeline__title,
.fv-order-timeline__step--active .fv-order-timeline__text b,
.fv-order-timeline__step.is-active .fv-order-timeline__text b,
.fv-order-timeline__step--current .fv-order-timeline__title,
.fv-order-timeline__step.is-current .fv-order-timeline__title,
.fv-order-timeline__step--current .fv-order-timeline__text b,
.fv-order-timeline__step.is-current .fv-order-timeline__text b {
  color: var(--text-primary);
}

@keyframes fv-order-timeline-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 113, 227, 0.45), var(--shadow-spatial-item);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(0, 113, 227, 0), var(--shadow-spatial-item);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 113, 227, 0), var(--shadow-spatial-item);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-order-timeline__step--active .fv-order-timeline__dot,
  .fv-order-timeline__step.is-active .fv-order-timeline__dot,
  .fv-order-timeline__step--current .fv-order-timeline__dot,
  .fv-order-timeline__step.is-current .fv-order-timeline__dot {
    animation: none;
  }
}

[data-fv-theme="dark"] .fv-order-timeline__dot {
  background: var(--bg-item);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-order-timeline__step:not(:last-child) .fv-order-timeline__dot::after {
  background: var(--border-outer);
}

/* === password-input === */
.fv-password-input {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.fv-password-input__wrap {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.fv-password-input__field {
  padding: 12px 48px 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  width: 100%;
  font-family: inherit;
}

.fv-password-input__field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-password-input__field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fv-password-input__field::placeholder {
  color: var(--text-tertiary);
}

.fv-password-input__icon {
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-size: 16px;
  pointer-events: none;
}

.fv-password-input__wrap:has(.fv-password-input__icon) .fv-password-input__field,
.fv-password-input:has(.fv-password-input__icon) .fv-password-input__field {
  padding-left: 42px;
}

.fv-password-input__toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  font-size: 16px;
}

.fv-password-input__toggle:hover {
  color: var(--text-primary);
  background: var(--accent-soft);
}

.fv-password-input__toggle:active {
  transform: translateY(-50%) scale(0.9);
}

.fv-password-input--sm .fv-password-input__field {
  padding: 8px 44px 8px 14px;
  font-size: 13px;
}

.fv-password-input--sm .fv-password-input__toggle {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.fv-password-input--lg .fv-password-input__field {
  padding: 14px 54px 14px 18px;
  font-size: 17px;
}

.fv-password-input--lg .fv-password-input__toggle {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

.fv-password-input--disabled {
  opacity: 0.5;
  pointer-events: none;
}

[data-fv-theme="dark"] .fv-password-input__field {
  border: 1px solid var(--border-outer);
}

/* === pdf-viewer === */
.fv-pdf-viewer {
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}

.fv-pdf-viewer__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border-inner);
  background: var(--bg-item);
}

.fv-pdf-viewer__toolbar-btn {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.fv-pdf-viewer__toolbar-btn:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

.fv-pdf-viewer__toolbar-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.fv-pdf-viewer__toolbar-separator {
  width: 1px;
  height: 20px;
  background: var(--border-outer);
}

.fv-pdf-viewer__toolbar-page {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 8px;
}

.fv-pdf-viewer__toolbar-spacer {
  flex: 1;
}

.fv-pdf-viewer__content {
  height: 600px;
  overflow: auto;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--bg-body);
}

.fv-pdf-viewer__page {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 16px;
}

.fv-pdf-viewer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--text-tertiary);
  font-size: 14px;
}

[data-fv-theme="dark"] .fv-pdf-viewer {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-pdf-viewer__page {
  background: var(--bg-card);
}

/* === pie-chart === */
.fv-pie-chart {
  --chart-1: var(--accent);
  --chart-2: var(--color-success);
  --chart-3: var(--color-warning);
  --chart-4: var(--color-danger);
  --chart-5: #5E5CE6;
  --chart-6: #30B0C7;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.fv-pie-chart__svg {
  width: 160px;
  height: 160px;
  display: block;
  overflow: visible;
}

.fv-pie-chart__slice {
  transition: opacity 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: 50% 50%;
  cursor: default;
}

.fv-pie-chart__slice:hover {
  opacity: 0.85;
}

.fv-pie-chart__center {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.fv-pie-chart__center-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.fv-pie-chart__center-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.fv-pie-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.fv-pie-legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-pie-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--accent);
}

.fv-pie-legend__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-pie-legend__value {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.fv-pie-legend__item--1 .fv-pie-legend__dot { background: var(--chart-1); }
.fv-pie-legend__item--2 .fv-pie-legend__dot { background: var(--chart-2); }
.fv-pie-legend__item--3 .fv-pie-legend__dot { background: var(--chart-3); }
.fv-pie-legend__item--4 .fv-pie-legend__dot { background: var(--chart-4); }
.fv-pie-legend__item--5 .fv-pie-legend__dot { background: var(--chart-5); }
.fv-pie-legend__item--6 .fv-pie-legend__dot { background: var(--chart-6); }

[data-fv-theme="dark"] .fv-pie-chart__slice {
  filter: brightness(1.05);
}

/* === pin-input === */
.fv-pin-input {
  display: inline-flex;
  align-items: center;
}

.fv-pin-input__group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fv-input.fv-input--pin,
.fv-pin-input__field {
  width: 44px;
  height: 48px;
  padding: 0;
  border-radius: var(--radius-md);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  font-family: inherit;
  caret-color: var(--accent);
}

.fv-input.fv-input--pin::placeholder,
.fv-pin-input__field::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

.fv-input.fv-input--pin:focus,
.fv-pin-input--focused .fv-pin-input__field,
.fv-pin-input__field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-input.fv-input--pin:disabled,
.fv-pin-input__field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fv-pin-input--error .fv-pin-input__field {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(215, 38, 30, 0.12), var(--shadow-inset-pod);
  color: var(--color-danger);
}

.fv-pin-input--success .fv-pin-input__field {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(36, 176, 73, 0.12), var(--shadow-inset-pod);
  color: var(--color-success);
}

.fv-pin-input--sm .fv-pin-input__field,
.fv-input.fv-input--pin.fv-pin-input--sm {
  width: 34px;
  height: 38px;
  font-size: 16px;
  border-radius: var(--radius-sm);
}

.fv-pin-input--sm .fv-input.fv-input--pin {
  width: 34px;
  height: 38px;
  font-size: 16px;
  border-radius: var(--radius-sm);
}

.fv-pin-input--lg .fv-pin-input__field,
.fv-pin-input--lg .fv-input.fv-input--pin {
  width: 54px;
  height: 58px;
  font-size: 24px;
}

.fv-pin-input--disabled {
  opacity: 0.5;
  pointer-events: none;
}

[data-fv-theme="dark"] .fv-input.fv-input--pin,
[data-fv-theme="dark"] .fv-pin-input__field {
  border: 1px solid var(--border-outer);
}

/* === price-tag === */
.fv-price-tag {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 14px;
  border-radius: var(--radius-xl);
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.2;
  color: var(--text-primary);
  font-family: inherit;
}

.fv-price-tag__currency {
  font-size: .68em;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0;
}

.fv-price-tag__amount {
  font-weight: 800;
  color: var(--text-primary);
}

.fv-price-tag__old {
  font-size: .8em;
  font-weight: 600;
  color: var(--text-tertiary);
  text-decoration: line-through;
  order: -1;
}

.fv-price-tag--sale {
  background: var(--accent-soft);
  border-color: rgba(0, 113, 227, .25);
}

.fv-price-tag--sale .fv-price-tag__amount {
  color: var(--accent);
}

.fv-price-tag--free {
  background: var(--success-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(36, 176, 73, .25), inset 0 1px 1px rgba(255, 255, 255, .4);
}

.fv-price-tag--free .fv-price-tag__currency {
  color: rgba(255, 255, 255, .85);
}

.fv-price-tag--sm {
  padding: 4px 10px;
  font-size: 13px;
  border-radius: var(--radius-md);
}

.fv-price-tag--lg {
  padding: 10px 20px;
  font-size: 24px;
  border-radius: var(--radius-xl);
}

[data-fv-theme="dark"] .fv-price-tag {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-price-tag--sale {
  background: rgba(0, 113, 227, .16);
  border-color: rgba(0, 113, 227, .4);
}

[data-fv-theme="dark"] .fv-price-tag--free {
  box-shadow: 0 4px 12px rgba(36, 176, 73, .35), inset 0 1px 1px rgba(255, 255, 255, .25);
}

/* === product-card === */
.fv-product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
  position: relative;
  transition: transform .4s cubic-bezier(.25, 1, .5, 1), box-shadow .4s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 18px 40px rgba(0, 0, 0, .10), 0 36px 80px rgba(0, 0, 0, .12), inset 0 1px 1px var(--border-inner), inset 0 -1px 2px rgba(0, 0, 0, .04);
}

.fv-product-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bg-item);
}

.fv-product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-card:hover .fv-product-card__img {
  transform: scale(1.07);
}

.fv-product-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  padding: 5px 11px;
  border-radius: var(--radius-xl);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: 0 4px 12px rgba(0, 113, 227, .25), inset 0 1px 1px rgba(255, 255, 255, .4);
  border-top: 1px solid rgba(255, 255, 255, .3);
}

.fv-product-card__badge--sale {
  background: var(--danger-gradient);
  box-shadow: 0 4px 12px rgba(215, 38, 30, .25), inset 0 1px 1px rgba(255, 255, 255, .4);
}

.fv-product-card__badge--new {
  background: var(--success-gradient);
  box-shadow: 0 4px 12px rgba(36, 176, 73, .25), inset 0 1px 1px rgba(255, 255, 255, .4);
}

.fv-product-card__badge--warning {
  background: var(--warning-gradient);
  box-shadow: 0 4px 12px rgba(230, 138, 0, .25), inset 0 1px 1px rgba(255, 255, 255, .4);
}

.fv-product-card__wishlist {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .25);
  transition: all .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-card__wishlist:hover {
  background: rgba(0, 0, 0, .4);
  transform: scale(1.08);
}

.fv-product-card__wishlist.is-active,
.fv-product-card__wishlist.active {
  color: var(--color-danger);
  background: rgba(255, 255, 255, .92);
  border-color: rgba(215, 38, 30, .35);
}

.fv-product-card__actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 12px;
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .35) 100%);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s cubic-bezier(.25, 1, .5, 1), transform .3s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-card:hover .fv-product-card__actions {
  opacity: 1;
  transform: translateY(0);
}

.fv-product-card__add {
  width: 100%;
  border: none;
  padding: 10px 18px;
  border-radius: var(--radius-xl);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.2px;
  cursor: pointer;
  color: #fff;
  background: var(--accent-gradient);
  box-shadow: var(--shadow-spatial-btn);
  border-top: 1px solid rgba(255, 255, 255, .25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  transition: all .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-card__add:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-btn);
}

.fv-product-card__add:active {
  transform: scale(.97);
}

.fv-product-card__body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fv-product-card__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.fv-product-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.fv-product-card__rating .fv-stars {
  color: var(--color-star);
  letter-spacing: 1px;
}

.fv-product-card__rating-count {
  color: var(--text-tertiary);
}

.fv-product-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text-primary);
}

.fv-product-card__price.is-accent {
  color: var(--accent);
}

.fv-product-card__old-price {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-decoration: line-through;
}

[data-fv-theme="dark"] .fv-product-card {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-product-card__wishlist {
  color: #fff;
  background: rgba(0, 0, 0, .45);
  border-color: rgba(255, 255, 255, .18);
}

[data-fv-theme="dark"] .fv-product-card__wishlist.is-active,
[data-fv-theme="dark"] .fv-product-card__wishlist.active {
  color: #FF8A82;
  background: rgba(255, 255, 255, .95);
}

/* === product-gallery === */
.fv-product-gallery {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fv-product-gallery__main {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--bg-item);
  box-shadow: var(--shadow-spatial-item);
}

.fv-product-gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-gallery__main:hover .fv-product-gallery__img {
  transform: scale(1.06);
}

.fv-product-gallery__zoom {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
  transition: all .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-gallery__zoom:hover {
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
  transform: scale(1.08);
  filter: brightness(1.05);
}

.fv-product-gallery__zoom:active {
  transform: scale(.94);
}

.fv-product-gallery__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.fv-product-gallery__thumb {
  position: relative;
  width: 64px;
  height: 64px;
  padding: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  background: var(--bg-item);
  border: 2px solid transparent;
  box-shadow: var(--shadow-spatial-item);
  transition: border-color .2s, transform .2s cubic-bezier(.25, 1, .5, 1), opacity .2s;
}

.fv-product-gallery__thumb img,
.fv-product-gallery__thumb .fv-product-gallery__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-gallery__thumb:hover {
  opacity: .85;
  transform: translateY(-2px);
}

.fv-product-gallery__thumb:hover img,
.fv-product-gallery__thumb:hover .fv-product-gallery__thumb-img {
  transform: scale(1.08);
}

.fv-product-gallery__thumb--active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-spatial-item);
}

.fv-product-gallery__thumb--active:hover {
  opacity: 1;
  transform: none;
}

.fv-product-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--bg-card) 78%, transparent);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
  transition: all .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-product-gallery__nav--prev {
  left: 12px;
}

.fv-product-gallery__nav--next {
  right: 12px;
}

.fv-product-gallery__nav:hover {
  background: color-mix(in srgb, var(--bg-card) 95%, transparent);
  transform: translateY(-50%) scale(1.08);
}

.fv-product-gallery__nav:active {
  transform: translateY(-50%) scale(.94);
}

[data-fv-theme="dark"] .fv-product-gallery__zoom,
[data-fv-theme="dark"] .fv-product-gallery__nav {
  background: color-mix(in srgb, var(--bg-card) 72%, transparent);
  border-color: var(--border-inner);
}

[data-fv-theme="dark"] .fv-product-gallery__zoom:hover,
[data-fv-theme="dark"] .fv-product-gallery__nav:hover {
  background: color-mix(in srgb, var(--bg-card) 90%, transparent);
}

/* === profile-card === */
.fv-profile-card {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 28px;
  text-align: center;
}

.fv-profile-card__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 16px;
  overflow: hidden;
  border: 3px solid var(--border-inner);
}

.fv-profile-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-profile-card__name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 4px;
}

.fv-profile-card__role {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 12px;
}

.fv-profile-card__bio {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 16px;
}

.fv-profile-card__stats {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-outer);
}

.fv-profile-card__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fv-profile-card__stat-value {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.fv-profile-card__stat-label {
  font-size: 12px;
  color: var(--text-tertiary);
}

.fv-profile-card__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.fv-profile-card__actions .fv-btn {
  flex: 1;
}

/* === prompt-history === */
.fv-prompt-history {
  display: flex;
  flex-direction: column;
}

.fv-prompt-history__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-prompt-history__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fv-prompt-history__clear {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: none;
  border: none;
  cursor: pointer;
}

.fv-prompt-history__clear:hover {
  color: var(--color-danger);
}

.fv-prompt-history__list {
  max-height: 300px;
  overflow-y: auto;
}

.fv-prompt-history__item {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  margin: 2px 8px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fv-prompt-history__item:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

.fv-prompt-history__item-icon {
  font-size: 12px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.fv-prompt-history__item-text {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-prompt-history__item-time {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.fv-prompt-history__empty {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-tertiary);
  font-size: 13px;
}

[data-fv-theme="dark"] .fv-prompt-history {
  background: var(--bg-card);
}

[data-fv-theme="dark"] .fv-prompt-history__header {
  border-bottom-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-prompt-history__clear:hover {
  color: var(--color-danger);
}

[data-fv-theme="dark"] .fv-prompt-history__item:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

/* === prompt-input === */
.fv-prompt-input {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.fv-prompt-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-prompt-input__field {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  outline: none;
  font-family: inherit;
  resize: none;
  min-height: 24px;
  max-height: 120px;
}

.fv-prompt-input__field::placeholder {
  color: var(--text-tertiary);
}

.fv-prompt-input__send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-spatial-btn);
  transition: filter 0.15s, transform 0.15s;
}

.fv-prompt-input__send:hover {
  filter: brightness(1.05);
  transform: scale(1.05);
}

.fv-prompt-input__send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

.fv-prompt-input__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fv-prompt-input__action {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.fv-prompt-input__action:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-prompt-input {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-prompt-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

[data-fv-theme="dark"] .fv-prompt-input__action:hover {
  background: var(--bg-card);
  color: var(--text-primary);
}

/* === property-list === */
.fv-property-list {
  display: flex;
  flex-direction: column;
}

.fv-property-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-outer);
}

.fv-property-list__item:last-child {
  border-bottom: none;
}

.fv-property-list__label {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: 14px;
}

.fv-property-list__value {
  color: var(--text-primary);
  font-size: 14px;
}

.fv-property-list--bordered {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  padding: 4px 16px;
}

.fv-property-list--bordered .fv-property-list__item {
  border-bottom: 1px solid var(--border-outer);
}

.fv-property-list--bordered .fv-property-list__item:last-child {
  border-bottom: none;
}

.fv-property-list--striped .fv-property-list__item:nth-child(even) {
  background: var(--bg-item);
  margin: 0 -16px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
}

.fv-property-list--compact .fv-property-list__item {
  padding: 4px 0;
}

/* === pull-to-refresh === */
.fv-pull-to-refresh {
  overflow: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.fv-pull-to-refresh__indicator {
  text-align: center;
  padding: 20px 16px;
  color: var(--text-tertiary);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform 0.2s, opacity 0.2s, padding 0.3s;
  opacity: 0;
  transform: translateY(-100%);
}

.fv-pull-to-refresh__indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

.fv-pull-to-refresh__spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid var(--border-outer);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fv-ptr-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.fv-pull-to-refresh__arrow {
  font-size: 18px;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.fv-pull-to-refresh__arrow.pulling {
  transform: rotate(180deg);
  color: var(--accent);
}

.fv-pull-to-refresh__text {
  font-size: 13px;
  font-weight: 500;
}

.fv-pull-to-refresh--refreshing .fv-pull-to-refresh__indicator {
  padding: 24px 16px;
  opacity: 1;
  transform: translateY(0);
}

.fv-pull-to-refresh--refreshing .fv-pull-to-refresh__indicator .fv-pull-to-refresh__arrow {
  display: none;
}

.fv-pull-to-refresh__content {
  min-height: 100px;
}

@keyframes fv-ptr-spin {
  to { transform: rotate(360deg); }
}

[data-fv-theme="dark"] .fv-pull-to-refresh__spinner {
  border-color: rgba(255,255,255,0.15);
  border-top-color: var(--accent);
}

[data-fv-theme="dark"] .fv-pull-to-refresh__indicator {
  color: var(--text-tertiary);
}

/* === quantity-selector === */
.fv-quantity-selector {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  transition: border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-quantity-selector:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-quantity-selector--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.fv-quantity-selector__btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  line-height: 1;
  border-radius: 50%;
  margin: 4px;
}

.fv-quantity-selector__btn:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
  transform: scale(1.05);
}

.fv-quantity-selector__btn:active:not(:disabled) {
  transform: scale(0.9);
}

.fv-quantity-selector__btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-quantity-selector__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: transparent;
  color: var(--text-tertiary);
}

.fv-quantity-selector__value {
  width: 56px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  -moz-appearance: textfield;
  padding: 8px 0;
}

.fv-quantity-selector__value::-webkit-inner-spin-button,
.fv-quantity-selector__value::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fv-quantity-selector__value:focus {
  outline: none;
}

.fv-quantity-selector--sm .fv-quantity-selector__btn {
  width: 28px;
  height: 28px;
  font-size: 14px;
  margin: 3px;
}

.fv-quantity-selector--sm .fv-quantity-selector__value {
  width: 40px;
  font-size: 13px;
}

.fv-quantity-selector--lg .fv-quantity-selector__btn {
  width: 44px;
  height: 44px;
  font-size: 20px;
  margin: 6px;
}

.fv-quantity-selector--lg .fv-quantity-selector__value {
  width: 64px;
  font-size: 17px;
}

[data-fv-theme="dark"] .fv-quantity-selector {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-quantity-selector__btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent);
}

[data-fv-theme="dark"] .fv-quantity-selector__btn:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* === quick-action === */
.fv-quick-action {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 18px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-quick-action:hover {
  transform: translateY(-2px);
}

.fv-quick-action__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 8px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(242, 244, 247, 0.85));
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-spatial-item);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-quick-action__btn i,
.fv-quick-action__btn .fv-quick-action__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 18px;
  transition: background 0.2s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-quick-action__btn span,
.fv-quick-action__btn .fv-quick-action__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.fv-quick-action__btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-item);
}

.fv-quick-action__btn:hover i,
.fv-quick-action__btn:hover .fv-quick-action__icon {
  background: var(--accent-gradient);
  color: #fff;
  transform: scale(1.05);
}

.fv-quick-action__btn:active {
  transform: translateY(0) scale(0.97);
}

.fv-quick-action__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-item);
}

.fv-quick-action__btn:disabled,
.fv-quick-action__btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-spatial-item);
}

.fv-quick-action__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 22px;
  margin: 0 auto 12px;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-quick-action__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}

.fv-quick-action__label--primary {
  font-weight: 700;
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-quick-action {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-quick-action__btn {
  background: linear-gradient(180deg, rgba(54, 54, 58, 0.85), rgba(38, 38, 42, 0.85));
  color: var(--text-primary);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-fv-theme="dark"] .fv-quick-action__btn:hover {
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-item);
}

[data-fv-theme="dark"] .fv-quick-action__btn span,
[data-fv-theme="dark"] .fv-quick-action__btn .fv-quick-action__label {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-quick-action__icon {
  background: var(--accent-soft);
  color: var(--accent);
}

[data-fv-theme="dark"] .fv-quick-action__label {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-quick-action__label--primary {
  color: var(--text-primary);
}

/* === radar-chart === */
.fv-radar-chart {
  position: relative;
}

.fv-radar-chart__svg {
  width: 100%;
  height: 100%;
}

.fv-radar-chart__grid {
  fill: none;
  stroke: var(--border-outer);
  stroke-width: 1;
}

.fv-radar-chart__axis {
  stroke: var(--border-outer);
  stroke-width: 1;
}

.fv-radar-chart__area {
  fill: var(--accent);
  fill-opacity: 0.15;
  stroke: var(--accent);
  stroke-width: 2;
}

.fv-radar-chart__dot {
  fill: var(--accent);
  stroke: var(--bg-card);
  stroke-width: 2;
}

.fv-radar-chart__label {
  fill: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  text-anchor: middle;
}

.fv-radar-chart__tooltip {
  position: absolute;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  pointer-events: none;
  white-space: nowrap;
}

/* === radio === */
.fv-radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.fv-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.fv-radio__circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-outer);
  background: var(--bg-item);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.fv-radio__circle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform 0.2s;
}

.fv-radio input:checked + .fv-radio__circle {
  background: var(--accent-gradient);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-radio input:checked + .fv-radio__circle::after {
  transform: scale(1);
}

.fv-radio__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.fv-radio:hover .fv-radio__circle {
  border-color: var(--accent);
}

/* === radio-group === */
.fv-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fv-radio-group--row {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.fv-radio-group--sm {
  gap: 8px;
}

.fv-radio-group--sm.fv-radio-group--row {
  gap: 12px;
}

.fv-radio-group--lg {
  gap: 16px;
}

.fv-radio-group--lg.fv-radio-group--row {
  gap: 20px;
}

.fv-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
  transition: color 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-radio input,
.fv-radio__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  pointer-events: none;
}

.fv-radio__dot {
  position: relative;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-outer);
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-radio__dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-gradient);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-radio__label {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
}

.fv-radio:hover .fv-radio__dot {
  border-color: var(--accent);
}

.fv-radio:has(input:checked) .fv-radio__dot,
.fv-radio--checked .fv-radio__dot {
  border-color: var(--accent);
}

.fv-radio:has(input:checked) .fv-radio__dot::after,
.fv-radio--checked .fv-radio__dot::after {
  transform: scale(1);
}

.fv-radio:has(input:focus-visible) .fv-radio__dot {
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-radio--disabled,
.fv-radio input:disabled,
.fv-radio__input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.fv-radio-group--sm .fv-radio,
.fv-radio-group--sm .fv-radio__label {
  font-size: 13px;
  gap: 8px;
}

.fv-radio-group--sm .fv-radio__dot {
  width: 18px;
  height: 18px;
}

.fv-radio-group--sm .fv-radio__dot::after {
  width: 8px;
  height: 8px;
}

.fv-radio-group--lg .fv-radio,
.fv-radio-group--lg .fv-radio__label {
  font-size: 17px;
  gap: 12px;
}

.fv-radio-group--lg .fv-radio__dot {
  width: 26px;
  height: 26px;
}

.fv-radio-group--lg .fv-radio__dot::after {
  width: 12px;
  height: 12px;
}

[data-fv-theme="dark"] .fv-radio__dot {
  border: 2px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-radio:has(input:checked) .fv-radio__dot,
[data-fv-theme="dark"] .fv-radio--checked .fv-radio__dot {
  border-color: var(--accent);
}

/* === range-slider === */
.fv-range-slider {
  position: relative;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
}

.fv-range-slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  transform: translateY(-50%);
}

.fv-range-slider__fill {
  position: absolute;
  top: 50%;
  height: 6px;
  border-radius: 3px;
  background: var(--accent-gradient);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transform: translateY(-50%);
}

.fv-range-slider__thumb {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transform: translate(-50%, -50%);
  cursor: grab;
  transition: box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
  outline: none;
  border: none;
  touch-action: none;
}

.fv-range-slider__thumb:hover {
  box-shadow: 0 0 0 6px var(--accent-soft),
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

.fv-range-slider__thumb:focus-visible,
.fv-range-slider__thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 0 8px var(--accent-soft),
    0 2px 12px rgba(0, 0, 0, 0.22),
    0 0 0 1px var(--accent);
}

.fv-range-slider--dual .fv-range-slider__thumb {
  background: #fff;
}

.fv-range-slider__value {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.fv-range-slider__values {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
}

.fv-range-slider__values span:last-child {
  color: var(--text-secondary);
}

.fv-range-slider--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.fv-range-slider--sm {
  height: 36px;
}

.fv-range-slider--sm .fv-range-slider__thumb {
  width: 18px;
  height: 18px;
}

.fv-range-slider--sm .fv-range-slider__track,
.fv-range-slider--sm .fv-range-slider__fill {
  height: 4px;
}

.fv-range-slider--lg {
  height: 52px;
}

.fv-range-slider--lg .fv-range-slider__thumb {
  width: 26px;
  height: 26px;
}

.fv-range-slider--lg .fv-range-slider__track,
.fv-range-slider--lg .fv-range-slider__fill {
  height: 8px;
}

.fv-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  touch-action: none;
}

.fv-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
}

.fv-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
}

.fv-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-range:hover::-webkit-slider-thumb {
  box-shadow: 0 0 0 6px var(--accent-soft),
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

.fv-range:hover::-moz-range-thumb {
  box-shadow: 0 0 0 6px var(--accent-soft),
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(0, 0, 0, 0.06);
}

.fv-range:focus-visible::-webkit-slider-thumb,
.fv-range:active::-webkit-slider-thumb {
  box-shadow: 0 0 0 8px var(--accent-soft),
    0 2px 12px rgba(0, 0, 0, 0.22),
    0 0 0 1px var(--accent);
}

.fv-range:focus-visible::-moz-range-thumb,
.fv-range:active::-moz-range-thumb {
  box-shadow: 0 0 0 8px var(--accent-soft),
    0 2px 12px rgba(0, 0, 0, 0.22),
    0 0 0 1px var(--accent);
}

.fv-range--sm::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
}

.fv-range--sm::-moz-range-thumb {
  width: 18px;
  height: 18px;
}

.fv-range--lg::-webkit-slider-thumb {
  width: 26px;
  height: 26px;
  margin-top: -11px;
}

.fv-range--lg::-moz-range-thumb {
  width: 26px;
  height: 26px;
}

.fv-range:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-fv-theme="dark"] .fv-range-slider__track,
[data-fv-theme="dark"] .fv-range::-webkit-slider-runnable-track,
[data-fv-theme="dark"] .fv-range::-moz-range-track {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-range-slider__thumb,
[data-fv-theme="dark"] .fv-range::-webkit-slider-thumb,
[data-fv-theme="dark"] .fv-range::-moz-range-thumb {
  background: #1c1c1e;
}

/* === recent-transactions === */
.fv-recent-transactions {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
}

.fv-recent-transactions__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-recent-transactions__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}

.fv-recent-transactions__body {
  display: flex;
  flex-direction: column;
}

.fv-recent-transactions__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-outer);
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-recent-transactions__item:last-child {
  border-bottom: none;
}

.fv-recent-transactions__item:hover {
  background: var(--bg-item);
}

.fv-recent-transactions__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--accent-soft);
  color: var(--accent);
}

.fv-recent-transactions__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fv-recent-transactions__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-recent-transactions__meta {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-recent-transactions__amount {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.2px;
  color: var(--text-primary);
  text-align: right;
}

.fv-recent-transactions__amount--in {
  color: var(--color-success);
}

.fv-recent-transactions__amount--out {
  color: var(--color-danger);
}

.fv-recent-transactions__empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

[data-fv-theme="dark"] .fv-recent-transactions {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-recent-transactions__header {
  border-bottom-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-recent-transactions__title {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-recent-transactions__item {
  border-bottom-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-recent-transactions__item:hover {
  background: var(--bg-item);
}

[data-fv-theme="dark"] .fv-recent-transactions__icon {
  background: var(--accent-soft);
  color: var(--accent);
}

[data-fv-theme="dark"] .fv-recent-transactions__name {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-recent-transactions__meta {
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-recent-transactions__amount {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-recent-transactions__amount--in {
  color: var(--color-success);
}

[data-fv-theme="dark"] .fv-recent-transactions__amount--out {
  color: var(--color-danger);
}

[data-fv-theme="dark"] .fv-recent-transactions__empty {
  color: var(--text-tertiary);
}

/* === register-form === */
.fv-register-form {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fv-register-form__header {
  text-align: center;
  margin-bottom: 8px;
}

.fv-register-form__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.fv-register-form__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.fv-register-form__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.fv-register-form__divider::before,
.fv-register-form__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-outer);
}

.fv-register-form__social {
  display: flex;
  gap: 8px;
}

.fv-register-form__social-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

.fv-register-form__social-btn:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-register-form__terms {
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
}

.fv-register-form__terms a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-register-form__terms a:hover {
  text-decoration: underline;
}

.fv-register-form__footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-register-form__footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-register-form__footer a:hover {
  text-decoration: underline;
}

.fv-register-form__password-strength {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.fv-register-form__password-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border-outer);
  transition: background 0.3s;
}

.fv-register-form__password-bar.weak {
  background: var(--color-danger);
}

.fv-register-form__password-bar.medium {
  background: var(--color-warning);
}

.fv-register-form__password-bar.strong {
  background: var(--color-success);
}

.fv-register-form__error {
  padding: 10px 14px;
  background: rgba(215, 38, 30, 0.08);
  border: 1px solid rgba(215, 38, 30, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 500;
}

/* === reset-password === */
.fv-reset-password {
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fv-reset-password__header {
  text-align: center;
  margin-bottom: 8px;
}

.fv-reset-password__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.fv-reset-password__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
}

.fv-reset-password__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}

.fv-reset-password__success {
  text-align: center;
  padding: 20px;
  background: rgba(36, 176, 73, 0.08);
  border: 1px solid rgba(36, 176, 73, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: 14px;
  font-weight: 500;
}

.fv-reset-password__footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-reset-password__footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-reset-password__footer a:hover {
  text-decoration: underline;
}

.fv-reset-password__error {
  padding: 10px 14px;
  background: rgba(215, 38, 30, 0.08);
  border: 1px solid rgba(215, 38, 30, 0.2);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 500;
}

/* === result === */
.fv-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 24px;
}

.fv-result--center {
  align-items: center;
  text-align: center;
}

.fv-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  font-size: 30px;
  color: #fff;
  margin-bottom: 20px;
  box-shadow: var(--shadow-spatial-card);
}

.fv-result__icon--success {
  background: var(--success-gradient);
}

.fv-result__icon--error {
  background: var(--danger-gradient);
}

.fv-result__icon--warning {
  background: var(--warning-gradient);
}

.fv-result__icon--info {
  background: var(--accent-gradient);
}

.fv-result__title {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.fv-result__desc,
.fv-result__description {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 380px;
  margin-bottom: 24px;
}

.fv-result__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.fv-result__extra {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border-outer);
  font-size: 13px;
  color: var(--text-tertiary);
  width: 100%;
}

[data-fv-theme="dark"] .fv-result__icon {
  box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 12px 30px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.18);
}

/* === safe-area === */
.fv-safe-area {
  padding-top: env(safe-area-inset-top, 0px);
}

.fv-safe-area--bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.fv-safe-area--left {
  padding-left: env(safe-area-inset-left, 0px);
}

.fv-safe-area--right {
  padding-right: env(safe-area-inset-right, 0px);
}

.fv-safe-area--all {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

/* === scatter-chart === */
.fv-scatter-chart {
  position: relative;
}

.fv-scatter-chart__svg {
  width: 100%;
  height: 100%;
}

.fv-scatter-chart__grid {
  stroke: var(--border-outer);
  stroke-dasharray: 4 4;
}

.fv-scatter-chart__axis {
  stroke: var(--text-tertiary);
  stroke-width: 1;
}

.fv-scatter-chart__label {
  fill: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
}

.fv-scatter-chart__dot {
  transition: r 0.2s, opacity 0.2s;
}

.fv-scatter-chart__dot:hover {
  opacity: 0.8;
}

.fv-scatter-chart__tooltip {
  position: absolute;
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  pointer-events: none;
  white-space: nowrap;
}

/* === scroll-to-top === */
.fv-scroll-to-top,
.fv-scroll-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-spatial-btn);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-scroll-to-top.visible,
.fv-scroll-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fv-scroll-to-top:hover,
.fv-scroll-top:hover {
  filter: brightness(1.05);
  transform: translateY(-2px);
}

.fv-scroll-to-top:active,
.fv-scroll-top:active {
  transform: scale(0.95);
}

/* === search-input === */
.fv-search-input {
  position: relative;
  display: inline-flex;
  width: 100%;
}

.fv-search-input__field {
  padding: 12px 16px 12px 40px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
  width: 100%;
  font-family: inherit;
}

.fv-search-input__field:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-search-input__field:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fv-search-input__field::placeholder {
  color: var(--text-tertiary);
}

.fv-search-input__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fv-search-input--sm .fv-search-input__field {
  padding: 8px 12px 8px 36px;
  font-size: 13px;
}

.fv-search-input--sm .fv-search-input__icon {
  left: 10px;
  font-size: 14px;
}

.fv-search-input--lg .fv-search-input__field {
  padding: 14px 20px 14px 44px;
  font-size: 17px;
}

.fv-search-input--lg .fv-search-input__icon {
  left: 14px;
  font-size: 18px;
}

[data-fv-theme="dark"] .fv-search-input__field {
  border: 1px solid var(--border-outer);
}

/* === select (native fallback — tidak dipakai, custom .fv-select di atas) === */

/* === session-timeout === */
.fv-session-timeout {
  text-align: center;
}

.fv-session-timeout__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(215, 38, 30, 0.1);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin: 0 auto 16px;
}

.fv-session-timeout__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.fv-session-timeout__message {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 20px;
}

.fv-session-timeout__timer {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-danger);
  margin-bottom: 20px;
}

.fv-session-timeout__actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* === shopping-cart === */
.fv-shopping-cart {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
}

.fv-shopping-cart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-shopping-cart__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--text-primary);
}

.fv-shopping-cart__list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 360px;
  scrollbar-width: thin;
}

.fv-shopping-cart__list .fv-cart-item:last-child {
  border-bottom: none;
}

.fv-shopping-cart__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px;
  border-top: 1px solid var(--border-outer);
  background: color-mix(in srgb, var(--bg-item) 50%, transparent);
}

.fv-shopping-cart__total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fv-shopping-cart__total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.fv-shopping-cart__total-value {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--accent);
}

.fv-shopping-cart__checkout {
  display: flex;
}

.fv-shopping-cart__checkout .fv-btn {
  width: 100%;
}

[data-fv-theme="dark"] .fv-shopping-cart {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-shopping-cart__footer {
  background: color-mix(in srgb, var(--bg-item) 40%, transparent);
}

/* === sidebar === */
.fv-sidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
}

.fv-tree-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.fv-tree-item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.fv-tree-item.active {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
}

.fv-tree-item i {
  font-size: 18px;
  width: 20px;
  text-align: center;
}

.fv-tree-item .count {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,0.2);
}

.fv-tree-item:not(.active) .count {
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-sidebar {
  border: 1px solid var(--border-outer);
}

/* === skeleton === */
.fv-skeleton {
  background: linear-gradient(90deg, var(--bg-item) 25%, rgba(255,255,255,0.4) 50%, var(--bg-item) 75%);
  background-size: 200% 100%;
  animation: fv-skeleton-loading 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.fv-skeleton--text {
  height: 16px;
  width: 100%;
}

.fv-skeleton--title {
  height: 24px;
  width: 60%;
}

.fv-skeleton--avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.fv-skeleton--card {
  height: 200px;
  width: 100%;
  border-radius: var(--radius-lg);
}

[data-fv-theme="dark"] .fv-skeleton {
  background: linear-gradient(90deg, rgba(42,42,46,0.6) 25%, rgba(60,60,64,0.6) 50%, rgba(42,42,46,0.6) 75%);
  background-size: 200% 100%;
}

@keyframes fv-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === snackbar === */
.fv-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25,1,0.5,1);
}

.fv-snackbar.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.fv-snackbar__message {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}

.fv-snackbar__action {
  border: none;
  background: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  font-family: inherit;
  white-space: nowrap;
}

.fv-snackbar__action:hover {
  background: var(--accent-soft);
}

.fv-snackbar__close {
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.fv-snackbar__close:hover {
  color: var(--text-primary);
  background: var(--bg-item);
}

[data-fv-theme="dark"] .fv-snackbar {
  border: 1px solid var(--border-outer);
}

/* === sparkline === */
.fv-sparkline {
  display: inline-block;
  vertical-align: middle;
}

.fv-sparkline__svg {
  display: block;
}

.fv-sparkline__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fv-sparkline__line--success {
  stroke: var(--color-success);
}

.fv-sparkline__line--danger {
  stroke: var(--color-danger);
}

.fv-sparkline__area {
  opacity: 0.1;
}

.fv-sparkline__area--accent {
  fill: var(--accent);
}

.fv-sparkline__area--success {
  fill: var(--color-success);
}

.fv-sparkline__area--danger {
  fill: var(--color-danger);
}

.fv-sparkline__dot {
  fill: var(--accent);
  stroke: var(--bg-card);
  stroke-width: 2;
}

/* === statistic === */
.fv-statistic {
  text-align: left;
}

.fv-statistic--center {
  text-align: center;
}

.fv-statistic--right {
  text-align: right;
}

.fv-statistic__title {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 0 0 4px;
}

.fv-statistic__label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
  margin: 4px 0 0;
}

.fv-statistic__value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text-primary);
  line-height: 1.2;
  margin: 0;
}

.fv-statistic__prefix {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 2px;
}

.fv-statistic__suffix {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 2px;
}

.fv-statistic__description {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.fv-statistic__trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 8px;
}

.fv-statistic__trend--up {
  background: rgba(36,176,73,0.08);
  color: var(--color-success);
}

.fv-statistic__trend--down {
  background: rgba(215,38,30,0.08);
  color: var(--color-danger);
}

/* === status-badge === */
.fv-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}

.fv-status-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fv-status-badge--online .fv-status-badge__dot {
  background: #24B049;
  box-shadow: 0 0 6px rgba(36,176,73,0.4);
}

.fv-status-badge--online {
  color: var(--color-success);
}

.fv-status-badge--offline .fv-status-badge__dot {
  background: var(--text-tertiary);
}

.fv-status-badge--offline {
  color: var(--text-tertiary);
}

.fv-status-badge--busy .fv-status-badge__dot {
  background: #E63946;
  box-shadow: 0 0 6px rgba(230,57,70,0.4);
}

.fv-status-badge--busy {
  color: var(--color-danger);
}

.fv-status-badge--away .fv-status-badge__dot {
  background: #E68A00;
  box-shadow: 0 0 6px rgba(230,138,0,0.4);
}

.fv-status-badge--away {
  color: var(--color-warning);
}

.fv-status-badge__dot--pulse {
  animation: fv-pulse-dot 2s ease-in-out infinite;
}

@keyframes fv-pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === stepper === */
.fv-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}

.fv-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.fv-stepper__circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--border-outer);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-tertiary);
  background: var(--bg-card);
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.fv-stepper__step.active .fv-stepper__circle {
  background: var(--accent-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-spatial-btn);
}

.fv-stepper__step.completed .fv-stepper__circle {
  background: var(--color-success);
  color: #fff;
  border-color: transparent;
}

.fv-stepper__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-align: center;
  max-width: 100px;
  transition: color 0.3s;
}

.fv-stepper__step.active .fv-stepper__label {
  color: var(--text-primary);
}

.fv-stepper__step.completed .fv-stepper__label {
  color: var(--color-success);
}

.fv-stepper__line {
  flex: 1;
  height: 2px;
  background: var(--border-outer);
  margin: 0 4px;
  margin-bottom: 24px;
  transition: background 0.3s;
}

.fv-stepper__line.filled {
  background: var(--color-success);
}

.fv-stepper__step--vertical {
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
}

.fv-stepper__step--vertical .fv-stepper__circle {
  margin-top: 2px;
}

.fv-stepper__step--vertical .fv-stepper__label {
  text-align: left;
}

.fv-stepper__step--vertical .fv-stepper__line {
  width: 2px;
  height: 32px;
  margin: 0 0 0 15px;
  margin-bottom: 0;
  flex: none;
}

/* === streaming-text === */
.fv-streaming-text {
  display: inline;
}

.fv-streaming-text__cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: fv-streaming-blink 0.8s step-end infinite;
}

.fv-streaming-text--complete .fv-streaming-text__cursor {
  display: none;
}

@keyframes fv-streaming-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* === swipe-action === */
.fv-swipe-action {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-outer);
  margin-bottom: 2px;
}

.fv-swipe-action__content {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  background: var(--bg-card);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 14px 16px;
  gap: 12px;
}

.fv-swipe-action__content.swiping {
  transition: none;
  cursor: grabbing;
}

.fv-swipe-action__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--bg-item);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--text-secondary);
}

.fv-swipe-action__text {
  flex: 1;
  min-width: 0;
}

.fv-swipe-action__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-swipe-action__subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-swipe-action__actions {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: 0;
}

.fv-swipe-action__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  color: #fff;
  font-size: 20px;
  flex-shrink: 0;
  gap: 4px;
  cursor: pointer;
  transition: filter 0.15s;
}

.fv-swipe-action__action:hover {
  filter: brightness(1.1);
}

.fv-swipe-action__action:active {
  filter: brightness(0.9);
}

.fv-swipe-action__action-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.fv-swipe-action__action--edit {
  background: var(--accent);
}

.fv-swipe-action__action--delete {
  background: var(--color-danger);
}

.fv-swipe-action__action--archive {
  background: var(--color-warning);
}

.fv-swipe-action__action--pin {
  background: var(--color-success);
}

.fv-swipe-action__action--more {
  background: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-swipe-action {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-swipe-action__content {
  background: var(--bg-card);
}

[data-fv-theme="dark"] .fv-swipe-action__icon {
  background: var(--bg-item);
}

/* === tabs === */
.fv-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset-pod);
  border: 1px solid var(--border-inner);
}

.fv-tab {
  padding: 10px 18px;
  border-radius: calc(var(--radius-md) - 4px);
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
  text-align: center;
}

.fv-tab:hover {
  color: var(--text-primary);
}

.fv-tab.active {
  background: var(--bg-card);
  box-shadow: var(--shadow-spatial-item);
  color: var(--text-primary);
}

.fv-tabs__content {
  padding: 20px;
  margin-top: 12px;
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
}

[data-fv-theme="dark"] .fv-tabs {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-tabs__content {
  border: 1px solid var(--border-outer);
}

/* === tag === */
.fv-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.fv-tag--solid {
  background: var(--accent-gradient);
  color: #fff;
}

.fv-tag--solid.fv-tag--success {
  background: var(--success-gradient);
}

.fv-tag--solid.fv-tag--warning {
  background: var(--warning-gradient);
}

.fv-tag--solid.fv-tag--danger {
  background: var(--danger-gradient);
}

.fv-tag--soft {
  background: var(--accent-soft);
  color: var(--accent);
}

.fv-tag--soft.fv-tag--success {
  background: rgba(36,176,73,0.08);
  color: var(--color-success);
}

.fv-tag--soft.fv-tag--warning {
  background: rgba(230,138,0,0.08);
  color: var(--color-warning);
}

.fv-tag--soft.fv-tag--danger {
  background: rgba(215,38,30,0.08);
  color: var(--color-danger);
}

.fv-tag--outline {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.fv-tag--outline.fv-tag--success {
  border-color: var(--color-success);
  color: var(--color-success);
}

.fv-tag--outline.fv-tag--warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.fv-tag--outline.fv-tag--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.fv-tag__remove {
  margin-left: 4px;
  cursor: pointer;
  font-size: 10px;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.fv-tag__remove:hover {
  opacity: 1;
}

/* === task-widget === */
.fv-task-widget {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
}

.fv-task-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-outer);
}

.fv-task-widget__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.3px;
}

.fv-task-widget__add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  border: none;
  color: var(--accent);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1), color 0.15s cubic-bezier(0.25, 1, 0.5, 1), transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-task-widget__add:hover {
  background: var(--accent-gradient);
  color: #fff;
}

.fv-task-widget__add:active {
  transform: scale(0.92);
}

.fv-task-widget__add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.fv-task-widget__list {
  display: flex;
  flex-direction: column;
}

.fv-task-widget__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border-outer);
  cursor: pointer;
  transition: background 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-task-widget__item:last-child {
  border-bottom: none;
}

.fv-task-widget__item:hover {
  background: var(--bg-item);
}

.fv-task-widget__item:has(input:focus-visible) {
  box-shadow: inset 0 0 0 2px var(--accent-soft);
}

.fv-task-widget__checkbox {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--border-outer);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  font-size: 11px;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-task-widget__checkbox:hover {
  border-color: var(--accent);
}

.fv-task-widget__checkbox.checked,
.fv-task-widget__checkbox:checked {
  background: var(--accent-gradient);
  border-color: transparent;
  color: #fff;
}

.fv-task-widget__text {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-secondary);
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-task-widget__text--completed {
  text-decoration: line-through;
  color: var(--text-tertiary);
}

.fv-task-widget__priority {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fv-task-widget__priority--high {
  background: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(215, 38, 30, 0.15);
}

.fv-task-widget__priority--medium {
  background: var(--color-warning);
  box-shadow: 0 0 0 3px rgba(230, 138, 0, 0.15);
}

.fv-task-widget__priority--low {
  background: var(--color-success);
  box-shadow: 0 0 0 3px rgba(36, 176, 73, 0.15);
}

.fv-task-widget__empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

[data-fv-theme="dark"] .fv-task-widget {
  background: var(--bg-card);
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-task-widget__header {
  border-bottom-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-task-widget__title {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-task-widget__item {
  border-bottom-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-task-widget__item:hover {
  background: var(--bg-item);
}

[data-fv-theme="dark"] .fv-task-widget__text {
  color: var(--text-secondary);
}

[data-fv-theme="dark"] .fv-task-widget__text--completed {
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-task-widget__checkbox {
  border-color: var(--border-outer);
}

[data-fv-theme="dark"] .fv-task-widget__empty {
  color: var(--text-tertiary);
}

/* === textarea === */
.fv-textarea {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 500;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-primary);
  outline: none;
  transition: all 0.2s;
  width: 100%;
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.fv-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-inset-pod);
}

.fv-textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fv-textarea::placeholder {
  color: var(--text-tertiary);
}

.fv-textarea--sm {
  padding: 8px 12px;
  font-size: 13px;
  min-height: 60px;
}

.fv-textarea--lg {
  padding: 14px 20px;
  font-size: 17px;
  min-height: 100px;
}

[data-fv-theme="dark"] .fv-textarea {
  border: 1px solid var(--border-outer);
}

/* === theme-switcher === */
.fv-theme-switcher {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-item);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-inner);
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  box-shadow: var(--shadow-spatial-item);
  font-family: inherit;
}

.fv-theme-switcher__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 38px;
  height: 34px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 15px;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s cubic-bezier(.25, 1, .5, 1);
}

.fv-theme-switcher__opt:hover {
  color: var(--text-primary);
  background: var(--bg-card);
}

.fv-theme-switcher__opt:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-theme-switcher__opt:active {
  transform: scale(.96);
}

.fv-theme-switcher__icon {
  display: inline-flex;
  font-size: 16px;
  line-height: 1;
}

.fv-theme-switcher__label {
  font-size: 13px;
  font-weight: 600;
}

.fv-theme-switcher__opt--active,
.fv-theme-switcher__opt.is-active {
  background: var(--bg-card);
  color: var(--accent);
  font-weight: 700;
  box-shadow: var(--shadow-spatial-item);
}

[data-fv-theme="dark"] .fv-theme-switcher {
  border: 1px solid var(--border-outer);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

[data-fv-theme="dark"] .fv-theme-switcher__opt--active,
[data-fv-theme="dark"] .fv-theme-switcher__opt.is-active {
  background: rgba(255, 255, 255, 0.06);
}

/* === thinking-indicator === */
.fv-thinking-indicator {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 8px 12px;
}

.fv-thinking-indicator__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: fv-thinking-bounce 1.4s ease-in-out infinite;
}

.fv-thinking-indicator__dot:nth-child(2) {
  animation-delay: 0.2s;
}

.fv-thinking-indicator__dot:nth-child(3) {
  animation-delay: 0.4s;
}

.fv-thinking-indicator__label {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-left: 4px;
}

@keyframes fv-thinking-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* === toast === */
.fv-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.fv-toast {
  padding: 14px 20px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  box-shadow: var(--shadow-spatial-card);
  backdrop-filter: blur(20px);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.25,1,0.5,1), opacity 0.3s;
  min-width: 200px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fv-toast.show {
  transform: translateX(0);
  opacity: 1;
}

.fv-toast--accent {
  background: var(--accent-gradient);
}

.fv-toast--success {
  background: var(--success-gradient);
}

.fv-toast--warning {
  background: var(--warning-gradient);
}

.fv-toast--danger {
  background: var(--danger-gradient);
}

[data-fv-theme="dark"] .fv-toast {
  border: 1px solid var(--border-inner);
}

/* === toggle-button === */
.fv-toggle-btn {
  border: none;
  padding: 12px 22px;
  border-radius: var(--radius-xl);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25,1,0.5,1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  font-family: inherit;
  gap: 8px;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(242,244,247,0.85) 100%);
  color: var(--text-primary);
  box-shadow: var(--shadow-spatial-item);
  border-top: 1px solid rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

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

.fv-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.fv-toggle-btn--active,
.fv-toggle-btn[aria-pressed="true"] {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
  border-top: 1px solid rgba(255,255,255,0.2);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.fv-toggle-btn--active:hover,
.fv-toggle-btn[aria-pressed="true"]:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow-spatial-btn);
}

.fv-toggle-btn--sm {
  padding: 7px 14px;
  font-size: 13px;
}

.fv-toggle-btn--lg {
  padding: 14px 28px;
  font-size: 17px;
}

[data-fv-theme="dark"] .fv-toggle-btn {
  background: linear-gradient(180deg, rgba(54,54,58,0.85) 0%, rgba(38,38,42,0.85) 100%);
  border: 1px solid rgba(0,0,0,0.2);
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* === tooltip === */
.fv-tooltip {
  position: relative;
  display: inline-block;
}

.fv-tooltip::after {
  content: attr(data-fv-tooltip);
  position: absolute;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  background: var(--text-primary);
  color: var(--bg-body);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  pointer-events: none;
  z-index: 1000;
}

.fv-tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.fv-tooltip--top::after {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}

.fv-tooltip--top:hover::after {
  transform: translateX(-50%) translateY(0);
}

.fv-tooltip--bottom::after {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}

.fv-tooltip--bottom:hover::after {
  transform: translateX(-50%) translateY(0);
}

.fv-tooltip--left::after {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}

.fv-tooltip--left:hover::after {
  transform: translateY(-50%) translateX(0);
}

.fv-tooltip--right::after {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}

.fv-tooltip--right:hover::after {
  transform: translateY(-50%) translateX(0);
}

/* === topbar === */
.fv-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--border-outer);
  background: var(--bg-card);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
}

.fv-topbar__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.fv-topbar__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-left: auto;
}

.fv-topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.fv-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--border-outer);
  margin: 0 4px;
}

/* === tour === */
.fv-tour {
  position: fixed;
  inset: 0;
  z-index: 1001;
  pointer-events: none;
}

.fv-tour__mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

.fv-tour__spotlight {
  position: absolute;
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 7px rgba(0, 113, 227, 0.3);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-tour__tooltip {
  position: absolute;
  max-width: 320px;
  width: max-content;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  padding: 18px 20px;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1), transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-tour__tooltip.active,
.fv-tour__tooltip.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.fv-tour__arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  left: 50%;
  bottom: -7px;
  margin-left: -7px;
  background: var(--bg-card);
  border-right: 1px solid var(--border-inner);
  border-bottom: 1px solid var(--border-inner);
  transform: rotate(45deg);
}

.fv-tour[data-placement="top"] .fv-tour__arrow {
  top: -7px;
  bottom: auto;
  border: none;
  border-left: 1px solid var(--border-inner);
  border-top: 1px solid var(--border-inner);
}

.fv-tour[data-placement="left"] .fv-tour__arrow {
  left: -7px;
  top: 50%;
  bottom: auto;
  margin-left: 0;
  margin-top: -7px;
  border: none;
  border-left: 1px solid var(--border-inner);
  border-bottom: 1px solid var(--border-inner);
}

.fv-tour[data-placement="right"] .fv-tour__arrow {
  right: -7px;
  left: auto;
  top: 50%;
  margin-top: -7px;
  border: none;
  border-right: 1px solid var(--border-inner);
  border-top: 1px solid var(--border-inner);
}

.fv-tour__progress {
  height: 4px;
  border-radius: 99px;
  background: var(--bg-item);
  overflow: hidden;
  margin-bottom: 14px;
}

.fv-tour__progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--fv-tour-progress, 0%);
  background: var(--accent-gradient);
  border-radius: 99px;
  transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.fv-tour__step {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
}

.fv-tour__title {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.fv-tour__desc {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.fv-tour__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fv-tour__dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fv-tour__dots i,
.fv-tour__dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border-outer);
  transition: background 0.2s, transform 0.2s;
}

.fv-tour__dots .is-active {
  background: var(--accent);
  transform: scale(1.3);
}

.fv-tour__skip {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

.fv-tour__skip:hover {
  color: var(--text-primary);
  background: var(--bg-item);
}

.fv-tour__next {
  border: none;
  background: var(--accent-gradient);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-spatial-btn);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.fv-tour__next:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 113, 227, 0.3);
}

.fv-tour__next:active {
  transform: translateY(0);
}

[data-fv-theme="dark"] .fv-tour__tooltip,
[data-fv-theme="dark"] .fv-tour__arrow {
  border-color: var(--border-outer);
}

/* === tree-view === */
.fv-tree-view {
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-outer) transparent;
}
.fv-tree-view::-webkit-scrollbar { width: 8px; }
.fv-tree-view::-webkit-scrollbar-track { background: transparent; }
.fv-tree-view::-webkit-scrollbar-thumb { background: var(--border-outer); border-radius: 999px; }
.fv-tree-view::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

.fv-tree-view__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.fv-tree-view__item:hover {
  background: var(--accent-soft);
  color: var(--text-primary);
}

.fv-tree-view__item.active {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: var(--shadow-spatial-btn);
}

.fv-tree-view__toggle {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-tertiary);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.fv-tree-view__item.open .fv-tree-view__toggle {
  transform: rotate(90deg);
}

.fv-tree-view__icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.fv-tree-view__children {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

.fv-tree-view__leaf {
  padding-left: 28px;
}

.fv-tree-view__count {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-item);
  box-shadow: var(--shadow-inset-pod);
  color: var(--text-tertiary);
}

.fv-tree-view__item.active .fv-tree-view__count {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* === two-factor-input === */
.fv-two-factor-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 380px;
  margin: 0 auto;
  padding: 28px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  text-align: center;
  font-family: inherit;
}

.fv-two-factor-input__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.fv-two-factor-input__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.fv-two-factor-input__inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fv-two-factor-input__resend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-two-factor-input__resend button {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s cubic-bezier(.25, 1, .5, 1);
}

.fv-two-factor-input__resend button:hover:not(:disabled) {
  text-decoration: underline;
}

.fv-two-factor-input__resend button:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.fv-two-factor-input__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-two-factor-input__footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-two-factor-input__footer a:hover {
  text-decoration: underline;
}

[data-fv-theme="dark"] .fv-two-factor-input {
  border: 1px solid var(--border-outer);
}

/* === user-menu === */
.fv-user-menu {
  display: flex;
  flex-direction: column;
  min-width: 240px;
  padding: 6px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  font-family: inherit;
}

.fv-user-menu__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}

.fv-user-menu__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  border: 2px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-item);
}

.fv-user-menu__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-user-menu__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-user-menu__email {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-user-menu__divider {
  height: 1px;
  background: var(--border-outer);
  margin: 4px 8px;
}

.fv-user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s cubic-bezier(.25, 1, .5, 1);
}

.fv-user-menu__item i,
.fv-user-menu__item-icon {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.fv-user-menu__item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-user-menu__item:hover {
  background: var(--bg-item);
  color: var(--text-primary);
}

.fv-user-menu__item:focus-visible {
  outline: none;
  background: var(--bg-item);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.fv-user-menu__item:active {
  transform: scale(.98);
}

.fv-user-menu__item:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.fv-user-menu__item--danger,
.fv-user-menu__item--danger .fv-user-menu__item-label {
  color: var(--color-danger);
}

.fv-user-menu__item--danger:hover {
  background: rgba(215, 38, 30, 0.08);
  color: var(--color-danger);
}

.fv-user-menu__item--danger:focus-visible {
  background: rgba(215, 38, 30, 0.08);
  color: var(--color-danger);
  box-shadow: 0 0 0 3px rgba(215, 38, 30, 0.18);
}

.fv-user-menu__footer {
  padding: 8px 12px 4px;
  margin-top: 4px;
  border-top: 1px solid var(--border-outer);
  font-size: 12px;
  color: var(--text-tertiary);
}

[data-fv-theme="dark"] .fv-user-menu {
  border: 1px solid var(--border-outer);
}

/* === user-profile-widget === */
.fv-user-profile-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
}

.fv-user-profile-widget__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
}

.fv-user-profile-widget__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv-user-profile-widget__info {
  flex: 1;
  min-width: 0;
}

.fv-user-profile-widget__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.fv-user-profile-widget__role {
  font-size: 13px;
  color: var(--text-tertiary);
}

.fv-user-profile-widget__status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fv-user-profile-widget__status--online {
  background: var(--color-success);
}

.fv-user-profile-widget__status--offline {
  background: var(--text-tertiary);
}

.fv-user-profile-widget__status--busy {
  background: var(--color-warning);
}

[data-fv-theme="dark"] .fv-user-profile-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-user-profile-widget__name {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-user-profile-widget__role {
  color: var(--text-tertiary);
}

/* === verify-email === */
.fv-verify-email {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 380px;
  margin: 0 auto;
  padding: 28px;
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid var(--border-inner);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-spatial-card);
  text-align: center;
  font-family: inherit;
}

.fv-verify-email__title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.fv-verify-email__desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.fv-verify-email__inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.fv-verify-email__resend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-verify-email__resend button {
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s cubic-bezier(.25, 1, .5, 1);
}

.fv-verify-email__resend button:hover:not(:disabled) {
  text-decoration: underline;
}

.fv-verify-email__resend button:disabled {
  color: var(--text-tertiary);
  cursor: not-allowed;
}

.fv-verify-email__footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.fv-verify-email__footer a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.fv-verify-email__footer a:hover {
  text-decoration: underline;
}

[data-fv-theme="dark"] .fv-verify-email {
  border: 1px solid var(--border-outer);
}

/* === version-panel === */
.fv-version-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--border-outer);
  border-top: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  color: var(--text-primary);
  font-family: inherit;
}

.fv-version-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.fv-version-panel__title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.fv-version-panel__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--bg-item);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-inset-pod);
}

.fv-version-panel__current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: var(--accent-gradient);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 6px 18px rgba(0, 113, 227, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  margin-bottom: 18px;
}

.fv-version-panel__current-version {
  display: block;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.fv-version-panel__current-build {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.fv-version-panel__list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 4px;
}

.fv-version-panel__list::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 14px;
  bottom: 18px;
  width: 2px;
  border-radius: 2px;
  background: var(--border-outer);
}

.fv-version-panel__item {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 10px 0;
}

.fv-version-panel__item:first-child {
  padding-top: 2px;
}

.fv-version-panel__dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border-outer);
  box-shadow: 0 0 0 4px var(--bg-card);
}

.fv-version-panel__item:first-child .fv-version-panel__dot {
  background: var(--accent);
  border-color: transparent;
  box-shadow: 0 0 0 4px var(--bg-card), 0 0 0 7px var(--accent-soft);
}

.fv-version-panel__version {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.fv-version-panel__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.fv-version-panel__date {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
}

.fv-version-panel__author {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.fv-version-panel__changes {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fv-version-panel__change {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.4;
}

.fv-version-panel__change::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

.fv-version-panel__status {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}

.fv-version-panel__status--current {
  background: var(--accent-gradient);
}

.fv-version-panel__status--stable {
  background: var(--success-gradient);
}

.fv-version-panel__status--beta {
  background: var(--warning-gradient);
}

.fv-version-panel__status--rc {
  background: linear-gradient(180deg, #8E8BF6 0%, #6366F1 100%);
}

.fv-version-panel__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-version-panel {
  border: 1px solid var(--border-outer);
  border-top: 1px solid var(--border-inner);
}

[data-fv-theme="dark"] .fv-version-panel__badge {
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-version-panel__dot {
  background: #1c1c1e;
  box-shadow: 0 0 0 4px var(--bg-card);
}

[data-fv-theme="dark"] .fv-version-panel__item:first-child .fv-version-panel__dot {
  box-shadow: 0 0 0 4px var(--bg-card), 0 0 0 7px var(--accent-soft);
}

[data-fv-theme="dark"] .fv-version-panel__list::before {
  background: var(--border-outer);
}

/* === video-player === */
.fv-video-player {
  position: relative;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  line-height: 0;
}

.fv-video-player video {
  width: 100%;
  display: block;
}

.fv-video-player__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  opacity: 0;
  transition: opacity 0.2s;
}

.fv-video-player:hover .fv-video-player__controls {
  opacity: 1;
}

.fv-video-player__play {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.fv-video-player__play:hover {
  background: rgba(255,255,255,0.3);
}

.fv-video-player__progress {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}

.fv-video-player__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.1s;
}

.fv-video-player__time {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
}

.fv-video-player__volume {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s;
}

.fv-video-player__volume:hover {
  color: #fff;
}

.fv-video-player__fullscreen {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  transition: color 0.15s;
}

.fv-video-player__fullscreen:hover {
  color: #fff;
}

.fv-video-player__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  cursor: pointer;
}

.fv-video-player__big-play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background 0.2s;
}

.fv-video-player__big-play:hover {
  transform: scale(1.1);
  background: rgba(255,255,255,0.3);
}

/* === virtual-list === */
.fv-virtual-list {
  overflow: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--border-outer) transparent;
  border-radius: var(--radius-md);
}
.fv-virtual-list::-webkit-scrollbar { width: 8px; }
.fv-virtual-list::-webkit-scrollbar-track { background: transparent; }
.fv-virtual-list::-webkit-scrollbar-thumb { background: var(--border-outer); border-radius: 999px; }
.fv-virtual-list::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

.fv-virtual-list__phantom {
  width: 100%;
  pointer-events: none;
}

.fv-virtual-list__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.fv-virtual-list__item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-outer);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-item);
  transition: background 0.15s;
}

.fv-virtual-list__item:last-child {
  border-bottom: none;
}

.fv-virtual-list__item:hover {
  background: var(--accent-soft);
}

[data-fv-theme="dark"] .fv-virtual-list__item {
  background: rgba(42, 42, 46, 0.4);
}

[data-fv-theme="dark"] .fv-virtual-list__item:hover {
  background: rgba(0, 113, 227, 0.18);
}

/* === visually-hidden === */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* === widget === */
.fv-widget {
  background: var(--bg-card);
  backdrop-filter: blur(30px) saturate(200%);
  -webkit-backdrop-filter: blur(30px) saturate(200%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-inner);
  box-shadow: var(--shadow-spatial-card);
  overflow: hidden;
}

.fv-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.fv-widget__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.fv-widget__action {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.fv-widget__action:hover {
  background: var(--accent-soft);
}

.fv-widget__body {
  padding: 0 24px 24px;
}

.fv-widget__footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-outer);
  text-align: center;
}

.fv-widget--no-header .fv-widget__body {
  padding: 24px;
}

[data-fv-theme="dark"] .fv-widget {
  background: var(--bg-card);
  border: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-widget__title {
  color: var(--text-primary);
}

[data-fv-theme="dark"] .fv-widget__header {
  border-bottom: 1px solid var(--border-outer);
}

[data-fv-theme="dark"] .fv-widget__footer {
  border-top: 1px solid var(--border-outer);
}