/* ═══════════════════════════════════════════════════════════
   IMOBILLIO MOBILE — Brand book strict (light + dark)
   Tokens taken EXACTLY from demo-rezident.html / demo-mobile.html
═══════════════════════════════════════════════════════════ */
:root {
  /* Brand tokens — synced with /04_WEBSITE_IMOBILLIO/style.css */
  --navy:#0F1F3D; --indigo:#5B5FCF; --ind2:#4548B8;
  --teal:#1A8C8C; --teal2:#1A8C8C;
  --gold:#C9A96E; --gold2:#8C7A4E;
  --ok:#10B981; --warn:#F59E0B; --danger:#EF4444;
  --ff:'Poppins',sans-serif;

  /* Light mode (default) */
  --bg:#F0F2F7; --surf:#FFFFFF; --surf2:#F8F9FB;
  --hdr:#0F1F3D; --body:#1E293B; --muted:#64748B; --ghost:#94A3B8;
  --line:#E8EDF4; --tbar:#FFFFFF; --card:#FFFFFF;
  --csh:0 1px 3px rgba(15,31,61,.08), 0 4px 16px rgba(15,31,61,.05);
  --indb10:rgba(91,95,207,.1); --indb20:rgba(91,95,207,.2);
  --tealb10:rgba(26,140,140,.1); --tealb20:rgba(26,140,140,.2);

  /* Dynamic accent — switches per scenario */
  --accent:var(--indigo); --accent2:var(--ind2);
  --acc-10:var(--indb10); --acc-20:var(--indb20);
}
body.dark {
  --bg:#080D14; --surf:#0E1420; --surf2:#141C2B;
  --hdr:#0A1018; --body:#CBD5E1; --muted:#7A869A; --ghost:#3D4A5C;
  --line:#1A2438; --tbar:#0E1420; --card:#121A28;
  --csh:0 1px 4px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --indb10:rgba(91,95,207,.14); --indb20:rgba(91,95,207,.28);
  --tealb10:rgba(26,140,140,.14); --tealb20:rgba(26,140,140,.25);
}
body[data-scenario="hospitality"] { --accent:var(--teal); --accent2:var(--teal2); --acc-10:var(--tealb10); --acc-20:var(--tealb20); }
body[data-scenario="luxury"] { --accent:var(--gold); --accent2:var(--gold2); }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
* { transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s; }
html, body { height:100%; }
body {
  font-family:var(--ff);
  background:linear-gradient(160deg,#0F1F3D,#1a1a3e 50%,#2a2560);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; overflow:hidden;
  -webkit-font-smoothing:antialiased; margin:0; position:relative;
}
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(75,75,168,.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 70%, rgba(26,140,140,.08) 0%, transparent 70%);
}

button { font-family:var(--ff); cursor:pointer; border:none; background:none; color:inherit; }
input, textarea, select { font-family:var(--ff); color:inherit; background:none; border:none; outline:none; }

/* ═══════════════════════════════════════════════════════
   FIXED CONTROLS (dark mode toggle, switch scenario, info)
═══════════════════════════════════════════════════════ */
.dm-toggle {
  position:fixed; top:32px; right:20px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:100px; padding:8px 16px; cursor:pointer;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  user-select:none;
}
.dm-toggle:hover { background:rgba(255,255,255,.1); }
.dm-ico { font-size:15px; }
.dm-lbl { font-size:11px; font-weight:600; letter-spacing:.4px; color:rgba(255,255,255,.55); }
.dm-track { width:34px; height:19px; border-radius:10px; background:rgba(255,255,255,.1); position:relative; transition:background .3s; }
.dm-track.on { background:var(--indigo); }
.dm-thumb { position:absolute; top:2.5px; left:2.5px; width:14px; height:14px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.25); transition:left .3s; }
.dm-track.on .dm-thumb { left:17.5px; }

.switch-scenario {
  position:fixed; top:32px; left:50%; transform:translateX(-50%); z-index:9999;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:100px; padding:8px 16px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:rgba(255,255,255,.7); font-size:11px; font-weight:600;
  cursor:pointer; display:none; align-items:center; gap:8px;
}
.switch-scenario.show { display:inline-flex; }
.switch-scenario:hover { color:#fff; background:rgba(255,255,255,.1); }
.ss-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 6px var(--accent); }

