@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap");
:root {
  --vt-font: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vt-radius-sm: 8px;
  --vt-radius-md: 12px;
  --vt-radius-lg: 16px;
  --vt-radius-xl: 20px;
  --vt-transition: 0.3s ease;
  --vt-success: #10B981;
  --vt-error: #EF4444;
  --vt-warning: #F59E0B;
  --vt-info: #3B82F6;
}

[data-theme=dark],
[data-ci=aurora][data-theme=dark] {
  --vt-bg: #0F0E17;
  --vt-bg-card: #1A1926;
  --vt-bg-elevated: #252336;
  --vt-bg-input: rgba(15,14,23,0.6);
  --vt-text: #F3F4F6;
  --vt-text-secondary: #94A3B8;
  --vt-text-muted: #9CA3AF;
  --vt-text-placeholder: #4B5563;
  --vt-border: rgba(255,255,255,0.08);
  --vt-border-subtle: rgba(139,92,246,0.1);
  --vt-border-focus: rgba(139,92,246,0.15);
  --vt-primary: #A78BFA;
  --vt-primary-hover: #C4B5FD;
  --vt-primary-alpha-10: rgba(167,139,250,0.1);
  --vt-primary-alpha-15: rgba(167,139,250,0.15);
  --vt-primary-alpha-08: rgba(167,139,250,0.08);
  --vt-accent: #2DD4BF;
  --vt-accent-hover: #5EEAD4;
  --vt-accent-alpha-10: rgba(45,212,191,0.1);
  --vt-gradient-primary: linear-gradient(135deg, #A78BFA, #2DD4BF);
  --vt-disabled-bg: rgba(75,85,99,0.3);
  --vt-disabled-text: #4B5563;
  --vt-toggle-bg: rgba(75,85,99,0.4);
  --vt-overlay: rgba(0,0,0,0.5);
  --vt-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --vt-shadow-md: 0 8px 30px rgba(0,0,0,0.4);
  --vt-shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --vt-shadow-focus: 0 0 0 3px rgba(167,139,250,0.15);
  --vt-shadow-primary: 0 4px 20px rgba(167,139,250,0.4);
  --vt-text-heading: #FFFFFF;
  --vt-bg-section: linear-gradient(145deg, rgba(30,27,46,0.7), rgba(15,14,23,0.9));
  --vt-bg-hover: rgba(167,139,250,0.04);
  --vt-primary-alpha-04: rgba(167,139,250,0.04);
  --vt-primary-alpha-06: rgba(167,139,250,0.06);
  --vt-primary-alpha-12: rgba(167,139,250,0.12);
  --vt-primary-alpha-20: rgba(167,139,250,0.2);
  --vt-primary-alpha-25: rgba(167,139,250,0.25);
  --vt-primary-alpha-30: rgba(167,139,250,0.3);
  --vt-accent-alpha-15: rgba(45,212,191,0.15);
  --vt-accent-alpha-20: rgba(45,212,191,0.2);
  --vt-error-alpha-10: rgba(239,68,68,0.15);
  --vt-error-alpha-25: rgba(239,68,68,0.25);
  --vt-warning-alpha-10: rgba(251,191,36,0.15);
  --vt-info-alpha-10: rgba(96,165,250,0.15);
  --vt-success-alpha-10: rgba(45,212,191,0.15);
  --vt-navbar-bg: rgba(15,14,23,0.85);
  --vt-footer-bg: #0A0913;
}

[data-theme=light],
[data-ci=aurora][data-theme=light] {
  --vt-bg: #F8FAFC;
  --vt-bg-card: #FFFFFF;
  --vt-bg-elevated: #F1F5F9;
  --vt-bg-input: #FFFFFF;
  --vt-text: #334155;
  --vt-text-secondary: #64748B;
  --vt-text-muted: #64748B;
  --vt-text-placeholder: #94A3B8;
  --vt-border: #E2E8F0;
  --vt-border-subtle: rgba(99,102,241,0.1);
  --vt-border-focus: rgba(99,102,241,0.35);
  --vt-primary: #6366F1;
  --vt-primary-hover: #4F46E5;
  --vt-primary-alpha-10: rgba(99,102,241,0.06);
  --vt-primary-alpha-15: rgba(99,102,241,0.1);
  --vt-primary-alpha-08: rgba(99,102,241,0.06);
  --vt-accent: #14B8A6;
  --vt-accent-hover: #0D9488;
  --vt-accent-alpha-10: rgba(20,184,166,0.1);
  --vt-gradient-primary: linear-gradient(135deg, #6366F1, #8B5CF6);
  --vt-disabled-bg: #F1F5F9;
  --vt-disabled-text: #94A3B8;
  --vt-toggle-bg: #CBD5E1;
  --vt-overlay: rgba(0,0,0,0.15);
  --vt-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --vt-shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --vt-shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --vt-shadow-focus: 0 0 0 3px rgba(99,102,241,0.1);
  --vt-shadow-primary: 0 4px 20px rgba(99,102,241,0.35);
  --vt-text-heading: #111827;
  --vt-bg-section: #FFFFFF;
  --vt-bg-hover: #FAFAFE;
  --vt-primary-alpha-04: rgba(99,102,241,0.03);
  --vt-primary-alpha-06: rgba(99,102,241,0.06);
  --vt-primary-alpha-12: rgba(99,102,241,0.12);
  --vt-primary-alpha-20: rgba(99,102,241,0.2);
  --vt-primary-alpha-25: rgba(99,102,241,0.25);
  --vt-primary-alpha-30: rgba(99,102,241,0.3);
  --vt-accent-alpha-15: rgba(20,184,166,0.15);
  --vt-accent-alpha-20: rgba(20,184,166,0.2);
  --vt-error-alpha-10: rgba(239,68,68,0.1);
  --vt-error-alpha-25: rgba(239,68,68,0.25);
  --vt-warning-alpha-10: rgba(245,158,11,0.1);
  --vt-info-alpha-10: rgba(59,130,246,0.1);
  --vt-success-alpha-10: rgba(16,185,129,0.1);
  --vt-navbar-bg: rgba(255,255,255,0.9);
  --vt-footer-bg: #F8FAFC;
}

[data-ci=ethereal] {
  --velto-violet-50: #f5f3ff;
  --velto-violet-100: #ede9fe;
  --velto-violet-200: #ddd6fe;
  --velto-violet-300: #c4b5fd;
  --velto-violet-400: #a78bfa;
  --velto-violet-500: #8b5cf6;
  --velto-violet-600: #7c3aed;
  --velto-violet-700: #6d28d9;
  --velto-violet-800: #5b21b6;
  --velto-violet-900: #4c1d95;
  --velto-violet-950: #2e1065;
  --velto-sky-50: #f0f9ff;
  --velto-sky-100: #e0f2fe;
  --velto-sky-200: #bae6fd;
  --velto-sky-300: #7dd3fc;
  --velto-sky-400: #38bdf8;
  --velto-sky-500: #0ea5e9;
  --velto-sky-600: #0284c7;
  --velto-sky-700: #0369a1;
  --velto-sky-800: #075985;
  --velto-sky-900: #0c4a6e;
  --velto-sky-950: #082f49;
  --velto-slate-50: #f8fafc;
  --velto-slate-100: #f1f5f9;
  --velto-slate-200: #e2e8f0;
  --velto-slate-300: #cbd5e1;
  --velto-slate-400: #94a3b8;
  --velto-slate-500: #64748b;
  --velto-slate-600: #475569;
  --velto-slate-700: #334155;
  --velto-slate-800: #1e293b;
  --velto-slate-900: #0f172a;
  --velto-slate-950: #020617;
}

[data-ci=ethereal][data-theme=dark] {
  --vt-bg: var(--velto-slate-900);
  --vt-bg-card: var(--velto-slate-800);
  --vt-bg-elevated: var(--velto-slate-700);
  --vt-bg-input: rgba(15,23,42,0.6);
  --vt-text: var(--velto-slate-50);
  --vt-text-secondary: var(--velto-slate-400);
  --vt-text-muted: var(--velto-slate-400);
  --vt-text-placeholder: var(--velto-slate-600);
  --vt-border: rgba(139, 92, 246, 0.15);
  --vt-border-subtle: rgba(139,92,246,0.1);
  --vt-border-focus: rgba(139,92,246,0.2);
  --vt-primary: var(--velto-violet-400);
  --vt-primary-hover: var(--velto-violet-300);
  --vt-primary-alpha-10: rgba(167,139,250,0.1);
  --vt-primary-alpha-15: rgba(167,139,250,0.15);
  --vt-primary-alpha-08: rgba(167,139,250,0.08);
  --vt-accent: var(--velto-sky-400);
  --vt-accent-hover: var(--velto-sky-300);
  --vt-accent-alpha-10: rgba(56,189,248,0.1);
  --vt-gradient-primary: linear-gradient(135deg, var(--velto-violet-400), var(--velto-sky-400));
  --vt-disabled-bg: rgba(75,85,99,0.3);
  --vt-disabled-text: var(--velto-slate-600);
  --vt-toggle-bg: rgba(75,85,99,0.4);
  --vt-overlay: rgba(0,0,0,0.5);
  --vt-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --vt-shadow-md: 0 8px 30px rgba(0,0,0,0.4);
  --vt-shadow-lg: 0 20px 60px rgba(0,0,0,0.5);
  --vt-shadow-focus: 0 0 0 3px rgba(139,92,246,0.15);
  --vt-shadow-primary: 0 4px 20px rgba(139,92,246,0.4);
  --vt-text-heading: #FFFFFF;
  --vt-bg-section: linear-gradient(145deg, rgba(30,27,46,0.7), rgba(15,14,23,0.9));
  --vt-bg-hover: rgba(139,92,246,0.04);
  --vt-primary-alpha-04: rgba(139,92,246,0.04);
  --vt-primary-alpha-06: rgba(139,92,246,0.06);
  --vt-primary-alpha-12: rgba(139,92,246,0.12);
  --vt-primary-alpha-20: rgba(139,92,246,0.2);
  --vt-primary-alpha-25: rgba(139,92,246,0.25);
  --vt-primary-alpha-30: rgba(139,92,246,0.3);
  --vt-accent-alpha-15: rgba(56,189,248,0.15);
  --vt-accent-alpha-20: rgba(56,189,248,0.2);
  --vt-error-alpha-10: rgba(239,68,68,0.15);
  --vt-error-alpha-25: rgba(239,68,68,0.25);
  --vt-warning-alpha-10: rgba(251,191,36,0.15);
  --vt-info-alpha-10: rgba(96,165,250,0.15);
  --vt-success-alpha-10: rgba(56,189,248,0.15);
  --vt-navbar-bg: rgba(15,23,42,0.85);
  --vt-footer-bg: var(--velto-slate-950);
}

[data-ci=ethereal][data-theme=light] {
  --vt-bg: var(--velto-slate-50);
  --vt-bg-card: #ffffff;
  --vt-bg-elevated: var(--velto-slate-100);
  --vt-bg-input: #ffffff;
  --vt-text: var(--velto-slate-900);
  --vt-text-secondary: var(--velto-slate-500);
  --vt-text-muted: var(--velto-slate-500);
  --vt-text-placeholder: var(--velto-slate-400);
  --vt-border: var(--velto-slate-200);
  --vt-border-subtle: rgba(124,58,237,0.1);
  --vt-border-focus: rgba(124,58,237,0.35);
  --vt-primary: var(--velto-violet-600);
  --vt-primary-hover: var(--velto-violet-700);
  --vt-primary-alpha-10: rgba(124,58,237,0.06);
  --vt-primary-alpha-15: rgba(124,58,237,0.1);
  --vt-primary-alpha-08: rgba(124,58,237,0.06);
  --vt-accent: var(--velto-sky-500);
  --vt-accent-hover: var(--velto-sky-600);
  --vt-accent-alpha-10: rgba(14,165,233,0.1);
  --vt-gradient-primary: linear-gradient(135deg, var(--velto-violet-600), var(--velto-violet-500));
  --vt-disabled-bg: var(--velto-slate-100);
  --vt-disabled-text: var(--velto-slate-400);
  --vt-toggle-bg: var(--velto-slate-300);
  --vt-overlay: rgba(0,0,0,0.15);
  --vt-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --vt-shadow-md: 0 8px 30px rgba(0,0,0,0.08);
  --vt-shadow-lg: 0 20px 60px rgba(0,0,0,0.12);
  --vt-shadow-focus: 0 0 0 3px rgba(124,58,237,0.1);
  --vt-shadow-primary: 0 4px 20px rgba(124,58,237,0.35);
  --vt-text-heading: #111827;
  --vt-bg-section: #FFFFFF;
  --vt-bg-hover: #FAFAFE;
  --vt-primary-alpha-04: rgba(124,58,237,0.03);
  --vt-primary-alpha-06: rgba(124,58,237,0.06);
  --vt-primary-alpha-12: rgba(124,58,237,0.12);
  --vt-primary-alpha-20: rgba(124,58,237,0.2);
  --vt-primary-alpha-25: rgba(124,58,237,0.25);
  --vt-primary-alpha-30: rgba(124,58,237,0.3);
  --vt-accent-alpha-15: rgba(14,165,233,0.15);
  --vt-accent-alpha-20: rgba(14,165,233,0.2);
  --vt-error-alpha-10: rgba(239,68,68,0.1);
  --vt-error-alpha-25: rgba(239,68,68,0.25);
  --vt-warning-alpha-10: rgba(245,158,11,0.1);
  --vt-info-alpha-10: rgba(59,130,246,0.1);
  --vt-success-alpha-10: rgba(16,185,129,0.1);
  --vt-navbar-bg: rgba(255,255,255,0.9);
  --vt-footer-bg: var(--velto-slate-50);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--vt-font);
  background: var(--vt-bg);
  color: var(--vt-text);
  transition: background 0.3s, color 0.3s;
  line-height: 1.6;
}

.vt-flex {
  display: flex;
}

.vt-flex-1 {
  flex: 1;
  min-width: 0;
}

.vt-gap-4 {
  gap: 4px;
}

.theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 18px;
  border: none;
  margin-left: 12px;
  vertical-align: middle;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
}

[data-theme=dark] .theme-toggle {
  background: var(--vt-bg-elevated);
  color: var(--vt-primary-hover);
  box-shadow: var(--vt-shadow-sm);
  border: 1px solid var(--vt-border-focus);
}

[data-theme=dark] .theme-toggle:hover {
  background: var(--vt-bg-card);
  transform: rotate(15deg);
}

[data-theme=light] .theme-toggle {
  background: var(--vt-bg-card);
  color: var(--vt-primary);
  box-shadow: var(--vt-shadow-sm);
  border: 1px solid var(--vt-border);
}

[data-theme=light] .theme-toggle:hover {
  background: var(--vt-bg-elevated);
  transform: rotate(-15deg);
}

/* duplicate .theme-toggle removed — themed versions above handle both modes */

.vt-page-cat {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--vt-primary);
}

.vt-page-title {
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 8px;
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vt-page-desc {
  font-size: 14px;
  color: var(--vt-text-muted);
}

/* ===== Section Card ===== */
.vt-section-card {
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
}

.vt-section-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--vt-primary);
}

.vt-section-title {
  font-size: 18px;
  font-weight: 800;
  margin: 4px 0 16px;
  color: var(--vt-text);
}

.vt-section-divider {
  border: none;
  margin-bottom: 24px;
  border-top: 1px solid var(--vt-border-subtle);
}

/* ===== Layout helpers ===== */
.vt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.vt-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vt-label-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vt-sub {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 16px;
  color: var(--vt-text-muted);
}

.vt-sub:first-child {
  margin-top: 0;
}

/* ========================================
   1. BUTTONS
======================================== */
.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.vt-btn:active {
  transform: scale(0.97);
}

.vt-btn-sm {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 8px;
}

.vt-btn-md {
  height: 40px;
  padding: 0 20px;
  font-size: 14px;
}

.vt-btn-lg {
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
  border-radius: 12px;
}

.vt-btn-icon {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
}

.vt-btn-icon.vt-btn-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.vt-btn-icon.vt-btn-lg {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.vt-btn-primary {
  background: var(--vt-gradient-primary);
  color: #fff;
  border: none;
}

.vt-btn-primary:hover {
  box-shadow: var(--vt-shadow-primary);
  filter: brightness(1.05);
}

.vt-btn-secondary {
  background: transparent;
  color: var(--vt-primary);
  border: 1px solid var(--vt-border-focus);
}

.vt-btn-secondary:hover {
  background: var(--vt-primary-alpha-10);
  border-color: var(--vt-primary);
}

.vt-btn-ghost {
  background: transparent;
  color: var(--vt-text-muted);
  border: none;
}

.vt-btn-ghost:hover {
  background: var(--vt-primary-alpha-08);
  color: var(--vt-primary);
}

.vt-btn-danger {
  background: var(--vt-error);
  color: #fff;
  border: none;
}

.vt-btn-danger:hover {
  background: #DC2626;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.35);
}

.vt-btn-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--vt-disabled-bg);
  color: var(--vt-disabled-text);
  border: none;
}

/* ========================================
   2. TEXT INPUTS
======================================== */
.vt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
}

.vt-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-field-hint {
  font-size: 12px;
  color: var(--vt-text-muted);
}

.vt-field-hint.vt-error-text {
  color: var(--vt-error);
}

.vt-input {
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
  width: 100%;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
}

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

.vt-input:focus {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-input.vt-input-error {
  border-color: var(--vt-error) !important;
}

.vt-input.vt-input-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.vt-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--vt-disabled-bg);
}

/* ========================================
   3. SELECT
======================================== */
.vt-field {
  position: relative;
}

.vt-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
  cursor: pointer;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
  text-align: left;
}

.vt-select-trigger:hover {
  border-color: var(--vt-border-focus);
}

.vt-select-trigger.vt-select-open {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-select-trigger.vt-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.vt-select-placeholder {
  color: var(--vt-text-muted);
}

.vt-select-value {
  color: var(--vt-text);
}

.vt-select-chevron {
  font-size: 11px;
  color: var(--vt-text-muted);
  transition: transform 0.2s;
}

.vt-select-open .vt-select-chevron {
  transform: rotate(180deg);
}

.vt-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 4px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 10px;
  box-shadow: var(--vt-shadow-md);
  z-index: 50;
  overflow: hidden;
  max-height: 200px;
  overflow-y: auto;
}

