:root {
    --vf-primary-deep: var(--vf-color-sidebar, #0B1F33);
    --vf-primary: var(--vf-color-primary, #2F6BFF);
    --vf-accent: var(--vf-color-teal, #0F8C8C);
  --vf-white: #FFFFFF;
    --vf-surface: var(--vf-color-canvas, #F4F6F8);
    --vf-graphite: var(--vf-color-ink, #182230);
    --vf-muted: var(--vf-color-muted, #66758A);
    --vf-success: var(--vf-color-success, #16805A);
    --vf-warning: var(--vf-color-warning, #B7791F);
    --vf-danger: var(--vf-color-danger, #C2414B);
    --vf-border: var(--vf-color-border, #DFE5EB);
    --vf-sidebar-width: var(--vf-sidebar-expanded-width, 252px);
 }

 * { font-family: var(--vf-font-family, 'Inter', system-ui, sans-serif); }
 html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
 input, button, select, textarea { font: inherit; }
 :where(time, td, dd) { font-variant-numeric: tabular-nums; }
 body { color: var(--vf-graphite); background: var(--vf-surface); font-size: var(--vf-font-body, 14px); line-height: var(--vf-line-height, 1.55); }

 .page-container { display:flex; min-height:100vh; background:var(--vf-surface); }
 .sidebar {
  width:var(--vf-sidebar-width);
  background:var(--vf-color-sidebar,#0B1F33);
  position:fixed; top:0; left:0; bottom:0; z-index:50;
  transition:transform .3s ease;
  border-right:1px solid rgba(255,255,255,.04);
 }
 .main-content { flex:1; margin-left:var(--vf-sidebar-width); min-height:100vh; background:var(--vf-surface); }

 .vf-sidebar-brand-wrap { padding:18px 16px 16px; border-bottom:1px solid rgba(255,255,255,.07); }
 .vf-sidebar-brand { display:flex; align-items:center; gap:10px; min-width:0; }
 .vf-sidebar-mark { width:42px; height:42px; object-fit:contain; flex:0 0 auto; }
 .vf-sidebar-brand-copy { min-width:0; }
 .vf-sidebar-wordmark { color:#FFFFFF; font-size:15px; font-weight:700; line-height:1.05; letter-spacing:-.035em; white-space:nowrap; }
 .vf-sidebar-wordmark span { color:#86A8FF; }
 .vf-sidebar-tagline { margin-top:4px; color:#C7D7FF; font-size:12px; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

 .vf-sidebar-account-wrap { padding:12px; border-top:1px solid rgba(255,255,255,.07); }
 .vf-sidebar-account { display:flex; align-items:center; gap:9px; padding:10px; border:1px solid rgba(255,255,255,.04); border-radius:12px; background:rgba(255,255,255,.05); }
 .vf-sidebar-avatar { width:32px; height:32px; border-radius:999px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#FFFFFF; background:var(--vf-color-primary); font-size:12px; font-weight:700; }
 .vf-sidebar-logout { padding:6px; border-radius:8px; color:#94A3B8; transition:all .2s ease; }
 .vf-sidebar-logout:hover { color:#FFFFFF; background:rgba(255,255,255,.08); }

 .nav-link {
  display:flex; align-items:center; gap:10px; padding:9px 11px;
  color:#A8B8CF; border-radius:8px; margin:1px 8px; transition:all .2s ease;
  font-size:12px; font-weight:500;
 }
 .nav-link:hover { background:rgba(255,255,255,.055); color:#FFFFFF; }
 .nav-link.active { background:var(--vf-primary); color:#FFFFFF; box-shadow:0 7px 18px rgba(47,107,255,.24); }
 .nav-link i { width:18px; height:18px; }
 .nav-link.nav-link-sub { font-size:12px; padding:5px 10px; margin:0; color:var(--vf-color-muted); }
 .nav-link.nav-link-sub.active { background:rgba(47,107,255,.14); color:#C7D7FF; box-shadow:none; }
 .nav-section {
  padding:3px 14px; margin-top:18px; margin-bottom:4px; font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:#52657E; transition:color .2s ease;
 }
 .nav-section.nav-section-active { color:#7DD3FC; }
 .nav-submenu { margin:2px 10px 4px; padding-left:10px; border-left:1px solid rgba(255,255,255,.07); }
 .custom-scrollbar::-webkit-scrollbar { width:4px; }
 .custom-scrollbar::-webkit-scrollbar-thumb { background:#334155; border-radius:2px; }
 .custom-scrollbar:hover::-webkit-scrollbar-thumb { background:#475569; }

 .vf-topbar { background:#FFFFFF; border-bottom:1px solid var(--vf-color-border); position:sticky; top:0; z-index:30; }
 .vf-topbar-inner { min-height:80px; padding:14px 24px; display:flex; align-items:center; gap:16px; }
 .vf-page-content { padding:24px; }

 .fl-settings-layout { display:flex; flex-direction:column; gap:1.5rem; }
 @media (min-width:768px) { .fl-settings-layout { flex-direction:row; } }
 .fl-settings-nav { width:100%; flex-shrink:0; }
 @media (min-width:768px) { .fl-settings-nav { width:256px; } }
 .fl-template-editor { display:flex; flex-direction:column; gap:1.5rem; }
 @media (min-width:1024px) { .fl-template-editor { flex-direction:row; } }

 .card {
  background:#FFFFFF; border-radius:14px;
  box-shadow:0 2px 8px rgba(15,23,42,.035);
  border:1px solid var(--vf-border);
 }
 .form-input, .form-select, .form-textarea {
  display:block; width:100%; padding:12px 16px; font-size:15px; color:var(--vf-graphite);
  background-color:#FFFFFF; border:1px solid var(--vf-color-border-strong); border-radius:9px; transition:all .2s ease; outline:none;
 }
 .form-input { line-height:1.5; }
 .form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--vf-primary); box-shadow:0 0 0 4px rgba(47,107,255,.10); }
 .form-input::placeholder { color:#94A3B8; }
 .form-select {
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2364748B' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position:right 12px center; background-repeat:no-repeat; background-size:20px; appearance:none; cursor:pointer;
 }
 .form-textarea { resize:vertical; min-height:100px; }
 .form-label { display:block; font-size:14px; font-weight:600; color:#334155; margin-bottom:8px; }

 .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 18px; font-size:13px; font-weight:600; border-radius:9px; transition:all .2s ease; cursor:pointer; border:none; }
 .btn-primary { background:var(--vf-primary); color:#FFFFFF; box-shadow:0 7px 18px rgba(47,107,255,.18); }
 .btn-primary:hover { background:var(--vf-color-primary-hover); box-shadow:0 9px 22px rgba(47,107,255,.22); }
 .btn-secondary { background:#EEF2F7; color:#475569; }
 .btn-secondary:hover { background:var(--vf-color-border); }
 .btn-success { background:var(--vf-success); color:#FFFFFF; box-shadow:0 4px 12px rgba(22,163,74,.20); }
 .btn-success:hover { background:#15803D; }
 .btn-danger { background:var(--vf-danger); color:#FFFFFF; }
 .btn-danger:hover { background:#B91C1C; }
 .btn-sm { padding:8px 14px; font-size:13px; }
 .badge { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; font-size:12px; font-weight:500; border-radius:999px; }

 .data-table { width:100%; border-collapse:separate; border-spacing:0; }
 .data-table th { padding:14px 16px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--vf-muted); background:#F8FAFC; text-align:left; border-bottom:1px solid var(--vf-border); }
 .data-table td { padding:16px; border-bottom:1px solid #F1F5F9; vertical-align:middle; }
 .data-table tbody tr { cursor:default; transition:all .15s ease; }
 .data-table tbody tr:hover { background:#F8FAFC; box-shadow:0 2px 8px rgba(15,23,42,.04); }
 .stat-card { padding:20px; }
 .stat-card:hover { box-shadow:0 4px 12px rgba(15,23,42,.08); }

 .sidebar-overlay { position:fixed; inset:0; background:rgba(15,23,42,.50); z-index:40; display:none; }
 .sidebar-overlay.show { display:block; }
 .toast-container { position:fixed; top:24px; right:24px; z-index:100; display:flex; flex-direction:column; gap:12px; pointer-events:none; }
 .toast { pointer-events:auto; min-width:300px; max-width:450px; background:#FFFFFF; border-radius:12px; box-shadow:0 10px 25px -5px rgba(15,23,42,.12),0 8px 10px -6px rgba(15,23,42,.08); border:1px solid var(--vf-border); padding:16px; display:flex; align-items:flex-start; gap:12px; transition:all .3s cubic-bezier(.4,0,.2,1); transform:translateX(120%); opacity:0; }
 .toast.show { transform:translateX(0); opacity:1; }
 .toast-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

 @media (max-width:1024px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .main-content { margin-left:0; }
  .vf-topbar-inner { min-height:72px; padding:12px 18px; }
  .vf-page-content { padding:18px; }
 }