:root{
      --vri-midnight:#0B132B;
      --vri-bluev:#1C2541;
      --vri-neon:#5BC0BE;

      --teal-600:#2563EB;
      --teal-700:#1D4ED8;
      --ink:#0f172a;
      --muted:#64748b;
      --line:#e5e7eb;
      --paper:#ffffff;
      --paper-soft:#f8fafc;
      --shadow-ui:0 12px 40px rgba(2,6,23,.12);
      --shadow-card:0 10px 24px rgba(2,6,23,.10);
      --radius-lg:16px;
    }

    html, body { font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial; }

    .invoice-box{
      margin:auto; padding:28px;
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow-ui);
      font-size:14px; line-height:1.5; color:var(--ink);
    }

    .invoice-divider{
      height:4px; border:0; margin:10px 0 18px;
      background:linear-gradient(90deg, var(--teal-600), rgba(37,99,235,0.12));
      border-radius:999px;
    }

    .stamp-wrap{ position:relative; height:100px; }
    .stamp-wrap img{
      position:absolute; right:10px; top:-6px; width:140px;
      opacity:.42; transform:rotate(-12deg);
      filter:saturate(0.9) contrast(1.05);
    }

    .avoid-break, .avoid-break *{ break-inside:avoid; page-break-inside:avoid; }

    .editable-chip[contenteditable="true"]{
      border-bottom:2px dashed rgba(37,99,235,.6);
      padding:0 .25rem; outline:0; border-radius:.25rem;
    }
    .editable-chip[contenteditable="true"]:focus{
      background:#eff6ff;
      box-shadow:0 0 0 3px rgba(37,99,235,.25) inset;
    }

    .btn-disabled{opacity:.55; cursor:not-allowed !important;}

    .spinner{
      border:4px solid rgba(255,255,255,0.18);
      border-left-color:#fff;
      border-radius:50%;
      width:18px; height:18px;
      animation:spin 1s linear infinite;
      display:inline-block;
    }
    @keyframes spin{ to{ transform:rotate(360deg);} }

    /* Invoice Details table style */
    .invoice-box table.invoice-table{
      width:100%;
      border-collapse:collapse;
      table-layout:fixed;
      font-size:12px;
      border-radius:10px;
      overflow:hidden;
      border:1px solid var(--line);
      background:#fff;
    }
    .invoice-box table.invoice-table th{
      background:var(--teal-600);
      color:#fff;
      font-weight:700;
      padding:8px 8px;
      border:1px solid rgba(255,255,255,.12);
    }
    .invoice-box table.invoice-table td{
      border:1px solid var(--line);
      padding:7px 8px;
      vertical-align:top;
      white-space:normal;
      word-break:break-word;
    }
    .invoice-box table.invoice-table tbody tr:nth-child(even){ background:rgba(15,23,42,.02); }



    body{
      background:
        radial-gradient(circle at top left, rgba(37,99,235,.08), transparent 28%),
        radial-gradient(circle at bottom right, rgba(14,165,233,.08), transparent 24%),
        #f8fafc;
    }

    .app-loader{
      position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center;
      opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
      background:rgba(2,6,23,.72);
      backdrop-filter:blur(16px);
    }
    .app-loader.is-visible{ opacity:1; visibility:visible; }
    .app-loader__backdrop{
      position:absolute; inset:0;
      background:
        radial-gradient(circle at 20% 20%, rgba(34,211,238,.24), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(168,85,247,.22), transparent 24%),
        radial-gradient(circle at 50% 80%, rgba(16,185,129,.18), transparent 26%);
      filter:blur(14px);
    }
    .app-loader__panel{
      position:relative; width:min(92vw, 520px); min-height:320px; border-radius:32px;
      border:1px solid rgba(255,255,255,.16);
      background:linear-gradient(180deg, rgba(15,23,42,.88), rgba(15,23,42,.74));
      box-shadow:0 30px 80px rgba(2,6,23,.45);
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      overflow:hidden; padding:2rem 1.5rem;
    }
    .app-loader__ring{
      position:absolute; border-radius:999px; border:1px solid rgba(255,255,255,.1);
      animation:loaderFloat 6s ease-in-out infinite;
    }
    .app-loader__ring--one{ width:220px; height:220px; border-color:rgba(34,211,238,.32); }
    .app-loader__ring--two{
      width:300px; height:300px; border-color:rgba(168,85,247,.24);
      animation-duration:8s;
    }
    .app-loader__core{
      position:relative; width:96px; height:96px; border-radius:28px;
      background:linear-gradient(145deg, rgba(15,23,42,.98), rgba(30,41,59,.92));
      border:1px solid rgba(94,234,212,.3);
      display:flex; align-items:center; justify-content:center;
      box-shadow:0 0 0 10px rgba(34,211,238,.06), 0 18px 38px rgba(34,211,238,.18);
      z-index:1;
      animation:loaderPulse 2.4s ease-in-out infinite;
    }
    .app-loader__logo{ width:62px; height:62px; object-fit:contain; }
    .app-loader__text{ position:relative; z-index:1; text-align:center; margin-top:1.4rem; max-width:360px; }
    .app-loader__eyebrow{
      font-size:.72rem; letter-spacing:.34em; text-transform:uppercase; color:#7dd3fc; margin-bottom:.55rem;
    }
    .app-loader__title{
      margin:0; font-size:1.65rem; line-height:1.1; font-weight:800; color:#f8fafc;
    }
    .app-loader__label{
      margin:.75rem 0 0; color:#cbd5e1; font-size:.92rem;
    }
    .app-loader__bar{
      width:100%; height:8px; border-radius:999px; background:rgba(148,163,184,.16);
      overflow:hidden; margin-top:1rem;
    }
    .app-loader__bar span{
      display:block; width:38%; height:100%; border-radius:999px;
      background:linear-gradient(90deg, #22d3ee, #34d399, #818cf8);
      animation:loaderBar 1.6s ease-in-out infinite;
    }
    @keyframes loaderPulse{
      0%,100%{ transform:scale(1); box-shadow:0 0 0 10px rgba(34,211,238,.06), 0 18px 38px rgba(34,211,238,.18); }
      50%{ transform:scale(1.04); box-shadow:0 0 0 16px rgba(34,211,238,.08), 0 22px 46px rgba(56,189,248,.24); }
    }
    @keyframes loaderFloat{
      0%,100%{ transform:translateY(0) rotate(0deg); }
      50%{ transform:translateY(-8px) rotate(6deg); }
    }
    @keyframes loaderBar{
      0%{ transform:translateX(-120%); }
      100%{ transform:translateX(320%); }
    }

    .invoice-preview-shell{
      position:relative;
      border-radius:28px;
      border:1px solid rgba(148,163,184,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.94)),
        radial-gradient(circle at top right, rgba(56,189,248,.10), transparent 28%);
      box-shadow:0 24px 60px rgba(2,6,23,.10);
      padding:1.1rem;
      overflow:hidden;
    }
    .invoice-preview-shell::before{
      content:"";
      position:absolute; inset:0 auto auto 0; width:220px; height:220px;
      background:radial-gradient(circle, rgba(56,189,248,.16), transparent 68%);
      pointer-events:none;
    }
    .invoice-preview-head{
      position:relative; z-index:1; display:flex; gap:.85rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
      padding:.62rem .7rem .78rem; border-radius:20px; border:1px solid rgba(148,163,184,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.84));
      box-shadow:0 10px 26px rgba(2,6,23,.05);
    }
    .invoice-preview-meta{ display:flex; align-items:center; gap:.75rem; min-width:0; flex-wrap:wrap; }
    .invoice-preview-kicker{
      display:inline-flex; align-items:center; gap:.4rem;
      padding:.35rem .68rem; border-radius:999px; background:#dbeafe; color:#1d4ed8; font-size:.68rem; font-weight:800;
      letter-spacing:.08em; text-transform:uppercase;
    }
    .invoice-preview-kicker::before{
      content:""; width:.48rem; height:.48rem; border-radius:999px; background:#22c55e; box-shadow:0 0 0 5px rgba(34,197,94,.14);
    }
    .invoice-preview-title-wrap{ min-width:0; }
    .invoice-preview-title{ margin:0; font-size:1rem; font-weight:800; color:#0f172a; line-height:1.1; }
    .invoice-preview-subtitle{ margin:.12rem 0 0; color:#64748b; font-size:.76rem; max-width:32rem; }
    .invoice-preview-chip{
      display:inline-flex; align-items:center; gap:.4rem; padding:.34rem .68rem; border-radius:999px;
      border:1px solid rgba(37,99,235,.12); background:#eff6ff; color:#1d4ed8; font-size:.68rem; font-weight:700;
    }
    .invoice-toolbar{ display:flex; gap:.55rem; flex-wrap:wrap; justify-content:flex-end; }
    .invoice-toolbar button{
      border-radius:12px; padding:.68rem .92rem; box-shadow:none; min-height:42px; font-size:.84rem;
    }
    #invoiceBox{ position:relative; z-index:1; margin-top:.9rem; }
    .field-error{ border-color:#ef4444 !important; box-shadow:0 0 0 3px rgba(239,68,68,.14) !important; background:#fff7f7 !important; }

    .invoice-box{
      margin:auto; padding:30px;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
      border:1px solid #dbe4f0;
      border-radius:26px;
      box-shadow:0 18px 55px rgba(2,6,23,.12);
      font-size:14px; line-height:1.6; color:var(--ink);
      overflow:hidden;
    }
    .invoice-hero{
      position:relative; overflow:hidden; padding:1.25rem 1.35rem; border-radius:24px;
      background:
        linear-gradient(135deg, rgba(13,148,136,.08), rgba(37,99,235,.10)),
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.90));
      border:1px solid #dbeafe;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
    }
    .invoice-hero::after{
      content:""; position:absolute; inset:auto -40px -70px auto; width:180px; height:180px; border-radius:999px;
      background:radial-gradient(circle, rgba(59,130,246,.18), transparent 68%);
      pointer-events:none;
    }
    .invoice-brand{ display:flex; align-items:flex-start; gap:1rem; }
    .invoice-logo-badge{
      width:72px; height:72px; border-radius:22px; flex:0 0 auto;
      display:flex; align-items:center; justify-content:center;
      background:linear-gradient(145deg, #ffffff, #eff6ff);
      border:1px solid rgba(37,99,235,.16);
      box-shadow:0 12px 24px rgba(37,99,235,.14);
    }
    .invoice-logo-badge img{ width:52px; height:52px; object-fit:contain; }
    .invoice-company-title{ font-size:1.6rem; line-height:1.05; font-weight:800; color:#0f172a; margin:0; }
    .invoice-company-address{ margin-top:.45rem; font-size:.78rem; color:#475569; white-space:pre-line; max-width:28rem; }
    .invoice-badge-row{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:.8rem; }
    .invoice-badge{
      display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .8rem; border-radius:999px;
      font-size:.72rem; font-weight:800; letter-spacing:.02em; border:1px solid transparent;
    }
    .invoice-badge--type{ background:#e0f2fe; color:#0369a1; border-color:#bae6fd; }
    .invoice-badge--paid{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
    .invoice-badge--due{ background:#fef3c7; color:#92400e; border-color:#fde68a; }
    .invoice-badge--cancel{ background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
    .invoice-meta-grid{
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin-top:1rem;
      width:min(100%, 320px);
    }
    .invoice-meta-card{
      padding:.85rem .95rem; border-radius:18px; background:rgba(255,255,255,.84); border:1px solid rgba(148,163,184,.18);
      box-shadow:0 10px 22px rgba(15,23,42,.08);
    }
    .invoice-meta-label{ font-size:.72rem; color:#64748b; text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
    .invoice-meta-value{ margin-top:.3rem; font-size:1rem; font-weight:800; color:#0f172a; word-break:break-word; }
    .invoice-soft-card{
      padding:1rem 1.1rem; border-radius:18px; background:linear-gradient(180deg, #fff, #f8fbff); border:1px solid #e2e8f0;
      box-shadow:0 10px 26px rgba(2,6,23,.06);
    }
    .invoice-section-title{
      display:flex; align-items:center; justify-content:space-between; gap:.75rem;
      padding:.85rem 1rem; border-radius:18px 18px 0 0;
      color:#fff; font-weight:800; letter-spacing:.01em;
      background:linear-gradient(90deg, #1d4ed8, #0891b2);
      box-shadow:0 12px 24px rgba(29,78,216,.18);
    }
    .invoice-summary-grid{
      display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.85rem; margin:1.2rem 0 1.4rem;
    }
    .invoice-summary-card{
      border-radius:20px; padding:1rem 1rem 1.05rem;
      background:linear-gradient(180deg, #fff, #f8fafc); border:1px solid #e2e8f0;
      box-shadow:0 10px 28px rgba(2,6,23,.08);
      min-height:106px;
    }
    .invoice-summary-card__label{
      font-size:.72rem; color:#64748b; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
    }
    .invoice-summary-card__value{
      margin-top:.55rem; font-size:1.15rem; font-weight:800; color:#0f172a; line-height:1.3;
    }
    .invoice-summary-card__hint{ margin-top:.5rem; font-size:.78rem; color:#64748b; }
    .invoice-summary-card--accent{
      background:linear-gradient(135deg, rgba(29,78,216,.94), rgba(8,145,178,.96));
      border-color:rgba(14,116,144,.18);
      color:#fff;
    }
    .invoice-summary-card--accent .invoice-summary-card__label,
    .invoice-summary-card--accent .invoice-summary-card__value,
    .invoice-summary-card--accent .invoice-summary-card__hint{ color:#fff; }
    .invoice-stamp-card{
      position:relative; display:flex; align-items:center; justify-content:center;
      overflow:hidden;
    }
    .invoice-stamp-card img{
      width:128px; opacity:.36; transform:rotate(-12deg);
      filter:saturate(1) contrast(1.02);
    }
    .invoice-side-grid{
      display:grid; grid-template-columns:1.15fr .85fr; gap:1rem; align-items:stretch; margin-top:1rem;
    }
    .invoice-sign-card{
      position:relative; min-height:180px; display:flex; align-items:flex-end; justify-content:flex-end; text-align:right;
    }
    .invoice-sign-stamp{
      position:absolute; right:22px; top:42px; width:128px; opacity:.44; transform:rotate(-14deg);
    }
    .invoice-footer{
      margin-top:1.15rem; text-align:center; font-size:.8rem; color:#475569; padding:1rem 1.1rem;
      border-radius:18px; background:linear-gradient(180deg, #f8fafc, #eff6ff); border:1px solid #dbeafe;
    }
    .invoice-box table:not(.invoice-table){
      border-collapse:separate; border-spacing:0; width:100%;
    }
    .invoice-box table:not(.invoice-table) td,
    .invoice-box table:not(.invoice-table) th{
      border-color:#dbe4f0;
    }
    .invoice-box table:not(.invoice-table) tr:last-child td:first-child{ border-bottom-left-radius:14px; }
    .invoice-box table:not(.invoice-table) tr:last-child td:last-child{ border-bottom-right-radius:14px; }
    .invoice-box p.bg-teal-600,
    .invoice-box p.bg-sky-600,
    .invoice-box p.bg-indigo-600{
      border-radius:18px 18px 0 0 !important;
      padding:.85rem 1rem !important;
      font-weight:800 !important;
      letter-spacing:.01em;
      box-shadow:0 12px 24px rgba(29,78,216,.15);
    }
    .invoice-box .stamp-wrap{ height:0; display:none; }


    .glass-card{
      background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.88));
      border:1px solid rgba(148,163,184,.18);
      box-shadow:0 10px 30px rgba(2,6,23,.08);
      border-radius:22px;
      backdrop-filter:blur(14px);
    }
    .section-shell{background:#fff;border:1px solid #e2e8f0;box-shadow:0 10px 30px rgba(2,6,23,.08);border-radius:22px;}
    .soft-panel{background:linear-gradient(180deg,#f8fbff,#f6fafe);border:1px solid #dbeafe;border-radius:18px;}
    .chip-tab{border-radius:999px;font-weight:700;transition:.2s ease;padding:.72rem 1rem}
    .chip-tab.active{background:linear-gradient(135deg,#1D4ED8,#06B6D4);color:#fff;box-shadow:0 14px 32px rgba(29,78,216,.24)}
    .chip-tab:not(.active){background:#eef2f7;color:#334155}
    .doc-pill{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .58rem;border-radius:999px;font-size:.72rem;font-weight:700}
    .doc-status-uploaded{background:#dcfce7;color:#166534}
    .doc-status-verified{background:#dbeafe;color:#1d4ed8}
    .doc-status-pending{background:#fef3c7;color:#92400e}
    .doc-status-rejected{background:#fee2e2;color:#b91c1c}
    .doc-status-na{background:#e2e8f0;color:#334155}
    .doc-card{border:1px solid #dbeafe;background:linear-gradient(180deg,#ffffff,#f8fbff);border-radius:16px;padding:14px}
    .form-field label{display:block;font-size:.875rem;font-weight:600;margin-bottom:.35rem;color:#334155}
    .form-field input,.form-field textarea,.form-field select{width:100%;border:1px solid #cbd5e1;border-radius:14px;padding:.7rem .85rem;outline:0;background:#fff}
    .form-field input:focus,.form-field textarea:focus,.form-field select:focus{box-shadow:0 0 0 3px rgba(14,165,233,.18);border-color:#38bdf8}

    body{
      background:
        radial-gradient(circle at top left, rgba(59,130,246,.08), transparent 24%),
        radial-gradient(circle at bottom right, rgba(20,184,166,.08), transparent 22%),
        #f8fafc;
      min-height:100vh;
    }
    #app{ padding-bottom:max(5.5rem, env(safe-area-inset-bottom)); }
    [data-view="dashboard"], [data-view="booking"]{ position:relative; }
    [data-view="booking"] > div:first-child,
    [data-view="dashboard"] > h2:first-child{
      position:relative; overflow:hidden;
      border:1px solid rgba(148,163,184,.16);
      background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,250,252,.94));
      box-shadow:0 18px 42px rgba(2,6,23,.08);
      border-radius:24px;
      padding:1rem 1.05rem;
    }
    [data-view="booking"] > div:first-child::after,
    [data-view="dashboard"] > h2:first-child::after{
      content:""; position:absolute; inset:auto -60px -70px auto; width:180px; height:180px; border-radius:999px;
      background:radial-gradient(circle, rgba(59,130,246,.12), transparent 70%);
      pointer-events:none;
    }
    [data-view="booking"] > div:nth-child(2){
      display:flex; gap:.75rem; overflow:auto hidden; padding:.2rem .05rem .35rem; scrollbar-width:none;
      position:sticky; top:68px; z-index:18;
      backdrop-filter:blur(12px);
    }
    [data-view="booking"] > div:nth-child(2)::-webkit-scrollbar{ display:none; }
    [data-view="booking"] > div:nth-child(2) .chip-tab{ white-space:nowrap; flex:0 0 auto; min-width:max-content; }
    [data-view="booking"] > section,
    [data-view="dashboard"] > div.grid,
    [data-view="dashboard"] > section{
      position:relative;
      border:1px solid rgba(148,163,184,.15);
      box-shadow:0 18px 42px rgba(2,6,23,.07);
    }
    #bookingForm input, #bookingForm select, #bookingForm textarea,
    #modalBackdrop input, #modalBank input, #modalTerms input, #modalTerms textarea, #modalInvoice input, #modalInvoice textarea{
      min-height:48px;
      font-size:15px;
    }
    .invoice-preview-head{
      position:sticky; top:74px; z-index:15;
      padding:.52rem .6rem .72rem;
      background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.9) 76%, rgba(255,255,255,0));
      backdrop-filter:blur(10px);
    }
    .invoice-toolbar{ gap:.5rem; }
    .invoice-toolbar button{ min-height:42px; border-radius:12px; }
    .mobile-bottom-dock{
      position:fixed;
      left:12px; right:12px; bottom:max(12px, env(safe-area-inset-bottom));
      z-index:60;
      display:none;
      padding:.6rem;
      border-radius:24px;
      border:1px solid rgba(148,163,184,.16);
      background:linear-gradient(180deg, rgba(15,23,42,.96), rgba(15,23,42,.88));
      box-shadow:0 24px 50px rgba(2,6,23,.28);
      backdrop-filter:blur(16px);
    }
    .mobile-bottom-dock__grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }
    .mobile-bottom-dock__btn{
      min-height:58px; border-radius:18px; border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04); color:#e2e8f0; display:flex; flex-direction:column; align-items:center; justify-content:center;
      gap:.28rem; font-size:.68rem; font-weight:700; transition:.24s ease; text-align:center; padding:.35rem;
    }
    .mobile-bottom-dock__btn span:first-child{ font-size:1rem; line-height:1; }
    .mobile-bottom-dock__btn.is-active,
    .mobile-bottom-dock__btn:hover{
      background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(59,130,246,.26));
      color:#fff; transform:translateY(-1px);
      box-shadow:0 12px 24px rgba(34,211,238,.16);
    }
    .mobile-bottom-dock__btn--accent{
      background:linear-gradient(135deg, #14b8a6, #2563eb);
      color:#fff; border-color:rgba(255,255,255,.18);
    }
    .mobile-bottom-dock__btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

    .app-loader__status{
      margin-top:1rem; display:flex; align-items:center; justify-content:space-between; gap:.85rem; flex-wrap:wrap;
      color:#e2e8f0;
    }
    .app-loader__stage{
      display:inline-flex; align-items:center; gap:.45rem; padding:.45rem .82rem; border-radius:999px;
      background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.18); color:#a5f3fc; font-size:.72rem; font-weight:800;
      letter-spacing:.08em; text-transform:uppercase;
    }
    .app-loader__stage::before{
      content:""; width:.48rem; height:.48rem; border-radius:999px; background:#22d3ee; box-shadow:0 0 0 6px rgba(34,211,238,.14);
    }
    .app-loader__percent{ font-size:1.1rem; font-weight:800; color:#f8fafc; }
    .app-loader__detail{ margin:.45rem 0 0; color:#94a3b8; font-size:.82rem; line-height:1.5; }
    .app-loader__steps{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; margin-top:1rem; }
    .app-loader__step{
      padding:.45rem .72rem; border-radius:999px; border:1px solid rgba(148,163,184,.16); background:rgba(148,163,184,.08);
      color:#cbd5e1; font-size:.72rem; font-weight:700;
    }
    .app-loader__step.is-active{ background:linear-gradient(135deg, rgba(34,211,238,.22), rgba(59,130,246,.2)); color:#fff; border-color:rgba(34,211,238,.28); }
    .app-loader__tipline{
      margin-top:1rem; padding:.8rem .95rem; width:100%; border-radius:18px; border:1px solid rgba(148,163,184,.14);
      background:rgba(255,255,255,.05); color:#cbd5e1; display:flex; align-items:flex-start; gap:.7rem; text-align:left;
    }
    .app-loader__tipdot{
      flex:0 0 auto; width:.7rem; height:.7rem; border-radius:999px; margin-top:.25rem;
      background:linear-gradient(135deg,#22d3ee,#34d399); box-shadow:0 0 0 6px rgba(52,211,153,.12);
    }
    .app-loader__tiptext{ font-size:.78rem; line-height:1.55; }
    .app-loader__bar{ margin-top:1.1rem; }
    .app-loader.is-determinate .app-loader__bar span{
      width:var(--loader-progress, 42%); transform:none; animation:loaderShimmer 1.9s linear infinite;
      background-size:180% 100%; background-image:linear-gradient(90deg,#22d3ee 0%,#34d399 50%,#818cf8 100%);
    }
    .app-loader.is-indeterminate .app-loader__bar span{
      width:38%; animation:loaderBar 1.6s ease-in-out infinite;
    }
    @keyframes loaderShimmer{
      0%{ background-position:0% 50%; }
      100%{ background-position:180% 50%; }
    }

    @media (max-width: 768px){
      #app{ padding-bottom:max(7rem, calc(env(safe-area-inset-bottom) + 6rem)); }
      #bookingForm button, #btnDownloadLast, #bookingFormSubmit, #btnReset{ width:100%; }
      .table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
      .table-wrapper table{ min-width:1020px; }
      .invoice-meta-grid,
      .invoice-summary-grid,
      .invoice-side-grid{ grid-template-columns:1fr; }
      .invoice-brand{ flex-direction:column; }
      .invoice-preview-shell{ padding:.78rem; border-radius:22px; }
      .invoice-preview-head{ top:68px; gap:.6rem; padding:.5rem .45rem .62rem; }
      .invoice-preview-meta{ width:100%; justify-content:space-between; }
      .invoice-preview-title{ font-size:.9rem; }
      .invoice-preview-subtitle{ display:none; }
      .invoice-preview-chip{ font-size:.64rem; }
      .invoice-toolbar{ width:100%; justify-content:stretch; position:sticky; bottom:0; padding-top:.05rem; }
      .invoice-toolbar button{ flex:1 1 calc(33.33% - .35rem); min-width:calc(33.33% - .35rem); padding:.64rem .55rem; font-size:.74rem; }
      .invoice-box{ padding:18px; border-radius:22px; }
      .invoice-company-title{ font-size:1.28rem; }
      .invoice-hero{ padding:1rem; border-radius:20px; }
      .invoice-logo-badge{ width:62px; height:62px; border-radius:18px; }
      .invoice-logo-badge img{ width:44px; height:44px; }
      .app-loader__panel{ min-height:320px; padding:1.45rem 1rem; width:min(94vw, 460px); border-radius:28px; }
      .app-loader__title{ font-size:1.3rem; }
      .app-loader__status{ align-items:flex-start; }
      .app-loader__steps{ gap:.38rem; }
      .app-loader__step{ font-size:.68rem; padding:.42rem .65rem; }
      .app-loader__tipline{ padding:.72rem .82rem; border-radius:16px; }
      [data-view="booking"]{ padding:1rem; }
      [data-view="dashboard"]{ padding:1rem; }
      [data-view="booking"] > div:first-child{ padding:.95rem; border-radius:22px; }
      [data-view="booking"] > div:nth-child(2){ top:64px; margin:0 -.05rem .35rem; }
      [data-view="booking"] > div:nth-child(2) .chip-tab{ padding:.82rem .95rem; font-size:.82rem; }
      [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6.mb-6,
      [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6,
      [data-view="dashboard"] > div.grid,
      [data-view="dashboard"] > section{
        border-radius:22px !important;
      }
      [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
      [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div:last-child{ grid-column:1 / -1; }
      .mobile-bottom-dock{ display:block; }
    }

    /* invoice clean preview override */
    body{
      background:#ffffff !important;
      min-height:100vh;
    }

    .invoice-preview-shell{
      position:relative;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      padding:0;
      overflow:visible;
    }
    .invoice-preview-shell::before{ display:none; }

    .invoice-preview-head{
      position:static;
      z-index:auto;
      padding:0 0 .85rem;
      border:0;
      border-radius:0;
      background:transparent;
      box-shadow:none;
      backdrop-filter:none;
    }

    #invoiceBox{
      position:relative;
      z-index:1;
      margin-top:0;
    }

    .invoice-box{
      margin:auto;
      padding:24px;
      background:#ffffff;
      border:1px solid #e5e7eb;
      border-radius:24px;
      box-shadow:none;
      font-size:14px;
      line-height:1.6;
      color:var(--ink);
      overflow:hidden;
    }

    .invoice-divider{ display:none; }

    .editable-chip[contenteditable="true"]{
      border-bottom:0;
      padding:0;
      outline:0;
      border-radius:0;
      background:transparent;
    }
    .editable-chip[contenteditable="true"]:focus{
      background:transparent;
      box-shadow:none;
    }

    .invoice-header{
      display:flex;
      flex-direction:column;
      gap:.82rem;
      margin-bottom:1.15rem;
    }
    .invoice-header__main,
    .invoice-header__party{
      position:relative;
      overflow:hidden;
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      border:1px solid #dbe7f5;
      box-shadow:0 14px 32px rgba(15,23,42,.06);
    }
    .invoice-header__main{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      border-radius:28px;
      padding:1.15rem 1.2rem;
      background:linear-gradient(135deg, #eef4ff 0%, #effbf8 45%, #ffffff 100%);
    }
    .invoice-header__main::before{
      content:"";
      position:absolute;
      inset:0 auto auto 0;
      width:100%;
      height:4px;
      background:linear-gradient(90deg,#2563eb,#06b6d4 62%,rgba(6,182,212,0));
    }
    .invoice-header__brand{
      position:relative;
      z-index:1;
      display:flex;
      align-items:flex-start;
      gap:1rem;
      min-width:0;
      flex:1 1 auto;
    }
    .invoice-header__logo{
      width:72px;
      height:72px;
      border-radius:22px;
      background:linear-gradient(145deg,#ffffff,#eff6ff);
      display:flex;
      align-items:center;
      justify-content:center;
      flex:0 0 auto;
      box-shadow:0 14px 30px rgba(37,99,235,.12), inset 0 0 0 1px rgba(219,234,254,.95);
    }
    .invoice-header__logo img{
      width:48px;
      height:48px;
      object-fit:contain;
    }
    .invoice-header__company{
      min-width:0;
      padding-top:.15rem;
    }
    .invoice-header__title{
      margin:0;
      font-size:1.5rem;
      font-weight:800;
      line-height:1.05;
      letter-spacing:-.03em;
      color:#0f172a;
    }
    .invoice-header__address{
      margin:.42rem 0 0;
      font-size:.81rem;
      line-height:1.58;
      color:#475569;
      white-space:pre-line;
      max-width:29rem;
    }
    .invoice-header__meta{
      position:relative;
      z-index:1;
      flex:0 1 auto;
      margin-left:auto;
      min-width:320px;
      display:flex;
      align-items:stretch;
      justify-content:flex-end;
      gap:.72rem;
      padding:.72rem .9rem;
      border-radius:22px;
      background:rgba(255,255,255,.86);
      border:1px solid rgba(219,234,254,.96);
      box-shadow:0 10px 24px rgba(15,23,42,.05);
    }
    .invoice-header__meta-item{
      min-width:0;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:.18rem;
      flex:1 1 0;
    }
    .invoice-header__meta-item span{
      font-size:.64rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#64748b;
    }
    .invoice-header__meta-item strong{
      display:block;
      font-size:1rem;
      line-height:1.24;
      font-weight:800;
      color:#0f172a;
      word-break:break-word;
      overflow-wrap:anywhere;
    }
    .invoice-header__meta-sep{
      width:1px;
      align-self:stretch;
      background:linear-gradient(180deg, rgba(203,213,225,0), rgba(203,213,225,.95), rgba(203,213,225,0));
      flex:0 0 1px;
    }
    .invoice-header__party{
      border-radius:24px;
      padding:1rem 1.05rem;
    }
    .invoice-header__party-title{
      margin:0 0 .85rem;
      font-size:.76rem;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#2563eb;
    }
    .invoice-kv{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:.75rem;
    }
    .invoice-kv__row{
      display:flex;
      flex-direction:column;
      gap:.32rem;
      padding:.8rem .9rem;
      border-radius:18px;
      background:#f8fafc;
      border:1px solid #e2e8f0;
    }
    .invoice-kv__row span{
      color:#64748b;
      font-size:.69rem;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
    }
    .invoice-kv__row strong{
      color:#0f172a;
      font-size:.98rem;
      line-height:1.34;
      word-break:break-word;
      overflow-wrap:anywhere;
    }

    @media (max-width:768px){
      .invoice-preview-head{
        padding:0 0 .75rem;
      }
      .invoice-box{
        padding:18px;
        border-radius:14px;
      }
      .invoice-header__main{
        flex-direction:column;
        padding:1rem;
        border-radius:22px;
      }
      .invoice-header__brand{
        width:100%;
      }
      .invoice-header__logo{
        width:60px;
        height:60px;
        border-radius:18px;
      }
      .invoice-header__logo img{
        width:42px;
        height:42px;
      }
      .invoice-header__title{
        font-size:1.26rem;
      }
      .invoice-header__meta{
        width:100%;
        min-width:0;
        flex-direction:column;
        gap:.55rem;
      }
      .invoice-header__meta-sep{
        width:100%;
        height:1px;
        background:linear-gradient(90deg, rgba(203,213,225,0), rgba(203,213,225,.95), rgba(203,213,225,0));
      }
      .invoice-header__party{
        padding:.92rem;
        border-radius:20px;
      }
      .invoice-kv{
        grid-template-columns:1fr;
      }
    }

    .invoice-hero,
    .invoice-hero::after{
      all:unset;
    }


    .invoice-section-card{
      border-radius:24px;
      border:1px solid #dbe6f2;
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      box-shadow:0 14px 30px rgba(15,23,42,.05);
      overflow:hidden;
    }
    .invoice-section-card__head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding:.9rem 1rem;
      border-bottom:1px solid #e8eff7;
      background:linear-gradient(135deg,#eff6ff,#f8fbff);
      color:#0f172a;
      font-size:.86rem;
      font-weight:800;
      letter-spacing:.01em;
    }
    .invoice-section-card--deposit .invoice-section-card__head{
      background:linear-gradient(90deg,#1d4ed8,#0891b2);
      color:#ffffff;
      border-bottom-color:rgba(255,255,255,.12);
      box-shadow:0 12px 24px rgba(29,78,216,.16);
    }

    :root{
      --ui-bg-1:#f5f9ff;
      --ui-bg-2:#ecf5ff;
      --ui-ink:#0f172a;
      --ui-soft:#475569;
      --ui-line:#dbe6f2;
      --ui-line-2:#cfe0f2;
      --ui-surface:#ffffff;
      --ui-surface-2:#f8fbff;
      --ui-brand:#2563eb;
      --ui-brand-2:#06b6d4;
      --ui-success:#10b981;
      --ui-warn:#f59e0b;
      --ui-danger:#ef4444;
      --ui-purple:#7c3aed;
      --ui-shadow-xl:0 26px 68px rgba(15,23,42,.10);
      --ui-shadow-lg:0 16px 40px rgba(15,23,42,.08);
      --ui-shadow-md:0 10px 24px rgba(15,23,42,.06);
    }

    html{ scroll-behavior:smooth; }
    body{
      color:var(--ui-ink);
      background:
        radial-gradient(circle at 0% 0%, rgba(37,99,235,.14), transparent 22%),
        radial-gradient(circle at 100% 0%, rgba(6,182,212,.12), transparent 24%),
        radial-gradient(circle at 100% 100%, rgba(16,185,129,.10), transparent 22%),
        linear-gradient(180deg, var(--ui-bg-1) 0%, #f8fbff 48%, var(--ui-bg-2) 100%) !important;
    }
    body::selection{ background:rgba(37,99,235,.18); }
    ::-webkit-scrollbar{ width:12px; height:12px; }
    ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,#c7d9ef,#9ec5f8); border-radius:999px; border:3px solid #f5f9ff; }
    ::-webkit-scrollbar-track{ background:#edf4fb; }

    #navbar{
      border-bottom-color:rgba(56,189,248,.30) !important;
      background:linear-gradient(180deg, rgba(2,6,23,.84), rgba(15,23,42,.72)) !important;
      box-shadow:0 20px 48px rgba(15,23,42,.42);
    }
    #invoiceLangBar,
    #navbar .rounded-full.bg-slate-900\/80{
      border-color:rgba(148,163,184,.22) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    #langID,
    #langEN,
    #goDashboard,
    #goBooking{
      transition:all .22s ease;
    }
    #langID:hover,
    #langEN:hover,
    #goDashboard:hover,
    #goBooking:hover{
      transform:translateY(-1px);
    }

    [data-view="dashboard"],
    [data-view="booking"]{
      max-width:min(1380px, calc(100vw - 2rem));
    }

    [data-view="dashboard"] > h2:first-child,
    [data-view="booking"] > div:first-child{
      border-radius:30px;
      padding:1.15rem 1.2rem;
      border:1px solid rgba(219,230,242,.86);
      background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(244,249,255,.92)),
        radial-gradient(circle at top right, rgba(37,99,235,.08), transparent 26%);
      box-shadow:var(--ui-shadow-xl);
    }

    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div{
      position:relative;
      overflow:hidden;
      border-radius:28px !important;
      padding:1.2rem 1.25rem !important;
      border:1px solid rgba(255,255,255,.48);
      box-shadow:0 22px 56px rgba(15,23,42,.14);
      isolation:isolate;
      min-height:148px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      backdrop-filter:blur(10px);
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
      pointer-events:none;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div::after{
      content:"";
      position:absolute;
      right:-30px;
      bottom:-48px;
      width:130px;
      height:130px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
      pointer-events:none;
      opacity:.9;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div:nth-child(1){ background:linear-gradient(135deg, #2563eb 0%, #38bdf8 100%) !important; }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div:nth-child(2){ background:linear-gradient(135deg, #059669 0%, #34d399 100%) !important; }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div:nth-child(3){ background:linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important; }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div:nth-child(4){ background:linear-gradient(135deg, #ef4444 0%, #fb7185 100%) !important; }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div:nth-child(5){ background:linear-gradient(135deg, #7c3aed 0%, #a855f7 100%) !important; }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div p:first-child{
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
      opacity:.92;
      margin:0;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div p:last-child{
      margin:0;
      font-size:clamp(1.55rem, 2vw, 2.35rem) !important;
      line-height:1.05;
      font-weight:800;
      letter-spacing:-.03em;
    }

    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-2 > div,
    [data-view="dashboard"] > .bg-white.rounded-2xl.shadow.p-6.mb-6,
    [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6.mb-6,
    [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6{
      border-radius:30px !important;
      border:1px solid rgba(219,230,242,.9) !important;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.97)) !important;
      box-shadow:var(--ui-shadow-xl) !important;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-2 > div{
      position:relative;
      overflow:hidden;
      padding:1.4rem !important;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-2 > div::after{
      content:"";
      position:absolute;
      inset:auto -44px -60px auto;
      width:160px;
      height:160px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(37,99,235,.10), transparent 68%);
      pointer-events:none;
    }
    [data-view="dashboard"] canvas{
      margin-top:.5rem;
      border-radius:22px;
      background:linear-gradient(180deg,#fbfdff,#f3f8ff);
      border:1px solid #ebf2fb;
      padding:.75rem;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
    }
    #ctaBooking{
      min-width:min(100%, 290px);
      border:0;
      border-radius:18px;
      padding:.95rem 1.3rem !important;
      font-weight:800;
      letter-spacing:.02em;
      background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
      box-shadow:0 18px 36px rgba(37,99,235,.22);
      transition:transform .22s ease, box-shadow .22s ease;
    }
    #ctaBooking:hover{ transform:translateY(-2px); box-shadow:0 22px 40px rgba(37,99,235,.28); }

    #exportBackup,
    #importBackup,
    #exportCsv,
    #clearAll,
    #bookingFormSubmit,
    #btnReset,
    #btnDownloadLast,
    #btnEditInvoiceSettings,
    #btnEditBank,
    #btnEditTerms,
    #btnDownloadInvoice,
    #btnShareInvoice,
    #btnPrintInvoice,
    #btnAddUmrohItem,
    #btnClearUmrohItems,
    #btnAddItemRow,
    #btnAddVisaDoc,
    #addDepositBtn,
    #saveReminderNoteBtn,
    #sendReminderNowBtn,
    #saveDepositBtn,
    #saveBankBtn,
    #saveTermsBtn,
    #saveInvoiceBrandBtn,
    #cancelDepositBtn,
    #cancelBankBtn,
    #cancelTermsBtn,
    #cancelModalInvoice{
      border:0 !important;
      border-radius:18px !important;
      min-height:46px;
      padding:.78rem 1rem !important;
      font-weight:800 !important;
      letter-spacing:.01em;
      box-shadow:0 14px 28px rgba(15,23,42,.10);
      transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }
    #exportBackup:hover,
    #importBackup:hover,
    #exportCsv:hover,
    #clearAll:hover,
    #bookingFormSubmit:hover,
    #btnReset:hover,
    #btnDownloadLast:hover,
    #btnEditInvoiceSettings:hover,
    #btnEditBank:hover,
    #btnEditTerms:hover,
    #btnDownloadInvoice:hover,
    #btnShareInvoice:hover,
    #btnPrintInvoice:hover,
    #btnAddUmrohItem:hover,
    #btnClearUmrohItems:hover,
    #btnAddItemRow:hover,
    #btnAddVisaDoc:hover,
    #addDepositBtn:hover,
    #saveReminderNoteBtn:hover,
    #sendReminderNowBtn:hover,
    #saveDepositBtn:hover,
    #saveBankBtn:hover,
    #saveTermsBtn:hover,
    #saveInvoiceBrandBtn:hover,
    #cancelDepositBtn:hover,
    #cancelBankBtn:hover,
    #cancelTermsBtn:hover,
    #cancelModalInvoice:hover{
      transform:translateY(-1px);
      filter:saturate(1.02);
      box-shadow:0 18px 32px rgba(15,23,42,.14);
    }
    #exportBackup,
    #importBackup{ background:linear-gradient(135deg,#7c3aed,#8b5cf6) !important; }
    #exportCsv,
    #btnDownloadLast,
    #btnDownloadInvoice{ background:linear-gradient(135deg,#0f172a,#334155) !important; }
    #clearAll{ background:linear-gradient(135deg,#ef4444,#f97316) !important; }
    #bookingFormSubmit,
    #btnPrintInvoice,
    #saveBankBtn,
    #saveTermsBtn,
    #saveInvoiceBrandBtn{ background:linear-gradient(135deg,#2563eb,#06b6d4) !important; }
    #btnEditInvoiceSettings,
    #btnEditBank,
    #btnEditTerms,
    #btnShareInvoice{ background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; }
    #btnAddUmrohItem,
    #btnAddItemRow,
    #btnAddVisaDoc,
    #addDepositBtn,
    #saveDepositBtn,
    #saveReminderNoteBtn{ background:linear-gradient(135deg,#0f766e,#14b8a6) !important; }
    #sendReminderNowBtn{ background:linear-gradient(135deg,#7c3aed,#ec4899) !important; }
    #btnReset,
    #btnClearUmrohItems,
    #cancelDepositBtn,
    #cancelReminderBtn,
    #cancelBankBtn,
    #cancelTermsBtn,
    #cancelModalInvoice{
      background:linear-gradient(180deg,#eef2f7,#dfe7f1) !important;
      color:#334155 !important;
      box-shadow:none;
    }

    [data-view="booking"] > div:nth-child(2){
      gap:.7rem;
      padding:.28rem;
      border-radius:999px;
      border:1px solid rgba(219,230,242,.92);
      background:rgba(255,255,255,.88);
      box-shadow:var(--ui-shadow-md);
      width:max-content;
      max-width:100%;
    }
    .chip-tab{
      min-height:48px;
      padding:.82rem 1.15rem;
      border-radius:999px;
      font-size:.84rem;
      font-weight:800;
      letter-spacing:.01em;
      background:transparent;
      color:#334155;
      border:1px solid transparent;
      box-shadow:none;
    }
    .chip-tab.active{
      background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
      color:#fff !important;
      box-shadow:0 14px 28px rgba(37,99,235,.20);
    }
    .chip-tab:not(.active):hover{
      background:#f1f6fd;
      color:#0f172a;
      border-color:#d6e3f3;
    }

    #bookingManagerTitle{
      color:#0f172a !important;
      letter-spacing:-.03em;
    }
    #bookingForm{
      gap:1rem;
    }
    #bookingForm label{
      margin-bottom:.45rem;
      color:#334155;
      font-size:.82rem;
      font-weight:800;
      letter-spacing:.01em;
    }
    #bookingForm input,
    #bookingForm select,
    #bookingForm textarea,
    #modalBackdrop input,
    #modalBank input,
    #modalBank textarea,
    #modalTerms input,
    #modalTerms textarea,
    #modalInvoice input,
    #modalInvoice textarea,
    #searchBox{
      border:1px solid var(--ui-line-2) !important;
      border-radius:16px !important;
      background:linear-gradient(180deg,#ffffff,#f9fbff) !important;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 1px 2px rgba(15,23,42,.02);
      color:#0f172a;
      transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
    }
    #bookingForm input:focus,
    #bookingForm select:focus,
    #bookingForm textarea:focus,
    #modalBackdrop input:focus,
    #modalBank input:focus,
    #modalBank textarea:focus,
    #modalTerms input:focus,
    #modalTerms textarea:focus,
    #modalInvoice input:focus,
    #modalInvoice textarea:focus,
    #searchBox:focus{
      outline:0;
      border-color:#7dd3fc !important;
      box-shadow:0 0 0 4px rgba(56,189,248,.14), 0 14px 26px rgba(37,99,235,.08);
      transform:translateY(-1px);
    }
    #searchBox{
      min-width:min(100%, 290px);
      padding:.85rem 1rem !important;
      font-size:.92rem;
    }
    #itemsSection,
    #umrohItemsWrap,
    #passportExtra,
    #visaExtra,
    #umrohExtra{
      border:1px solid var(--ui-line) !important;
      border-radius:22px !important;
      background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
      box-shadow:0 10px 24px rgba(15,23,42,.05);
      padding:1rem !important;
    }
    #summaryTitle{
      font-size:.82rem;
      font-weight:800;
      color:#0f172a;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    #sumHarga,
    #sumDeposit,
    #sumSisa{
      font-weight:800;
      letter-spacing:-.01em;
    }

    .invoice-preview-head{
      padding:0 0 1rem;
    }
    .invoice-toolbar button{
      border-radius:16px !important;
      min-height:46px;
      padding:.8rem 1rem !important;
      box-shadow:0 12px 24px rgba(15,23,42,.08);
    }
    .invoice-preview-kicker{
      background:linear-gradient(135deg,#dbeafe,#ecfeff);
      color:#1d4ed8;
      border:1px solid #bfdbfe;
    }
    .invoice-preview-chip{
      background:linear-gradient(135deg,#eef2ff,#ecfeff);
      border-color:#dbeafe;
      color:#4338ca;
    }

    .table-wrapper{
      border:1px solid rgba(219,230,242,.95);
      border-radius:26px;
      background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,251,255,.98));
      box-shadow:var(--ui-shadow-lg);
      overflow:auto;
    }
    .table-wrapper table{
      min-width:1240px;
    }
    .table-wrapper thead th{
      position:sticky;
      top:0;
      z-index:1;
      padding:.92rem .85rem !important;
      background:linear-gradient(135deg,#0f172a,#1d4ed8) !important;
      color:#fff !important;
      font-size:.7rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      border-bottom:1px solid rgba(255,255,255,.08);
      white-space:nowrap;
    }
    #tableBody tr{
      transition:background .18s ease, transform .18s ease;
    }
    #tableBody tr:nth-child(even){
      background:#fbfdff;
    }
    #tableBody tr:hover{
      background:#eef6ff !important;
      transform:translateY(-1px);
    }
    #tableBody td{
      padding:.92rem .85rem !important;
      border-bottom:1px solid #edf2f7;
      color:#0f172a;
      font-size:.81rem;
      vertical-align:middle;
    }
    #tableBody button[data-act]{
      border:1px solid transparent;
      border-radius:999px !important;
      min-height:34px;
      padding:.56rem .82rem !important;
      font-size:.69rem !important;
      font-weight:800 !important;
      letter-spacing:.01em;
      line-height:1;
      box-shadow:0 10px 20px rgba(15,23,42,.08);
      transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    #tableBody button[data-act]:hover{ transform:translateY(-1px); box-shadow:0 14px 24px rgba(15,23,42,.12); }
    #tableBody button[data-act="invoice"]{ background:linear-gradient(135deg,#2563eb,#38bdf8) !important; }
    #tableBody button[data-act="edit"]{ background:linear-gradient(135deg,#4f46e5,#7c3aed) !important; }
    #tableBody button[data-act="deposit"]{ background:linear-gradient(135deg,#0f766e,#14b8a6) !important; }
    #tableBody button[data-act="pdf"]{ background:linear-gradient(135deg,#0f172a,#334155) !important; }
    #tableBody button[data-act="cancel"]{ background:linear-gradient(135deg,#ea580c,#f59e0b) !important; }
    #tableBody button[data-act="uncancel"]{ background:linear-gradient(135deg,#059669,#22c55e) !important; }
    #tableBody button[data-act="delete"]{ background:linear-gradient(135deg,#dc2626,#f97316) !important; }
    #tableBody button[data-act="reminder"]{ background:linear-gradient(135deg,#7c3aed,#ec4899) !important; }
    #tableBody .btn-disabled{
      filter:grayscale(.12);
      box-shadow:none;
    }

    #modalBackdrop,
    #modalBank,
    #modalTerms,
    #modalInvoice{
      backdrop-filter:blur(12px);
    }
    #modalBank .veora-modal__dialog,
    #modalTerms .veora-modal__dialog,
    #modalInvoice .veora-modal__dialog,
    #modalBackdrop .veora-modal__dialog{
      position:relative;
      border-radius:30px !important;
      border:1px solid rgba(219,230,242,.94);
      background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(248,251,255,.98)) !important;
      box-shadow:0 34px 70px rgba(15,23,42,.18) !important;
      overflow:hidden;
    }
    #modalBank .veora-modal__hero,
    #modalTerms .veora-modal__hero,
    #modalInvoice .veora-modal__hero,
    #modalBackdrop .veora-modal__hero{
      padding-bottom:1rem;
      margin-bottom:0;
      border-bottom:1px solid #eef2f7;
    }
    #modalBank h3,
    #modalTerms h3,
    #modalInvoice h3{
      font-size:1.08rem;
      line-height:1.25;
      color:#0f172a !important;
      font-weight:800;
      letter-spacing:-.02em;
    }
    #closeModal,
    #closeModalBank,
    #closeModalTerms,
    #closeModalInvoice{
      transition:all .18s ease;
    }
    #closeModal:hover,
    #closeModalBank:hover,
    #closeModalTerms:hover,
    #closeModalInvoice:hover{
      transform:rotate(90deg) scale(1.04);
    }
    .deposit-item-card{
      border-radius:24px;
      border-color:#dbe6f2;
      box-shadow:0 12px 26px rgba(15,23,42,.05);
    }
    .deposit-item-card__head{
      padding-bottom:.9rem;
      border-bottom:1px solid #edf2f7;
      margin-bottom:.95rem;
    }
    .deposit-remove-btn{
      box-shadow:none;
      border:1px solid #fecaca;
    }

    .mobile-bottom-dock{
      border:1px solid rgba(148,163,184,.18);
      background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.90));
      box-shadow:0 28px 55px rgba(2,6,23,.26);
    }
    .mobile-bottom-dock__btn{
      min-height:60px;
      border-radius:20px;
    }

    @media (max-width:768px){
      [data-view="dashboard"],
      [data-view="booking"]{
        max-width:100%;
      }
      [data-view="dashboard"] > h2:first-child,
      [data-view="booking"] > div:first-child{
        border-radius:24px;
        padding:1rem;
      }
      [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div,
      [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-2 > div,
      [data-view="dashboard"] > .bg-white.rounded-2xl.shadow.p-6.mb-6,
      [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6.mb-6,
      [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6{
        border-radius:24px !important;
      }
      [data-view="booking"] > div:nth-child(2){
        width:100%;
        padding:.22rem;
      }
      .chip-tab{
        flex:1 1 auto;
        justify-content:center;
      }
      .table-wrapper{
        border-radius:22px;
      }
      #tableBody button[data-act]{
        min-height:32px;
        padding:.52rem .75rem !important;
      }
    }


    .veora-modal{
      padding:clamp(.8rem, 2vw, 1.25rem);
      overflow-y:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      align-items:center;
      background:radial-gradient(circle at top, rgba(37,99,235,.12), transparent 24%), rgba(2,6,23,.58);
      backdrop-filter:blur(14px);
    }
    body.modal-open{ overflow:hidden; }
    .veora-modal__dialog{
      position:relative;
      width:min(100%, var(--modal-width, 760px));
      max-height:min(92vh, 980px);
      margin:auto;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      border-radius:30px;
      border:1px solid rgba(219,230,242,.92);
      background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(248,251,255,.985));
      box-shadow:0 36px 84px rgba(15,23,42,.22);
      isolation:isolate;
    }
    .veora-modal__dialog::before{
      content:"";
      position:absolute;
      inset:0 0 auto;
      height:1px;
      background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95), rgba(255,255,255,0));
      opacity:.9;
      pointer-events:none;
    }
    .veora-modal__hero{
      position:relative;
      padding:1.15rem 1.25rem 1rem;
      border-bottom:1px solid #edf2f7;
      background:
        linear-gradient(135deg, rgba(239,246,255,.98), rgba(240,253,250,.98)),
        radial-gradient(circle at top right, rgba(37,99,235,.14), transparent 30%);
    }
    .veora-modal__hero::after{
      content:"";
      position:absolute;
      right:-46px;
      top:-42px;
      width:180px;
      height:180px;
      border-radius:999px;
      background:radial-gradient(circle, rgba(56,189,248,.18), transparent 68%);
      pointer-events:none;
    }
    .veora-modal__hero-grid{
      position:relative;
      z-index:1;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
    }
    .veora-modal__eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .78rem;
      border-radius:999px;
      font-size:.68rem;
      font-weight:800;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:#1d4ed8;
      border:1px solid rgba(147,197,253,.8);
      background:rgba(255,255,255,.84);
      box-shadow:0 10px 24px rgba(37,99,235,.08);
    }
    .veora-modal__eyebrow::before{
      content:"";
      width:.48rem;
      height:.48rem;
      border-radius:999px;
      background:linear-gradient(135deg,#2563eb,#06b6d4);
      box-shadow:0 0 0 5px rgba(37,99,235,.12);
    }
    .veora-modal__title{
      margin:.88rem 0 0;
      font-size:1.26rem;
      line-height:1.12;
      font-weight:800;
      letter-spacing:-.03em;
      color:#0f172a;
    }
    .veora-modal__subtitle{
      margin:.42rem 0 0;
      max-width:48rem;
      font-size:.88rem;
      line-height:1.55;
      color:#475569;
    }
    .veora-modal__close{
      position:relative;
      z-index:1;
      width:44px;
      height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:16px;
      border:1px solid #dbe6f2;
      background:rgba(255,255,255,.94);
      color:#64748b;
      font-size:1.15rem;
      box-shadow:0 12px 26px rgba(15,23,42,.08);
      transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
    }
    .veora-modal__close:hover{
      transform:translateY(-1px) rotate(90deg);
      color:#0f172a;
      border-color:#bfdbfe;
      box-shadow:0 16px 30px rgba(15,23,42,.12);
    }
    .veora-modal__scroll{
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      scrollbar-gutter:stable both-edges;
    }
    .veora-modal__scroll--pad{
      padding:1.15rem 1.25rem 1.22rem;
    }
    .veora-modal__panel{
      border-radius:24px;
      border:1px solid #e2ebf5;
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      box-shadow:0 14px 30px rgba(15,23,42,.06);
      padding:1rem;
    }
    .veora-modal__panel--tinted{
      background:linear-gradient(180deg,#eff6ff,#f8fbff);
      border-color:#dbeafe;
    }
    .veora-modal__panel-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:.9rem;
      margin-bottom:.9rem;
    }
    .veora-modal__panel-title{
      margin:0;
      font-size:.95rem;
      font-weight:800;
      color:#0f172a;
    }
    .veora-modal__panel-subtitle{
      margin:.24rem 0 0;
      font-size:.77rem;
      line-height:1.5;
      color:#64748b;
    }
    .veora-modal__stat{
      display:inline-flex;
      align-items:center;
      padding:.42rem .76rem;
      border-radius:999px;
      border:1px solid #bbf7d0;
      background:#ecfdf5;
      color:#047857;
      font-size:.72rem;
      font-weight:800;
      white-space:nowrap;
    }
    .veora-modal__field-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.9rem;
    }
    .veora-modal__field-grid--single{ grid-template-columns:1fr; }
    .veora-modal__field-grid .form-field{ min-width:0; }
    .veora-modal__field-grid label,
    .veora-modal__panel label{
      display:block;
      margin-bottom:.42rem;
      font-size:.78rem;
      font-weight:800;
      color:#334155;
      letter-spacing:.01em;
    }
    .veora-modal__helper{
      margin-top:.24rem;
      font-size:.72rem;
      line-height:1.45;
      color:#64748b;
    }
    .veora-modal__upload-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.9rem;
    }
    .veora-modal__upload-card{
      border-radius:22px;
      border:1px solid #e2ebf5;
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      padding:.9rem;
      box-shadow:0 10px 24px rgba(15,23,42,.05);
    }
    .veora-modal__upload-card img{
      width:100%;
      height:100px;
      object-fit:contain;
      margin-top:.75rem;
      border-radius:16px;
      border:1px solid #e2e8f0;
      background:linear-gradient(180deg,#fff,#f8fafc);
      padding:.65rem;
    }
    .veora-modal__footer{
      flex:0 0 auto;
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:.75rem;
      padding:1rem 1.25rem 1.1rem;
      border-top:1px solid #eef2f7;
      background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.98));
    }
    .veora-modal__footer .btn,
    .veora-modal__footer button{
      flex:0 0 auto;
    }
    .veora-modal__sticky-note{
      position:sticky;
      bottom:0;
      z-index:1;
    }
    .veora-modal__hero-meta{
      margin-top:.95rem;
      display:flex;
      flex-wrap:wrap;
      gap:.58rem;
    }
    .veora-modal__hero-chip{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.5rem .82rem;
      border-radius:999px;
      border:1px solid rgba(191,219,254,.95);
      background:rgba(255,255,255,.82);
      color:#1e3a8a;
      font-size:.73rem;
      font-weight:800;
      letter-spacing:.01em;
      box-shadow:0 10px 22px rgba(37,99,235,.06);
    }
    .veora-modal__hero-chip::before{
      content:"";
      width:.5rem;
      height:.5rem;
      border-radius:999px;
      background:linear-gradient(135deg,#2563eb,#06b6d4);
      box-shadow:0 0 0 5px rgba(37,99,235,.10);
      flex:0 0 auto;
    }
    .veora-modal__overview-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:.85rem;
      margin-bottom:.95rem;
    }
    .veora-modal__overview-card{
      border-radius:20px;
      border:1px solid #dbe6f2;
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      padding:.95rem 1rem;
      box-shadow:0 14px 26px rgba(15,23,42,.05);
      min-height:96px;
    }
    .veora-modal__overview-label{
      display:block;
      font-size:.7rem;
      font-weight:800;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:#64748b;
    }
    .veora-modal__overview-value{
      display:block;
      margin-top:.5rem;
      font-size:1.05rem;
      line-height:1.3;
      font-weight:800;
      color:#0f172a;
    }
    .veora-modal__overview-text{
      display:block;
      margin-top:.44rem;
      font-size:.76rem;
      line-height:1.55;
      color:#64748b;
    }
    .veora-modal__shell-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) 320px;
      gap:1rem;
      align-items:start;
    }
    .veora-modal__shell-grid--wide{
      grid-template-columns:minmax(0,1.18fr) minmax(260px,.82fr);
    }
    .veora-modal__stack{
      display:grid;
      gap:1rem;
      min-width:0;
    }
    .veora-modal__aside{
      display:grid;
      gap:1rem;
      min-width:0;
    }
    .veora-modal__note-card{
      border-radius:22px;
      border:1px solid #dbeafe;
      background:linear-gradient(180deg,#eef6ff,#ffffff);
      padding:1rem;
      box-shadow:0 14px 30px rgba(15,23,42,.05);
    }
    .veora-modal__note-card--success{
      border-color:#bbf7d0;
      background:linear-gradient(180deg,#ecfdf5,#ffffff);
    }
    .veora-modal__note-kicker{
      display:inline-flex;
      align-items:center;
      gap:.42rem;
      padding:.38rem .7rem;
      border-radius:999px;
      background:rgba(255,255,255,.88);
      border:1px solid rgba(191,219,254,.92);
      color:#1d4ed8;
      font-size:.68rem;
      font-weight:800;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .veora-modal__note-kicker::before{
      content:"";
      width:.46rem;
      height:.46rem;
      border-radius:999px;
      background:linear-gradient(135deg,#2563eb,#06b6d4);
    }
    .veora-modal__note-title{
      margin:.78rem 0 .3rem;
      font-size:.96rem;
      font-weight:800;
      color:#0f172a;
    }
    .veora-modal__note-text{
      margin:0;
      font-size:.79rem;
      line-height:1.62;
      color:#475569;
    }
    .veora-modal__bullet-list{
      margin:.85rem 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:.55rem;
    }
    .veora-modal__bullet-list li{
      display:flex;
      align-items:flex-start;
      gap:.6rem;
      font-size:.78rem;
      line-height:1.55;
      color:#334155;
    }
    .veora-modal__bullet-list li::before{
      content:"";
      width:.56rem;
      height:.56rem;
      border-radius:999px;
      margin-top:.32rem;
      background:linear-gradient(135deg,#2563eb,#06b6d4);
      box-shadow:0 0 0 6px rgba(37,99,235,.10);
      flex:0 0 auto;
    }
    .veora-modal__asset-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:.9rem;
    }
    .veora-modal__asset-card{
      border-radius:22px;
      border:1px solid #dbe6f2;
      background:linear-gradient(180deg,#ffffff,#f8fbff);
      padding:.9rem;
      box-shadow:0 12px 24px rgba(15,23,42,.05);
    }
    .veora-modal__asset-card label{
      display:block;
      margin-bottom:.55rem;
      font-size:.78rem;
      font-weight:800;
      color:#334155;
    }
    .veora-modal__asset-card img{
      width:100%;
      height:112px;
      object-fit:contain;
      margin-top:.72rem;
      border-radius:16px;
      border:1px dashed #cbd5e1;
      background:linear-gradient(180deg,#fff,#f8fafc);
      padding:.65rem;
    }
    .veora-modal__textarea{
      min-height:132px;
      resize:vertical;
    }
    .veora-modal__footer-note{
      margin-right:auto;
      font-size:.75rem;
      line-height:1.55;
      color:#64748b;
      max-width:28rem;
    }
    .veora-modal__section-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:1rem;
    }
    .veora-toast-popup{
      border-radius:18px !important;
      border:1px solid rgba(219,230,242,.95) !important;
      background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,251,255,.98)) !important;
      box-shadow:0 20px 40px rgba(15,23,42,.16) !important;
      padding:.78rem .9rem !important;
      backdrop-filter:blur(10px);
    }
    .veora-toast-title{
      color:#0f172a !important;
      font-weight:800 !important;
      font-size:.84rem !important;
      letter-spacing:.01em;
    }
    .veora-swal-popup{
      border-radius:26px !important;
      border:1px solid rgba(219,230,242,.92) !important;
      background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.98)) !important;
      box-shadow:0 34px 84px rgba(15,23,42,.18) !important;
      padding:1.25rem !important;
    }
    .veora-swal-title{
      color:#0f172a !important;
      font-weight:800 !important;
      letter-spacing:-.02em;
    }
    .veora-swal-html{
      color:#475569 !important;
      font-size:.92rem !important;
      line-height:1.6 !important;
    }
    .veora-swal-confirm,
    .veora-swal-cancel{
      min-height:44px !important;
      border-radius:14px !important;
      padding:.76rem 1rem !important;
      font-weight:800 !important;
      letter-spacing:.01em !important;
      margin:.25rem !important;
      box-shadow:0 12px 26px rgba(15,23,42,.08);
    }
    .veora-swal-confirm{
      background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
      color:#fff !important;
    }
    .veora-swal-cancel{
      background:linear-gradient(180deg,#eef2f7,#dfe7f1) !important;
      color:#334155 !important;
      box-shadow:none !important;
    }
    #modalBackdrop .veora-modal__dialog{ --modal-width:1100px; }
    #modalBank .veora-modal__dialog{ --modal-width:760px; }
    #modalTerms .veora-modal__dialog{ --modal-width:1080px; }
    #modalInvoice .veora-modal__dialog{ --modal-width:960px; }
    #modalBackdrop .veora-modal__scroll,
    #modalTerms .veora-modal__scroll,
    #modalInvoice .veora-modal__scroll{ padding-right:.2rem; }
    @media (max-width:768px){
      .veora-modal{
        align-items:flex-end;
        padding:.65rem;
      }
      .veora-modal__dialog{
        width:100%;
        max-height:min(94vh, 980px);
        border-radius:24px !important;
      }
      .veora-modal__hero{
        padding:1rem 1rem .92rem;
      }
      .veora-modal__hero-grid{
        gap:.8rem;
      }
      .veora-modal__title{
        font-size:1.08rem;
      }
      .veora-modal__subtitle{
        font-size:.82rem;
      }
      .veora-modal__scroll--pad{
        padding:1rem;
      }
      .veora-modal__field-grid,
      .veora-modal__upload-grid,
      .veora-modal__section-grid,
      .veora-modal__overview-grid,
      .veora-modal__asset-grid,
      .veora-modal__shell-grid,
      .veora-modal__shell-grid--wide{
        grid-template-columns:1fr;
      }
      .veora-modal__footer{
        padding:.95rem 1rem calc(.95rem + env(safe-area-inset-bottom));
        flex-wrap:wrap;
      }
      .veora-modal__footer button{
        flex:1 1 calc(50% - .4rem);
        min-width:0;
      }
      .veora-modal__footer-note{
        flex:1 1 100%;
        margin-right:0;
        max-width:none;
        order:3;
      }
      #modalBackdrop .veora-modal__dialog,
      #modalBank .veora-modal__dialog,
      #modalTerms .veora-modal__dialog,
      #modalInvoice .veora-modal__dialog{
        --modal-width:100%;
      }
    }

    @media print{
      @page{ size:A4; margin:10mm; }
      body{ background:#fff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
      body *{ visibility:hidden !important; }
      #invoiceBox, #invoiceBox *{ visibility:visible !important; }
      #invoiceBox{ position:relative; width:190mm; margin:0 auto; box-shadow:none; border-color:#ddd; }
      .app-loader{ display:none !important; }
      a{ text-decoration:none !important; }
      #invoiceBox a[href]:after { content:"" !important; }
    }
  

    /* ===== VEORA-POS v13.5 premium polish ===== */
    :root{
      --v13p-shell:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.98));
      --v13p-panel:linear-gradient(180deg, #ffffff, #f7fbff);
      --v13p-stroke:#dbe7f3;
      --v13p-stroke-strong:#c7d9ee;
      --v13p-glow:0 24px 64px rgba(15,23,42,.12);
      --v13p-glow-soft:0 16px 34px rgba(15,23,42,.07);
    }

    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5{
      gap:1rem;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div{
      min-height:164px;
      border-radius:32px !important;
      box-shadow:0 26px 60px rgba(15,23,42,.16) !important;
      padding:1.3rem 1.35rem !important;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div p:first-child{
      font-size:.76rem;
      letter-spacing:.14em;
      opacity:.92;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div p:last-child{
      font-size:clamp(1.7rem, 2.1vw, 2.5rem) !important;
    }
    [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-2 > div,
    [data-view="dashboard"] > .bg-white.rounded-2xl.shadow.p-6.mb-6,
    [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6.mb-6,
    [data-view="booking"] > section.bg-white.rounded-2xl.shadow.p-6{
      border-radius:32px !important;
      box-shadow:var(--v13p-glow) !important;
      border:1px solid rgba(219,230,242,.96) !important;
      background:var(--v13p-shell) !important;
    }

    #bookingForm{
      gap:1rem;
    }
    #bookingForm > div:not(#umrohItemsWrap):not(#passportExtra):not(#visaExtra):not(#umrohExtra):not(#itemsSection){
      position:relative;
      border:1px solid var(--v13p-stroke);
      border-radius:24px;
      background:var(--v13p-panel);
      box-shadow:var(--v13p-glow-soft);
      padding:1rem;
      overflow:hidden;
    }
    #bookingForm > div:not(#umrohItemsWrap):not(#passportExtra):not(#visaExtra):not(#umrohExtra):not(#itemsSection)::before{
      content:"";
      position:absolute;
      inset:0 auto auto 0;
      width:100%;
      height:3px;
      background:linear-gradient(90deg, rgba(37,99,235,.88), rgba(6,182,212,.72), rgba(255,255,255,0));
      pointer-events:none;
    }
    #bookingForm > div label{
      color:#0f172a;
      font-weight:800 !important;
      font-size:.8rem !important;
      letter-spacing:.01em;
    }
    #bookingForm > div p{
      margin-bottom:0;
    }
    #itemsSection,
    #umrohItemsWrap,
    #passportExtra,
    #visaExtra,
    #umrohExtra{
      border:1px solid var(--v13p-stroke) !important;
      background:var(--v13p-panel) !important;
      border-radius:26px !important;
      box-shadow:var(--v13p-glow-soft) !important;
      padding:1rem !important;
    }
    #bookingForm .soft-panel,
    #bookingForm .bg-gray-50.border.rounded-xl.p-4,
    #bookingForm .md\:col-span-2.flex.items-center.gap-3.flex-wrap{
      border:1px solid var(--v13p-stroke) !important;
      border-radius:26px !important;
      background:var(--v13p-panel) !important;
      box-shadow:var(--v13p-glow-soft) !important;
    }
    #bookingForm .bg-gray-50.border.rounded-xl.p-4,
    #bookingForm .md\:col-span-2.flex.items-center.gap-3.flex-wrap{
      padding:1rem !important;
    }
    #bookingForm .md\:col-span-2.flex.items-center.gap-3.flex-wrap{
      justify-content:space-between;
      gap:.8rem;
    }

    .table-wrapper{
      border:1px solid var(--v13p-stroke) !important;
      border-radius:28px !important;
      background:linear-gradient(180deg,#ffffff,#f7fbff) !important;
      box-shadow:var(--v13p-glow) !important;
      overflow:auto;
    }
    .table-wrapper table{
      border-collapse:separate;
      border-spacing:0;
      min-width:1280px;
    }
    .table-wrapper thead th{
      top:0;
      box-shadow:inset 0 -1px 0 rgba(255,255,255,.08);
    }
    #tableBody tr{
      background:#ffffff;
    }
    #tableBody tr:nth-child(even){
      background:#f8fbff;
    }
    #tableBody tr:hover{
      background:#edf6ff !important;
    }
    #tableBody td{
      border-bottom:1px solid #e9f1f8;
      font-size:.8rem;
    }
    #tableBody td:last-child{
      white-space:nowrap;
    }

    .veora-modal{
      padding:clamp(.85rem, 1.9vw, 1.35rem);
      background:rgba(15,23,42,.48);
      backdrop-filter:blur(14px);
    }
    .veora-modal__dialog{
      border-radius:34px !important;
      border:1px solid rgba(219,230,242,.96) !important;
      background:linear-gradient(180deg, rgba(255,255,255,.995), rgba(247,251,255,.99)) !important;
      box-shadow:0 36px 80px rgba(15,23,42,.20) !important;
    }
    .veora-modal__dialog::before{
      opacity:1;
      background:
        radial-gradient(circle at top right, rgba(37,99,235,.16), transparent 28%),
        radial-gradient(circle at bottom left, rgba(6,182,212,.14), transparent 24%);
    }
    .veora-modal__hero{
      padding:1.2rem 1.25rem 1rem;
      background:
        linear-gradient(135deg, rgba(239,246,255,.98), rgba(240,253,250,.96) 44%, rgba(255,255,255,.98)),
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.72));
      border-bottom:1px solid #e5edf7;
    }
    .veora-modal__hero-grid{
      align-items:flex-start;
      gap:1rem;
    }
    .veora-modal__eyebrow{
      background:linear-gradient(135deg, #dbeafe, #ecfeff);
      color:#1d4ed8;
      border:1px solid #bfdbfe;
      box-shadow:0 10px 20px rgba(37,99,235,.10);
    }
    .veora-modal__title{
      font-size:1.28rem;
      letter-spacing:-.03em;
    }
    .veora-modal__subtitle{
      max-width:52rem;
      font-size:.9rem;
    }
    .veora-modal__close{
      width:48px;
      height:48px;
      flex:0 0 48px;
      border-radius:18px;
      border:1px solid var(--v13p-stroke-strong);
      background:linear-gradient(180deg,#ffffff,#f5f9ff);
      color:#334155;
      font-size:1.35rem;
      font-weight:700;
      box-shadow:0 18px 36px rgba(15,23,42,.10);
    }
    .veora-modal__close:hover,
    .veora-modal__close:focus-visible{
      transform:translateY(-1px) rotate(90deg);
      color:#0f172a;
      border-color:#93c5fd;
      box-shadow:0 22px 42px rgba(37,99,235,.16);
      outline:0;
    }
    .veora-modal__scroll{
      scrollbar-width:thin;
      scrollbar-color:#9ec5f8 #edf4fb;
    }
    .veora-modal__scroll--pad{
      padding:1.15rem 1.25rem 1.25rem;
    }
    .veora-modal__overview-grid,
    .veora-modal__field-grid,
    .veora-modal__section-grid,
    .veora-modal__asset-grid,
    .veora-modal__shell-grid,
    .veora-modal__shell-grid--wide{
      gap:1rem;
    }
    .veora-modal__overview-card,
    .veora-modal__panel,
    .veora-modal__note-card,
    .veora-modal__asset-card,
    .deposit-item-card{
      border:1px solid var(--v13p-stroke) !important;
      background:var(--v13p-panel) !important;
      box-shadow:var(--v13p-glow-soft) !important;
      border-radius:26px !important;
    }
    .veora-modal__panel{
      padding:1.05rem;
    }
    .veora-modal__panel-head{
      align-items:flex-start;
      gap:1rem;
      padding-bottom:.95rem;
      margin-bottom:1rem;
      border-bottom:1px solid #ecf2f8;
    }
    .veora-modal__panel-title,
    .veora-modal__note-title{
      font-size:1rem;
      letter-spacing:-.02em;
    }
    .veora-modal__helper,
    .veora-modal__note-text,
    .veora-modal__overview-text,
    .veora-modal__panel-subtitle,
    .veora-modal__footer-note{
      line-height:1.6;
      color:#55657a;
    }
    .veora-modal__stat{
      min-height:42px;
      padding:.75rem .9rem;
      border-radius:16px;
      border:1px solid #cfe3fb;
      background:linear-gradient(135deg,#eff6ff,#ecfeff);
      box-shadow:none;
    }
    .veora-modal__asset-card img{
      border-radius:20px;
      background:linear-gradient(180deg,#ffffff,#f7fbff);
      border:1px dashed #d3e2f3;
      min-height:108px;
    }
    .veora-modal__textarea{
      min-height:144px;
    }
    .veora-modal__footer{
      gap:.8rem;
      padding:1rem 1.25rem 1.15rem;
      border-top:1px solid #e8eff7;
      background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(246,250,255,.98));
    }
    .veora-modal__footer-note{
      max-width:48rem;
    }
    .veora-modal__dialog,
    .veora-modal__panel,
    .veora-modal__note-card,
    .deposit-item-card{
      box-sizing:border-box;
    }
    .veora-modal__hero-grid > div:first-child{
      min-width:0;
      flex:1 1 auto;
    }
    .veora-modal__title,
    .veora-modal__subtitle{
      word-break:break-word;
    }
    .veora-modal__close{
      cursor:pointer;
      flex-shrink:0;
    }

    @media (max-width: 768px){
      [data-view="dashboard"] > .grid.grid-cols-1.md\:grid-cols-5 > div{
        min-height:138px;
        border-radius:24px !important;
      }
      #bookingForm > div:not(#umrohItemsWrap):not(#passportExtra):not(#visaExtra):not(#umrohExtra):not(#itemsSection){
        border-radius:20px;
        padding:.9rem;
      }
      .table-wrapper{
        border-radius:22px !important;
      }
      .veora-modal{
        padding:.55rem;
        align-items:flex-end;
      }
      .veora-modal__dialog{
        border-radius:26px !important;
        max-height:min(95vh, 980px);
      }
      .veora-modal__hero{
        padding:1rem 1rem .92rem;
      }
      .veora-modal__title{
        font-size:1.12rem;
      }
      .veora-modal__close{
        width:44px;
        height:44px;
        flex-basis:44px;
      }
      .veora-modal__scroll--pad{
        padding:1rem .95rem 1rem;
      }
      .veora-modal__footer{
        flex-direction:column;
        align-items:stretch;
        padding:.95rem;
      }
      .veora-modal__footer button{
        width:100%;
      }
    }



    .auth-mode-tab{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.7rem 1rem;
      border-radius:999px;border:1px solid rgba(71,85,105,.6);background:rgba(15,23,42,.45);
      color:#cbd5e1;font-size:.78rem;font-weight:700;letter-spacing:.02em;transition:all .2s ease;
    }
    .auth-mode-tab.is-active{
      color:#082f49;background:linear-gradient(135deg,#67e8f9,#22d3ee,#34d399);border-color:rgba(103,232,249,.55);
      box-shadow:0 18px 45px rgba(6,182,212,.28);
    }
    .auth-muted-card{
      border:1px solid rgba(71,85,105,.55);border-radius:1rem;background:rgba(15,23,42,.45);padding:.85rem 1rem;
    }
    .auth-hidden{display:none !important;}
    .human-check-pill{
      display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:1rem;
      border:1px solid rgba(34,211,238,.24);background:linear-gradient(135deg,rgba(15,23,42,.9),rgba(8,47,73,.72));
      padding:.9rem 1rem;color:#e2e8f0;
    }
    .human-check-pill strong{color:#67e8f9;}
    .v135-shell{
      position:relative;border:1px solid rgba(148,163,184,.16);border-radius:1.75rem;
      background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,250,252,.92));
      box-shadow:0 30px 80px rgba(15,23,42,.12);
      overflow:hidden;
    }
    .v135-shell::before{
      content:"";position:absolute;inset:0;background:
        radial-gradient(circle at top left, rgba(14,165,233,.11), transparent 26%),
        radial-gradient(circle at top right, rgba(16,185,129,.1), transparent 18%),
        linear-gradient(135deg, rgba(255,255,255,.74), rgba(255,255,255,.12));pointer-events:none;
    }
    .v135-shell > *{position:relative;z-index:1;}
    .v135-kpi-card{
      position:relative;overflow:hidden;border-radius:1.5rem;padding:1.25rem 1.25rem 1.1rem;color:#fff;
      min-height:148px;display:flex;flex-direction:column;justify-content:space-between;
      box-shadow:0 22px 45px rgba(15,23,42,.14);
    }
    .v135-kpi-card::after{content:"";position:absolute;right:-42px;top:-42px;width:138px;height:138px;border-radius:999px;background:rgba(255,255,255,.14);}
    .v135-kpi-card .value{font-size:2.15rem;line-height:1;font-weight:800;letter-spacing:-.03em;}
    .v135-kpi-card .label{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;opacity:.86;font-weight:700;}
    .v135-kpi-card .note{font-size:.75rem;opacity:.84;max-width:17rem;line-height:1.45;}
    .v135-panel{
      border-radius:1.5rem;border:1px solid rgba(226,232,240,.95);background:rgba(255,255,255,.88);
      box-shadow:0 18px 45px rgba(15,23,42,.06);padding:1.2rem;
    }
    .v135-panel-dark{
      border-radius:1.5rem;border:1px solid rgba(30,41,59,.65);background:linear-gradient(180deg,#0f172a,#111827);
      color:#e2e8f0;box-shadow:0 24px 50px rgba(2,6,23,.28);padding:1.25rem;
    }
    .v135-action-btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border-radius:1rem;padding:.9rem 1.05rem;
      font-weight:700;transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
      box-shadow:0 16px 34px rgba(15,23,42,.1);
    }
    .v135-action-btn:hover{transform:translateY(-1px);}
    .v135-toolbar-btn{border-radius:1rem;padding:.7rem 1rem;font-weight:700;box-shadow:0 14px 28px rgba(15,23,42,.08);}
    .v135-booking-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;}
    .v135-booking-head h2{margin:0;}
    .v135-mini-list{display:grid;gap:.85rem;}
    .v135-mini-item{
      display:flex;align-items:flex-start;justify-content:space-between;gap:.85rem;border-radius:1rem;
      border:1px solid rgba(226,232,240,.95);background:#fff;padding:.9rem 1rem;
    }
    .v135-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.35rem .7rem;font-size:.7rem;font-weight:800;}
    .v135-badge--ok{background:rgba(16,185,129,.12);color:#047857;}
    .v135-badge--warn{background:rgba(245,158,11,.12);color:#b45309;}
    .v135-badge--danger{background:rgba(239,68,68,.12);color:#b91c1c;}
    .v135-badge--info{background:rgba(14,165,233,.12);color:#0369a1;}
    .v135-grid-2{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:1rem;}
    @media (min-width: 960px){ .v135-grid-2{grid-template-columns:1.15fr .85fr;} }
    .dashboard-backdrop{position:absolute;inset:0;background:
      radial-gradient(circle at 0% 0%, rgba(6,182,212,.09), transparent 22%),
      radial-gradient(circle at 100% 10%, rgba(16,185,129,.09), transparent 18%);
      pointer-events:none;}