.vt-select-option {
  padding: 10px 14px;
  font-size: 14px;
  color: var(--vt-text);
  cursor: pointer;
  transition: background 0.15s;
}

.vt-select-option:hover {
  background: var(--vt-bg-hover);
}

.vt-select-option--active {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
  font-weight: 600;
}

/* legacy native select fallback */
.vt-select {
  height: 42px;
  padding: 0 36px 0 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
  width: 100%;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  cursor: pointer;
  background-color: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
}

.vt-select:focus {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-select option {
  font-family: "Pretendard", sans-serif;
  background: var(--vt-bg-card);
  color: var(--vt-text);
}

/* ========================================
   4. TEXTAREA
======================================== */
.vt-textarea {
  padding: 12px 14px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  transition: all 0.2s;
  width: 100%;
  resize: vertical;
  min-height: 100px;
  line-height: 1.6;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
}

.vt-textarea::placeholder {
  color: var(--vt-text-placeholder);
}

.vt-textarea:focus {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-char-count {
  font-size: 12px;
  text-align: right;
  color: var(--vt-text-muted);
}

/* ========================================
   5. TOGGLE SWITCH
======================================== */
.vt-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}

.vt-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vt-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-toggle-desc {
  font-size: 12px;
  color: var(--vt-text-muted);
}

.vt-toggle {
  position: relative;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

.vt-toggle input {
  display: none;
}

.vt-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  cursor: pointer;
  transition: all 0.25s;
  background: var(--vt-toggle-bg);
}

.vt-toggle-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: all 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.vt-toggle input:checked + .vt-toggle-track {
  background: var(--vt-gradient-primary);
}

.vt-toggle input:checked + .vt-toggle-track::after {
  transform: translateX(22px);
}

.vt-toggle input:disabled + .vt-toggle-track {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ========================================
   6. CHECKBOX
======================================== */
.vt-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  user-select: none;
}

.vt-checkbox input {
  display: none;
}

.vt-checkbox-box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
  font-size: 11px;
  border: 1.5px solid var(--vt-border-focus);
  background: var(--vt-bg-input);
  color: transparent;
}

.vt-checkbox input:checked ~ .vt-checkbox-box {
  background: var(--vt-gradient-primary);
  border-color: transparent;
  color: #fff;
}

.vt-checkbox input:disabled ~ .vt-checkbox-box {
  opacity: 0.4;
  cursor: not-allowed;
}

.vt-checkbox input:disabled ~ .vt-checkbox-label {
  opacity: 0.4;
}

.vt-checkbox-label {
  color: var(--vt-text);
  white-space: nowrap;
}

/* ========================================
   7. BADGES
======================================== */
.vt-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.vt-badge-green {
  background: rgba(16, 185, 129, 0.12);
  color: #10B981;
}

.vt-badge-yellow {
  background: rgba(245, 158, 11, 0.12);
  color: #F59E0B;
}

.vt-badge-red {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.vt-badge-blue {
  background: rgba(59, 130, 246, 0.12);
  color: #3B82F6;
}

.vt-badge-gray {
  background: var(--vt-bg-elevated);
  color: var(--vt-text-muted);
}

.vt-badge-purple {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
}

.vt-badge-tech {
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--vt-primary-alpha-08);
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-15);
}

.vt-badge-cat {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-15);
}

.vt-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ========================================
   8. PAGINATION
======================================== */
.vt-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vt-page-btn {
  height: 36px;
  min-width: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: var(--vt-bg-card);
  color: var(--vt-text-muted);
  border: 1px solid var(--vt-border-subtle);
}

.vt-page-btn:hover {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
  border-color: var(--vt-border-focus);
}

.vt-page-btn.vt-active {
  background: var(--vt-gradient-primary);
  color: #fff;
  border: none !important;
}

.vt-page-btn.vt-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.vt-page-ellipsis {
  color: var(--vt-text-muted);
  font-size: 14px;
  padding: 0 4px;
}

/* ========================================
   9. MODAL
======================================== */
.vt-modal-preview {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vt-bg);
}

.vt-modal-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: var(--vt-overlay);
  backdrop-filter: blur(4px);
}

.vt-modal-card {
  position: relative;
  z-index: 1;
  width: 90%;
  max-width: 420px;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-lg);
}

.vt-modal-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--vt-text);
}

.vt-modal-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--vt-text-muted);
}

.vt-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ========================================
   10. TOAST
======================================== */
.vt-toast {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid;
  min-width: 340px;
  max-width: 440px;
  position: relative;
  background: var(--vt-bg-card);
  box-shadow: var(--vt-shadow-md);
  border: 1px solid var(--vt-border);
  border-left-width: 4px;
}

.vt-toast-success {
  border-left-color: var(--vt-accent);
}

.vt-toast-error {
  border-left-color: var(--vt-error);
}

.vt-toast-info {
  border-left-color: var(--vt-info);
}

.vt-toast-warning {
  border-left-color: var(--vt-warning);
}

.vt-toast-icon {
  font-size: 18px;
  margin-top: 1px;
  flex-shrink: 0;
}

.vt-toast-success .vt-toast-icon {
  color: var(--vt-accent);
}

.vt-toast-error .vt-toast-icon {
  color: var(--vt-error);
}

.vt-toast-info .vt-toast-icon {
  color: var(--vt-info);
}

.vt-toast-warning .vt-toast-icon {
  color: var(--vt-warning);
}

.vt-toast-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vt-toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vt-text);
}

.vt-toast-msg {
  font-size: 13px;
  color: var(--vt-text-muted);
}

.vt-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  flex-shrink: 0;
  color: var(--vt-text-placeholder);
}

.vt-toast-close:hover {
  color: var(--vt-error);
}

/* ========================================
   11. DROPDOWN MENU
======================================== */
.vt-dropdown {
  position: relative;
  display: inline-block;
}

.vt-dropdown-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  border-radius: 12px;
  padding: 6px;
  z-index: 100;
  display: none;
  flex-direction: column;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-lg);
}

.vt-dropdown.vt-open .vt-dropdown-panel {
  display: flex;
}

.vt-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: var(--vt-text);
}

.vt-dropdown-item:hover, .vt-dropdown-item.vt-active-item {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
}

.vt-dropdown-item i, .vt-dropdown-item-icon {
  width: 18px;
  text-align: center;
  font-size: 13px;
  color: var(--vt-text-muted);
  display: inline-flex;
  align-items: center;
}

.vt-dropdown-item:hover i, .vt-dropdown-item.vt-active-item i, .vt-dropdown-item:hover .vt-dropdown-item-icon, .vt-dropdown-item.vt-active-item .vt-dropdown-item-icon {
  color: var(--vt-primary);
}

.vt-dropdown-divider {
  height: 1px;
  margin: 4px 8px;
  background: var(--vt-border-subtle);
}

/* ========================================
   12. TOOLTIP
======================================== */
.vt-tooltip-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 40px 48px;
}

.vt-tooltip-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  background: var(--vt-bg-elevated);
  color: var(--vt-primary);
  border: 1px solid var(--vt-border-subtle);
}

.vt-tooltip {
  position: absolute;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  background: var(--vt-primary);
  color: #fff;
  box-shadow: var(--vt-shadow-primary);
}

.vt-tooltip::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--vt-primary);
}

.vt-tooltip-top {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.vt-tooltip-top::after {
  bottom: -4px;
  left: 50%;
  margin-left: -4px;
}

.vt-tooltip-bottom {
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
}

.vt-tooltip-bottom::after {
  top: -4px;
  left: 50%;
  margin-left: -4px;
}

.vt-tooltip-left {
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.vt-tooltip-left::after {
  right: -4px;
  top: 50%;
  margin-top: -4px;
}

.vt-tooltip-right {
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
}

.vt-tooltip-right::after {
  left: -4px;
  top: 50%;
  margin-top: -4px;
}

/* ========================================
   13. CHIP / TAG INPUT
======================================== */
.vt-chip-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  min-height: 44px;
  cursor: text;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
}

.vt-chip-input:focus-within {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
}

.vt-chip-remove {
  cursor: pointer;
  font-size: 11px;
  opacity: 0.7;
  transition: opacity 0.15s;
  background: none;
  border: none;
  color: inherit;
  padding: 0;
  display: flex;
  align-items: center;
}

.vt-chip-remove:hover {
  opacity: 1;
}

.vt-chip-input input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  flex: 1;
  min-width: 80px;
  height: 26px;
  color: var(--vt-text);
}

.vt-chip-input input::placeholder {
  color: var(--vt-text-placeholder);
}

/* ========================================
   14. SKELETON LOADING
======================================== */
@keyframes vt-shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.vt-skeleton {
  border-radius: 8px;
  animation: vt-shimmer 1.5s infinite linear;
  background: var(--vt-skeleton-bg, linear-gradient(90deg, var(--vt-bg-elevated) 0%, var(--vt-border) 50%, var(--vt-bg-elevated) 100%));
  background-size: 800px 100%;
}

.vt-skeleton-circle {
  border-radius: 50%;
}

.vt-skeleton-text {
  height: 14px;
  border-radius: 6px;
}

.vt-skeleton-card {
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}

/* ========================================
   15. AVATAR
======================================== */
.vt-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  background: var(--vt-gradient-primary);
  color: #fff;
  overflow: hidden;
}

.vt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

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

.vt-avatar-md {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.vt-avatar-lg {
  width: 52px;
  height: 52px;
  font-size: 18px;
}

.vt-avatar-status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--vt-bg-card);
}

.vt-avatar-status.vt-online {
  background: #10B981;
}

.vt-avatar-status.vt-offline {
  background: #64748B;
}

.vt-avatar-status.vt-busy {
  background: #EF4444;
}

.vt-avatar-group {
  display: flex;
}

.vt-avatar-group .vt-avatar {
  margin-left: -10px;
  border: 2px solid var(--vt-bg-card);
}

.vt-avatar-group .vt-avatar:first-child {
  margin-left: 0;
}

/* ============================================
   VeltoStudio Layout Components
   Uses CSS custom properties from _vt-base.scss
   ============================================ */
/* Grid Utilities */
.vt-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.vt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.vt-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Page & Section */
.vt-page-bg {
  background: var(--vt-bg);
}

.vt-section-card {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 48px;
}

.vt-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.vt-section-num {
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vt-primary);
}

.vt-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--vt-text);
}

.vt-section-divider {
  border-top: 1px solid var(--vt-border-subtle);
  margin-bottom: 24px;
}

.vt-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  color: var(--vt-text-secondary);
}

.vt-sublabel {
  font-size: 11px;
  margin-top: 4px;
  color: var(--vt-text-muted);
}

.vt-page-title {
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Navbar */
.vt-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  height: 64px;
  border-radius: 14px;
  position: relative;
  background: var(--vt-navbar-bg);
  border-bottom: 1px solid var(--vt-border-subtle);
  backdrop-filter: blur(20px);
}

.vt-navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--vt-text-heading);
}

.vt-navbar-logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vt-primary);
  box-shadow: 0 0 10px var(--vt-primary);
}

.vt-navbar-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.vt-navbar-link {
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  text-decoration: none;
  color: var(--vt-text-secondary);
}
.vt-navbar-link:hover {
  color: var(--vt-text);
}
.vt-navbar-link.vt-active {
  color: var(--vt-text);
  font-weight: 600;
}

.vt-navbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vt-navbar-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  background: var(--vt-gradient-primary);
  color: #FFFFFF;
}
.vt-navbar-contact:hover {
  box-shadow: var(--vt-shadow-primary);
  transform: translateY(-1px);
}

.vt-navbar-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  border: none;
  background: transparent;
  position: relative;
  transition: all 0.2s;
  color: var(--vt-text-secondary);
}
.vt-navbar-icon-btn:hover {
  color: var(--vt-text);
  background: var(--vt-primary-alpha-10);
}

.vt-navbar-notif-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EF4444;
  color: #FFFFFF;
}

.vt-navbar-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  background: var(--vt-primary-alpha-15);
  border: 2px solid var(--vt-primary-alpha-30);
}

.vt-navbar-hamburger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  border: none;
  background: transparent;
  color: var(--vt-text-secondary);
}

/* Sidebar Layout */
.vt-layout-sidebar {
  display: flex;
  min-height: 100vh;
  gap: 0;
}
.vt-layout-sidebar > .vt-sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--vt-border);
  flex-shrink: 0;
}
.vt-layout-sidebar > .vt-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

/* Sidebar */
.vt-sidebar {
  width: 260px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 480px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
}

.vt-sidebar-logo-wrap {
  padding: 20px 16px 12px;
}

.vt-sidebar-logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--vt-primary);
  box-shadow: 0 0 10px var(--vt-primary);
}

.vt-sidebar-section {
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  padding: 16px 16px 6px;
  color: var(--vt-text-muted);
}

.vt-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
  border-right: none;
  border-top: none;
  border-bottom: none;
  border-radius: 0;
  background: none;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
  width: 100%;
  color: var(--vt-text-secondary);
}
.vt-sidebar-link:hover {
  background: var(--vt-primary-alpha-08);
  color: var(--vt-text);
}
.vt-sidebar-link.vt-active {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
  border-left: 3px solid var(--vt-primary);
  box-shadow: inset 4px 0 12px var(--vt-primary-alpha-10, rgba(167, 139, 250, 0.1));
}

.vt-sidebar-icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--vt-text-muted);
}

.vt-sidebar-link.vt-active .vt-sidebar-icon {
  color: var(--vt-primary);
}

.vt-sidebar-status-card {
  border-radius: 10px;
  padding: 12px;
  margin: 12px;
  margin-top: auto;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border);
}

.vt-sidebar-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.vt-sidebar-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  background: var(--vt-accent);
  box-shadow: 0 0 8px var(--vt-accent);
}

.vt-sidebar-status-label {
  font-size: 11px;
  color: var(--vt-text-secondary);
}

.vt-sidebar-status-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-sidebar-divider {
  border-top: 1px solid var(--vt-border-subtle);
  margin: 8px 16px;
}

/* Footer */
.vt-footer {
  border-radius: 16px;
  padding: 48px 32px 0;
  background: var(--vt-footer-bg);
  border-top: 1px solid var(--vt-border-subtle);
}

.vt-footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 32px;
}

.vt-footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
  color: var(--vt-text-heading);
}

.vt-footer-logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vt-primary);
  box-shadow: var(--vt-shadow-primary);
}

.vt-footer-desc {
  font-size: 13px;
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: 16px;
  color: var(--vt-text-muted);
}

.vt-footer-heading {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--vt-text);
}

.vt-footer-link {
  display: block;
  font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: color 0.2s;
  color: var(--vt-text-muted);
}
.vt-footer-link:hover {
  color: var(--vt-primary);
}

.vt-footer-info {
  font-size: 12px;
  line-height: 1.8;
  color: var(--vt-text-placeholder);
}

.vt-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  margin-top: 32px;
  font-size: 12px;
  border-top: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-placeholder);
}

.vt-footer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  background: var(--vt-accent-alpha-10, rgba(20, 184, 166, 0.1));
  color: var(--vt-accent);
  border: 1px solid var(--vt-accent-alpha-20, rgba(20, 184, 166, 0.2));
}

.vt-footer-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.vt-footer-status--warning {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border-color: rgba(245, 158, 11, 0.2);
}

.vt-footer-status--error {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border-color: rgba(239, 68, 68, 0.2);
}

/* Breadcrumb */
.vt-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 12px 0;
  color: var(--vt-text-muted);
}
.vt-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
  color: var(--vt-text-secondary);
}
.vt-breadcrumb a:hover {
  color: var(--vt-primary);
}

.vt-breadcrumb-active {
  font-weight: 600;
  color: var(--vt-primary);
}

.vt-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  color: var(--vt-text-placeholder);
}

.vt-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  color: var(--vt-text-secondary);
}
.vt-back-link:hover {
  color: var(--vt-primary);
}

/* Tab Controls */
.vt-tab-control {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
}

.vt-tab-btn {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: all 0.2s;
  white-space: nowrap;
  color: var(--vt-text-secondary);
}
.vt-tab-btn:hover {
  color: var(--vt-text);
}
.vt-tab-btn.active {
  background: var(--vt-gradient-primary);
  color: #FFFFFF;
  box-shadow: var(--vt-shadow-primary);
}

.vt-underline-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  padding-bottom: 0;
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-underline-tab {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  transition: color 0.2s;
  position: relative;
  color: var(--vt-text-muted);
}
.vt-underline-tab:hover {
  color: var(--vt-text);
}
.vt-underline-tab.active {
  color: var(--vt-primary);
}

.vt-underline-indicator {
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  transition: left 0.3s, width 0.3s;
  background: var(--vt-gradient-primary);
}

.vt-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--vt-text-secondary);
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}
.vt-filter-tab:hover {
  color: var(--vt-text);
  border-color: var(--vt-primary-alpha-30);
}
.vt-filter-tab.active {
  background: var(--vt-primary);
  color: #FFFFFF;
  border-color: var(--vt-primary);
}

.vt-period-tab {
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  color: var(--vt-text-muted);
}
.vt-period-tab:hover {
  color: var(--vt-text-secondary);
}
.vt-period-tab.active {
  color: var(--vt-primary);
  border-bottom: 2px solid var(--vt-primary);
}

/* ========== Two-Panel ========== */
.vt-twopanel {
  display: flex;
  gap: 0;
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg, 12px);
  overflow: hidden;
  background: var(--vt-bg-card);
  min-height: 400px;
}

.vt-twopanel-left {
  width: 200px;
  flex-shrink: 0;
  border-right: 1px solid var(--vt-border);
  background: var(--vt-bg-elevated, rgba(0, 0, 0, 0.02));
}

.vt-twopanel-header {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--vt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--vt-border);
}

.vt-twopanel-nav {
  display: flex;
  flex-direction: column;
}

.vt-twopanel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--vt-text);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--vt-border);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.15s;
}
.vt-twopanel-item:hover {
  background: var(--vt-bg-elevated);
}
.vt-twopanel-item.vt-active {
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
}
.vt-twopanel-item.vt-active .vt-twopanel-badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.vt-twopanel-badge {
  font-size: 11px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  color: var(--vt-text-muted);
  padding: 2px 8px;
  border-radius: 10px;
}

