/* =========================
       THEME TOKENS
       ========================= */
    :root{
      --bg0: #0b1220;
      --bg1: #0f172a;
      --bg2: #111827;

      --card: rgba(255,255,255,0.08);
      --card2: rgba(255,255,255,0.10);
      --border: rgba(255,255,255,0.14);
      --border2: rgba(255,255,255,0.18);

      --text: rgba(255,255,255,0.92);
      --muted: rgba(255,255,255,0.64);

      --shadow: 0 22px 60px rgba(0,0,0,0.35);
      --shadow2: 0 12px 26px rgba(0,0,0,0.26);

      --radius: 18px;
      --radius2: 14px;

      --chip: rgba(255,255,255,0.10);
      --chipBorder: rgba(255,255,255,0.18);

      --btn: rgba(255,255,255,0.14);
      --btnBorder: rgba(255,255,255,0.22);

      --accent: #22c55e;
      --danger: #ef4444;
      --focus: rgba(59,130,246,0.45);
      --status-blacklist: #f87171;
      --status-priority: #4ade80;
      --status-draft: #fde68a;
      --status-draft-deleted: #fca5a5;
    }

    /* Light mode overrides */
    [data-theme="light"]{
      --bg0:#eef2ff;
      --bg1:#f8fafc;
      --bg2:#ffffff;

      --card: rgba(255,255,255,0.72);
      --card2: rgba(255,255,255,0.86);
      --border: rgba(15,23,42,0.10);
      --border2: rgba(15,23,42,0.14);

      --text: rgba(15,23,42,0.92);
      --muted: rgba(15,23,42,0.60);

      --shadow: 0 18px 48px rgba(2,6,23,0.12);
      --shadow2: 0 10px 22px rgba(2,6,23,0.10);

      --chip: rgba(15,23,42,0.06);
      --chipBorder: rgba(15,23,42,0.12);

      --btn: rgba(15,23,42,0.06);
      --btnBorder: rgba(15,23,42,0.14);
      --status-blacklist: #dc2626;
      --status-priority: #15803d;
      --status-draft: #b45309;
      --status-draft-deleted: #dc2626;
    }

    /* =========================
       BACKGROUND + BASE
       ========================= */
    html, body { height: 100%; }
    *, *::before, *::after { box-sizing: border-box; }
    body{
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(1200px 700px at 20% 10%, rgba(34,197,94,0.22), transparent 55%),
        radial-gradient(900px 600px at 85% 15%, rgba(59,130,246,0.22), transparent 55%),
        radial-gradient(1000px 700px at 55% 95%, rgba(168,85,247,0.18), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1) 55%, var(--bg2));
      overflow-x: hidden;
    }

    /* soft grain */
    .grain{
      pointer-events:none;
      position: fixed;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      mix-blend-mode: overlay;
      opacity: .30;
    }

    .page{
      max-width: 1220px;
      margin: 18px auto;
      padding: 0 14px 18px;
    }

    /* =========================
       GLASS CONTAINERS
       ========================= */
    .glass{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .topbar{
      padding: 12px;
    }

    h2{
      margin: 10px 0 12px;
      font-size: 20px;
      letter-spacing: .2px;
      display:flex;
      align-items:center;
      gap:10px;
      justify-content:space-between;
    }

    .brandLeft{
      display:flex;
      align-items:center;
      gap:10px;
      font-weight: 800;
    }
    .brandDot{
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(34,197,94,0.12);
    }

    .headerRight{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }

    .miniChip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--chipBorder);
      background: var(--chip);
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      box-shadow: var(--shadow2);
      user-select:none;
    }

    .miniBtn{
      border: 1px solid var(--btnBorder);
      background: var(--btn);
      color: var(--text);
      border-radius: 12px;
      padding: 8px 10px;
      cursor:pointer;
      box-shadow: var(--shadow2);
      user-select:none;
      font-weight: 800;
      display:inline-flex;
      gap:8px;
      align-items:center;
    }
    .miniBtn:hover{ filter: brightness(1.06); }
    .miniBtn:active{ transform: translateY(1px); }
    .miniBtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }

    .miniBtn.danger{
      border-color: rgba(239,68,68,0.35);
      background: rgba(239,68,68,0.12);
      color: rgba(255,255,255,0.95);
    }
    [data-theme="light"] .miniBtn.danger{
      color: rgba(15,23,42,0.95);
    }

    /* =========================
       FILTER ROW
       ========================= */
    .row{
      display:flex;
      gap:10px;
      align-items:center;
      flex-wrap:wrap;
    }

    label{
      font-size: 13px;
      color: var(--muted);
      font-weight: 800;
    }

    select, input{
      padding: 10px 10px;
      border: 1px solid var(--border2);
      border-radius: 12px;
      background: rgba(255,255,255,0.08);
      color: var(--text);
      outline: none;
      font-size: 14px;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    [data-theme="light"] select,
    [data-theme="light"] input{
      background: rgba(255,255,255,0.8);
      color: var(--text);
    }

    select:disabled, input:disabled{
      opacity: .55;
      cursor: not-allowed;
    }

    select:focus, input:focus{
      box-shadow: 0 0 0 4px var(--focus);
      border-color: rgba(59,130,246,0.45);
    }

    .btn{
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid var(--btnBorder);
      background: rgba(255,255,255,0.12);
      color: var(--text);
      cursor: pointer;
      font-weight: 900;
      box-shadow: var(--shadow2);
      user-select:none;
    }
    .btn:hover{ filter: brightness(1.06); }
    .btn:disabled{
      opacity: .5;
      cursor: not-allowed;
      box-shadow: none;
    }

    .pillBtn{
      border: 1px solid var(--chipBorder);
      background: var(--chip);
      border-radius: 999px;
      padding: 9px 10px;
      cursor: pointer;
      font-size: 13px;
      user-select: none;
      display: inline-flex;
      gap: 8px;
      align-items: center;
      box-shadow: var(--shadow2);
      font-weight: 900;
      color: var(--text);
    }
    .pillBtn:hover{ filter: brightness(1.06); }
    .pillBtn .dot{
      width: 10px; height: 10px; border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.25);
      background: var(--accent);
    }
    [data-theme="light"] .pillBtn .dot{
      border-color: rgba(15,23,42,0.25);
    }
    .pillBtn.off{ background: rgba(255,255,255,0.08); }
    .pillBtn.off .dot{ background: #9ca3af; }
    .pillBtn .state{ color: var(--muted); font-weight: 900; }

    #status{
      font-size: 13px;
      color: #14532d;
      margin-left: auto;
      white-space: nowrap;
      font-weight: 800;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(34,197,94,0.55);
      background: rgba(34,197,94,0.28);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    [data-theme="light"] #status{
      color: #166534;
      border-color: rgba(22,163,74,0.45);
      background: rgba(34,197,94,0.20);
    }
    [data-theme="dark"] #status{
      color: #dcfce7;
      border-color: rgba(34,197,94,0.45);
      background: rgba(22,163,74,0.26);
    }

    #legend{
      position: absolute;
      left: 16px;
      bottom: 16px;
      z-index: 700;
      font-size: 13px;
      color: var(--text);
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: min(78%, 920px);
      padding: 10px 12px;
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,0.24);
      background: rgba(255,255,255,0.10);
      box-shadow: 0 14px 34px rgba(0,0,0,0.26);
      backdrop-filter: blur(16px) saturate(130%);
      -webkit-backdrop-filter: blur(16px) saturate(130%);
      transition: width .24s ease, padding .24s ease, border-radius .24s ease, background .24s ease;
    }
    #legend.legend-empty{
      display: none;
    }
    #legend:empty{
      display: none;
    }
    #legend.legend-collapsed{
      padding: 0;
      gap: 0;
      border: none;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #legend .legendList{
      display: flex;
      gap: 8px 10px;
      flex-wrap: wrap;
      align-items: center;
      max-width: 100%;
      max-height: 86px;
      overflow-y: auto;
      overflow-x: hidden;
      transition: max-width .24s ease, opacity .24s ease, transform .24s ease;
    }
    #legend.legend-collapsed .legendList{
      max-width: 0;
      max-height: 0;
      opacity: 0;
      transform: translateX(-8px);
      pointer-events: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 0;
    }
    .legendToggle{
      border: 1px solid rgba(255,255,255,0.30);
      background: rgba(255,255,255,0.10);
      color: var(--text);
      border-radius: 999px;
      min-height: 36px;
      min-width: 36px;
      padding: 6px 12px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.22);
      transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
      position: relative;
      overflow: hidden;
    }
    .legendToggle:hover{ background: rgba(255,255,255,0.16); }
    .legendToggle:active{ transform: scale(.97); }
    .legendToggle::after{
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: radial-gradient(circle at center, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.0) 62%);
      opacity: 0;
      transform: scale(.7);
      transition: opacity .22s ease, transform .22s ease;
      pointer-events: none;
    }
    .legendToggle.tap-pop::after{
      opacity: 1;
      transform: scale(1.28);
    }
    .legendToggleDot{
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.5);
      background: rgba(255,255,255,0.9);
      box-shadow: 0 0 0 6px rgba(255,255,255,0.10);
      flex: 0 0 auto;
    }
    .legendToggleTxt{
      font-size: 13px;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
    }
    #legend.legend-collapsed .legendToggleTxt{
      display: none;
    }
    #legend.legend-collapsed .legendToggle{
      width: 46px;
      height: 46px;
      min-width: 46px;
      min-height: 46px;
      padding: 0;
      border-radius: 999px;
      gap: 0;
    }
    #legend.legend-collapsed .legendToggleDot{
      width: 18px;
      height: 18px;
      box-shadow: 0 0 0 3px rgba(255,255,255,0.86), 0 0 0 6px rgba(255,255,255,0.16);
    }
    .legItem{
      display:flex;
      gap:7px;
      align-items:center;
      background: rgba(255,255,255,0.07);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 999px;
      padding: 5px 10px;
      white-space: nowrap;
      font-size: 13px;
      font-weight: 800;
    }
    .dotLegend{
      width:10px; height:10px; border-radius:50%;
      display:inline-block;
      border:1px solid rgba(255,255,255,0.18);
    }
    [data-theme="light"] .dotLegend{
      border-color: rgba(15,23,42,0.18);
    }

    /* =========================
       LAYOUT: 2 cards + map below
       ========================= */
    .grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-top: 14px;
    }

    .card{
      padding: 14px;
      min-height: 150px;
      position: relative;
      min-width: 0;
    }

    .cardHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom: 10px;
    }
    .avgHeadLeft{
      display:flex;
      flex-direction: column;
      align-items:flex-start;
      gap:8px;
    }
    .avgDataBtn{
      padding: 7px 10px;
      font-size: 12px;
      border-radius: 10px;
    }
    .cardHead b{
      font-size: 15px;
      letter-spacing: .2px;
      font-weight: 900;
    }
    #avgCard .cardHead,
    #visitCard .cardHead{
      padding-right: 58px;
    }
    #avgCard #btnFsAvg{
      position: absolute;
      right: 14px;
      top: 14px;
      z-index: 3;
    }
    #visitHeadActions{
      position: absolute;
      right: 14px;
      top: 14px;
      z-index: 3;
      display:flex;
      flex-direction:column;
      gap:8px;
      align-items:flex-end;
    }
    #visitCard .filterRow{
      margin-top: 27px;
    }

    .btnIcon{
      border: 1px solid var(--btnBorder);
      background: rgba(255,255,255,0.10);
      width: 38px;
      height: 38px;
      border-radius: 14px;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:center;
      box-shadow: var(--shadow2);
      user-select:none;
      color: var(--text);
    }
    .btnIcon:hover{ filter: brightness(1.06); }

    .muted{ color: var(--muted); }

    .pill{
      display:inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--chipBorder);
      font-size: 12px;
      background: var(--chip);
      color: var(--muted);
      font-weight: 900;
    }

    .cardBodyGrow{
      overflow: auto;
      max-height: 280px;
      width: 100%;
      -webkit-overflow-scrolling: touch;
    }

    /* Visits filter row */
    .filterRow{
      display:flex;
      gap: 8px;
      align-items:center;
      flex-wrap:wrap;
      margin-bottom: 8px;
      justify-content: center;
    }
    #visitSearch{
      flex: 1 1 calc(100% - 62px);
      width: auto;
      max-width: min(520px, calc(100% - 62px));
      min-width: 220px;
    }
    .xBtn{
      border: 1px solid var(--btnBorder);
      border-radius: 12px;
      padding: 9px 0;
      width: 46px;
      flex: 0 0 46px;
      background: rgba(255,255,255,0.10);
      color: var(--text);
      cursor:pointer;
      box-shadow: var(--shadow2);
      font-weight: 900;
      user-select:none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .xBtn:hover{ filter: brightness(1.06); }
    .hint{ font-size: 12px; color: var(--muted); font-weight: 800; }
    .filterRow .pill,
    .filterRow .hint{
      flex: 0 0 100%;
      width: 100%;
      text-align: center;
    }
    .unknownTools{
      display:flex;
      align-items:center;
      gap:6px;
      margin-top:6px;
    }
    .unknownBtn{
      border: 1px solid var(--btnBorder);
      background: rgba(255,255,255,0.10);
      color: var(--text);
      border-radius: 9px;
      padding: 4px 7px;
      font-size: 12px;
      font-weight: 800;
      cursor: pointer;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .unknownBtn:hover{ filter: brightness(1.08); }
    .unknownBtn.danger{
      border-color: rgba(248,113,113,0.65);
      background: rgba(239,68,68,0.18);
      color: #fecaca;
    }
    .unknownBtn.disabled{
      opacity: .55;
      cursor: not-allowed;
      pointer-events: none;
      filter: grayscale(0.3);
    }
    .unknownDraft{
      margin-top: 6px;
      font-size: 12px;
      color: var(--status-draft);
      font-weight: 800;
    }
    .unknownDraft.deleted{
      color: var(--status-draft-deleted);
    }
    .unknownDraft.priority{
      color: var(--status-priority);
    }
    .tokoStatusBlacklist{
      color: var(--status-blacklist) !important;
    }
    .tokoStatusPriority{
      color: var(--status-priority) !important;
    }
    .unknownSaveBar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin: 8px 0 10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(34,197,94,0.55);
      background: linear-gradient(180deg, rgba(16,185,129,0.15), rgba(6,95,70,0.18));
    }
    .unknownSaveLeft{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .unknownSaveInfo{
      color: #dcfce7;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .2px;
    }
    .unknownSaveBtn{
      border: 1px solid rgba(34,197,94,0.85);
      background: linear-gradient(180deg, rgba(34,197,94,0.38), rgba(22,163,74,0.32));
      color: #ecfdf5;
      border-radius: 11px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: var(--shadow2);
    }
    .unknownRouteBtn{
      border: 1px solid rgba(59,130,246,0.85);
      background: linear-gradient(180deg, rgba(59,130,246,0.36), rgba(37,99,235,0.30));
      color: #eff6ff;
      border-radius: 11px;
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 900;
      cursor: pointer;
      box-shadow: var(--shadow2);
    }
    .unknownSaveBtn:hover{ filter: brightness(1.08); }
    .unknownRouteBtn:hover{ filter: brightness(1.08); }
    .unknownSaveBtn:disabled{
      cursor: not-allowed;
      opacity: .78;
      filter: saturate(.7);
    }
    .unknownRouteBtn:disabled{
      cursor: not-allowed;
      opacity: .78;
      filter: saturate(.7);
    }
    .unknownSaveActions{
      display:flex;
      align-items:center;
      gap: 50px;
    }
    @media (max-width: 720px){
      .unknownSaveActions{ gap: 14px; }
    }
    .unknownProgressWrap{
      width: 180px;
      max-width: 42vw;
      height: 8px;
      border-radius: 999px;
      background: rgba(15,23,42,0.45);
      border: 1px solid rgba(34,197,94,0.35);
      overflow: hidden;
    }
    .unknownProgressBar{
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #22c55e, #4ade80);
      transition: width .2s ease;
    }
    .unknownProgressText{
      color: #86efac;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .2px;
    }
    .unknownModal{
      position: fixed;
      inset: 0;
      z-index: 100006;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(2,6,23,0.64);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      padding: 18px;
    }
    .unknownModal.on{ display: flex; }
    .unknownModalCard{
      width: min(520px, calc(100vw - 30px));
      border-radius: 16px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(30,41,59,0.9));
      box-shadow: var(--shadow1);
      padding: 14px;
      overflow: hidden;
    }
    [data-theme="light"] .unknownModalCard{
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.96));
    }
    .unknownModalTitle{
      font-size: 16px;
      font-weight: 900;
      margin-bottom: 4px;
    }
    .unknownModalSub{
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      margin-bottom: 10px;
    }
    .unknownModalInput{
      width: 100%;
      box-sizing: border-box;
      border-radius: 11px;
      border: 1px solid var(--btnBorder);
      background: rgba(255,255,255,0.10);
      color: var(--text);
      padding: 11px 12px;
      font-size: 14px;
      font-weight: 700;
      outline: none;
    }
    .unknownModalInput:focus{
      border-color: rgba(34,197,94,0.75);
      box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
    }
    .unknownModalGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      margin-bottom:10px;
    }
    @media (min-width:680px){
      .unknownModalGrid{
        grid-template-columns:1fr 1fr;
      }
    }
    .unknownModalField{
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .unknownModalLabel{
      font-size:13px;
      font-weight:800;
      color:rgba(255,255,255,.85);
    }
    [data-theme="light"] .unknownModalLabel{
      color:#274160;
    }
    .unknownModalActions{
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }
    .unknownModalBtn{
      border-radius: 10px;
      padding: 8px 12px;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      border: 1px solid var(--btnBorder);
      background: rgba(255,255,255,0.10);
      color: var(--text);
    }
    .unknownModalBtn.primary{
      border-color: rgba(34,197,94,0.8);
      background: linear-gradient(180deg, rgba(34,197,94,0.35), rgba(22,163,74,0.30));
      color: #ecfdf5;
    }

    table{
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      overflow: hidden;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.06);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    #visitBody{
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    [data-theme="light"] table{
      background: rgba(255,255,255,0.78);
    }
    th, td{
      border-top: 1px solid rgba(255,255,255,0.10);
      padding: 10px 10px;
      text-align:left;
      vertical-align: top;
    }
    [data-theme="light"] th, [data-theme="light"] td{
      border-top-color: rgba(15,23,42,0.08);
    }
    th{
      background: rgba(255,255,255,0.08);
      position: sticky;
      top: 0;
      z-index: 1;
      font-size: 12px;
      color: var(--muted);
      letter-spacing: .2px;
      font-weight: 900;
    }
    [data-theme="light"] th{
      background: rgba(15,23,42,0.04);
    }
    tr:hover td{
      background: rgba(255,255,255,0.06);
    }
    [data-theme="light"] tr:hover td{
      background: rgba(15,23,42,0.03);
    }

    /* MAP card */
    #mapWrap{ margin-top: 14px; }
    #mapCard{
      overflow: hidden;
      position: relative;
      min-width: 0;
    }
    #mapHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
    }
    #mapHead b{
      font-size: 15px;
      font-weight: 900;
    }
    #mapHead .muted{
      color: rgba(255,255,255,0.92) !important;
    }
    [data-theme="light"] #mapHead .muted{
      color: rgba(15,23,42,0.90) !important;
    }
    #map{
      height: 520px;
    }
    .leaflet-control-attribution{
      font-size: 10px !important;
      line-height: 1.25 !important;
      padding: 2px 6px !important;
      border-radius: 9px !important;
      background: rgba(255,255,255,0.72) !important;
      color: rgba(15,23,42,0.72) !important;
      border: 1px solid rgba(15,23,42,0.10) !important;
      margin: 0 0 8px 0 !important;
      z-index: 650 !important;
    }
    #map .leaflet-bottom.leaflet-left{
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      display: flex !important;
      justify-content: center !important;
      pointer-events: none;
      z-index: 650 !important;
      bottom: calc(4px + env(safe-area-inset-bottom, 0px)) !important;
    }
    #map .leaflet-bottom.leaflet-left .leaflet-control-attribution{
      pointer-events: auto;
    }
    #map .leaflet-bottom.leaflet-right{
      right: 10px !important;
      bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
      z-index: 660 !important;
    }
    [data-theme="dark"] .leaflet-control-attribution{
      background: rgba(15,23,42,0.65) !important;
      color: rgba(226,232,240,0.85) !important;
      border-color: rgba(148,163,184,0.18) !important;
    }
    .leaflet-control.locate-control{
      margin: 0 !important;
    }
    .leaflet-control.locate-control .locateBtn{
      width: 46px;
      height: 46px;
      border-radius: 13px;
      border: 1px solid rgba(148,163,184,0.24);
      background: rgba(30,41,59,0.92);
      box-shadow: 0 10px 24px rgba(2,6,23,0.42), inset 0 1px 0 rgba(255,255,255,0.05);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      user-select: none;
      transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
    }
    .leaflet-control.locate-control .locateBtn:active{
      transform: scale(0.97);
    }
    .leaflet-control.locate-control .locateBtn .locGlyph{
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display: inline-block;
      position: relative;
      background: radial-gradient(circle at center, #3b82f6 0 38%, #2563eb 39% 60%, #1d4ed8 61% 100%);
      box-shadow: 0 0 0 3px rgba(255,255,255,0.86), 0 0 0 6px rgba(59,130,246,0.24);
    }
    .leaflet-control.locate-control .locateBtn.isOn{
      border-color: rgba(59,130,246,0.65);
      box-shadow: 0 10px 24px rgba(2,6,23,0.42), 0 0 0 2px rgba(59,130,246,0.26);
    }
    [data-theme="light"] .leaflet-control.locate-control .locateBtn{
      background: rgba(51,65,85,0.92);
      border-color: rgba(100,116,139,0.28);
    }
    .myLocPin{
      width: 16px;
      height: 16px;
      border-radius: 999px;
      position: relative;
      background: radial-gradient(circle at center, #facc15 0 40%, #eab308 41% 68%, #ca8a04 69% 100%);
      box-shadow: 0 0 0 2px rgba(255,255,255,0.98), 0 0 0 4px rgba(250,204,21,0.34), 0 6px 14px rgba(2,6,23,0.35);
    }
    .myLocPin::after{
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.78);
    }
    .storeClusterIcon{
      width: 28px;
      height: 28px;
      box-sizing: border-box;
      border-radius: 999px;
      background: rgba(15,23,42,0.90);
      color: #f8fafc;
      border: 2px solid rgba(148,163,184,0.70);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      text-align: center;
      box-shadow: 0 8px 18px rgba(2,6,23,0.35);
    }

    /* Fullscreen overlay behavior */
    .overlayFs{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.35);
      z-index: 99998;
      display:none;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
    }
    .overlayFs.on{
      display:block;
      background: rgba(2,6,23,0.52);
    }
    [data-theme="light"] .overlayFs.on{
      background: rgba(15,23,42,0.18);
    }

    .fsPanel{
      position: fixed !important;
      inset: 12px !important;
      z-index: 99999;
      box-sizing: border-box !important;
      max-width: calc(100vw - 24px) !important;
      max-height: calc(100vh - 24px) !important;
      border-radius: 18px !important;
      overflow: hidden !important;
      padding: 14px !important;
      background: rgba(10,16,35,0.92) !important;
      border: 1px solid var(--border2) !important;
      box-shadow: 0 24px 70px rgba(0,0,0,0.32) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
    [data-theme="light"] .fsPanel{
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.98)) !important;
      border-color: rgba(15,23,42,0.14) !important;
      box-shadow: 0 20px 54px rgba(2,6,23,0.16) !important;
      color: var(--text) !important;
    }
    [data-theme="light"] .fsPanel h2,
    [data-theme="light"] .fsPanel .muted,
    [data-theme="light"] .fsPanel .hint,
    [data-theme="light"] .fsPanel .pill{
      color: var(--text) !important;
      opacity: 1 !important;
    }
    .fsPanel .cardBodyGrow{
      max-height: calc(100vh - 150px) !important;
      overflow: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }

    .fsMap{
      position: fixed !important;
      inset: 12px !important;
      z-index: 99999;
      box-sizing: border-box !important;
      max-width: calc(100vw - 24px) !important;
      max-height: calc(100vh - 24px) !important;
      border-radius: 18px !important;
      overflow: hidden !important;
      background: rgba(10,16,35,0.92) !important;
      border: 1px solid var(--border2) !important;
      box-shadow: 0 24px 70px rgba(0,0,0,0.32) !important;
      backdrop-filter: blur(8px) !important;
      -webkit-backdrop-filter: blur(8px) !important;
    }
    [data-theme="light"] .fsMap{
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.98)) !important;
      border-color: rgba(15,23,42,0.14) !important;
      box-shadow: 0 20px 54px rgba(2,6,23,0.16) !important;
      color: var(--text) !important;
    }
    .fsMap #map{ height: calc(100vh - 58px) !important; }
    .fsMap #map .leaflet-bottom.leaflet-right{
      bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body:not(.android-mobile) .fsMap #map .leaflet-bottom.leaflet-right{
      bottom: calc(39px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Responsive */
    @media (max-width: 980px){
      .grid{ grid-template-columns: 1fr; }
      .grid > *{ min-width: 0; }
      #status{ width: 100%; margin-left: 0; }
      #map{ height: 460px; }
      h2{ flex-direction: column; align-items: flex-start; gap: 10px; }
      .headerRight{ width: 100%; justify-content: flex-start; }
      #avgCard, #visitCard, #mapCard, .topbar{
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
      }
      #avgCard{ position: relative; }
      #avgCard .cardHead{ padding-right: 58px; }
      #avgCard #btnFsAvg{
        position: absolute;
        right: 14px;
        top: 14px;
        z-index: 3;
      }
      #visitCard{ position: relative; }
      #visitHeadActions{
        position: absolute;
        right: 14px;
        top: 14px;
        z-index: 3;
      }
      #visitCard .cardHead{ padding-right: 58px; }
      #legend{
        max-width: calc(100% - 28px);
        left: 14px;
        bottom: 14px;
      }
      .leaflet-control.locate-control{
        margin: 0 !important;
      }
      #legend .legendList{
        max-height: 92px;
      }
      #visitBody table{
        width: 680px;
        min-width: 680px;
        font-size: 12px;
      }
      #visitBody th, #visitBody td{ white-space: nowrap; }

      /* keep layout stable + ringan untuk hp */
      .grain{ display: none !important; }
      .glass, .loginCard, .exportCard, #legend{
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
      }
      .miniBtn, .btn, .btnIcon, .pillBtn, .legendToggle, .switch .slider, .switch .slider:before{
        transition: none !important;
      }
      .legendToggle::after{
        transition: none !important;
      }
      .progressBar > div{
        animation: none !important;
      }
    }
    @media (max-width: 520px){
      h2{ font-size: 18px; }
      select, input{ width: 100%; }
      .btn, .pillBtn{ width: 100%; justify-content:center; }
      .avgHeadLeft{ width: auto; flex: 1; min-width: 0; }
      .avgDataBtn{ width: auto; font-size: 11px; padding: 7px 9px; }
      #visitSearch{ width: 100%; max-width: 100%; min-width: 0; }
      .filterRow{ justify-content: center; }
      .filterRow .pill,
      .filterRow .hint{
        width: 100%;
        text-align: center;
      }
      #visitCard .filterRow{
        margin-top: 31px;
      }
      #map{ height: 420px; }
      .cardBodyGrow{
        overflow-x: auto;
        overflow-y: auto;
      }
      #avgBox{
        overflow-wrap: anywhere;
        word-break: break-word;
      }
      #visitBody th, #visitBody td{
        padding: 8px 7px;
        font-size: 11.5px;
      }
      #visitBody table{
        width: 620px;
        min-width: 620px;
      }
      /* fullscreen visit: fit layar hp, tidak melebar */
      #visitCard.fsPanel{
        inset: 8px !important;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        padding: 10px !important;
        background: rgba(8,12,24,0.95) !important;
      }
      [data-theme="light"] #visitCard.fsPanel{
        background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.98)) !important;
        border-color: rgba(15,23,42,0.14) !important;
        box-shadow: 0 20px 54px rgba(2,6,23,0.16) !important;
        color: var(--text) !important;
      }
      [data-theme="light"] #visitCard.fsPanel .cardHead b,
      [data-theme="light"] #visitCard.fsPanel .filterRow .pill,
      [data-theme="light"] #visitCard.fsPanel .filterRow .hint{
        color: var(--text) !important;
        opacity: 1 !important;
      }
      #visitCard.fsPanel .cardHead{
        padding-right: 58px !important;
        margin-bottom: 8px;
      }
      #visitCard.fsPanel #visitHeadActions{
        position: absolute !important;
        right: 10px !important;
        top: 10px !important;
        z-index: 6 !important;
      }
      #visitCard.fsPanel #visitBody{
        overflow: auto !important;
        -webkit-overflow-scrolling: touch !important;
      }
      #visitCard.fsPanel .filterRow{
        margin-top: 106px !important;
      }
      #visitCard.fsPanel #visitBody table{
        width: 620px !important;
        min-width: 620px !important;
      }
      #visitCard.fsPanel #visitBody th,
      #visitCard.fsPanel #visitBody td{
        white-space: nowrap !important;
        font-size: 10.8px !important;
        padding: 7px 6px !important;
      }
    }

    /* =========================
       LOGIN OVERLAY (glass)
       ========================= */
    .lockOverlay{
      position: fixed;
      inset: 0;
      z-index: 100000;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 16px;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .lockOverlay.on{ display:flex; }

    .loginBusyOverlay{
      position: fixed;
      inset: 0;
      z-index: 100500;
      display:none;
      align-items:center;
      justify-content:center;
      padding: 18px;
      background: rgba(3,8,20,0.54);
      backdrop-filter: blur(14px) saturate(1.05);
      -webkit-backdrop-filter: blur(14px) saturate(1.05);
    }
    .loginBusyOverlay.on{
      display:flex;
      animation: fadeInLoginBusy .18s ease-out;
    }
    [data-theme="light"] .loginBusyOverlay{
      background: rgba(238,242,255,0.52);
    }
    @keyframes fadeInLoginBusy{
      from{ opacity: 0; }
      to{ opacity: 1; }
    }

    .loginBusyCard{
      width: min(420px, calc(100vw - 28px));
      padding: 28px 24px 24px;
      border-radius: 24px;
      border: 1px solid rgba(255,255,255,0.16);
      background:
        linear-gradient(135deg, rgba(37,99,235,0.22), rgba(16,185,129,0.16)),
        rgba(8,12,24,0.82);
      box-shadow: 0 26px 80px rgba(2,6,23,0.42);
      text-align: center;
      backdrop-filter: blur(22px);
      -webkit-backdrop-filter: blur(22px);
    }
    [data-theme="light"] .loginBusyCard{
      background:
        linear-gradient(135deg, rgba(37,99,235,0.12), rgba(16,185,129,0.10)),
        rgba(255,255,255,0.90);
      border-color: rgba(15,23,42,0.10);
      box-shadow: 0 24px 64px rgba(15,23,42,0.14);
    }

    .loginBusySpinner{
      position: relative;
      width: 88px;
      height: 88px;
      margin: 0 auto 18px;
      display:grid;
      place-items:center;
    }
    .loginBusySpinner::before{
      content:"";
      width:38px;
      height:38px;
      border-radius:999px;
      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.14), rgba(15,23,42,0.72));
      box-shadow: inset 0 2px 8px rgba(255,255,255,0.08), 0 8px 20px rgba(15,23,42,0.28);
      z-index:2;
    }
    .loginBusySpinner span{
      position:absolute;
      inset:0;
      border-radius:999px;
      border:4px solid transparent;
      animation: loginBusySpin 1.4s linear infinite;
    }
    .loginBusySpinner span:first-child{
      border-top-color:#4f7cff;
      border-right-color:#4f7cff;
      animation-duration:1.25s;
    }
    .loginBusySpinner span:last-child{
      inset:10px;
      border-bottom-color:#28d391;
      border-left-color:#28d391;
      animation-duration:1.05s;
      animation-direction:reverse;
    }
    @keyframes loginBusySpin{
      from{ transform: rotate(0deg); }
      to{ transform: rotate(360deg); }
    }

    .loginBusyEyebrow{
      font-size:12px;
      line-height:1;
      letter-spacing:0.18em;
      font-weight:900;
      color:var(--muted);
      margin-bottom:12px;
    }
    .loginBusyTitle{
      font-size: clamp(26px, 3vw, 38px);
      line-height:1.08;
      font-weight:950;
      color:var(--text);
      margin-bottom:10px;
    }
    .loginBusyText{
      font-size:14px;
      line-height:1.55;
      color:var(--muted);
      font-weight:700;
      max-width:320px;
      margin:0 auto;
    }

    .loginCard{
      width: min(520px, 92vw);
      border-radius: 22px;
      padding: 16px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 30px 90px rgba(0,0,0,0.35);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }
    [data-theme="light"] .loginCard{
      background: rgba(255,255,255,0.82);
      border-color: rgba(15,23,42,0.14);
      box-shadow: 0 30px 90px rgba(2,6,23,0.18);
    }

    .loginHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .loginTitle{
      display:flex;
      flex-direction:column;
      gap:4px;
    }
    .loginTitle b{
      font-size: 16px;
      font-weight: 950;
      letter-spacing: .2px;
    }
    .loginTitle span{
      font-size: 13px;
      color: var(--muted);
      font-weight: 800;
    }

    .loginBody{
      margin-top: 10px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .loginFieldWrap{
      position: relative;
      width: 100%;
    }
    .loginBody #inpEmployee{
      width: 100%;
      box-sizing: border-box;
      display: block;
      margin: 0;
      padding-right: 44px;
    }
    .loginFieldToggle{
      position: absolute;
      top: 50%;
      right: 12px;
      transform: translateY(-50%);
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      color: var(--muted);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      box-shadow: none;
      font-size: 16px;
      line-height: 1;
    }
    .loginFieldToggle:hover{
      color: var(--text);
      background: rgba(255,255,255,0.10);
    }
    [data-theme="light"] .loginFieldToggle:hover{
      background: rgba(15,23,42,0.08);
    }
    .loginBody .lbl{
      font-size: 12px;
      color: var(--muted);
      font-weight: 900;
      margin-left: 4px;
    }

    .loginBtn{
      width: 100%;
      padding: 11px 12px;
      border-radius: 14px;
      border: 1px solid rgba(34,197,94,0.40);
      background: rgba(34,197,94,0.18);
      color: var(--text);
      cursor:pointer;
      font-weight: 950;
      box-shadow: var(--shadow2);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap: 8px;
    }
    .loginBtn:hover{ filter: brightness(1.08); }

    .loginStatus{
      margin-top: 8px;
      font-size: 13px;
      color: var(--muted);
      font-weight: 800;
      min-height: 18px;
    }
    .loginErr{
      color: rgba(239,68,68,0.95);
      font-weight: 950;
    }

    /* blur dashboard when locked (extra safety) */
    .blurLocked{
      filter: blur(10px);
      opacity: .35;
      pointer-events:none;
      user-select:none;
      transition: .2s ease;
    }
    .blurUnlocked{
      filter: none;
      opacity: 1;
      pointer-events:auto;
      transition: .2s ease;
    }

    /* =========================
       PRINT (Export PDF) - FIX 4
       ========================= */
    @media print{
      body{ background: #fff !important; }
      .grain, .lockOverlay, .overlayFs, .loginBusyOverlay, #appRoot{ display:none !important; }
      #printArea{ display:block !important; padding: 18px; color:#111 !important; }

      #printArea .reportHeader{
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        gap: 12px;
        border-bottom: 2px solid #111827;
        padding-bottom: 10px;
        margin-bottom: 12px;
      }
      #printArea .reportHeader h1{
        font-size: 18px;
        margin:0;
        color:#111827;
      }
      #printArea .reportHeader .meta{
        text-align:right;
        font-size: 11px;
        color:#374151;
        line-height:1.4;
        white-space: nowrap;
      }

      #printArea .secTitle{
        margin: 14px 0 6px;
        font-size: 13px;
        font-weight: 900;
        color:#111827;
      }
      #printArea .secTitle small{
        font-weight: 700;
        color:#6b7280;
        margin-left: 6px;
      }

      #printArea table{
        width:100%;
        border-collapse: collapse;
        font-size: 11px;
      }
      #printArea th, #printArea td{
        border:1px solid #e5e7eb;
        padding: 7px 8px;
        vertical-align: top;
      }
      #printArea th{
        background:#f3f4f6;
        color:#111827;
        font-weight: 800;
        text-align:left;
      }
      #printArea td b{ font-weight: 800; }

      /* page-break per sales */
      #printArea .salesBlock{
        break-inside: avoid;
        page-break-inside: avoid;
      }
      #printArea .salesBlock + .salesBlock{ margin-top: 18px; }
      #printArea .pageBreak{
        page-break-before: always;
        break-before: page;
      }

      #printArea .emptyNote{
        font-size: 11px;
        color:#6b7280;
        margin-top: 6px;
      }
    }

    /* =========================
       ✅ TOGGLE SWITCH (MAP STORES)
       ========================= */
    .switch{
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }
    .switch input{ display:none; }

    .switch .slider{
      position:absolute;
      cursor:pointer;
      inset:0;
      background: rgba(255,255,255,0.18);
      border: 1px solid var(--border2);
      transition: .2s ease;
      border-radius: 999px;
      box-shadow: var(--shadow2);
    }
    .switch .slider:before{
      content:"";
      position:absolute;
      height:18px; width:18px;
      left:3px; top:50%;
      transform: translateY(-50%);
      background: rgba(255,255,255,0.92);
      border-radius: 50%;
      transition: .2s ease;
    }

    .switch input:checked + .slider{
      background: rgba(34,197,94,0.20);
      border-color: rgba(34,197,94,0.40);
    }
    .switch input:checked + .slider:before{
      transform: translate(20px, -50%);
      background: rgba(255,255,255,0.95);
    }

    /* Android mobile tuning: map header + toggles + legend */
    body.android-mobile #mapHead{
      padding: 10px 12px;
    }
    body.android-mobile #mapHead > div{
      width: 100%;
      gap: 8px !important;
      flex-wrap: nowrap !important;
      justify-content: space-between;
      align-items: center;
    }
    body.android-mobile #mapHead b{
      display: none;
    }
    body.android-mobile #mapHead .switch{
      width: 38px;
      height: 20px;
    }
    body.android-mobile #mapHead .switch .slider:before{
      width: 14px;
      height: 14px;
      left: 2px;
    }
    body.android-mobile #mapHead .switch input:checked + .slider:before{
      transform: translate(18px, -50%);
    }
    body.android-mobile #mapHead .muted{
      font-size: 11px !important;
      color: var(--muted) !important;
      font-weight: 800 !important;
    }
    [data-theme="light"] body.android-mobile #mapHead .muted{
      color: rgba(0,0,0,.88) !important;
    }
    body.android-mobile #legend .legItem{
      color: rgba(255,255,255,.90);
    }
    body.android-mobile #legend .legendToggleTxt{
      color: rgba(255,255,255,.90);
    }
    [data-theme="light"] body.android-mobile #legend .legItem{
      color: rgba(0,0,0,.88);
    }
    [data-theme="light"] body.android-mobile #legend .legendToggleTxt{
      color: rgba(0,0,0,.88);
    }
    body.android-mobile h2{
      position: relative;
      padding-right: 52px;
    }
    body.android-mobile #btnLogout{
      position: absolute;
      top: 0;
      right: 0;
      z-index: 5;
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 12px;
      justify-content: center;
      gap: 0;
      font-size: 18px;
      line-height: 1;
    }
    body.android-mobile #btnLogout span{
      display: none;
    }
    /* Android perf mode: reduce GPU-heavy effects that can cause flicker/jank */
    body.android-mobile .glass,
    body.android-mobile .loginCard,
    body.android-mobile .loginBusyCard,
    body.android-mobile .exportCard,
    body.android-mobile #legend{
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      box-shadow: none !important;
    }
    body.android-mobile .card,
    body.android-mobile #mapCard{
      contain: layout paint;
      transform: translateZ(0);
    }
    body.android-mobile #visitBody th{
      position: static;
    }
    body.android-mobile tr:hover td{
      background: transparent;
    }
    body.android-mobile #visitCard .filterRow{
      justify-content: center;
      gap: 8px;
    }
    body.android-mobile #visitCard.fsPanel .filterRow{
      margin-top: 106px !important;
    }
    [data-theme="light"] body.android-mobile #visitCard.fsPanel{
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.98)) !important;
      color: var(--text) !important;
    }
    [data-theme="light"] body.android-mobile #avgCard.fsPanel{
      background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(241,245,249,0.98)) !important;
      color: var(--text) !important;
    }
    body.android-mobile #visitSearch{
      flex: 1 1 calc(100% - 62px);
      width: auto !important;
      max-width: calc(100% - 62px);
      min-width: 0;
    }
    body.android-mobile #btnClearSearch{
      flex: 0 0 46px;
      width: 46px;
      padding: 9px 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    body.android-mobile #visitCard .filterRow .pill,
    body.android-mobile #visitCard .filterRow .hint{
      flex: 0 0 100%;
      width: 100%;
      text-align: center;
    }
    /* Fullscreen map on Android: keep controls above browser/nav bars */
    body.android-mobile .fsMap #map .leaflet-bottom.leaflet-left{
      bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.android-mobile .fsMap #map .leaflet-bottom.leaflet-right{
      right: 10px !important;
      bottom: calc(42px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* =========================
       ✅ EXPORT PDF UI (NEW)
       ========================= */
    #btnPdfVisit { display: none; } /* default: sembunyi, muncul hanya saat fullscreen */

    .exportOverlay{
      position: fixed;
      inset: 0;
      z-index: 100001;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.35);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .exportOverlay.on{ display:flex; }

    .exportCard{
      width: min(520px, 92vw);
      border-radius: 18px;
      padding: 16px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.18);
      box-shadow: 0 30px 90px rgba(0,0,0,0.35);
    }
    [data-theme="light"] .exportCard{
      background: rgba(255,255,255,0.86);
      border-color: rgba(15,23,42,0.14);
      box-shadow: 0 30px 90px rgba(2,6,23,0.18);
    }

    .exportTitle{
      font-weight: 950;
      margin-bottom: 10px;
    }
    .exportText{
      font-size: 13px;
      color: var(--muted);
      font-weight: 800;
      line-height: 1.45;
    }

    .progressBar{
      height: 10px;
      background: rgba(255,255,255,0.10);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 999px;
      overflow: hidden;
      margin-top: 12px;
    }
    .progressBar > div{
      height: 100%;
      width: 35%;
      background: rgba(34,197,94,0.55);
      animation: prog 1.05s ease-in-out infinite alternate;
    }
    @keyframes prog{
      from { transform: translateX(-20%); width: 25%; }
      to   { transform: translateX(120%); width: 45%; }
    }