*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --accent:#2c4bff;
  --accent-d:#1a39e8;
  --accent-l:rgba(44,75,255,.14);
  --accent-glow:rgba(44,75,255,.4);
  --black:#000;
  --white:#fff;
  --g50:#f8f8f8;
  --g100:#f0f0f0;
  --g200:#e4e4e4;
  --g300:#c8c8c8;
  --g400:#a0a0a0;
  --g500:#707070;
  --g700:#383838;
  --g900:#111;
  --text:#181818;
  --text-m:#6b6b6b;
  --border:#e8e8e8;
  --card:#fff;
  --sidebar-w:228px;
  --sidebar-bg:#0d0d0d;
  --header-h:58px;
  --r:12px;
  --r-sm:8px;
  --r-pill:100px;
  --fh:'Bricolage Grotesque',sans-serif;
  --fb:'Teachers',sans-serif;
  --tr:.18s ease;
  --sh:0 2px 12px rgba(0,0,0,.07);
  --sh-md:0 4px 24px rgba(0,0,0,.11);
  --sh-lg:0 12px 48px rgba(0,0,0,.16);
}
html,body{height:100%;font-family:var(--fb);font-size:15px;color:var(--text);background:#fff;overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{cursor:pointer;border:none;background:none;font-family:var(--fb)}
input,select,textarea{font-family:var(--fb)}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}
/* SCROLLBAR */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:4px}