.info-panel {
  position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:9999;
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:100px; padding:8px 16px;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.info-dot { width:7px; height:7px; background:#10B981; border-radius:50%; box-shadow:0 0 8px #10B981; animation:pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.5; } }
.info-txt { font-size:11px; color:rgba(255,255,255,.5); }
.info-txt strong { color:rgba(255,255,255,.9); }

/* ═══════════════════════════════════════════════════════
   PHONE FRAME
═══════════════════════════════════════════════════════ */
.device-wrap {
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
}
.phone {
  width:300px; height:640px;
  border-radius:48px;
  transform:scale(1.37); transform-origin:center;
  border:1.5px solid rgba(255,255,255,.09);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.03),
    0 48px 96px rgba(0,0,0,.7),
    0 16px 40px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.09),
    inset 0 -1px 0 rgba(0,0,0,.2);
  overflow:hidden; position:relative; background:var(--bg); flex-shrink:0;
}
body:not(.dark) .phone {
  background:linear-gradient(160deg,#E8EDF7,#EDE8F5 50%,#E6E4F5);
}
body.dark .phone {
  border-color:rgba(255,255,255,.06);
  background:linear-gradient(160deg,#0F1F3D,#1a1a3e 50%,#2a2560);
}
@media (max-height:900px) { .phone { transform:scale(1.25); } }
@media (max-height:800px) { .phone { transform:scale(1.1); } }
@media (max-height:720px) { .phone { transform:scale(1); } }

/* ─── REAL MOBILE DEVICES — fullscreen, no phone frame ───
   Triggered on any touch device OR small viewport. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body { overflow: auto; }
  .phone-frame { padding: 0; background: var(--bg-grad); min-height: 100dvh; }
  .device-wrap { width: 100%; height: 100dvh; }
  .phone {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  /* Hide synthetic notch + home indicator on real phones — phone has its own */
  .notch { display: none !important; }
  /* MOBILE — move floating controls ABOVE tab bar, not over the header content.
     On gate/picker (no tab bar) they stay at bottom too. */
  .dm-toggle {
    top: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0)) !important;
    right: 12px;
    padding: 7px 12px;
    font-size: 10px;
  }
  .switch-scenario {
    top: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom, 0)) !important;
    left: 12px;
    transform: none !important;
    padding: 7px 12px;
    font-size: 10px;
  }
  /* On gate/picker (no tab bar) — float at very bottom */
  body:has(#screen-gate.active) .dm-toggle,
  body:has(#screen-gate.active) .switch-scenario,
  body:has(#screen-picker1.active) .dm-toggle,
  body:has(#screen-picker1.active) .switch-scenario,
  body:has(#screen-picker2.active) .dm-toggle,
  body:has(#screen-picker2.active) .switch-scenario {
    bottom: calc(env(safe-area-inset-bottom, 16px) + 12px) !important;
  }
  /* Inside the app: hide floating controls — they live in Profile > Setări demo now */
  body:has(#screen-app.active) .dm-toggle,
  body:has(#screen-app.active) .switch-scenario {
    display: none !important;
  }
  .info-panel {
    bottom: calc(82px + env(safe-area-inset-bottom, 0) + 44px);
    padding: 5px 12px;
    font-size: 9.5px;
    /* Hide info panel inside app — too cluttered with the other 2 floating */
  }
  body:has(#screen-app.active) .info-panel { display: none; }
  /* Bottom nav respects iOS safe area */
  .tbar {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
    height: calc(70px + env(safe-area-inset-bottom, 0));
  }
  /* Header (h-hdr, ph) respects status bar with extra breathing room */
  .h-hdr {
    padding-top: calc(env(safe-area-inset-top, 16px) + 22px);
  }
  .ph {
    padding-top: calc(env(safe-area-inset-top, 16px) + 28px);
  }
  /* Back button bigger on mobile */
  .ph-back {
    font-size: 14px;
    padding: 12px 16px 12px 4px;
    min-height: 44px;
    margin-bottom: 10px;
  }

  /* ─── MOBILE FONT SCALE — readable on real iPhone (375-430px) ─── */
  /* Headers */
  .ph-title { font-size: 26px !important; letter-spacing: -.5px; }
  .ph-sub   { font-size: 14px !important; }
  .h-g1     { font-size: 16px !important; }
  .h-g2     { font-size: 28px !important; }

  /* Section labels */
  .sc-lbl { font-size: 13px !important; padding: 0 4px; letter-spacing: 1.2px; }

  /* Quick action cards (regular, not mp-cat) */
  .qb-l { font-size: 15px !important; }
  .qb-s { font-size: 12.5px !important; }
  .qb-i { width: 42px !important; height: 42px !important; font-size: 22px !important; }

  /* Marketplace category cards */
  .qb.mp-cat { padding: 20px 16px 22px; min-height: 160px; }
  .qb.mp-cat .qb-i { width: 56px !important; height: 56px !important; font-size: 30px !important; }
  .qb.mp-cat .qb-l { font-size: 17px !important; }
  .qb.mp-cat .qb-s { font-size: 13px !important; }

  /* List items */
  .li-t   { font-size: 15px !important; }
  .li-s   { font-size: 13px !important; }
  .li-v   { font-size: 15px !important; }
  .li-ico { width: 44px !important; height: 44px !important; font-size: 20px !important; }

  /* Cards generic content */
  .card { font-size: 15px; }

  /* Hero/balance card */
  .hero-l, .balance-card .label { font-size: 13px !important; }
  .hero-v, .balance-card .amount { font-size: 38px !important; }
  .hero-s, .balance-card .meta { font-size: 14px !important; }

  /* Badges */
  .b { font-size: 12px !important; padding: 4px 13px !important; }

  /* Smoobu */
  .smoobu-label { font-size: 14px !important; }
  .ch-name      { font-size: 14px !important; font-weight: 600; }
  .ch-badge     { width: 28px !important; height: 28px !important; font-size: 14px !important; }

  /* KPI cards on host */
  .kpi-card .label { font-size: 13px !important; }
  .kpi-card .value { font-size: 28px !important; }

  /* Buttons */
  .btn-prim { font-size: 16px !important; padding: 16px !important; font-weight: 700; }
  .btn-sm   { font-size: 14px !important; padding: 12px 16px !important; }

  /* Form inputs — compact but min 16px font (no iOS zoom) */
  .field input, .field textarea, .field select {
    font-size: 16px !important;
    padding: 11px 14px !important;
  }
  .field input[type="date"], .field input[type="datetime-local"], .field input[type="time"] {
    padding: 10px 14px !important;
    font-size: 15px !important;
  }
  .field label { font-size: 12px !important; margin-bottom: 5px !important; }
  .field { margin-bottom: 12px !important; }

  /* Announcement cards */
  .announce-card .title { font-size: 16px !important; }
  .announce-card .body  { font-size: 14px !important; line-height: 1.55; }
  .announce-card .meta  { font-size: 12px !important; }

  /* Tab bar */
  .ti-i { font-size: 26px !important; }
  .ti-l { font-size: 12px !important; }
  .tbar { height: calc(82px + env(safe-area-inset-bottom, 0)) !important; }
  .body-scroll { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0)) !important; }

  /* Profile tags / chips */
  .ph .b, .h-hdr .b { font-size: 13px !important; padding: 6px 14px !important; }

  /* Booking cards */
  .booking-card .guest .name { font-size: 16px !important; }
  .booking-card .ref         { font-size: 12px !important; }
  .booking-card .dates       { font-size: 14px !important; }
  .booking-card .amount      { font-size: 16px !important; }
  .booking-card .channel     { font-size: 12px !important; }

  /* Issue cards */
  .issue-card .title { font-size: 15px !important; }
  .issue-card .desc  { font-size: 13px !important; }

  /* Lock & PIN */
  .lock-card .name { font-size: 15px !important; }
  .pin-display .pin { font-size: 38px !important; letter-spacing: 8px; }
  .pin-display .pin-label { font-size: 12px !important; }

  /* Stay hero meta */
  .mini-l { font-size: 10px !important; }
  .mini-v { font-size: 16px !important; }

  /* Modal */
  .modal h2 { font-size: 22px !important; }

  /* Empty state */
  .empty { font-size: 14px !important; padding: 60px 20px; }
  .empty .emp-i { font-size: 56px !important; }
  /* Body scroll bottom padding so content above tab bar */
  .body-scroll {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0));
  }
}

/* PWA installed mode (standalone) — already fullscreen, ensure clean */
@media all and (display-mode: standalone) {
  .info-panel { display: none; }
}

.notch {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:108px; height:30px; z-index:200;
  background:#000; border-radius:0 0 18px 18px;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.n-pill { width:50px; height:5px; background:#111; border-radius:3px; }
.n-dot { width:9px; height:9px; background:#111; border-radius:50%; }

.pscreen {
  width:100%; height:100%; overflow:hidden; position:relative;
  display:flex; flex-direction:column;
}
body:not(.dark) .pscreen { background:linear-gradient(160deg,#E8EDF7,#EDE8F5 50%,#E6E4F5); }
body.dark .pscreen { background:linear-gradient(160deg,#0F1F3D,#1a1a3e 50%,#2a2560); }

.screen { width:100%; height:100%; display:none; flex-direction:column; }
.screen.active { display:flex; }
.slide-in { animation:slide .28s ease-out; }
@keyframes slide { from { opacity:0; transform:translateX(12px); } to { opacity:1; transform:translateX(0); } }

/* ═══════════════════════════════════════════════════════
   DEMO GATE
═══════════════════════════════════════════════════════ */
.gate-wrap {
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  padding:calc(env(safe-area-inset-top, 24px) + 60px) 22px calc(env(safe-area-inset-bottom, 16px) + 24px);
  background:var(--navy);
  position:relative; overflow:hidden;
}
.gate-logo-icon { width: 96px !important; height: 96px !important; }
.gate-logo { gap: 18px !important; margin-bottom: 40px !important; }
.gate-logo-name { font-size: 28px !important; font-weight: 800; letter-spacing: -.5px; }
.gate-logo-tag { font-size: 11px !important; letter-spacing: 3px; }
.gate-heading h2 { font-size: 24px !important; }
.gate-heading p { font-size: 14px !important; line-height: 1.6; }
.gate-wrap::before {
  content:''; position:absolute; top:-80px; left:-80px;
  width:260px; height:260px;
  background:radial-gradient(circle,rgba(75,75,168,.3) 0%,transparent 70%);
  pointer-events:none;
}
.gate-wrap::after {
  content:''; position:absolute; bottom:-60px; right:-60px;
  width:200px; height:200px;
  background:radial-gradient(circle,rgba(26,140,140,.22) 0%,transparent 70%);
  pointer-events:none;
}
.gate-logo { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:24px; position:relative; z-index:1; }
.gate-logo-icon { width:56px; height:56px; }
.gate-logo-name { font-size:22px; font-weight:700; letter-spacing:-.5px; color:#fff; }
.gate-logo-name em { color:#6366F1; font-style:normal; }
.gate-logo-tag { font-size:8.5px; color:rgba(255,255,255,.32); letter-spacing:2.5px; text-transform:uppercase; }
.gate-heading { text-align:center; margin-bottom:20px; position:relative; z-index:1; }
.gate-heading h2 { font-size:18px; color:#fff; font-weight:700; margin-bottom:6px; }
.gate-heading p { font-size:11.5px; color:rgba(255,255,255,.55); line-height:1.6; }
.gate-form { display:flex; flex-direction:column; gap:9px; position:relative; z-index:1; }
.gate-input {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1);
  border-radius:11px; padding:11px 14px; color:#fff; font-size:11.5px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.gate-input::placeholder { color:rgba(255,255,255,.26); }
.gate-input:focus { border-color:rgba(75,75,168,.5); background:rgba(255,255,255,.1); }
.gate-btn {
  background:linear-gradient(135deg,var(--indigo),var(--ind2));
  border-radius:11px; padding:12px; color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.2px;
  margin-top:4px;
  box-shadow:0 4px 16px rgba(75,75,168,.4);
}
.gate-btn:hover { opacity:.9; transform:translateY(-1px); }
.gate-note { font-size:9px; color:rgba(255,255,255,.32); text-align:center; margin-top:14px; line-height:1.5; position:relative; z-index:1; }

/* ═══════════════════════════════════════════════════════
   PERSONA PICKER
═══════════════════════════════════════════════════════ */
.picker-wrap {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  padding:calc(env(safe-area-inset-top, 24px) + 60px) 18px 20px;
  overflow-y:auto;
}
.picker-logo {
  display:flex; flex-direction:column; align-items:center; gap:18px;
  margin-bottom:40px;
}
.picker-logo img {
  width: 96px !important;
  height: 96px !important;
}
.picker-logo-name {
  font-size: 24px !important;
  font-weight: 800;
  letter-spacing: -.5px;
}
.picker-title {
  font-size: 22px !important;
  font-weight: 700;
  margin-bottom: 8px !important;
}
.picker-sub {
  font-size: 14px !important;
  margin-bottom: 26px !important;
  line-height: 1.5;
}
.picker-logo-name { font-size:15px; font-weight:700; color:#fff; letter-spacing:-.3px; }
.picker-logo-name em { color:#6366F1; font-style:normal; }
body:not(.dark) .picker-logo-name { color:var(--body); }
.picker-title {
  font-size:15px; font-weight:700; color:#fff;
  text-align:center; margin-bottom:4px; letter-spacing:-.2px;
}
body:not(.dark) .picker-title { color:var(--body); }
.picker-sub {
  font-size:10px; color:rgba(255,255,255,.5);
  text-align:center; margin-bottom:18px; line-height:1.5; padding:0 6px;
}
body:not(.dark) .picker-sub { color:var(--muted); }

.persona-cards { display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.persona-card {
  border-radius:14px; padding:14px;
  display:flex; align-items:center; gap:12px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body:not(.dark) .persona-card {
  background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.6);
  box-shadow:0 2px 8px rgba(15,31,61,.06);
}
.persona-card:hover { transform:translateY(-2px); }
.persona-card.residential:hover { border-color:var(--indigo); box-shadow:0 6px 16px rgba(75,75,168,.2); }
.persona-card.hospitality:hover { border-color:var(--teal); box-shadow:0 6px 16px rgba(26,140,140,.2); }
.persona-card.hospitality-alt:hover { border-color:var(--teal2); box-shadow:0 6px 16px rgba(26,140,140,.2); }
.persona-card .pi {
  width:46px; height:46px; border-radius:13px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; flex-shrink:0;
}
.pi-r { background:linear-gradient(135deg,#4B4BA8,#3E3E8F); }
.pi-h { background:linear-gradient(135deg,#1A8C8C,#148080); }
.pi-host { background:linear-gradient(135deg,#1A8C8C,#0F5D5D); }
.pi-guest { background:linear-gradient(135deg,#49C1B5,#1A8C8C); }
.pc-body { flex:1; min-width:0; }
.pc-tag {
  font-size:8px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}
body:not(.dark) .pc-tag { color:var(--muted); }
.pc-t { font-size:12px; font-weight:700; color:#fff; margin-top:1px; letter-spacing:-.2px; }
body:not(.dark) .pc-t { color:var(--body); }
.pc-s { font-size:9px; color:rgba(255,255,255,.55); margin-top:2px; line-height:1.4; }
body:not(.dark) .pc-s { color:var(--muted); }
.pc-chev { margin-left:auto; font-size:18px; color:rgba(255,255,255,.3); flex-shrink:0; }
body:not(.dark) .pc-chev { color:var(--ghost); }

.picker-account {
  margin-top:auto;
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:11px; padding:10px 12px;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
body:not(.dark) .picker-account { background:rgba(255,255,255,.4); border-color:rgba(255,255,255,.5); }
.acc-mini {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,var(--indigo),var(--teal));
  color:#fff; font-weight:700; font-size:12px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.acc-info { flex:1; min-width:0; }
.acc-n { font-size:11px; font-weight:700; color:#fff; }
body:not(.dark) .acc-n { color:var(--body); }
.acc-e { font-size:9px; color:rgba(255,255,255,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
body:not(.dark) .acc-e { color:var(--muted); }
.acc-out {
  background:rgba(255,255,255,.06); border-radius:8px;
  width:30px; height:30px; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.6);
}
body:not(.dark) .acc-out { background:rgba(15,31,61,.05); color:var(--muted); }
.acc-out:hover { background:rgba(255,255,255,.12); color:#fff; }
body:not(.dark) .acc-out:hover { background:rgba(15,31,61,.1); color:var(--body); }

.picker-back {
  margin-top:14px; text-align:center;
  font-size:10px; color:rgba(255,255,255,.5); cursor:pointer;
}
body:not(.dark) .picker-back { color:var(--muted); }
.picker-back:hover { color:#fff; }
body:not(.dark) .picker-back:hover { color:var(--body); }

/* ═══════════════════════════════════════════════════════
   APP CONTAINER (used by Faza 3-5)
═══════════════════════════════════════════════════════ */
.loading { color:var(--muted); }
.spinner {
  width:32px; height:32px;
  border:3px solid var(--surf2);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════ */
.toast {
  position:absolute; bottom:86px; left:50%;
  transform:translate(-50%,16px);
  background:rgba(15,31,61,.92); color:#fff;
  font-size:10.5px; font-weight:600;
  padding:8px 14px; border-radius:100px;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .25s,transform .25s;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  z-index:200; max-width:260px; overflow:hidden; text-overflow:ellipsis;
}
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ═══════════════════════════════════════════════════════
   APP SHARED COMPONENTS (Faza 3-5)
   — Tab bar, headers, cards, lists, badges
═══════════════════════════════════════════════════════ */

/* App layout: header + body + tabs */
.app-layout { display:flex; flex-direction:column; height:100%; }

/* Header (gradient, with greeting + avatar) */
.h-hdr { padding:40px 16px 18px; flex-shrink:0; position:relative; }
body:not(.dark) .h-hdr {
  background:linear-gradient(160deg,var(--acc-10),var(--acc-10) 50%,rgba(26,140,140,.06));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
body.dark .h-hdr {
  background:linear-gradient(160deg,rgba(15,31,61,.88),rgba(26,26,62,.88) 50%,rgba(42,37,96,.88));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.h-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:14px; }
.h-g1 { font-size:13px; color:rgba(255,255,255,.65); margin-bottom:4px; font-weight:500; letter-spacing:-.1px; }
.h-g2 { font-size:22px; font-weight:700; color:#fff; letter-spacing:-.5px; line-height:1.15; }
body:not(.dark) .h-g1 { color:var(--muted); }
body:not(.dark) .h-g2 { color:var(--body); }
.h-av {
  width:46px; height:46px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; color:#fff; cursor:pointer;
  position:relative;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(75,75,168,.3);
}
body[data-scenario="hospitality"] .h-av { box-shadow:0 4px 12px rgba(26,140,140,.3); }
.av-p {
  position:absolute; top:0; right:0;
  width:11px; height:11px; background:var(--danger);
  border-radius:50%; border:2.5px solid var(--hdr);
}
body:not(.dark) .av-p { border-color:#fff; }
body:not(.dark) .av-p { border-color:#fff; }

/* Page header (sub-screens, with back button) */
.ph { background:var(--hdr); padding:38px 16px 16px; flex-shrink:0; }
body:not(.dark) .ph {
  background:linear-gradient(160deg,var(--acc-10),var(--acc-10) 50%,rgba(26,140,140,.06));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
body.dark .ph {
  background:linear-gradient(160deg,rgba(15,31,61,.88),rgba(26,26,62,.88) 50%,rgba(42,37,96,.88));
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.ph-back {
  font-size:13px; font-weight:600; color:rgba(255,255,255,.7);
  margin-bottom:14px;
  display:inline-flex; align-items:center; gap:6px;
  cursor:pointer;
  /* Bigger touch target (44px iOS standard) */
  padding:10px 14px 10px 0;
  margin-left:-4px;
  min-height:32px;
  user-select:none;
  -webkit-tap-highlight-color:rgba(255,255,255,.08);
  border-radius:8px;
  transition:color .15s, background .15s;
}
.ph-back:hover { color:rgba(255,255,255,.95); }
.ph-back:active { background:rgba(255,255,255,.06); }
body:not(.dark) .ph-back { color:var(--muted); }
body:not(.dark) .ph-back:hover { color:var(--body); }
body:not(.dark) .ph-back:active { background:rgba(15,31,61,.04); }
.ph-title { font-size:16px; font-weight:700; color:#fff; letter-spacing:-.3px; }
.ph-sub { font-size:9.5px; color:rgba(255,255,255,.45); margin-top:2px; }
body:not(.dark) .ph-title { color:var(--body); }
body:not(.dark) .ph-sub { color:var(--muted); }

/* Body scroll area */
.body-scroll {
  flex:1; overflow-y:auto;
  padding:14px 14px 82px;
  display:flex; flex-direction:column; gap:12px;
}
.body-scroll::-webkit-scrollbar { display:none; }

/* Section label */
.sc-lbl {
  font-size:9.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:1px;
  color:var(--muted); padding:0 2px;
}

/* Tab bar (bottom) */
.tbar {
  position:absolute; bottom:0; left:0; right:0; height:70px;
  background:var(--tbar); border-top:1px solid var(--line);
  display:flex; align-items:flex-start; padding-top:10px; z-index:100;
}
body:not(.dark) .tbar {
  background:rgba(240,242,247,.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 -4px 16px rgba(15,31,61,.06);
}
body.dark .tbar {
  background:rgba(15,31,61,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}
.ti {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; padding:4px 0;
}
.ti:hover .ti-l { color:var(--accent); }
.ti-i { font-size:19px; filter:grayscale(.3); }
.ti.a .ti-i { filter:none; }
.ti-l { font-size:8.5px; font-weight:600; color:var(--muted); }
.ti.a .ti-l { color:var(--accent); }

/* Cards (glass on light, dark surface on dark) */
.card { background:var(--card); border-radius:14px; box-shadow:var(--csh); }
body:not(.dark) .card {
  background:rgba(255,255,255,.4); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(15,31,61,.07),0 8px 24px rgba(75,75,168,.08);
}
body.dark .card {
  background:rgba(255,255,255,.06); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08); box-shadow:none;
}

/* Quick action grid */
.qgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.qb {
  border-radius:14px; padding:14px 12px;
  display:flex; flex-direction:column; align-items:flex-start; gap:7px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .25s;
}

/* GDPR COOKIE CONSENT BANNER */
#imo-consent {
  position:fixed; left:0; right:0; bottom:0; z-index:99999;
  display:grid; place-items:end center; pointer-events:none;
  padding: 16px;
  animation: imoCcSlide .4s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes imoCcSlide { from { transform: translateY(100%); } }
.imo-cc-card {
  pointer-events:auto;
  width: 100%; max-width: 440px;
  background: #fff; color:#0F1F3D;
  border-radius: 18px; padding: 18px 20px 16px;
  box-shadow: 0 -8px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(15,31,61,.06);
  font-family: -apple-system, system-ui, sans-serif;
}
body.dark .imo-cc-card { background:#1F2937; color:#E5E7EB; box-shadow: 0 -8px 40px rgba(0,0,0,.45); }
.imo-cc-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.imo-cc-icon { font-size:24px; }
.imo-cc-title { font-size:16px; font-weight:800; }
.imo-cc-body { font-size:12px; line-height:1.55; opacity:.85; margin-bottom:14px; }
.imo-cc-actions { display:flex; gap:8px; }
.imo-cc-btn {
  flex:1; padding:11px 14px; border-radius:11px; border:none;
  font-size:12px; font-weight:700; cursor:pointer;
  font-family: inherit;
  transition: transform .15s, opacity .15s;
}
.imo-cc-btn:active { transform: scale(.96); }
.imo-cc-btn:hover { opacity: .9; }
.imo-cc-block { width:100%; flex: none; margin-top: 10px; }
.imo-cc-primary { background: linear-gradient(135deg, #5B5FCF, #4548B8); color:#fff; }
.imo-cc-secondary { background:#F1F5F9; color:#0F1F3D; }
body.dark .imo-cc-secondary { background:#374151; color:#E5E7EB; }
.imo-cc-detail {
  display:none;
  margin-top:14px; padding-top:14px;
  border-top:1px solid rgba(15,31,61,.08);
}
body.dark .imo-cc-detail { border-top-color: rgba(255,255,255,.08); }
.imo-cc-detail.open { display:block; animation: imoCcExpand .25s ease; }
@keyframes imoCcExpand { from { opacity:0; transform: translateY(-4px); } }
.imo-cc-cat { padding: 8px 0; }
.imo-cc-cat + .imo-cc-cat { border-top: 1px solid rgba(15,31,61,.05); }
body.dark .imo-cc-cat + .imo-cc-cat { border-top-color: rgba(255,255,255,.05); }
.imo-cc-cat-row {
  display:flex; align-items:flex-start; gap:10px;
  cursor:pointer;
}
.imo-cc-cat-row input[type="checkbox"] {
  width:18px; height:18px; margin-top:2px; accent-color: #5B5FCF; flex-shrink:0;
}
.imo-cc-cat-info { flex:1; min-width:0; }
.imo-cc-cat-label { font-size:12px; font-weight:700; }
.imo-cc-cat-desc { font-size:10.5px; opacity:.7; line-height:1.4; margin-top:2px; }
.imo-cc-foot {
  margin-top:14px; padding-top:10px;
  border-top: 1px solid rgba(15,31,61,.05);
  font-size:9.5px; opacity:.6; text-align:center; line-height:1.5;
}
body.dark .imo-cc-foot { border-top-color: rgba(255,255,255,.05); }

/* PAYMENT MODAL — Card vs Transfer choice */
.pm-opt {
  display:flex; align-items:center; gap:12px; width:100%;
  padding:14px; border-radius:13px; border:1px solid var(--line);
  background:var(--surf); color:var(--body); cursor:pointer;
  margin-bottom:6px; text-align:left;
  transition: transform .15s, box-shadow .15s;
}
.pm-opt:active { transform: scale(.98); }
.pm-opt:hover { box-shadow: 0 4px 14px rgba(91,95,207,.15); }
.pm-opt-icon { width:42px; height:42px; border-radius:10px; display:grid; place-items:center; font-size:20px; flex-shrink:0; }
.pm-opt-body { flex:1; min-width:0; }
.pm-opt-title { font-size:13px; font-weight:700; color:var(--body); }
.pm-opt-sub { font-size:10.5px; color:var(--muted); margin-top:2px; line-height:1.4; }
.pm-save { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); cursor:pointer; padding:0 2px; }
.pm-save input { width:16px; height:16px; accent-color:var(--accent); }
.tr-row { display:flex; justify-content:space-between; align-items:center; padding:9px 0; gap:10px; }
.tr-row + .tr-row { border-top:1px solid var(--line); }
.tr-l { font-size:10.5px; color:var(--muted); }
.tr-v { font-size:12px; color:var(--body); font-weight:600; text-align:right; }

/* HOME EDIT MODE */
.home-edit-bar {
  display:flex; align-items:center; justify-content:space-between;
  margin:14px 0 10px;
}
.he-btn {
  font-size:11px; font-weight:600; padding:7px 12px; border-radius:10px;
  background:var(--surf2); color:var(--body); border:1px solid var(--line);
  cursor:pointer; display:inline-flex; align-items:center; gap:4px;
}
.he-btn-primary { background:var(--accent); color:#fff; border-color:transparent; }
.he-btn:active { transform:scale(.96); }

.qb.qb-edit {
  border:2px dashed var(--accent);
  animation: qbWiggle 1.6s ease-in-out infinite;
  cursor:default;
}
@keyframes qbWiggle {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-.7deg); }
  75%     { transform: rotate(.7deg); }
}
.qb-edit-bar {
  position:absolute; top:6px; right:6px; display:flex; gap:3px; z-index:2;
}
.qb-eb {
  width:24px; height:24px; border-radius:8px; border:none;
  background:rgba(0,0,0,.55); color:#fff; font-size:11px; font-weight:700;
  cursor:pointer; display:grid; place-items:center; padding:0;
}
.qb-eb:disabled { opacity:.3; cursor:not-allowed; }
.qb-eb-del { background:#EF4444; }
.qb-hidden {
  background:repeating-linear-gradient(45deg, var(--surf2), var(--surf2) 8px, transparent 8px, transparent 16px);
  border:1px dashed var(--line);
  cursor:pointer;
}

/* MARKETPLACE CATEGORY CARDS — premium look with gradients + animations */
.qb.mp-cat {
  padding:16px 14px 18px;
  min-height:120px;
  border-radius:16px;
  position:relative;
  overflow:hidden;
}
.qb.mp-cat::before {
  content:'';
  position:absolute;
  inset:0;
  background:var(--cat-grad);
  opacity:.18;
  z-index:0;
  transition:opacity .3s;
}
body.dark .qb.mp-cat::before { opacity:.25; }
.qb.mp-cat::after {
  /* Decorative blob in corner */
  content:'';
  position:absolute;
  top:-20px; right:-20px;
  width:80px; height:80px;
  background:var(--cat-grad);
  opacity:.4;
  border-radius:50%;
  filter:blur(18px);
  z-index:0;
  transition:transform .4s;
}
.qb.mp-cat:hover { transform:translateY(-3px); box-shadow:0 12px 28px var(--cat-shadow); }
.qb.mp-cat:hover::after { transform:scale(1.4) translate(8px,-8px); }
.qb.mp-cat:active { transform:translateY(0) scale(.97); }

.qb.mp-cat > * { position:relative; z-index:1; }

.qb.mp-cat .qb-i {
  width:44px; height:44px;
  border-radius:12px;
  background:var(--cat-icon-bg);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  box-shadow:0 4px 12px var(--cat-shadow);
  animation:catBreath 3s ease-in-out infinite;
  margin-bottom:4px;
}
.qb.mp-cat:hover .qb-i { animation:catWiggle .6s ease-in-out; }

.qb.mp-cat .qb-l {
  font-size:13px; font-weight:700;
  color:var(--body); letter-spacing:-.2px;
}
.qb.mp-cat .qb-s {
  font-size:10.5px;
  color:var(--muted);
  display:flex; align-items:center; gap:4px;
}
.qb.mp-cat .qb-s::after {
  content:'›';
  font-size:14px;
  color:var(--cat-accent);
  font-weight:700;
  margin-left:auto;
  transition:transform .25s;
}
.qb.mp-cat:hover .qb-s::after { transform:translateX(4px); }

@keyframes catBreath {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.06); }
}
@keyframes catWiggle {
  0%   { transform:rotate(0deg) scale(1); }
  25%  { transform:rotate(-8deg) scale(1.1); }
  50%  { transform:rotate(6deg) scale(1.1); }
  75%  { transform:rotate(-4deg) scale(1.05); }
  100% { transform:rotate(0deg) scale(1); }
}

/* Category-specific palettes (subtle, brand-aligned) */
.qb.mp-cat.cat-curatenie {
  --cat-grad:linear-gradient(135deg,#5B5FCF,#7B7FE3);
  --cat-icon-bg:linear-gradient(135deg,#5B5FCF,#4548B8);
  --cat-shadow:rgba(91,95,207,.25);
  --cat-accent:#5B5FCF;
}
.qb.mp-cat.cat-reparatii {
  --cat-grad:linear-gradient(135deg,#F59E0B,#FBBF24);
  --cat-icon-bg:linear-gradient(135deg,#F59E0B,#D97706);
  --cat-shadow:rgba(245,158,11,.25);
  --cat-accent:#D97706;
}
.qb.mp-cat.cat-pet {
  --cat-grad:linear-gradient(135deg,#1A8C8C,#2BAFAF);
  --cat-icon-bg:linear-gradient(135deg,#1A8C8C,#148080);
  --cat-shadow:rgba(26,140,140,.25);
  --cat-accent:#1A8C8C;
}
.qb.mp-cat.cat-wellness {
  --cat-grad:linear-gradient(135deg,#EC4899,#F472B6);
  --cat-icon-bg:linear-gradient(135deg,#EC4899,#BE185D);
  --cat-shadow:rgba(236,72,153,.25);
  --cat-accent:#EC4899;
}
.qb.mp-cat.cat-booking {
  --cat-grad:linear-gradient(135deg,#10B981,#34D399);
  --cat-icon-bg:linear-gradient(135deg,#10B981,#059669);
  --cat-shadow:rgba(16,185,129,.25);
  --cat-accent:#10B981;
}
.qb.mp-cat.cat-car {
  --cat-grad:linear-gradient(135deg,#EF4444,#F87171);
  --cat-icon-bg:linear-gradient(135deg,#EF4444,#B91C1C);
  --cat-shadow:rgba(239,68,68,.25);
  --cat-accent:#EF4444;
}

/* ─── PROFILE HERO (centered avatar + name + tags, theme-aware) ─── */
.profile-hero {
  text-align: center;
  padding: 36px 20px 26px;
  position: relative;
}
body:not(.dark) .profile-hero {
  background: linear-gradient(160deg, var(--acc-10), var(--acc-10) 50%, rgba(26,140,140,.06));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
body.dark .profile-hero {
  background: linear-gradient(160deg, rgba(15,31,61,.88), rgba(26,26,62,.88) 50%, rgba(42,37,96,.88));
}
.profile-avatar {
  width: 90px; height: 90px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 700; color: #fff;
  box-shadow: 0 0 0 5px rgba(91,95,207,.15), 0 8px 24px rgba(91,95,207,.4);
}
body[data-scenario="hospitality"] .profile-avatar {
  box-shadow: 0 0 0 5px rgba(26,140,140,.15), 0 8px 24px rgba(26,140,140,.4);
}
.profile-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--body);
  letter-spacing: -.4px;
  line-height: 1.2;
  margin-bottom: 6px;
}
.profile-sub {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 18px;
  line-height: 1.5;
}
.profile-tags {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-tag {
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--body);
  font-weight: 600;
}
body.dark .profile-tag {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.14);
}

/* ─── SMOOBU STATUS BAR (Host home) ─── */
.smoobu-status {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--csh);
}
body:not(.dark) .smoobu-status {
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255,255,255,.7);
}
.smoobu-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.smoobu-pulse {
  width: 8px; height: 8px;
  background: #10B981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16,185,129,.6);
  animation: smoobuPulse 1.8s infinite;
}
@keyframes smoobuPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.6); }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.smoobu-label {
  font-size: 11px;
  color: var(--body);
  font-weight: 500;
  flex: 1;
}
.smoobu-label strong { color: var(--accent); font-weight: 700; }
.smoobu-channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.ch-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px 5px 5px;
  background: var(--surf2);
  border: 1px solid var(--line);
  border-radius: 100px;
  transition: opacity .2s;
}
.ch-badge {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 800;
  font-family: ui-sans-serif, system-ui, sans-serif;
  flex-shrink: 0;
}
.ch-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--body);
  flex: 1;
}
.ch-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
}
.ch-dot.ok  { background: #10B981; box-shadow: 0 0 6px rgba(16,185,129,.5); }
.ch-dot.off { background: rgba(127,127,127,.5); }

/* Stagger entrance animation */
.qb.mp-cat { animation:catEntrance .5s cubic-bezier(.2,.9,.3,1.1) backwards; }
.qb.mp-cat:nth-child(1) { animation-delay:0ms; }
.qb.mp-cat:nth-child(2) { animation-delay:60ms; }
.qb.mp-cat:nth-child(3) { animation-delay:120ms; }
.qb.mp-cat:nth-child(4) { animation-delay:180ms; }
.qb.mp-cat:nth-child(5) { animation-delay:240ms; }
.qb.mp-cat:nth-child(6) { animation-delay:300ms; }
@keyframes catEntrance {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
body:not(.dark) .qb {
  background:rgba(255,255,255,.4); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 2px 8px rgba(15,31,61,.07),0 8px 24px rgba(75,75,168,.1);
}
body:not(.dark) .qb:hover {
  background:rgba(255,255,255,.6);
  box-shadow:0 4px 12px rgba(15,31,61,.1),0 12px 32px rgba(75,75,168,.15);
  transform:translateY(-2px);
}
body.dark .qb {
  background:rgba(255,255,255,.06); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.08);
}
body.dark .qb:active { background:rgba(255,255,255,.12); }
.qb-i {
  width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; background:var(--acc-10);
}
.qb-l { font-size:10.5px; font-weight:700; color:var(--body); }
.qb-s { font-size:8.5px; color:var(--muted); }

/* Badges */
.b {
  border-radius:100px; padding:2px 9px;
  font-size:8px; font-weight:700; white-space:nowrap;
  display:inline-block;
}
.b-paid { background:rgba(16,185,129,.12); color:#059669; }
.b-due  { background:rgba(245,158,11,.12); color:#D97706; }
.b-over { background:rgba(239,68,68,.12); color:#DC2626; }
.b-blue { background:var(--indb10); color:var(--indigo); }
.b-teal { background:var(--tealb10); color:var(--teal); }
.b-warn { background:rgba(245,158,11,.12); color:#D97706; }
.b-ok   { background:rgba(16,185,129,.12); color:#059669; }
.b-comp { background:rgba(100,116,139,.1); color:var(--muted); }
.b-dang { background:rgba(239,68,68,.12); color:#DC2626; }

/* Hero / balance card (gradient with accent) */
.hero {
  border-radius:18px; padding:16px; color:#fff;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 8px 28px var(--acc-20);
}
.hero::before {
  content:''; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; background:rgba(255,255,255,.06); border-radius:50%;
}
.hero::after {
  content:''; position:absolute; right:20px; bottom:-40px;
  width:90px; height:90px; background:rgba(255,255,255,.04); border-radius:50%;
}
.hero-l { font-size:8px; color:rgba(255,255,255,.55); text-transform:uppercase; letter-spacing:1px; position:relative; }
.hero-v { font-size:30px; font-weight:800; color:#fff; letter-spacing:-1px; margin-top:4px; position:relative; }
.hero-s { font-size:9px; color:rgba(255,255,255,.6); position:relative; margin-top:2px; }
.hero-status { font-size:8px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.7); position:relative; }
.hero-t { font-size:16px; font-weight:700; color:#fff; margin-top:2px; letter-spacing:-.3px; position:relative; }
.hero-mini { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-top:14px; position:relative; z-index:2; }
.mini-c {
  background:rgba(255,255,255,.12); border-radius:9px; padding:8px 9px;
  text-align:center; border:1px solid rgba(255,255,255,.1);
}
.mini-l { font-size:8px; color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.8px; }
.mini-v { font-size:13px; font-weight:700; color:#fff; margin-top:2px; letter-spacing:-.2px; }
.hero-btns { display:flex; gap:8px; margin-top:14px; position:relative; }
.hero-b1 {
  flex:1; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2);
  border-radius:9px; padding:9px; color:#fff; font-size:10px; font-weight:700;
}
.hero-b2 {
  flex:1; background:#fff; border-radius:9px; padding:9px;
  color:var(--accent); font-size:10px; font-weight:700;
}

/* List items */
.list-item {
  display:flex; align-items:center; gap:11px;
  padding:11px 13px; border-bottom:1px solid var(--line);
  cursor:pointer;
}
.list-item:last-child { border-bottom:none; }
.list-item:hover { background:var(--surf2); }
.li-ico {
  width:33px; height:33px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px; flex-shrink:0;
  background:var(--acc-10);
}
.li-body { flex:1; min-width:0; }
.li-t { font-size:11px; font-weight:600; color:var(--body); }
.li-s { font-size:9px; color:var(--muted); margin-top:2px; }
.li-r { text-align:right; flex-shrink:0; }
.li-v { font-size:11px; font-weight:700; color:var(--body); }

/* Buttons */
.btn-prim {
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border-radius:11px; padding:12px; color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.2px;
  box-shadow:0 4px 16px var(--acc-20);
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.btn-prim:hover { opacity:.95; transform:translateY(-1px); }
.btn-prim:active { transform:translateY(0); }
.btn-block { width:100%; }
.btn-sm { padding:8px 12px; font-size:11px; }

/* Modal — enhanced with smoother slide-up (cubic-bezier overshoot) */
.modal-overlay {
  position:absolute; inset:0;
  background:rgba(0,0,0,.4); z-index:300;
  display:flex; align-items:flex-end;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  animation:fadein .25s ease-out;
}
@keyframes fadein { from { opacity:0; backdrop-filter:blur(0); -webkit-backdrop-filter:blur(0); } to { opacity:1; } }
.modal {
  background:var(--card); border-radius:24px 24px 0 0;
  padding:24px 18px 30px; width:100%;
  max-height:80%; overflow-y:auto;
  animation:slideup .42s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.25);
}
body:not(.dark) .modal { background:#fff; }
@keyframes slideup { 0% { transform:translateY(100%); } 100% { transform:translateY(0); } }

/* Modal grabber for visual hint */
.modal::before {
  content:''; display:block;
  width:36px; height:4px;
  background:var(--line);
  border-radius:2px;
  margin:-10px auto 14px;
}

/* ═══════════════════════════════════════════════════════
   POLISH: SCREEN TRANSITIONS
═══════════════════════════════════════════════════════ */
.app-layout {
  animation:screenIn .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes screenIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* Tab change subtle ripple */
.ti.a { animation:tabPulse .25s ease-out; }
@keyframes tabPulse {
  0%   { transform:scale(1); }
  50%  { transform:scale(1.08); }
  100% { transform:scale(1); }
}

/* ═══════════════════════════════════════════════════════
   POLISH: LOADING SKELETONS
═══════════════════════════════════════════════════════ */
.skeleton {
  background:linear-gradient(90deg, var(--surf2) 25%, rgba(255,255,255,.06) 50%, var(--surf2) 75%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
  border-radius:8px;
}
body:not(.dark) .skeleton {
  background:linear-gradient(90deg, #E8EDF4 25%, #F8F9FB 50%, #E8EDF4 75%);
  background-size:200% 100%;
}
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }

.skel-card { padding:16px; margin-bottom:12px; }
.skel-line { height:12px; margin-bottom:8px; }
.skel-line.short { width:40%; }
.skel-line.medium { width:60%; }
.skel-line.long { width:90%; }
.skel-line.title { height:18px; width:50%; margin-bottom:14px; }
.skel-block { height:80px; margin-bottom:14px; border-radius:14px; }

/* ═══════════════════════════════════════════════════════
   POLISH: CONFETTI ON PAYMENT SUCCESS
═══════════════════════════════════════════════════════ */
.confetti-container {
  position:absolute; inset:0;
  pointer-events:none; z-index:500;
  overflow:hidden;
}
.confetti-piece {
  position:absolute; top:-20px;
  width:10px; height:14px;
  border-radius:2px;
  animation:confettiFall 2.4s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes confettiFall {
  0% {
    transform:translateY(0) rotate(0deg) scale(1);
    opacity:1;
  }
  100% {
    transform:translateY(110vh) rotate(720deg) scale(.5);
    opacity:0;
  }
}

/* Success "pop" badge that appears mid-screen */
.success-pop {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%) scale(0);
  z-index:550;
  background:linear-gradient(135deg, var(--ok), #059669);
  color:#fff;
  padding:24px 32px;
  border-radius:20px;
  font-size:16px; font-weight:700;
  box-shadow:0 20px 60px rgba(16,185,129,.5);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:successPop .8s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
}
.success-pop .ico { font-size:40px; line-height:1; }
@keyframes successPop {
  0%   { transform:translate(-50%, -50%) scale(0) rotate(-15deg); opacity:0; }
  60%  { transform:translate(-50%, -50%) scale(1.15) rotate(5deg); opacity:1; }
  80%  { transform:translate(-50%, -50%) scale(.95); opacity:1; }
  100% { transform:translate(-50%, -50%) scale(1); opacity:1; }
}
.success-pop.fade-out { animation:successFade .4s ease-out forwards; }
@keyframes successFade {
  to { opacity:0; transform:translate(-50%, -50%) scale(.9); }
}
.modal h2 { font-size:16px; font-weight:700; color:var(--body); margin-bottom:14px; }
.modal-grabber { width:40px; height:4px; background:var(--line); border-radius:2px; margin:-12px auto 14px; }

/* Form fields (modal) */
.field { margin-bottom:11px; }
.field label {
  display:block; font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:.8px;
  color:var(--muted); margin-bottom:4px;
}
.field input, .field textarea, .field select {
  width:100%; padding:10px 12px;
  background:var(--surf2); border:1px solid var(--line);
  border-radius:10px; color:var(--body); font-size:12px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color:var(--accent); background:var(--surf);
}
.field textarea { min-height:70px; resize:vertical; }

/* Empty state */
.empty {
  text-align:center; padding:32px 16px;
  color:var(--muted); font-size:11px;
}
.empty .emp-i { font-size:40px; margin-bottom:10px; opacity:.5; }