/* ==========================================================================
   VSI — Vendez Seul Immo — Design System Premium v2
   Plus Jakarta Sans + Inter · Mobile-first · Sidebar layout
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&display=swap');

/* ---------- DESIGN TOKENS ---------- */
:root {
  --vsi-navy: #162E4D;
  --vsi-navy-mid: #1E3F6B;
  --vsi-navy-lt: #EEF2F8;
  --vsi-steel: #7BA0C4;
  --vsi-orange: #F46E3C;
  --vsi-orange-dk: #D4572A;
  --vsi-orange-lt: #FFF0EB;
  --vsi-orange-dim: rgba(244,110,60,0.12);
  --vsi-bg: #F4F7FB;
  --vsi-surface: #FFFFFF;
  --vsi-border: rgba(22,46,77,0.08);
  --vsi-border-md: rgba(22,46,77,0.12);
  --vsi-text: #0D1B2A;
  --vsi-text-2: #2D3F55;
  --vsi-muted: #64748B;
  --vsi-muted-lt: #94A3B8;
  --vsi-success: #10B981;
  --vsi-success-lt: #ECFDF5;
  --vsi-danger: #EF4444;
  --vsi-danger-lt: #FEF2F2;
  --vsi-warning: #F59E0B;
  --vsi-warning-lt: #FFFBEB;
  --shadow-sm: 0 1px 3px rgba(22,46,77,.06), 0 1px 2px rgba(22,46,77,.04);
  --shadow-md: 0 4px 16px rgba(22,46,77,.08), 0 2px 6px rgba(22,46,77,.04);
  --shadow-lg: 0 12px 40px rgba(22,46,77,.12), 0 4px 12px rgba(22,46,77,.06);
  --shadow-xl: 0 24px 64px rgba(22,46,77,.16), 0 8px 20px rgba(22,46,77,.08);
  --shadow-org: 0 8px 24px rgba(244,110,60,.28);
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 32px; --r-full: 9999px;
  --spring: cubic-bezier(0.34,1.56,0.64,1);
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --ease-cb: cubic-bezier(0.25,0.1,0.25,1);
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
}

/* ---------- RESET ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;font-size:15px;font-weight:400;color:var(--vsi-text);background:var(--vsi-bg);line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100dvh}
h1,h2,h3,h4,h5,h6{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button{font-family:'Inter',system-ui,sans-serif;cursor:pointer}
img,svg{display:block;max-width:100%}
input,select,textarea{font-family:'Inter',system-ui,sans-serif}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(22,46,77,.14);border-radius:9999px}
::selection{background:rgba(244,110,60,.20)}

/* ---------- KEYFRAMES ---------- */
@keyframes vsiUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes pulseBadge{0%,100%{box-shadow:0 0 0 0 rgba(244,110,60,0.4)}50%{box-shadow:0 0 0 6px rgba(244,110,60,0)}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(244,110,60,.40)}50%{box-shadow:0 0 0 7px rgba(244,110,60,0)}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes toastIn{from{transform:translateY(16px) scale(0.96);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{from{opacity:1}to{transform:translateY(8px);opacity:0}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes slideDown{from{transform:translateY(-10px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes confettiFall{from{top:-10px;transform:rotate(0deg);opacity:1}to{top:110vh;transform:rotate(720deg);opacity:.3}}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0.5)}50%{box-shadow:0 0 0 5px rgba(245,158,11,0)}}
@keyframes slideDownBanner{from{transform:translateY(-100%)}to{transform:translateY(0)}}
@keyframes toastProgress{from{width:100%}to{width:0}}
@keyframes ripple{to{transform:scale(4);opacity:0}}
@keyframes blobDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(40px,30px) scale(1.08)}}
@keyframes shake{0%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}
@keyframes bounce{0%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.94)}100%{transform:scale(1)}}

/* ---------- VSI UP ANIMATION ---------- */
.vsi-up{opacity:0;animation:vsiUp 550ms var(--ease-out) forwards}
.vsi-up.d1{animation-delay:55ms}.vsi-up.d2{animation-delay:110ms}.vsi-up.d3{animation-delay:165ms}
.vsi-up.d4{animation-delay:220ms}.vsi-up.d5{animation-delay:275ms}.vsi-up.d6{animation-delay:330ms}

/* ========================================================================
   SIDEBAR — Desktop fixed left
   ======================================================================== */