/* ─── SCREEN LAYER ─── */
#app{position:fixed;inset:0;overflow:hidden}
.screen{position:absolute;inset:0;overflow:auto;animation:screenIn .32s cubic-bezier(.4,0,.2,1)}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.screen-slide-up{animation:slideUp .28s cubic-bezier(.4,0,.2,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ─── AUTH SCREEN ─── */
.auth-screen{background:#000;display:flex;flex-direction:column;min-height:100%;overflow:hidden}
.auth-topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:20px 32px}
.auth-topbar-logo{display:flex;align-items:center;gap:10px}
.auth-topbar-logo-text{font-family:var(--fh);font-size:22px;font-weight:600;color:#fff;letter-spacing:-.2px}
.auth-topbar-tagline{font-size:14px;color:rgba(255,255,255,.45)}

/* Orbit ellipses — match the tilted oval style in the screenshot */
.orbits{position:fixed;inset:0;pointer-events:none;display:flex;align-items:center;justify-content:center}
.orbit{position:absolute;border-radius:50%;border:1.5px solid rgba(44,75,255,.35)}
.orbit:nth-child(1){width:520px;height:300px;transform:rotate(-20deg);animation:spin 22s linear infinite}
.orbit:nth-child(2){width:750px;height:440px;transform:rotate(-25deg);border-color:rgba(44,75,255,.2);animation:spin 35s linear infinite reverse}
.orbit:nth-child(3){width:1000px;height:580px;transform:rotate(-18deg);border-color:rgba(44,75,255,.1);animation:spin 50s linear infinite}
@keyframes spin{from{transform:rotate(var(--r,0deg)) rotate(0deg)} to{transform:rotate(var(--r,0deg)) rotate(360deg)}}

/* Override keyframes to keep base tilt */
.orbit:nth-child(1){--r:-20deg;animation:orbitSpin1 22s linear infinite}
.orbit:nth-child(2){--r:-25deg;animation:orbitSpin2 35s linear infinite reverse}
.orbit:nth-child(3){--r:-18deg;animation:orbitSpin3 50s linear infinite}
@keyframes orbitSpin1{from{transform:rotate(-20deg) rotateX(60deg) rotate(0deg)} to{transform:rotate(-20deg) rotateX(60deg) rotate(360deg)}}
@keyframes orbitSpin2{from{transform:rotate(-25deg) rotateX(55deg) rotate(0deg)} to{transform:rotate(-25deg) rotateX(55deg) rotate(360deg)}}
@keyframes orbitSpin3{from{transform:rotate(-18deg) rotateX(58deg) rotate(0deg)} to{transform:rotate(-18deg) rotateX(58deg) rotate(360deg)}}

.auth-center{flex:1;display:flex;align-items:center;justify-content:center;padding:20px 16px 60px;position:relative;z-index:5}

/* White card — matches screenshot */
.auth-card{background:#fff;border-radius:20px;padding:40px 40px 32px;width:100%;max-width:430px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.auth-card-title{font-family:var(--fh);font-size:28px;font-weight:800;color:#0d0d0d;margin-bottom:6px}
.auth-card-sub{font-size:14px;color:#6b6b6b;margin-bottom:28px}
.auth-card-sub a{color:#0d0d0d;font-weight:700;cursor:pointer;text-decoration:none}
.auth-card-sub a:hover{color:var(--accent)}

/* DEMO ACCOUNTS */
.demo-accounts{margin-bottom:22px}
.demo-label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#9e9e9e;margin-bottom:8px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.demo-btn{background:#f7f7f7;border:1.5px solid #ebebeb;border-radius:9px;padding:9px 11px;text-align:left;transition:var(--tr);cursor:pointer}
.demo-btn:hover{border-color:var(--accent);background:rgba(44,75,255,.04)}
.demo-btn-name{font-size:12px;font-weight:700;color:#1a1a1a;display:block;margin-bottom:1px}
.demo-btn-type{font-size:11px;color:#999;display:flex;align-items:center;gap:4px}
.demo-type-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}

/* FORM on white card */
.auth-field{margin-bottom:16px}
.auth-field-label{display:flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:#2a2a2a;margin-bottom:6px}
.auth-field-req{color:#ef4444;font-size:14px}
.auth-input{width:100%;background:#fff;border:1.5px solid #d8d8d8;border-radius:9px;padding:12px 14px;color:#1a1a1a;font-size:14px;font-family:var(--fb);transition:var(--tr);outline:none}
.auth-input::placeholder{color:#bbb}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(44,75,255,.1)}
.auth-input-wrap{position:relative}
.auth-input-icon{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:#bbb;cursor:pointer}
.auth-input-icon:hover{color:#666}

.auth-btn-primary{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:var(--r-pill);font-family:var(--fb);font-size:14px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:var(--tr);margin-top:6px;box-shadow:0 4px 18px rgba(44,75,255,.35)}
.auth-btn-primary:hover{background:var(--accent-d);box-shadow:0 6px 24px rgba(44,75,255,.45);transform:translateY(-1px)}
.auth-links-row{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:13px;color:#6b6b6b}
.auth-links-row a{color:#1a1a1a;font-weight:700;cursor:pointer}
.auth-links-row a:hover{color:var(--accent)}
.auth-tc{text-align:center;font-size:12px;color:#9e9e9e;margin-top:20px;line-height:1.5}
.auth-tc a{color:#1a1a1a;font-weight:600}

/* SIGNUP specific (on same white card) */
.signup-progress{height:3px;background:#ebebeb;border-radius:3px;margin-bottom:24px;overflow:hidden}
.signup-progress-fill{height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease;box-shadow:0 0 8px rgba(44,75,255,.4)}
.signup-step{border-bottom:1px solid #f0f0f0}
.signup-step:last-child{border-bottom:none}
.signup-step-header{display:flex;align-items:center;gap:10px;padding:13px 0;cursor:pointer}
.signup-step-num{width:24px;height:24px;border-radius:50%;background:#f5f5f5;border:1.5px solid #e0e0e0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#999;flex-shrink:0;transition:var(--tr)}
.signup-step-num.done{background:var(--accent);border-color:var(--accent);color:#fff}
.signup-step-num.active{border-color:var(--accent);color:var(--accent);background:rgba(44,75,255,.06)}
.signup-step-title{font-size:13px;font-weight:600;color:#aaa;transition:var(--tr)}
.signup-step-title.active{color:#1a1a1a}
.signup-step-title.done{color:#888}
.signup-step-check{margin-left:auto;color:var(--accent);opacity:0;transition:var(--tr)}
.signup-step-check.done{opacity:1}
.signup-step-body{overflow:hidden;transition:max-height .35s ease,opacity .35s ease;max-height:0;opacity:0}
.signup-step-body.open{opacity:1}

/* Business type cards on white bg */
.biz-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.biz-type-card{background:#f8f8f8;border:1.5px solid #e8e8e8;border-radius:var(--r);padding:13px;text-align:left;transition:var(--tr);cursor:pointer}
.biz-type-card:hover{border-color:var(--accent);background:rgba(44,75,255,.04)}
.biz-type-card.selected{border-color:var(--accent);background:rgba(44,75,255,.07)}
.biz-type-icon{width:30px;height:30px;background:#ebebeb;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:7px;color:#888}
.biz-type-card.selected .biz-type-icon{background:rgba(44,75,255,.12);color:var(--accent)}
.biz-type-name{font-size:13px;font-weight:600;color:#2a2a2a;display:block}
.biz-type-ex{font-size:11px;color:#aaa;display:block;margin-top:2px}

/* Role pills on white bg */
.role-pills{display:flex;flex-wrap:wrap;gap:7px}
.role-pill{padding:8px 14px;border-radius:var(--r-pill);border:1.5px solid #e0e0e0;font-size:12px;font-weight:600;color:#666;cursor:pointer;transition:var(--tr);background:#fff}
.role-pill:hover{border-color:var(--accent)}
.role-pill.selected{background:var(--accent);border-color:var(--accent);color:#fff}

/* Password strength on white bg */
.pw-strength{margin-top:8px}
.pw-strength-bars{display:flex;gap:4px;margin-bottom:4px}
.pw-bar{flex:1;height:3px;border-radius:3px;background:#ebebeb;transition:background .4s cubic-bezier(.4,0,.2,1)}
.pw-bar.weak{background:#ef4444}
.pw-bar.fair{background:#eab308}
.pw-bar.good{background:#f97316}
.pw-bar.strong{background:#22c55e}
.pw-strength-text{font-size:11px;color:#aaa}

/* PWA NUDGE */
.pwa-nudge{position:relative;z-index:5;margin:0 auto 16px;max-width:430px;width:100%;padding:0 16px}
.pwa-nudge-inner{padding:11px 15px;background:rgba(44,75,255,.12);border:1px solid rgba(44,75,255,.25);border-radius:var(--r);display:flex;align-items:center;gap:10px}
.pwa-nudge-icon{color:var(--accent);flex-shrink:0}
.pwa-nudge-text{font-size:12px;color:rgba(255,255,255,.5);flex:1}
.pwa-nudge-text strong{color:rgba(255,255,255,.8);display:block;font-size:13px;margin-bottom:1px}
.pwa-nudge-btn{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);padding:5px 10px;border-radius:var(--r-pill);border:1px solid rgba(44,75,255,.3);background:rgba(44,75,255,.1);white-space:nowrap;cursor:pointer}

@media(max-width:480px){
  .auth-card{padding:28px 22px 24px;border-radius:16px}
  .auth-topbar{padding:16px 20px}
  .auth-topbar-tagline{display:none}
  .auth-card-title{font-size:24px}
}


/* ═══════════════════════════════════════════════
   MOBILE RESPONSIVE SYSTEM (< 768px)
   ═══════════════════════════════════════════════ */

/* App shell: sidebar slides in on mobile */
@media(max-width:768px){
  .sidebar{
    position:fixed;left:-240px;top:0;bottom:0;z-index:40;
    transition:left .25s cubic-bezier(.4,0,.2,1);
    width:240px !important;
  }
  .sidebar.open{ left:0 }
  .sidebar-overlay.show{ display:block }
  .header-menu-btn{ display:flex !important }
  .main{ width:100% }
  .app-shell{ display:block }
  .cmd-bar-trigger{ display:none }
  .header-actions .header-icon-btn:not(.keep-mobile){ display:none }

  /* Page padding tighter on mobile */
  .page{ padding:16px }
  .page-title{ font-size:18px }
  .page-subtitle{ font-size:13px }

  /* KPI cards: 2 cols on mobile */
  .kpi-row{ grid-template-columns:1fr 1fr !important; gap:10px }

  /* Linkz / Store editor panels: hide side panels */
  .linkz-right{ display:none }
  .linkz-sidebar{ width:100%;max-height:200px;border-right:none;border-bottom:1px solid var(--border) }
  .linkz-shell{ flex-direction:column }
  .linkz-center{ padding:12px }
  .store-editor-left{ display:none }
  .store-editor-right{ display:none }
  .store-editor-center{ padding:10px }

  /* Auth card full-width on mobile */
  .auth-card{ border-radius:0;padding:24px 20px;max-width:100%;box-shadow:none }
  .auth-screen{ align-items:flex-start }
  .auth-card-wrap{ width:100%;padding:0 }
}

/* Bottom nav removed — hamburger menu handles mobile navigation */

/* Responsive grid utilities */
@media(max-width:768px){
  .grid-1-mob{ grid-template-columns:1fr !important }
  .grid-2-mob{ grid-template-columns:1fr 1fr !important }
}

/* Touch target minimum */
@media(max-width:768px){
  .app-btn{ min-height:44px }
  .nav-item{ padding:11px 10px }
}

/* ─── LOADING SCREEN ─── */
.loading-screen{background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}
.loading-logo{font-family:var(--fh);font-size:32px;font-weight:800;color:#fff;letter-spacing:-.5px}
.loading-logo span{color:var(--accent)}
.loading-spinner{width:40px;height:40px;border:2px solid rgba(44,75,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
.loading-text{font-size:14px;color:rgba(255,255,255,.4)}



/* ─── STORE EDITOR (mirrors Linkz shell) ─── */
.store-editor-shell{display:flex;height:calc(100vh - var(--header-h));overflow:hidden;margin:-24px;background:#e8e8e8}
.store-editor-left{width:260px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.store-editor-center{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px;overflow-y:auto;gap:14px}
/* ── Button hierarchy additions ── */
.app-btn-soft{background:rgba(44,75,255,.08);color:#2c4bff;border:none}
.app-btn-soft:hover{background:rgba(44,75,255,.14)}
.app-btn-text{background:none;border:none;color:var(--text-m);padding-left:4px;padding-right:4px}
.app-btn-text:hover{color:var(--text);background:var(--g50)}
.full-form-mob-sections{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:#fff;border-top:1px solid var(--border);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:8px 12px max(10px,env(safe-area-inset-bottom));
  white-space:nowrap;
  box-shadow:0 -2px 16px rgba(0,0,0,.08);
}
@media(max-width:768px){
  .full-form-mob-sections{ display:block }
  .full-form-shell .full-form-content{ padding-bottom:72px }
}
/* Right-edge drawer */
.right-drawer-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:flex-end}
.right-drawer-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px)}
.right-drawer-panel{position:relative;width:100%;max-width:420px;background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 40px rgba(0,0,0,.15);animation:drawerSlideIn .25s cubic-bezier(.4,0,.2,1)}
@keyframes drawerSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* Full-form product editor — full viewport takeover like store editor */
.full-form-shell{display:flex;flex-direction:column;height:100vh;position:fixed;inset:0;z-index:100;background:#f5f6fa}
.full-form-topbar{height:56px;background:#111827;display:flex;align-items:center;padding:0 24px;gap:16px;flex-shrink:0}
.full-form-body{display:flex;flex:1;overflow:hidden}
.full-form-nav{width:220px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0;padding:12px}
.full-form-content{flex:1;overflow-y:auto;padding:28px 32px}
.full-form-preview{width:280px;background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
@media(max-width:1100px){.full-form-preview{display:none}}
@media(max-width:768px){
  .full-form-nav{display:none}
  .full-form-content{padding:16px}
}
.store-editor-right{width:290px;background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.store-screen-frame{border-radius:8px;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.18);background:#fff;transition:width .3s ease}
.store-screen-frame.desktop{width:100%;max-width:720px}
.store-screen-frame.mobile{width:375px;border-radius:28px;box-shadow:0 16px 48px rgba(0,0,0,.22),0 0 0 8px #1a1a1a}
.store-section-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;border:1.5px solid var(--g200);background:#fff;margin-bottom:7px;cursor:pointer;transition:.15s}
.store-section-row:hover,.store-section-row.active{border-color:#2c4bff;background:rgba(44,75,255,.03)}
.store-section-icon{width:30px;height:30px;border-radius:8px;background:var(--g50);display:flex;align-items:center;justify-content:center;color:var(--g500);flex-shrink:0}
@media(max-width:900px){.store-editor-right{display:none}}
@media(max-width:768px){.store-editor-left{display:none}.store-screen-frame.desktop{max-width:100%}}

/* ─── LINKZ MODULE ─── */
.linkz-shell{display:flex;height:calc(100vh - var(--header-h));overflow:hidden;margin:-24px;background:var(--g50)}
.linkz-sidebar{width:260px;background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow:hidden}
.linkz-sidebar-header{padding:16px 18px;border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:8px}
.linkz-sidebar-title{font-family:var(--fh);font-size:15px;font-weight:800;color:var(--text)}
.linkz-panel-content{flex:1;overflow-y:auto;padding:16px}
.linkz-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24px;overflow-y:auto;gap:16px;background:#f0f0f0}
.linkz-phone{width:270px;height:560px;background:#fff;border-radius:36px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.22),0 0 0 8px #1a1a1a;position:relative;flex-shrink:0}
.linkz-phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:80px;height:6px;background:#1a1a1a;border-radius:3px;z-index:10}
.linkz-phone-screen{border-radius:28px;overflow-y:auto;height:100%;-webkit-overflow-scrolling:touch}.linkz-phone-screen::-webkit-scrollbar{display:none}
.linkz-right{width:280px;background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.linkz-right-header{padding:14px 16px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.linkz-right-title{font-size:13px;font-weight:700;color:var(--text)}
.linkz-right-body{flex:1;overflow-y:auto;padding:14px 16px}
.linkz-block-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;border:1.5px solid var(--g200);background:#fff;margin-bottom:8px;cursor:pointer;transition:.15s ease}
.linkz-block-item:hover{border-color:var(--accent);background:rgba(44,75,255,.02)}
.linkz-block-item.active{border-color:var(--accent);background:rgba(44,75,255,.04)}
.linkz-block-icon{width:32px;height:32px;border-radius:8px;background:var(--g50);display:flex;align-items:center;justify-content:center;color:var(--g500);flex-shrink:0}
.linkz-block-label{font-size:13px;font-weight:600;color:var(--text);flex:1}
.linkz-block-type{font-size:10px;color:var(--text-m)}
.linkz-add-block{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.linkz-add-btn{background:var(--g50);border:1.5px dashed var(--g200);border-radius:10px;padding:12px 8px;text-align:center;cursor:pointer;transition:.15s ease}
.linkz-add-btn:hover{border-color:var(--accent);background:rgba(44,75,255,.04);color:var(--accent)}
.linkz-add-btn-icon{margin-bottom:5px;color:var(--g400)}
.linkz-add-btn-label{font-size:11px;font-weight:600;color:var(--text-m);display:block}
.linkz-topbar{width:100%;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px}
.linkz-url-display{flex:1;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-m)}
.linkz-url-domain{color:var(--text);font-weight:600}
.linkz-style-row{margin-bottom:16px}
.linkz-style-label{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-m);margin-bottom:8px;display:block}
.linkz-color-row{display:flex;gap:6px;flex-wrap:wrap}
.linkz-color-swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s ease;flex-shrink:0}
.linkz-color-swatch.active{border-color:var(--text);transform:scale(1.15)}
.linkz-font-pills{display:flex;gap:6px;flex-wrap:wrap}
.linkz-font-pill{padding:6px 12px;border-radius:100px;border:1.5px solid var(--g200);font-size:12px;font-weight:600;color:var(--text-m);cursor:pointer;transition:.15s ease;background:#fff}
.linkz-font-pill:hover,.linkz-font-pill.active{border-color:var(--accent);color:var(--accent);background:rgba(44,75,255,.05)}
.linkz-btn-shape-row{display:flex;gap:8px}
.linkz-btn-shape{padding:8px 14px;border-radius:var(--r-sm);border:1.5px solid var(--g200);font-size:12px;font-weight:600;cursor:pointer;transition:.15s ease;background:#fff;color:var(--text-m)}
.linkz-btn-shape.active{border-color:var(--accent);color:var(--accent);background:rgba(44,75,255,.05)}

/* Public page blocks */
.lz-page{width:100%;min-height:560px;display:flex;flex-direction:column;align-items:center;padding:32px 20px 24px;position:relative}
.lz-header{text-align:center;margin-bottom:20px;width:100%}
.lz-avatar{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.2);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;border:3px solid rgba(255,255,255,.4)}
.lz-name{font-size:18px;font-weight:800;color:#fff;margin-bottom:4px}
.lz-bio{font-size:12px;color:rgba(255,255,255,.75);line-height:1.5;max-width:200px;margin:0 auto 12px}
.lz-socials{display:flex;gap:8px;justify-content:center;margin-top:8px}
.lz-social-btn{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;cursor:pointer}
.lz-link-pill{display:block;width:100%;padding:12px 16px;border-radius:100px;background:rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:600;text-align:center;margin-bottom:8px;cursor:pointer;transition:.15s ease}
.lz-link-pill:hover{background:rgba(255,255,255,.28)}
.lz-link-banner{display:block;width:100%;padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.18);color:#fff;font-size:13px;font-weight:600;margin-bottom:8px;cursor:pointer;display:flex;align-items:center;gap:10px}
.lz-section-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px;width:100%}
.lz-product-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:10px}
.lz-product-card{background:rgba(255,255,255,.14);border-radius:10px;padding:10px;cursor:pointer}
.lz-product-name{font-size:11px;font-weight:700;color:#fff;margin-bottom:2px}
.lz-product-price{font-size:12px;font-weight:800;color:rgba(255,255,255,.9)}
.lz-book-btn{display:block;width:100%;padding:13px;border-radius:100px;background:#fff;color:#111;font-size:14px;font-weight:700;text-align:center;margin-bottom:10px;cursor:pointer}
.lz-text-block{font-size:13px;color:rgba(255,255,255,.8);line-height:1.6;width:100%;margin-bottom:10px;text-align:center}
.lz-form-block{background:rgba(255,255,255,.1);border-radius:12px;padding:14px;width:100%;margin-bottom:10px}
.lz-form-input{width:100%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:9px 12px;color:#fff;font-size:13px;margin-bottom:8px;outline:none;font-family:inherit}
.lz-form-input::placeholder{color:rgba(255,255,255,.45)}
.lz-form-submit{width:100%;padding:11px;border-radius:100px;background:#fff;color:#111;font-size:13px;font-weight:700;border:none;cursor:pointer}
.lz-spacer{height:12px;width:100%}
.lz-footer{text-align:center;margin-top:auto;padding-top:16px;font-size:10px;color:rgba(255,255,255,.35)}
.lz-footer strong{color:rgba(255,255,255,.55)}
.lz-smart-tag{font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(44,75,255,.2);color:#93c5fd;border-radius:4px;padding:2px 5px;margin-left:6px}

@media(max-width:900px){
  .linkz-right{display:none}
  .linkz-shell{flex-direction:column}
}
@media(max-width:768px){
  .linkz-sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--border)}
  .linkz-phone{width:240px}
}

/* ─── SETUP SCREEN ─── */
.setup-screen{background:#000;min-height:100%;display:flex;flex-direction:column}
.setup-header{padding:20px 24px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.07)}
.setup-logo{font-family:var(--fh);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px}
.setup-logo span{color:var(--accent)}
.setup-step-indicator{margin-left:auto;display:flex;gap:6px}
.setup-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.15);transition:var(--tr)}
.setup-dot.active{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.setup-dot.done{background:rgba(44,75,255,.5)}
.setup-body{flex:1;padding:32px 24px;max-width:700px;margin:0 auto;width:100%}
.setup-title{font-family:var(--fh);font-size:26px;font-weight:800;color:#fff;margin-bottom:6px}
.setup-subtitle{font-size:15px;color:rgba(255,255,255,.45);margin-bottom:32px}

/* TOOL SELECTION GRID */
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:32px}
.tool-card{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:var(--r);padding:16px;cursor:pointer;transition:var(--tr);position:relative}
.tool-card:hover{border-color:rgba(44,75,255,.4);background:rgba(44,75,255,.06)}
.tool-card.selected{border-color:var(--accent);background:rgba(44,75,255,.1)}
.tool-card.coming-soon{opacity:.55;cursor:default}
.tool-card.coming-soon:hover{border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.04)}
.tool-card-check{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;transition:var(--tr)}
.tool-card.selected .tool-card-check{background:var(--accent);border-color:var(--accent)}
.tool-card-icon{width:36px;height:36px;background:rgba(255,255,255,.07);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:10px;color:rgba(255,255,255,.6)}
.tool-card.selected .tool-card-icon{background:rgba(44,75,255,.2);color:var(--accent)}
.tool-card-name{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:3px}
.tool-card-desc{font-size:11px;color:rgba(255,255,255,.35)}
.coming-soon-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,200,0,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2);border-radius:var(--r-pill);padding:2px 7px;margin-top:5px}
.setup-select-all{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.setup-select-all button{font-size:12px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;padding:5px 10px;border-radius:var(--r-pill);border:1px solid rgba(44,75,255,.3);background:rgba(44,75,255,.08);cursor:pointer}

/* PLAN CARDS */
.plans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-bottom:32px}
.plan-card{background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:var(--r);padding:18px;cursor:pointer;transition:var(--tr);text-align:center;position:relative}
.plan-card:hover{border-color:rgba(44,75,255,.4);background:rgba(44,75,255,.06)}
.plan-card.selected{border-color:var(--accent);background:rgba(44,75,255,.1)}
.plan-card-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill);white-space:nowrap}
.plan-name{font-family:var(--fh);font-size:15px;font-weight:700;color:#fff;margin-bottom:8px}
.plan-price{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--accent)}
.plan-price small{font-size:12px;font-weight:400;color:rgba(255,255,255,.4)}
.plan-period{font-size:11px;color:rgba(255,255,255,.35);margin-top:4px}
.plan-save{font-size:11px;font-weight:600;color:#22c55e;margin-top:6px}

/* INSTALL TABS */
.install-tabs{display:flex;gap:6px;margin-bottom:28px;flex-wrap:wrap}
.install-tab{padding:8px 14px;border-radius:var(--r-pill);font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);cursor:pointer;transition:var(--tr);background:rgba(255,255,255,.04)}
.install-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
.install-steps-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}
.install-step-item{display:flex;gap:14px;align-items:flex-start}
.install-step-n{width:30px;height:30px;border-radius:50%;background:rgba(44,75,255,.15);border:1px solid rgba(44,75,255,.3);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--accent);flex-shrink:0}
.install-step-content{flex:1}
.install-step-title{font-size:14px;font-weight:600;color:#fff;margin-bottom:3px}
.install-step-desc{font-size:13px;color:rgba(255,255,255,.45);line-height:1.5}
.install-step-img{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-sm);height:60px;display:flex;align-items:center;justify-content:center;margin-top:8px}
.install-step-img span{font-size:11px;color:rgba(255,255,255,.2);font-style:italic}
.setup-footer{padding:20px 24px;border-top:1px solid rgba(255,255,255,.07);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.setup-skip{font-size:13px;color:rgba(255,255,255,.3);cursor:pointer;padding:8px 0;text-decoration:underline;text-decoration-color:rgba(255,255,255,.15)}
.setup-skip:hover{color:rgba(255,255,255,.5)}

/* ─── APP SHELL ─── */
.app-shell{display:flex;height:100%;background:var(--g50)}
/* SIDEBAR */
.sidebar{width:var(--sidebar-w);background:var(--sidebar-bg);flex-shrink:0;display:flex;flex-direction:column;transition:width var(--tr),transform var(--tr);overflow:hidden;z-index:40;position:relative}
.sidebar-header{padding:18px 16px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.05)}
.sidebar-logo{font-family:var(--fh);font-size:20px;font-weight:800;color:#fff;letter-spacing:-.3px}
.sidebar-logo span{color:var(--accent)}
.sidebar-logo-mark{width:28px;height:28px;border-radius:50%;border:2px solid var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative}
.sidebar-logo-mark::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(44,75,255,.5)}
.sidebar-biz{padding:12px 16px;margin-bottom:4px}
.sidebar-biz-name{font-size:12px;font-weight:700;color:rgba(255,255,255,.85);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-biz-type{font-size:11px;color:rgba(255,255,255,.3);display:flex;align-items:center;gap:5px;margin-top:2px}
.sidebar-type-dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.sidebar-nav{flex:1;overflow-y:auto;padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.nav-section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.2);padding:10px 8px 4px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:var(--tr);color:rgba(255,255,255,.45);position:relative;white-space:nowrap}
.nav-item:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.8)}
.nav-item.active{background:rgba(44,75,255,.15);color:#fff}
.nav-item-disabled{opacity:.3;pointer-events:none;cursor:default}
.nav-item-inactive:hover{opacity:.7 !important;background:rgba(255,255,255,.04)}
.nav-item.active::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:var(--accent);border-radius:0 3px 3px 0;margin-left:-2px}
.nav-item-icon{width:18px;height:18px;flex-shrink:0}
.nav-item-label{font-size:13px;font-weight:500}
.nav-badge{margin-left:auto;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:var(--r-pill)}
.sidebar-footer{padding:12px 10px;border-top:1px solid rgba(255,255,255,.05)}
.sidebar-user{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;transition:var(--tr)}
.sidebar-user:hover{background:rgba(255,255,255,.05)}
.sidebar-avatar{width:30px;height:30px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.sidebar-user-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-user-role{font-size:11px;color:rgba(255,255,255,.3)}

/* SIDEBAR OVERLAY (mobile) */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:39}
.sidebar-overlay.show{display:block}

/* MAIN CONTENT */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
/* HEADER */
.app-header{height:var(--header-h);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0;position:relative}
.header-menu-btn{display:none;color:var(--text);padding:6px}
.cmd-bar-trigger{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-pill);padding:9px 14px;cursor:pointer;transition:var(--tr)}
.cmd-bar-trigger:hover{border-color:var(--accent);background:rgba(44,75,255,.04)}
.cmd-bar-placeholder{font-size:13px;color:var(--g400);flex:1}
.cmd-bar-kbd{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--g300);background:var(--g100);padding:2px 6px;border-radius:5px;font-family:monospace;white-space:nowrap}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--g500);cursor:pointer;transition:var(--tr);position:relative}
.header-icon-btn:hover{background:var(--g100);color:var(--text)}
.notif-dot{position:absolute;top:7px;right:7px;width:7px;height:7px;background:var(--accent);border-radius:50%;border:2px solid #fff}
.header-avatar{width:34px;height:34px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;cursor:pointer;flex-shrink:0}
/* PAGE CONTENT */
.page{flex:1;overflow-y:auto;padding:24px}
.page-header{margin-bottom:24px}
.page-title{font-family:var(--fh);font-size:22px;font-weight:800;color:var(--text);line-height:1.2}
.page-subtitle{font-size:14px;color:var(--text-m);margin-top:3px}
.page-actions{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}

/* KPI CARDS */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.kpi-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:18px;transition:var(--tr)}
.kpi-card:hover{box-shadow:var(--sh)}
.kpi-label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-m);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.kpi-value{font-family:var(--fh);font-size:24px;font-weight:800;color:var(--text);line-height:1}
.kpi-delta{font-size:12px;color:#22c55e;margin-top:5px;display:flex;align-items:center;gap:4px}
.kpi-delta.neg{color:#ef4444}

/* INSIGHT CARD */
.insight-card{background:linear-gradient(135deg,rgba(44,75,255,.08) 0%,rgba(44,75,255,.03) 100%);border:1px solid rgba(44,75,255,.15);border-radius:var(--r);padding:18px;margin-bottom:24px;display:flex;gap:14px;align-items:flex-start}
.insight-icon{width:38px;height:38px;background:rgba(44,75,255,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.insight-body{}
.insight-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.insight-text{font-size:14px;color:var(--text);line-height:1.5}
.insight-action{font-size:12px;font-weight:600;color:var(--accent);margin-top:8px;display:inline-flex;align-items:center;gap:4px;cursor:pointer}

/* CONTENT CARDS */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.card-header{padding:16px 18px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.card-title{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--text)}
.card-action{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);cursor:pointer}
.card-body{padding:18px}

/* TABLE */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-m);padding:10px 14px;border-bottom:1px solid var(--g100);text-align:left;white-space:nowrap}
.data-table td{padding:13px 14px;border-bottom:1px solid var(--g50);font-size:13px;color:var(--text);vertical-align:middle}
.data-table tr:last-child td{border-bottom:none}
.data-table tr:hover td{background:var(--g50)}

/* BADGES/STATUS */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font-size:11px;font-weight:600}
.badge-green{background:rgba(34,197,94,.1);color:#16a34a}
.badge-yellow{background:rgba(234,179,8,.1);color:#b45309}
.badge-red{background:rgba(239,68,68,.1);color:#dc2626}
.badge-blue{background:rgba(44,75,255,.1);color:var(--accent)}
.badge-gray{background:var(--g100);color:var(--g500)}
.badge-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* GRID LAYOUTS */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gap-16{gap:16px}

/* PRODUCT/ITEM CARDS */
.item-card{background:#fff;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:var(--tr)}
.item-card:hover{box-shadow:var(--sh);transform:translateY(-1px)}
.item-card-img{height:120px;background:var(--g100);display:flex;align-items:center;justify-content:center;position:relative}
.item-card-img-placeholder{font-size:28px;opacity:.4}
.item-card-body{padding:12px}
.item-card-name{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px}
.item-card-sub{font-size:12px;color:var(--text-m)}
.item-card-price{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--text);margin-top:6px}
.item-card-footer{padding:10px 12px;border-top:1px solid var(--g50);display:flex;gap:6px}

/* POS */
.pos-layout{display:grid;grid-template-columns:1fr 300px;height:100%;gap:0;overflow:hidden}
.pos-products{overflow-y:auto;padding:20px}
.pos-cart{background:#fff;border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}
.pos-cart-header{padding:16px;border-bottom:1px solid var(--g100);font-family:var(--fh);font-size:15px;font-weight:700}
.pos-cart-items{flex:1;overflow-y:auto;padding:12px}
.pos-cart-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--g50)}
.pos-cart-item:last-child{border-bottom:none}
.pos-cart-item-name{flex:1;font-size:13px;color:var(--text)}
.pos-cart-item-qty{display:flex;align-items:center;gap:6px}
.qty-btn{width:24px;height:24px;border-radius:50%;background:var(--g100);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--text);transition:var(--tr)}
.qty-btn:hover{background:var(--accent);color:#fff}
.pos-cart-item-price{font-size:13px;font-weight:600;color:var(--text);min-width:64px;text-align:right}
.pos-cart-footer{padding:16px;border-top:1px solid var(--g100)}
.pos-total-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;color:var(--text-m)}
.pos-total-row.grand{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--text);margin-top:10px;padding-top:10px;border-top:1px solid var(--g100)}
.pos-pay-methods{display:flex;gap:6px;margin:12px 0}
.pos-pay-btn{flex:1;padding:8px;border-radius:var(--r-sm);border:1.5px solid var(--g200);font-size:12px;font-weight:600;color:var(--g500);cursor:pointer;text-transform:uppercase;letter-spacing:.03em;background:#fff;transition:var(--tr)}
.pos-pay-btn.active{border-color:var(--accent);color:var(--accent);background:rgba(44,75,255,.05)}
.pos-checkout-btn{width:100%;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:var(--r-pill);font-family:var(--fb);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:var(--tr);box-shadow:0 4px 16px rgba(44,75,255,.3)}
.pos-checkout-btn:hover{background:var(--accent-d);box-shadow:0 6px 20px rgba(44,75,255,.4)}

/* TABLE FLOOR PLAN */
.floor-plan{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;padding:24px}
.floor-table{background:#fff;border:2px solid var(--border);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer;transition:var(--tr)}
.floor-table:hover{box-shadow:var(--sh)}
.floor-table.occupied{border-color:var(--accent);background:rgba(44,75,255,.04)}
.floor-table.reserved{border-color:#f59e0b;background:rgba(245,158,11,.04)}
.floor-table.available{border-color:#22c55e;background:rgba(34,197,94,.04)}
.floor-table-num{font-family:var(--fh);font-size:20px;font-weight:800;color:var(--text)}
.floor-table-status{font-size:11px;font-weight:600;margin-top:4px}
.floor-table.occupied .floor-table-status{color:var(--accent)}
.floor-table.reserved .floor-table-status{color:#b45309}
.floor-table.available .floor-table-status{color:#16a34a}
.floor-table-info{font-size:10px;color:var(--text-m);margin-top:2px}

/* BOOKING CALENDAR */
.booking-list{display:flex;flex-direction:column;gap:10px}
.booking-item{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;gap:14px;align-items:center;transition:var(--tr)}
.booking-item:hover{box-shadow:var(--sh)}
.booking-time{text-align:center;min-width:52px}
.booking-time-h{font-family:var(--fh);font-size:16px;font-weight:700;color:var(--text)}
.booking-time-p{font-size:11px;color:var(--text-m)}
.booking-divider{width:1px;background:var(--g200);align-self:stretch}
.booking-info{flex:1}
.booking-client{font-size:14px;font-weight:600;color:var(--text)}
.booking-service{font-size:12px;color:var(--text-m);margin-top:2px}
.booking-price{font-family:var(--fh);font-size:15px;font-weight:700;color:var(--text)}
.booking-staff{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:11px;color:var(--text-m)}
.staff-avatar-xs{width:18px;height:18px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff}

/* TABS */
.tabs{display:flex;gap:4px;background:var(--g100);border-radius:var(--r-pill);padding:4px;margin-bottom:20px;align-self:flex-start}
.tab{padding:7px 16px;border-radius:var(--r-pill);font-size:13px;font-weight:600;color:var(--text-m);cursor:pointer;transition:var(--tr);white-space:nowrap}
.tab.active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.tabs-scroll{overflow-x:auto;display:flex;padding-bottom:2px}
.tabs-scroll::-webkit-scrollbar{height:0}

/* STOREFRONT PUBLIC */
.storefront-banner{background:linear-gradient(135deg,var(--accent) 0%,#7c3aed 100%);border-radius:var(--r);padding:20px;margin-bottom:24px;color:#fff;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.storefront-url{font-family:monospace;font-size:13px;background:rgba(255,255,255,.15);padding:5px 12px;border-radius:var(--r-pill);display:inline-block}
.storefront-actions{margin-left:auto;display:flex;gap:8px}
.btn-outline-white{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;border-radius:var(--r-pill);padding:8px 14px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:var(--tr)}
.btn-outline-white:hover{background:rgba(255,255,255,.25)}
/* Setup/utility btn classes */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 20px;border-radius:var(--r-pill);font-family:var(--fb);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:var(--tr);cursor:pointer;border:none}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(44,75,255,.35)}
.btn-primary:hover{background:var(--accent-d);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.1)}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.btn-sm{padding:8px 14px;font-size:12px}

/* MIRA FLOATING */
.mira-fab{position:fixed;bottom:24px;right:24px;z-index:50}
.mira-btn{width:52px;height:52px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(44,75,255,.5);color:#fff;transition:var(--tr);position:relative}
.mira-btn:hover{transform:scale(1.06);box-shadow:0 6px 28px rgba(44,75,255,.6)}
.mira-btn-ring{position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(44,75,255,.3);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:0}}
.mira-panel{position:fixed;bottom:90px;right:24px;width:300px;background:#fff;border-radius:18px;box-shadow:0 12px 48px rgba(0,0,0,.18);border:1px solid var(--border);z-index:50;overflow:hidden;transform:scale(.95) translateY(10px);opacity:0;pointer-events:none;transition:.25s cubic-bezier(.34,1.56,.64,1)}
.mira-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:all}
.mira-panel-header{background:var(--accent);padding:14px 16px;color:#fff;display:flex;align-items:center;gap:10px}
.mira-panel-title{font-family:var(--fh);font-size:15px;font-weight:700}
.mira-panel-sub{font-size:11px;opacity:.7;margin-top:1px}
.mira-panel-close{margin-left:auto;cursor:pointer;opacity:.7;background:none;border:none;color:#fff;display:flex}
.mira-messages{padding:14px;display:flex;flex-direction:column;gap:10px;max-height:220px;overflow-y:auto}
.mira-msg{max-width:85%}
.mira-msg-ai{background:var(--g50);border-radius:0 12px 12px 12px;padding:10px 12px;font-size:13px;color:var(--text);line-height:1.45}
.mira-msg-user{align-self:flex-end;background:var(--accent);border-radius:12px 0 12px 12px;padding:10px 12px;font-size:13px;color:#fff;line-height:1.45}
.mira-input-row{padding:12px;border-top:1px solid var(--g100);display:flex;gap:8px}
.mira-input{flex:1;background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-pill);padding:9px 14px;font-size:13px;outline:none;font-family:var(--fb)}
.mira-input:focus{border-color:var(--accent)}
.mira-send{width:32px;height:32px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}

/* CMD BAR OVERLAY */
.cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;opacity:0;pointer-events:none;transition:opacity .2s ease;backdrop-filter:blur(4px)}
.cmd-overlay.open{opacity:1;pointer-events:all}
.cmd-box{background:#fff;width:100%;max-width:560px;border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.25);overflow:hidden;transform:translateY(-10px);transition:.2s ease;margin:0 16px}
.cmd-overlay.open .cmd-box{transform:translateY(0)}
.cmd-input-row{display:flex;align-items:center;gap:10px;padding:16px}
.cmd-input-icon{color:var(--text-m);flex-shrink:0}
.cmd-input{flex:1;border:none;outline:none;font-size:16px;font-family:var(--fb);color:var(--text);background:transparent}
.cmd-input::placeholder{color:var(--g300)}
.cmd-esc{font-size:11px;font-family:monospace;background:var(--g100);color:var(--g400);padding:3px 7px;border-radius:5px;white-space:nowrap}
.cmd-divider{height:1px;background:var(--g100)}
.cmd-list{padding:8px}
.cmd-section-label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--g300);padding:8px 10px 4px}
.cmd-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;transition:var(--tr)}
.cmd-item:hover,.cmd-item.focused{background:var(--g50)}
.cmd-item-icon{width:28px;height:28px;border-radius:7px;background:var(--g100);display:flex;align-items:center;justify-content:center;color:var(--g500);flex-shrink:0}
.cmd-item-label{font-size:14px;color:var(--text)}
.cmd-item-sub{font-size:12px;color:var(--text-m);margin-top:1px}
.cmd-item-kbd{margin-left:auto;font-size:10px;font-family:monospace;background:var(--g100);color:var(--g400);padding:2px 6px;border-radius:4px}

/* INSTALL MODAL (in-app) */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:#fff;border-radius:20px;width:100%;max-width:540px;max-height:85vh;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.25)}
.modal-header{padding:20px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.modal-title{font-family:var(--fh);font-size:18px;font-weight:800}
.modal-close{width:32px;height:32px;border-radius:50%;background:var(--g100);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text)}
.modal-body{padding:22px}

/* EMPTY STATE */
.empty-state{padding:48px 24px;text-align:center}
.empty-icon{width:56px;height:56px;background:var(--g100);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:var(--g300)}
.empty-title{font-family:var(--fh);font-size:17px;font-weight:700;color:var(--text);margin-bottom:6px}
.empty-sub{font-size:14px;color:var(--text-m);margin-bottom:20px;line-height:1.5}

/* SETUP RESUME (skipped) */
.setup-resume{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px;text-align:center}
.setup-resume-title{font-family:var(--fh);font-size:24px;font-weight:800;margin-bottom:8px}
.setup-resume-sub{font-size:14px;color:var(--text-m);margin-bottom:24px}

/* APP IN-APP BTN */
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--r-pill);font-family:var(--fb);font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:var(--tr);cursor:pointer;border:none}
.app-btn-primary{background:var(--accent);color:#fff;box-shadow:0 3px 14px rgba(44,75,255,.3)}
.app-btn-primary:hover{background:var(--accent-d);box-shadow:0 4px 18px rgba(44,75,255,.4);transform:translateY(-1px)}
.app-btn-outline{background:#fff;color:var(--text);border:1.5px solid var(--g200)}
.app-btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.app-btn-ghost{color:var(--text-m);background:var(--g50)}
.app-btn-ghost:hover{background:var(--g100);color:var(--text)}
.app-btn-sm{padding:7px 12px;font-size:11px}
.app-btn-danger{background:#fef2f2;color:#dc2626;border:1.5px solid #fee2e2}
.app-btn-danger:hover{background:#fee2e2}

/* FAB */
.fab{position:fixed;bottom:88px;right:24px;z-index:45;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(44,75,255,.4);transition:var(--tr)}
.fab:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(44,75,255,.5)}

/* FORM STYLES IN APP */
.field{margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-m);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:var(--g50);border:1.5px solid var(--g200);border-radius:var(--r-sm);padding:10px 13px;font-size:14px;font-family:var(--fb);color:var(--text);outline:none;transition:var(--tr)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);background:rgba(44,75,255,.03)}
.field textarea{resize:vertical;min-height:80px}

/* RESPONSIVE */
.cmd-suggestion:hover{background:var(--g100) !important}
@media(max-width:900px){
  .revenue-grid{grid-template-columns:1fr !important}
  .pos-layout{grid-template-columns:1fr}
  .pos-cart{position:fixed;bottom:0;left:0;right:0;height:auto;border-left:none;border-top:1px solid var(--border);transform:translateY(100%);transition:transform .3s ease}
  .pos-cart.open{transform:translateY(0)}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .kpi-row{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .sidebar{position:fixed;top:0;bottom:0;left:0;transform:translateX(-100%);z-index:40}
  .sidebar.open{transform:translateX(0)}
  .header-menu-btn{display:flex}
  .cmd-bar-trigger{max-width:100%}
  .app-header{padding:0 14px;gap:8px}
  .page{padding:16px}
  .grid-3{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr 1fr}
  .tools-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .plans-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .biz-type-grid{grid-template-columns:1fr 1fr}
  .setup-body{padding:24px 16px}
  .mira-fab{bottom:16px;right:16px}
  .mira-panel{right:16px;width:calc(100vw - 32px)}
  .fab{bottom:80px;right:16px}
  .data-table{display:block;overflow-x:auto}
}
@media(max-width:480px){
  .auth-card{padding:24px 18px}
  .demo-grid{grid-template-columns:1fr}
  .biz-type-grid{grid-template-columns:1fr 1fr}
  .kpi-row{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr 1fr}
  .setup-title{font-size:22px}
  .grid-3{grid-template-columns:1fr}
  .install-tabs{gap:4px}
  .install-tab{padding:6px 10px;font-size:11px}
}