.vt-twopanel-right {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.vt-twopanel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

/* ============================================
   VT Page Components (CSS Variable Based)
   ============================================ */
/* Page Title */
.vt-page-title {
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Buttons */
.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  white-space: nowrap;
}

.vt-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
}

.vt-btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  border-radius: 12px;
}

.vt-btn-primary {
  background: var(--vt-gradient-primary);
  color: #FFFFFF;
  box-shadow: var(--vt-shadow-primary);
}

.vt-btn-primary:hover {
  box-shadow: var(--vt-shadow-primary-hover, var(--vt-shadow-primary));
  transform: translateY(-1px);
}

.vt-btn-secondary {
  background: transparent;
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-30);
}

.vt-btn-secondary:hover {
  background: var(--vt-primary-alpha-10);
  border-color: var(--vt-primary);
}

/* Stats Card */
.vt-stats-card {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.3s;
  cursor: default;
  box-shadow: var(--vt-shadow-sm);
}

.vt-stats-card:hover {
  border-color: var(--vt-primary-alpha-30);
  box-shadow: var(--vt-shadow-md);
}

.vt-stats-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--vt-primary-alpha-15);
  border: 1px solid var(--vt-primary-alpha-20);
  color: var(--vt-primary);
}

.vt-stats-label {
  font-size: 12px;
  font-weight: 500;
  margin-top: 16px;
  color: var(--vt-text-secondary);
}

.vt-stats-value {
  font-size: 28px;
  font-weight: 800;
  margin-top: 4px;
  color: var(--vt-text-heading);
}

.vt-stats-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
}

.vt-stats-trend-up {
  background: var(--vt-success-alpha-10);
  color: var(--vt-accent);
}

.vt-stats-trend-down {
  background: var(--vt-error-alpha-10);
  color: var(--vt-error);
}

/* Glass Card */
.vt-glass-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 24px;
}

/* Quick Action Card */
.vt-quick-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 14px;
  padding: 20px;
  transition: all 0.3s;
  cursor: pointer;
}

.vt-quick-card:hover {
  background: var(--vt-bg-hover);
  border-color: var(--vt-primary-alpha-30);
  box-shadow: var(--vt-shadow-md);
  transform: translateY(-4px);
}

.vt-quick-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--vt-primary-alpha-15);
  border: 1px solid var(--vt-primary-alpha-20);
  color: var(--vt-primary);
}

.vt-quick-label {
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  color: var(--vt-text);
}

.vt-quick-desc {
  font-size: 12px;
  margin-top: 4px;
  color: var(--vt-text-muted);
}

/* Generic Card */
.vt-card {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
}

.vt-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vt-text-heading);
}

.vt-card-more {
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  color: var(--vt-primary);
}

.vt-card-body {
  padding: 16px 20px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--vt-text-secondary);
}

.vt-card-footer {
  padding: 12px 20px;
  font-size: 12px;
  border-top: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-muted);
}

/* Service Card */
.vt-service-card {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s;
}

.vt-service-card:hover {
  border-color: var(--vt-primary-alpha-30);
  transform: translateY(-4px);
  box-shadow: var(--vt-shadow-md);
}

.vt-service-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--vt-primary-alpha-15);
  border: 1px solid var(--vt-primary-alpha-20);
  color: var(--vt-primary);
}

.vt-service-title {
  font-size: 16px;
  font-weight: 700;
  margin-top: 16px;
  color: var(--vt-text-heading);
}

.vt-service-desc {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
  color: var(--vt-text-muted);
}

.vt-tech-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: "SF Mono", "Fira Code", monospace;
  font-weight: 500;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-secondary);
}

/* Portfolio Card */
.vt-portfolio-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s;
}

.vt-portfolio-card:hover {
  border-color: var(--vt-primary-alpha-30);
  box-shadow: var(--vt-shadow-md);
}

.vt-portfolio-img-wrap {
  position: relative;
  overflow: hidden;
  height: 200px;
}

.vt-portfolio-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  background: var(--vt-bg-input);
  color: var(--vt-text-placeholder);
}

.vt-portfolio-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
}

.vt-portfolio-card:hover .vt-portfolio-overlay {
  opacity: 1;
}

.vt-portfolio-info {
  padding: 16px 20px;
}

.vt-portfolio-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-text-heading);
}

.vt-portfolio-star {
  font-size: 12px;
  color: #FBBF24;
}

.vt-portfolio-cat {
  font-size: 12px;
  margin-top: 4px;
  color: var(--vt-text-secondary);
}

.vt-portfolio-stars {
  display: flex;
  gap: 2px;
  margin-top: 8px;
}

/* Hero Banner */
.vt-hero {
  background: var(--vt-bg-section);
  border-radius: 20px;
  padding: 60px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.vt-hero-title {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vt-hero-sub {
  font-size: 15px;
  line-height: 1.7;
  margin-top: 16px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  color: var(--vt-text-secondary);
}

.vt-hero-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.vt-hero-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vt-accent);
  box-shadow: 0 0 0 0 var(--vt-accent-alpha-40, rgba(45, 212, 191, 0.4));
  animation: vt-pulse 2s infinite;
}

@keyframes vt-pulse {
  0% {
    box-shadow: 0 0 0 0 var(--vt-accent-alpha-40, rgba(45, 212, 191, 0.4));
  }
  70% {
    box-shadow: 0 0 0 10px transparent;
  }
  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}
.vt-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  position: absolute;
  animation: vt-float 4s ease-in-out infinite;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-primary-alpha-20);
  color: var(--vt-text);
  box-shadow: var(--vt-shadow-sm);
}

@keyframes vt-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.vt-hero-badge-1 {
  top: 20px;
  right: 40px;
  animation-delay: 0s;
}

.vt-hero-badge-2 {
  bottom: 30px;
  left: 40px;
  animation-delay: 1.5s;
}

.vt-hero-arrow {
  color: var(--vt-text-placeholder);
}

/* Pricing Card */
.vt-pricing-card {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
  border-radius: 16px;
  padding: 28px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.vt-pricing-card:hover {
  border-color: var(--vt-primary-alpha-30);
  box-shadow: var(--vt-shadow-md);
  transform: translateY(-4px);
}

.vt-pricing-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--vt-primary);
  color: #FFFFFF;
}

.vt-pricing-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--vt-text-heading);
}

.vt-pricing-desc {
  font-size: 12px;
  margin-top: 4px;
  color: var(--vt-text-muted);
}

.vt-pricing-price {
  margin-top: 20px;
  margin-bottom: 20px;
}

.vt-pricing-amount {
  font-size: 36px;
  font-weight: 900;
  color: var(--vt-text-heading);
}

.vt-pricing-unit {
  font-size: 14px;
  font-weight: 400;
  margin-left: 4px;
  color: var(--vt-text-muted);
}

.vt-pricing-divider {
  border-top: 1px solid var(--vt-border-subtle);
  margin-bottom: 16px;
}

.vt-pricing-spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  color: var(--vt-text-secondary);
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-pricing-spec-val {
  font-weight: 600;
  color: var(--vt-text);
}

.vt-pricing-spec-label {
  flex: 1;
}

.vt-pricing-check {
  font-size: 14px;
  color: var(--vt-accent);
}

.vt-pricing-card-btn {
  display: block;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  margin-top: 20px;
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-30);
}

.vt-pricing-card-btn:hover {
  background: var(--vt-primary);
  color: #FFFFFF;
  border-color: var(--vt-primary);
}

/* Featured Pricing Card */
.vt-featured-card {
  border-radius: 20px;
  padding: 28px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}

.vt-featured-card:hover {
  border-color: var(--vt-primary-alpha-30);
  box-shadow: var(--vt-shadow-md);
  transform: translateY(-4px);
}

.vt-featured-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--vt-primary);
  color: #fff;
}

.vt-featured-specs {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 16px 0;
}

.vt-featured-spec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13px;
  color: var(--vt-text-secondary);
}

.vt-featured-spec svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--vt-text-muted);
}

.vt-featured-spec-label {
  color: var(--vt-text-muted);
}

.vt-featured-spec-val {
  margin-left: auto;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-featured-comment {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 14px;
  margin-top: 14px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--vt-text-muted);
  border-top: 1px solid var(--vt-primary-alpha-08);
}

.vt-featured-comment svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--vt-text-muted);
}

/* Comparison Table */
.vt-compare-card {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
  border-radius: 16px;
  overflow: hidden;
}

.vt-compare-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.vt-compare-header > div {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.vt-compare-header-normal {
  background: var(--vt-bg-elevated);
  color: var(--vt-text-muted);
}

.vt-compare-header-velto {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
}

.vt-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-compare-feature {
  padding: 12px 16px;
  font-size: 13px;
  display: flex;
  align-items: center;
  color: var(--vt-text-secondary);
}

.vt-compare-cell {
  padding: 12px 16px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vt-compare-cell-normal {
  background: var(--vt-bg-elevated);
}

.vt-compare-cell-velto {
  background: var(--vt-primary-alpha-04);
}

.vt-compare-check {
  color: var(--vt-accent);
}

.vt-compare-x {
  color: var(--vt-error);
}

/* Payment Method Selector */
.vt-pay-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-secondary);
}

.vt-pay-method:hover {
  border-color: var(--vt-primary-alpha-30);
}

.vt-pay-method.active {
  border-color: var(--vt-primary);
  color: var(--vt-text-heading);
  background: var(--vt-primary-alpha-06);
}

.vt-pay-method-icon {
  font-size: 20px;
  color: var(--vt-primary);
}

.vt-pay-method-label {
  font-size: 14px;
  font-weight: 600;
}

/* Billing Type Selector */
.vt-billing-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  flex: 1;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-secondary);
}

.vt-billing-opt:hover {
  border-color: var(--vt-primary-alpha-30);
  color: var(--vt-text);
}

.vt-billing-opt.active {
  background: var(--vt-primary-alpha-10);
  border-color: var(--vt-primary);
  color: var(--vt-text-heading);
}

.vt-billing-label {
  font-size: 14px;
  font-weight: 600;
}

.vt-billing-sub {
  font-size: 12px;
  margin-top: 2px;
}

.vt-billing-discount {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  background: var(--vt-success-alpha-10);
  color: var(--vt-accent);
}

/* Order Status Flow */
.vt-status-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.vt-status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: color 0.3s;
  color: var(--vt-text-placeholder);
}

.vt-status-step.active {
  color: var(--vt-primary);
}

.vt-status-step.completed {
  color: var(--vt-accent);
}

.vt-status-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s;
  background: var(--vt-bg-card);
  border: 2px solid var(--vt-text-placeholder);
}

.vt-status-step.active .vt-status-icon {
  border-color: var(--vt-primary);
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
  box-shadow: 0 0 12px var(--vt-primary-alpha-30);
}

.vt-status-step.completed .vt-status-icon {
  border-color: var(--vt-accent);
  background: var(--vt-success-alpha-10);
  color: var(--vt-accent);
}

.vt-status-label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  color: inherit;
}

.vt-status-line {
  width: 60px;
  height: 2px;
  border-radius: 1px;
  margin-bottom: 28px;
  transition: background 0.3s;
  background: var(--vt-text-placeholder);
}

.vt-status-line.completed {
  background: var(--vt-accent);
}

/* Sticky Summary Panel */
.vt-summary-panel {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--vt-shadow-sm);
}

.vt-summary-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--vt-text-heading);
}

.vt-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 24px;
  font-size: 13px;
  color: var(--vt-text-secondary);
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-summary-row-val {
  font-weight: 600;
  color: var(--vt-text);
}

.vt-summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 0;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--vt-text-heading);
  border-top: 1px solid var(--vt-border);
}

/* Dashboard Chart Container */
.vt-chart-container {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
  border-radius: 16px;
  overflow: hidden;
}

.vt-chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-chart-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vt-text-heading);
}

.vt-chart-tabs {
  display: flex;
  gap: 16px;
}

.vt-chart-tab {
  padding: 4px 0;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  color: var(--vt-text-muted);
}

.vt-chart-tab:hover {
  color: var(--vt-text-secondary);
}

.vt-chart-tab.active {
  color: var(--vt-primary);
  border-bottom: 2px solid var(--vt-primary);
}

.vt-chart-area {
  position: relative;
  padding: 20px;
  min-height: 220px;
  background: var(--vt-bg-elevated);
}

.vt-chart-grid {
  position: relative;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vt-chart-grid-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-chart-grid-line {
  flex: 1;
  border-top: 1px dashed var(--vt-primary-alpha-06);
}

.vt-chart-y-label {
  font-size: 11px;
  font-weight: 500;
  width: 40px;
  text-align: right;
  flex-shrink: 0;
  color: var(--vt-text-placeholder);
}

.vt-chart-x-axis {
  display: flex;
  justify-content: space-between;
  padding-left: 52px;
  margin-top: 12px;
}

.vt-chart-x-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--vt-text-placeholder);
}

.vt-chart-legend {
  display: flex;
  gap: 20px;
  padding: 12px 20px;
}

.vt-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vt-chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--vt-bg-card);
}

.vt-chart-legend-text {
  font-size: 12px;
  color: var(--vt-text-secondary);
}

/* Responsive */
@media (max-width: 768px) {
  .vt-hero-title {
    font-size: 24px;
  }
  .vt-hero {
    padding: 40px 20px;
  }
  .vt-status-flow {
    flex-wrap: wrap;
  }
}
/* ============================================
   VeltoStudio Board Components
   Uses CSS variables defined in _vt-base.scss
   ============================================ */
/* Page */
.vt-page-bg {
  background: var(--vt-bg);
}

.vt-page-title {
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vt-page-cat {
  color: var(--vt-primary);
}

/* Buttons shared */
.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.vt-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
}

.vt-btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  border-radius: 12px;
}

.vt-btn-primary {
  background: var(--vt-gradient-primary);
  color: #fff;
  box-shadow: var(--vt-shadow-primary);
}

.vt-btn-primary:hover {
  box-shadow: var(--vt-shadow-primary-hover, var(--vt-shadow-primary));
  transform: translateY(-1px);
}

.vt-btn-secondary {
  background: transparent;
  color: var(--vt-primary);
  border: 1px solid var(--vt-border-focus);
}

.vt-btn-secondary:hover {
  background: var(--vt-primary-alpha-06);
  border-color: var(--vt-primary);
}

.vt-btn-ghost {
  background: transparent;
  color: var(--vt-text-secondary);
  border: 1px solid var(--vt-border);
}

.vt-btn-ghost:hover {
  background: var(--vt-primary-alpha-06);
  color: var(--vt-text);
}

.vt-btn-danger {
  background: var(--vt-error-alpha-10);
  color: var(--vt-error);
  border: 1px solid var(--vt-error-alpha-25);
}

.vt-btn-danger:hover {
  background: var(--vt-error-alpha-20);
}

/* Form Inputs shared */
.vt-input, .vt-select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
  font-family: inherit;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
}

.vt-textarea {
  display: block;
  width: 100%;
  min-height: 100px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  resize: vertical;
  transition: all 0.2s;
  outline: none;
  font-family: inherit;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
}

.vt-input:focus, .vt-select:focus, .vt-textarea:focus {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
  outline: none;
}

.vt-input::placeholder, .vt-textarea::placeholder {
  color: var(--vt-text-placeholder);
}

.vt-field-label {
  color: var(--vt-text);
}

/* Board List Table */
.vt-board-table {
  width: 100%;
  border-collapse: collapse;
}

.vt-board-table th {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  color: var(--vt-text-muted);
  border-bottom: 1px solid var(--vt-primary-alpha-06);
  background: var(--vt-bg-elevated);
}

.vt-board-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--vt-text);
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-board-table th:first-child, .vt-board-table td:first-child {
  text-align: center;
  width: 60px;
}

.vt-board-table th:last-child, .vt-board-table td:last-child {
  text-align: center;
}

.vt-board-table tbody tr:hover td {
  background: var(--vt-bg-hover);
}

.vt-board-row-notice {
  border-left: 3px solid var(--vt-primary);
}

.vt-board-row-notice td {
  background: var(--vt-primary-alpha-04);
}

.vt-board-title-link {
  color: var(--vt-text-heading);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
}

.vt-board-title-link:hover {
  color: var(--vt-primary);
}

.vt-board-comment-count {
  color: var(--vt-primary);
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}

.vt-board-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.vt-board-badge-notice {
  background: var(--vt-primary-alpha-12);
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-25);
}

.vt-board-badge-normal {
  background: var(--vt-bg-elevated);
  color: var(--vt-text-muted);
  border: 1px solid var(--vt-border-subtle);
}

.vt-board-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  background: var(--vt-primary-alpha-10);
  border: 1px solid var(--vt-primary-alpha-30);
  color: var(--vt-primary);
}

.vt-board-author-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vt-board-author {
  font-size: 13px;
  color: var(--vt-text);
}

.vt-board-meta {
  font-size: 13px;
  color: var(--vt-text-muted);
}

.vt-board-views {
  font-size: 13px;
  color: var(--vt-text-muted);
}

.vt-board-likes {
  font-size: 13px;
  color: var(--vt-primary);
}

/* Write Form */
.vt-write-form {
  border-radius: 14px;
  padding: 28px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}

.vt-write-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
  color: var(--vt-text);
}

.vt-write-field {
  margin-bottom: 20px;
}

.vt-write-upload-zone {
  border: 2px dashed var(--vt-border-focus);
  border-radius: 12px;
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--vt-bg-elevated);
  color: var(--vt-text-muted);
}

.vt-write-upload-zone:hover {
  border-color: var(--vt-primary);
  color: var(--vt-primary);
}

.vt-write-upload-icon {
  font-size: 28px;
  margin-bottom: 10px;
  color: var(--vt-primary);
}

.vt-write-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-radius: 10px;
  transition: all 0.2s;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-primary-alpha-06);
}

.vt-write-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* Comment Section */
.vt-comment-input-area {
  border-radius: 14px;
  padding: 16px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}

.vt-comment-textarea {
  border-radius: 10px;
  padding: 12px 16px;
  min-height: 80px;
  resize: vertical;
  font-family: inherit;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
}

.vt-comment-textarea::placeholder {
  color: var(--vt-text-muted);
}

.vt-comment-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.vt-comment-char {
  font-size: 12px;
  color: var(--vt-text-muted);
}

.vt-comment-item {
  padding: 16px 0;
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-comment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.vt-comment-nick {
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text-heading);
}