.vsi-sidebar{
  display:none;flex-direction:column;position:fixed;left:0;top:0;
  width:var(--sidebar-w-collapsed);height:100dvh;
  background:linear-gradient(180deg,var(--vsi-navy) 0%,var(--vsi-navy-mid) 100%);
  z-index:400;overflow:hidden;transition:width 300ms var(--ease-out);
}
.vsi-sidebar-logo{
  display:flex;align-items:center;gap:12px;height:72px;padding:0 20px;
  flex-shrink:0;border-bottom:1px solid rgba(255,255,255,0.08);overflow:hidden;
}
.vsi-sidebar-logo img{width:36px;height:36px;object-fit:contain;flex-shrink:0}
.vsi-sidebar-logo-text{font-family:'Plus Jakarta Sans',sans-serif;font-size:15px;font-weight:800;color:#fff;white-space:nowrap;opacity:0;transition:opacity 250ms var(--ease-out)}
.vsi-sidebar-nav{flex:1;display:flex;flex-direction:column;padding:16px 0;gap:2px;overflow-y:auto;overflow-x:hidden}
.vsi-sidebar-item{
  display:flex;align-items:center;gap:14px;padding:12px 24px;
  color:rgba(255,255,255,0.55);text-decoration:none;border:none;background:transparent;
  transition:color 200ms,background 200ms;font-size:14px;font-weight:600;
  white-space:nowrap;position:relative;font-family:'Inter',sans-serif;
}
.vsi-sidebar-item svg{width:22px;height:22px;flex-shrink:0}
.vsi-sidebar-item:hover{color:rgba(255,255,255,0.80);background:rgba(255,255,255,0.06)}
.vsi-sidebar-item.active{color:#fff;background:rgba(255,255,255,0.12)}
.vsi-sidebar-item.active::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:24px;background:var(--vsi-orange);border-radius:0 3px 3px 0}
.vsi-sidebar-label{opacity:0;transition:opacity 250ms var(--ease-out);pointer-events:none}
.vsi-sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,0.08)}
.vsi-sidebar-user{display:flex;align-items:center;gap:10px;overflow:hidden}
.vsi-sidebar-avatar{width:36px;height:36px;border-radius:var(--r-full);background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0}
.vsi-sidebar-username{font-size:13px;font-weight:700;color:rgba(255,255,255,.70);white-space:nowrap;opacity:0;transition:opacity 250ms}
.btn-sidebar-logout{background:rgba(239,68,68,.20);color:#FCA5A5;border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;width:100%;font-family:'Inter',sans-serif;transition:background 200ms;margin-top:8px}
.btn-sidebar-logout:hover{background:var(--vsi-danger);color:#fff}

.vsi-main-content{min-height:100dvh;transition:margin-left 300ms var(--ease-out)}

@media(min-width:768px){
  .vsi-sidebar{display:flex}
  .vsi-main-content{margin-left:var(--sidebar-w-collapsed)}
  .bottom-nav{display:none !important}
}
@media(min-width:1024px){
  .vsi-sidebar{width:var(--sidebar-w)}
  .vsi-sidebar-label,.vsi-sidebar-logo-text,.vsi-sidebar-username{opacity:1;pointer-events:auto}
  .vsi-main-content{margin-left:var(--sidebar-w)}
}

/* ========================================================================
   BOTTOM NAV — Mobile
   ======================================================================== */
.bottom-nav{
  position:fixed;bottom:0;left:0;width:100%;height:68px;
  background:rgba(255,255,255,0.92);backdrop-filter:blur(20px) saturate(1.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.8);
  border-top:1px solid rgba(22,46,77,0.08);display:flex;align-items:stretch;
  padding-bottom:env(safe-area-inset-bottom);z-index:500;
}
.nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--vsi-muted);text-decoration:none;border:none;background:transparent;
  cursor:pointer;transition:color 200ms;font-size:10px;font-weight:600;gap:4px;
  position:relative;font-family:'Inter',sans-serif;
}
.nav-item svg{width:22px;height:22px;transition:transform 200ms var(--spring)}
.nav-item:active svg{transform:scale(0.88)}
.nav-item.active{color:var(--vsi-orange)}
.nav-item.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:var(--vsi-orange);border-radius:0 0 3px 3px}

/* ========================================================================
   CARDS — 3-level elevation
   ======================================================================== */
