*{margin:0;padding:0;box-sizing:border-box;}
    :root{
      --sat: env(safe-area-inset-top, 0px);
      /* Primary Palette */
      --primary:#0F5C34;--primary-dark:#0A3D22;--primary-light:#2A9D6E;
      --primary-soft:#E8F5ED;--primary-glow:rgba(15,92,52,0.12);
      --accent:#D4A017;--accent-dark:#B07D0F;--accent-soft:#FFF8E7;
      --danger:#DC2626;--danger-dark:#B91C1C;--danger-soft:#FEF2F2;
      /* Neutral Palette */
      --neutral-50:#F9FAFB;--neutral-100:#F3F4F6;--neutral-200:#E5E7EB;
      --neutral-300:#D1D5DB;--neutral-400:#9CA3AF;--neutral-500:#6B7280;
      --neutral-600:#4B5563;--neutral-700:#374151;--neutral-800:#1F2937;--neutral-900:#111827;
      /* Surface Colors */
      --surface:#FFFFFF;--surface-muted:#F9FAFB;--border:#E5E7EB;--border-light:#F3F4F6;
      /* Legacy aliases (keep existing code working) */
      --ink:#111827;--ink2:#1F2937;--white:#FFFFFF;
      --green:#0F5C34;--green-light:#2A9D6E;--green-faint:rgba(15,92,52,0.12);
      --gold:#D4A017;--gold-light:#D4A017;--gold-faint:rgba(212,160,23,0.1);
      --red:#DC2626;--red-faint:rgba(220,38,38,0.08);
      --orange:#E07B39;--orange-faint:rgba(224,123,57,0.08);
      --blue:#1A5F9E;--blue-faint:rgba(26,95,158,0.08);
      --purple:#6B3FA0;--purple-faint:rgba(107,63,160,0.08);
      --text:#1F2937;--muted:#6B7280;--radius:12px;
      --radius-md:10px;
      --shadow:0 1px 3px rgba(0,0,0,0.08),0 4px 16px rgba(0,0,0,0.06);
      --shadow-lg:0 8px 32px rgba(0,0,0,0.12);
      /* Font families */
      --font-sans:'Inter',system-ui,-apple-system,sans-serif;
      --font-display:'Space Grotesk',sans-serif;
    }


    /* ========== SPEED DIAL ENHANCED ========== */
    #bnav-speed-dial{
      display:none;position:absolute;bottom:76px;left:50%;
      transform:translateX(-50%);z-index:9999;
      flex-direction:column;align-items:center;gap:10px;
      pointer-events:none;
    }
    #bnav-speed-dial.open{display:flex !important;pointer-events:auto;}
    .bnav-dial-item{
      display:flex;align-items:center;gap:8px;cursor:pointer;
      animation:dialItemIn 0.22s cubic-bezier(0.34,1.56,0.64,1) both;
    }
    .bnav-dial-item:nth-child(1){animation-delay:0.04s;}
    .bnav-dial-item:nth-child(2){animation-delay:0.08s;}
    .bnav-dial-item:nth-child(3){animation-delay:0.12s;}
    .bnav-dial-item:nth-child(4){animation-delay:0.16s;}
    @keyframes dialItemIn{
      from{opacity:0;transform:translateY(14px) scale(0.85);}
      to{opacity:1;transform:translateY(0) scale(1);}
    }
    .bnav-dial-btn{
      width:50px;height:50px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 4px 18px rgba(0,0,0,0.28);flex-shrink:0;
      transition:transform 0.15s;
    }
    .bnav-dial-btn:active{transform:scale(0.88);}
    .bnav-dial-btn svg{width:22px;height:22px;stroke:white;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
    .bnav-dial-btn.green{background:linear-gradient(135deg,#1a7f4b,#0F5C34);}
    .bnav-dial-btn.blue{background:linear-gradient(135deg,#2575C4,#1A5F9E);}
    .bnav-dial-btn.purple-d{background:linear-gradient(135deg,#8B5CF6,#6B3FA0);}
    .bnav-dial-btn.gold{background:linear-gradient(135deg,#E6C233,#D4A017);}
    .bnav-dial-label{
      background:rgba(13,17,23,0.9);color:white;
      font-size:12px;font-weight:700;padding:5px 12px;
      border-radius:8px;white-space:nowrap;
      box-shadow:0 2px 8px rgba(0,0,0,0.25);
    }

    /* ========== DAILY SALES CHART ========== */
    .sales-chart-wrap{width:100%;overflow-x:auto;padding-bottom:4px;}
    .sales-bar-chart{display:flex;align-items:flex-end;gap:5px;height:120px;padding:0 4px;}
    .sales-bar-col{display:flex;flex-direction:column;align-items:center;flex:1;min-width:28px;gap:4px;}
    .sales-bar-outer{width:100%;background:var(--surface);border-radius:6px 6px 0 0;overflow:hidden;display:flex;align-items:flex-end;transition:height 0.4s cubic-bezier(0.34,1.56,0.64,1);}
    .sales-bar-inner{width:100%;background:linear-gradient(180deg,var(--green-light),var(--green));border-radius:6px 6px 0 0;transition:height 0.4s cubic-bezier(0.34,1.56,0.64,1);min-height:3px;}
    .sales-bar-inner.today{background:linear-gradient(180deg,var(--gold-light),var(--gold));}
    .sales-bar-label{font-size:9px;font-weight:700;color:var(--muted);text-align:center;white-space:nowrap;}
    .sales-bar-val{font-size:9px;font-weight:700;color:var(--green);text-align:center;white-space:nowrap;display:none;}
    .sales-bar-col:hover .sales-bar-val{display:block;}
    .sales-bar-col:hover .sales-bar-label{display:none;}
    .chart-period-btn{padding:5px 12px;border-radius:8px;border:1.5px solid var(--border);background:var(--white);font-size:11px;font-weight:700;cursor:pointer;color:var(--muted);font-family:'Inter',sans-serif;transition:all 0.15s;}
    .chart-period-btn.active{background:var(--ink);color:white;border-color:var(--ink);}
    [data-theme="dark"] .chart-period-btn.active{background:var(--green);border-color:var(--green);}
    .chart-summary-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
    .chart-summary-item{background:var(--surface);border-radius:10px;padding:10px 12px;border:1px solid var(--border);}
    .chart-summary-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);margin-bottom:3px;}
    .chart-summary-val{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;color:var(--text);}
    .chart-summary-val.green{color:var(--green);}
    .chart-summary-val.gold{color:var(--gold);}

    /* ========== CURRENCY PICKER ========== */
    .currency-opt{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1.5px solid var(--border);border-radius:10px;cursor:pointer;background:var(--white);transition:all 0.15s;}
    .currency-opt:hover{border-color:var(--green);background:var(--green-faint);}
    .currency-opt.selected{border-color:var(--green);background:var(--green-faint);}
    .currency-sym{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--text);width:32px;text-align:center;flex-shrink:0;}
    .currency-name{font-size:12px;font-weight:600;color:var(--muted);}
    .currency-opt.selected .currency-sym{color:var(--green);}
    .currency-opt.selected .currency-name{color:var(--green);}

    /* ========== SALES TARGET PROGRESS ========== */
    .dash-target-card{background:linear-gradient(135deg,#0A3D22 0%,#135B36 100%);border-radius:16px;padding:20px 22px;margin-bottom:18px;color:white;position:relative;overflow:hidden;}
    .dash-target-card::before{content:'';position:absolute;top:-30px;right:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.07);}
    .dash-target-card::after{content:'';position:absolute;bottom:-40px;right:30px;width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.05);}
    .dtc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;position:relative;}
    .dtc-label{font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;opacity:0.8;}
    .dtc-period-btns{display:flex;gap:4px;}
    .dtc-pbtn{padding:4px 10px;border-radius:6px;border:1.5px solid rgba(255,255,255,0.3);background:transparent;color:white;font-size:10px;font-weight:700;cursor:pointer;opacity:0.7;font-family:'Inter',sans-serif;transition:all 0.15s;}
    .dtc-pbtn.active{background:rgba(255,255,255,0.2);opacity:1;border-color:rgba(255,255,255,0.6);}
    .dtc-amounts{display:flex;align-items:baseline;gap:8px;margin-bottom:4px;position:relative;}
    .dtc-earned{font-family:'Space Grotesk',sans-serif;font-size:28px;font-weight:800;line-height:1;}
    .dtc-of{font-size:13px;opacity:0.7;}
    .dtc-target{font-size:16px;font-weight:700;opacity:0.85;}
    .dtc-pct{font-size:12px;opacity:0.75;margin-bottom:10px;position:relative;}
    .dtc-bar-bg{height:8px;background:rgba(255,255,255,0.2);border-radius:8px;overflow:hidden;position:relative;margin-bottom:0;}
    .dtc-bar-fill{height:100%;border-radius:8px;background:white;transition:width 0.7s cubic-bezier(0.34,1.56,0.64,1);position:relative;}
    .dtc-bar-fill::after{content:'';position:absolute;right:0;top:0;bottom:0;width:4px;background:rgba(255,255,255,0.5);border-radius:2px;}

    /* Mobile game elements hidden on desktop */
    .dtc-game-layout,.dtc-xp-row{display:none;}

    /* ── Mobile game-like sales target ── */
    @media(max-width:768px){
      .dash-target-card{
        padding:12px 14px 10px;
        border-radius:14px;
        margin-bottom:12px;
        background:linear-gradient(135deg,#060F09 0%,#0A3D22 60%,#135B36 100%);
        border:1px solid rgba(255,255,255,0.08);
        box-shadow:0 4px 20px rgba(0,0,0,0.3);
      }
      .dash-target-card::before{display:none;}
      .dash-target-card::after{display:none;}
      .dtc-top{margin-bottom:8px;align-items:center;}
      .dtc-label{font-size:9px;letter-spacing:1px;opacity:0.6;display:flex;align-items:center;gap:4px;}
      .dtc-label svg{width:10px;height:10px;}
      .dtc-pbtn{padding:3px 7px;font-size:9px;border-radius:5px;border-width:1px;opacity:0.6;}
      .dtc-pbtn.active{opacity:1;background:rgba(255,255,255,0.15);}
      .dtc-game-layout{display:flex;align-items:center;gap:12px;}
      .dtc-ring-wrap{flex-shrink:0;position:relative;width:56px;height:56px;}
      .dtc-ring-svg{width:56px;height:56px;transform:rotate(-90deg);}
      .dtc-ring-track{fill:none;stroke:rgba(255,255,255,0.12);stroke-width:5;}
      .dtc-ring-prog{fill:none;stroke:url(#dtcGrad);stroke-width:5;stroke-linecap:round;stroke-dasharray:138.2;stroke-dashoffset:138.2;transition:stroke-dashoffset 1s cubic-bezier(0.34,1.56,0.64,1);}
      .dtc-ring-pct-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:800;color:white;line-height:1;}
      .dtc-info{flex:1;min-width:0;}
      .dtc-earned-mobile{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:800;color:white;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .dtc-target-mobile{font-size:10px;opacity:0.55;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
      .dtc-msg-mobile{font-size:10px;font-weight:700;margin-top:5px;opacity:0.85;display:flex;align-items:center;gap:4px;}
      .dtc-xp-row{display:flex;align-items:center;gap:6px;margin-top:7px;}
      .dtc-xp-bar-bg{flex:1;height:4px;background:rgba(255,255,255,0.12);border-radius:4px;overflow:hidden;}
      .dtc-xp-bar-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#135B36,#D29922);transition:width 1s cubic-bezier(0.34,1.56,0.64,1);}
      .dtc-xp-label{font-size:9px;font-weight:700;opacity:0.5;white-space:nowrap;font-family:'Space Grotesk',sans-serif;}
      .dtc-amounts,.dtc-pct,.dtc-bar-bg{display:none;}
      @keyframes dtcPulse{0%,100%{opacity:1;}50%{opacity:0.5;}}
      .dtc-ring-prog.almost{animation:dtcPulse 1.4s ease-in-out infinite;}
    }

    /* ── Tablet (769px – 1024px) ── */
    @media(min-width:769px) and (max-width:1024px){
      .sidebar{width:180px;}
      .main{margin-left:180px;}
      .nav-item{padding:9px 12px;margin:2px 6px;font-size:12px;}
      .content{padding:16px 18px;}
      .stats-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
      .dashboard-grid{grid-template-columns:1fr;}
      .topbar{padding:10px 18px;}
      .card{padding:16px;}
    }

    /* ── Wide screens (>1440px) ── */
    @media(min-width:1440px){
      .main{max-width:calc(100vw - 220px);}
      .content{padding:28px 36px;}
      .stats-grid{grid-template-columns:repeat(4,1fr);}
    }

    .dtc-celebrate{font-size:18px;animation:pop 0.4s ease;}
    @keyframes pop{0%{transform:scale(0.5);}70%{transform:scale(1.3);}100%{transform:scale(1);}}
    .exp-cat-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;}
    .exp-cat-data{background:#dbeafe;color:#1e40af;}
    .exp-cat-packaging{background:#fce7f3;color:#9d174d;}
    .exp-cat-transport{background:#fff7ed;color:#9a3412;}
    .exp-cat-electricity{background:#fef9c3;color:#854d0e;}
    .exp-cat-rent{background:#f3e8ff;color:#6b21a8;}
    .exp-cat-staff{background:#dcfce7;color:#14532d;}
    .exp-cat-marketing{background:#ffedd5;color:#7c2d12;}
    .exp-cat-other{background:var(--surface);color:var(--muted);}
    .net-profit-banner{background:linear-gradient(135deg,var(--green),var(--green-light));border-radius:14px;padding:20px;color:white;margin-bottom:18px;}
    .net-profit-banner .npl{font-size:12px;font-weight:700;opacity:0.8;letter-spacing:0.5px;text-transform:uppercase;}
    .net-profit-banner .npv{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:800;line-height:1.1;margin:4px 0;}
    .net-profit-banner .nps{font-size:12px;opacity:0.75;}

    /* ========== SALES GOALS ========== */
    .goal-card{background:var(--white);border-radius:14px;border:1px solid var(--border);padding:20px;margin-bottom:14px;}
    .goal-period{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:6px;}
    .goal-amount{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:800;color:var(--text);margin-bottom:12px;}
    .goal-progress-wrap{height:10px;background:var(--surface);border-radius:10px;overflow:hidden;margin-bottom:8px;border:1px solid var(--border);}
    .goal-progress-bar{height:100%;border-radius:10px;transition:width 0.6s ease;background:var(--green);}
    .goal-progress-bar.warn{background:var(--orange);}
    .goal-progress-bar.danger{background:var(--red);}
    .goal-labels{display:flex;justify-content:space-between;font-size:12px;font-weight:700;}
    .goal-set-wrap{display:flex;gap:8px;align-items:flex-end;margin-top:12px;}
    .goal-set-wrap input{flex:1;}

    /* ========== SETTINGS SAVE CONFIRM ========== */
    .settings-saved-toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:10px 20px;border-radius:20px;font-size:13px;font-weight:700;z-index:9999;opacity:0;pointer-events:none;transition:opacity 0.3s;}
    .settings-saved-toast.show{opacity:1;}

    /* ── PWA install modal ── */
    @keyframes vdModalPop{from{transform:scale(0.88);opacity:0;}to{transform:scale(1);opacity:1;}}

    /* ========== PRODUCT VARIANTS ========== */
    .variant-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--surface);border-radius:8px;margin-bottom:6px;border:1px solid var(--border);}
    .variant-row input{flex:1;min-width:0;font-size:12px;padding:6px 8px;}
    .variant-row .btn-remove-variant{width:26px;height:26px;border-radius:6px;background:var(--red-faint);border:none;color:var(--red);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .variant-row .btn-remove-variant svg{width:12px;height:12px;stroke:var(--red);fill:none;stroke-width:2.5;stroke-linecap:round;}
    .add-variant-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1.5px dashed var(--border);border-radius:8px;background:transparent;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;width:100%;font-family:'Inter',sans-serif;transition:all 0.15s;}
    .add-variant-btn:hover{border-color:var(--green);color:var(--green);}
    .add-variant-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}
    .variant-price-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--surface);border-radius:8px;margin-bottom:8px;border:1px solid var(--border);}
    .variant-price-toggle-label{font-size:12px;font-weight:700;color:var(--text);}
    .variant-price-toggle-sub{font-size:11px;color:var(--muted);}
    #variant-per-price-wrap .variant-row{flex-wrap:wrap;}
    #variant-per-price-wrap .variant-row input[type="number"]{max-width:90px;}

    /* ========== DARK MODE ========== */
    [data-theme="dark"]{
      --ink:#F0F6FC;--ink2:#CDD9E5;--surface:#0D1117;--white:#161B22;--border:#30363D;
      --text:#E6EDF3;--muted:#8B949E;
      --green:#135B36;--green-light:#1a7a48;--green-faint:rgba(19,91,54,0.15);
      --gold:#D29922;--gold-light:#E3B341;--gold-faint:rgba(210,153,34,0.12);
      --red:#F85149;--red-faint:rgba(248,81,73,0.12);
      --orange:#D18616;--orange-faint:rgba(209,134,22,0.12);
      --blue:#388BFD;--blue-faint:rgba(56,139,253,0.12);
      --purple:#BC8CFF;--purple-faint:rgba(188,140,255,0.12);
      --shadow:0 1px 3px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.25);
      --shadow-lg:0 8px 32px rgba(0,0,0,0.4);
    }
    [data-theme="dark"] body{background:var(--surface);color:var(--text);}
    [data-theme="dark"] .topbar,[data-theme="dark"] .modal,[data-theme="dark"] .card,
    [data-theme="dark"] .feature-card,[data-theme="dark"] .land-pricing-card,
    [data-theme="dark"] .testi-card,[data-theme="dark"] .notif-drawer{background:var(--white);}
    [data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{
      background:#0D1117;border-color:var(--border);color:var(--text);
    }
    [data-theme="dark"] input::placeholder,[data-theme="dark"] textarea::placeholder{color:var(--muted);}
    [data-theme="dark"] .dp-status-opt,[data-theme="dark"] .seg-btn{background:#0D1117;border-color:var(--border);}
    [data-theme="dark"] .modal-info-card{background:#0D1117;border-color:var(--border);}
    [data-theme="dark"] .preview-frame{background:#161B22;}
    [data-theme="dark"] .warn-modal{background:var(--white);}
    [data-theme="dark"] table thead tr{background:#0D1117;}
    [data-theme="dark"] tbody tr:hover{background:rgba(255,255,255,0.03);}
    /* Read-only locked field styling — theme-aware */
    input.vd-readonly-locked, select.vd-readonly-locked, textarea.vd-readonly-locked {
      background: var(--surface-muted, #F9FAFB) !important;
      color: var(--muted) !important;
      cursor: default !important;
      opacity: 0.75 !important;
      pointer-events: none;
    }
    [data-theme="dark"] input.vd-readonly-locked,
    [data-theme="dark"] select.vd-readonly-locked,
    [data-theme="dark"] textarea.vd-readonly-locked {
      background: #0D1117 !important;
      color: var(--muted) !important;
      border-color: var(--border) !important;
    }
    [data-theme="dark"] .settings-tab{background:#0D1117;border-color:var(--border);color:var(--muted);}
    [data-theme="dark"] .settings-tab.active{background:var(--green);border-color:var(--green);color:white;}
    [data-theme="dark"] .reminder-item,[data-theme="dark"] .notif-item{background:transparent;}
    [data-theme="dark"] .notif-item:hover,[data-theme="dark"] .reminder-item:hover{background:rgba(255,255,255,0.04);}
    [data-theme="dark"] .filter-btn{background:#0D1117;border-color:var(--border);color:var(--muted);}
    [data-theme="dark"] .filter-btn.active{background:var(--ink);color:var(--surface);border-color:var(--ink);}
    [data-theme="dark"] .btn-outline{background:transparent;border-color:var(--border);color:var(--text);}
    [data-theme="dark"] .channel-badge{background:rgba(255,255,255,0.06);}
    /* ── Orders Channel KPI cards ── */
    #orders-channel-kpis{
      display:flex !important;flex-direction:row;flex-wrap:nowrap;
      gap:10px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;
      scrollbar-width:none;-ms-overflow-style:none;
    }
    #orders-channel-kpis::-webkit-scrollbar{display:none;}
    #orders-channel-kpis .ch-kpi-card{
      flex:0 0 auto;min-width:110px;
      background:var(--white);border:1.5px solid var(--border);
      border-radius:14px;padding:12px 14px 10px;
      cursor:pointer;position:relative;overflow:hidden;
      transition:box-shadow 0.15s,border-color 0.15s,transform 0.12s;
      display:flex;flex-direction:column;gap:3px;
    }
    #orders-channel-kpis .ch-kpi-card::before{
      content:'';position:absolute;top:0;left:0;right:0;height:3px;
      background:var(--ch-accent,var(--green));border-radius:14px 14px 0 0;
      opacity:0;transition:opacity 0.15s;
    }
    #orders-channel-kpis .ch-kpi-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,0.09);}
    #orders-channel-kpis .ch-kpi-card:hover::before{opacity:0.5;}
    #orders-channel-kpis .ch-kpi-card.active-kpi{border-color:var(--ch-accent,var(--green));box-shadow:0 0 0 1px var(--ch-accent,var(--green)),0 4px 14px rgba(0,0,0,0.10);}
    #orders-channel-kpis .ch-kpi-card.active-kpi::before{opacity:1;}
    #orders-channel-kpis .ch-kpi-icon{width:28px;height:28px;border-radius:8px;background:var(--ch-faint,var(--green-faint));display:flex;align-items:center;justify-content:center;font-size:14px;margin-bottom:4px;}
    #orders-channel-kpis .ch-kpi-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    #orders-channel-kpis .ch-kpi-value{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--text);line-height:1;}
    #orders-channel-kpis .ch-kpi-sub{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:3px;margin-top:2px;}
    #orders-channel-kpis .ch-kpi-sub-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}

    /* ── Support Page ── */
    .support-hero{
      background:linear-gradient(135deg,#0a3d22 0%,#0F5C34 45%,#1a8a50 100%);
      border-radius:20px;padding:36px 28px;margin-bottom:24px;color:white;
      position:relative;overflow:hidden;box-shadow:0 8px 32px rgba(15,92,52,0.35);
    }
    .support-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,0.05);pointer-events:none;}
    .support-hero::after{content:'';position:absolute;bottom:-70px;right:80px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,0.04);pointer-events:none;}
    .support-hero-inner{position:relative;z-index:1;}
    .support-hero-eyebrow{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:100px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,0.85);margin-bottom:14px;}
    .support-hero-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(20px,3vw,28px);font-weight:800;letter-spacing:-0.03em;margin-bottom:8px;}
    .support-hero-sub{font-size:14px;color:rgba(255,255,255,0.65);line-height:1.65;max-width:500px;}
    .support-hours-strip{display:flex;gap:14px;margin-top:20px;flex-wrap:wrap;}
    .support-hour-badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:7px 13px;font-size:12px;font-weight:600;color:rgba(255,255,255,0.9);}
    .support-hour-badge svg{width:14px;height:14px;stroke:rgba(255,255,255,0.7);fill:none;stroke-width:2;stroke-linecap:round;}
    .support-pro-badge{background:rgba(240,180,41,0.2);border-color:rgba(240,180,41,0.4);color:#F0B429;}
    .support-pro-badge svg{stroke:#F0B429;}
    .support-form-card{background:var(--white);border:1.5px solid var(--border);border-radius:18px;padding:28px;margin-bottom:20px;}
    .support-form-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--text);margin-bottom:4px;}
    .support-form-sub{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.55;}
    .support-prefilled-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;}
    @media(max-width:480px){.support-prefilled-row{grid-template-columns:1fr;}}
    .support-prefilled-field{background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:10px 14px;}
    .support-prefilled-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:var(--neutral-400);margin-bottom:3px;}
    .support-prefilled-value{font-size:13px;font-weight:600;color:var(--text);}
    .support-type-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:18px;}
    @media(min-width:480px){.support-type-grid{grid-template-columns:repeat(3,1fr);}}
    .support-type-option{border:1.5px solid var(--border);border-radius:10px;padding:11px 12px;cursor:pointer;transition:all 0.15s;display:flex;flex-direction:column;align-items:flex-start;gap:5px;background:var(--white);}
    .support-type-option:hover{border-color:var(--primary-light);background:var(--primary-soft);}
    .support-type-option.selected{border-color:var(--primary);background:var(--primary-soft);}
    .support-type-option svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .support-type-option.selected svg{stroke:var(--primary);}
    .support-type-icon{width:32px;height:32px;border-radius:8px;background:var(--surface);display:flex;align-items:center;justify-content:center;border:1.5px solid var(--border);}
    .support-type-option.selected .support-type-icon{background:rgba(15,92,52,0.1);border-color:rgba(15,92,52,0.2);}
    .support-type-label{font-size:12px;font-weight:700;color:var(--text);}
    .support-type-option.selected .support-type-label{color:var(--primary);}
    .support-send-btn{width:100%;padding:14px;background:var(--primary);color:white;border:none;border-radius:11px;font-size:14px;font-weight:700;font-family:'Inter',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.18s;margin-top:6px;}
    .support-send-btn:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:0 4px 16px rgba(15,92,52,0.3);}
    .support-send-btn svg{width:16px;height:16px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;}
    .support-info-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px;}
    @media(max-width:480px){.support-info-cards{grid-template-columns:1fr;}}
    .support-info-card{background:var(--white);border:1.5px solid var(--border);border-radius:14px;padding:18px;}
    .support-info-card-icon{width:38px;height:38px;border-radius:10px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
    .support-info-card-icon svg{width:18px;height:18px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;}
    .support-info-card-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px;}
    .support-info-card-sub{font-size:12px;color:var(--muted);line-height:1.55;}
    .support-pro-callout{background:linear-gradient(135deg,#78350f,#92400e);border-radius:14px;padding:18px 20px;display:flex;align-items:center;gap:14px;margin-bottom:20px;border:1px solid rgba(240,180,41,0.2);}
    .support-pro-callout-icon{width:40px;height:40px;border-radius:10px;background:rgba(240,180,41,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .support-pro-callout-icon svg{width:20px;height:20px;stroke:#F0B429;fill:none;stroke-width:2;stroke-linecap:round;}
    .support-pro-callout-text{flex:1;}
    .support-pro-callout-title{font-size:13px;font-weight:700;color:#F0B429;margin-bottom:3px;}
    .support-pro-callout-sub{font-size:12px;color:rgba(255,255,255,0.6);line-height:1.5;}
    [data-theme="dark"] .support-form-card,[data-theme="dark"] .support-info-card{background:var(--white);}
    [data-theme="dark"] .support-prefilled-field{background:#0D1117;border-color:var(--border);}
    [data-theme="dark"] .support-type-option{background:var(--white);}
    [data-theme="dark"] .support-type-option:hover,[data-theme="dark"] .support-type-option.selected{background:rgba(15,92,52,0.1);}
    [data-theme="dark"] .support-type-icon{background:#0D1117;}
    /* ── Support Sent / Cooldown States ── */
    .support-sent-banner{display:none;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1.5px solid #86efac;border-radius:14px;padding:20px 22px;margin-bottom:20px;text-align:center;}
    .support-sent-banner.active{display:block;}
    .support-sent-icon{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#22c55e);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 4px 12px rgba(22,163,74,0.3);}
    .support-sent-icon svg{width:24px;height:24px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
    .support-sent-title{font-size:16px;font-weight:800;color:#15803d;font-family:'Space Grotesk',sans-serif;margin-bottom:6px;}
    .support-sent-sub{font-size:13px;color:#166534;line-height:1.6;}
    .support-cooldown-banner{display:none;background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1.5px solid #fcd34d;border-radius:14px;padding:18px 20px;margin-bottom:20px;text-align:center;}
    .support-cooldown-banner.active{display:block;}
    .support-cooldown-title{font-size:14px;font-weight:800;color:#92400e;font-family:'Space Grotesk',sans-serif;margin-bottom:5px;}
    .support-cooldown-sub{font-size:13px;color:#78350f;line-height:1.6;}
    .support-cooldown-timer{font-size:22px;font-weight:800;color:#b45309;font-family:'Space Grotesk',sans-serif;margin:10px 0 4px;letter-spacing:-0.02em;}
    .support-form-locked .sp-form-body{opacity:0.45;pointer-events:none;user-select:none;}
    .support-send-btn:disabled{background:var(--neutral-400);cursor:not-allowed;transform:none;box-shadow:none;}

    /* ── Dark mode: deep green overrides for all major green UI ── */
    [data-theme="dark"] .calc-result-box{background:linear-gradient(135deg,#0A3D22 0%,#135B36 100%);}
    [data-theme="dark"] .net-profit-banner{background:linear-gradient(135deg,#0A3D22 0%,#135B36 100%);}
    [data-theme="dark"] .btn-primary{background:#135B36;box-shadow:none;}
    [data-theme="dark"] .btn-primary:hover{background:#1a7a48;}
    [data-theme="dark"] .bnav-add-btn{background:#135B36;box-shadow:0 4px 16px rgba(19,91,54,0.35);}
    [data-theme="dark"] .bnav-add-btn:hover{background:#1a7a48;}
    [data-theme="dark"] .nav-item.active{background:rgba(19,91,54,0.25);}
    [data-theme="dark"] .goal-progress-bar{background:#135B36;}
    [data-theme="dark"] .seg-btn.active-green{background:#135B36;box-shadow:0 2px 8px rgba(19,91,54,0.25);}
    [data-theme="dark"] .notif-item.unread{background:rgba(19,91,54,0.1);border-color:rgba(19,91,54,0.15);}
    [data-theme="dark"] .template-card.selected{border-color:#135B36;box-shadow:0 0 0 3px rgba(19,91,54,0.2);}
    [data-theme="dark"] .dtc-xp-bar-fill{background:linear-gradient(90deg,#135B36,#D29922);}
    [data-theme="dark"] .sales-bar-inner{background:linear-gradient(180deg,#1a7a48,#135B36);}
    [data-theme="dark"] .sales-bar-inner.today{background:linear-gradient(180deg,var(--gold-light),var(--gold));}
    [data-theme="dark"] .dtc-ring-prog{stroke:url(#dtcGrad);}
    [data-theme="dark"] .margin-bar-fill{background:#135B36;}
    [data-theme="dark"] .settings-saved-toast{background:#135B36;}

    /* Dark mode toggle button */
    .theme-toggle{
      display:flex;align-items:center;gap:10px;
      padding:12px 16px;border-radius:12px;border:1.5px solid var(--border);
      background:var(--white);cursor:pointer;transition:all 0.15s;width:100%;
      font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--text);
    }
    .theme-toggle:hover{border-color:var(--green);}
    .theme-toggle-icon{width:36px;height:36px;border-radius:9px;background:var(--surface);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .theme-toggle-icon svg{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .theme-toggle-label{flex:1;text-align:left;}
    .theme-toggle-sub{font-size:11px;color:var(--muted);font-weight:400;display:block;margin-top:1px;}
    .theme-seg{display:flex;gap:4px;background:var(--surface);padding:3px;border-radius:8px;}
    .theme-seg-btn{padding:5px 10px;border-radius:6px;border:none;background:transparent;font-size:11px;font-weight:700;cursor:pointer;color:var(--muted);font-family:'Inter',sans-serif;transition:all 0.15s;display:flex;align-items:center;gap:4px;}
    .theme-seg-btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .theme-seg-btn.active{background:var(--white);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,0.1);}

    body{font-family:'Inter',sans-serif;background:var(--surface);color:var(--text);min-height:100vh;font-size:14px;}

    /* ========== LANDING PAGE ========== */
    #landing{display:none;}
    #app{display:none;opacity:0;transition:opacity 0.35s ease;}
    #app.vd-visible{opacity:1;}

    /* ── AUTH LOADING SCREEN (legacy stubs kept for any JS refs) ── */

    .land-nav{
      position:fixed;top:0;left:0;right:0;z-index:200;
      padding:0 40px;height:64px;
      background:rgba(13,17,23,0.95);
      backdrop-filter:blur(12px);
      display:flex;align-items:center;justify-content:space-between;
      border-bottom:1px solid rgba(255,255,255,0.07);
    }
    .land-logo{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:white;letter-spacing:-0.5px;}
    .land-logo span{color:#F0B429;}
    .land-nav-links{display:flex;align-items:center;gap:28px;}
    .land-nav-links a{color:rgba(255,255,255,0.6);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:color 0.15s;}
    .land-nav-links a:hover{color:white;}
    .land-nav-cta{display:flex;gap:10px;align-items:center;}
    .btn-land-outline{padding:8px 18px;border:1px solid rgba(255,255,255,0.2);color:white;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;transition:all 0.15s;font-family:'Inter',sans-serif;}
    .btn-land-outline:hover{border-color:white;}
    .btn-land-primary{padding:9px 20px;background:var(--green);color:white;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.15s;}
    .btn-land-primary:hover{background:var(--green-light);}

    .hero{
      min-height:100vh;
      background:linear-gradient(145deg,#0D1117 0%,#111827 50%,#0D1117 100%);
      display:flex;flex-direction:column;align-items:center;justify-content:center;
      text-align:center;padding:120px 24px 80px;position:relative;overflow:hidden;
    }
    .hero::before{
      content:'';position:absolute;inset:0;
      background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(26,127,75,0.15) 0%,transparent 60%);
    }
    .hero-eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      background:rgba(26,127,75,0.15);border:1px solid rgba(26,127,75,0.3);
      color:#4ADE80;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
      padding:6px 14px;border-radius:20px;margin-bottom:28px;position:relative;
    }
    .hero h1{
      font-family:'Space Grotesk',sans-serif;font-size:clamp(40px,7vw,80px);font-weight:800;
      color:white;line-height:1.05;letter-spacing:-2px;margin-bottom:24px;position:relative;
    }
    .hero h1 .accent{
      background:linear-gradient(135deg,#F0B429,#2EA66A);
      -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    }
    .hero-sub{font-size:clamp(16px,2.5vw,20px);color:rgba(255,255,255,0.55);max-width:560px;line-height:1.65;margin-bottom:40px;position:relative;}
    .hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;}
    .btn-hero-primary{
      padding:16px 36px;background:var(--green);color:white;border:none;border-radius:10px;
      font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;
      transition:all 0.2s;box-shadow:0 0 40px rgba(26,127,75,0.4);
    }
    .btn-hero-primary:hover{background:var(--green-light);box-shadow:0 0 60px rgba(26,127,75,0.5);transform:translateY(-1px);}
    .btn-hero-outline{
      padding:16px 36px;background:transparent;color:white;border:1px solid rgba(255,255,255,0.2);
      border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.2s;
    }
    .btn-hero-outline:hover{border-color:rgba(255,255,255,0.5);background:rgba(255,255,255,0.05);}
    .hero-trust{margin-top:56px;display:flex;align-items:center;gap:24px;justify-content:center;flex-wrap:wrap;position:relative;}
    .hero-trust-item{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,0.4);font-size:13px;}
    .trust-dot{width:5px;height:5px;border-radius:50%;background:#2EA66A;}

    /* Floating dashboard preview */
    .hero-preview{
      margin-top:72px;position:relative;width:100%;max-width:900px;
    }
    .preview-frame{
      background:var(--ink2);border-radius:16px;border:1px solid rgba(255,255,255,0.1);
      padding:0;overflow:hidden;box-shadow:0 40px 80px rgba(0,0,0,0.5);
    }
    .preview-titlebar{
      height:40px;background:var(--ink);display:flex;align-items:center;padding:0 16px;gap:8px;
      border-bottom:1px solid rgba(255,255,255,0.07);
    }
    .preview-dot{width:12px;height:12px;border-radius:50%;}
    .preview-url{flex:1;margin:0 16px;background:rgba(255,255,255,0.06);border-radius:6px;height:22px;display:flex;align-items:center;padding:0 12px;}
    .preview-url span{font-size:11px;color:rgba(255,255,255,0.3);}
    .preview-body{padding:20px;display:grid;grid-template-columns:160px 1fr;gap:16px;min-height:300px;}
    .preview-sidebar{background:rgba(0,0,0,0.3);border-radius:10px;padding:14px 0;}
    .preview-nav-item{height:30px;margin:2px 10px;border-radius:6px;display:flex;align-items:center;padding:0 10px;gap:8px;}
    .preview-nav-item.active{background:rgba(26,127,75,0.2);}
    .preview-nav-bar{height:8px;border-radius:4px;background:rgba(255,255,255,0.08);flex:1;}
    .preview-nav-bar.active{background:rgba(26,127,75,0.5);}
    .preview-main{display:grid;gap:12px;}
    .preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
    .preview-stat{background:rgba(255,255,255,0.04);border-radius:8px;padding:12px;border:1px solid rgba(255,255,255,0.06);}
    .preview-stat-val{height:12px;border-radius:3px;background:rgba(255,255,255,0.15);margin-bottom:6px;width:60%;}
    .preview-stat-val.green{background:rgba(26,127,75,0.4);}
    .preview-stat-val.gold{background:rgba(240,180,41,0.4);}
    .preview-stat-label{height:8px;border-radius:2px;background:rgba(255,255,255,0.06);width:80%;}
    .preview-table{background:rgba(255,255,255,0.03);border-radius:8px;border:1px solid rgba(255,255,255,0.06);}
    .preview-row{height:32px;border-bottom:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;padding:0 12px;gap:12px;}
    .preview-row:last-child{border:none;}
    .preview-col{height:8px;border-radius:2px;background:rgba(255,255,255,0.08);}
    .preview-badge{height:18px;width:50px;border-radius:9px;background:rgba(26,127,75,0.3);}
    .preview-badge.gold{background:rgba(240,180,41,0.3);}

    /* FEATURES */
    .land-section{padding:100px 40px;max-width:1200px;margin:0 auto;}
    .section-eyebrow{display:inline-block;color:var(--green);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;}
    .section-heading{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-1px;margin-bottom:16px;color:var(--ink);}
    .section-sub{font-size:17px;color:var(--muted);max-width:520px;line-height:1.65;margin-bottom:56px;}
    .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;}
    .feature-card{
      background:var(--white);border-radius:16px;padding:32px;border:1px solid var(--border);
      transition:all 0.2s;position:relative;overflow:hidden;
    }
    .feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--green),var(--green-light));}
    .feature-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);}
    .feature-icon-wrap{width:48px;height:48px;border-radius:12px;background:var(--green-faint);display:flex;align-items:center;justify-content:center;margin-bottom:18px;}
    .feature-icon-wrap svg{width:24px;height:24px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .feature-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:700;margin-bottom:8px;}
    .feature-desc{color:var(--muted);font-size:14px;line-height:1.65;}

    /* HOW IT WORKS */
    .how-section{background:var(--ink);padding:100px 40px;}
    .how-inner{max-width:1000px;margin:0 auto;}
    .how-section .section-heading{color:white;}
    .how-section .section-sub{color:rgba(255,255,255,0.5);}
    .how-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0;position:relative;}
    .how-steps::before{content:'';position:absolute;top:36px;left:60px;right:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);}
    .how-step{text-align:center;padding:0 20px;}
    .how-step-num{
      width:72px;height:72px;border-radius:50%;background:rgba(26,127,75,0.15);border:2px solid rgba(26,127,75,0.3);
      display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
      font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:#4ADE80;
    }
    .how-step-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:white;margin-bottom:10px;}
    .how-step-desc{font-size:13px;color:rgba(255,255,255,0.45);line-height:1.65;}

    /* PRICING */
    .pricing-section{padding:100px 40px;max-width:1100px;margin:0 auto;text-align:center;}
    .pricing-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:800px;margin:0 auto;}
    .land-pricing-card{
      background:var(--white);border-radius:20px;padding:36px;border:1px solid var(--border);
      position:relative;text-align:left;transition:all 0.2s;
    }
    .land-pricing-card.featured{border-color:var(--green);box-shadow:0 0 0 1px var(--green),var(--shadow-lg);}
    .land-pricing-card.featured::before{
      content:'MOST POPULAR';position:absolute;top:-12px;left:50%;transform:translateX(-50%);
      background:var(--green);color:white;font-size:10px;font-weight:800;letter-spacing:1px;
      padding:4px 14px;border-radius:20px;
    }
    .land-plan-name{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;}
    .land-plan-price{font-family:'Space Grotesk',sans-serif;font-size:42px;font-weight:800;color:var(--text);line-height:1;}
    .land-plan-price sup{font-size:20px;vertical-align:super;margin-right:2px;}
    .land-plan-period{font-size:14px;color:var(--muted);margin-top:4px;margin-bottom:24px;}
    .land-plan-features{list-style:none;margin-bottom:28px;}
    .land-plan-features li{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:14px;border-bottom:1px solid var(--surface);}
    .land-plan-features li:last-child{border:none;}
    .land-plan-features li svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.5;flex-shrink:0;}

    /* TESTIMONIALS */
    .testimonials-section{background:var(--surface);padding:100px 40px;}
    .testi-inner{max-width:1100px;margin:0 auto;}
    .testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:56px;}
    .testi-card{background:var(--white);border-radius:16px;padding:28px;border:1px solid var(--border);}
    .testi-stars{display:flex;gap:4px;margin-bottom:14px;}
    .testi-star{width:16px;height:16px;fill:#F0B429;}
    .testi-quote{font-size:15px;line-height:1.7;color:var(--text);margin-bottom:20px;}
    .testi-author{display:flex;align-items:center;gap:12px;}
    .testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:16px;color:white;flex-shrink:0;}
    .testi-name{font-weight:700;font-size:14px;}
    .testi-role{font-size:12px;color:var(--muted);}

    /* FOOTER */
    .land-footer{background:var(--ink);padding:60px 40px 30px;}
    .foot-inner{max-width:1100px;margin:0 auto;}
    .foot-top{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.08);}
    .foot-brand{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:white;margin-bottom:12px;}
    .foot-brand span{color:#F0B429;}
    .foot-brand-desc{font-size:13px;color:rgba(255,255,255,0.4);line-height:1.7;}
    .foot-col-title{font-size:12px;font-weight:700;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;}
    .foot-links{list-style:none;}
    .foot-links li{margin-bottom:10px;}
    .foot-links li a{color:rgba(255,255,255,0.5);font-size:13px;cursor:pointer;transition:color 0.15s;}
    .foot-links li a:hover{color:white;}
    .foot-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px;}
    .foot-copy{font-size:12px;color:rgba(255,255,255,0.25);}

    /* CTA BANNER */
    .cta-banner{
      background:linear-gradient(135deg,var(--green) 0%,#0F5C34 100%);
      padding:80px 40px;text-align:center;
    }
    .cta-inner{max-width:600px;margin:0 auto;}
    .cta-banner h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,44px);font-weight:800;color:white;letter-spacing:-1px;margin-bottom:16px;}
    .cta-banner p{font-size:17px;color:rgba(255,255,255,0.7);margin-bottom:36px;}

    /* ========== APP STYLES ========== */
    .sidebar{position:fixed;left:0;top:0;bottom:0;width:220px;background:#0D1117;display:flex;flex-direction:column;z-index:100;transition:transform 0.3s;overflow:hidden;}
    .sidebar>nav{flex:1;min-height:0;max-height:100%;overflow-y:auto;padding:10px 0 16px;-webkit-overflow-scrolling:touch;}
    .sidebar-logo{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,0.07);}
    .logo-text{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:var(--white);letter-spacing:-0.5px;}
    .logo-text span{color:var(--gold-light);}
    .logo-badge{display:inline-block;background:rgba(212,160,23,0.15);color:var(--gold);font-size:8px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:5px;letter-spacing:0.8px;vertical-align:middle;border:1px solid rgba(212,160,23,0.3);}
    .nav-item{display:flex;align-items:center;gap:11px;padding:10px 18px;margin:2px 10px;border-radius:8px;color:rgba(255,255,255,0.5);cursor:pointer;font-size:13px;font-weight:500;border-left:none;transition:all 0.15s;}
    .nav-item:hover{background:rgba(255,255,255,0.06);color:rgba(255,255,255,0.9);}
    .nav-item.active{background:rgba(26,127,75,0.2);color:#fff;font-weight:600;}
    .nav-item.active .nav-icon svg{stroke:var(--green-light);}
    .nav-icon{width:18px;height:18px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
    .nav-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .nav-badge{margin-left:auto;background:var(--red);color:white;font-size:10px;font-weight:700;padding:1px 6px;border-radius:8px;}
    .nav-divider{height:1px;background:rgba(255,255,255,0.07);margin:10px 18px;}
    .sidebar-bottom{flex-shrink:0;border-top:1px solid rgba(255,255,255,0.07);background:#0D1117;}
    .sidebar-footer{padding:16px 20px;display:flex;align-items:center;gap:8px;}
    .sidebar-logout-btn{flex-shrink:0;width:34px;height:34px;border-radius:8px;background:rgba(220,38,38,0.12);border:1px solid rgba(220,38,38,0.2);color:rgba(220,38,38,0.75);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.15s;}
    .sidebar-logout-btn:hover{background:rgba(220,38,38,0.22);color:#ef4444;border-color:rgba(220,38,38,0.4);}
    .store-info{display:flex;align-items:center;gap:12px;}
    .store-avatar{width:40px;height:40px;background:var(--primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:white;flex-shrink:0;}
    /* Mobile inline store footer — shown inside nav after Subscription */
    .sidebar-nav-footer{display:none;margin:10px 10px 4px;border-top:1px solid rgba(255,255,255,0.07);padding-top:10px;}
    @media(max-width:768px){
      /* ── Mobile sidebar — full-height app drawer ── */
      .sidebar{
        overflow:hidden;display:flex;flex-direction:column;
        top:0;bottom:0;height:auto;
        width:min(80vw,290px) !important;
        background:#0D1117;
        border-right:1px solid rgba(255,255,255,0.06);
        box-shadow:4px 0 32px rgba(0,0,0,0.5);
      }
      .sidebar-logo{
        padding:18px 16px 14px;
        border-bottom:1px solid rgba(255,255,255,0.07);
        flex-shrink:0;
      }
      .sidebar>nav{
        flex:1;overflow-y:auto;overflow-x:hidden;
        padding:8px 0 16px !important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        touch-action:pan-y;
        /* Ensure sidebar nav scrolls even when body is overflow:hidden */
        position:relative;
        z-index:1;
      }
      /* Bigger, more tappable nav items */
      .sidebar .nav-item{
        padding:13px 16px;
        margin:1px 8px;
        border-radius:10px;
        font-size:14px;
        font-weight:500;
        gap:13px;
        min-height:48px;
      }
      .sidebar .nav-item .nav-icon svg{
        width:20px;height:20px;
      }
      /* Section group labels */
      .nav-group-label{
        font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
        color:rgba(255,255,255,0.25);padding:14px 24px 4px;
      }
      /* Locked items at bottom — PRO pill style */
      .sidebar .nav-item.nav-locked{
        opacity:0.5;
        background:transparent;
      }
      .sidebar .nav-item.nav-locked .nav-lock-pro{
        margin-left:auto;flex-shrink:0;
        font-size:9px;font-weight:800;letter-spacing:0.8px;
        background:rgba(212,160,23,0.15);color:var(--gold,#D4A017);
        border:1px solid rgba(212,160,23,0.3);
        border-radius:4px;padding:2px 5px;
        text-transform:uppercase;
      }
      /* Divider before locked section */
      .nav-locked-divider{
        height:1px;background:rgba(255,255,255,0.07);
        margin:10px 18px 6px;
      }
      .nav-locked-label{
        font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
        color:rgba(212,160,23,0.5);padding:4px 24px 4px;
      }
      /* Store card at bottom of sidebar */
      .sidebar-mobile-footer{
        flex-shrink:0;
        border-top:1px solid rgba(255,255,255,0.07);
        padding:12px 14px;
        display:flex;align-items:center;gap:10px;
        background:#0D1117;
      }
      .sidebar-mobile-footer .store-avatar{
        width:38px;height:38px;font-size:15px;flex-shrink:0;
        border-radius:10px;background:var(--primary);
        display:flex;align-items:center;justify-content:center;
        font-family:"Space Grotesk",monospace;font-weight:700;color:white;
      }
      .sidebar-mobile-footer-info{flex:1;min-width:0;}
      .sidebar-mobile-footer-name{font-size:13px;font-weight:700;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
      .sidebar-mobile-footer-plan{font-size:10px;color:rgba(255,255,255,0.35);margin-top:2px;}
      .sidebar-mobile-footer-logout{
        flex-shrink:0;width:34px;height:34px;border-radius:8px;
        background:rgba(220,38,38,0.1);border:1px solid rgba(220,38,38,0.2);
        color:rgba(220,38,38,0.7);cursor:pointer;
        display:flex;align-items:center;justify-content:center;
        transition:all 0.15s;
      }
      .sidebar-mobile-footer-logout:hover{background:rgba(220,38,38,0.2);color:#ef4444;}
      /* Hide desktop footer on mobile */
      .sidebar-bottom{display:none;}
      .sidebar-nav-footer{display:none !important;}
    }
    @media(min-width:769px){
      .sidebar-nav-footer{display:none;}
      .sidebar-nav-footer-card{
        background:rgba(255,255,255,0.05);
        border:1px solid rgba(255,255,255,0.08);
        border-radius:12px;
        padding:12px 14px;
        display:flex;
        align-items:center;
        gap:10px;
      }
      .sidebar-nav-footer-card .store-avatar{
        width:36px;height:36px;font-size:14px;flex-shrink:0;
        border-radius:8px;background:var(--primary);
      }
      .sidebar-nav-footer-info{flex:1;min-width:0;}
      .sidebar-nav-footer-name{font-size:12px;font-weight:700;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2;}
      .sidebar-nav-footer-plan{font-size:10px;color:rgba(255,255,255,0.4);margin-top:2px;display:flex;align-items:center;gap:4px;}
      .sidebar-nav-footer-plan-dot{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0;}
    }
    .store-avatar{width:40px;height:40px;background:var(--primary);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:white;flex-shrink:0;}
    .store-details{flex:1;min-width:0;}
    .store-name{font-size:14px;font-weight:600;color:white;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .store-plan{font-size:11px;color:var(--neutral-500);}
    .main{margin-left:220px;min-height:100vh;display:flex;flex-direction:column;min-width:0;overflow-x:hidden;}
    @media(max-width:768px){.main{margin-left:0;}}
    .topbar{background:var(--white);padding:8px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:95;}
    .topbar-left{display:flex;align-items:center;gap:12px;}
    .hamburger{display:none;background:none;border:none;cursor:pointer;color:var(--text);width:36px;height:36px;align-items:center;justify-content:center;flex-shrink:0;padding:0;border-radius:8px;}
    .page-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;line-height:36px;}
    .topbar-right{display:flex;align-items:center;gap:10px;}
    .btn{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all 0.15s;font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:6px;text-decoration:none;}
    .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .btn-primary{background:var(--green);color:white;}
    .btn-primary:hover{background:var(--green-light);}
    .btn-outline{background:transparent;border:1px solid var(--border);color:var(--text);}
    .btn-outline:hover{border-color:var(--green);color:var(--green);}
    .btn-danger{background:var(--red);color:white;border:none;}
    .btn-danger:hover{background:#EF4444;color:white;}
    .btn-gold{background:var(--gold);color:white;}
    .btn-gold:hover{background:var(--gold-light);}
    .btn-purple{background:var(--purple-faint);color:var(--purple);border:1px solid rgba(107,63,160,0.2);}
    .btn-purple:hover{background:var(--purple);color:white;}
    .btn-sm{padding:6px 12px;font-size:12px;}
    .btn-xs{padding:4px 10px;font-size:11px;font-weight:700;}
    .btn-full{width:100%;padding:12px;font-size:14px;justify-content:center;}
    .content{padding:22px 32px;flex:1;min-width:0;overflow-x:hidden;}
    .page{display:none;overflow-x:hidden;}
    .page.active{display:block;}

    /* STATS */
    .stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;container-type:inline-size;}

    /* ── KPI Card — new professional design ── */
    .stat-card{
      background:var(--white);
      border-radius:16px;
      padding:16px 18px 14px;
      border:1px solid var(--border);
      box-shadow:0 1px 4px rgba(0,0,0,0.06);
      display:flex;flex-direction:column;justify-content:space-between;
      overflow:hidden;min-width:0;max-width:100%;position:relative;
      cursor:pointer;transition:transform 0.14s,box-shadow 0.14s;
      gap:10px;
    }
    .stat-card > div:first-child{min-width:0;flex:1;overflow:hidden;}
    .stat-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
    .stat-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.6px;}
    .stat-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .stat-icon svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .stat-value{font-family:'Space Grotesk',sans-serif;font-size:clamp(14px,3.5cqw,24px);font-weight:700;color:var(--text);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:4px;max-width:100%;}
    .stat-sub{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;}
    .stat-sub-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
    .stat-tap-hint{font-size:9px;font-weight:600;color:var(--muted);opacity:0;letter-spacing:0.4px;text-align:right;text-transform:uppercase;transition:opacity 0.2s;position:absolute;bottom:8px;right:12px;}
    .stat-card:hover .stat-tap-hint{opacity:0.6;}

    /* Color variants */
    .stat-card.green .stat-icon{background:var(--green-faint);}
    .stat-card.green .stat-icon svg{stroke:var(--green);}
    .stat-card.green .stat-sub-dot{background:var(--green);}
    .stat-card.gold .stat-icon{background:var(--gold-faint);}
    .stat-card.gold .stat-icon svg{stroke:var(--gold);}
    .stat-card.gold .stat-sub-dot{background:var(--gold);}
    .stat-card.red .stat-icon{background:var(--red-faint);}
    .stat-card.red .stat-icon svg{stroke:var(--red);}
    .stat-card.red .stat-sub-dot{background:var(--red);}
    .stat-card.blue .stat-icon{background:var(--blue-faint);}
    .stat-card.blue .stat-icon svg{stroke:var(--blue);}
    .stat-card.blue .stat-sub-dot{background:var(--blue);}
    .stat-card.orange .stat-icon{background:var(--orange-faint);}
    .stat-card.orange .stat-icon svg{stroke:var(--orange);}
    .stat-card.orange .stat-sub-dot{background:var(--orange);}
    .stat-card.purple .stat-icon{background:var(--purple-faint);}
    .stat-card.purple .stat-icon svg{stroke:var(--purple);}
    .stat-card.purple .stat-sub-dot{background:var(--purple);}

    /* CARDS */
    .card{background:var(--white);border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow);margin-bottom:18px;min-width:0;overflow:hidden;}
    .card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);min-width:0;overflow:hidden;}
    .card-title{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0;}
    .card-title svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
    .card-body{padding:20px;min-width:0;}

    /* TABLES */
    .table-wrap{overflow-x:auto;}
    table{width:100%;border-collapse:collapse;}
    th{padding:10px 16px;text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;background:var(--surface);border-bottom:1px solid var(--border);white-space:nowrap;}
    td{padding:12px 16px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle;}
    tr:last-child td{border-bottom:none;}
    tr:hover td{background:var(--surface);}

    /* BADGES */
    .badge{padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
    .badge-green{background:var(--green-faint);color:var(--green);}
    .badge-gold{background:var(--gold-faint);color:var(--gold);}
    .badge-red{background:var(--red-faint);color:var(--red);}
    .badge-orange{background:var(--orange-faint);color:var(--orange);}
    .badge-blue{background:var(--blue-faint);color:var(--blue);}
    .badge-purple{background:var(--purple-faint);color:var(--purple);}
    .badge-gray{background:var(--surface);color:var(--muted);border:1px solid var(--border);}

    /* SECTION HEADER */
    .section-header2{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
    .section-title2{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;}

    /* FORMS */
    .form-group{margin-bottom:14px;min-width:0;}
    .form-group label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.3px;}
    .form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.15s;background:var(--white);color:var(--text);}
    .form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--green);}
    .form-group textarea{resize:vertical;min-height:70px;}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

    /* MODAL */
    .modal-overlay{display:none;position:fixed;inset:0;background:rgba(13,17,23,0.6);backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center;padding:16px;}
    .modal-overlay.active{display:flex;}
    .modal{background:var(--white);border-radius:20px;width:100%;max-width:520px;position:relative;max-height:94vh;overflow-y:auto;box-shadow:0 24px 64px rgba(0,0,0,0.18),0 4px 16px rgba(0,0,0,0.08);}
    .modal-header{padding:0;border-bottom:none;display:flex;flex-direction:column;position:sticky;top:0;background:var(--white);z-index:2;border-radius:20px 20px 0 0;overflow:hidden;}
    .modal-header-bar{height:3px;background:linear-gradient(90deg,var(--green),var(--green-light));}
    .modal-header-inner{padding:20px 24px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);}
    .modal-header-left{display:flex;align-items:center;gap:12px;}
    .modal-header-icon{width:36px;height:36px;border-radius:10px;background:var(--green-faint);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .modal-header-icon svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .modal-header-icon.gold{background:var(--gold-faint);}
    .modal-header-icon.gold svg{stroke:var(--gold);}
    .modal-header-icon.blue{background:var(--blue-faint);}
    .modal-header-icon.blue svg{stroke:var(--blue);}
    .modal-header-icon.red{background:var(--red-faint);}
    .modal-header-icon.red svg{stroke:var(--red);}
    .modal-header-icon.purple{background:var(--purple-faint);}
    .modal-header-icon.purple svg{stroke:var(--purple);}
    .modal-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;color:var(--ink);letter-spacing:-0.3px;}
    .modal-subtitle{font-size:11px;color:var(--muted);margin-top:1px;font-weight:500;}
    .modal-close{background:var(--surface);border:1px solid var(--border);cursor:pointer;color:var(--muted);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all 0.15s;flex-shrink:0;}
    .modal-close:hover{background:var(--red-faint);border-color:rgba(207,32,48,0.2);color:var(--red);}
    .modal-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
    .modal-body{padding:22px 24px;}
    .modal-section{margin-bottom:20px;}
    .modal-section-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
    .modal-section-label::after{content:'';flex:1;height:1px;background:var(--border);}
    .modal-footer{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;background:var(--surface);border-radius:0 0 20px 20px;}
    .modal-footer .btn-outline{background:var(--white);}
    /* Segmented control (toggle group) */
    .seg-ctrl{display:flex;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:3px;gap:3px;}
    .seg-btn{flex:1;padding:8px 6px;border:none;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;color:var(--muted);background:transparent;transition:all 0.15s;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;}
    .seg-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .seg-btn.active{background:var(--white);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,0.1);border:1px solid var(--border);}
    .seg-btn.active-green{background:var(--green);color:white;box-shadow:0 2px 8px rgba(19,91,54,0.25);}
    .seg-btn.active-gold{background:var(--gold);color:white;box-shadow:0 2px 8px rgba(212,160,23,0.3);}
    .seg-btn.active-red{background:var(--red);color:white;box-shadow:0 2px 8px rgba(207,32,48,0.3);}
    /* Info card inside modal */
    .modal-info-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:14px;}
    .modal-info-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px;}
    .modal-info-row:last-child{border-bottom:none;padding-bottom:0;}
    .modal-info-row:first-child{padding-top:0;}
    .modal-info-key{color:var(--muted);font-size:12px;font-weight:600;flex-shrink:0;}
    .modal-info-val{font-weight:700;color:var(--text);text-align:right;word-break:break-word;}
    /* Stock badge */
    .stock-pill{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:700;margin-top:6px;}

    /* FILTERS */
    .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
    .filter-btn{padding:6px 13px;border-radius:20px;border:1px solid var(--border);background:var(--white);font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;color:var(--muted);font-family:'Inter',sans-serif;}
    .filter-btn.active{background:var(--green);color:white;border-color:var(--green);}
    .filter-btn:hover:not(.active){border-color:var(--green);color:var(--green);}
    .search-input{padding:8px 13px 8px 36px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;outline:none;font-family:'Inter',sans-serif;width:100%;min-width:0;transition:border-color 0.15s;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2357606A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E") no-repeat 12px center;}
    .search-input:focus{border-color:var(--green);}
    .section-header2 .search-input{flex:1 1 100%;}

    /* CALC */
    .calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
    .calc-result-box{background:linear-gradient(135deg,var(--green),var(--green-light));border-radius:var(--radius);padding:24px;color:white;}
    .calc-result-label{font-size:12px;opacity:0.8;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
    .calc-result-value{font-family:'Space Grotesk',sans-serif;font-size:32px;font-weight:800;margin-bottom:2px;}
    .calc-result-sub{font-size:12px;opacity:0.75;}
    .calc-breakdown{margin-top:16px;}
    .calc-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.15);font-size:13px;}
    .calc-row:last-child{border-bottom:none;}
    .calc-row-label{opacity:0.85;}
    .calc-row-val{font-weight:700;}
    .margin-bar-wrap{margin-top:14px;}
    .margin-bar-label{font-size:12px;opacity:0.8;margin-bottom:6px;display:flex;justify-content:space-between;}
    .margin-bar{height:8px;background:rgba(255,255,255,0.2);border-radius:4px;overflow:hidden;}
    .margin-bar-fill{height:100%;border-radius:4px;background:var(--gold-light);transition:width 0.4s ease;}
    .calc-status{margin-top:14px;padding:10px 14px;border-radius:8px;font-size:13px;font-weight:700;background:rgba(255,255,255,0.15);text-align:center;}

    /* CHANNEL BADGES */
    .channel-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:11px;font-weight:700;}
    .channel-badge svg{width:12px;height:12px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .channel-whatsapp{background:#E8F5E9;color:#2E7D32;}
    .channel-whatsapp svg{stroke:#2E7D32;}
    .channel-instagram{background:#FCE4EC;color:#C2185B;}
    .channel-instagram svg{stroke:#C2185B;}
    .channel-tiktok{background:#E8EAF6;color:#3949AB;}
    .channel-tiktok svg{stroke:#3949AB;}
    .channel-other{background:var(--surface);color:var(--muted);}

    /* EMPTY STATE */
    .empty-state{text-align:center;padding:48px 24px;color:var(--muted);}
    .empty-icon{width:56px;height:56px;background:var(--surface);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
    .empty-icon svg{width:28px;height:28px;stroke:var(--muted);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
    .empty-state h3{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px;}
    .empty-state p{font-size:13px;}

    /* SUCCESS */
    .success-modal-body{text-align:center;padding:32px 24px;}
    .success-icon{width:72px;height:72px;background:var(--green-faint);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
    .success-icon svg{width:36px;height:36px;stroke:var(--green);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .success-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;margin-bottom:8px;}
    .success-msg{font-size:14px;color:var(--muted);margin-bottom:22px;}

    /* SIDEBAR OVERLAY */
    .sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;touch-action:none;}

    /* MSG BOX */
    .msg-box{background:var(--ink2);border-radius:10px;padding:14px 16px;font-size:13px;color:rgba(255,255,255,0.9);font-family:monospace;line-height:1.6;white-space:pre-wrap;margin-bottom:12px;}
    .copy-msg-btn{width:100%;padding:10px;background:var(--green);color:white;border:none;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;transition:all 0.15s;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:8px;}
    .copy-msg-btn svg{width:14px;height:14px;stroke:white;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .copy-msg-btn:hover{background:var(--green-light);}

    /* ALERT BOX */
    .alert-box{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;border-radius:10px;margin-bottom:12px;font-size:13px;}
    .alert-box.warning{background:var(--gold-faint);border:1px solid rgba(212,160,23,0.2);}
    .alert-box.danger{background:var(--red-faint);border:1px solid rgba(207,32,48,0.2);}
    .alert-icon{width:20px;height:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
    .alert-icon svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .alert-box.warning .alert-icon svg{stroke:var(--gold);}
    .alert-box.danger .alert-icon svg{stroke:var(--red);}

    /* DASHBOARD GRID */
    .dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;}
    .amount-pos{color:var(--green);font-weight:700;}
    .amount-neg{color:var(--red);font-weight:700;}
    .amount-warn{color:var(--orange);font-weight:700;}

    /* PRICING / SUBSCRIPTION PAGE */
    /* ── Page header ── */
    /* ══ SUBSCRIPTION PAGE — CLEAN REDESIGN ══ */
    .sub-hero{
      background:var(--white);border:1px solid var(--border);border-radius:16px;
      padding:20px;display:flex;align-items:center;gap:14px;margin-bottom:14px;
    }
    .sub-hero-icon{
      width:52px;height:52px;border-radius:14px;background:var(--green);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;color:white;
    }
    .sub-hero-icon.free{background:var(--surface);border:1.5px solid var(--border);color:var(--muted);}
    .sub-hero-text{flex:1;min-width:0;}
    .sub-hero-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:800;color:var(--text);line-height:1.2;}
    .sub-hero-sub{font-size:12px;color:var(--muted);margin-top:3px;}
    .sub-hero-badge{font-size:10px;font-weight:800;letter-spacing:0.5px;padding:4px 10px;border-radius:20px;background:var(--green-faint);color:var(--green);border:1px solid rgba(26,127,75,0.2);white-space:nowrap;flex-shrink:0;}
    .sub-hero-badge.expiring{background:#fef3c7;color:#b45309;border-color:#fde68a;}
    /* Details grid */
    .sub-details-grid{
      display:grid;grid-template-columns:1fr 1fr 1fr;
      background:var(--white);border:1px solid var(--border);border-radius:16px;
      overflow:hidden;margin-bottom:14px;
    }
    .sub-detail-item{
      padding:14px 16px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
      display:flex;flex-direction:column;gap:3px;
    }
    .sub-detail-item:nth-child(3n){border-right:none;}
    .sub-detail-item:nth-last-child(-n+3){border-bottom:none;}
    .sub-detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.6px;color:var(--muted);}
    .sub-detail-value{font-size:13px;font-weight:700;color:var(--text);}
    .sub-detail-value.green{color:var(--green);}
    .sub-detail-value.muted{color:var(--muted);font-weight:500;}
    /* CTA */
    .sub-cta-wrap{margin-bottom:8px;}
    .sub-cta-btn{
      width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:700;
      cursor:pointer;font-family:'Inter',sans-serif;border:none;
      background:var(--green);color:white;
      display:flex;align-items:center;justify-content:center;gap:8px;
      transition:all 0.15s;
    }
    .sub-cta-btn:active{transform:scale(0.98);}
    .sub-cta-btn--renew{background:var(--surface);color:var(--text);border:1.5px solid var(--border);}
    .sub-cta-note{font-size:12px;color:var(--muted);text-align:center;margin:10px 0 0;}
    @media(max-width:480px){
      .sub-details-grid{grid-template-columns:1fr 1fr;}
      .sub-detail-item:nth-child(3n){border-right:1px solid var(--border);}
      .sub-detail-item:nth-child(2n){border-right:none;}
      .sub-detail-item:nth-last-child(-n+3){border-bottom:1px solid var(--border);}
      .sub-detail-item:nth-last-child(-n+2){border-bottom:none;}
    }
    /* Sidebar logo area tweak */
    .sidebar-logo{border-bottom:1px solid rgba(255,255,255,0.07);}


    /* ===== UPGRADE WALL MODAL ===== */
    .upgrade-wall-icon{width:68px;height:68px;border-radius:50%;background:var(--gold-faint);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;border:2px solid rgba(212,160,23,0.2);}
    .upgrade-wall-icon svg{width:32px;height:32px;stroke:var(--gold);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

    /* GRAPH BAR */
    .bar-chart{display:flex;align-items:flex-end;gap:8px;height:80px;padding-top:8px;}
    .bar-wrap{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;}
    .bar{width:100%;border-radius:4px 4px 0 0;background:var(--green-faint);position:relative;transition:height 0.5s;min-height:4px;}
    .bar.filled{background:var(--green);}
    .bar-label{font-size:10px;color:var(--muted);}

    /* CHAT-TO-ORDER */

    .parsed-field{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(26,127,75,0.1);}
    .parsed-field:last-child{border-bottom:none;}
    .parsed-label{color:var(--muted);font-size:12px;font-weight:600;}
    .parsed-val{font-weight:700;color:var(--green);}
    .ai-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:linear-gradient(135deg,#6B3FA0,#1A5F9E);color:white;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:all 0.15s;}
    .ai-btn:hover{opacity:0.9;transform:translateY(-1px);}
    .ai-btn svg{width:14px;height:14px;stroke:white;fill:none;stroke-width:2;}
    .ai-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:white;border-radius:50%;animation:spin 0.6s linear infinite;}
    @keyframes spin{to{transform:rotate(360deg);}}

    /* INVOICE */
    .invoice-preview{background:white;border:1px solid var(--border);border-radius:12px;padding:28px;font-size:13px;max-width:520px;}
    .invoice-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--green);}
    .invoice-brand{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;}
    .invoice-brand span{color:var(--green);}
    .invoice-meta{text-align:right;font-size:12px;color:var(--muted);}
    .invoice-title{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--green);margin-bottom:16px;}
    .invoice-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--surface);}
    .invoice-row:last-child{border-bottom:none;}
    .invoice-total-row{display:flex;justify-content:space-between;padding:12px 0;margin-top:8px;border-top:2px solid var(--ink);}
    .invoice-total-label{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;}
    .invoice-total-val{font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;color:var(--green);}
    .invoice-footer{margin-top:20px;padding-top:14px;border-top:1px solid var(--border);font-size:11px;color:var(--muted);text-align:center;}
    .invoice-balance-box{background:var(--red-faint);border:1px solid rgba(207,32,48,0.15);border-radius:8px;padding:10px 14px;margin-top:12px;display:flex;justify-content:space-between;align-items:center;}

    /* REMINDERS */
    .reminder-item{background:var(--white);border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;}
    .reminder-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .reminder-icon svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .reminder-icon.gold{background:var(--gold-faint);}
    .reminder-icon.gold svg{stroke:var(--gold);}
    .reminder-icon.red{background:var(--red-faint);}
    .reminder-icon.red svg{stroke:var(--red);}
    .reminder-icon.blue{background:var(--blue-faint);}
    .reminder-icon.blue svg{stroke:var(--blue);}
    .reminder-body{flex:1;}
    .reminder-title{font-weight:700;font-size:13px;margin-bottom:2px;}
    .reminder-sub{font-size:12px;color:var(--muted);}
    .reminder-actions{display:flex;gap:6px;margin-top:8px;}

    /* DELIVERY PAGE */
    .delivery-status-steps{display:flex;align-items:center;gap:0;margin:16px 0;}
    .dstep{flex:1;text-align:center;position:relative;}
    .dstep:not(:last-child)::after{content:'';position:absolute;top:15px;left:60%;width:80%;height:2px;background:var(--border);}
    .dstep.done:not(:last-child)::after{background:var(--green);}
    .dstep-dot{width:30px;height:30px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 6px;font-size:11px;font-weight:700;color:var(--muted);}
    .dstep.done .dstep-dot{background:var(--green);color:white;}
    .dstep.active .dstep-dot{background:var(--gold);color:white;box-shadow:0 0 0 3px var(--gold-faint);}
    .dstep-label{font-size:10px;color:var(--muted);font-weight:600;}
    .dstep.done .dstep-label{color:var(--green);}
    .dstep.active .dstep-label{color:var(--gold);}

    /* PROFIT SUMMARY */
    .profit-period-btn{padding:5px 12px;border-radius:20px;border:1px solid var(--border);background:var(--white);font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);font-family:'Inter',sans-serif;transition:all 0.15s;}
    .profit-period-btn.active{background:#135B36;color:white;border-color:#135B36;}
    [data-theme="dark"] .profit-period-btn{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.1);color:var(--muted);}
    [data-theme="dark"] .profit-period-btn.active{background:#135B36;color:white;border-color:#135B36;}

    /* CHANNEL TAG */
    .channel-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;}
    .channel-badge svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .channel-whatsapp{background:#dcfce7;color:#15803d;}
    .channel-instagram{background:#fce7f3;color:#9d174d;}
    .channel-tiktok{background:#f1f5f9;color:#0f172a;}
    .channel-facebook{background:#dbeafe;color:#1d4ed8;}
    .channel-twitter{background:#e0f2fe;color:#0369a1;}
    .channel-walkin{background:#fef9c3;color:#a16207;}
    .channel-website{background:#ede9fe;color:#6d28d9;}
    .channel-other{background:var(--surface);color:var(--muted);}

    /* SUCCESS MODAL */
    .success-modal-body{padding:32px 24px;text-align:center;}
    .success-icon{width:64px;height:64px;background:var(--green-faint);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
    .success-icon svg{width:28px;height:28px;stroke:var(--green);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
    .success-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;margin-bottom:6px;}
    .success-msg{color:var(--muted);font-size:14px;margin-bottom:20px;}

    /* ========== INVOICE / RECEIPT TABS ========== */
    .inv-tabs{display:flex;gap:0;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:18px;width:fit-content;}
    .inv-tab{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:9px;border:none;background:transparent;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);font-family:'Inter',sans-serif;transition:all 0.15s;}
    .inv-tab svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .inv-tab.active{background:#135B36;color:white;box-shadow:0 2px 8px rgba(0,0,0,0.15);}
    .inv-tab-badge{font-size:10px;font-weight:800;padding:1px 6px;border-radius:10px;margin-left:2px;}
    .inv-badge-orange{background:var(--orange-faint);color:var(--orange);}
    .inv-badge-green{background:var(--green-faint);color:var(--green);}
    .inv-tab.active .inv-tab-badge{background:rgba(255,255,255,0.2);color:white;}
    .inv-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:18px;align-items:start;min-width:0;}
    @media(max-width:768px){.inv-grid{grid-template-columns:1fr;min-width:0;}}
    .doc-preview-wrap{background:white;border:1px solid var(--border);border-radius:10px;padding:20px;font-size:12px;min-height:200px;overflow:hidden;max-width:100%;}

    /* ========== SETTINGS TABS ========== */
    .settings-tabs-wrap{overflow-x:auto;margin-bottom:20px;padding-bottom:2px;}
    .settings-tabs-wrap::-webkit-scrollbar{height:0;}
    .settings-tabs{display:flex;gap:6px;width:max-content;}
    .settings-tab{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;border:1px solid var(--border);background:var(--white);font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);font-family:'Inter',sans-serif;transition:all 0.15s;white-space:nowrap;}
    .settings-tab svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .settings-tab.active{background:var(--ink);color:white;border-color:var(--ink);}
    .settings-panel{display:block;}

    /* ========== TEMPLATE PICKER ========== */
    .template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:20px;}
    @media(max-width:600px){.template-grid{grid-template-columns:1fr 1fr;}}
    .template-card{border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;transition:all 0.2s;position:relative;background:white;}
    .template-card:hover{border-color:var(--green);box-shadow:var(--shadow);}
    .template-card.selected{border-color:var(--green);box-shadow:0 0 0 3px rgba(26,127,75,0.15);}
    .template-thumb{height:110px;overflow:hidden;background:#fafafa;}
    .template-label{font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;padding:10px 12px 2px;}
    .template-sub{font-size:11px;color:var(--muted);padding:0 12px 10px;}
    .template-check{position:absolute;top:8px;right:8px;width:22px;height:22px;background:var(--green);border-radius:50%;display:none;align-items:center;justify-content:center;}
    .template-check svg{width:12px;height:12px;stroke:white;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
    .template-card.selected .template-check{display:flex;}
    .tthumb-classic,.tthumb-bold,.tthumb-modern,.tthumb-minimal,.tthumb-luxury,.tthumb-corporate,.tthumb-retro,.tthumb-thermal,.tthumb-studio,.tthumb-gradient,.tthumb-ankara,.tthumb-abuja,.tthumb-ibile,.tthumb-kano,.tthumb-neon,.tthumb-naira,.tthumb-suya,.tthumb-letterhead{--tc:var(--green);}

    /* ========== BRANDING ========== */
    .logo-upload-box{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:all 0.15s;background:var(--surface);}
    .logo-upload-box:hover{border-color:var(--green);background:var(--green-faint);}
    .color-preset{width:26px;height:26px;border-radius:6px;cursor:pointer;transition:transform 0.15s;border:2px solid transparent;}
    .color-preset:hover{transform:scale(1.2);}
    .color-preset.active{border-color:var(--ink);box-shadow:0 0 0 2px white,0 0 0 4px var(--ink);}

    /* ========== DISPATCH STATUS ICON SELECTOR ========== */
    .dp-status-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;}
    .dp-status-opt{
      display:flex;align-items:center;gap:10px;
      padding:10px 12px;border-radius:10px;cursor:pointer;
      border:1.5px solid var(--border);background:var(--white);
      transition:all 0.15s;
    }
    .dp-status-opt:hover{border-color:var(--green);background:var(--green-faint);}
    .dp-status-opt.selected{border-color:var(--green);background:var(--green-faint);}
    .dp-status-icon{
      width:34px;height:34px;border-radius:8px;background:var(--surface);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;
    }
    .dp-status-icon svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .pending-icon svg{stroke:var(--muted);}
    .confirmed-icon svg{stroke:var(--blue);}
    .shipped-icon svg{stroke:var(--orange);}
    .delivered-icon svg{stroke:var(--green);}
    .dp-status-text{display:flex;flex-direction:column;}
    .dp-status-text strong{font-size:12px;font-weight:700;color:var(--text);}
    .dp-status-text span{font-size:10px;color:var(--muted);margin-top:1px;}
    .dp-status-opt[data-val="pending"].selected{border-color:rgba(87,96,106,0.4);background:rgba(87,96,106,0.06);}
    .dp-status-opt[data-val="pending"].selected .dp-status-icon{background:var(--muted);}
    .dp-status-opt[data-val="pending"].selected .dp-status-icon svg{stroke:white;}
    .dp-status-opt[data-val="confirmed"].selected{border-color:var(--blue);background:var(--blue-faint);}
    .dp-status-opt[data-val="confirmed"].selected .dp-status-icon{background:var(--blue);}
    .dp-status-opt[data-val="confirmed"].selected .dp-status-icon svg{stroke:white;}
    .dp-status-opt[data-val="shipped"].selected{border-color:var(--orange);background:var(--orange-faint);}
    .dp-status-opt[data-val="shipped"].selected .dp-status-icon{background:var(--orange);}
    .dp-status-opt[data-val="shipped"].selected .dp-status-icon svg{stroke:white;}
    .dp-status-opt[data-val="delivered"].selected{border-color:var(--green);background:var(--green-faint);}
    .dp-status-opt[data-val="delivered"].selected .dp-status-icon{background:var(--green);}
    .dp-status-opt[data-val="delivered"].selected .dp-status-icon svg{stroke:white;}
    /* ========== CUSTOM WARNING MODAL ========== */
    .warn-modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,0.45);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:24px;}
    .warn-modal-overlay.active{display:flex;}
    .warn-modal{background:var(--white);border-radius:16px;width:100%;max-width:360px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.2);animation:warnIn 0.2s cubic-bezier(0.34,1.56,0.64,1);}
    @keyframes warnIn{from{opacity:0;transform:scale(0.9) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
    .warn-modal-top{padding:28px 28px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;}
    .warn-icon-wrap{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
    .warn-icon-wrap.danger{background:var(--red-faint);}
    .warn-icon-wrap.warning{background:var(--gold-faint);}
    .warn-icon-wrap svg{width:26px;height:26px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .warn-icon-wrap.danger svg{stroke:var(--red);}
    .warn-icon-wrap.warning svg{stroke:var(--gold);}
    .warn-modal-title{font-family:'Space Grotesk',sans-serif;font-size:17px;font-weight:800;color:var(--text);margin-bottom:6px;}
    .warn-modal-msg{font-size:13px;color:var(--muted);line-height:1.6;}
    .warn-modal-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);}
    .warn-modal-actions button{padding:16px;font-size:14px;font-weight:600;cursor:pointer;border:none;background:transparent;font-family:'Inter',sans-serif;transition:background 0.15s;}
    .warn-modal-actions .warn-cancel{color:var(--muted);border-right:1px solid var(--border);}
    .warn-modal-actions .warn-cancel:hover{background:var(--surface);}
    .warn-modal-actions .warn-confirm.danger{color:var(--red);}
    .warn-modal-actions .warn-confirm.danger:hover{background:var(--red-faint);}
    .warn-modal-actions .warn-confirm.warning{color:var(--gold);}
    .warn-modal-actions .warn-confirm.warning:hover{background:var(--gold-faint);}

    /* ========== MOBILE CARD ROWS ========== */
    .mobile-list { display:none; }
    .mobile-card-row {
      background:var(--white); border:1px solid var(--border); border-radius:12px;
      margin-bottom:10px; overflow:hidden; transition:box-shadow 0.15s;
    }
    .mobile-card-row:active { box-shadow:var(--shadow); }
    .mobile-card-summary {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 14px; cursor:pointer; gap:10px;
    }
    .mobile-card-main { flex:1; min-width:0; }
    .mobile-card-title { font-weight:700; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mobile-card-sub { font-size:11px; color:var(--muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mobile-card-right { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex-shrink:0; }
    .mobile-card-amount { font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:800; color:var(--text); }
    .mobile-card-chevron {
      width:20px; height:20px; border-radius:50%; background:var(--surface);
      display:flex; align-items:center; justify-content:center; flex-shrink:0;
      transition:transform 0.2s;
    }
    .mobile-card-chevron svg { width:10px; height:10px; stroke:var(--muted); fill:none; stroke-width:2.5; stroke-linecap:round; }
    .mobile-card-row.open .mobile-card-chevron { transform:rotate(180deg); }
    .mobile-card-details {
      display:none; padding:0 14px 14px; border-top:1px solid var(--border);
      font-size:12px; animation:fadeInDown 0.15s ease;
    }
    .mobile-card-row.open .mobile-card-details { display:block; }
    @keyframes fadeInDown { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
    .mobile-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(0,0,0,0.06); border-radius:10px; overflow:hidden; margin-top:12px; }
    .mobile-detail-item { background:var(--white); padding:10px 12px; }
    .mobile-detail-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); margin-bottom:3px; }
    .mobile-detail-val { font-size:13px; font-weight:600; color:var(--text); word-break:break-word; }
    .mobile-detail-full { grid-column:1/-1; }
    .mobile-card-actions { display:flex; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); flex-wrap:wrap; }
    .mobile-card-actions .btn { flex:1; justify-content:center; min-width:80px; }
    [data-theme="dark"] .mobile-detail-grid { background:rgba(255,255,255,0.06); }
    [data-theme="dark"] .mobile-detail-item { background:var(--white); }
    [data-theme="dark"] .mobile-card-row { background:var(--white); border-color:var(--border); }

    @media(max-width:768px){
      .mobile-list { display:block; }
      .table-wrap table { display:none; }
      /* Keep table-wrap padding off */
      .table-wrap { padding:0 !important; }
      .mobile-list { padding:12px; }
      /* Hide desktop pagination inside table-wrap on mobile — mobile list has its own */
      .table-wrap [id$="-pagination"] { display:none !important; }
    }
    /* Hide mobile-list pagination on desktop — table-wrap has its own */
    @media(min-width:769px){
      .mobile-list .pagination-bar { display:none !important; }
    }
    /* ========== BRANDING COLOR PICKER ========== */
    .bpalette{display:flex;flex-direction:column;cursor:pointer;border-radius:8px;overflow:hidden;border:2px solid transparent;transition:border-color 0.15s,transform 0.1s;width:52px;flex-shrink:0;}
    .bpalette:hover{border-color:var(--green);transform:scale(1.04);}
    .bpalette div:not(.bpalette-label){height:14px;}
    .bpalette-label{font-size:9px;font-weight:700;text-align:center;padding:3px 0;color:var(--muted);background:var(--surface);text-transform:uppercase;letter-spacing:0.4px;}
    .bpalette.selected{border-color:var(--green);}
    #brand-shades .shade-swatch{width:32px;height:32px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:transform 0.1s,border-color 0.15s;flex-shrink:0;}
    #brand-shades .shade-swatch:hover{transform:scale(1.12);border-color:rgba(0,0,0,0.15);}
    #recent-colors .rc-dot{width:24px;height:24px;border-radius:6px;cursor:pointer;border:1.5px solid rgba(0,0,0,0.1);transition:transform 0.1s;}
    #recent-colors .rc-dot:hover{transform:scale(1.15);}
    .logo-shape-opt{display:flex;flex-direction:column;align-items:center;cursor:pointer;gap:2px;}
    .logo-shape-opt input:checked + div{border-color:var(--green)!important;background:var(--green-faint)!important;}
    /* ========== APPEARANCE ELEMENTS ========== */
    .density-btn{padding:14px 10px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;text-align:center;transition:all 0.15s;font-family:'Inter',sans-serif;color:var(--text);}
    .density-btn:hover{border-color:var(--green);}
    .density-btn.active{border-color:var(--green);background:var(--green-faint);}
    .sidebar-style-btn{padding:14px;border-radius:12px;border:1.5px solid var(--border);background:var(--white);cursor:pointer;text-align:center;transition:all 0.15s;font-family:'Inter',sans-serif;color:var(--text);width:100%;}
    .sidebar-style-btn:hover{border-color:var(--green);}
    .sidebar-style-btn.active{border-color:var(--green);background:var(--green-faint);}
    /* Toggle switch */
    .ap-toggle{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0;}
    .ap-toggle input{opacity:0;width:0;height:0;}
    .ap-toggle-track{position:absolute;inset:0;background:var(--border);border-radius:99px;cursor:pointer;transition:background 0.2s;}
    .ap-toggle-track::before{content:'';position:absolute;width:16px;height:16px;left:3px;top:3px;background:white;border-radius:50%;transition:transform 0.2s;}
    .ap-toggle input:checked + .ap-toggle-track{background:var(--green);}
    .ap-toggle input:checked + .ap-toggle-track::before{transform:translateX(18px);}

/* ========== PAGINATION ========== */
.pagination-bar{display:flex;align-items:center;justify-content:center;gap:4px;padding:14px 16px;border-top:1px solid var(--border);flex-wrap:wrap;}
.pg-btn{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;transition:all 0.15s;font-family:'Inter',sans-serif;}
.pg-btn:hover:not(:disabled){background:var(--primary);color:white;border-color:var(--primary);}
.pg-btn.active{background:var(--primary);color:white;border-color:var(--primary);}
.pg-btn:disabled{opacity:0.35;cursor:default;}
.pg-ellipsis{font-size:12px;color:var(--muted);padding:0 4px;line-height:32px;}
.pg-info{font-size:11px;color:var(--muted);font-weight:600;margin-left:4px;white-space:nowrap;}

/* ========== INVENTORY SELECTOR (clean card grid) ========== */
.inv-product-selector{display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:300;background:var(--white);border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);max-height:320px;overflow-y:auto;}
.inv-product-selector.open{display:block;}
.inv-prod-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border-light);transition:background 0.12s;}
.inv-prod-item:last-child{border-bottom:none;}
.inv-prod-item:hover,.inv-prod-item.focused{background:var(--primary-soft);}
.inv-prod-thumb{width:36px;height:36px;border-radius:8px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px;font-weight:800;color:var(--primary);}
.inv-prod-name{font-size:13px;font-weight:700;color:var(--text);}
.inv-prod-meta{font-size:11px;color:var(--muted);margin-top:1px;}
.inv-prod-price{text-align:right;flex-shrink:0;}
.inv-prod-price-val{font-size:13px;font-weight:800;color:var(--primary);}
.inv-prod-stock-badge{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:700;margin-top:2px;display:inline-block;}
.inv-prod-stock-badge.green{background:var(--green-faint);color:var(--green);}
.inv-prod-stock-badge.gold{background:var(--gold-faint);color:var(--gold);}
.inv-prod-stock-badge.red{background:var(--red-faint);color:var(--red);}
.inv-prod-selected{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--primary-soft);border:1.5px solid var(--primary);border-radius:10px;cursor:pointer;margin-bottom:4px;}
.inv-prod-selected-name{font-size:13px;font-weight:700;color:var(--primary);flex:1;}
.inv-prod-selected-change{font-size:11px;color:var(--primary);font-weight:600;text-decoration:none;background:var(--primary-soft);border:1px solid rgba(15,92,52,0.2);border-radius:5px;padding:2px 7px;}

/* ========== ORDER SELECTOR (invoice/receipt - clean dropdown) ========== */
.order-selector-wrap{position:relative;min-width:0;}
.order-selector-trigger{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color 0.15s;min-width:0;max-width:100%;}
.order-selector-trigger:hover{border-color:var(--primary);}
.order-selector-trigger.has-value{border-color:var(--primary);background:var(--primary-soft);}
.order-selector-icon{width:32px;height:32px;border-radius:8px;background:var(--primary-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.order-selector-icon svg{width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.order-selector-text{flex:1;min-width:0;overflow:hidden;}
.order-selector-label{font-size:11px;color:var(--muted);font-weight:600;}
.order-selector-value{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.order-selector-chevron{flex-shrink:0;transition:transform 0.2s;}
.order-selector-chevron svg{width:16px;height:16px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;}
.order-selector-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:300;background:var(--white);border:1.5px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);max-height:280px;overflow-y:auto;}
.order-selector-dropdown.open{display:block;}
.order-sel-item{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--border-light);transition:background 0.12s;min-width:0;overflow:hidden;}
.order-sel-item:last-child{border-bottom:none;}
.order-sel-item:hover{background:var(--primary-soft);}
.order-sel-badge{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:700;white-space:nowrap;flex-shrink:0;}
.order-sel-badge.orange{background:var(--orange-faint);color:var(--orange);}
.order-sel-badge.green{background:var(--green-faint);color:var(--green);}
    /* ========== CUSTOM SCROLLBARS ========== */
    /* Sidebar nav */
    .sidebar nav::-webkit-scrollbar{width:3px;}
    .sidebar nav::-webkit-scrollbar-track{background:transparent;}
    .sidebar nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:99px;}
    .sidebar nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25);}
    .sidebar nav{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) transparent;}
    /* Notif body */
    .notif-body::-webkit-scrollbar{width:3px;}
    .notif-body::-webkit-scrollbar-track{background:transparent;}
    .notif-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
    .notif-body::-webkit-scrollbar-thumb:hover{background:var(--muted);}
    .notif-body{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
    /* Modal */
    .modal::-webkit-scrollbar{width:3px;}
    .modal::-webkit-scrollbar-track{background:transparent;}
    .modal::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px;}
    .modal{scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
    /* Content area — matches sidebar scrollbar style */
    .content::-webkit-scrollbar{width:3px;}
    .content::-webkit-scrollbar-track{background:transparent;}
    .content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:99px;}
    .content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.25);}
    .content{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) transparent;}
    /* Body / main page scrollbar — matches sidebar style */
    html::-webkit-scrollbar{width:3px;}
    html::-webkit-scrollbar-track{background:transparent;}
    html::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.18);border-radius:99px;}
    html::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.32);}
    html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.18) transparent;}

    /* ========== BOTTOM NAV BAR ========== */
    /* Hide sidebar items that are covered by the bottom nav on mobile */
    @media(max-width:768px){
      .nav-item--bnav-dup{display:none;}
    }
    .bottom-nav{
      display:none;
      position:fixed;bottom:0;left:0;right:0;
      background:#0D1117;
      border-top:1px solid rgba(255,255,255,0.08);
      z-index:150;
      padding:0 0 env(safe-area-inset-bottom,0);
      box-shadow:0 -4px 20px rgba(0,0,0,0.25);
    }
    .bottom-nav-inner{
      display:flex;align-items:stretch;height:60px;
    }
    .bnav-item{
      flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:3px;cursor:pointer;color:rgba(255,255,255,0.4);
      font-size:10px;font-weight:600;letter-spacing:0.3px;
      transition:color 0.15s;position:relative;
      background:none;border:none;font-family:'Inter',sans-serif;
      padding:0;
    }
    .bnav-item:hover,.bnav-item.active{color:var(--green-light);}
    .bnav-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .bnav-badge{
      position:absolute;top:6px;right:calc(50% - 14px);
      background:var(--red);color:white;font-size:9px;font-weight:800;
      min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;
      padding:0 3px;border:2px solid #0D1117;
    }
    .bnav-add{
      flex:0 0 56px;display:flex;align-items:center;justify-content:center;
      position:relative;
    }
    .bnav-add-btn{
      width:48px;height:48px;border-radius:50%;background:var(--green);border:3px solid #0D1117;
      display:flex;align-items:center;justify-content:center;cursor:pointer;
      box-shadow:0 4px 16px rgba(19,91,54,0.4);transition:all 0.2s;
      position:relative;top:-6px;
    }
    .bnav-add-btn:hover{background:var(--green-light);transform:scale(1.08);}
    .bnav-add-btn svg{width:22px;height:22px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;}
    /* Speed-dial */
    #bnav-speed-dial{display:none;position:absolute;bottom:72px;left:50%;transform:translateX(-50%);z-index:9999;flex-direction:column;align-items:center;gap:10px;}
    #bnav-speed-dial.open{display:flex !important;pointer-events:auto;}
    .bnav-dial-item{display:flex;align-items:center;gap:8px;cursor:pointer;animation:dialItemIn 0.2s cubic-bezier(0.34,1.56,0.64,1) both;}
    .bnav-dial-item:nth-child(1){animation-delay:0.05s;}
    .bnav-dial-item:nth-child(2){animation-delay:0.1s;}
    .bnav-dial-item:nth-child(3){animation-delay:0.15s;}
    @keyframes dialItemIn{from{opacity:0;transform:translateY(14px) scale(0.8);}to{opacity:1;transform:translateY(0) scale(1);}}
    .bnav-dial-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,0.3);flex-shrink:0;}
    .bnav-dial-btn:active{transform:scale(0.9);}
    .bnav-dial-btn svg{width:21px;height:21px;stroke:white;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .bnav-dial-btn.green{background:var(--green);}
    .bnav-dial-btn.blue{background:#1A5F9E;}
    .bnav-dial-btn.red{background:var(--red);}
    .bnav-dial-label{background:rgba(13,17,23,0.88);color:white;font-size:12px;font-weight:700;padding:5px 11px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,0.2);}
    #bnav-dial-backdrop{display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.4);}
    #bnav-dial-backdrop.open{display:block;}

    /* NOTIFICATIONS PANEL */
    .notif-panel{
      display:none;position:fixed;inset:0;z-index:300;
      background:rgba(0,0,0,0.45);
      backdrop-filter:blur(2px);
    }
    .notif-panel.open{display:flex;justify-content:flex-end;}
    .notif-drawer{
      position:relative;
      width:100%;max-width:380px;height:100%;
      background:var(--white);
      display:flex;flex-direction:column;
      transform:translateX(100%);
      transition:transform 0.3s cubic-bezier(0.32,0.72,0,1);
      box-shadow:-8px 0 40px rgba(0,0,0,0.15);
    }
    .notif-panel.open .notif-drawer{transform:translateX(0);}
    .notif-handle{display:none;}
    .notif-head{
      padding:20px 20px 0;
      display:flex;justify-content:space-between;align-items:flex-start;
      flex-shrink:0;
    }
    .notif-head-left{display:flex;flex-direction:column;gap:2px;}
    .notif-head-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:var(--text);line-height:1.2;}
    .notif-head-sub{font-size:12px;color:var(--muted);font-weight:500;}
    .notif-head-right{display:flex;align-items:center;gap:8px;}
    .notif-mark-all{font-size:11px;font-weight:700;color:var(--green);cursor:pointer;background:var(--green-faint);border:none;font-family:'Inter',sans-serif;padding:5px 10px;border-radius:6px;white-space:nowrap;}
    .notif-close{background:var(--surface);border:1px solid var(--border);width:32px;height:32px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .notif-close svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;}
    .notif-tabs{display:flex;gap:2px;padding:16px 20px 0;flex-shrink:0;}
    .notif-tabs::-webkit-scrollbar{height:0;}
    .notif-tab{flex:1;padding:7px 6px;text-align:center;font-size:11px;font-weight:700;cursor:pointer;border-radius:8px;color:var(--muted);transition:all 0.15s;border:1px solid transparent;background:none;font-family:'Inter',sans-serif;white-space:nowrap;}
    .notif-tab.active{background:var(--ink);color:white;border-color:var(--ink);}
    [data-theme="dark"] .inv-tabs{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.08);}
    [data-theme="dark"] .inv-tab{color:var(--muted);}
    [data-theme="dark"] .inv-tab.active{background:#135B36;}
    [data-theme="dark"] .notif-tab.active{background:#135B36;border-color:#135B36;}
    .notif-divider{height:1px;background:var(--border);margin:14px 20px 0;}
    .notif-body{flex:1;overflow-y:auto;padding:12px 16px 24px;}
    .notif-group-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:8px 4px 6px;margin-top:4px;}
    .notif-item{
      display:flex;align-items:flex-start;gap:12px;
      padding:12px;border-radius:10px;margin-bottom:3px;
      transition:background 0.1s;cursor:default;
      position:relative;border:1px solid transparent;
    }
    .notif-item.unread{background:var(--green-faint);border-color:rgba(26,127,75,0.12);}
    .notif-item.unread::before{
      content:'';position:absolute;left:-1px;top:12px;bottom:12px;
      width:3px;border-radius:0 3px 3px 0;background:var(--green);
    }
    .notif-icon{
      width:36px;height:36px;border-radius:9px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
    }
    .notif-icon svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .notif-icon.green{background:var(--green-faint);}
    .notif-icon.green svg{stroke:var(--green);}
    .notif-icon.red{background:var(--red-faint);}
    .notif-icon.red svg{stroke:var(--red);}
    .notif-icon.gold{background:var(--gold-faint);}
    .notif-icon.gold svg{stroke:var(--gold);}
    .notif-icon.blue{background:var(--blue-faint);}
    .notif-icon.blue svg{stroke:var(--blue);}
    .notif-icon.orange{background:var(--orange-faint);}
    .notif-icon.orange svg{stroke:var(--orange);}
    .notif-content{flex:1;min-width:0;}
    .notif-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.35;}
    .notif-sub{font-size:11px;color:var(--muted);line-height:1.4;}
    .notif-time{font-size:10px;color:var(--muted);margin-top:3px;font-weight:600;opacity:0.7;}
    .notif-action-row{display:flex;gap:5px;margin-top:8px;}
    .notif-empty{text-align:center;padding:48px 20px;color:var(--muted);}
    .notif-empty-icon{margin-bottom:14px;display:flex;justify-content:center;opacity:0.4;}
    .notif-empty p{font-size:13px;line-height:1.6;}
    .settings-channel-item{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:10px;padding:10px 10px;cursor:pointer;transition:all 0.15s;user-select:none;min-width:0;overflow:hidden;}
    .settings-channel-item:hover{border-color:var(--green-light);}
    .settings-channel-item.selected{border-color:var(--green);background:var(--green-faint);}
    .settings-ch-icon{width:28px;height:28px;border-radius:7px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
    .settings-ch-icon svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .settings-channel-item span{flex:1;font-size:12px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    .settings-ch-cb{width:18px;height:18px;border-radius:5px;border:2px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all 0.15s;}
    .settings-channel-item.selected .settings-ch-cb{background:var(--green);border-color:var(--green);}
    .settings-ch-cb svg{width:10px;height:10px;stroke:white;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;display:none;}
    .settings-channel-item.selected .settings-ch-cb svg{display:block;}
    .notif-settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 4px;border-bottom:1px solid var(--border);}
    .notif-settings-row:last-child{border:none;}
    .notif-settings-label{font-size:13px;font-weight:700;}
    .notif-settings-sub{font-size:11px;color:var(--muted);margin-top:2px;}
    @media(max-width:480px){.notif-drawer{max-width:100%;}}

    /* TOGGLE SWITCH */
    .toggle-switch{position:relative;width:44px;height:24px;flex-shrink:0;}
    .toggle-switch input{opacity:0;width:0;height:0;}
    .toggle-slider{position:absolute;inset:0;background:var(--border);border-radius:12px;cursor:pointer;transition:0.2s;}
    .toggle-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;top:3px;background:white;border-radius:50%;transition:0.2s;box-shadow:0 1px 4px rgba(0,0,0,0.2);}
    .toggle-switch input:checked+.toggle-slider{background:var(--green);}
    .toggle-switch input:checked+.toggle-slider::before{transform:translateX(20px);}

    /* MOBILE */
    @media(max-width:768px){
      .sidebar{transform:translateX(-100%);width:min(72vw,260px) !important;}
      .sidebar.open{transform:translateX(0);}
      .sidebar-overlay.show{display:block;}
      .main{margin-left:0;padding-top:calc(48px + env(safe-area-inset-top, 0px));padding-bottom:calc(68px + env(safe-area-inset-bottom, 0px));}
      .hamburger{display:flex;}
      .content{padding:12px 14px;}
      .topbar{padding:8px 16px;position:fixed;top:env(safe-area-inset-top, 0px);left:0;right:0;z-index:95;transition:top 0.2s ease;}
      .topbar::before{content:'';position:fixed;top:0;left:0;right:0;height:env(safe-area-inset-top, 0px);background:var(--white);z-index:94;}
      [data-theme="dark"] .topbar::before{background:#0D1117;}
      .content{padding:14px 16px;}      .stats-grid{grid-template-columns:1fr 1fr;gap:10px;}
      .form-row{grid-template-columns:1fr;}
      .calc-grid{grid-template-columns:1fr;}
      .dashboard-grid{grid-template-columns:1fr;}
      table{font-size:12px;}
      td,th{padding:8px 10px;}
      .land-nav{padding:0 16px;}
      .land-nav-links{display:none;}
      .land-section{padding:60px 20px;}
      .hero{padding:100px 20px 60px;}
      .how-section{padding:60px 20px;}
      .how-steps::before{display:none;}
      .pricing-section{padding:60px 20px;}
      .testimonials-section{padding:60px 20px;}
      .foot-top{grid-template-columns:1fr;}
      .cta-banner{padding:60px 20px;}
      .bottom-nav{display:block;}
      .topbar-right .btn-outline[onclick*="showLanding"]{display:none;}
      .stat-value{font-size:20px;}
      .card-header{flex-wrap:wrap;gap:8px;}
    }
    @media(max-width:480px){
      .stats-grid{grid-template-columns:1fr 1fr;}
      .stat-card{padding:12px 14px 12px;}
    }
  
    /* LOCKED EDIT BUTTON */
    .btn-locked{
      position:relative;display:inline-flex;align-items:center;gap:4px;
      padding:4px 10px;font-size:11px;font-weight:700;border-radius:8px;
      background:var(--surface);border:1px solid var(--border);
      color:var(--muted);cursor:not-allowed;opacity:0.6;
      font-family:'Inter',sans-serif;
    }
    .btn-locked svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
    .btn-locked[data-tip]:hover::after{
      content:attr(data-tip);
      position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
      background:#0D1117;color:white;font-size:11px;font-weight:600;
      padding:5px 10px;border-radius:6px;white-space:nowrap;
      box-shadow:0 4px 12px rgba(0,0,0,0.25);z-index:999;
      pointer-events:none;
    }
    .btn-locked[data-tip]:hover::before{
      content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);
      border:5px solid transparent;border-top-color:#0D1117;z-index:999;pointer-events:none;
    }

    /* ========== TOAST NOTIFICATIONS ========== */
    #toast-container{
      position:fixed;top:64px;right:16px;left:auto;transform:none;
      z-index:99998;display:flex;flex-direction:column;align-items:flex-end;
      gap:8px;pointer-events:none;max-width:360px;
    }
    @media(min-width:769px){#toast-container{top:64px;right:24px;}}
    @media(max-width:768px){#toast-container{top:60px;right:12px;}}
    .toast{
      display:inline-flex;align-items:flex-start;gap:10px;
      padding:13px 14px 13px 14px;border-radius:14px;
      font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
      width:max-content;max-width:340px;min-width:220px;
      box-shadow:0 8px 32px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.1);
      pointer-events:auto;cursor:pointer;
      animation:toastIn 0.3s cubic-bezier(0.34,1.56,0.64,1) forwards;
      border:1.5px solid transparent;
      position:relative;overflow:hidden;
    }
    .toast::before{
      content:'';position:absolute;top:0;left:0;bottom:0;width:4px;border-radius:14px 0 0 14px;
    }
    .toast.hiding{animation:toastOut 0.22s ease forwards;}
    /* SUCCESS — clean white with green accent */
    .toast.success{
      background:#ffffff;border-color:rgba(26,127,75,0.2);color:#14532d;
    }
    .toast.success::before{background:var(--green);}
    .toast.success .toast-icon-wrap{background:#dcfce7;}
    .toast.success .toast-icon-wrap svg{stroke:#16a34a;}
    .toast.success .toast-msg{color:#15803d;}
    .toast.success .toast-title{color:#14532d;}
    /* ERROR — crisp white with red accent */
    .toast.error{
      background:#ffffff;border-color:rgba(220,38,38,0.2);color:#7f1d1d;
    }
    .toast.error::before{background:#ef4444;}
    .toast.error .toast-icon-wrap{background:#fee2e2;}
    .toast.error .toast-icon-wrap svg{stroke:#dc2626;}
    .toast.error .toast-msg{color:#991b1b;}
    .toast.error .toast-title{color:#7f1d1d;}
    /* WARNING — white with amber accent */
    .toast.warning,.toast.warn{
      background:#ffffff;border-color:rgba(212,160,23,0.25);color:#78350f;
    }
    .toast.warning::before,.toast.warn::before{background:var(--accent);}
    .toast.warning .toast-icon-wrap,.toast.warn .toast-icon-wrap{background:#fef3c7;}
    .toast.warning .toast-icon-wrap svg,.toast.warn .toast-icon-wrap svg{stroke:#d97706;}
    .toast.warning .toast-msg,.toast.warn .toast-msg{color:#92400e;}
    .toast.warning .toast-title,.toast.warn .toast-title{color:#78350f;}
    /* INFO — white with blue accent */
    .toast.info{
      background:#ffffff;border-color:rgba(26,95,158,0.2);color:#1e3a5f;
    }
    .toast.info::before{background:var(--blue);}
    .toast.info .toast-icon-wrap{background:#dbeafe;}
    .toast.info .toast-icon-wrap svg{stroke:#1d4ed8;}
    .toast.info .toast-msg{color:#1e40af;}
    .toast.info .toast-title{color:#1e3a5f;}
    /* Dark mode toasts */
    [data-theme="dark"] .toast.success{background:#0d2a18;border-color:rgba(34,197,94,0.25);color:#86efac;}
    [data-theme="dark"] .toast.success .toast-icon-wrap{background:rgba(34,197,94,0.15);}
    [data-theme="dark"] .toast.success .toast-title{color:#bbf7d0;}
    [data-theme="dark"] .toast.success .toast-msg{color:#86efac;}
    [data-theme="dark"] .toast.error{background:#2d1414;border-color:rgba(248,113,113,0.25);color:#fca5a5;}
    [data-theme="dark"] .toast.error .toast-icon-wrap{background:rgba(248,113,113,0.15);}
    [data-theme="dark"] .toast.error .toast-title{color:#fecaca;}
    [data-theme="dark"] .toast.error .toast-msg{color:#fca5a5;}
    [data-theme="dark"] .toast.warning,[data-theme="dark"] .toast.warn{background:#2d1f05;border-color:rgba(251,191,36,0.25);color:#fcd34d;}
    [data-theme="dark"] .toast.warning .toast-icon-wrap,[data-theme="dark"] .toast.warn .toast-icon-wrap{background:rgba(251,191,36,0.15);}
    [data-theme="dark"] .toast.warning .toast-title,[data-theme="dark"] .toast.warn .toast-title{color:#fde68a;}
    [data-theme="dark"] .toast.warning .toast-msg,[data-theme="dark"] .toast.warn .toast-msg{color:#fcd34d;}
    [data-theme="dark"] .toast.info{background:#0c1d38;border-color:rgba(96,165,250,0.25);color:#93c5fd;}
    [data-theme="dark"] .toast.info .toast-icon-wrap{background:rgba(96,165,250,0.15);}
    [data-theme="dark"] .toast.info .toast-title{color:#bfdbfe;}
    [data-theme="dark"] .toast.info .toast-msg{color:#93c5fd;}
    .toast-icon-wrap{
      width:32px;height:32px;border-radius:8px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;margin-top:1px;
    }
    .toast-icon-wrap svg{width:16px;height:16px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
    .toast-body{flex:1;min-width:0;}
    .toast-title{font-size:13px;font-weight:700;line-height:1.3;margin-bottom:1px;}
    .toast-msg{font-size:12px;font-weight:500;line-height:1.4;opacity:0.85;}
    .toast-close{
      flex-shrink:0;width:24px;height:24px;border-radius:6px;margin-left:8px;
      display:flex;align-items:center;justify-content:center;
      background:transparent;border:none;cursor:pointer;opacity:0.45;transition:opacity 0.15s;
      color:inherit;padding:0;
    }
    .toast-close:hover{opacity:1;}
    .toast-progress{
      position:absolute;bottom:0;left:0;height:2.5px;border-radius:0 0 14px 14px;
      animation:toastProgress var(--toast-dur,3000ms) linear forwards;
    }
    .toast.success .toast-progress{background:var(--green);}
    .toast.error .toast-progress{background:#ef4444;}
    .toast.warning .toast-progress,.toast.warn .toast-progress{background:var(--accent);}
    .toast.info .toast-progress{background:var(--blue);}
    @keyframes toastProgress{from{width:100%;}to{width:0%;}}
    @keyframes toastIn{from{opacity:0;transform:translateY(-16px) scale(0.96);}to{opacity:1;transform:translateY(0) scale(1);}}
    @keyframes toastOut{from{opacity:1;transform:translateY(0) scale(1);}to{opacity:0;transform:translateY(-12px) scale(0.95);}}

    /* ===== MESSAGES PAGE ===== */
    .msg-type-select-wrap{position:relative;margin-bottom:20px;}
    .msg-type-select-wrap select{width:100%;appearance:none;-webkit-appearance:none;padding:13px 44px 13px 16px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;border:1.5px solid var(--border);border-radius:12px;background:var(--white);color:var(--text);cursor:pointer;outline:none;transition:border-color 0.15s;}
    .msg-type-select-wrap select:focus{border-color:var(--green);}
    .msg-type-select-wrap::after{content:'';position:absolute;right:16px;top:50%;transform:translateY(-50%);width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid var(--muted);pointer-events:none;}
    .msg-fields-wrap{display:flex;flex-direction:column;gap:14px;}
    .msg-wa-preview{background:#e5ddd5;border-radius:14px;padding:16px 14px;}
    .msg-wa-header{font-size:10px;font-weight:700;color:#888;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px;}
    .msg-wa-dot{width:7px;height:7px;background:#25D366;border-radius:50%;flex-shrink:0;}
    .msg-wa-bubble{background:white;border-radius:2px 12px 12px 12px;padding:14px 16px;font-size:13.5px;line-height:1.7;color:#111;white-space:pre-wrap;box-shadow:0 1px 2px rgba(0,0,0,0.1);min-height:100px;word-break:break-word;}
    .msg-wa-tick{font-size:11px;color:#999;text-align:right;margin-top:6px;}
    .msg-action-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
    .btn-wa{background:#25D366;color:white;border:none;font-family:'Inter',sans-serif;font-weight:700;cursor:pointer;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;padding:11px 14px;transition:background 0.15s;}
    .btn-wa:hover{background:#22c55e;}
    .btn-wa svg{width:15px;height:15px;flex-shrink:0;fill:white;}
    [data-theme="dark"] .msg-wa-preview{background:#1a2733;}
    [data-theme="dark"] .msg-wa-bubble{background:#2a3942;color:#e9edef;}

    /* ===== REMINDERS PAGE ===== */
    .rem-summary-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
    .rem-summary-item{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);}
    .rem-summary-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .rem-summary-icon svg{width:16px;height:16px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .rem-summary-num{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:800;color:var(--text);line-height:1;}
    .rem-summary-label{font-size:11px;color:var(--muted);font-weight:600;margin-top:2px;}
    .rem-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
    .rem-toggle-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border-radius:10px;cursor:pointer;border:1px solid transparent;transition:all 0.15s;}
    .rem-toggle-row:hover{border-color:var(--border);}
    .rem-toggle-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
    .rem-toggle-icon svg{width:15px;height:15px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    @media(max-width:768px){
      .rem-summary-bar{grid-template-columns:1fr 1fr;}
      .rem-main-grid{grid-template-columns:1fr;}
    }
    @media(max-width:480px){.rem-summary-bar{grid-template-columns:1fr 1fr;}.rem-summary-item{padding:10px 12px;}.rem-summary-num{font-size:18px;}}

    /* ===== BRANDING PAGE ===== */
    .branding-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
    .branding-preview-card{grid-column:1/-1;}
    .color-preset{width:28px;height:28px;border-radius:7px;cursor:pointer;transition:transform 0.15s,box-shadow 0.15s;border:2px solid transparent;}
    .color-preset:hover{transform:scale(1.18);box-shadow:0 2px 8px rgba(0,0,0,0.18);}
    @media(max-width:768px){
      .branding-grid{grid-template-columns:1fr;}
      .branding-preview-card{grid-column:1;}
    }


    /* ========== LOGIN SCREEN ========== */
    /* ══════════════════════════════════════════════════════════
       LOGIN SCREEN — Mobile-first, beautiful, professional
       ══════════════════════════════════════════════════════════ */
    #login-screen{
      display:none;position:fixed;inset:0;z-index:99999;
      background:#f8fafc;overflow-y:auto;-webkit-overflow-scrolling:touch;
    }
    #login-screen.show{display:block;}
    #login-screen.dark{background:#0D1117;}

    /* ── Top decorative bar ── */
    .vdl-topbar{
      position:absolute;top:0;left:0;right:0;height:3px;
      background:linear-gradient(90deg,#0F5C34 0%,#2A9D6E 50%,#D4A017 100%);
      z-index:2;
    }

    /* ── Full layout wrapper ── */
    .vdl-wrap{
      display:flex;min-height:100vh;width:100%;
    }

    /* ── LEFT PANEL (desktop hero) ── */
    .vdl-left{
      flex:0 0 480px;min-width:0;
      background:#0A1F10;
      display:flex;flex-direction:column;
      padding:48px 44px;
      position:relative;overflow:hidden;
    }
    /* Subtle grid texture */
    .vdl-left::before{
      content:'';position:absolute;inset:0;
      background-image:
        linear-gradient(rgba(26,127,75,0.06) 1px,transparent 1px),
        linear-gradient(90deg,rgba(26,127,75,0.06) 1px,transparent 1px);
      background-size:32px 32px;
      pointer-events:none;
    }
    /* Green glow blob */
    .vdl-left::after{
      content:'';position:absolute;
      width:380px;height:380px;border-radius:50%;
      background:radial-gradient(circle,rgba(15,92,52,0.35) 0%,transparent 70%);
      top:-80px;right:-80px;pointer-events:none;
    }
    .vdl-left-inner{
      position:relative;z-index:1;
      display:flex;flex-direction:column;height:100%;
      justify-content:space-between;
    }

    /* Logo */
    .vdl-logo{display:flex;align-items:center;gap:10px;text-decoration:none;margin-bottom:auto;}
    .vdl-logo-icon{
      width:38px;height:38px;border-radius:10px;
      background:linear-gradient(135deg,#1a7f4b,#0F5C34);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 2px 10px rgba(15,92,52,0.4);flex-shrink:0;
    }
    .vdl-logo-icon span{
      font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:900;
      color:white;line-height:1;
    }
    .vdl-logo-name{font-size:19px;font-weight:800;color:white;letter-spacing:-0.03em;}
    .vdl-logo-name em{color:#D4A017;font-style:normal;}
    .vdl-logo-badge{
      font-size:9px;font-weight:700;letter-spacing:0.8px;
      background:rgba(212,160,23,0.15);color:#D4A017;
      border:1px solid rgba(212,160,23,0.3);
      padding:2px 6px;border-radius:4px;margin-left:2px;
    }

    /* Hero text */
    .vdl-hero{flex:1;display:flex;flex-direction:column;justify-content:center;padding:40px 0;}
    .vdl-tag{
      display:inline-flex;align-items:center;gap:7px;
      background:rgba(212,160,23,0.1);border:1px solid rgba(212,160,23,0.25);
      color:#D4A017;font-size:10px;font-weight:700;letter-spacing:1.8px;
      text-transform:uppercase;padding:5px 12px;border-radius:100px;
      margin-bottom:20px;width:fit-content;
    }
    .vdl-tag::before{content:'';width:5px;height:5px;border-radius:50%;background:#D4A017;flex-shrink:0;}
    .vdl-headline{
      font-size:36px;font-weight:800;color:white;
      line-height:1.12;letter-spacing:-0.04em;margin-bottom:16px;
    }
    .vdl-headline em{color:#4ADE80;font-style:normal;}
    .vdl-desc{
      font-size:14px;color:rgba(255,255,255,0.38);
      line-height:1.9;margin-bottom:36px;max-width:320px;
    }
    .vdl-feats{display:flex;flex-direction:column;gap:12px;}
    .vdl-feat{display:flex;align-items:center;gap:12px;}
    .vdl-feat-dot{
      width:22px;height:22px;border-radius:7px;
      background:rgba(74,222,128,0.1);border:1px solid rgba(74,222,128,0.2);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .vdl-feat-dot svg{width:11px;height:11px;stroke:#4ADE80;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
    .vdl-feat span{font-size:13px;color:rgba(255,255,255,0.42);line-height:1.5;}

    /* Stats row */
    .vdl-stats{
      display:flex;gap:24px;padding-top:28px;
      border-top:1px solid rgba(255,255,255,0.07);
    }
    .vdl-stat-num{font-size:20px;font-weight:800;color:white;line-height:1;}
    .vdl-stat-num em{color:#4ADE80;font-style:normal;}
    .vdl-stat-lbl{font-size:10.5px;color:rgba(255,255,255,0.22);margin-top:3px;}

    /* ── RIGHT PANEL (form) ── */
    .vdl-right{
      flex:1;display:flex;align-items:center;justify-content:center;
      padding:60px 40px;background:#ffffff;overflow-y:auto;
      min-height:100vh;
    }
    #login-screen.dark .vdl-right{background:#0D1117;}
    .vdl-form-box{width:100%;max-width:400px;}

    /* Form header */
    .vdl-form-eyebrow{
      font-size:11px;font-weight:700;color:#0F5C34;letter-spacing:1.5px;
      text-transform:uppercase;margin-bottom:8px;
      display:flex;align-items:center;gap:6px;
    }
    .vdl-form-eyebrow::before{
      content:'';width:18px;height:2px;border-radius:1px;background:#0F5C34;
    }
    .vdl-form-title{
      font-size:28px;font-weight:800;color:#111827;
      letter-spacing:-0.04em;margin-bottom:6px;line-height:1.15;
    }
    #login-screen.dark .vdl-form-title{color:#F0F6FC;}
    .vdl-form-sub{
      font-size:14px;color:#6B7280;line-height:1.65;margin-bottom:28px;
    }
    #login-screen.dark .vdl-form-sub{color:#8B949E;}
    .vdl-form-sub a{color:#0F5C34;font-weight:600;text-decoration:none;}
    #login-screen.dark .vdl-form-sub a{color:#135B36;}

    /* Mobile-only logo (shows when left panel is hidden) */
    .vdl-mobile-logo{
      display:none;align-items:center;gap:10px;margin-bottom:32px;
    }
    .vdl-mobile-logo-icon{
      width:40px;height:40px;border-radius:11px;
      background:linear-gradient(135deg,#1a7f4b,#0A3D22);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 4px 14px rgba(15,92,52,0.25);
    }
    .vdl-mobile-logo-icon span{
      font-family:'Space Grotesk',sans-serif;font-size:21px;font-weight:900;color:white;line-height:1;
    }
    .vdl-mobile-logo-text{font-size:20px;font-weight:800;color:#111827;letter-spacing:-0.03em;}
    .vdl-mobile-logo-text em{color:#D4A017;font-style:normal;}
    #login-screen.dark .vdl-mobile-logo-text{color:#F0F6FC;}

    /* Error bar */
    .vdl-error-bar{
      display:none;align-items:center;gap:10px;
      padding:12px 14px;
      background:#FEF2F2;border:1px solid rgba(220,38,38,0.15);
      border-radius:10px;margin-bottom:18px;
      font-size:13px;font-weight:600;color:#DC2626;
    }
    .vdl-error-bar.show{display:flex;}
    .vdl-error-bar svg{width:15px;height:15px;stroke:#DC2626;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
    #login-screen.dark .vdl-error-bar{background:rgba(220,38,38,0.1);border-color:rgba(220,38,38,0.25);}

    /* Form fields */
    .vdl-field{margin-bottom:16px;}
    .vdl-field label{
      display:block;font-size:11px;font-weight:700;
      color:#374151;letter-spacing:0.7px;text-transform:uppercase;margin-bottom:7px;
    }
    #login-screen.dark .vdl-field label{color:#CDD9E5;}
    .vdl-field-inner{position:relative;}
    .vdl-f-icon{
      position:absolute;left:13px;top:50%;transform:translateY(-50%);
      pointer-events:none;display:flex;
    }
    .vdl-f-icon svg{
      width:15px;height:15px;stroke:#C0C7D0;fill:none;
      stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.15s;
    }
    .vdl-field-inner:focus-within .vdl-f-icon svg{stroke:#0F5C34;}
    #login-screen.dark .vdl-field-inner:focus-within .vdl-f-icon svg{stroke:#135B36;}
    .vdl-field-inner input{
      width:100%;padding:13px 14px 13px 43px;
      border:1.5px solid #E5E7EB;border-radius:11px;
      font-size:15px;font-family:'Inter',sans-serif;
      color:#111827;background:white;outline:none;
      transition:border-color 0.15s,box-shadow 0.15s;
      -webkit-appearance:none;
    }
    #login-screen.dark .vdl-field-inner input{
      background:#161B22;border-color:#30363D;color:#E6EDF3;
    }
    .vdl-field-inner input::placeholder{color:#C5CBD5;}
    #login-screen.dark .vdl-field-inner input::placeholder{color:#484F58;}
    .vdl-field-inner input:focus{
      border-color:#0F5C34;box-shadow:0 0 0 3px rgba(15,92,52,0.09);
    }
    #login-screen.dark .vdl-field-inner input:focus{
      border-color:#135B36;box-shadow:0 0 0 3px rgba(63,185,80,0.12);
    }
    .vdl-field-inner input.err{border-color:#DC2626;box-shadow:0 0 0 3px rgba(220,38,38,0.07);}
    .vdl-field-err{font-size:12px;color:#DC2626;font-weight:500;margin-top:5px;display:none;}
    .vdl-field-err.show{display:block;}

    /* Password toggle */
    .vdl-pw-btn{
      position:absolute;right:13px;top:50%;transform:translateY(-50%);
      background:none;border:none;cursor:pointer;padding:5px;
      color:#B0B7C3;display:flex;transition:color 0.15s;
    }
    .vdl-pw-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .vdl-pw-btn:hover{color:#0F5C34;}
    #login-screen.dark .vdl-pw-btn:hover{color:#135B36;}

    /* Remember / forgot row */
    .vdl-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
    .vdl-remember{
      display:flex;align-items:center;gap:7px;cursor:pointer;
      font-size:13px;color:#6B7280;user-select:none;
    }
    #login-screen.dark .vdl-remember{color:#8B949E;}
    .vdl-remember input{
      width:15px;height:15px;accent-color:#0F5C34;cursor:pointer;
      border-radius:4px;
    }
    .vdl-forgot{
      font-size:13px;color:#0F5C34;font-weight:600;
      background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;
      padding:0;transition:opacity 0.15s;
    }
    #login-screen.dark .vdl-forgot{color:#135B36;}
    .vdl-forgot:hover{opacity:0.75;}

    /* Submit button */
    .vdl-submit{
      width:100%;padding:14px;
      background:linear-gradient(135deg,#1a7f4b,#0F5C34);
      color:white;border:none;border-radius:11px;
      font-size:15px;font-weight:700;font-family:'Inter',sans-serif;
      cursor:pointer;display:flex;align-items:center;justify-content:center;
      gap:8px;margin-bottom:18px;
      transition:opacity 0.15s,transform 0.12s,box-shadow 0.15s;
      letter-spacing:-0.01em;
      box-shadow:0 4px 14px rgba(15,92,52,0.3);
    }
    .vdl-submit:hover{opacity:0.92;transform:translateY(-1px);box-shadow:0 6px 20px rgba(15,92,52,0.35);}
    .vdl-submit:active{transform:scale(0.98);}
    .vdl-submit:disabled{opacity:0.55;cursor:not-allowed;transform:none;box-shadow:none;}
    .vdl-submit svg{width:15px;height:15px;stroke:white;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
    .vdl-spin{
      width:17px;height:17px;border:2px solid rgba(255,255,255,0.3);
      border-top-color:white;border-radius:50%;
      animation:vdlSpin 0.65s linear infinite;flex-shrink:0;
    }
    @keyframes vdlSpin{to{transform:rotate(360deg);}}

    /* Divider */
    .vdl-divider{
      display:flex;align-items:center;gap:10px;
      color:#C5CBD5;font-size:12px;font-weight:500;margin-bottom:14px;
    }
    .vdl-divider::before,.vdl-divider::after{content:'';flex:1;height:1px;background:#E5E7EB;}
    #login-screen.dark .vdl-divider{color:#30363D;}
    #login-screen.dark .vdl-divider::before,#login-screen.dark .vdl-divider::after{background:#30363D;}

    /* Signup link */
    .vdl-signup{text-align:center;font-size:14px;color:#6B7280;margin-bottom:28px;}
    #login-screen.dark .vdl-signup{color:#8B949E;}
    .vdl-signup a{color:#0F5C34;font-weight:700;text-decoration:none;}
    #login-screen.dark .vdl-signup a{color:#135B36;}
    .vdl-signup a:hover{text-decoration:underline;}

    /* Trust row */
    .vdl-trust{
      display:flex;align-items:center;justify-content:center;
      gap:16px;padding-top:20px;border-top:1px solid #E5E7EB;flex-wrap:wrap;
    }
    #login-screen.dark .vdl-trust{border-top-color:#21262D;}
    .vdl-trust-item{
      display:flex;align-items:center;gap:5px;
      font-size:11px;color:#B5BBC5;font-weight:500;
    }
    #login-screen.dark .vdl-trust-item{color:#484F58;}
    .vdl-trust-item svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

    /* Dark mode toggle button (visible on mobile) */
    .vdl-theme-btn{
      position:fixed;top:16px;right:16px;z-index:100001;
      width:36px;height:36px;border-radius:50%;
      background:rgba(255,255,255,0.9);border:1px solid #E5E7EB;
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,0.08);
      transition:all 0.15s;backdrop-filter:blur(8px);
    }
    .vdl-theme-btn:hover{background:white;box-shadow:0 4px 12px rgba(0,0,0,0.12);}
    .vdl-theme-btn svg{width:16px;height:16px;stroke:#374151;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    #login-screen.dark .vdl-theme-btn{background:rgba(30,38,48,0.9);border-color:#30363D;}
    #login-screen.dark .vdl-theme-btn svg{stroke:#CDD9E5;}

    /* ── ALL SCREENS: clean centered login (no split-panel on desktop) ── */
    /* Always hide the desktop left panel */
    .vdl-left{display:none !important;}
    .vdl-mobile-hero{display:none !important;}

    #login-screen{
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      background:#F5F7FA;
    }
    #login-screen.dark{background:#0D1117;}

    .vdl-wrap{
      display:flex;
      min-height:100vh;
      align-items:center;
      justify-content:center;
      padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);
    }

    .vdl-right{
      width:100%;
      padding:0;
      background:transparent !important;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      min-height:100vh;
    }

    /* The card — clean, centered */
    .vdl-mobile-form-card{
      width:100%;
      max-width:460px;
      min-height:100vh;
      background:#ffffff;
      display:flex;
      flex-direction:column;
      justify-content:center;
      padding:max(52px, calc(36px + env(safe-area-inset-top))) 40px max(40px, calc(28px + env(safe-area-inset-bottom)));
      position:relative;
    }
    @media(min-width:600px){
      .vdl-wrap{padding:40px 20px;}
      .vdl-right{align-items:center;min-height:auto;}
      .vdl-mobile-form-card{
        min-height:auto;
        border-radius:20px;
        box-shadow:0 4px 32px rgba(0,0,0,0.10);
        padding:48px 48px 40px;
      }
    }
    #login-screen.dark .vdl-mobile-form-card{background:#161B22;}

    /* Logo block */
    .vdl-mobile-logo{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:36px;
    }
    .vdl-mobile-logo-icon{
      width:42px;height:42px;border-radius:12px;
      background:linear-gradient(135deg,#1a7f4b,#0A3D22);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 4px 14px rgba(15,92,52,0.25);
      flex-shrink:0;
    }
    .vdl-mobile-logo-icon span{
      font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:900;color:white;line-height:1;
    }
    .vdl-mobile-logo-text{font-size:21px;font-weight:800;color:#111827;letter-spacing:-0.03em;}
    .vdl-mobile-logo-text em{color:#D4A017;font-style:normal;}
    #login-screen.dark .vdl-mobile-logo-text{color:#F0F6FC;}

    .vdl-form-box{width:100%;max-width:100%;}
    .vdl-form-eyebrow{display:flex;}
    .vdl-form-title{font-size:26px;margin-bottom:6px;letter-spacing:-0.035em;}
    .vdl-form-sub{font-size:13.5px;margin-bottom:28px;line-height:1.6;}
    .vdl-field-inner input{font-size:16px;padding:14px 14px 14px 44px;}
    .vdl-field{margin-bottom:16px;}
    .vdl-submit{padding:16px;font-size:15px;letter-spacing:-0.01em;margin-top:4px;}
    .vdl-row{margin-bottom:20px;}
    .vdl-trust{gap:14px;padding-top:18px;flex-wrap:wrap;justify-content:center;}
    .vdl-divider{margin:18px 0 14px;}
    .vdl-signup{margin-bottom:24px;}

    @media(max-width:480px){
      .vdl-mobile-form-card{
        padding:max(48px, calc(32px + env(safe-area-inset-top))) 22px max(36px, calc(24px + env(safe-area-inset-bottom)));
      }
      .vdl-form-title{font-size:24px;}
    }

    /* ══════════════════════════════════════════
       BEAUTIFUL SPLASH / LOADING SCREEN
       ══════════════════════════════════════════ */
    #app-loader{
      position:fixed;inset:0;
      background:#FFFFFF;
      display:flex;flex-direction:column;
      align-items:center;justify-content:center;
      z-index:99999;
      transition:opacity 0.2s ease, transform 0.2s ease;
      will-change:opacity,transform;
    }
    #app-loader.fade-out{opacity:0;transform:scale(1.01);pointer-events:none;}
    #app-loader.dark{background:#0D1117;}
    .vdl-splash-bg{display:none;}
    .vdl-splash-inner{
      display:flex;flex-direction:column;align-items:center;
      position:relative;z-index:1;
      animation:splashEnter 0.3s cubic-bezier(0.22,1,0.36,1) both;
    }
    @keyframes splashEnter{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
    .vdl-splash-icon-wrap{
      position:relative;width:80px;height:80px;margin-bottom:16px;
    }
    .vdl-splash-icon{
      width:80px;height:80px;border-radius:18px;display:block;
      box-shadow:0 6px 28px rgba(15,92,52,0.28),0 1px 4px rgba(0,0,0,0.1);
    }
    /* Fallback VD icon shown if img fails to load */
    .vdl-splash-icon-fallback{
      display:none;width:80px;height:80px;border-radius:18px;
      background:linear-gradient(135deg,#1a7f4b,#0A3D22);
      align-items:center;justify-content:center;
      font-family:system-ui,sans-serif;font-weight:900;font-size:32px;
      position:absolute;inset:0;
    }
    .vdl-splash-icon-fallback .vd-v{color:#ffffff;}
    .vdl-splash-icon-fallback .vd-d{color:#F0B429;}
    .vdl-splash-icon:not([src]),.vdl-splash-icon[src=""]{display:none;}
    .vdl-splash-icon.broken + .vdl-splash-icon-fallback{display:flex;}
    .vdl-splash-ring{
      position:absolute;inset:-6px;border-radius:24px;z-index:1;
      border:2px solid rgba(15,92,52,0.2);
      animation:ringPulse 1.4s ease-in-out infinite;
    }
    @keyframes ringPulse{0%,100%{opacity:0.35;transform:scale(1);}50%{opacity:1;transform:scale(1.04);}}
    .vdl-splash-wordmark{
      font-family:'Space Grotesk',system-ui,sans-serif;
      font-size:24px;font-weight:800;letter-spacing:-0.04em;
      margin-bottom:3px;line-height:1;color:#0D1117;
    }
    #app-loader.dark .vdl-splash-wordmark{color:#F0F6FC;}
    .vdl-splash-v{color:#0D1117;}
    #app-loader.dark .vdl-splash-v{color:#F0F6FC;}
    .vdl-splash-d{color:#0F5C34;}
    .vdl-splash-tagline{
      font-size:10px;font-weight:600;color:rgba(0,0,0,0.3);
      letter-spacing:1.6px;text-transform:uppercase;margin-bottom:28px;
    }
    #app-loader.dark .vdl-splash-tagline{color:rgba(255,255,255,0.22);}
    .vdl-splash-bar-wrap{
      width:100px;height:2px;background:rgba(0,0,0,0.07);
      border-radius:99px;overflow:hidden;margin-bottom:14px;
    }
    #app-loader.dark .vdl-splash-bar-wrap{background:rgba(255,255,255,0.1);}
    .vdl-splash-bar{
      height:100%;width:0%;
      background:linear-gradient(90deg,#0F5C34,#2A9D6E,#0F5C34);
      background-size:200% 100%;
      border-radius:99px;
      animation:barShimmer 0.8s linear infinite, barGrow 1.9s ease forwards;
    }
    @keyframes barShimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
    @keyframes barGrow{0%{width:15%;}40%{width:70%;}75%{width:90%;}100%{width:98%;}}
    .vdl-splash-status{
      font-size:11.5px;font-weight:500;color:rgba(0,0,0,0.35);
      letter-spacing:0.1px;min-height:16px;transition:opacity 0.2s ease;
    }
    #app-loader.dark .vdl-splash-status{color:rgba(255,255,255,0.28);}
    .vdl-splash-footer{
      position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
      font-size:10.5px;color:rgba(0,0,0,0.18);font-weight:500;white-space:nowrap;
      font-family:'Inter',system-ui,sans-serif;
    }
    #app-loader.dark .vdl-splash-footer{color:rgba(255,255,255,0.12);}
    .vdl-splash-footer strong{color:rgba(0,0,0,0.27);font-weight:600;}
    #app-loader.dark .vdl-splash-footer strong{color:rgba(255,255,255,0.2);}

    /* ══════════════════════════════════════════
       PWA INSTALL BANNER
       ══════════════════════════════════════════ */
    #vd-install-banner{
      display:none;position:fixed;bottom:0;left:0;right:0;
      z-index:9000;padding:0 0 env(safe-area-inset-bottom,0);
      animation:bannerSlideUp 0.45s cubic-bezier(0.34,1.4,0.64,1) both;
    }
    #vd-install-banner.show{display:block;}
    @keyframes bannerSlideUp{from{transform:translateY(110%);opacity:0;}to{transform:translateY(0);opacity:1;}}
    .vd-banner-inner{
      margin:0 12px 12px;
      background:linear-gradient(135deg,#161B22 0%,#1c2128 100%);
      border:1px solid rgba(63,185,80,0.22);
      border-radius:20px;padding:16px 16px;
      display:flex;align-items:center;gap:13px;
      box-shadow:0 -4px 40px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.03);
    }
    .vd-banner-icon{width:52px;height:52px;border-radius:13px;flex-shrink:0;overflow:hidden;box-shadow:0 4px 12px rgba(15,92,52,0.4);}
    .vd-banner-icon img{width:52px;height:52px;display:block;}
    .vd-banner-text{flex:1;min-width:0;}
    .vd-banner-title{
      font-family:'Space Grotesk',system-ui,sans-serif;
      font-size:15px;font-weight:800;color:#FFFFFF;
      letter-spacing:-0.02em;margin-bottom:2px;
    }
    .vd-banner-sub{font-size:12px;color:rgba(255,255,255,0.4);font-weight:500;line-height:1.4;}
    .vd-banner-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
    .vd-banner-install{
      padding:10px 16px;
      background:linear-gradient(135deg,#1a7f4b,#0F5C34);
      color:white;border:none;border-radius:10px;
      font-size:13px;font-weight:700;
      font-family:'Inter',system-ui,sans-serif;cursor:pointer;
      white-space:nowrap;
      box-shadow:0 4px 14px rgba(15,92,52,0.45);
      transition:transform 0.15s,box-shadow 0.15s;
      -webkit-tap-highlight-color:transparent;
    }
    .vd-banner-install:active{transform:scale(0.95);box-shadow:0 2px 8px rgba(15,92,52,0.3);}
    .vd-banner-dismiss{
      width:30px;height:30px;border-radius:50%;
      background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);
      color:rgba(255,255,255,0.35);
      display:flex;align-items:center;justify-content:center;
      cursor:pointer;transition:background 0.15s;flex-shrink:0;
    }
    .vd-banner-dismiss:hover{background:rgba(255,255,255,0.1);}
    .vd-banner-dismiss svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;}
    .vd-ios-steps{
      display:flex;align-items:center;gap:5px;margin-top:5px;
      font-size:11px;color:rgba(255,255,255,0.3);font-weight:500;
    }
    .vd-ios-steps svg{width:13px;height:13px;stroke:#135B36;fill:none;stroke-width:2;flex-shrink:0;}

    /* ══════════════════════════════════════════
       MOBILE FULL-APP FEEL
       ══════════════════════════════════════════ */
    html,body{overscroll-behavior:none;}
    *{-webkit-tap-highlight-color:transparent;}
    html{scroll-behavior:smooth;}
    .content,.sidebar nav,.modal,.notif-body{-webkit-overflow-scrolling:touch;}
    .bottom-nav{padding-bottom:max(env(safe-area-inset-bottom,0px),8px) !important;}
    @media(max-width:768px){
      .main{padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));}
    }

    /* ================================================================
       FULL APP FEEL — UX POLISH LAYER
       ================================================================ */

    /* 1. Prevent text selection on UI chrome */
    .nav-item,.bnav-item,.btn,.filter-btn,.seg-btn,
    .settings-tab,.stat-card,.card-header,.badge,
    .sidebar-logo,.logo-text,.topbar,.bottom-nav{
      -webkit-user-select:none;user-select:none;
    }

    /* 2. Active press feedback */
    .btn:active{transform:scale(0.96) !important;}
    .nav-item:active{background:rgba(255,255,255,0.08) !important;}
    .bnav-item:active{transform:scale(0.88);}
    .bnav-add-btn:active{transform:scale(0.9) !important;}
    .filter-btn:active{transform:scale(0.95);}
    .stat-card{transition:transform 0.13s,box-shadow 0.15s;}
    .stat-card:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.10);}
    .stat-card:active{transform:scale(0.97);}
    .mobile-card-row:active{transform:scale(0.99);box-shadow:var(--shadow-lg);}

    /* 3. Ripple class (added by JS) */
    .vd-ripple-host{position:relative;overflow:hidden;}
    .vd-ripple{
      position:absolute;border-radius:50%;pointer-events:none;z-index:99;
      background:rgba(255,255,255,0.15);transform:scale(0);
      animation:vdRipple 0.5s linear;
    }
    @keyframes vdRipple{to{transform:scale(4);opacity:0;}}

    /* 4. Page-transition slide-in */
    .page.active{
      animation:pageSlideIn 0.22s cubic-bezier(0.25,0.46,0.45,0.94) both;
    }
    @keyframes pageSlideIn{
      from{opacity:0;transform:translateY(7px);}
      to{opacity:1;transform:translateY(0);}
    }

    /* 5. Modal entrance bounce */
    .modal-overlay.active .modal{
      animation:modalRise 0.28s cubic-bezier(0.34,1.4,0.64,1) both;
    }
    @keyframes modalRise{
      from{opacity:0;transform:translateY(28px) scale(0.96);}
      to{opacity:1;transform:translateY(0) scale(1);}
    }

    /* 6. Toast bounce-in */
    @keyframes toastIn{
      from{opacity:0;transform:translateY(22px) scale(0.88);}
      to{opacity:1;transform:translateY(0) scale(1);}
    }
    .toast{border-radius:12px !important;}

    /* 7. Stat card hover glow */
    /* stat-card hover now handled above */

    /* 8. Bottom nav active indicator dot */
    .bnav-item.active::after{
      content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
      width:4px;height:4px;border-radius:50%;background:var(--green-light);
      animation:bnavDot 0.25s ease both;
    }
    @keyframes bnavDot{from{transform:translateX(-50%) scale(0);}to{transform:translateX(-50%) scale(1);}}

    /* 9. Topbar shadow on scroll */
    .topbar{transition:box-shadow 0.25s;}
    .topbar.scrolled{box-shadow:0 2px 16px rgba(0,0,0,0.1);}

    /* 10. Add button pulse ring */
    .bnav-add-btn::before{
      content:'';position:absolute;inset:-4px;border-radius:50%;z-index:-1;
      background:rgba(26,127,75,0.25);
      animation:addPulse 2.8s ease-in-out infinite;
    }
    @keyframes addPulse{
      0%,100%{transform:scale(1);opacity:0.6;}
      50%{transform:scale(1.35);opacity:0;}
    }

    /* 11. Card list stagger animation */
    @keyframes cardAppear{
      from{opacity:0;transform:translateY(8px);}
      to{opacity:1;transform:translateY(0);}
    }
    .mobile-card-row{animation:cardAppear 0.18s ease both;}
    .mobile-card-row:nth-child(2){animation-delay:0.03s;}
    .mobile-card-row:nth-child(3){animation-delay:0.06s;}
    .mobile-card-row:nth-child(4){animation-delay:0.09s;}
    .mobile-card-row:nth-child(5){animation-delay:0.12s;}
    .mobile-card-row:nth-child(6){animation-delay:0.15s;}

    /* 12. Notif drawer — slide from bottom on mobile */
    @media(max-width:600px){
      .notif-panel.open{align-items:flex-end;}
      .notif-drawer{
        max-width:100% !important;height:88vh !important;
        border-radius:20px 20px 0 0;
        transform:translateY(100%) !important;
        transition:transform 0.3s cubic-bezier(0.32,0.72,0,1) !important;
      }
      .notif-panel.open .notif-drawer{transform:translateY(0) !important;}
      .notif-handle{
        display:block !important;width:36px;height:4px;
        background:var(--border);border-radius:99px;margin:12px auto 0;
      }
    }

    /* 13. Skeleton shimmer */
    @keyframes shimmer{
      0%{background-position:-400px 0;}
      100%{background-position:400px 0;}
    }
    .skeleton{
      background:linear-gradient(90deg,var(--border) 25%,var(--surface) 50%,var(--border) 75%);
      background-size:800px 100%;
      animation:shimmer 1.4s infinite;
      border-radius:6px;
    }

    /* 14. Custom context menu */
    #vd-ctx-menu{
      position:fixed;z-index:99999;
      background:#161B22;border:1px solid #30363D;
      border-radius:10px;padding:6px;
      box-shadow:0 8px 32px rgba(0,0,0,0.4);min-width:160px;
      animation:ctxIn 0.15s cubic-bezier(0.34,1.56,0.64,1);display:none;
    }
    #vd-ctx-menu.show{display:block;}
    @keyframes ctxIn{from{opacity:0;transform:scale(0.9);}to{opacity:1;transform:scale(1);}}
    #vd-ctx-menu button{
      display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;
      border:none;background:none;color:#E6EDF3;font-size:12px;font-weight:600;
      font-family:'Inter',sans-serif;cursor:pointer;border-radius:7px;transition:background 0.1s;
    }
    #vd-ctx-menu button:hover{background:rgba(255,255,255,0.07);}
    #vd-ctx-menu button svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;}
    #vd-ctx-menu .ctx-sep{height:1px;background:#30363D;margin:4px 0;}
    #vd-ctx-menu .ctx-brand{
      padding:8px 10px 6px;font-size:10px;font-weight:700;
      color:#484F58;letter-spacing:0.5px;text-transform:uppercase;
    }

    /* 15. Smooth focus rings */
    input:focus,select:focus,textarea:focus{
      transition:border-color 0.15s,box-shadow 0.15s;
    }

    /* 16. Loading app-loader bar (animated progress) */

    /* ── All-screen responsive extras ── */

    /* Small phones (≤380px) */
    @media(max-width:380px){
      .content{padding:10px 10px;}
      .stats-grid{grid-template-columns:1fr 1fr;gap:8px;}
      .stat-card{padding:10px 12px 10px;}
      .stat-value{font-size:17px;}
      .topbar{padding:8px 10px;}
      .page-title{font-size:17px;}
      .btn{padding:7px 12px;font-size:12px;}
      .bottom-nav-inner{height:54px;}
      .bnav-item{font-size:9px;}
    }

    /* Landscape phones */
    @media(max-height:500px) and (max-width:900px){
      .main{padding-bottom:0;}
      .bottom-nav{display:none;}
      .content{padding:10px 14px;}
    }

    /* Tablet portrait (481–768px) */
    @media(min-width:481px) and (max-width:768px){
      .stats-grid{grid-template-columns:repeat(3,1fr);}
      .modal{max-width:500px;}
    }

    /* Tablet landscape / small desktop (769–1024px) */
    @media(min-width:769px) and (max-width:1024px){
      .sidebar{width:190px;}
      .main{margin-left:190px;}
      .nav-item{padding:9px 14px;margin:2px 8px;font-size:12px;}
      .content{padding:16px 20px;}
      .stats-grid{grid-template-columns:repeat(3,1fr);gap:10px;}
      .dashboard-grid{grid-template-columns:1fr;}
      .topbar{padding:10px 20px;}
      .card{padding:16px 18px;}
      table{font-size:12px;}
      td,th{padding:8px 10px;}
    }

    /* Medium desktop (1025–1280px) */
    @media(min-width:1025px) and (max-width:1280px){
      .content{padding:20px 24px;}
      .stats-grid{grid-template-columns:repeat(3,1fr);}
    }

    /* Large desktop (>1280px) */
    @media(min-width:1281px){
      .content{padding:24px 32px;}
      .stats-grid{grid-template-columns:repeat(4,1fr);}
      .dashboard-grid{grid-template-columns:1fr 1fr;}
    }

    /* Very wide (>1600px) */
    @media(min-width:1600px){
      .sidebar{width:240px;}
      .main{margin-left:240px;}
      .content{padding:28px 40px;}
      .nav-item{font-size:14px;padding:11px 20px;}
    }

    @media(max-width:768px){
      .an-two-col{grid-template-columns:1fr !important;}
    }

    [data-theme="dark"] .logo-text{color:#FFFFFF;}

    /* ========== HOW TO PAGE — REDESIGNED ========== */
    .ht-header{
      background:linear-gradient(135deg,var(--primary-dark) 0%,var(--primary) 60%,#1a7f4b 100%);
      border-radius:20px;padding:32px 28px;margin-bottom:24px;color:white;
      position:relative;overflow:hidden;
    }
    .ht-header::before{
      content:'';position:absolute;top:-40px;right:-40px;
      width:200px;height:200px;border-radius:50%;
      background:rgba(255,255,255,0.05);pointer-events:none;
    }
    .ht-header::after{
      content:'';position:absolute;bottom:-60px;right:60px;
      width:150px;height:150px;border-radius:50%;
      background:rgba(255,255,255,0.04);pointer-events:none;
    }
    .ht-header-inner{position:relative;z-index:1;}
    .ht-header-eyebrow{
      display:inline-flex;align-items:center;gap:6px;
      background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);
      border-radius:100px;padding:4px 12px;
      font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
      color:rgba(255,255,255,0.85);margin-bottom:14px;
    }
    .ht-header-eyebrow svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.5;}
    .ht-header-title{
      font-family:'Space Grotesk',sans-serif;font-size:clamp(22px,3vw,30px);
      font-weight:800;letter-spacing:-0.03em;margin-bottom:8px;
    }
    .ht-header-sub{font-size:14px;color:rgba(255,255,255,0.65);line-height:1.6;max-width:480px;}
    .ht-search-wrap{position:relative;margin-top:20px;max-width:380px;}
    .ht-search{
      width:100%;padding:11px 16px 11px 40px;
      background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.2);
      border-radius:10px;color:white;font-size:13px;font-family:'Inter',sans-serif;
      outline:none;transition:background 0.2s,border-color 0.2s;
    }
    .ht-search::placeholder{color:rgba(255,255,255,0.45);}
    .ht-search:focus{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.4);}
    .ht-search-icon{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px;stroke:rgba(255,255,255,0.5);fill:none;stroke-width:2;stroke-linecap:round;}

    /* Topic grid — clickable topic cards */
    .ht-topics{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
      gap:10px;margin-bottom:28px;
    }
    @media(max-width:480px){.ht-topics{grid-template-columns:repeat(2,1fr);gap:8px;}}
    .ht-topic{
      background:var(--white);border:1.5px solid var(--border);
      border-radius:14px;padding:16px 14px;
      cursor:pointer;transition:all 0.18s;
      display:flex;flex-direction:column;align-items:flex-start;gap:10px;
      position:relative;overflow:hidden;
      -webkit-user-select:none;user-select:none;
    }
    .ht-topic:hover{border-color:var(--primary);box-shadow:0 4px 16px rgba(15,92,52,0.12);transform:translateY(-2px);}
    .ht-topic:active{transform:scale(0.97);}
    .ht-topic.active{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 4px 20px rgba(15,92,52,0.15);}
    .ht-topic.active::after{
      content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
      background:var(--primary);border-radius:0 0 2px 2px;
    }
    .ht-topic-icon{
      width:38px;height:38px;border-radius:10px;
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .ht-topic-icon svg{width:18px;height:18px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .ht-topic-label{font-size:12px;font-weight:700;color:var(--text);line-height:1.3;}
    .ht-topic-sub{font-size:10px;color:var(--muted);line-height:1.4;margin-top:-4px;}
    .ht-topic.active .ht-topic-label{color:var(--primary);}

    /* Detail panel */
    .ht-detail{display:none;}
    .ht-detail.active{display:block;animation:htSlideIn 0.22s ease both;}
    @keyframes htSlideIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

    .ht-detail-header{
      display:flex;align-items:center;gap:16px;
      background:var(--white);border:1px solid var(--border);
      border-radius:16px;padding:20px 24px;margin-bottom:16px;
      box-shadow:0 1px 4px rgba(0,0,0,0.05);
    }
    .ht-detail-icon{
      width:52px;height:52px;border-radius:14px;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
    }
    .ht-detail-icon svg{width:24px;height:24px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
    .ht-detail-title{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:800;color:var(--text);letter-spacing:-0.02em;}
    .ht-detail-sub{font-size:13px;color:var(--muted);margin-top:3px;}
    .ht-detail-coming{
      display:inline-flex;align-items:center;gap:5px;
      background:var(--accent-soft);color:var(--accent-dark);
      border:1px solid rgba(212,160,23,0.2);border-radius:20px;
      font-size:10px;font-weight:700;padding:3px 10px;margin-left:8px;letter-spacing:0.5px;
    }

    .ht-steps-card{
      background:var(--white);border:1px solid var(--border);
      border-radius:16px;overflow:hidden;margin-bottom:16px;
      box-shadow:0 1px 4px rgba(0,0,0,0.05);
    }
    .ht-steps-head{
      padding:16px 20px;border-bottom:1px solid var(--border);
      display:flex;align-items:center;gap:10px;
    }
    .ht-steps-head svg{width:16px;height:16px;stroke:var(--primary);fill:none;stroke-width:2;stroke-linecap:round;}
    .ht-steps-head-title{font-size:14px;font-weight:700;color:var(--text);}
    .ht-steps-list{padding:8px 20px 16px;display:flex;flex-direction:column;gap:0;}
    .ht-step{
      display:flex;align-items:flex-start;gap:14px;
      padding:12px 0;border-bottom:1px solid var(--border-light);
    }
    .ht-step:last-child{border:none;}
    .ht-step-num{
      width:24px;height:24px;border-radius:50%;
      background:var(--primary-soft);color:var(--primary);
      font-size:11px;font-weight:800;flex-shrink:0;
      display:flex;align-items:center;justify-content:center;
      margin-top:1px;
    }
    .ht-step-text{font-size:13px;color:var(--text);line-height:1.6;opacity:0.85;}
    .ht-step-text strong{color:var(--primary);font-weight:700;opacity:1;}

    .ht-tip{
      display:flex;gap:12px;align-items:flex-start;
      background:var(--accent-soft);border:1px solid rgba(212,160,23,0.2);
      border-radius:12px;padding:14px 16px;margin-bottom:16px;
    }
    .ht-tip-icon{
      width:32px;height:32px;border-radius:8px;
      background:rgba(212,160,23,0.15);
      display:flex;align-items:center;justify-content:center;flex-shrink:0;
    }
    .ht-tip-icon svg{width:14px;height:14px;stroke:var(--accent-dark);fill:none;stroke-width:2;stroke-linecap:round;}
    .ht-tip-text{font-size:12.5px;color:var(--text);line-height:1.65;opacity:0.85;}
    .ht-tip-text strong{color:var(--accent-dark);opacity:1;}

    /* ── YouTube video placeholder ── */
    .ht-yt-wrap{
      margin-bottom:16px;
      border-radius:14px;overflow:hidden;
      border:1px solid var(--border);
      background:var(--white);
      box-shadow:0 1px 4px rgba(0,0,0,0.05);
    }
    .ht-yt-head{
      padding:12px 16px;border-bottom:1px solid var(--border);
      display:flex;align-items:center;gap:8px;
    }
    .ht-yt-head svg{width:16px;height:16px;flex-shrink:0;}
    .ht-yt-head-label{font-size:13px;font-weight:700;color:var(--text);}
    .ht-yt-thumb{
      position:relative;width:100%;aspect-ratio:16/9;
      background:#0D1117;display:flex;align-items:center;justify-content:center;
      cursor:pointer;overflow:hidden;
    }
    /* Subtle grid texture */
    .ht-yt-thumb::before{
      content:'';position:absolute;inset:0;
      background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);
      background-size:28px 28px;pointer-events:none;
    }
    .ht-yt-inner{
      position:relative;z-index:1;
      display:flex;flex-direction:column;align-items:center;gap:14px;
      padding:24px;
    }
    .ht-yt-play{
      width:60px;height:60px;border-radius:50%;
      background:rgba(0,0,0,0.9);
      display:flex;align-items:center;justify-content:center;
      box-shadow:0 4px 20px rgba(0,0,0,0.45);
      transition:transform 0.2s,box-shadow 0.2s;
      flex-shrink:0;
    }
    .ht-yt-thumb:hover .ht-yt-play{transform:scale(1.1);box-shadow:0 6px 28px rgba(0,0,0,0.6);}
    .ht-yt-play svg{width:22px;height:22px;fill:white;margin-left:3px;}
    .ht-yt-label-wrap{text-align:center;}
    .ht-yt-coming{
      font-size:11px;font-weight:700;color:rgba(255,255,255,0.5);
      letter-spacing:1.2px;text-transform:uppercase;margin-bottom:5px;
    }
    .ht-yt-title{
      font-family:'Space Grotesk',sans-serif;
      font-size:14px;font-weight:700;color:rgba(255,255,255,0.85);
      line-height:1.4;
    }
    .ht-yt-badge{
      display:inline-flex;align-items:center;gap:5px;
      margin-top:6px;
      background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);
      border-radius:20px;padding:3px 10px;
      font-size:10px;font-weight:600;color:rgba(255,255,255,0.4);
    }
    .ht-yt-badge svg{width:10px;height:10px;stroke:rgba(255,255,255,0.4);fill:none;stroke-width:2;stroke-linecap:round;}
    [data-theme="dark"] .ht-yt-wrap{background:var(--white);}

    /* Empty / no results */
    .ht-empty{text-align:center;padding:48px 20px;color:var(--muted);}
    .ht-empty svg{width:44px;height:44px;stroke:var(--border);fill:none;stroke-width:1.5;margin-bottom:14px;}
    .ht-empty p{font-size:13px;line-height:1.6;}

    [data-theme="dark"] .ht-topic{background:rgba(255,255,255,0.04);}
    [data-theme="dark"] .ht-topic.active{background:rgba(15,92,52,0.15);}
    [data-theme="dark"] .ht-steps-card,[data-theme="dark"] .ht-detail-header{background:var(--surface);}
    [data-theme="dark"] .ht-tip{background:rgba(212,160,23,0.08);border-color:rgba(212,160,23,0.15);}
    [data-theme="dark"] .ht-step-text{opacity:0.9;}
    [data-theme="dark"] .ht-tip-text{opacity:0.9;}
    
    /* =============== iOS NOTCH / STATUS BAR SAFE AREA =============== */
@supports (padding: env(safe-area-inset-top)) {
  .topbar {
    padding-top: max(8px, min(env(safe-area-inset-top), 20px)) !important;
    padding-left:  max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}