.vt-comment-admin-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
}

.vt-comment-time {
  font-size: 12px;
  color: var(--vt-text-muted);
}

.vt-comment-text {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 8px;
  color: var(--vt-text-secondary);
}

.vt-comment-actions {
  display: flex;
  gap: 12px;
}

.vt-comment-action {
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--vt-text-muted);
}

.vt-comment-action:hover {
  color: var(--vt-primary);
}

.vt-comment-reply {
  padding: 14px 18px;
  margin-left: 32px;
  border-radius: 0 10px 10px 0;
  margin-top: 8px;
  border-left: 3px solid var(--vt-primary-alpha-30);
  background: var(--vt-primary-alpha-04);
}

.vt-comment-secret {
  padding: 14px 18px;
  border-radius: 10px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  background: var(--vt-bg-elevated);
  border: 1px dashed var(--vt-border);
  color: var(--vt-text-muted);
}

/* WYSIWYG Editor */
.vt-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 12px 12px 0 0;
  flex-wrap: wrap;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-bottom: none;
}

.vt-editor-btn {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s;
  font-family: inherit;
  color: var(--vt-text-secondary);
  background: transparent;
  border: 1px solid transparent;
}

.vt-editor-btn:hover {
  color: var(--vt-text);
  background: var(--vt-primary-alpha-10);
  border-color: var(--vt-border);
}

.vt-editor-btn.active {
  color: var(--vt-primary);
  background: var(--vt-primary-alpha-15);
  border-color: var(--vt-primary-alpha-30);
}

.vt-editor-sep {
  width: 1px;
  height: 24px;
  margin: 0 6px;
  flex-shrink: 0;
  background: var(--vt-border);
}

.vt-editor-select {
  height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  background: var(--vt-bg-elevated);
  color: var(--vt-text-secondary);
  border: 1px solid var(--vt-border);
}

.vt-editor-content {
  min-height: 200px;
  padding: 20px;
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  line-height: 1.8;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
}

.vt-editor-content-placeholder {
  font-style: italic;
  color: var(--vt-text-placeholder);
}

/* File Upload Zone */
.vt-upload-zone {
  border: 2px dashed var(--vt-border-focus);
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--vt-bg-elevated);
}

.vt-upload-zone:hover {
  border-color: var(--vt-primary);
  background: var(--vt-primary-alpha-06);
}

.vt-upload-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--vt-primary);
}

.vt-upload-text {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--vt-text);
}

.vt-upload-hint {
  font-size: 12px;
  color: var(--vt-text-placeholder);
}

.vt-upload-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-top: 10px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}

.vt-upload-file-icon {
  font-size: 20px;
  flex-shrink: 0;
  color: var(--vt-primary);
}

.vt-upload-file-info {
  flex: 1;
  min-width: 0;
}

.vt-upload-file-name {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--vt-text);
}

.vt-upload-file-size {
  font-size: 11px;
  margin-top: 2px;
  color: var(--vt-text-muted);
}

.vt-upload-progress-bg {
  height: 4px;
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
  background: var(--vt-primary-alpha-10);
}

.vt-upload-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s;
  background: var(--vt-gradient-primary);
}

.vt-upload-file-del {
  cursor: pointer;
  font-size: 14px;
  transition: color 0.2s;
  background: none;
  border: none;
  padding: 4px;
  color: var(--vt-text-muted);
}

.vt-upload-file-del:hover {
  color: var(--vt-error);
}

.vt-upload-simple-label {
  font-size: 13px;
  color: var(--vt-text-secondary);
}

/* Search Bar */
.vt-search-bar {
  display: flex;
  align-items: center;
  border-radius: 12px;
  height: 48px;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border);
}
.vt-search-bar .vt-search-btn {
  border-radius: 0 8px 8px 0;
}
.vt-search-bar .vt-search-select {
  border-radius: 12px 0 0 12px;
}

.vt-search-select-wrap {
  position: relative;
  height: 100%;
}

.vt-search-select {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 100%;
  padding: 0 12px;
  font-size: 13px;
  border: none;
  outline: none;
  cursor: pointer;
  min-width: 100px;
  font-family: inherit;
  background: var(--vt-bg-elevated);
  color: var(--vt-text-secondary);
  border-right: 1px solid var(--vt-border);
  transition: background 0.15s;
}
.vt-search-select:hover {
  background: var(--vt-bg-hover);
}
.vt-search-select svg {
  opacity: 0.5;
  flex-shrink: 0;
}

.vt-search-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 100%;
  list-style: none;
  margin: 0;
  padding: 4px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: vtSearchMenuIn 0.15s ease-out;
}

@keyframes vtSearchMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.vt-search-select-item {
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--vt-text-secondary);
  transition: all 0.12s;
  white-space: nowrap;
}
.vt-search-select-item:hover {
  background: var(--vt-bg-elevated);
  color: var(--vt-text);
}
.vt-search-select-item.vt-active {
  color: var(--vt-primary);
  font-weight: 600;
}

.vt-search-input {
  flex: 1;
  height: 100%;
  padding: 0 16px;
  border: none;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  background: transparent;
  color: var(--vt-text);
}

.vt-search-input::placeholder {
  color: var(--vt-text-placeholder);
}

.vt-search-btn {
  height: 36px;
  padding: 0 16px;
  margin: 6px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  background: var(--vt-gradient-primary);
  color: #fff;
}

.vt-search-full {
  border-radius: 12px;
  overflow: hidden;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border);
}

/* Autosave Dropdown */
.vt-autosave-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  color: var(--vt-text-secondary);
}

.vt-autosave-trigger:hover {
  border-color: var(--vt-primary);
  color: var(--vt-text);
}

.vt-autosave-count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--vt-primary);
  color: #fff;
}

.vt-autosave-panel {
  border-radius: 12px;
  width: 340px;
  overflow: hidden;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border);
  box-shadow: var(--vt-shadow-md);
}

.vt-autosave-header {
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--vt-text-heading);
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-autosave-item {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-autosave-item:hover {
  background: var(--vt-bg-hover);
}

.vt-autosave-item-info {
  flex: 1;
  min-width: 0;
}

.vt-autosave-item-title {
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--vt-text);
}

.vt-autosave-item-date {
  font-size: 11px;
  margin-top: 2px;
  color: var(--vt-text-placeholder);
}

.vt-autosave-item-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Post Detail */
.vt-post-header {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-post-title {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--vt-text-heading);
}

.vt-post-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
}

.vt-post-meta {
  font-size: 13px;
  color: var(--vt-text-muted);
}

.vt-post-meta-value {
  font-size: 13px;
  color: var(--vt-text-secondary);
}

.vt-post-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  background: var(--vt-primary-alpha-12);
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-25);
}

.vt-post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  color: var(--vt-text-secondary);
}

.vt-post-action-btn:hover {
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
  border-color: var(--vt-primary);
}

.vt-post-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

/* Toggle */
.vt-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.vt-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  transition: all 0.3s;
  flex-shrink: 0;
  background: var(--vt-toggle-bg);
}

.vt-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: all 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.vt-toggle.active .vt-toggle-thumb {
  left: 22px;
}

.vt-toggle.active .vt-toggle-track {
  background: var(--vt-primary);
  box-shadow: var(--vt-shadow-sm);
}

.vt-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--vt-text);
}

/* ============================================
   VT-MEMBER – CSS Variable Migration
   ============================================ */
/* Page */
.vt-page-title {
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vt-page-cat {
  color: var(--vt-primary);
}

/* Buttons shared */
.vt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  white-space: nowrap;
  font-family: inherit;
}

.vt-btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 8px;
}

.vt-btn-lg {
  padding: 14px 28px;
  font-size: 16px;
  border-radius: 12px;
}

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

.vt-btn-primary {
  background: var(--vt-gradient-primary);
  color: #fff;
  box-shadow: var(--vt-shadow-sm);
}

.vt-btn-primary:hover {
  box-shadow: var(--vt-shadow-md);
  transform: translateY(-1px);
}

.vt-btn-secondary {
  background: transparent;
  color: var(--vt-primary);
  border: 1px solid var(--vt-border-focus);
}

.vt-btn-secondary:hover {
  background: var(--vt-primary-alpha-08);
  border-color: var(--vt-primary);
}

.vt-btn-ghost {
  background: transparent;
  color: var(--vt-text-secondary);
}

.vt-btn-ghost:hover {
  background: var(--vt-primary-alpha-08);
  color: var(--vt-text);
}

/* Form Inputs */
.vt-input, .vt-select {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  transition: all 0.2s;
  outline: none;
  font-family: inherit;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border);
  color: var(--vt-text);
}

.vt-input:focus, .vt-select:focus {
  border-color: var(--vt-primary);
  box-shadow: 0 0 0 3px var(--vt-primary-alpha-15);
  outline: none;
}

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

.vt-field-label {
  color: var(--vt-text);
}

.vt-field-hint {
  color: var(--vt-text-muted);
}

/* Checkbox */
.vt-checkbox {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  background: var(--vt-bg-input);
  border: 2px solid var(--vt-border);
}

.vt-checkbox.checked {
  background: var(--vt-primary);
  border-color: var(--vt-primary);
}

.vt-checkbox i {
  font-size: 10px;
  color: #FFFFFF;
}

/* Login card */
.vt-login-card {
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 420px;
  width: 100%;
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-md);
}

.vt-login-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.05em;
  justify-content: center;
  margin-bottom: 32px;
  color: var(--vt-text-heading);
}

.vt-login-logo-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vt-primary);
  box-shadow: 0 0 10px var(--vt-primary);
}

.vt-login-field {
  margin-bottom: 20px;
}

.vt-login-field-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.vt-login-input-wrap {
  position: relative;
}

.vt-login-pwd-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  transition: color 0.2s;
  color: var(--vt-text-muted);
}

.vt-login-pwd-toggle:hover {
  color: var(--vt-primary);
}

.vt-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  font-size: 13px;
}

.vt-login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--vt-text-secondary);
}

.vt-login-link {
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s;
  color: var(--vt-primary);
}

.vt-login-link:hover {
  color: var(--vt-primary-hover);
}

/* Social login */
.vt-social-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  font-weight: 500;
  margin: 24px 0 20px;
  color: var(--vt-text-muted);
}

.vt-social-divider::before,
.vt-social-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--vt-border-subtle);
}

.vt-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  margin-bottom: 10px;
  font-family: inherit;
}

.vt-social-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.vt-social-btn-google {
  background: #FFFFFF;
  color: #334155;
  border: 1px solid var(--vt-border-subtle);
}

.vt-social-btn-google:hover {
  background: #F3F4F6;
}

.vt-social-btn-kakao {
  background: #FEE500;
  color: #191919;
}

.vt-social-btn-kakao:hover {
  background: #FDDC00;
}

.vt-social-btn-naver {
  background: #03C75A;
  color: #FFFFFF;
}

.vt-social-btn-naver:hover {
  background: #02B350;
}

/* Register card */
.vt-register-card {
  border-radius: 20px;
  padding: 40px 36px;
  max-width: 480px;
  width: 100%;
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-md);
}

.vt-register-field {
  margin-bottom: 20px;
}

.vt-register-field-label {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.vt-register-input-row {
  display: flex;
  gap: 8px;
}

.vt-register-input-row .vt-input {
  flex: 1;
}

.vt-register-check-btn {
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  height: 48px;
  font-family: inherit;
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-30);
}

.vt-register-check-btn:hover {
  background: var(--vt-primary-alpha-25);
}

.vt-register-terms {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin: 24px 0;
  cursor: pointer;
  color: var(--vt-text-secondary);
}

/* Strength indicator */
.vt-strength-bar {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  margin-bottom: 6px;
}

.vt-strength-bar-segment {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  transition: background 0.3s;
  background: var(--vt-border-subtle);
}

.vt-strength-bar-segment.active-red {
  background: #EF4444 !important;
}

.vt-strength-bar-segment.active-orange {
  background: #F97316 !important;
}

.vt-strength-bar-segment.active-yellow {
  background: #EAB308 !important;
}

.vt-strength-bar-segment.active-green {
  background: #22C55E !important;
}

.vt-strength-text {
  font-size: 12px;
  font-weight: 500;
  color: var(--vt-text-secondary);
}

.vt-strength-text.text-red {
  color: #EF4444 !important;
}

.vt-strength-text.text-orange {
  color: #F97316 !important;
}

.vt-strength-text.text-yellow {
  color: #EAB308 !important;
}

.vt-strength-text.text-green {
  color: #22C55E !important;
}

/* Result page */
.vt-result-card {
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-md);
}

.vt-result-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 20px;
}

.vt-result-icon-success {
  background: var(--vt-success-alpha-10);
  color: var(--vt-accent);
  border: 2px solid var(--vt-accent-alpha-20);
}

.vt-result-icon-fail {
  background: var(--vt-error-alpha-10);
  color: var(--vt-error);
  border: 2px solid var(--vt-error-alpha-25);
}

.vt-result-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  color: var(--vt-text-heading);
}

.vt-result-msg {
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.6;
  color: var(--vt-text-secondary);
}

.vt-result-info {
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 24px;
  text-align: left;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
}

.vt-result-info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
}

.vt-result-info-row + .vt-result-info-row {
  border-top: 1px solid var(--vt-border-subtle);
}

.vt-result-info-label {
  font-weight: 500;
  color: var(--vt-text-muted);
}

.vt-result-info-value {
  font-weight: 700;
  color: var(--vt-text);
}

.vt-result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* Captcha */
.vt-captcha-box {
  border-radius: 12px;
  padding: 20px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}

.vt-captcha-label {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--vt-text-secondary);
}

.vt-captcha-display {
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 8px;
  font-style: italic;
  user-select: none;
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text);
}

.vt-captcha-display::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(139, 92, 246, 0.05) 8px, rgba(139, 92, 246, 0.05) 16px);
}

.vt-captcha-display-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vt-captcha-display-row .vt-captcha-display {
  flex: 1;
  margin-bottom: 0;
}

.vt-captcha-refresh {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
  background: none;
  border: none;
  flex-shrink: 0;
  color: var(--vt-primary);
}

.vt-captcha-refresh:hover {
  color: var(--vt-primary-hover);
}

.vt-captcha-input {
  margin-top: 12px;
}

.vt-captcha-check-box {
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
}

.vt-captcha-check {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  border: 2px solid var(--vt-text-placeholder);
}

.vt-captcha-check-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--vt-text);
}

.vt-captcha-provider {
  font-size: 11px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.4;
  color: var(--vt-text-placeholder);
}

/* Google SVG icon */
.vt-google-icon {
  width: 20px;
  height: 20px;
}

/* Password strength standalone */
.vt-strength-standalone {
  max-width: 400px;
  width: 100%;
}

/* ============================================
   VT-ALERT: Alerts, Flash, Callouts, Notifications, Toasts
   ============================================ */
/* Page common */
.vt-page-bg {
  background: var(--vt-bg);
}

.vt-section-card {
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 48px;
}