.vsi-card{
  background:var(--vsi-surface);border-radius:var(--r-lg);
  border:1px solid var(--vsi-border);box-shadow:var(--shadow-sm);
  transition:transform 300ms var(--ease-cb),box-shadow 300ms var(--ease-cb);
}
.vsi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.vsi-card-elevated{background:var(--vsi-surface);border-radius:var(--r-lg);box-shadow:var(--shadow-md);border:none}
.vsi-card-elevated:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.vsi-card-hero{
  background:linear-gradient(135deg,var(--vsi-navy) 0%,var(--vsi-navy-mid) 100%);
  border-radius:var(--r-xl);box-shadow:var(--shadow-lg),0 0 0 1px rgba(255,255,255,.08) inset;
  position:relative;overflow:hidden;color:#fff;border:none;
}
.vsi-card-hero::before{content:'';position:absolute;top:-80px;right:-80px;width:280px;height:280px;border-radius:var(--r-full);background:var(--vsi-orange);opacity:.10;pointer-events:none}
.vsi-card-hero::after{content:'';position:absolute;bottom:-60px;left:40%;width:200px;height:200px;border-radius:var(--r-full);background:var(--vsi-steel);opacity:.08;pointer-events:none}

/* ========================================================================
   BUTTONS
   ======================================================================== */
.vsi-btn{
  background:linear-gradient(135deg,var(--vsi-orange) 0%,var(--vsi-orange-dk) 100%);
  color:#fff;border-radius:var(--r-md);font-weight:700;box-shadow:var(--shadow-org);
  border:none;padding:14px 24px;min-height:52px;font-size:15px;
  transition:transform 200ms var(--spring),box-shadow 200ms;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  letter-spacing:-0.01em;position:relative;overflow:hidden;
}
.vsi-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 12px 32px rgba(244,110,60,.36)}
.vsi-btn:active{transform:scale(0.97)}
.vsi-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.vsi-btn-secondary{
  background:var(--vsi-surface);color:var(--vsi-navy);border:1.5px solid var(--vsi-border-md);
  box-shadow:var(--shadow-sm);border-radius:var(--r-md);font-weight:700;
  padding:14px 24px;min-height:52px;font-size:15px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;
  transition:transform 200ms var(--spring),box-shadow 200ms;
}
.vsi-btn-secondary:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.vsi-btn-secondary:active{transform:scale(0.97)}
.vsi-btn-ghost{background:transparent;color:var(--vsi-navy);border:none;padding:10px 16px;font-size:14px;font-weight:700;cursor:pointer;border-radius:var(--r-sm);transition:background 200ms}
.vsi-btn-ghost:hover{background:rgba(22,46,77,.06)}

/* ========================================================================
   FORM INPUTS
   ======================================================================== */
.vsi-input{
  width:100%;border:2px solid rgba(22,46,77,0.10);border-radius:var(--r-md);
  padding:14px 16px;font-size:15px;font-weight:500;color:var(--vsi-text);
  background:var(--vsi-bg);outline:none;transition:border-color 180ms,box-shadow 180ms;min-height:52px;
}
.vsi-input:focus{border-color:var(--vsi-orange);box-shadow:0 0 0 4px rgba(244,110,60,.12)}
.vsi-input::placeholder{color:var(--vsi-muted-lt);font-weight:400}
.vsi-label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--vsi-muted);margin-bottom:6px;display:block}
.vsi-value{font-family:'Plus Jakarta Sans',sans-serif;font-size:32px;font-weight:900;color:var(--vsi-navy);line-height:1;letter-spacing:-0.03em}
.vsi-value.orange{color:var(--vsi-orange)}.vsi-value.white{color:#fff}
.form-group{margin-bottom:20px}
.form-group label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--vsi-muted);margin-bottom:6px;display:block}
.form-group input,.form-group select,.form-group textarea{
  width:100%;border:2px solid rgba(22,46,77,0.10);border-radius:var(--r-md);
  padding:14px 16px;font-size:15px;font-weight:500;color:var(--vsi-text);
  background:var(--vsi-bg);outline:none;transition:border-color 180ms,box-shadow 180ms;min-height:52px;
}
.form-group select{cursor:pointer;appearance:none}
.form-group textarea{min-height:auto;resize:vertical;line-height:1.6}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--vsi-orange);box-shadow:0 0 0 4px rgba(244,110,60,.12)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--vsi-muted-lt);font-weight:400}

