:root {
    --blue: #0077B6; --purple: #6B3FA0; --orange: #FF6B35;
    --green: #28a745; --yellow: #FF8C00; --red: #dc3545;
    --bg: #f0f4f8; --card: #fff; --text: #111; --muted: #888;
    --border: #e8e8e8; --radius: 10px;
  }
  /* ── BASE ── */ 
  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
  body { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  #app { flex: 1; display: flex; flex-direction: column; overflow: hidden; width: 100%; }
  .screen { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
  .hidden { display: none !important; }

  /* ── MOBILE BASE STYLES ── */
  .hdr { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; flex-shrink: 0; }
  .hdr-left { flex: 1; min-width: 0; }
  .hdr-title { font-size: 17px; font-weight: 700; }
  .hdr-sub { font-size: 11px; opacity: .75; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hdr-btns { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
  .hdr-btn { background: rgba(255,255,255,.2); border: none; color: #fff; font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
  .hdr-btn:hover { background: rgba(255,255,255,.3); }
  .scroll { flex: 1; overflow-y: auto; padding: 14px; -webkit-overflow-scrolling: touch; }
  .card { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
  .chip-row { display: flex; gap: 8px; padding: 8px 12px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
  .chip-row::-webkit-scrollbar { display: none; }
  .chip { border-radius: 16px; padding: 5px 12px; font-size: 12px; font-weight: 500; color: rgba(255,255,255,.65); background: transparent; border: none; cursor: pointer; white-space: nowrap; }
  .chip.active { background: rgba(255,255,255,.92); font-weight: 700; }
  .tab-bar { display: flex; padding: 0 12px 8px; gap: 8px; flex-shrink: 0; }
  .tab-btn { flex: 1; padding: 7px; border-radius: 8px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); background: transparent; border: none; cursor: pointer; }
  .tab-btn.active { background: rgba(255,255,255,.25); color: #fff; }
  .summary-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 14px; }
  .summary-chip { background: var(--card); border-radius: var(--radius); padding: 14px 6px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
  .summary-val { font-size: 20px; font-weight: 700; }
  .summary-label { font-size: 10px; color: var(--muted); margin-top: 3px; }
  .tbl-hdr { display: flex; padding: 8px 0; border-bottom: 2px solid currentColor; }
  .tbl-row { display: flex; padding: 9px 0; border-bottom: 1px solid var(--border); align-items: center; }
  .tbl-row.even { background: #f8fbff; }
  .col1 { flex: 1.6; font-size: 12px; }
  .col2 { flex: .8; text-align: center; font-size: 12px; }
  .tbl-hdr .col1, .tbl-hdr .col2 { font-weight: 700; }
  .tbl-total { display: flex; padding: 10px 0; border-top: 2px solid currentColor; font-weight: 700; font-size: 14px; }
  .dse-card { background: var(--card); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; border-left: 3px solid var(--purple); box-shadow: 0 1px 4px rgba(0,0,0,.07); cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; }
  .dse-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.12); }
  .cust-card { background: var(--card); border-radius: 8px; padding: 12px; margin-bottom: 10px; border-left: 3px solid var(--accent, var(--orange)); box-shadow: 0 1px 3px rgba(0,0,0,.06); cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .cust-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,.1); }
  .search-wrap { padding: 0 12px 12px; flex-shrink: 0; }
  .search-input { width: 100%; background: #fff; border: none; border-radius: 8px; padding: 10px 14px; font-size: 14px; color: #333; outline: none; }
  #login-screen { background: #fff; display: flex; flex-direction: column; flex: 1; }
  .login-scroll { flex: 1; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .login-inner { width: 100%; max-width: 420px; }
  .login-title { font-size: 32px; font-weight: 700; text-align: center; margin-bottom: 8px; }
  .login-sub { font-size: 14px; text-align: center; color: var(--muted); margin-bottom: 28px; }
  .role-row { display: flex; gap: 10px; margin-bottom: 22px; }
  .role-btn { flex: 1; padding: 12px; border-radius: 8px; border: 2px solid #ddd; background: #f5f5f5; font-size: 13px; font-weight: 600; color: #666; cursor: pointer; transition: all .15s; }
  .role-btn.active { border-color: #0088FF; background: #0088FF; color: #fff; }
  .field-label { font-size: 13px; font-weight: 600; margin-bottom: 6px; margin-top: 14px; color: #000; display: block; }
  .field-input { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; color: #000; background: #fff; outline: none; margin-bottom: 4px; }
  .field-input:focus { border-color: #0088FF; }
  .login-btn { width: 100%; background: #0088FF; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 20px; }
  .login-btn:hover { background: #006dd4; }
  .login-btn:disabled { background: #99c9ff; }
  .badge { display: inline-flex; padding: 3px 9px; border-radius: 5px; font-size: 12px; font-weight: 600; margin: 2px; }
  .badge-blue { background: #E8F4FD; color: var(--blue); }
  .prog-bar-bg { height: 12px; background: #e8e8e8; border-radius: 6px; overflow: hidden; margin-top: 6px; }
  .prog-bar-fill { height: 12px; border-radius: 6px; transition: width .3s; }
  .part-row { display: flex; padding: 5px 0 5px 8px; border-bottom: 1px solid #f5f5f5; background: #f0f6ff; font-size: 11px; }
  .part-col1 { flex: 1.6; color: #555; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .part-col2 { flex: .8; text-align: center; color: #777; }
  .report-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .report-table { border-collapse: collapse; font-size: 11px; }
  .report-table th, .report-table td { padding: 6px 8px; text-align: center; white-space: nowrap; }
  .report-table th { color: #fff; font-weight: 700; font-size: 10px; }
  .report-table td:first-child { text-align: left; font-size: 11px; }
  .report-table .pg-col { min-width: 110px; }
  .report-table .tot-row td { font-weight: 700; }
  .report-table .even-row { background: #faf7ff; }
  .report-table .zero { color: #ccc; }
  .settings-section { background: var(--card); border-radius: var(--radius); padding: 16px; margin-bottom: 18px; box-shadow: 0 1px 4px rgba(0,0,0,.07); }
  .settings-title { font-size: 16px; font-weight: 700; color: #0055cc; margin-bottom: 14px; }
  .settings-input { width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 12px; font-size: 14px; background: #fafafa; margin-bottom: 4px; outline: none; }
  .settings-btn { width: 100%; background: #0055cc; color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 14px; }
  .settings-btn:disabled { background: #99b3e6; }
  .select-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 1px solid #ddd; border-radius: 8px; padding: 12px; background: #fafafa; cursor: pointer; font-size: 14px; font-weight: 600; }
  .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 100; }
  .modal-box { background: #fff; border-radius: 16px; width: min(280px,85vw); max-height: min(400px,70vh); padding: 16px; display: flex; flex-direction: column; }
  .modal-title { font-size: 16px; font-weight: 700; color: #0055cc; margin-bottom: 12px; }
  .modal-list { overflow-y: auto; }
  .modal-item { padding: 12px; border-radius: 8px; cursor: pointer; font-size: 15px; margin-bottom: 4px; }
  .modal-item:hover { background: #eef2ff; }
  .modal-item.selected { background: #0055cc; color: #fff; font-weight: 700; }
  .spinner { width: 40px; height: 40px; border: 4px solid #e8e8e8; border-top-color: currentColor; border-radius: 50%; animation: spin .8s linear infinite; margin: 60px auto 12px; display: block; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { text-align: center; color: var(--muted); font-size: 14px; }
  .expand-btn { font-size: 11px; font-weight: 600; background: none; border: none; cursor: pointer; padding: 2px 0; display: block; }
  .mini-move-btn { padding: 5px 10px; border-radius: 6px; border: 1px solid var(--border); background: #fff; color: #444; font-size: 12px; font-weight: 700; cursor: pointer; }
  .mini-move-btn:disabled { opacity: .35; cursor: default; }
  .empty { text-align: center; color: var(--muted); margin-top: 30px; font-size: 14px; }
  .section-title { font-size: 14px; font-weight: 700; color: #555; margin-bottom: 8px; }
  .chevron { font-size: 18px; color: #ccc; }

  /* ── DSE SIDEBAR SEARCH INPUT ── */
  #dse-screen .sidebar input[id=dse-search]::placeholder { color:rgba(255,255,255,.6); }
  #dse-screen .sidebar input[id=dse-search]:focus { border-color:rgba(255,255,255,.6)!important; background:rgba(255,255,255,.22)!important; }

  /* ── HIDE DESKTOP ELEMENTS ON MOBILE ── */
  .sidebar, .main-pane, .topbar, .filter-strip,
  .main-scroll, .stat-strip, .stat-card,
  .desktop-tab, .section-hdr, .tb-btn, .tb-search,
  .topnav-bar, .topnav-favs-row { display: none !important; }

  /* ── MOBILE HQ – iOS 26 STYLE ── */
  /* Topbar with safe-area-inset-top support */
  .hq-mob-topbar{display:flex;align-items:center;justify-content:space-between;background:rgba(242,242,247,.94);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:.5px solid rgba(60,60,67,.12);padding:12px 20px;padding-top:max(env(safe-area-inset-top,0px),12px);flex-shrink:0}
  .hq-mob-topbar-title{font-size:17px;font-weight:700;color:#000;letter-spacing:-.5px;font-feature-settings:'ss01'}
  .hq-mob-topbar-btn{background:none;border:none;color:var(--purple);font-size:14px;font-weight:500;padding:6px 10px;cursor:pointer;border-radius:10px;-webkit-tap-highlight-color:transparent;letter-spacing:-.2px}
  .hq-mob-topbar-btn:active{background:rgba(107,63,160,.07)}
  .hq-mob-pages{flex:1;overflow:hidden;display:flex;flex-direction:column;background:#F2F2F7}
  .hq-mob-page{display:flex;flex-direction:column;flex:1;overflow:hidden;background:#F2F2F7}
  .hq-mob-page.hidden{display:none!important}
  /* iOS 26 Segmented control */
  .hq-mob-toggle-bar{display:flex;padding:10px 16px;background:rgba(242,242,247,.97);border-bottom:.5px solid rgba(60,60,67,.1);flex-shrink:0}
  .hq-mob-seg-ctrl{display:flex;background:rgba(118,118,128,.12);border-radius:10px;padding:2px;flex:1}
  .hq-mob-toggle-btn{flex:1;padding:7px 0;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer;background:transparent;color:rgba(60,60,67,.7);transition:all .2s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent;letter-spacing:-.2px}
  .hq-mob-toggle-btn.active{background:rgba(255,255,255,.95);color:#000;font-weight:600;box-shadow:0 2px 8px rgba(0,0,0,.1),0 0 0 .5px rgba(0,0,0,.05)}
  /* Chips on light bg (overrides dark-bg defaults) */
  #hq-page-perf-m .chip,#hq-page-report-m .chip{color:rgba(60,60,67,.8);background:rgba(118,118,128,.1);border:none;font-size:12px;padding:5px 12px}
  #hq-page-perf-m .chip.active,#hq-page-report-m .chip.active{background:var(--purple);color:#fff;font-weight:600}
  /* Welcome banner */
  .hq-welcome{padding:24px 20px 16px}
  .hq-welcome-greet{font-size:13px;font-weight:500;color:#6C6C70;letter-spacing:-.1px}
  .hq-welcome-name{font-size:26px;font-weight:700;color:#000;letter-spacing:-.7px;margin-top:2px;line-height:1.15}
  .hq-welcome-co{font-size:11px;color:#8E8E93;margin-top:4px;letter-spacing:-.1px}
  /* Home grid – iOS 26 grid style */
  #hq-home-grid-m{overflow-y:auto;flex:1;padding-bottom:calc(max(env(safe-area-inset-bottom,0px),20px) + 88px)}
  .hq-home-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 16px 4px}
  .hq-home-card{background:rgba(255,255,255,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:18px;padding:18px 14px 16px;cursor:pointer;text-align:center;transition:opacity .12s,transform .1s;-webkit-tap-highlight-color:transparent;display:flex;flex-direction:column;align-items:center;gap:7px;border:.5px solid rgba(255,255,255,.6)}
  .hq-home-card:active{opacity:.6;transform:scale(.97)}
  .hq-home-card-icon{width:28px;height:28px;color:var(--purple);flex-shrink:0}
  .hq-home-card-val{font-size:32px;font-weight:800;color:#000;line-height:1;letter-spacing:-1px;font-feature-settings:'tnum'}
  .hq-home-card-lbl{font-size:11px;font-weight:500;color:#6C6C70;letter-spacing:-.1px}
  /* More list – iOS 26 grouped */
  .hq-more-list{overflow-y:auto;flex:1;padding:20px 16px calc(max(env(safe-area-inset-bottom,0px),20px) + 88px);background:#F2F2F7}
  .hq-more-section{background:rgba(255,255,255,.82);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;overflow:hidden;margin-bottom:24px;border:.5px solid rgba(255,255,255,.7)}
  .hq-more-item{display:flex;align-items:center;padding:13px 16px;border-bottom:.5px solid rgba(60,60,67,.1);cursor:pointer;gap:14px;-webkit-tap-highlight-color:transparent;min-height:52px}
  .hq-more-item:last-child{border-bottom:none}
  .hq-more-item:active{background:rgba(0,0,0,.04)}
  .hq-more-icon-sq{width:34px;height:34px;border-radius:9px;background:var(--purple);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .hq-more-label{flex:1;font-size:16px;font-weight:400;color:#000;letter-spacing:-.2px}
  .hq-more-arrow{color:#C7C7CC;font-size:17px;font-weight:400}
  /* ── UPLOAD TAB ── */
  .upload-grid{display:grid;grid-template-columns:1fr;gap:14px;padding:16px}
  @media(min-width:600px){.upload-grid{grid-template-columns:1fr 1fr}}
  @media(min-width:1100px){.upload-grid{grid-template-columns:1fr 1fr 1fr}}
  .upload-card{background:#fff;border-radius:16px;padding:18px;box-shadow:0 2px 10px rgba(0,0,0,.07);border:.5px solid rgba(0,0,0,.06);display:flex;flex-direction:column;gap:12px}
  .upload-card-master{border:2px solid var(--purple);background:linear-gradient(135deg,#faf7ff,#fff)}
  .upload-card-title{font-size:15px;font-weight:800;color:#111;display:flex;align-items:center;gap:8px}
  .upload-card-desc{font-size:12px;color:#6B7280;line-height:1.5}
  .upload-card-meta{font-size:11px;color:#9CA3AF;display:flex;align-items:center;gap:4px}
  .upload-card-meta.ok{color:#1a7a3a}
  .upload-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .upload-btn{padding:8px 14px;border-radius:9px;border:none;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .15s}
  .upload-btn:disabled{opacity:.45;cursor:not-allowed}
  .upload-btn-primary{background:var(--purple);color:#fff}
  .upload-btn-outline{background:transparent;border:1.5px solid var(--purple);color:var(--purple)}
  .upload-btn-gray{background:#F3F4F6;color:#374151;border:none}
  .upload-file-name{font-size:11px;color:#6B7280;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .upload-progress{height:4px;background:#E5E7EB;border-radius:2px;overflow:hidden;display:none}
  .upload-progress-bar{height:4px;background:var(--purple);border-radius:2px;width:0%;transition:width .3s}
  .upload-status-ok{font-size:12px;font-weight:600;color:#1a7a3a;display:none}
  .upload-status-err{font-size:12px;font-weight:600;color:#dc3545;display:none}
  .upload-eta{font-size:11px;color:#6B3FA0;font-weight:600;margin-top:2px;display:none}
  /* ── DEALERS TAB ── */
  .dealers-wrap{padding:12px 16px}
  .dealers-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
  .dealers-filter-inp{flex:1;min-width:140px;padding:8px 12px;border:1.5px solid #E5E7EB;border-radius:10px;font-size:13px;outline:none}
  .dealers-filter-inp:focus{border-color:var(--purple)}
  .dealers-filter-sel{padding:8px 10px;border:1.5px solid #E5E7EB;border-radius:10px;font-size:13px;outline:none;background:#fff;color:#374151}
  .dealers-table-wrap{overflow-x:auto;border-radius:12px;box-shadow:0 2px 10px rgba(0,0,0,.07)}
  .dealers-table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
  .dealers-table th{background:var(--purple);color:#fff;padding:10px 12px;text-align:left;font-weight:700;font-size:12px;white-space:nowrap;position:sticky;top:0}
  .dealers-table th.info-col{background:#5a2d8a}
  .dealers-table td{padding:9px 12px;border-bottom:.5px solid #F3F4F6;vertical-align:middle;white-space:nowrap}
  .dealers-table tr:hover td{background:#fafafa}
  .dealers-table td.info-col{color:#374151;font-weight:500}
  .dealers-table td.code-col{font-weight:700;color:var(--purple);font-family:monospace;font-size:12px}
  .offer-cell{position:relative}
  .offer-val{display:inline-block;min-width:40px;padding:3px 7px;border-radius:6px;background:#F3F4F6;color:#374151;font-size:12px;cursor:pointer;transition:background .15s}
  .offer-val:hover{background:#E5E7EB}
  .offer-val.empty{color:#C4C4C4;background:transparent}
  .offer-inp{width:90px;padding:4px 7px;border:1.5px solid var(--purple);border-radius:6px;font-size:12px;outline:none;background:#fff}
  /* Mobile dealer cards */
  .dealer-card{background:#fff;border-radius:14px;padding:14px;margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);border:.5px solid rgba(0,0,0,.06)}
  .dealer-card-hdr{display:flex;align-items:center;gap:10px;margin-bottom:8px;cursor:pointer}
  .dealer-card-code{font-size:12px;font-weight:800;color:var(--purple);font-family:monospace;background:#f3f0ff;padding:3px 8px;border-radius:6px}
  .dealer-card-name{font-size:14px;font-weight:700;color:#111;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dealer-card-meta{font-size:11px;color:#6B7280}
  .dealer-card-offers{display:none;border-top:.5px solid #F3F4F6;padding-top:10px;margin-top:4px}
  .dealer-card-offers.open{display:block}
  .dealer-offer-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:.5px solid #F9FAFB}
  .dealer-offer-row:last-child{border-bottom:none}
  .dealer-offer-label{font-size:12px;color:#374151;font-weight:600}
  .dealer-offer-val{font-size:12px;color:#6B7280;cursor:pointer;padding:3px 8px;border-radius:6px;background:#F3F4F6;min-width:40px;text-align:center}
  .dealer-offer-val:hover{background:#E5E7EB}
  /* Sub page top bar */
  .hq-sub-topbar{display:flex;align-items:center;padding:12px 20px;background:rgba(242,242,247,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:.5px solid rgba(60,60,67,.12);gap:12px;flex-shrink:0}
  .hq-sub-back{background:none;border:none;color:var(--purple);font-size:15px;font-weight:500;padding:4px 0;cursor:pointer;display:flex;align-items:center;gap:4px;-webkit-tap-highlight-color:transparent;letter-spacing:-.2px}
  .hq-sub-title{font-size:17px;font-weight:700;color:#000;letter-spacing:-.4px}
  /* iOS 26 Floating glass tab bar */
  .mob-bottom-nav{display:flex;position:fixed;left:12px;right:12px;bottom:max(env(safe-area-inset-bottom,0px),20px);height:60px;background:rgba(255,255,255,.75);backdrop-filter:blur(32px) saturate(200%);-webkit-backdrop-filter:blur(32px) saturate(200%);border-radius:22px;border:.5px solid rgba(255,255,255,.8);box-shadow:0 4px 24px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.7);z-index:9500}
  .mob-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer;color:#8E8E93;padding:4px 0 2px;-webkit-tap-highlight-color:transparent;transition:color .15s;outline:none;border-radius:22px}
  .mob-nav-btn.active{color:var(--purple)}
  .mob-nav-icon{width:24px;height:24px;flex-shrink:0}
  .mob-nav-label{font-size:10px;font-weight:500;letter-spacing:-.1px}
  .hq-mob-pages .scroll{padding-bottom:calc(max(env(safe-area-inset-bottom,0px),20px) + 88px);background:#F2F2F7}
  /* Section header in home */
  .hq-section-hdr{font-size:13px;font-weight:600;color:#6C6C70;padding:0 20px 8px;letter-spacing:.02em;text-transform:uppercase}

  /* ── WELCOME NAME - PartX purple ── */
  .hq-welcome-name{color:var(--purple)!important;font-weight:800}
  /* ── PERFORMANCE TAB SPACING ── */
  #hq-page-perf-m .scroll{padding-top:4px}
  #hq-page-perf-m .summary-row{margin:8px 16px 12px;gap:8px}
  #hq-page-perf-m .summary-chip{padding:10px 4px;border-radius:14px;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:.5px solid rgba(255,255,255,.6)}
  #hq-page-perf-m .section-title{padding:4px 20px 6px;font-size:12px;font-weight:600;color:#6C6C70;text-transform:uppercase;letter-spacing:.04em}
  /* ── BOTTOM NAV – pill indicator on active ── */
  .mob-nav-icon-bg{border-radius:14px;padding:5px 14px;margin-bottom:1px;transition:background .18s ease}
  .mob-nav-btn.active .mob-nav-icon-bg{background:rgba(107,63,160,.1)}
  /* ── SUB-SCREEN (DSE/Customer) BOTTOM NAV ── */
  .sub-mob-nav{display:flex;position:fixed;left:12px;right:12px;bottom:max(env(safe-area-inset-bottom,0px),20px);height:56px;background:rgba(255,255,255,.78);backdrop-filter:blur(32px) saturate(200%);-webkit-backdrop-filter:blur(32px) saturate(200%);border-radius:20px;border:.5px solid rgba(255,255,255,.8);box-shadow:0 4px 24px rgba(0,0,0,.12),0 1px 4px rgba(0,0,0,.06);z-index:9500}
  .sub-nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer;color:#8E8E93;padding:4px 0;-webkit-tap-highlight-color:transparent;transition:color .15s;border-radius:20px}
  .sub-nav-btn.active{color:var(--accent)}
  .sub-nav-icon{width:22px;height:22px;flex-shrink:0}
  .sub-nav-icon-bg{border-radius:12px;padding:4px 12px;transition:background .18s ease}
  .sub-nav-btn.active .sub-nav-icon-bg{background:rgba(0,0,0,.07)}
  .sub-nav-label{font-size:10px;font-weight:500;letter-spacing:-.1px}
  /* ── Prevent Android dark-mode inversion ── */
  :root{color-scheme:light}
  /* ── Force light background on ALL mobile scroll areas ── */
  #dse-scroll-m,#cust-scroll-m,
  #dse-content-m,#cust-content-m,
  #dse-tab-overview-m,#dse-tab-custs-m,#dse-tab-bills-m,#dse-tab-co-m,
  #dse-tab-returns-m,#dse-tab-tasks-m,#dse-tab-stock-m,#dse-tab-more-m,
  #cust-tab-overview-m,#cust-tab-bills-m,#cust-tab-co-m,
  #cust-tab-returns-m,#cust-tab-tasks-m,#cust-tab-stock-m,#cust-tab-more-m,#cust-tab-reminders-m{
    background:#F2F2F7!important
  }
  /* DSE/Customer customer list area */
  #dse-cust-list-m,#dse-cust-list-m .cust-card,#dse-home-grid-m{background:#F2F2F7!important}
  /* ── Content always above bottom nav ── */
  #dse-scroll-m,#cust-scroll-m,#dse-screen .scroll,#cust-screen .scroll{
    padding-bottom:calc(max(env(safe-area-inset-bottom,0px),20px) + 90px)!important
  }
  #dse-home-grid-m,#cust-home-grid-m{padding-bottom:calc(max(env(safe-area-inset-bottom,0px),20px) + 90px)}
  #dse-content-m>div,#cust-content-m>div{padding-bottom:90px!important}
  .sub-more-list{padding-bottom:calc(max(env(safe-area-inset-bottom,0px),20px) + 90px)!important}
  #co-detail-overlay>div{padding-bottom:calc(max(env(safe-area-inset-bottom,0px),20px) + 16px)!important}
  /* ── HQ-style More page for DSE / RO / Customer ── */
  .sub-more-list{overflow-y:auto;flex:1;padding:16px 14px calc(max(env(safe-area-inset-bottom,0px),20px) + 76px);background:#F2F2F7;display:flex;flex-direction:column;gap:0}
  .sub-more-section{background:rgba(255,255,255,.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;overflow:hidden;margin-bottom:20px;border:.5px solid rgba(255,255,255,.7)}
  .sub-more-item{display:flex;align-items:center;padding:clamp(11px,3vw,14px) 16px;border-bottom:.5px solid rgba(60,60,67,.1);cursor:pointer;gap:12px;-webkit-tap-highlight-color:transparent;min-height:50px;transition:background .12s}
  .sub-more-item:last-child{border-bottom:none}
  .sub-more-item:active{background:rgba(0,0,0,.05)}
  .sub-more-icon{width:34px;height:34px;border-radius:9px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .sub-more-label{flex:1;font-size:clamp(14px,4vw,16px);font-weight:400;color:#000;letter-spacing:-.2px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sub-more-arrow{color:#C7C7CC;font-size:17px;flex-shrink:0}
  /* ── Responsive nav labels ── */
  .sub-nav-label{font-size:clamp(9px,2.5vw,11px);font-weight:500;letter-spacing:-.1px}
  .sub-nav-icon-bg{border-radius:12px;padding:4px clamp(6px,2vw,12px);transition:background .18s ease}
  /* ── Responsive HQ nav labels ── */
  .mob-nav-label{font-size:clamp(9px,2.5vw,11px);font-weight:500;letter-spacing:-.1px}
  .sub-search-wrap{padding:12px 16px 8px;background:transparent}
  /* CO Create Modal */
  #co-create-overlay{z-index:500}
  .co-modal-title{font-size:17px;font-weight:700;color:#000;letter-spacing:-.4px}
  #co-part-suggestions{border-radius:12px;overflow:hidden}
  #co-part-suggestions div:active{background:#f0f2f6}
  .co-field-label{font-size:11px;font-weight:700;color:#6C6C70;text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
  .co-input{width:100%;border:1.5px solid rgba(60,60,67,.2);border-radius:12px;padding:11px 14px;font-size:15px;background:#fff;outline:none;box-sizing:border-box;-webkit-appearance:none;appearance:none}
  .co-input:focus{border-color:var(--purple)}
  .co-submit-btn{width:100%;background:var(--purple);color:#fff;border:none;padding:14px;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;margin-top:8px;-webkit-tap-highlight-color:transparent}
  .co-submit-btn:disabled{opacity:.5}
  .co-submit-btn:active{opacity:.85}
  /* ── SCREEN TRANSITION ANIMATIONS ── */
  @keyframes screenFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
  @keyframes cardIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
  @keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  @keyframes toastOut{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(16px)}}
  .screen:not(.hidden){animation:screenFadeIn .28s cubic-bezier(.4,0,.2,1)}
  .hq-home-card:nth-child(1){animation:cardIn .35s .04s cubic-bezier(.4,0,.2,1) both}
  .hq-home-card:nth-child(2){animation:cardIn .35s .08s cubic-bezier(.4,0,.2,1) both}
  .hq-home-card:nth-child(3){animation:cardIn .35s .12s cubic-bezier(.4,0,.2,1) both}
  .hq-home-card:nth-child(4){animation:cardIn .35s .16s cubic-bezier(.4,0,.2,1) both}
  .hq-home-card:nth-child(5){animation:cardIn .35s .20s cubic-bezier(.4,0,.2,1) both}
  .hq-home-card:nth-child(6){animation:cardIn .35s .24s cubic-bezier(.4,0,.2,1) both}
  .dse-card{transition:transform .15s cubic-bezier(.4,0,.2,1),opacity .1s ease;-webkit-tap-highlight-color:transparent}
  .dse-card:active{transform:scale(.97);opacity:.7}
  /* ── TOAST NOTIFICATION ── */
  #app-toast{position:fixed;left:50%;bottom:calc(max(env(safe-area-inset-bottom,0px),20px) + 96px);transform:translateX(-50%) translateY(16px);background:rgba(30,30,40,.92);color:#fff;padding:10px 20px;border-radius:24px;font-size:14px;font-weight:500;white-space:nowrap;z-index:9999;pointer-events:none;opacity:0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 4px 16px rgba(0,0,0,.25);letter-spacing:-.1px;transition:opacity .2s,transform .2s}
  #app-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
  /* ── DSE / RO / CUSTOMER – iOS 26 STYLE (mobile only) ── */
  #dse-screen .hdr,#cust-screen .hdr{background:rgba(242,242,247,.94)!important;backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border-bottom:.5px solid rgba(60,60,67,.12);padding:14px 20px;padding-top:max(env(safe-area-inset-top,0px),14px)!important}
  #dse-screen .hdr-title,#cust-screen .hdr-title{color:#000!important;font-size:17px;font-weight:700;letter-spacing:-.5px}
  #dse-screen .hdr-sub,#cust-screen .hdr-sub{color:#6C6C70!important}
  #dse-screen .hdr-btn,#cust-screen .hdr-btn{background:none!important;border:none!important;color:var(--purple)!important;font-size:14px;font-weight:500;padding:6px 10px;border-radius:10px;font-size:14px}
  #dse-screen .chip-row,#cust-screen .chip-row{background:rgba(242,242,247,.95)!important;border-bottom:.5px solid rgba(60,60,67,.09)}
  #dse-screen .chip:not(.active),#cust-screen .chip:not(.active){color:rgba(60,60,67,.75)!important;background:rgba(118,118,128,.12)!important;border:none!important;font-size:12px}
  #dse-screen .chip.active,#cust-screen .chip.active{color:#fff!important;font-weight:600;background:var(--accent)!important}
  #dse-screen .search-wrap,#cust-screen .search-wrap{background:rgba(242,242,247,.95)!important;border-bottom:.5px solid rgba(60,60,67,.09)!important}
  #dse-screen .search-input,#cust-screen .search-input{background:#fff!important;border:1px solid rgba(60,60,67,.12)!important;color:#000!important}
  #dse-screen .scroll,#cust-screen .scroll{background:#F2F2F7!important}
  /* Cards — covers both .card and .cust-card and .dse-card */
  #dse-screen .card,#cust-screen .card,
  #dse-screen .cust-card,#cust-screen .cust-card,
  #dse-screen .dse-card,#cust-screen .dse-card{
    background:#fff!important;
    border-radius:14px!important;
    border:.5px solid rgba(0,0,0,.06)!important;
    box-shadow:0 1px 6px rgba(0,0,0,.06)!important;
    margin-bottom:10px
  }
  /* Desktop tab sections: override backdrop for cards in tab content */
  @media (min-width:900px){
    #dse-tab-bills .card,#dse-tab-co .card,#dse-tab-returns .card,#dse-tab-tasks .card,
    #cust-tab-bills .card,#cust-tab-co .card,#cust-tab-returns .card,#cust-tab-tasks .card
    {background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:10px!important;border:1px solid #e8eaef!important}
    #dse-tab-overview, #cust-tab-overview {animation:screenFadeIn .25s cubic-bezier(.4,0,.2,1)}
  }
  #dse-screen .section-title,#cust-screen .section-title{color:#6C6C70!important;padding-left:4px}

  /* ── DESKTOP (≥900px): sidebar + main pane layout ── */
  @media (min-width: 900px) {
    body { background: #1e1f2e; overflow: hidden; }
    #app { flex-direction: row; height: 100vh; }
    .screen { flex-direction: row; background: transparent; height: 100vh; }

    /* Show desktop elements hidden on mobile */
    .topbar { display: flex !important; }
    .filter-strip { display: flex !important; }
    .main-scroll { display: block !important; overflow-y: auto !important; }
    .stat-strip { display: grid !important; }
    .section-hdr { display: flex !important; }
    .tb-btn, .tb-search { display: inline-flex !important; }
    .desktop-tab { display: inline-block !important; }
    /* Show desktop, hide ALL mobile-only elements */
    .sidebar { display: flex !important; }
    /* HQ's legacy sidebar is intentionally hidden in favour of .topnav-bar
       (see below) — needs its own !important + id selector to actually win
       against the desktop-mode ".sidebar{display:flex!important}" rule
       above; a plain inline style or a class-level override can't beat that. */
    #hq-sidebar-legacy { display: none !important; }
    /* Same fix as above, for the HQ title bar (now redundant with the
       topnav dropdowns + favourites row) — needs id + !important to beat
       ".topbar{display:flex!important}". */
    #hq-topbar { display: none !important; }
    .main-pane { display: flex !important; }
    /* Hide every element whose ID ends in -m (mobile-only) */
    [id$="-m"] { display: none !important; }
    .hq-mob-topbar,.mob-bottom-nav,.hq-mob-pages,.sub-mob-nav { display: none !important; }
    /* Also hide the mobile .hdr/.chip-row/.tab-bar/.search-wrap (already done by rule below) */

    /* ── SIDEBAR ── */
    .sidebar {
      width: 230px; flex-shrink: 0;
      display: flex; flex-direction: column;
      height: 100vh; overflow: hidden;
      background: inherit; /* inherits accent from screen */
    }
    /* ── SIDEBAR – redesigned ── */
    .sidebar-hdr {
      padding: 24px 18px 18px; color: #fff; flex-shrink: 0;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .sidebar-brand {
      font-size: 22px; font-weight: 900; letter-spacing: -.8px;
      background: rgba(255,255,255,.95); -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; background-clip: text;
    }
    .sidebar-brand-sub { font-size: 10.5px; color: rgba(255,255,255,.5); margin-top: 3px; font-weight: 400; line-height: 1.4; }
    .sidebar-updated {
      font-size: 10px; color: rgba(255,255,255,.35); margin-top: 8px;
      display: flex; align-items: center; gap: 4px;
    }
    .sidebar-nav { flex: 1; overflow-y: auto; padding: 10px 10px 6px; scrollbar-width: none; }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .sidebar-section-label {
      font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
      color: rgba(255,255,255,.3); padding: 14px 10px 4px;
    }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 10px; cursor: pointer;
      color: rgba(255,255,255,.65); font-size: 13px; font-weight: 500;
      transition: all .15s; margin-bottom: 1px;
      border: none; background: transparent; width: 100%; text-align: left;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-item:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.95); }
    .nav-item.active {
      background: rgba(255,255,255,.15); color: #fff; font-weight: 700;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }
    .nav-icon { width: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .8; }
    .nav-item.active .nav-icon { opacity: 1; }
    .nav-badge { margin-left: auto; background: rgba(255,255,255,.18); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; color: rgba(255,255,255,.9); }
    .nav-fav-star { margin-left: auto; flex-shrink: 0; opacity: .3; font-size: 13px; line-height: 1; padding: 3px 5px; border-radius: 6px; }
    .nav-fav-star:hover { opacity: .85; background: rgba(255,255,255,.12); }
    .nav-fav-star.active { opacity: 1; color: #FFD54A; }
    .sidebar-fav-hint { padding: 2px 10px 10px; font-size: 10.5px; line-height: 1.4; color: rgba(255,255,255,.32); }
    .sidebar-divider { height: 1px; background: rgba(255,255,255,.07); margin: 6px 8px; }
    .sidebar-footer {
      padding: 10px 10px 14px; flex-shrink: 0;
      border-top: 1px solid rgba(255,255,255,.07);
    }
    .sidebar-action-btn {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 9px 10px; border-radius: 10px; border: none;
      background: rgba(255,255,255,.07); color: rgba(255,255,255,.65);
      font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: left;
      transition: all .15s; margin-bottom: 4px;
    }
    .sidebar-action-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

    /* ── TOP NAV (replaces sidebar for HQ desktop) ──
       .sidebar itself stays in the DOM (display:none, #hq-sidebar-legacy) so
       it can come back later as a user-chosen layout option — this is a
       purely visual swap, all the underlying hqSetTab()/fav logic is shared. */
    .topnav-bar {
      display: flex !important; align-items: center; gap: 18px;
      padding: 0 20px; height: 56px; flex-shrink: 0;
      box-shadow: 0 2px 10px rgba(0,0,0,.12);
      position: relative; z-index: 20;
    }
    .topnav-brand {
      font-size: 18px; font-weight: 900; letter-spacing: -.6px; color: #fff;
      flex-shrink: 0;
    }
    .topnav-groups { display: flex; align-items: center; gap: 2px; flex: 1; }
    .topnav-group { position: relative; }
    .topnav-group-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 8px 14px; border-radius: 9px; border: none; background: transparent;
      color: rgba(255,255,255,.75); font-size: 13.5px; font-weight: 600;
      cursor: pointer; transition: all .15s;
    }
    .topnav-caret { font-size: 9px; opacity: .7; transition: transform .15s; }
    .topnav-group-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
    /* Visibility is driven ONLY by the JS-controlled .open class (mouseenter/
       mouseleave/click in main.js) — deliberately NOT a plain ":hover" rule.
       A live :hover rule can't be force-closed: since the dropdown sits
       inside .topnav-group, clicking an item inside it means the cursor is
       still physically over the group at that instant, so closeTopnavGroups()
       removing .open had no visible effect until the mouse later moved away
       — that's the "dropdown stays open after picking a module" bug. */
    .topnav-group.open .topnav-group-btn { background: rgba(255,255,255,.16); color: #fff; }
    .topnav-group.open .topnav-caret { transform: rotate(180deg); }
    .topnav-dropdown {
      position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px;
      background: #fff; border-radius: 12px; padding: 8px;
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
      opacity: 0; visibility: hidden; transform: translateY(-6px);
      transition: opacity .15s, transform .15s, visibility .15s;
      z-index: 30;
    }
    .topnav-group.open .topnav-dropdown {
      opacity: 1; visibility: visible; transform: translateY(0);
    }
    /* dropdown items reuse .nav-item, but on a white surface not the purple sidebar */
    .topnav-dropdown .nav-item { color: #444; }
    .topnav-dropdown .nav-item:hover { background: #f3f1fb; color: var(--purple); }
    .topnav-dropdown .nav-item.active { background: #ece8fb; color: var(--purple); box-shadow: none; }
    .topnav-dropdown .nav-fav-star { opacity: .35; }
    .topnav-dropdown .nav-fav-star:hover { opacity: .9; background: rgba(0,0,0,.06); }
    .topnav-right { display: flex; gap: 8px; flex-shrink: 0; }
    .topnav-right .tb-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
    .topnav-right .tb-btn:hover { background: rgba(255,255,255,.18); }
    /* Module search — finds any Views/Tools/Accounts/Admin item by name,
       for when a module has moved into a dropdown a user doesn't expect. */
    .topnav-search { position: relative; }
    .topnav-search-input {
      width: 190px; padding: 7px 12px; border-radius: 8px;
      border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1);
      color: #fff; font-size: 13px; outline: none;
      transition: width .15s, background .15s, border-color .15s;
    }
    .topnav-search-input::placeholder { color: rgba(255,255,255,.55); }
    .topnav-search-input:focus { width: 260px; background: #fff; border-color: #fff; color: #222; }
    .topnav-search-input:focus::placeholder { color: #999; }
    .topnav-search-results {
      position: absolute; top: calc(100% + 8px); right: 0; width: 280px; max-height: 360px; overflow-y: auto;
      background: #fff; border-radius: 12px; padding: 6px;
      box-shadow: 0 12px 32px rgba(0,0,0,.18);
      display: none; z-index: 40;
    }
    .topnav-search-results.show { display: block; }
    .topnav-search-results .nav-item { color: #444; }
    .topnav-search-results .nav-item:hover { background: #f3f1fb; color: var(--purple); }
    .topnav-search-empty { padding: 10px 12px; font-size: 13px; color: #999; }

    .topnav-favs-row {
      display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap;
      padding: 8px 20px; background: #fff; border-bottom: 1px solid #e8eaef; flex-shrink: 0;
    }
    .topnav-favs-row:has(.sidebar-fav-hint) { display: none !important; } /* nothing pinned yet — no empty bar */
    .topnav-favs-label {
      font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px;
      color: #999; flex-shrink: 0;
    }
    .topnav-favs-list { display: flex; gap: 6px; flex-wrap: wrap; }
    .topnav-favs-list .nav-item {
      width: auto; padding: 6px 12px; border-radius: 20px;
      background: #f3f1fb; color: var(--purple); margin-bottom: 0;
    }
    .topnav-favs-list .nav-item:hover { background: #ece8fb; }
    .topnav-favs-list .nav-fav-star { display: none; } /* unpin from the group dropdown instead — keeps this row compact */

    /* HQ screen now stacks top-nav above the content instead of sidebar
       beside it — scoped to #hq-screen only so DSE/Customer/Settings
       screens keep their existing sidebar layout untouched. */
    #hq-screen.screen { flex-direction: column; }
    #hq-screen .topnav-bar ~ .main-pane {
      border-radius: 0; margin: 0; box-shadow: none;
    }

    /* ── MAIN PANE ── */
    .main-pane {
      flex: 1; display: flex; flex-direction: column;
      background: #f0f2f7; overflow: hidden;
      border-radius: 16px 0 0 16px;
      margin: 10px 0 10px 0;
      box-shadow: -6px 0 30px rgba(0,0,0,.15);
    }

    /* Topbar */
    .topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 28px; height: 60px; background: #fff;
      border-bottom: 1px solid #e8eaef; flex-shrink: 0;
    }
    .topbar-left { display: flex; align-items: center; gap: 14px; flex: 1; }
    .topbar-title { font-size: 17px; font-weight: 700; color: #111; }
    .topbar-right { display: flex; gap: 8px; align-items: center; }
    .tb-btn {
      padding: 7px 14px; border-radius: 8px; border: 1.5px solid #e0e2e8;
      background: #fff; font-size: 13px; font-weight: 600; color: #444;
      cursor: pointer; transition: all .12s; display: flex; align-items: center; gap: 6px;
    }
    .tb-btn:hover { background: #f5f6fa; border-color: #ccc; }
    .tb-search {
      padding: 7px 14px 7px 36px; border: 1.5px solid #e0e2e8;
      border-radius: 8px; font-size: 13px; color: #333;
      outline: none; background: #f8f9fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.099zm-5.242 1.156a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E") no-repeat 12px center;
      width: 240px; transition: border-color .12s, width .2s;
    }
    .tb-search:focus { border-color: var(--accent); background-color: #fff; width: 300px; }

    /* Filter strip */
    .filter-strip {
      display: flex; align-items: center; gap: 6px;
      padding: 8px 28px; background: #fff;
      border-bottom: 1px solid #e8eaef; flex-shrink: 0;
      flex-wrap: wrap;
    }
    .fs-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: #aaa; margin-right: 2px; }
    .fs-chip {
      padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 500;
      border: 1.5px solid #e0e2e8; background: #fff; color: #555; cursor: pointer;
      transition: all .12s; white-space: nowrap;
    }
    .fs-chip:hover { border-color: var(--accent); color: var(--accent); }
    .fs-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
    .fs-sep { width: 1px; height: 18px; background: #e0e2e8; margin: 0 4px; flex-shrink: 0; }

    /* Main scrollable area */
    .main-scroll {
      flex: 1; overflow-y: auto; padding: 24px 28px;
      scrollbar-width: thin; scrollbar-color: #ccc transparent;
    }
    .main-scroll::-webkit-scrollbar { width: 5px; }
    .main-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

    /* Stat strip */
    .stat-strip { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 22px; }
    .stat-card {
      background: #fff; border-radius: 10px; padding: 18px 20px;
      box-shadow: 0 1px 3px rgba(0,0,0,.05); border: 1px solid #e8eaef;
      transition: box-shadow .15s;
    }
    .stat-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); }
    .stat-val { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1.1; }
    .stat-label { font-size: 12px; color: #888; margin-top: 4px; font-weight: 500; }

    /* Content grid */
    .content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px,1fr)); gap: 12px; }
    .content-grid .dse-card, .content-grid .cust-card { margin-bottom: 0; }

    /* Section header */
    .section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .section-hdr-title { font-size: 15px; font-weight: 700; color: #222; }

    /* Tabs in topbar */
    .desktop-tabs { display: flex; gap: 2px; }
    .desktop-tab {
      padding: 6px 16px; border-radius: 7px; font-size: 13px; font-weight: 600;
      border: none; cursor: pointer; background: transparent; color: #777;
      transition: all .12s;
    }
    .desktop-tab:hover { background: #f0f2f7; color: var(--accent); }
    .desktop-tab.active { background: var(--accent); color: #fff; }

    /* Hide mobile nav elements */
    .hdr, .chip-row, .tab-bar, .search-wrap { display: none !important; }

    /* Login */
    #login-screen { flex-direction: column !important; background: #1e1f2e; }
    .login-scroll { background: transparent; }
    .login-inner {
      background: #fff; padding: 44px 48px; border-radius: 16px;
      box-shadow: 0 12px 50px rgba(0,0,0,.25); max-width: 440px;
    }
    .login-title { font-size: 36px; }

    /* Settings side by side */
    #settings-screen .main-scroll { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
    .settings-section { flex: 1; min-width: 280px; margin-bottom: 0; }

    /* Report */
    .report-table { width: 100%; font-size: 12px; }
    .report-table th, .report-table td { padding: 8px 10px; }

    /* Card in main pane */
    .card { border: 1px solid #e8eaef; }

    /* Mobile summary-row becomes stat-strip on desktop — hide old one */
    .summary-row { display: none !important; }
  }

  @media (min-width: 1280px) {
    .sidebar { width: 250px; }
    .main-scroll { padding: 26px 36px; }
    .topbar { padding: 0 36px; }
    .filter-strip { padding: 8px 36px; }
    .stat-strip { gap: 16px; }
    .content-grid { grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); }
    #mp-overlay { left: 250px !important; }
  }
  @media (min-width: 1600px) {
    .sidebar { width: 270px; }
    .content-grid { grid-template-columns: repeat(auto-fill, minmax(360px,1fr)); }
    .stat-val { font-size: 30px; }
    #mp-overlay { left: 270px !important; }
  }
  /* Make Payment overlay: on desktop stays to the right of the sidebar */
  @media (min-width: 900px) {
    #mp-overlay { left: 230px !important; border-radius: 16px 0 0 16px; top: 10px !important; bottom: 10px !important; }
    #mp-header { padding-left: 28px; padding-right: 28px; border-radius: 16px 0 0 0; border-top-right-radius: 0; }
  }

  /* ── BIGGER UI: bill/CO filter sections ── */
  #dse-bills-section, #dse-bills-section-m,
  #cust-bills-section, #cust-bills-section-m,
  #dse-co-section, #dse-co-section-m,
  #cust-co-section, #cust-co-section-m {
    font-size: 14px;
  }
  #dse-bills-section input, #dse-bills-section-m input,
  #cust-bills-section input, #cust-bills-section-m input {
    font-size: 14px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
  }
  #dse-bills-section button, #dse-bills-section-m button,
  #cust-bills-section button, #cust-bills-section-m button {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* Small mobile tweaks */
  @media (max-width: 360px) {
    .hdr-btn { padding: 5px 8px; font-size: 11px; }
    .summary-val { font-size: 14px; }
    .chip { padding: 4px 9px; font-size: 11px; }
  }