.vt-section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.vt-section-num {
  color: var(--vt-primary);
  font-family: "SF Mono", "Fira Code", monospace;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.vt-section-title {
  color: var(--vt-text);
  font-size: 18px;
  font-weight: 700;
}

.vt-section-divider {
  border-top: 1px solid;
  border-color: var(--vt-border-subtle);
  margin-bottom: 24px;
}

.vt-label {
  color: var(--vt-text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.vt-sublabel {
  color: var(--vt-text-muted);
  font-size: 11px;
  margin-top: 4px;
}

.vt-page-category {
  color: var(--vt-primary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.vt-page-title {
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 36px;
  font-weight: 900;
  margin: 0 0 8px;
}

/* Alert Cards */
.vt-alert-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.vt-alert-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.vt-alert-success .vt-alert-icon {
  background: var(--vt-success-alpha-10);
  color: var(--vt-success);
}

.vt-alert-error .vt-alert-icon {
  background: var(--vt-error-alpha-10);
  color: var(--vt-error);
}

.vt-alert-warning .vt-alert-icon {
  background: var(--vt-warning-alpha-10);
  color: var(--vt-warning);
}

.vt-alert-info .vt-alert-icon {
  background: var(--vt-info-alpha-10);
  color: var(--vt-info);
}

.vt-alert-body {
  flex: 1;
  min-width: 0;
}

.vt-alert-text {
  color: var(--vt-text);
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.vt-alert-sub {
  color: var(--vt-text-muted);
  font-size: 12px;
  margin: 2px 0 0;
}

.vt-alert-timer {
  color: var(--vt-text-secondary);
  background: var(--vt-primary-alpha-08);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  flex-shrink: 0;
  font-family: "SF Mono", "Fira Code", monospace;
}

/* Flash Messages */
.vt-flash-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 10px;
}

.vt-flash-success {
  border-left: 4px solid var(--vt-success);
}

.vt-flash-success .vt-flash-icon {
  color: var(--vt-success);
}

.vt-flash-error {
  border-left: 4px solid var(--vt-error);
}

.vt-flash-error .vt-flash-icon {
  color: var(--vt-error);
}

.vt-flash-warning {
  border-left: 4px solid var(--vt-warning);
}

.vt-flash-warning .vt-flash-icon {
  color: var(--vt-warning);
}

.vt-flash-info {
  border-left: 4px solid var(--vt-info);
}

.vt-flash-info .vt-flash-icon {
  color: var(--vt-info);
}

.vt-flash-icon {
  font-size: 16px;
  flex-shrink: 0;
}

.vt-flash-text {
  color: var(--vt-text);
  font-size: 14px;
  flex: 1;
  margin: 0;
}

.vt-flash-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  flex-shrink: 0;
  transition: color 0.2s;
  color: var(--vt-text-muted);
}

.vt-flash-close:hover {
  color: var(--vt-text-secondary);
}

/* Callouts */
.vt-callout-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  padding: 18px 22px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.vt-callout-info {
  border-left: 4px solid var(--vt-info);
}

.vt-callout-info .vt-callout-icon {
  color: var(--vt-info);
}

.vt-callout-success {
  border-left: 4px solid var(--vt-success);
}

.vt-callout-success .vt-callout-icon {
  color: var(--vt-success);
}

.vt-callout-warning {
  border-left: 4px solid var(--vt-warning);
}

.vt-callout-warning .vt-callout-icon {
  color: var(--vt-warning);
}

.vt-callout-error {
  border-left: 4px solid var(--vt-error);
}

.vt-callout-error .vt-callout-icon {
  color: var(--vt-error);
}

.vt-callout-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.vt-callout-icon {
  font-size: 15px;
  flex-shrink: 0;
}

.vt-callout-title {
  color: var(--vt-text);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.vt-callout-text {
  color: var(--vt-text-secondary);
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  padding-left: 25px;
}

/* Notification Feed */
.vt-notif-list {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 14px;
  overflow: hidden;
}

.vt-notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-text-heading);
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-notif-badge {
  background: var(--vt-primary);
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

.vt-notif-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-notif-item:hover {
  background: var(--vt-bg-hover);
}

.vt-notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--vt-primary);
}

.vt-notif-dot-hidden {
  opacity: 0;
}

.vt-notif-icon-box {
  background: var(--vt-primary-alpha-08);
  color: var(--vt-primary);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.vt-notif-body {
  flex: 1;
  min-width: 0;
}

.vt-notif-title {
  color: var(--vt-text);
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}

.vt-notif-preview {
  color: var(--vt-text-muted);
  font-size: 12px;
  margin: 2px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vt-notif-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.vt-notif-time {
  color: var(--vt-text-placeholder);
  font-size: 11px;
  white-space: nowrap;
}

.vt-notif-delete {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  transition: color 0.2s;
  opacity: 0;
  color: var(--vt-text-placeholder);
}

.vt-notif-delete:hover {
  color: var(--vt-error);
}

.vt-notif-item:hover .vt-notif-delete {
  opacity: 1;
}

/* Toast Notifications */
.vt-toast-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  box-shadow: var(--vt-shadow-md);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 12px;
  min-width: 320px;
  max-width: 400px;
}

.vt-toast-success {
  border-left: 4px solid var(--vt-success);
}

.vt-toast-success .vt-toast-icon {
  color: var(--vt-success);
}

.vt-toast-error {
  border-left: 4px solid var(--vt-error);
}

.vt-toast-error .vt-toast-icon {
  color: var(--vt-error);
}

.vt-toast-info {
  border-left: 4px solid var(--vt-info);
}

.vt-toast-info .vt-toast-icon {
  color: var(--vt-info);
}

.vt-toast-icon {
  font-size: 18px;
  margin-top: 2px;
  flex-shrink: 0;
}

.vt-toast-body {
  flex: 1;
  min-width: 0;
}

.vt-toast-title {
  color: var(--vt-text);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.vt-toast-msg {
  color: var(--vt-text-secondary);
  font-size: 13px;
  margin: 4px 0 0;
  line-height: 1.5;
}

.vt-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px;
  flex-shrink: 0;
  transition: color 0.2s;
  color: var(--vt-text-placeholder);
}

.vt-toast-close:hover {
  color: var(--vt-text-secondary);
}

/* Component Grid */
.vt-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.vt-grid-col {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .vt-grid-2 {
    grid-template-columns: 1fr;
  }
  .vt-page-title {
    font-size: 28px;
  }
  .vt-section-card {
    padding: 20px;
  }
}
/* Layout */
.vt-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== SECTION CARD ===== */
.vt-section-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
}

.vt-section-card-header {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-section-card-number {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--vt-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.vt-section-card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--vt-text);
}

.vt-section-card-desc {
  font-size: 13px;
  color: var(--vt-text-secondary);
  margin-bottom: 24px;
  padding-left: 40px;
}

.vt-variant-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 24px;
}

.vt-variant-box {
  flex: 1;
  min-width: 260px;
}

.vt-variant-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--vt-text-muted);
  margin-bottom: 10px;
}

/* ===== 1. FORM FIELD GROUP ===== */
.vt-field-group {
  margin-bottom: 16px;
}

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

.vt-field-required {
  color: var(--vt-error);
  margin-left: 2px;
}

.vt-field-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-input);
  color: var(--vt-text);
  font-size: 14px;
  outline: none;
  transition: border 0.2s, box-shadow 0.2s;
}

.vt-field-input::placeholder {
  color: var(--vt-text-placeholder);
}

.vt-field-input:focus {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-field-input.vt-field-error {
  border-color: var(--vt-error);
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

.vt-field-input:disabled {
  background: var(--vt-disabled-bg);
  color: var(--vt-disabled-text);
  cursor: not-allowed;
  border-color: var(--vt-border-subtle);
}

.vt-field-hint {
  font-size: 12px;
  color: var(--vt-text-muted);
  margin-top: 5px;
}

.vt-field-error-msg {
  font-size: 12px;
  color: var(--vt-error);
  margin-top: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}

textarea.vt-field-input {
  height: auto;
  padding: 10px 14px;
  resize: vertical;
  min-height: 80px;
}

/* ===== 2. NUMBER INPUT ===== */
.vt-num-wrap {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vt-border-subtle);
  border-radius: 10px;
  overflow: hidden;
  background: var(--vt-bg-input);
}

.vt-num-btn {
  width: 40px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--vt-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.vt-num-btn:hover {
  background: var(--vt-primary);
  color: #fff;
}

.vt-num-input {
  width: 60px;
  height: 42px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--vt-text);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  -moz-appearance: textfield;
}

.vt-num-input::-webkit-inner-spin-button, .vt-num-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.vt-num-wrap.vt-num-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* ===== 3. DATE PICKER ===== */
.vt-datepicker {
  width: 320px;
  border-radius: 14px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-card);
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.vt-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.vt-datepicker-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-text-secondary);
  transition: background 0.15s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
}

.vt-datepicker-nav:hover {
  background: var(--vt-bg-input);
}

.vt-datepicker-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-text);
}

.vt-datepicker-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 6px;
}

.vt-datepicker-weekday {
  font-size: 11px;
  font-weight: 600;
  color: var(--vt-text-muted);
  padding: 4px 0;
}

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

.vt-datepicker-day {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--vt-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
}

.vt-datepicker-day:hover {
  background: var(--vt-bg-input);
}

.vt-datepicker-day.vt-datepicker-other {
  color: var(--vt-text-placeholder);
}

.vt-datepicker-day.vt-datepicker-today {
  border: 1.5px solid var(--vt-primary);
  font-weight: 700;
}

.vt-datepicker-day.vt-datepicker-selected {
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
}

.vt-datepicker-day.vt-datepicker-range {
  background: var(--vt-primary-alpha-12);
  color: var(--vt-primary);
  border-radius: 0;
}

.vt-datepicker-day.vt-datepicker-range-start {
  border-radius: 10px 0 0 10px;
}

.vt-datepicker-day.vt-datepicker-range-end {
  border-radius: 0 10px 10px 0;
}

.vt-datepicker-presets {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--vt-border-subtle);
}

.vt-datepicker-preset {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--vt-border-subtle);
  background: transparent;
  color: var(--vt-text-secondary);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}

.vt-datepicker-preset:hover, .vt-datepicker-preset.vt-datepicker-preset-active {
  background: var(--vt-primary);
  color: #fff;
  border-color: var(--vt-primary);
}

/* ===== 4. DATE RANGE PICKER ===== */
.vt-daterange {
  display: inline-flex;
  flex-direction: column;
  border-radius: 16px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-card);
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.vt-daterange-calendars {
  display: flex;
  gap: 24px;
}

.vt-daterange-month {
  width: 280px;
}

.vt-daterange-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.vt-daterange-nav {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-text-secondary);
  transition: background 0.15s;
}

.vt-daterange-nav:hover {
  background: var(--vt-bg-input);
}

.vt-daterange-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vt-text);
}

.vt-daterange-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 4px;
}

.vt-daterange-weekday {
  font-size: 11px;
  font-weight: 600;
  color: var(--vt-text-muted);
  padding: 4px 0;
}

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

.vt-daterange-day {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  color: var(--vt-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border: none;
  background: transparent;
}

.vt-daterange-day:hover {
  background: var(--vt-bg-input);
}

.vt-daterange-day.vt-daterange-other {
  color: var(--vt-text-placeholder);
}

.vt-daterange-day.vt-daterange-today {
  border: 1.5px solid var(--vt-primary);
  font-weight: 700;
}

.vt-daterange-day.vt-daterange-selected {
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
}

.vt-daterange-day.vt-daterange-inrange {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
  border-radius: 0;
}

.vt-daterange-day.vt-daterange-start {
  border-radius: 8px 0 0 8px;
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
}

.vt-daterange-day.vt-daterange-end {
  border-radius: 0 8px 8px 0;
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
}

.vt-daterange-presets {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--vt-border-subtle);
}

.vt-daterange-preset {
  flex: 1;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--vt-border-subtle);
  background: transparent;
  color: var(--vt-text-secondary);
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s;
}

.vt-daterange-preset:hover, .vt-daterange-preset.vt-daterange-preset-active {
  background: var(--vt-primary);
  color: #fff;
  border-color: var(--vt-primary);
}

/* ===== 5. SEARCHABLE DROPDOWN ===== */
.vt-dropdown {
  position: relative;
  width: 300px;
}

.vt-dropdown-trigger {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-input);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
}

.vt-dropdown-trigger:hover {
  border-color: var(--vt-primary);
}

.vt-dropdown-trigger-text {
  font-size: 14px;
  color: var(--vt-text);
  font-weight: 500;
}

.vt-dropdown-trigger-placeholder {
  color: var(--vt-text-placeholder);
}

.vt-dropdown-trigger-icon {
  font-size: 12px;
  color: var(--vt-text-muted);
  transition: transform 0.2s;
}

.vt-dropdown.vt-dropdown-open .vt-dropdown-trigger-icon {
  transform: rotate(180deg);
}

.vt-dropdown.vt-dropdown-open .vt-dropdown-trigger {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  border-radius: 12px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 8px;
  z-index: 10;
  display: none;
}

.vt-dropdown.vt-dropdown-open .vt-dropdown-panel {
  display: block;
}

.vt-dropdown-search {
  width: 100%;
  height: 36px;
  padding: 0 10px 0 32px;
  border-radius: 8px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-input);
  color: var(--vt-text);
  font-size: 13px;
  outline: none;
  margin-bottom: 6px;
  transition: border 0.2s;
}

.vt-dropdown-search:focus {
  border-color: var(--vt-primary);
}

.vt-dropdown-search-wrap {
  position: relative;
}

.vt-dropdown-search-wrap i {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--vt-text-muted);
}

.vt-dropdown-options {
  max-height: 200px;
  overflow-y: auto;
}

.vt-dropdown-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 13px;
  color: var(--vt-text);
}

.vt-dropdown-option:hover {
  background: var(--vt-bg-input);
}

.vt-dropdown-option.vt-dropdown-option-selected {
  color: var(--vt-primary);
  font-weight: 600;
}

.vt-dropdown-option.vt-dropdown-option-disabled {
  color: var(--vt-disabled-text);
  cursor: not-allowed;
  pointer-events: none;
}

.vt-dropdown-option.vt-dropdown-option-highlighted {
  background: var(--vt-bg-input);
}

.vt-dropdown-option-icon {
  width: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--vt-text-muted);
}

.vt-dropdown-option-check {
  margin-left: auto;
  font-size: 12px;
  color: var(--vt-primary);
}

.vt-dropdown-option-label {
  flex: 1;
}

/* ===== 6. CALCULATOR CONTROLS ===== */
.vt-calc-panel {
  border-radius: 14px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-card);
  padding: 24px;
  width: 380px;
}

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

.vt-calc-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--vt-text);
  margin-bottom: 20px;
}

.vt-calc-value span {
  font-size: 14px;
  font-weight: 500;
  color: var(--vt-text-muted);
  margin-left: 4px;
}

.vt-calc-row {
  margin-bottom: 20px;
}

.vt-calc-row-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vt-calc-slider-wrap {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--vt-bg-input);
  margin: 16px 0 8px;
}

.vt-calc-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 3px;
  background: var(--vt-primary);
}

.vt-calc-slider-thumb {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--vt-primary);
  border: 3px solid var(--vt-bg-card);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.vt-calc-slider-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--vt-text-placeholder);
}

.vt-calc-radio-group {
  display: flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--vt-border-subtle);
  min-width: 200px;
}

.vt-calc-radio {
  flex: 1;
  height: 38px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text-secondary);
  background: transparent;
  border: none;
  border-right: 1px solid var(--vt-border-subtle);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}

.vt-calc-radio:last-child {
  border-right: none;
}

.vt-calc-radio:hover {
  background: var(--vt-bg-input);
}

.vt-calc-radio.vt-calc-radio-active {
  background: var(--vt-primary);
  color: #fff;
}

.vt-calc-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1.5px solid var(--vt-border-subtle);
}

.vt-calc-total-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text-secondary);
}

.vt-calc-total-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--vt-primary);
}

/* ===== 6a. COMPACT PICKER ===== */
.vt-cpick-wrap {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 16px;
  padding: 28px;
  max-width: 480px;
  position: relative;
}

.vt-cpick-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.vt-cpick-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--vt-primary-alpha-15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-primary);
}

.vt-cpick-label {
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--vt-text);
}

.vt-cpick-form {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.vt-cpick-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.vt-cpick-input-label {
  font-size: 11px;
  font-weight: 800;
  color: var(--vt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-left: 2px;
}

.vt-cpick-trigger {
  width: 100%;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: border-color 0.2s;
  font-family: inherit;
}

.vt-cpick-trigger:hover {
  border-color: var(--vt-primary);
}

.vt-cpick-trigger svg {
  color: var(--vt-text-muted);
}

.vt-cpick-order {
  flex: 1;
  min-width: 0;
  width: 36px;
  height: 36px;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 10px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text);
  text-align: center;
  outline: none;
  font-family: inherit;
  -moz-appearance: textfield;
}

.vt-cpick-order::-webkit-inner-spin-button, .vt-cpick-order::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.vt-cpick-order:focus {
  border-color: var(--vt-primary);
}

.vt-cpick-order-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vt-cpick-order-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-input);
  color: var(--vt-text-secondary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
  flex-shrink: 0;
}

.vt-cpick-order-btn:hover {
  border-color: var(--vt-primary);
  color: var(--vt-primary);
  background: var(--vt-primary-alpha-08);
}

.vt-cpick-calendar {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 14px;
  box-shadow: var(--vt-shadow-md);
  padding: 20px;
  margin-top: 4px;
}

.vt-cpick-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.vt-cpick-cal-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--vt-text);
}

.vt-cpick-cal-nav {
  display: flex;
  gap: 4px;
}

.vt-cpick-cal-nav button {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--vt-text-muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.vt-cpick-cal-nav button:hover {
  background: var(--vt-bg-hover);
}

.vt-cpick-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
  margin-bottom: 16px;
}

.vt-cpick-dow {
  font-size: 10px;
  font-weight: 800;
  color: var(--vt-text-muted);
  text-transform: uppercase;
  padding-bottom: 8px;
}

.vt-cpick-day {
  font-size: 13px;
  padding: 8px 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--vt-text);
  transition: background 0.15s;
}

.vt-cpick-day:hover {
  background: var(--vt-bg-hover);
}

.vt-cpick-day--empty {
  color: var(--vt-text-muted);
  opacity: 0.3;
  cursor: default;
}

.vt-cpick-day--active {
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
}

.vt-cpick-day--active:hover {
  background: var(--vt-primary);
}

.vt-cpick-day--today {
  border: 1px solid var(--vt-primary-alpha-30);
}

.vt-cpick-day--in-range {
  background: var(--vt-primary-alpha-08);
  color: var(--vt-primary);
  border-radius: 4px;
}

.vt-cpick-day--range-start {
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 8px 4px 4px 8px;
}

.vt-cpick-day--range-end {
  background: var(--vt-primary);
  color: #fff;
  font-weight: 700;
  border-radius: 4px 8px 8px 4px;
}

.vt-cpick-duration {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-accent);
  background: var(--vt-accent-alpha-08, rgba(45, 212, 191, 0.08));
  padding: 2px 8px;
  border-radius: 6px;
}

.vt-cpick-duration--error {
  color: var(--vt-danger);
  background: var(--vt-danger-alpha-08, rgba(239, 68, 68, 0.08));
}

.vt-cpick-trigger.vt-active {
  border-color: var(--vt-primary);
  box-shadow: 0 0 0 2px var(--vt-primary-alpha-08);
}

.vt-cpick-cal-footer {
  display: flex;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--vt-border-subtle);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.vt-cpick-cal-clear {
  color: var(--vt-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}

.vt-cpick-cal-clear:hover {
  color: var(--vt-error);
}

.vt-cpick-cal-today {
  color: var(--vt-primary);
  cursor: pointer;
}

.vt-cpick-cal-today:hover {
  text-decoration: underline;
}

/* ===== 7. CANVAS PREVIEW PANEL ===== */
.vt-canvas-panel {
  border-radius: 14px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-card);
  padding: 20px;
  width: 100%;
}

.vt-canvas-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text-secondary);
  margin-bottom: 12px;
}

.vt-canvas-previews {
  display: flex;
  gap: 16px;
}

.vt-canvas-box {
  flex: 1;
  min-height: 180px;
  border-radius: 12px;
  border: 2px dashed var(--vt-border-focus);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  padding: 24px;
}

.vt-canvas-box:hover {
  border-color: var(--vt-primary);
  background: var(--vt-primary-alpha-04);
}

.vt-canvas-box-dark {
  background: var(--vt-bg);
}

.vt-canvas-box-light {
  background: #F8FAFC;
}

.vt-canvas-box-icon {
  font-size: 28px;
  color: var(--vt-text-placeholder);
}

.vt-canvas-box-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-text-muted);
  text-align: center;
}

.vt-canvas-box-hint {
  font-size: 11px;
  color: var(--vt-text-placeholder);
}

.vt-canvas-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 5px;
  margin-bottom: 6px;
}

.vt-canvas-tag-dark {
  background: rgba(15, 14, 23, 0.8);
  color: #94A3B8;
}

.vt-canvas-tag-light {
  background: rgba(248, 250, 252, 0.9);
  color: #64748B;
  border: 1px solid #E2E8F0;
}

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

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

::-webkit-scrollbar-thumb {
  background: var(--vt-border-subtle);
  border-radius: 3px;
}

/* ========== PAGE HEADER ========== */
.vt-page-category {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--vt-primary-alpha-08);
  color: var(--vt-primary);
  margin-bottom: 12px;
}

.vt-page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--vt-text);
}