/* ========================================================================
   BADGES
   ======================================================================== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--r-full);font-size:12px;font-weight:700}
.badge-success{background:var(--vsi-success-lt);color:var(--vsi-success)}
.badge-danger{background:var(--vsi-danger-lt);color:var(--vsi-danger)}
.badge-orange{background:var(--vsi-orange-lt);color:var(--vsi-orange)}
.badge-navy{background:rgba(22,46,77,0.08);color:var(--vsi-navy)}
.badge-warning{background:var(--vsi-warning-lt);color:var(--vsi-warning)}
.badge-new{background:var(--vsi-orange);color:#fff;animation:pulseBadge 2.4s ease-in-out infinite}

/* ========================================================================
   SKELETON / LOADING
   ======================================================================== */
.skeleton{
  background:linear-gradient(90deg,rgba(22,46,77,0.04) 25%,rgba(22,46,77,0.08) 50%,rgba(22,46,77,0.04) 75%);
  background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:var(--r-sm);
}
.skeleton-text{height:14px;border-radius:var(--r-full);margin-bottom:8px}
.skeleton-text.lg{height:22px}.skeleton-text.sm{height:10px}
.skeleton-circle{border-radius:var(--r-full)}
.skeleton-block{border-radius:var(--r-md)}

/* ========================================================================
   TOAST — with icon + progress bar
   ======================================================================== */
.toast-container{position:fixed;bottom:80px;right:16px;left:16px;z-index:9999;display:flex;flex-direction:column;gap:10px}
@media(min-width:768px){.toast-container{bottom:28px;left:auto;right:28px;width:380px}}
.toast{
  background:rgba(13,27,42,0.95);backdrop-filter:blur(16px);color:#fff;
  border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:14px;font-weight:600;
  overflow:hidden;cursor:pointer;
}
.toast-body{display:flex;align-items:center;gap:12px;padding:14px 18px}
.toast-icon{flex-shrink:0}
.toast-message{flex:1}
.toast-progress{height:3px;background:rgba(255,255,255,.15)}
.toast-progress-bar{height:100%;background:rgba(255,255,255,.5);border-radius:0 0 var(--r-md) var(--r-md);animation:toastProgress linear forwards}
.toast--success{background:rgba(16,185,129,0.95)}
.toast--success .toast-progress-bar{background:rgba(255,255,255,.4)}
.toast--error{background:rgba(239,68,68,0.95)}
.toast--info{background:rgba(13,27,42,0.95)}
.toast--warning{background:rgba(245,158,11,0.95)}
.toast--visible{animation:toastIn 260ms var(--ease-out)}
.toast--out{animation:toastOut 200ms var(--ease-cb) forwards}
.toast-enter{animation:toastIn 260ms var(--ease-out)}
.toast-exit{animation:toastOut 200ms var(--ease-cb) forwards}

/* ========================================================================
   NETWORK DOT
   ======================================================================== */
.network-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;transition:background 300ms}
.network-dot--online{background:var(--vsi-success)}
.network-dot--offline{background:var(--vsi-danger)}
.network-dot--loading{background:var(--vsi-warning);animation:pulse-dot 1s ease-in-out infinite}

/* ========================================================================
   OFFLINE BANNER
   ======================================================================== */
#offline-banner{
  display:none;position:fixed;top:0;left:0;right:0;z-index:9999;
  background:#F59E0B;color:#fff;padding:10px 20px;font-size:13px;font-weight:700;
  align-items:center;justify-content:center;gap:8px;
  animation:slideDownBanner 250ms var(--ease-out);text-align:center;
}

/* ========================================================================
   EMPTY STATE
   ======================================================================== */
