:root {
  /* ---- Brand ---- */
  --vz-primary:            #37DBB5;
  --vz-primary-container:  #D7F8F0;
  --vz-primary-dark:       #12A184;
  --vz-on-primary:         #083A30;

  /* ---- Neutrals ---- */
  --vz-ink:         #3A3E42;
  --vz-ink-soft:    #5A5E62;
  --vz-muted:       #757575;
  --vz-muted-soft:  #898B8E;
  --vz-border:      #E6E7E7;
  --vz-surface-alt: #F5F5F5;
  --vz-surface-2:   #E7E7E7;
  --vz-surface:     #FFFFFF;
  --vz-background:  #FFFFFF;
  --vz-row-blue:    #F4FAFE;

  /* ---- App bar ---- */
  --vz-appbar:      #455A64;
  --vz-on-appbar:   #FFFFFF;

  /* ---- Status / semantic ---- */
  --vz-success:            #49A34D;
  --vz-success-container:  #B1D8B3;
  --vz-warning:            #F0CD51;
  --vz-error:              #D32F2F;
  --vz-error-container:    #F4A0A8;
  --vz-info:               #2196F3;
  --vz-info-container:     #D6E8FF;

  /* ---- Accent ---- */
  --vz-orange:             #CE5D0C;
  --vz-balance-grad:       linear-gradient(90deg, #FC9204 0%, #FFC525 100%);
  --vz-channel-pink:       #ED4C82;

  /* ---- Typography ---- */
  --vz-font-sans:  "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vz-fw-regular: 400;
  --vz-fw-medium:  500;
  --vz-fw-semibold:600;
  --vz-fw-bold:    700;

  --vz-fs-display: 40px;
  --vz-fs-h1:      24px;
  --vz-fs-h2:      20px;
  --vz-fs-body:    16px;
  --vz-fs-label:   14px;
  --vz-fs-caption: 13px;
  --vz-fs-micro:   11px;

  --vz-lh-tight:   1.2;
  --vz-lh-normal:  1.4;
  --vz-lh-relaxed: 1.6;

  /* ---- Spacing (4px base) ---- */
  --vz-space-1: 4px;
  --vz-space-2: 8px;
  --vz-space-3: 12px;
  --vz-space-4: 16px;
  --vz-space-5: 20px;
  --vz-space-6: 24px;
  --vz-space-8: 32px;
  --vz-space-10: 40px;
  --vz-space-12: 48px;

  /* ---- Radius ---- */
  --vz-radius-sm:   8px;
  --vz-radius-md:   12px;
  --vz-radius-lg:   16px;
  --vz-radius-xl:   20px;
  --vz-radius-full: 999px;

  /* ---- Elevation ---- */
  --vz-elev-card:    0 1px 3px rgba(16,24,32,0.08);
  --vz-elev-popover: 0 6px 20px rgba(16,24,32,0.14);
  --vz-elev-appbar:  0 2px 6px rgba(16,24,32,0.16);
}

:root {
  --vz-primary-hover:        #2fc9a6;
  --vz-on-success-container: #2b5c2d;
  --vz-on-warning:           #5b4a00;
  --vz-on-error-container:   #7a1f27;
  --vz-info-dark:            #1565C0;
  --vz-channel-airbnb:       #FF385C;
  --vz-channel-booking:      #003580;

  /* legacy aliases */
  --brand:      var(--vz-primary-dark);
  --brand-dark: var(--vz-primary-hover);
  --bg:         var(--vz-background);
  --card:       var(--vz-surface);
  --ink:        var(--vz-ink);
  --muted:      var(--vz-muted);
  --line:       var(--vz-border);
}

*{box-sizing:border-box}
body{font-family:var(--vz-font-sans);margin:0;background:var(--vz-background);color:var(--vz-ink);min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--vz-primary-dark);text-decoration:none}
svg.vz-ic{vertical-align:-0.22em;flex-shrink:0}
.wrap{padding:16px;max-width:1100px;margin:0 auto}

.card{background:var(--vz-surface);border:1px solid var(--vz-border);border-radius:var(--vz-radius-lg);box-shadow:var(--vz-elev-card);padding:16px;margin-bottom:12px}
.card h2{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--vz-muted-soft);margin:0 0 10px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.stat{text-align:center;padding:18px 8px}
.stat .ic{color:var(--vz-ink-soft);margin-bottom:4px}
.stat .num{font-size:1.6rem;font-weight:700}
.stat .cap{font-size:.8rem;color:var(--vz-muted)}