.vt-page-desc {
  margin-top: 8px;
  font-size: 15px;
  color: var(--vt-text-secondary);
}

/* ========== SECTION CARD ========== */
.vt-section-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 36px;
  backdrop-filter: blur(16px);
  transition: background 0.35s, border-color 0.35s;
}

.vt-section-card__label {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  background: var(--vt-primary-alpha-08);
  color: var(--vt-primary);
  margin-bottom: 10px;
}

.vt-section-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--vt-text);
  margin-bottom: 4px;
}

.vt-section-card__desc {
  font-size: 13px;
  color: var(--vt-text-muted);
  margin-bottom: 24px;
}

.vt-section-card__demo {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ========== 1. INSTALL WIZARD ========== */
.vt-install-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 14px;
  padding: 28px;
  backdrop-filter: blur(16px);
  max-width: 480px;
  transition: background 0.35s, border-color 0.35s;
}

.vt-install-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--vt-primary-alpha-15), var(--vt-accent-alpha-10));
  color: var(--vt-primary);
  font-size: 20px;
  margin-bottom: 16px;
}

.vt-install-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--vt-text);
  margin-bottom: 20px;
}

.vt-install-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vt-install-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-text-secondary);
  margin-bottom: 5px;
}

.vt-install-field input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--vt-border-focus);
  background: var(--vt-bg-input);
  color: var(--vt-text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
}

.vt-install-field input:focus {
  border-color: var(--vt-primary);
}

.vt-install-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--vt-error-alpha-10);
  border: 1px solid var(--vt-error-alpha-25);
  font-size: 13px;
  color: var(--vt-error);
  margin-top: 4px;
}

.vt-install-warning i {
  margin-top: 2px;
  font-size: 14px;
}

.vt-install-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 13px;
  color: var(--vt-text-secondary);
}

.vt-install-check input[type=checkbox] {
  width: 16px;
  height: 16px;
  accent-color: var(--vt-primary);
  cursor: pointer;
}

.vt-install-btn {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  background: var(--vt-gradient-primary);
  color: #fff;
  cursor: not-allowed;
  opacity: 0.45;
  margin-top: 6px;
  transition: opacity 0.2s;
}

/* ========== 2. STEPPER ========== */
.vt-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 0;
}

.vt-stepper-step {
  display: flex;
  align-items: center;
  gap: 0;
}

.vt-stepper-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.vt-stepper-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.3s;
  position: relative;
}

.vt-stepper-circle--completed {
  background: var(--vt-primary);
  color: #fff;
}

.vt-stepper-circle--active {
  background: var(--vt-primary);
  color: #fff;
  box-shadow: var(--vt-shadow-primary);
}

.vt-stepper-circle--upcoming {
  background: transparent;
  border: 2px solid var(--vt-text-placeholder);
  color: var(--vt-text-muted);
}

.vt-stepper-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--vt-text-secondary);
  white-space: nowrap;
}

.vt-stepper-line {
  width: 60px;
  height: 2px;
  margin: 0 4px;
  margin-bottom: 24px;
  transition: background 0.3s;
}

.vt-stepper-line--completed {
  background: var(--vt-primary);
}

.vt-stepper-line--upcoming {
  background: var(--vt-text-placeholder);
}

/* ========== 3. SAVE BAR ========== */
.vt-savebar-wrap {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 12px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  backdrop-filter: blur(16px);
  transition: background 0.35s, border-color 0.35s;
  min-width: 480px;
}

.vt-savebar-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--vt-text-secondary);
}

.vt-savebar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vt-warning);
  flex-shrink: 0;
}

.vt-savebar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vt-savebar-btn {
  padding: 8px 18px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.vt-savebar-btn--ghost {
  background: transparent;
  border: 1px solid var(--vt-border);
  color: var(--vt-text-secondary);
}

.vt-savebar-btn--ghost:hover {
  background: var(--vt-bg-hover);
  border-color: var(--vt-primary);
}

.vt-savebar-btn--disabled {
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-focus);
  color: var(--vt-text-muted);
  cursor: not-allowed;
  opacity: 0.6;
  display: flex;
  align-items: center;
  gap: 6px;
}

.vt-savebar-btn--disabled .vt-savebar-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--vt-text-muted);
  border-top-color: transparent;
  border-radius: 50%;
  animation: vt-spin 0.7s linear infinite;
}

.vt-savebar-btn--primary {
  background: var(--vt-gradient-primary);
  color: #fff;
}

.vt-savebar-btn--primary:hover {
  box-shadow: var(--vt-shadow-primary);
}

@keyframes vt-spin {
  to {
    transform: rotate(360deg);
  }
}
/* ========== 4. META INFO CARD ========== */
.vt-meta-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 12px;
  overflow: hidden;
  max-width: 420px;
  backdrop-filter: blur(16px);
  transition: background 0.35s, border-color 0.35s;
}

.vt-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  gap: 24px;
  border-bottom: 1px solid var(--vt-primary-alpha-08);
  transition: border-color 0.35s;
}

.vt-meta-row:last-child {
  border-bottom: none;
}

.vt-meta-label {
  font-size: 13px;
  color: var(--vt-text-muted);
  font-weight: 500;
}

.vt-meta-value {
  font-size: 13px;
  color: var(--vt-text);
  font-weight: 600;
}

/* ========== 5a. EVENT SCHEDULE LIST ========== */
.vt-schedule-list {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 16px;
  padding: 28px;
  max-width: 420px;
}

.vt-schedule-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.vt-schedule-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--vt-primary);
}

.vt-schedule-live-badge {
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.vt-schedule-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.vt-schedule-item {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--vt-border-subtle);
  transition: all 0.2s;
}

.vt-schedule-item--active {
  background: var(--vt-bg-elevated);
  border-color: var(--vt-primary-alpha-30);
}

.vt-schedule-item--active:hover {
  border-color: var(--vt-primary);
  cursor: pointer;
}

.vt-schedule-item--upcoming {
  background: var(--vt-bg-input);
  opacity: 0.7;
}

.vt-schedule-item--ended {
  background: var(--vt-bg-input);
  opacity: 0.5;
}

.vt-schedule-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.vt-schedule-status--active {
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
}

.vt-schedule-status--upcoming {
  background: var(--vt-bg-elevated);
  color: var(--vt-text-muted);
}

.vt-schedule-status--ended {
  background: var(--vt-bg-elevated);
  color: var(--vt-text-muted);
}

.vt-schedule-event-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--vt-text);
  margin-bottom: 6px;
}

.vt-schedule-date {
  font-size: 11px;
  color: var(--vt-text-muted);
  font-family: monospace;
}

.vt-schedule-add-btn {
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  border-radius: 12px;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.vt-schedule-add-btn:hover {
  background: var(--vt-bg-hover);
  border-color: var(--vt-primary-alpha-30);
}

/* ========== 5. VERTICAL STEP GUIDE ========== */
.vt-vstep-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 4px;
}

.vt-vstep-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.vt-vstep-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.vt-vstep-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s;
}

.vt-vstep-circle--completed {
  background: var(--vt-accent);
  color: #fff;
}

.vt-vstep-circle--active {
  background: var(--vt-gradient-primary);
  color: #fff;
  box-shadow: var(--vt-shadow-primary);
}

.vt-vstep-circle--inactive {
  background: transparent;
  border: 2px solid var(--vt-text-placeholder);
  color: var(--vt-text-muted);
}

.vt-vstep-line {
  width: 2px;
  height: 32px;
  flex-shrink: 0;
}

.vt-vstep-line--active {
  background: linear-gradient(to bottom, var(--vt-primary), var(--vt-text-placeholder));
}

.vt-vstep-line--completed {
  background: var(--vt-accent);
}

.vt-vstep-line--inactive {
  background: var(--vt-text-placeholder);
}

.vt-vstep-content {
  padding: 7px 0 24px;
}

.vt-vstep-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-vstep-desc {
  font-size: 12px;
  color: var(--vt-text-muted);
  margin-top: 2px;
}

/* ========== Install Wizard ========== */
.vt-wizard {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg, 12px);
  padding: 32px;
  max-width: 640px;
  margin: 0 auto;
}

.vt-wizard-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

.vt-wizard-step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vt-wizard-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--vt-bg-elevated);
  color: var(--vt-text-muted);
  border: 2px solid var(--vt-border);
  flex-shrink: 0;
  transition: all 0.2s;
}

.vt-wizard-step--active .vt-wizard-circle {
  background: var(--vt-primary);
  color: #fff;
  border-color: var(--vt-primary);
}

.vt-wizard-step--done .vt-wizard-circle {
  background: var(--vt-primary);
  color: #fff;
  border-color: var(--vt-primary);
  opacity: 0.7;
}

.vt-wizard-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text-muted);
  white-space: nowrap;
}

.vt-wizard-step--active .vt-wizard-step-label {
  color: var(--vt-text);
}

.vt-wizard-step--done .vt-wizard-step-label {
  color: var(--vt-primary);
}

.vt-wizard-line {
  width: 32px;
  height: 2px;
  background: var(--vt-border);
  margin: 0 8px;
  flex-shrink: 0;
}

.vt-wizard-step--done .vt-wizard-line {
  background: var(--vt-primary);
}

.vt-wizard-body {
  margin-bottom: 24px;
}

.vt-wizard-desc {
  font-size: 14px;
  color: var(--vt-text-muted);
  margin: 0 0 16px;
}

.vt-wizard-content {
  padding: 0;
}

.vt-wizard-actions {
  display: flex;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid var(--vt-border);
}

/* ========== DEMO THEME LABEL ========== */
.vt-demo-theme-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--vt-text-muted);
  margin-bottom: 10px;
}

/* ===== Wiki Component Styles (uses _vt-base.scss variables) ===== */
:root {
  --vt-code-magenta: #D946EF;
}

/* ===== PAGE HEADER ===== */
.vt-page-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt-primary);
  margin-bottom: 12px;
}

.vt-page-category i {
  font-size: 11px;
}

.vt-page-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--vt-text-heading);
  line-height: 1.3;
}

.vt-page-desc {
  font-size: 15px;
  color: var(--vt-text-secondary);
  margin-top: 8px;
  line-height: 1.6;
}

/* ===== SECTION CARD ===== */
.vt-section-card {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 32px;
  backdrop-filter: blur(12px);
  transition: background 0.35s, border-color 0.35s;
}

.vt-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vt-primary);
  margin-bottom: 6px;
}

.vt-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--vt-text-heading);
  margin-bottom: 4px;
}

.vt-section-desc {
  font-size: 14px;
  color: var(--vt-text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.vt-section-divider {
  height: 1px;
  background: var(--vt-border-subtle);
  margin: 28px 0;
}

/* ===== 1. CODE BLOCK PREVIEW ===== */
.vt-code-window {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-input);
}

.vt-code-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vt-border-subtle);
  background: rgba(0, 0, 0, 0.06);
}

.vt-code-dots {
  display: flex;
  gap: 7px;
}

.vt-code-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.vt-code-dot--red {
  background: #FF5F57;
}

.vt-code-dot--yellow {
  background: #FEBC2E;
}

.vt-code-dot--green {
  background: #28C840;
}

.vt-code-filename {
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-text-muted);
  font-family: "Pretendard", monospace;
}

.vt-code-body {
  padding: 20px;
  font-size: 13.5px;
  line-height: 1.75;
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  overflow-x: auto;
  color: var(--vt-text);
}

.vt-code-keyword {
  color: var(--vt-primary);
  font-weight: 600;
}

.vt-code-string {
  color: var(--vt-accent);
}

.vt-code-value {
  color: var(--vt-code-magenta);
}

.vt-code-comment {
  color: var(--vt-text-muted);
  font-style: italic;
}

.vt-code-tag {
  color: var(--vt-primary);
}

.vt-code-attr {
  color: var(--vt-accent);
}

/* ===== 2. PROPERTY TABLE ===== */
.vt-prop-table-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--vt-border-subtle);
}

.vt-prop-table {
  width: 100%;
}

.vt-prop-table th {
  text-align: left;
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vt-text-muted);
  background: var(--vt-bg-input);
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-prop-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--vt-text);
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-prop-table tr:last-child td {
  border-bottom: none;
}

.vt-prop-table tr:nth-child(even) td {
  background: var(--vt-primary-alpha-04);
}

.vt-prop-name {
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-primary);
}

.vt-prop-type {
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  font-size: 12.5px;
  color: var(--vt-accent);
  background: var(--vt-primary-alpha-12);
  padding: 2px 8px;
  border-radius: 4px;
}

.vt-prop-default {
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  font-size: 12.5px;
  color: var(--vt-text-secondary);
}

/* ===== 3. FAQ ACCORDION ===== */
.vt-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vt-accordion-item {
  border: 1px solid var(--vt-border-subtle);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.25s;
  background: var(--vt-bg-card);
}

.vt-accordion-item.vt-faq-active {
  border-left: 3px solid var(--vt-primary);
}

.vt-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--vt-text-heading);
  text-align: left;
  transition: background 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.vt-accordion-trigger:hover {
  background: var(--vt-bg-hover);
}

.vt-accordion-chevron {
  font-size: 13px;
  color: var(--vt-text-muted);
  transition: transform 0.3s ease;
}

.vt-faq-active .vt-accordion-chevron {
  transform: rotate(180deg);
  color: var(--vt-primary);
}

.vt-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.vt-faq-active .vt-accordion-body {
  max-height: 300px;
  padding: 0 20px 20px;
}

.vt-accordion-answer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-top: 4px;
  border-top: 1px solid var(--vt-border-subtle);
  padding-top: 14px;
}

.vt-faq-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
}

.vt-faq-badge--q {
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
}

.vt-faq-badge--a {
  background: var(--vt-accent-alpha-15);
  color: var(--vt-accent);
}

.vt-faq-question-text {
  display: flex;
  gap: 14px;
  align-items: center;
}

.vt-faq-text {
  font-size: 14px;
  line-height: 1.65;
  color: var(--vt-text-secondary);
}

/* ===== 4. DOCS TABS ===== */
.vt-docs-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--vt-border-subtle);
  margin-bottom: 0;
}

.vt-docs-tab-btn {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all 0.2s;
}

.vt-docs-tab-btn:hover {
  color: var(--vt-text);
}

.vt-docs-tab-btn.vt-docs-tab-active {
  color: var(--vt-primary);
  border-bottom-color: var(--vt-primary);
}

.vt-docs-tab-content {
  padding: 20px;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  border-top: none;
  border-radius: 0 0 12px 12px;
  font-family: "SFMono-Regular", "Consolas", "Menlo", monospace;
  font-size: 13.5px;
  color: var(--vt-text);
  line-height: 1.7;
}

.vt-docs-tab-panel {
  display: none;
}

.vt-docs-tab-panel.vt-docs-tab-active {
  display: block;
}

/* ===== 5. DOCS SEARCH ===== */
.vt-docs-search-wrap {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}

.vt-docs-search-input {
  width: 100%;
  padding: 16px 56px 16px 52px;
  border-radius: 999px;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  font-size: 15px;
  color: var(--vt-text-heading);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.vt-docs-search-input::placeholder {
  color: var(--vt-text-muted);
}

.vt-docs-search-input:focus {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus);
}

.vt-docs-search-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--vt-text-muted);
  pointer-events: none;
}

.vt-docs-search-kbd {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--vt-text-muted);
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border-subtle);
  pointer-events: none;
}

/* ===== 6. DOCS PAGINATION ===== */
.vt-docs-nav-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.vt-docs-nav-card {
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-card);
  text-decoration: none;
  transition: all 0.25s;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(12px);
}

.vt-docs-nav-card:hover {
  border-color: var(--vt-primary);
}

.vt-docs-nav-card:hover .vt-docs-nav-title {
  color: var(--vt-primary);
}

.vt-docs-nav-dir {
  font-size: 12px;
  font-weight: 600;
  color: var(--vt-text-muted);
}

.vt-docs-nav-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-text-heading);
  transition: color 0.2s;
}

.vt-docs-nav-card--prev {
  text-align: left;
}

.vt-docs-nav-card--next {
  text-align: right;
}

/* ===== 7. AUTHOR & FEEDBACK ===== */
.vt-author-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.vt-author-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vt-author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--vt-primary), var(--vt-accent), var(--vt-code-magenta), var(--vt-primary));
  padding: 3px;
  flex-shrink: 0;
}

.vt-author-avatar-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--vt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--vt-text-secondary);
}

.vt-author-label {
  font-size: 11px;
  color: var(--vt-text-muted);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.vt-author-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-text-heading);
}

.vt-author-feedback {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-author-feedback-label {
  font-size: 14px;
  color: var(--vt-text-secondary);
  font-weight: 500;
}

.vt-author-feedback-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--vt-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--vt-text-muted);
  transition: all 0.2s;
}

.vt-author-feedback-btn:hover {
  color: var(--vt-primary);
  border-color: var(--vt-primary);
  background: var(--vt-bg-hover);
}

/* ===== 8. FEATURE GRID ===== */
.vt-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.vt-feature-card {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--vt-border-subtle);
  background: var(--vt-bg-card);
  backdrop-filter: blur(12px);
  transition: border-color 0.25s;
}

.vt-feature-card:hover {
  border-color: var(--vt-primary);
}

.vt-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--vt-primary-alpha-12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--vt-primary);
  margin-bottom: 14px;
  transition: transform 0.25s;
}

.vt-feature-card:hover .vt-feature-icon {
  transform: scale(1.12);
}

.vt-feature-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--vt-text-heading);
  margin-bottom: 6px;
}

.vt-feature-desc {
  font-size: 13.5px;
  color: var(--vt-text-secondary);
  line-height: 1.6;
}

/* ===== 9. VERTICAL STEP GUIDE ===== */
.vt-vstep-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 4px;
}

.vt-vstep-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
}

.vt-vstep-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.vt-vstep-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.3s;
}

.vt-vstep-circle--completed {
  background: var(--vt-accent);
  color: #fff;
  box-shadow: var(--vt-shadow-primary);
}

.vt-vstep-circle--active {
  background: var(--vt-gradient-primary);
  color: #fff;
  box-shadow: var(--vt-shadow-primary);
}

.vt-vstep-circle--inactive {
  background: transparent;
  border: 2px solid var(--vt-border-subtle);
  color: var(--vt-text-muted);
}