.empty-state{text-align:center;padding:48px 24px;animation:fadeInUp 400ms var(--ease-out)}
.empty-state__icon{width:72px;height:72px;background:var(--vsi-orange-lt);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.empty-state__icon svg{color:var(--vsi-orange)}
.empty-state__title,.empty-state-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:700;color:var(--vsi-navy);margin:0 0 8px}
.empty-state__text,.empty-state-desc{font-size:14px;color:var(--vsi-muted);max-width:280px;margin:0 auto 20px;line-height:1.5}
.empty-state__btn{display:inline-flex;align-items:center;gap:6px;background:var(--vsi-orange);color:#fff;border:none;border-radius:var(--r-full);padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;transition:background 200ms,transform 150ms}
.empty-state__btn:hover{background:var(--vsi-orange-dk);transform:translateY(-1px)}
.empty-state-icon{width:72px;height:72px;margin:0 auto 20px;color:var(--vsi-muted-lt);opacity:.5}

/* ========================================================================
   PASSWORD STRENGTH
   ======================================================================== */
.pwd-strength-bar{height:4px;border-radius:var(--r-full);background:var(--vsi-border);margin-top:8px;overflow:hidden}
.pwd-strength-bar__fill{height:100%;border-radius:var(--r-full);transition:width 300ms,background 300ms}
.pwd-strength-bar__fill.weak{width:33%;background:var(--vsi-danger)}
.pwd-strength-bar__fill.medium{width:66%;background:var(--vsi-warning)}
.pwd-strength-bar__fill.strong{width:100%;background:var(--vsi-success)}
.pwd-strength-label{font-size:11px;font-weight:600;margin-top:4px}
.pwd-strength-label.weak{color:var(--vsi-danger)}
.pwd-strength-label.medium{color:var(--vsi-warning)}
.pwd-strength-label.strong{color:var(--vsi-success)}

/* ========================================================================
   BOTTOM SHEET & OVERLAY
   ======================================================================== */
.confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.40);backdrop-filter:blur(4px);z-index:9000;display:flex;align-items:flex-end;animation:overlayIn 200ms}
.confirm-sheet{background:#fff;border-radius:28px 28px 0 0;padding:12px 24px 32px;width:100%;box-shadow:0 -8px 40px rgba(0,0,0,0.12);animation:sheetUp 320ms var(--ease-out)}
.sheet-handle{width:40px;height:4px;background:rgba(0,0,0,0.12);border-radius:var(--r-full);margin:0 auto 20px}

/* ========================================================================
   FAB
   ======================================================================== */
.fab{
  position:fixed;bottom:88px;right:20px;width:58px;height:58px;border-radius:var(--r-full);
  background:linear-gradient(135deg,var(--vsi-orange),var(--vsi-orange-dk));
  box-shadow:var(--shadow-org);display:flex;align-items:center;justify-content:center;
  color:#fff;border:none;cursor:pointer;transition:transform 220ms var(--spring),box-shadow 220ms;z-index:100;
}
.fab:hover{box-shadow:0 12px 32px rgba(244,110,60,.40);transform:translateY(-2px)}
.fab:active{transform:scale(0.90)}
@media(min-width:768px){.fab{bottom:28px;right:28px}}

/* ========================================================================
   GRIDS
   ======================================================================== */
.grid-2{display:grid;gap:14px;grid-template-columns:1fr}
.grid-3{display:grid;gap:14px;grid-template-columns:1fr}
.kpi-grid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.grid-3{grid-template-columns:repeat(2,1fr)}.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}}

/* ========================================================================
   PAGE HEADER & TYPOGRAPHY
   ======================================================================== */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}
.page-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;font-weight:800;color:var(--vsi-text);letter-spacing:-0.03em;margin:0}
.page-subtitle{font-size:14px;color:var(--vsi-muted);margin:4px 0 0}
.section-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:16px;font-weight:800;color:var(--vsi-text);letter-spacing:-0.02em;margin-bottom:14px}

/* ========================================================================
   LIST ITEMS
   ======================================================================== */
.list-item{
  background:var(--vsi-surface);border:1px solid var(--vsi-border);border-radius:var(--r-lg);
  padding:16px 18px;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:12px;
  cursor:pointer;transition:box-shadow 200ms,transform 150ms var(--spring);text-decoration:none;color:inherit;
}
.list-item:active{transform:scale(0.985);background:var(--vsi-bg)}
@media(hover:hover){.list-item:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}}

/* ========================================================================
   AVATAR
   ======================================================================== */