.badge{display:inline-block;padding:3px 10px;border-radius:var(--vz-radius-full);font-size:.72rem;font-weight:700;letter-spacing:.02em}
.badge.green{background:var(--vz-success-container);color:var(--vz-on-success-container)}
.badge.red{background:var(--vz-error-container);color:var(--vz-on-error-container)}
.badge.amber{background:var(--vz-warning);color:var(--vz-on-warning)}
.badge.blue{background:var(--vz-info-container);color:var(--vz-info-dark)}
.badge.gray{background:var(--vz-surface-2);color:var(--vz-ink-soft)}

table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--vz-border);vertical-align:top}
th{background:var(--vz-surface-alt);color:var(--vz-ink-soft);font-weight:600}
.tablewrap{overflow-x:auto}

label{display:block;margin:10px 0;font-size:.85rem;color:var(--vz-ink-soft)}
input,select,textarea{display:block;width:100%;padding:10px;margin-top:4px;border:1.5px solid var(--vz-border);border-radius:var(--vz-radius-sm);font-size:.95rem;font-family:inherit;background:var(--vz-surface);color:var(--vz-ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--vz-primary)}
textarea{min-height:72px;resize:vertical}

button,.btn{display:inline-block;padding:12px 20px;background:var(--vz-primary);color:var(--vz-on-primary);border:0;border-radius:var(--vz-radius-sm);font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;text-align:center}
button:hover,.btn:hover{background:var(--vz-primary-hover)}
.btn.ghost{background:var(--vz-surface);color:var(--vz-ink);border:1.5px solid var(--vz-border);border-radius:var(--vz-radius-md);padding:11px 18px}
.btn.ghost:hover{background:var(--vz-surface-alt)}
.btn.danger{background:var(--vz-error);color:#fff}

/* ---- App shell (dashboard) ---- */
body.vz-app main{padding-bottom:76px}
body.vz-app header.topbar{position:sticky;top:0;background:var(--vz-surface);border-bottom:1px solid var(--vz-border);padding:12px 16px;font-weight:600;font-size:1.05rem;z-index:10;display:flex;align-items:center;gap:8px}
body.vz-app nav.bottom{position:fixed;bottom:0;left:0;right:0;background:var(--vz-surface);border-top:1px solid var(--vz-border);display:flex;z-index:10;padding:4px 4px 8px}
body.vz-app nav.bottom .nav-item{flex:1;text-align:center;padding:4px 2px;color:var(--vz-muted-soft);font-size:.62rem;font-weight:500;display:flex;flex-direction:column;align-items:center;gap:2px}
body.vz-app nav.bottom .nav-item .icon{font-size:1.05rem;width:44px;height:28px;border-radius:var(--vz-radius-full);display:flex;align-items:center;justify-content:center}
body.vz-app nav.bottom .nav-item.active{color:var(--vz-primary-dark);font-weight:600}
body.vz-app nav.bottom .nav-item.active .icon{background:var(--vz-primary-container)}

/* ---- Standalone shells ---- */
body.vz-centered{display:flex;align-items:center;justify-content:center;background:var(--vz-surface-alt);padding:16px}
body.vz-page{background:var(--vz-surface-alt);padding:16px}
body.vz-page>main{max-width:var(--page-w,520px);margin:0 auto;background:var(--vz-surface);border:1px solid var(--vz-border);border-radius:var(--vz-radius-lg);box-shadow:var(--vz-elev-card);padding:20px}

@media (min-width:720px){
  body.vz-page{padding:40px 16px}
}
@media (min-width:900px){
  body.vz-app{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto 1fr}
  body.vz-app header.topbar{grid-column:1/-1}
  body.vz-app nav.bottom{position:sticky;top:49px;height:calc(100vh - 49px);flex-direction:column;border-top:0;border-right:1px solid var(--vz-border);padding:12px 8px;gap:4px;align-self:start}
  body.vz-app nav.bottom .nav-item{flex:0 0 auto;flex-direction:row;align-items:center;gap:10px;font-size:.9rem;padding:10px 12px;border-radius:var(--vz-radius-full);text-align:left}
  body.vz-app nav.bottom .nav-item .icon{width:auto;height:auto;font-size:1.15rem}
  body.vz-app nav.bottom .nav-item.active{background:var(--vz-primary-container)}
  body.vz-app nav.bottom .nav-item.active .icon{background:transparent}
  body.vz-app main{padding-bottom:16px}
  .grid.cols-2{grid-template-columns:1fr 1fr}
  .grid.cols-3{grid-template-columns:1fr 1fr 1fr}
  .grid.cols-4{grid-template-columns:repeat(4,1fr)}
}