.vt-vstep-line {
  width: 2px;
  height: 32px;
  flex-shrink: 0;
}

.vt-vstep-line--completed {
  background: var(--vt-accent);
}

.vt-vstep-line--active {
  background: linear-gradient(to bottom, var(--vt-primary), var(--vt-border-subtle));
}

.vt-vstep-line--inactive {
  background: var(--vt-border-subtle);
}

.vt-vstep-content {
  padding: 7px 0 24px;
}

.vt-vstep-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--vt-text-heading);
}

.vt-vstep-desc {
  font-size: 13px;
  color: var(--vt-text-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .vt-section-card {
    padding: 24px 18px;
  }
  .vt-feature-grid {
    grid-template-columns: 1fr;
  }
  .vt-docs-nav-wrap {
    grid-template-columns: 1fr;
  }
  .vt-author-wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* ============================================
   VeltoStudio Manage Components
   CSS Variable-based theming
   ============================================ */
/* Page */
.vt-page-title {
  background: var(--vt-gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vt-page-cat {
  color: var(--vt-primary);
}

/* Data Table */
.vt-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 6px;
}

.vt-table th {
  text-align: left;
  padding: 0 12px 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vt-text-muted);
  border-bottom: 1px solid var(--vt-primary-alpha-08);
}

.vt-table td {
  padding: 12px 12px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  position: relative;
  background: var(--vt-bg-card);
  color: var(--vt-text);
}

.vt-table td:first-child {
  border-radius: 10px 0 0 10px;
}

.vt-table td:last-child {
  border-radius: 0 10px 10px 0;
}

.vt-table tbody tr:hover td {
  background: var(--vt-primary-alpha-08);
}

/* Stat cards (admin dashboard) */
.vt-stat-card {
  display: block;
  padding: 20px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.15s;
}
a.vt-stat-card:hover {
  border-color: var(--vt-primary);
  transform: translateY(-2px);
}
.vt-stat-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text-secondary);
  margin-bottom: 8px;
}
.vt-stat-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--vt-text);
}

.vt-table tbody tr:hover .vt-table-row-accent {
  opacity: 1;
}

.vt-table-row-accent {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.2s;
  background: var(--vt-gradient-primary);
}

.vt-table-primary {
  color: var(--vt-text-heading);
}

.vt-table-secondary {
  color: var(--vt-text-secondary);
}

.vt-table-muted {
  color: var(--vt-text-muted);
}

.vt-table-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  background: var(--vt-primary-alpha-15);
  border: 1px solid var(--vt-primary-alpha-30);
  color: var(--vt-primary);
}

.vt-table-action {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.2s;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-secondary);
}

.vt-table-action:hover {
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
  border-color: var(--vt-primary);
}

.vt-table-action-danger:hover {
  background: var(--vt-error-alpha-10);
  color: var(--vt-error);
  border-color: var(--vt-error-alpha-25);
}

/* List Items */
.vt-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  position: relative;
  transition: all 0.2s;
  cursor: default;
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-list-item:hover {
  background: var(--vt-primary-alpha-04);
}

.vt-list-item:hover .vt-list-accent {
  opacity: 1;
}

.vt-list-accent {
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  opacity: 0;
  transition: opacity 0.2s;
  background: var(--vt-gradient-primary);
}

.vt-list-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text-heading);
}

.vt-list-subtitle {
  font-size: 12px;
  margin-top: 2px;
  color: var(--vt-text-secondary);
}

.vt-list-time {
  font-size: 11px;
  white-space: nowrap;
  color: var(--vt-text-muted);
}

.vt-list-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--vt-primary-alpha-15);
  border: 1px solid var(--vt-primary-alpha-20);
  color: var(--vt-primary);
}

.vt-list-action {
  font-size: 14px;
  cursor: pointer;
  transition: color 0.2s;
  padding: 4px;
  color: var(--vt-text-muted);
}

.vt-list-action:hover {
  color: var(--vt-primary);
}

/* Tree Structure */
.vt-tree-container {
  border-radius: 12px;
  padding: 8px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border-subtle);
  max-width: 320px;
}

.vt-tree-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 0;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  border-bottom: 1px solid var(--vt-border-subtle);
}

.vt-tree-item:hover {
  background: var(--vt-primary-alpha-04);
}

.vt-tree-item--parent {
  font-weight: 600;
}

.vt-tree-item-label {
  color: var(--vt-text-secondary);
}

.vt-tree-item-label--primary {
  color: var(--vt-text);
  font-weight: 600;
}

.vt-tree-chevron {
  font-size: 10px;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.2s;
  color: var(--vt-text-muted);
}

.vt-tree-children {
  padding-left: 24px;
  position: relative;
}

.vt-tree-line {
  position: absolute;
  left: 20px;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--vt-primary-alpha-20);
  width: 0;
}

.vt-tree-child-row {
  position: relative;
}

.vt-tree-hline {
  position: absolute;
  left: -4px;
  top: 50%;
  width: 16px;
  border-top: 1px solid var(--vt-primary-alpha-20);
}

/* Menu Manager */
.vt-menu-card {
  border-radius: 16px;
  overflow: hidden;
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
}

.vt-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-heading);
}

.vt-menu-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
}

.vt-menu-list {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vt-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  transition: all 0.2s;
  cursor: grab;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-primary-alpha-08);
}

.vt-menu-item:hover {
  border-color: var(--vt-primary-alpha-30);
}

.vt-menu-grip {
  font-size: 14px;
  cursor: grab;
  color: var(--vt-text-placeholder);
}

.vt-menu-icon {
  font-size: 16px;
  flex-shrink: 0;
  color: var(--vt-primary);
}

.vt-menu-label {
  font-size: 14px;
  font-weight: 500;
  flex: 1;
  color: var(--vt-text);
}

.vt-menu-toggle-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  cursor: pointer;
  transition: all 0.3s;
  flex-shrink: 0;
  background: var(--vt-toggle-bg);
}

.vt-menu-toggle-track.active {
  background: var(--vt-primary);
  box-shadow: 0 0 10px var(--vt-primary-alpha-30);
}

.vt-menu-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FFFFFF;
  transition: all 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.vt-menu-toggle-track.active .vt-menu-toggle-thumb {
  left: 20px;
}

/* Two-Panel Layout */
.vt-panel {
  border-radius: 12px;
  overflow: hidden;
  background: var(--vt-bg-section);
  border: 1px solid var(--vt-border-subtle);
  box-shadow: var(--vt-shadow-sm);
}

.vt-panel-header {
  padding: 14px 16px;
  font-size: 13px;
  font-weight: 700;
  border-bottom: 1px solid var(--vt-border-subtle);
  color: var(--vt-text-heading);
}

.vt-panel-item {
  padding: 10px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 1px solid var(--vt-primary-alpha-06);
  color: var(--vt-text-secondary);
}

.vt-panel-item:hover {
  background: var(--vt-primary-alpha-04);
  color: var(--vt-text);
}

.vt-panel-item.active {
  background: var(--vt-primary-alpha-08);
  color: var(--vt-primary);
  border-left: 3px solid var(--vt-primary);
}

.vt-panel-divider {
  width: 1px;
  flex-shrink: 0;
  background: var(--vt-border-subtle);
}

.vt-panel-layout {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
}

.vt-panel-detail-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--vt-text-heading);
}

.vt-panel-detail-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--vt-text-secondary);
}

/* Conversation Thread */
.vt-thread-msg {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  transition: background 0.2s;
  border-bottom: 1px solid var(--vt-primary-alpha-06);
}

.vt-thread-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.vt-thread-admin {
  border-left: 3px solid var(--vt-primary);
}

.vt-thread-user {
  border-left: 3px solid var(--vt-accent);
}

.vt-thread-avatar-admin {
  background: var(--vt-primary-alpha-15);
  border: 1px solid var(--vt-primary-alpha-30);
  color: var(--vt-primary);
}

.vt-thread-avatar-user {
  background: var(--vt-accent-alpha-15);
  border: 1px solid var(--vt-accent-alpha-20);
  color: var(--vt-accent);
}

.vt-thread-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vt-thread-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--vt-text-heading);
}

.vt-thread-time {
  font-size: 11px;
  color: var(--vt-text-muted);
  margin-left: 4px;
}

.vt-thread-text {
  font-size: 13px;
  line-height: 1.6;
  margin-top: 6px;
  color: var(--vt-text);
}

.vt-thread-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: var(--vt-accent-alpha-10);
  color: var(--vt-accent);
  border: 1px solid var(--vt-accent-alpha-20);
}

/* Empty State */
.vt-empty-container {
  text-align: center;
  padding: 48px 24px;
}

.vt-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 20px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  color: var(--vt-text-placeholder);
}

.vt-empty-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--vt-text);
}

.vt-empty-subtitle {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: var(--vt-text-muted);
}

.vt-empty-dashed {
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  border: 2px dashed var(--vt-border);
  background: var(--vt-bg-hover);
}

/* Status Badges */
.vt-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.vt-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.vt-status-active {
  background: var(--vt-accent-alpha-10);
  color: var(--vt-accent);
  border: 1px solid var(--vt-accent-alpha-20);
}

.vt-status-beta {
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
  border: 1px solid var(--vt-primary-alpha-25);
}

.vt-status-deprecated {
  background: var(--vt-error-alpha-10);
  color: var(--vt-error);
  border: 1px solid var(--vt-error-alpha-25);
}

.vt-status-pending {
  background: var(--vt-warning-alpha-10);
  color: var(--vt-warning);
  border: 1px solid var(--vt-warning-alpha-25);
}

.vt-status-archived {
  background: var(--vt-muted-alpha-10);
  color: var(--vt-text-muted);
  border: 1px solid var(--vt-muted-alpha-25);
}

/* Responsive table scroll */
.vt-table-wrap {
  overflow-x: auto;
}

/* Widget Shell */
.vt-widget-shell {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 16px;
  overflow: hidden;
}

.vt-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vt-border);
}

.vt-widget-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-widget-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 14px;
  background: var(--vt-primary-alpha-10);
  color: var(--vt-primary);
}

.vt-widget-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vt-widget-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  border: none;
  color: var(--vt-text-muted);
  text-decoration: none;
}

.vt-widget-action:hover {
  background: var(--vt-bg-hover);
  color: var(--vt-text);
}

.vt-widget-body {
  padding: 20px;
}

.vt-widget-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}

/* Topbar */
.vt-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: var(--vt-bg-card);
  border-bottom: 1px solid var(--vt-border);
}

.vt-topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.vt-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vt-topbar-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--vt-text);
}

.vt-topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--vt-bg-input);
  border: 1px solid var(--vt-border);
  border-radius: 8px;
  color: var(--vt-text-muted);
}

.vt-topbar-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  width: 180px;
  color: var(--vt-text);
}

.vt-topbar-search-input::placeholder {
  color: var(--vt-text-placeholder);
}

.vt-topbar-kbd {
  padding: 2px 6px;
  font-size: 10px;
  font-family: monospace;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border);
  border-radius: 4px;
  color: var(--vt-text-muted);
}

.vt-topbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  border: none;
  color: var(--vt-text-secondary);
}

.vt-topbar-btn:hover {
  background: var(--vt-bg-hover);
  color: var(--vt-text);
}

.vt-topbar-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--vt-error);
  color: #fff;
}

.vt-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
  list-style: none;
}

.vt-topbar-user:hover {
  background: var(--vt-bg-hover);
}

.vt-topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}

.vt-topbar-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  background: var(--vt-primary-alpha-15);
  color: var(--vt-primary);
}

.vt-topbar-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--vt-text);
}

.vt-topbar-dropdown {
  position: relative;
}

.vt-topbar-dropdown > summary {
  list-style: none;
}

.vt-topbar-dropdown > summary::-webkit-details-marker {
  display: none;
}

.vt-topbar-dropdown-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  min-width: 240px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  z-index: 100;
  overflow: hidden;
}

.vt-topbar-dropdown-panel--notifications {
  min-width: 320px;
}

.vt-topbar-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vt-border);
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-topbar-dropdown-action {
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--vt-primary);
}

.vt-topbar-dropdown-body {
  padding: 8px;
}

.vt-topbar-dropdown-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--vt-text-muted);
}

.vt-topbar-dropdown-divider {
  height: 1px;
  margin: 8px 0;
  background: var(--vt-border);
}

.vt-topbar-user-email {
  font-size: 12px;
  color: var(--vt-text-muted);
}

.vt-topbar-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s;
  color: var(--vt-text);
}

.vt-topbar-menu-item:hover {
  background: var(--vt-bg-hover);
}

.vt-topbar-menu-item--danger {
  color: var(--vt-error);
}

.vt-topbar-noti-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.2s;
}

.vt-topbar-noti-item:hover {
  background: var(--vt-bg-hover);
}

.vt-topbar-noti-item.vt-unread {
  background: var(--vt-primary-alpha-05);
}

.vt-topbar-noti-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  background: var(--vt-bg-elevated);
}

.vt-topbar-noti-content {
  flex: 1;
  min-width: 0;
}

.vt-topbar-noti-title {
  font-size: 13px;
  line-height: 1.4;
  color: var(--vt-text);
}

.vt-topbar-noti-time {
  font-size: 11px;
  margin-top: 4px;
  color: var(--vt-text-muted);
}

/* Theme toggle icons */
[data-theme=dark] .vt-theme-icon-dark {
  display: block;
}

[data-theme=dark] .vt-theme-icon-light {
  display: none;
}

[data-theme=light] .vt-theme-icon-dark {
  display: none;
}

[data-theme=light] .vt-theme-icon-light {
  display: block;
}

/* Activity Feed */
.vt-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}

.vt-activity-item:not(:last-child) {
  border-bottom: 1px solid var(--vt-border);
}

.vt-activity-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border);
}

.vt-activity-icon--member {
  background: var(--vt-primary-alpha-10);
  border-color: var(--vt-primary-alpha-25);
  color: var(--vt-primary);
}

.vt-activity-icon--post {
  background: var(--vt-accent-alpha-10);
  border-color: var(--vt-accent-alpha-20);
  color: var(--vt-accent);
}

.vt-activity-icon--comment {
  background: var(--vt-info-alpha-10);
  border-color: var(--vt-info-alpha-25);
  color: var(--vt-info);
}

.vt-activity-icon--system {
  background: var(--vt-warning-alpha-10);
  border-color: var(--vt-warning-alpha-25);
  color: var(--vt-warning);
}

.vt-activity-icon--login {
  background: var(--vt-success-alpha-10);
  border-color: var(--vt-success-alpha-25);
  color: var(--vt-success);
}

.vt-activity-icon--error {
  background: var(--vt-error-alpha-10);
  border-color: var(--vt-error-alpha-25);
  color: var(--vt-error);
}

.vt-activity-content {
  flex: 1;
  min-width: 0;
}

.vt-activity-title {
  font-size: 13px;
  line-height: 1.5;
  color: var(--vt-text);
}

.vt-activity-link {
  color: var(--vt-text);
  text-decoration: none;
}

.vt-activity-link:hover {
  color: var(--vt-primary);
}

.vt-activity-time {
  font-size: 11px;
  margin-top: 4px;
  color: var(--vt-text-muted);
}

.vt-activity-empty {
  padding: 40px 20px;
  text-align: center;
}

.vt-activity-empty-icon {
  font-size: 32px;
  margin-bottom: 12px;
  opacity: 0.5;
}

.vt-activity-empty-text {
  font-size: 13px;
  color: var(--vt-text-muted);
}

.vt-price {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.vt-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.vt-price-current {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--vt-text);
  letter-spacing: -0.02em;
}

.vt-price-original {
  font-size: 0.8rem;
  color: var(--vt-text-muted);
  text-decoration: line-through;
}

.vt-price-monthly {
  font-size: 0.8rem;
  color: var(--vt-accent);
  font-weight: 600;
}

.vt-product-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.2s;
}
.vt-product-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.vt-product-card-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--vt-bg-elevated);
}
.vt-product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-product-card-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--vt-text-muted);
  opacity: 0.4;
}

.vt-product-card-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
  z-index: 2;
}
.vt-product-card-badges .vt-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.vt-product-card-badges .vt-badge-green {
  background: #10B981;
  color: #fff;
}
.vt-product-card-badges .vt-badge-blue {
  background: #3B82F6;
  color: #fff;
}
.vt-product-card-badges .vt-badge-red {
  background: #EF4444;
  color: #fff;
}
.vt-product-card-badges .vt-badge-yellow {
  background: #F59E0B;
  color: #fff;
}
.vt-product-card-badges .vt-badge-purple {
  background: #8B5CF6;
  color: #fff;
}
.vt-product-card-badges .vt-badge-gray {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.vt-product-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vt-product-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vt-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vt-product-card-subtitle {
  margin: 0;
  font-size: 0.8rem;
  color: var(--vt-text-muted);
}

.vt-product-card-specs {
  display: flex;
  gap: 6px;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--vt-text-muted);
}
.vt-product-card-specs span + span::before {
  content: "·";
  margin-right: 6px;
}

.vt-product-card-spec {
  display: inline;
}

.vt-card-image {
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}
.vt-card-image img {
  width: 100%;
  display: block;
}

.vt-card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
}

.vt-sortbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  gap: 12px;
}

.vt-sortbar-count {
  font-size: 0.9rem;
  color: var(--vt-text-muted);
}
.vt-sortbar-count strong {
  color: var(--vt-text);
  font-weight: 700;
}

.vt-sortbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.vt-sortbar-select-wrap {
  position: relative;
}

.vt-sortbar-select {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--vt-text);
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.vt-sortbar-select:hover {
  border-color: var(--vt-primary);
}

.vt-sortbar-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 140px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 4px;
  list-style: none;
  margin: 0;
  z-index: 50;
  animation: vtSortMenuIn 0.15s ease;
}

@keyframes vtSortMenuIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.vt-sortbar-menu-item {
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--vt-text);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.vt-sortbar-menu-item:hover {
  background: var(--vt-bg-elevated);
}
.vt-sortbar-menu-item.vt-active {
  color: var(--vt-primary);
  font-weight: 600;
}

.vt-sortbar-view {
  display: flex;
  border: 1px solid var(--vt-border);
  border-radius: 8px;
  overflow: hidden;
}