.avatar{width:48px;height:48px;border-radius:var(--r-full);background:linear-gradient(135deg,var(--vsi-navy),var(--vsi-navy-mid));color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.avatar.lg{width:68px;height:68px;font-size:22px}
.avatar.sm{width:36px;height:36px;font-size:12px}
.avatar.orange{background:linear-gradient(135deg,var(--vsi-orange),var(--vsi-orange-dk))}
.avatar.success{background:linear-gradient(135deg,var(--vsi-success),#059669)}

/* ========================================================================
   TIMELINE
   ======================================================================== */
.timeline-vente{position:relative;padding-left:36px}
.timeline-vente::before{content:'';position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--vsi-border-md)}
.timeline-step{position:relative;padding-bottom:28px;padding-left:16px}
.timeline-dot{position:absolute;left:-42px;top:1px;width:24px;height:24px;border-radius:var(--r-full);border:2px solid var(--vsi-border-md);background:var(--vsi-surface);display:flex;align-items:center;justify-content:center;z-index:1;transition:all 250ms}
.timeline-dot.done{background:var(--vsi-success);border-color:var(--vsi-success);box-shadow:0 2px 8px rgba(16,185,129,.24)}
.timeline-dot.current{background:var(--vsi-orange);border-color:var(--vsi-orange);animation:pulseRing 2.4s ease-in-out infinite}
.timeline-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:700;color:var(--vsi-text);margin-bottom:2px}
.timeline-desc{font-size:13px;color:var(--vsi-muted);line-height:1.5}
.timeline-date{font-size:11px;color:var(--vsi-muted-lt);margin-top:4px;font-weight:600}

/* ========================================================================
   STEPPER
   ======================================================================== */
.stepper{display:flex;align-items:center;margin-bottom:32px}
.step-item{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.step-circle{width:36px;height:36px;border-radius:var(--r-full);border:2px solid var(--vsi-border-md);background:var(--vsi-surface);color:var(--vsi-muted);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;position:relative;z-index:1;transition:all 250ms}
.step-circle.active{background:var(--vsi-orange);border-color:var(--vsi-orange);color:#fff;box-shadow:0 4px 14px rgba(244,110,60,.30)}
.step-circle.done{background:var(--vsi-success);border-color:var(--vsi-success);color:#fff}
.step-connector{position:absolute;top:18px;left:50%;width:100%;height:2px;background:var(--vsi-border-md);z-index:0}
.step-connector.done{background:var(--vsi-success)}
.step-label{font-size:11px;margin-top:6px;color:var(--vsi-muted);font-weight:600;text-align:center}
.step-label.active{color:var(--vsi-orange)}
.step-item:last-child .step-connector{display:none}

/* ========================================================================
   SPINNER & LOADING STATES
   ======================================================================== */
.spin{animation:spin 600ms linear infinite}
.page-enter-hidden{opacity:0;transform:translateY(16px)}
.slide-down{animation:slideDown 260ms var(--ease-out)}
.pop{animation:pop 320ms var(--spring)}
.bounce{animation:bounce .22s ease}

/* ========================================================================
   COUNTER WIDGET
   ======================================================================== */
.counter-wrapper{display:flex;align-items:center;gap:8px}
.counter-btn{width:40px;height:40px;border-radius:10px;background:rgba(22,46,77,.08);border:none;cursor:pointer;font-size:20px;font-weight:700;color:var(--vsi-navy);display:flex;align-items:center;justify-content:center;transition:background 150ms,transform 150ms var(--spring)}
.counter-btn:active{background:var(--vsi-navy);color:#fff;transform:scale(0.88)}
.counter-input{text-align:center;width:80px}

/* ========================================================================
   CONFETTI
   ======================================================================== */
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;animation:confettiFall var(--duration,2s) ease-in forwards}

/* ========================================================================
   MODAL
   ======================================================================== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.40);backdrop-filter:blur(4px);z-index:8000;display:flex;align-items:center;justify-content:center;padding:24px;animation:overlayIn 200ms}
.modal-card{background:#fff;border-radius:var(--r-xl);padding:28px;width:100%;max-width:440px;box-shadow:var(--shadow-xl);animation:pop 280ms var(--spring)}
.modal-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:18px;font-weight:800;color:var(--vsi-text);letter-spacing:-0.02em;margin-bottom:8px}
.modal-desc{font-size:14px;color:var(--vsi-muted);line-height:1.6;margin-bottom:24px}
.modal-actions{display:flex;flex-direction:column;gap:12px}

/* ========================================================================
   SEARCH BAR
   ======================================================================== */
.search-bar{position:relative}
.search-bar input{width:100%;background:var(--vsi-surface);border:1.5px solid var(--vsi-border-md);border-radius:var(--r-full);padding:12px 20px 12px 48px;font-size:15px;font-weight:500;color:var(--vsi-text);outline:none;transition:border-color 180ms,box-shadow 180ms;box-shadow:var(--shadow-sm)}
.search-bar input:focus{border-color:var(--vsi-orange);box-shadow:0 0 0 4px rgba(244,110,60,.10),var(--shadow-sm)}
.search-bar .search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--vsi-muted-lt);width:18px;height:18px;pointer-events:none}

/* ========================================================================
   TABS
   ======================================================================== */
.tabs{display:flex;gap:4px;background:rgba(22,46,77,0.06);border-radius:var(--r-md);padding:4px}
.tab-item{flex:1;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:700;color:var(--vsi-muted);border:none;background:transparent;cursor:pointer;transition:all 200ms;text-align:center}
.tab-item.active{background:var(--vsi-surface);color:var(--vsi-navy);box-shadow:var(--shadow-sm)}

/* ========================================================================
   PROGRESS BAR
   ======================================================================== */
.progress-bar{height:6px;background:rgba(22,46,77,0.08);border-radius:var(--r-full);overflow:hidden}
.progress-fill{height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--vsi-orange),var(--vsi-orange-dk));transition:width 600ms var(--ease-out)}
.progress-fill.success{background:linear-gradient(90deg,var(--vsi-success),#059669)}

/* ========================================================================
   TOGGLE / SWITCH
   ======================================================================== */
.toggle{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.toggle-track{width:48px;height:28px;border-radius:var(--r-full);background:rgba(22,46,77,0.14);position:relative;transition:background 200ms;flex-shrink:0}
.toggle-thumb{position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:var(--r-full);background:#fff;box-shadow:0 2px 6px rgba(0,0,0,0.16);transition:transform 200ms var(--spring)}
.toggle input:checked~.toggle-track{background:var(--vsi-orange)}
.toggle input:checked~.toggle-track .toggle-thumb{transform:translateX(20px)}
.toggle input{position:absolute;opacity:0;width:0;height:0}

/* ========================================================================
   ICON WRAPPERS
   ======================================================================== */
.icon-wrap{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.icon-wrap.orange{background:var(--vsi-orange-lt);color:var(--vsi-orange)}
.icon-wrap.navy{background:rgba(22,46,77,0.08);color:var(--vsi-navy)}
.icon-wrap.success{background:var(--vsi-success-lt);color:var(--vsi-success)}
.icon-wrap.danger{background:var(--vsi-danger-lt);color:var(--vsi-danger)}

/* ========================================================================
   SELECTABLE CARD
   ======================================================================== */
.selectable-card{background:var(--vsi-surface);border:2px solid var(--vsi-border-md);border-radius:var(--r-lg);padding:20px;cursor:pointer;transition:all 200ms}
.selectable-card.selected{border-color:var(--vsi-success);box-shadow:0 0 0 4px rgba(16,185,129,.12);transform:scale(1.02)}
.selectable-card.selected.danger{border-color:var(--vsi-danger);box-shadow:0 0 0 4px rgba(239,68,68,.12)}
.selectable-card.unselected{opacity:.40}

/* ========================================================================
   CONTENT AREA & LAYOUT HELPERS
   ======================================================================== */
.content-area{padding:20px 16px calc(80px + env(safe-area-inset-bottom)) 16px}
@media(min-width:768px){.content-area{padding:28px}}
@media(min-width:1024px){.content-area{padding:36px;max-width:1200px}}
.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}
.divider{height:1px;background:var(--vsi-border);margin:16px 0}

/* ========================================================================
   UTILITIES
   ======================================================================== */
.text-muted{color:var(--vsi-muted)}.text-orange{color:var(--vsi-orange)}.text-success{color:var(--vsi-success)}.text-danger{color:var(--vsi-danger)}.text-navy{color:var(--vsi-navy)}.text-white{color:#fff}
.fw-300{font-weight:300}.fw-400{font-weight:400}.fw-500{font-weight:500}.fw-600{font-weight:600}.fw-700{font-weight:700}.fw-800{font-weight:800}.fw-900{font-weight:900}
.mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-4{margin-bottom:4px}.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
.p-16{padding:16px}.p-20{padding:20px}.p-24{padding:24px}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.flex-1{flex:1}.flex-shrink-0{flex-shrink:0}
.w-full{width:100%}.h-full{height:100%}
.relative{position:relative}.overflow-hidden{overflow:hidden}
.rounded-full{border-radius:var(--r-full)}.rounded-md{border-radius:var(--r-md)}.rounded-lg{border-radius:var(--r-lg)}