: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 { 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),8px) + 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),8px) + 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}
  /* 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),8px);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:200}
  .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),8px) + 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),8px);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:150}
  .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}
  #dse-screen .scroll,#cust-screen .scroll{padding-bottom:calc(max(env(safe-area-inset-bottom,0px),8px) + 72px)!important}
  .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),8px) + 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}
  #dse-screen .card,#cust-screen .card{background:rgba(255,255,255,.85)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px!important;border:.5px solid rgba(255,255,255,.65)!important}
  /* 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; }
    .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-hdr { padding: 22px 20px 16px; color: #fff; flex-shrink: 0; }
    .sidebar-brand { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
    .sidebar-brand-sub { font-size: 11px; opacity: .6; margin-top: 1px; font-weight: 400; }
    .sidebar-updated { font-size: 10px; opacity: .5; margin-top: 8px; }
    .sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 10px 8px; scrollbar-width: none; }
    .sidebar-nav::-webkit-scrollbar { display: none; }
    .sidebar-section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); padding: 14px 10px 5px; }
    .nav-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 12px; border-radius: 8px; cursor: pointer;
      color: rgba(255,255,255,.7); font-size: 13px; font-weight: 500;
      transition: background .12s, color .12s; margin-bottom: 2px;
      border: none; background: transparent; width: 100%; text-align: left;
    }
    .nav-item:hover { background: rgba(255,255,255,.12); color: #fff; }
    .nav-item.active { background: rgba(255,255,255,.18); color: #fff; font-weight: 700; }
    .nav-icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
    .nav-badge { margin-left: auto; background: rgba(255,255,255,.15); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 10px; color: rgba(255,255,255,.85); }
    .sidebar-divider { height: 1px; background: rgba(255,255,255,.1); margin: 8px 10px; }
    .sidebar-footer { padding: 12px 10px 16px; flex-shrink: 0; }
    .sidebar-action-btn {
      display: flex; align-items: center; gap: 8px;
      width: 100%; padding: 9px 12px; border-radius: 8px; border: none;
      background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
      font-size: 13px; font-weight: 500; cursor: pointer; text-align: left;
      transition: background .12s; margin-bottom: 4px;
    }
    .sidebar-action-btn:hover { background: rgba(255,255,255,.16); color: #fff; }

    /* ── 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)); }
  }
  @media (min-width: 1600px) {
    .sidebar { width: 270px; }
    .content-grid { grid-template-columns: repeat(auto-fill, minmax(360px,1fr)); }
    .stat-val { font-size: 30px; }
  }

  /* ── 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; }
  }