.vt-sortbar-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: var(--vt-bg-card);
  color: var(--vt-text-muted);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vt-sortbar-view-btn:hover {
  color: var(--vt-text);
}
.vt-sortbar-view-btn.vt-active {
  background: var(--vt-primary);
  color: #fff;
}
.vt-sortbar-view-btn + .vt-sortbar-view-btn {
  border-left: 1px solid var(--vt-border);
}

.vt-filter-panel {
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 12px;
  overflow: hidden;
}

.vt-filter-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--vt-border);
}

.vt-filter-panel-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--vt-text);
  display: flex;
  align-items: center;
  gap: 6px;
}

.vt-filter-panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--vt-primary);
  color: #fff;
  border-radius: 10px;
}

.vt-filter-panel-reset {
  font-size: 0.8rem;
  color: var(--vt-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.vt-filter-panel-reset:hover {
  color: var(--vt-primary);
}

.vt-filter-section {
  border-bottom: 1px solid var(--vt-border);
}
.vt-filter-section:last-child {
  border-bottom: none;
}

.vt-filter-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--vt-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.12s;
}
.vt-filter-section-toggle:hover {
  background: var(--vt-bg-elevated);
}

.vt-filter-section-body {
  padding: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vt-filter-check,
.vt-filter-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--vt-text);
  cursor: pointer;
}
.vt-filter-check input,
.vt-filter-radio input {
  accent-color: var(--vt-primary);
}

.vt-filter-check-label,
.vt-filter-radio-label {
  flex: 1;
}

.vt-filter-range {
  padding: 4px 0;
}

.vt-filter-range-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vt-filter-range-input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font-size: 0.85rem;
  color: var(--vt-text);
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border);
  border-radius: 6px;
  text-align: center;
}
.vt-filter-range-input:focus {
  outline: none;
  border-color: var(--vt-primary);
}

.vt-filter-range-sep {
  color: var(--vt-text-muted);
  font-size: 0.85rem;
}

.vt-filter-range-unit {
  font-size: 0.8rem;
  color: var(--vt-text-muted);
  white-space: nowrap;
}

.vt-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vt-gallery-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vt-bg-elevated);
  aspect-ratio: 16/10;
}

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

.vt-gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.vt-gallery-main:hover .vt-gallery-arrow {
  opacity: 1;
}
.vt-gallery-arrow--prev {
  left: 10px;
}
.vt-gallery-arrow--next {
  right: 10px;
}
.vt-gallery-arrow:hover {
  background: rgba(0, 0, 0, 0.65);
}

.vt-gallery-counter {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 12px;
  z-index: 2;
}

.vt-gallery-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px;
}
.vt-gallery-thumbs::-webkit-scrollbar {
  height: 4px;
}
.vt-gallery-thumbs::-webkit-scrollbar-thumb {
  background: var(--vt-border);
  border-radius: 2px;
}

.vt-gallery-thumb {
  flex-shrink: 0;
  width: 64px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color 0.15s, opacity 0.15s;
  opacity: 0.6;
}
.vt-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vt-gallery-thumb:hover {
  opacity: 0.85;
}
.vt-gallery-thumb.vt-active {
  border-color: var(--vt-primary);
  opacity: 1;
}

/* ============================================
   VeltoStudio — 신규 확장 컴포넌트 스타일
   Banner/Slider, Chart, Rating, CouponCard,
   IconPicker, AddressPicker, MegaMenu
   ============================================ */
/* ---------- Banner Slider ---------- */
.vt-banner-slider {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: var(--vt-bg-card);
}
.vt-banner-slider-track {
  display: flex;
  transition: transform 0.5s ease;
}
.vt-banner-slider-slide {
  min-width: 100%;
  flex-shrink: 0;
}
.vt-banner-slider-slide a {
  display: block;
}
.vt-banner-slider-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.vt-banner-slider-prev, .vt-banner-slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 2;
}
.vt-banner-slider:hover .vt-banner-slider-prev, .vt-banner-slider:hover .vt-banner-slider-next {
  opacity: 1;
}
.vt-banner-slider-prev {
  left: 12px;
}
.vt-banner-slider-next {
  right: 12px;
}
.vt-banner-slider-playpause {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 0.7rem;
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s;
}
.vt-banner-slider:hover .vt-banner-slider-playpause {
  opacity: 1;
}
.vt-banner-slider-indicators {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.vt-banner-slider-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  padding: 0;
}
.vt-banner-slider-dot.vt-active {
  background: #fff;
  transform: scale(1.25);
}

/* ---------- Chart ---------- */
.vt-chart {
  position: relative;
  width: 100%;
  background: var(--vt-bg-card);
  border-radius: 12px;
  padding: 16px;
}
.vt-chart canvas {
  width: 100% !important;
}

/* ---------- Rating ---------- */
.vt-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.vt-rating-star {
  color: var(--vt-border);
  cursor: default;
  transition: color 0.15s;
  user-select: none;
}
.vt-rating-star--filled {
  color: #F59E0B;
}
.vt-rating-star--half {
  position: relative;
  color: var(--vt-border);
}
.vt-rating-star--half::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
  color: #F59E0B;
}
.vt-rating:not(.vt-rating--readonly) .vt-rating-star {
  cursor: pointer;
}
.vt-rating:not(.vt-rating--readonly) .vt-rating-star:hover {
  color: #FBBF24;
}
.vt-rating-sm .vt-rating-star {
  font-size: 1rem;
}
.vt-rating-md .vt-rating-star {
  font-size: 1.4rem;
}
.vt-rating-lg .vt-rating-star {
  font-size: 2rem;
}
.vt-rating-value {
  margin-left: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vt-text-muted);
}

/* ---------- CouponCard ---------- */
.vt-coupon {
  position: relative;
  border: 2px dashed var(--vt-border);
  border-radius: 12px;
  padding: 20px;
  background: var(--vt-bg-card);
  overflow: hidden;
  max-width: 340px;
}
.vt-coupon-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: 12px;
}
.vt-coupon-overlay span {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 2px;
  transform: rotate(-15deg);
}
.vt-coupon-header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
}
.vt-coupon-discount {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--vt-primary);
  line-height: 1;
}
.vt-coupon-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--vt-text);
}
.vt-coupon-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.vt-coupon-row {
  font-size: 0.85rem;
  color: var(--vt-text-muted);
  line-height: 1.4;
}
.vt-coupon-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--vt-border);
}
.vt-coupon-code {
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--vt-text-muted);
  background: var(--vt-bg-elevated);
  padding: 5px 12px;
  border-radius: 6px;
  letter-spacing: 0.5px;
}
.vt-coupon--used, .vt-coupon--expired {
  opacity: 0.6;
}

/* ---------- IconPicker ---------- */
.vt-icon-picker {
  position: relative;
  display: inline-block;
  width: 300px;
}
.vt-icon-picker-trigger {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--vt-border-subtle, var(--vt-border));
  background: var(--vt-bg-input, var(--vt-bg-card));
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: border 0.2s, box-shadow 0.2s;
  font-size: 14px;
  font-weight: 500;
  color: var(--vt-text);
}
.vt-icon-picker-trigger:hover {
  border-color: var(--vt-primary);
}
.vt-icon-picker.vt-open .vt-icon-picker-trigger {
  border-color: var(--vt-primary);
  box-shadow: var(--vt-shadow-focus, 0 0 0 3px rgba(167, 139, 250, 0.15));
}
.vt-icon-picker-preview {
  display: flex;
  align-items: center;
  gap: 10px;
}
.vt-icon-picker-placeholder {
  color: var(--vt-text-placeholder, var(--vt-text-muted));
}
.vt-icon-picker-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  border-radius: 12px;
  border: 1px solid var(--vt-border-subtle, var(--vt-border));
  background: var(--vt-bg-card);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 8px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  max-height: 340px;
}
.vt-icon-picker-search {
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--vt-border-subtle, var(--vt-border));
  background: var(--vt-bg-input, var(--vt-bg-card));
  color: var(--vt-text);
  font-size: 13px;
  outline: none;
  margin-bottom: 6px;
  transition: border 0.2s;
  box-sizing: border-box;
}
.vt-icon-picker-search:focus {
  border-color: var(--vt-primary);
}
.vt-icon-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  overflow-y: auto;
  max-height: 240px;
  padding: 2px;
}
.vt-icon-picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: none;
  color: var(--vt-text);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.vt-icon-picker-item:hover {
  background: var(--vt-bg-input, var(--vt-bg-elevated));
}
.vt-icon-picker-item--selected {
  border-color: var(--vt-primary);
  background: rgba(167, 139, 250, 0.12);
  color: var(--vt-primary);
}
.vt-icon-picker-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 20px;
  color: var(--vt-text-muted);
  font-size: 13px;
}

/* ---------- AddressPicker ---------- */
.vt-address-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.vt-address-picker-row {
  display: flex;
  gap: 8px;
}
.vt-address-picker-row .vt-input {
  max-width: 160px;
}
.vt-address-picker-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- MegaMenu ---------- */
.vt-mega-menu {
  position: relative;
  background: var(--vt-bg-card);
  border-bottom: 1px solid var(--vt-border);
}
.vt-mega-menu-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
.vt-mega-menu-category {
  position: relative;
}
.vt-mega-menu-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 18px;
  background: none;
  border: none;
  color: var(--vt-text);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.vt-mega-menu-trigger:hover, .vt-open > .vt-mega-menu-trigger {
  background: var(--vt-bg-elevated);
  color: var(--vt-primary);
}
.vt-mega-menu-icon {
  font-size: 1.1rem;
}
.vt-mega-menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 320px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  z-index: 100;
  padding: 16px;
}
.vt-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.vt-mega-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--vt-text);
  transition: background 0.15s;
}
.vt-mega-menu-item:hover {
  background: var(--vt-bg-elevated);
}
.vt-mega-menu-item-img {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
}
.vt-mega-menu-item-label {
  font-size: 0.82rem;
  text-align: center;
}

/* ---------- Command Palette ---------- */
@keyframes vt-cmd-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes vt-cmd-palette-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.vt-cmd-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  animation: vt-cmd-overlay-in 0.15s ease-out;
}

.vt-cmd-palette {
  width: 560px;
  max-width: 90vw;
  max-height: 420px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-lg);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vt-cmd-palette-in 0.2s ease-out;
}

.vt-cmd-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--vt-border);
}

.vt-cmd-search-icon {
  flex-shrink: 0;
  color: var(--vt-text-muted);
}

.vt-cmd-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--vt-text);
  font-size: 15px;
  font-family: var(--vt-font);
}
.vt-cmd-input::placeholder {
  color: var(--vt-text-muted);
}

.vt-cmd-kbd {
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 11px;
  font-family: var(--vt-font);
  color: var(--vt-text-muted);
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border);
  border-radius: 4px;
}

.vt-cmd-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.vt-cmd-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--vt-text-muted);
  font-size: 13px;
}

.vt-cmd-group-label {
  padding: 8px 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--vt-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.vt-cmd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--vt-radius-sm);
  cursor: pointer;
  transition: background 0.1s;
  color: var(--vt-text);
  font-size: 14px;
}
.vt-cmd-item:hover, .vt-cmd-item.vt-active {
  background: var(--vt-bg-elevated);
}

.vt-cmd-item--disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.vt-cmd-item-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vt-text-muted);
}

.vt-cmd-item-label {
  flex: 1;
}

.vt-cmd-item-shortcut {
  flex-shrink: 0;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--vt-text-muted);
  background: var(--vt-bg-elevated);
  border: 1px solid var(--vt-border);
  border-radius: 4px;
  font-family: var(--vt-font);
}

/* ---------- Drawer ---------- */
@keyframes vt-drawer-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes vt-drawer-slide-right {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes vt-drawer-slide-left {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes vt-drawer-slide-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes vt-drawer-slide-bottom {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.vt-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: vt-drawer-overlay-in 0.2s ease-out;
}

.vt-drawer-panel {
  position: fixed;
  z-index: 1001;
  background: var(--vt-bg-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.vt-drawer-panel--right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  border-left: 1px solid var(--vt-border);
  animation: vt-drawer-slide-right 0.25s ease-out;
}

.vt-drawer-panel--left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 400px;
  max-width: 90vw;
  border-right: 1px solid var(--vt-border);
  animation: vt-drawer-slide-left 0.25s ease-out;
}

.vt-drawer-panel--top {
  top: 0;
  left: 0;
  right: 0;
  height: 320px;
  max-height: 80vh;
  border-bottom: 1px solid var(--vt-border);
  animation: vt-drawer-slide-top 0.25s ease-out;
}

.vt-drawer-panel--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 320px;
  max-height: 80vh;
  border-top: 1px solid var(--vt-border);
  animation: vt-drawer-slide-bottom 0.25s ease-out;
}

.vt-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--vt-border);
}

.vt-drawer-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--vt-text);
}

.vt-drawer-close {
  width: 32px;
  height: 32px;
  border-radius: var(--vt-radius-sm);
  border: none;
  background: transparent;
  color: var(--vt-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background 0.2s, color 0.2s;
}
.vt-drawer-close:hover {
  background: var(--vt-bg-elevated);
  color: var(--vt-text);
}

.vt-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

/* ---------- Spinner ---------- */
@keyframes vt-spin {
  to {
    transform: rotate(360deg);
  }
}
.vt-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: vt-spin 0.75s linear infinite;
}
.vt-spinner svg {
  width: 100%;
  height: 100%;
}

.vt-spinner--sm {
  width: 16px;
  height: 16px;
}

.vt-spinner--md {
  width: 24px;
  height: 24px;
}

.vt-spinner--lg {
  width: 40px;
  height: 40px;
}

.vt-spinner--primary {
  color: var(--vt-primary);
}

.vt-spinner--white {
  color: #ffffff;
}
.vt-spinner--white .vt-spinner-track {
  stroke: rgba(255, 255, 255, 0.2);
}

.vt-spinner-track {
  stroke: var(--vt-border);
}

.vt-spinner-arc {
  stroke: currentColor;
}

.vt-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;
}

/* ---------- ProgressBar ---------- */
@keyframes vt-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(250%);
  }
}
.vt-progress {
  width: 100%;
  border-radius: var(--vt-radius-sm);
  background: var(--vt-border);
  overflow: hidden;
  position: relative;
}

.vt-progress--sm {
  height: 4px;
}

.vt-progress--md {
  height: 8px;
}

.vt-progress--lg {
  height: 12px;
  border-radius: var(--vt-radius-md);
}

.vt-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--vt-primary);
  transition: width 0.3s ease;
}

.vt-progress--indeterminate .vt-progress-fill {
  width: 40%;
  animation: vt-progress-indeterminate 1.2s ease-in-out infinite;
}

/* ---------- Popover ---------- */
@keyframes vt-popover-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.vt-popover {
  position: relative;
  display: inline-block;
}

.vt-popover-panel {
  position: absolute;
  z-index: 50;
  min-width: 200px;
  padding: 12px;
  background: var(--vt-bg-card);
  border: 1px solid var(--vt-border);
  border-radius: var(--vt-radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  animation: vt-popover-in 0.15s ease-out;
}

.vt-popover-panel--bottom {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.vt-popover-panel--top {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}

.vt-popover-panel--left {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

.vt-popover-panel--right {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* ---------- Additional Missing Classes ---------- */
.vt-select-native {
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--vt-border);
  background: var(--vt-bg-input);
  color: var(--vt-text);
  font-size: 14px;
  font-family: var(--vt-font);
  appearance: none;
  cursor: pointer;
}

.vt-text-muted {
  color: var(--vt-text-muted);
}

.vt-range-slider {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vt-range-wrapper {
  position: relative;
}

.vt-range-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--vt-text);
  text-align: center;
}

.vt-range-dual-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--vt-border);
}

.vt-range-dual-fill {
  position: absolute;
  height: 100%;
  border-radius: 3px;
  background: var(--vt-primary);
}

.vt-range-dual-input {
  position: absolute;
  width: 100%;
  top: -6px;
  height: 18px;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.vt-range-dual-input::-webkit-slider-thumb {
  pointer-events: all;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vt-primary);
  border: 2px solid var(--vt-bg-card);
  cursor: pointer;
  -webkit-appearance: none;
}

.vt-price-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vt-price-display--lg {
  font-size: 1.5rem;
}

.vt-price-label {
  font-size: 13px;
  color: var(--vt-text-muted);
}

.vt-filter-chevron {
  transition: transform 0.2s;
  color: var(--vt-text-muted);
}
.vt-filter-chevron.vt-open {
  transform: rotate(180deg);
}

.vt-login-pwd {
  position: relative;
}

.vt-tree-item--child {
  padding-left: 24px;
}

.vt-tree-folder {
  cursor: pointer;
  font-weight: 600;
}

/* ===== Wiki Content Typography ===== */
.wiki-content { line-height: 1.7; color: var(--vt-text); font-size: 15px; }
.wiki-content h1 { font-size: 26px; font-weight: 700; margin: 32px 0 16px; color: var(--vt-text); }
.wiki-content h2 { font-size: 21px; font-weight: 600; margin: 28px 0 12px; color: var(--vt-text); border-bottom: 1px solid var(--vt-border); padding-bottom: 8px; }
.wiki-content h3 { font-size: 17px; font-weight: 600; margin: 24px 0 8px; color: var(--vt-text); }
.wiki-content p { margin: 0 0 12px; }
.wiki-content ul, .wiki-content ol { margin: 0 0 12px; padding-left: 24px; }
.wiki-content li { margin-bottom: 4px; }
.wiki-content blockquote { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--vt-primary); background: var(--vt-bg-hover); border-radius: 0 6px 6px 0; color: var(--vt-text-secondary); }
.wiki-content pre { margin: 16px 0; padding: 16px; background: var(--vt-bg); border: 1px solid var(--vt-border); border-radius: 8px; overflow-x: auto; }
.wiki-content code { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 13px; }
.wiki-content :not(pre) > code { background: var(--vt-bg-hover); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.wiki-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }
.wiki-content a { color: var(--vt-primary); text-decoration: none; }
.wiki-content a:hover { text-decoration: underline; }
.wiki-content table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.wiki-content th, .wiki-content td { padding: 8px 12px; border: 1px solid var(--vt-border); text-align: left; font-size: 13px; }
.wiki-content th { background: var(--vt-bg); font-weight: 600; }
.wiki-content hr { border: none; border-top: 1px solid var(--vt-border); margin: 24px 0; }

/*# sourceMappingURL=vt.css.map */