  <style>
    body { margin: 0; background: #f0f2f5; overflow-x: hidden; }
    .container-fluid { max-width: 1400px; margin: 0 auto; padding: 0 16px; }
    @media (min-width: 992px) {
      .admin-content-area { padding: 0 8px; }
      .card-main { padding: 24px 32px 36px !important; }

      /* === DESKTOP: peta lebih tinggi === */
      #leafletMap { height: 480px !important; }

      /* === DESKTOP: perbesar semua font === */
      body { font-size: 16px !important; }
      .page-title { font-size: 1.45rem !important; }
      .page-sub { font-size: 1rem !important; }
      .section-title { font-size: 1.05rem !important; }
      .id-badge { font-size: 1.25rem !important; }
      .id-badge small { font-size: 0.88rem !important; }
      .proses-info-badge { font-size: 1rem !important; }
      .proses-info-badge i { font-size: 1.6rem !important; }
      .spreadsheet-link-bar .ssl-label { font-size: 0.95rem !important; }
      .spreadsheet-link-bar .ssl-sub { font-size: 0.85rem !important; }
      .spreadsheet-link-bar a.ssl-btn { font-size: 0.95rem !important; padding: 9px 18px !important; }
      .paket-speed { font-size: 1.2rem !important; }
      .paket-harga { font-size: 1rem !important; }
      .paket-ppn { font-size: 0.88rem !important; }
      .referral-toggle-btn { font-size: 1rem !important; }
      .referral-input { font-size: 1.05rem !important; }
      .referral-submit-btn { font-size: 1rem !important; }
      .referral-feedback { font-size: 0.95rem !important; }
      .promo-paket-title { font-size: 0.98rem !important; }
      .promo-card-speed { font-size: 1.05rem !important; }
      .promo-card-harga { font-size: 0.98rem !important; }
      .promo-card-ppn { font-size: 0.82rem !important; }
      .promo-hemat-badge { font-size: 0.75rem !important; }
      .referral-unlocked-info { font-size: 0.92rem !important; }
      .form-control, .form-select { font-size: 1.05rem !important; }
      .foto-btn { font-size: 1rem !important; }
      .foto-upload-status { font-size: 0.95rem !important; }
      .map-search-input { font-size: 1rem !important; }
      .map-action-btn { font-size: 1rem !important; }
      .survey-gps-btn { font-size: 1rem !important; }
      .map-hint-bar { font-size: 0.92rem !important; }
      .map-location-info { font-size: 0.95rem !important; }
      .map-coords { font-size: 0.9rem !important; }
      .map-address { font-size: 0.95rem !important; }
      .maps-result-bar { font-size: 0.95rem !important; }
      .btn-submit-order { font-size: 1.15rem !important; padding: 16px !important; }
      .ringkasan-text { font-size: 0.95rem !important; }
      .sheet-info-box { font-size: 0.95rem !important; }
      .nav-tabs .nav-link { font-size: 1rem !important; padding: 10px 16px !important; }
      .admin-login-title { font-size: 1.35rem !important; }
      .admin-login-sub { font-size: 1rem !important; }
      .admin-welcome { font-size: 1.05rem !important; }
      .stat-number { font-size: 1.7rem !important; }
      .stat-label { font-size: 0.85rem !important; }
      .admin-search-input { font-size: 1rem !important; }
      label, .form-label { font-size: 0.95rem !important; }
      .foto-hapus-btn { font-size: 1rem !important; }
      .foto-sumber-badge { font-size: 0.82rem !important; }
      .sheet-insert-info { font-size: 0.9rem !important; }
      .filter-tag-remove { font-size: 0.92rem !important; }
    }
    @media (min-width: 1200px) {
      .row-cols-lg-4 > * { max-width: 25%; }
      #leafletMap { height: 540px !important; }
    }
    :root {
      --teleport-blue: #0d6efd;
      --teleport-green: #198754;
      --teleport-dark: #1a2236;
      --teleport-light: #dce8fb;
    }
    * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
    body { background: linear-gradient(135deg, #123f8f 0%, #1257c9 55%, #0f66e6 100%); padding: 10px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; overscroll-behavior: none; }
    .card-main { max-width: 720px; margin: 24px auto; background: #f2f7ff; border-radius: 14px; padding: 20px 24px 30px; box-shadow: 0 10px 40px rgba(0,20,80,0.35); }
    .logo-container { text-align: center; margin-bottom: 14px; }
    .logo-img { max-width: 200px; height: auto; }
    .page-title { font-size: 1.1rem; font-weight: 800; color: var(--teleport-dark); text-align: center; margin-bottom: 2px; letter-spacing: 0.3px; }
    .page-sub { text-align: center; color: #6c757d; font-size: 0.82rem; margin-bottom: 18px; }
    .section-title { background: linear-gradient(90deg, #e8f0ff 0%, #f4f6f9 100%); padding: 9px 14px; border-radius: 8px; font-weight: 700; color: var(--teleport-dark); margin: 18px 0 12px; border-left: 5px solid var(--teleport-blue); font-size: 0.85rem; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; }
    .id-badge { background: #eef3ff; border: 2px dashed var(--teleport-blue); border-radius: 8px; padding: 10px 14px; text-align: center; font-size: 1rem; font-weight: 800; color: var(--teleport-blue); letter-spacing: 1.5px; margin-bottom: 16px; }
    .id-badge small { display: block; font-size: 0.7rem; font-weight: 500; color: #6c757d; letter-spacing: 0; margin-bottom: 2px; }
    .proses-info-badge { display: flex; align-items: center; gap: 10px; background: #fef3c7; border: 1.5px solid #fcd34d; border-radius: 10px; padding: 10px 14px; margin-bottom: 18px; font-size: 0.82rem; color: #92400e; font-weight: 600; }
    .proses-info-badge i { font-size: 1.4rem; color: #f59e0b; flex-shrink: 0; }

    /* ===== SPREADSHEET LINK BAR ===== */
    .spreadsheet-link-bar { display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, #e8f5e9 0%, #f1f8e9 100%); border: 1.5px solid #a5d6a7; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
    .spreadsheet-link-bar i { color: #2e7d32; font-size: 1.3rem; flex-shrink: 0; }
    .spreadsheet-link-bar .ssl-label { font-size: 0.75rem; font-weight: 700; color: #1b5e20; line-height: 1.2; }
    .spreadsheet-link-bar .ssl-sub { font-size: 0.68rem; color: #388e3c; }
    .spreadsheet-link-bar a.ssl-btn { margin-left: auto; background: #2e7d32; color: white; border: none; border-radius: 8px; padding: 7px 14px; font-size: 0.78rem; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 5px; transition: all 0.2s; white-space: nowrap; }
    .spreadsheet-link-bar a.ssl-btn:hover { background: #1b5e20; transform: translateY(-1px); }

    .paket-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .paket-card { border: 2px solid #dee2e6; border-radius: 10px; padding: 12px 10px; cursor: pointer; transition: all 0.2s ease; text-align: center; position: relative; user-select: none; }
    .paket-card:hover, .paket-card:active { border-color: var(--teleport-blue); background: #eef3ff; }
    .paket-card.selected { border-color: var(--teleport-blue); background: #dbeafe; box-shadow: 0 0 0 3px rgba(13,110,253,0.15); }
    .paket-card.selected::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: var(--teleport-blue); font-size: 1rem; font-weight: 900; }
    .paket-speed { font-size: 1rem; font-weight: 800; color: var(--teleport-dark); }
    .paket-harga { font-size: 0.82rem; color: #198754; font-weight: 600; margin-top: 2px; }
    .paket-ppn { font-size: 0.72rem; color: #6c757d; }
    .ringkasan-paket { background: #f0fdf4; border: 1px solid #86efac; border-radius: 8px; padding: 12px 14px; margin-top: 12px; }
    .ringkasan-paket.promo-active { background: #fff7ed; border-color: #fb923c; }

    .referral-section { margin-top: 16px; border: 2px dashed #ced4da; border-radius: 12px; padding: 14px; background: #fafafa; transition: border-color 0.3s, background 0.3s; }
    .referral-section.unlocked { border-color: #f97316; background: #fff7ed; }
    .referral-toggle-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; padding: 0; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: #6c757d; width: 100%; justify-content: space-between; text-align: left; }
    .referral-toggle-btn .toggle-left { display: flex; align-items: center; gap: 8px; }
    .referral-toggle-btn:hover { color: #f97316; }
    .referral-toggle-chevron { font-size: 0.8rem; transition: transform 0.25s; }
    .referral-toggle-chevron.open { transform: rotate(180deg); }
    .referral-body { display: none; margin-top: 12px; }
    .referral-body.show { display: block; }
    .referral-input-group { display: flex; gap: 8px; }
    .referral-input { flex: 1; border: 2px solid #ced4da; border-radius: 8px; padding: 10px 14px; font-size: 0.9rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; outline: none; transition: border-color 0.2s; font-family: 'Courier New', monospace; }
    .referral-input:focus { border-color: #f97316; box-shadow: 0 0 0 3px rgba(249,115,22,0.15); }
    .referral-input.valid { border-color: #22c55e; background: #f0fdf4; }
    .referral-input.invalid { border-color: #ef4444; background: #fef2f2; }
    .referral-submit-btn { border: none; border-radius: 8px; padding: 10px 18px; font-weight: 800; font-size: 0.85rem; cursor: pointer; background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white; transition: all 0.2s; white-space: nowrap; }
    .referral-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,0.35); }
    .referral-submit-btn:disabled { opacity: 0.65; transform: none; cursor: not-allowed; }
    .referral-feedback { margin-top: 8px; font-size: 0.78rem; padding: 8px 10px; border-radius: 8px; display: none; align-items: center; gap: 8px; }
    .referral-feedback.show { display: flex; }
    .referral-feedback.success { background: #dcfce7; border: 1px solid #86efac; color: #15803d; }
    .referral-feedback.error { background: #fee2e2; border: 1px solid #fca5a5; color: #dc2626; }
    .promo-paket-container { margin-top: 12px; display: none; }
    .promo-paket-container.show { display: block; }
    .promo-paket-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
    .promo-paket-title { font-size: 0.8rem; font-weight: 800; color: #ea580c; display: flex; align-items: center; gap: 6px; }
    .promo-paket-reset { font-size: 0.72rem; color: #6c757d; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: all 0.2s; }
    .promo-paket-reset:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
    .promo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .promo-card { border: 2px solid #fed7aa; border-radius: 10px; padding: 10px 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; position: relative; user-select: none; background: #fff7ed; }
    .promo-card:hover { border-color: #f97316; background: #ffedd5; }
    .promo-card.selected { border-color: #ea580c; background: #fed7aa; box-shadow: 0 0 0 3px rgba(249,115,22,0.2); }
    .promo-card.selected::after { content: "✓"; position: absolute; top: 5px; right: 7px; color: #ea580c; font-size: 0.9rem; font-weight: 900; }
    .promo-card-speed { font-size: 0.88rem; font-weight: 800; color: #92400e; }
    .promo-card-harga { font-size: 0.8rem; color: #15803d; font-weight: 700; margin-top: 2px; }
    .promo-card-ppn { font-size: 0.65rem; color: #6c757d; }
    .promo-hemat-badge { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #f97316, #ef4444); color: white; font-size: 0.58rem; font-weight: 800; padding: 2px 7px; border-radius: 8px; white-space: nowrap; }
    .referral-unlocked-info { display: none; align-items: center; gap: 8px; background: #fff7ed; border: 1.5px solid #fb923c; border-radius: 8px; padding: 8px 12px; margin-top: 10px; font-size: 0.75rem; color: #92400e; font-weight: 600; }
    .referral-unlocked-info.show { display: flex; }
    .referral-unlocked-info i { font-size: 1.1rem; color: #f97316; flex-shrink: 0; }

    .form-label { font-weight: 600; color: #444; margin-bottom: 4px; }
    .form-control, .form-select { border-radius: 8px; font-size: 0.9rem; border-color: #ced4da; transition: border-color 0.2s; }
    .form-control:focus, .form-select:focus { border-color: var(--teleport-blue); box-shadow: 0 0 0 3px rgba(13,110,253,0.1); }
    .input-required { border-color: #0d6efd !important; }

    .foto-ktp-wrapper { border: 2px dashed #ced4da; border-radius: 12px; padding: 14px; background: #fafafa; transition: border-color 0.3s, background 0.3s; }
    .foto-ktp-wrapper.has-foto { border-color: #198754; background: #f0fdf4; }
    .foto-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .foto-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 14px 10px; border: 2px solid #dee2e6; border-radius: 10px; background: white; cursor: pointer; transition: all 0.2s; font-weight: 700; font-size: 0.82rem; color: #444; position: relative; overflow: hidden; user-select: none; }
    .foto-btn:hover { border-color: var(--teleport-blue); background: #eef3ff; color: var(--teleport-blue); }
    .foto-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .foto-btn.btn-kamera { border-color: #0d6efd; color: #0d6efd; background: #eef3ff; }
    .foto-btn.btn-galeri { border-color: #6f42c1; color: #6f42c1; background: #f3f0ff; }
    .foto-preview-box { margin-top: 12px; display: none; }
    .foto-preview-box.show { display: block; }
    .foto-preview-inner { position: relative; display: inline-block; width: 100%; }
    .foto-preview-inner img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; border: 2px solid #198754; display: block; }
    .foto-hapus-btn { position: absolute; top: 6px; right: 6px; background: rgba(220,53,69,0.9); color: white; border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 0.85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
    .foto-sumber-badge { position: absolute; top: 6px; left: 6px; background: rgba(13,110,253,0.85); color: white; border-radius: 6px; font-size: 0.68rem; font-weight: 700; padding: 2px 7px; z-index: 2; }
    .foto-upload-status { margin-top: 8px; font-size: 0.8rem; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: rgba(0,0,0,0.04); }
    .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .status-dot.ready { background: #f59e0b; }
    .status-dot.uploading { background: #0d6efd; animation: pulse 0.8s infinite; }
    .status-dot.scanning { background: #6f42c1; animation: pulse 0.8s infinite; }
    .status-dot.valid { background: #16a34a; }
    .status-dot.done { background: #198754; }
    .status-dot.error { background: #dc3545; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
    .foto-link-box { margin-top: 8px; display: none; }
    .upload-progress { margin-top: 8px; display: none; }
    .upload-progress.show { display: block; }
    .upload-progress .progress { height: 6px; border-radius: 3px; }
    .sheet-insert-info { margin-top: 8px; font-size: 0.75rem; color: #065f46; background: #d1fae5; border-radius: 6px; padding: 5px 10px; display: none; align-items: center; gap: 6px; }
    .sheet-insert-info.show { display: flex; }

    .maps-section-label { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #444; margin-bottom: 8px; }
    .leaflet-map-container { border: 2px solid #ced4da; border-radius: 12px; overflow: hidden; transition: border-color 0.3s; }
    .leaflet-map-container.has-location { border-color: #198754; }
    .map-toolbar { display: flex; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid #e9ecef; flex-wrap: wrap; align-items: center; }
    .map-search-group { display: flex; flex: 1; min-width: 0; gap: 6px; }
    .map-search-input { flex: 1; border: 1.5px solid #ced4da; border-radius: 8px; padding: 7px 12px; font-size: 0.85rem; outline: none; transition: border-color 0.2s; min-width: 0; }
    .map-search-input:focus { border-color: var(--teleport-blue); }
    .map-action-btn { border: none; border-radius: 8px; padding: 7px 12px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: all 0.2s; white-space: nowrap; display: flex; align-items: center; gap: 5px; -webkit-tap-highlight-color: transparent; }
    .map-btn-search { background: var(--teleport-blue); color: white; }
    .map-btn-gps { background: #198754; color: white; }
    .map-btn-gps.loading { background: #6c757d; cursor: not-allowed; }
    .map-btn-clear { background: #f8f9fa; color: #6c757d; border: 1.5px solid #dee2e6; }

    /* Survey map floating search bar (Soft Survey manual) — gaya disamakan
       dengan kolom cari alamat di form order pelanggan (.map-search-input dkk),
       plus tombol "Lokasi Anda Saat Ini" untuk GPS. */
    .survey-coord-search-bar { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1.5px solid #ced4da; border-radius: 12px; padding: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.18); transition: border-color 0.3s; }
    .survey-coord-search-bar.has-location { border-color: #198754; }
    .survey-coord-search-row { display: flex; gap: 6px; }
    .survey-gps-btn { width: 100%; background: #198754; color: white; border: none; border-radius: 9px; padding: 9px 14px; font-size: 0.82rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; -webkit-tap-highlight-color: transparent; transition: all 0.2s; }
    .survey-gps-btn:disabled { background: #6c757d; cursor: not-allowed; }

    #leafletMap { width: 100%; height: 300px; z-index: 1; touch-action: none; }
    .map-hint-bar { background: var(--teleport-dark); color: white; padding: 6px 14px; font-size: 0.75rem; font-weight: 600; text-align: center; display: flex; align-items: center; justify-content: center; gap: 6px; }
    .map-hint-bar.green { background: #198754; }
    .map-location-info { padding: 10px 12px; background: #f0fdf4; border-top: 1px solid #bbf7d0; font-size: 0.8rem; display: none; }
    .map-location-info.show { display: block; }
    .map-coords { font-family: monospace; font-size: 0.75rem; color: #065f46; font-weight: 700; }
    .map-address { color: #374151; margin-top: 2px; font-size: 0.78rem; }
    .maps-result-bar { display: none; align-items: center; gap: 8px; padding: 8px 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; margin-top: 8px; font-size: 0.78rem; }
    .maps-result-bar.show { display: flex; }
    .maps-result-bar a { color: var(--teleport-blue); font-weight: 700; text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .btn-submit-order { background: linear-gradient(135deg, #198754 0%, #0f6843 100%); border: none; border-radius: 10px; color: white; font-weight: 800; font-size: 1rem; padding: 14px; width: 100%; margin-top: 20px; transition: all 0.2s; letter-spacing: 0.5px; }
    .btn-submit-order:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(25,135,84,0.35); color: white; }
    .btn-submit-order:disabled { transform: none; opacity: 0.65; }

    .success-icon { font-size: 4rem; color: #198754; animation: pop 0.4s ease; margin-bottom: 10px; }
    @keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
    .ringkasan-text { background: #f8f9fa; border: 1px dashed #ced4da; border-radius: 8px; padding: 14px; font-family: 'Courier New', monospace; font-size: 0.78rem; text-align: left; line-height: 1.6; white-space: pre-wrap; color: #333; margin: 14px 0; }
    .success-foto-preview { margin: 10px auto; max-width: 280px; border-radius: 10px; overflow: hidden; border: 2px solid #198754; }
    .success-foto-preview img { width: 100%; height: auto; display: block; }
    .sheet-info-box { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 10px 14px; font-size: 0.78rem; color: #1e40af; display: flex; align-items: flex-start; gap: 8px; margin: 10px 0; text-align: left; }

    .nav-tabs { border-bottom: 2px solid #e9ecef; margin-bottom: 16px; }
    .nav-tabs .nav-link { font-weight: 700; font-size: 0.85rem; color: #6c757d; border: none; padding: 8px 12px; }
    .nav-tabs .nav-link.active { color: var(--teleport-blue); border-bottom: 3px solid var(--teleport-blue); background: none; }
    .nav-tabs .nav-link.admin-link { color: #dc3545; }
    .nav-tabs .nav-link.admin-link.active { color: #dc3545; border-bottom-color: #dc3545; }

    .admin-login-box { max-width: 340px; margin: 20px auto; background: #fff; border-radius: 14px; padding: 28px 24px; border: 2px solid #e9ecef; box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
    .admin-login-title { font-size: 1.1rem; font-weight: 800; color: var(--teleport-dark); text-align: center; margin-bottom: 6px; }
    .admin-login-sub { text-align: center; color: #6c757d; font-size: 0.82rem; margin-bottom: 20px; }
    .admin-lock-icon { font-size: 2.5rem; text-align: center; margin-bottom: 10px; display: block; }
    .admin-navbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; background: #fff; border-bottom: 2px solid #dee2e6; box-shadow: 0 2px 6px rgba(0,0,0,.04); position: sticky; top: 0; z-index: 1030; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); margin-top: -20px; margin-bottom: 16px; padding: 18px 24px; box-sizing: border-box; }
    .admin-navbar-logo { height: 42px; width: auto; flex-shrink: 0; margin-left: 6px; }
    .admin-navbar-toggle { display: none; background: none; border: 1px solid #dee2e6; border-radius: 8px; color: var(--teleport-dark); font-size: 1.3rem; line-height: 1; width: 42px; height: 42px; align-items: center; justify-content: center; cursor: pointer; }
    .admin-navbar-menu { display: flex; flex-wrap: wrap; gap: 6px; transition: max-height .2s ease; }
    .admin-navbar-menu .btn { padding: 3px 8px; font-size: 0.7rem; border-radius: 6px; }
    .admin-navbar-menu .btn i { font-size: 0.75rem; }
    .admin-navbar-menu .superadmin-only-badge { font-size: 0.58rem; padding: 1px 4px; }
    .admin-welcome-row { margin-bottom: 14px; }
    .admin-welcome { font-weight: 700; font-size: 0.9rem; color: var(--teleport-dark); }
    .admin-welcome span { color: #dc3545; }

    .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
    .stat-card { background: #f8f9fa; border-radius: 10px; padding: 10px 8px; text-align: center; border: 1px solid #e9ecef; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
    .stat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
    .stat-card:active { transform: translateY(0); }
    .stat-number { font-size: 1.4rem; font-weight: 900; line-height: 1; }
    .stat-label { font-size: 0.68rem; color: #6c757d; font-weight: 600; margin-top: 3px; }
    .stat-card.total { background: #eef3ff; border-color: #bfdbfe; }
    .stat-card.total .stat-number { color: var(--teleport-blue); }
    .stat-card.terpasang { background: #ecfdf5; border-color: #86efac; }
    .stat-card.terpasang .stat-number { color: #059669; }
    .stat-card.proses { background: #fef3c7; border-color: #fcd34d; }
    .stat-card.proses .stat-number { color: #d97706; }
    .stat-card.survey { background: #e0f7fa; border-color: #67e8f9; }
    .stat-card.survey .stat-number { color: #0891b2; }
    .stat-card.confirmed { background: #f3eaff; border-color: #c4b5fd; }
    .stat-card.confirmed .stat-number { color: #7c3aed; }
    .stat-card.batal { background: #fee2e2; border-color: #fca5a5; }
    .stat-card.batal .stat-number { color: #dc2626; }

    .admin-filter-bar { margin-bottom: 10px; }
    .admin-filter-row1 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
    .admin-search-input { flex: 1; min-width: 160px; border: 1.5px solid #ced4da; border-radius: 8px; padding: 7px 12px; font-size: 0.85rem; outline: none; }
    .admin-search-input:focus { border-color: var(--teleport-blue); }
    .filter-status-wrap { display: flex; gap: 5px; flex-wrap: wrap; }
    .filter-status-btn { border: 1.5px solid #dee2e6; border-radius: 20px; padding: 4px 11px; font-size: 0.72rem; font-weight: 700; cursor: pointer; background: white; transition: all 0.2s; user-select: none; white-space: nowrap; }
    .filter-status-btn.active { background: var(--teleport-blue); color: white; border-color: var(--teleport-blue); }
    .admin-filter-row2 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .filter-tgl-group { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
    .filter-tgl-side { display: flex; align-items: center; gap: 4px; }
    .filter-tgl-label { font-size: .68rem; font-weight: 700; color: #94a3b8; white-space: nowrap; }
    .filter-tgl-side select.filter-dropdown { min-width: 68px; width: auto; }
    .filter-dropdown { border: 1.5px solid #ced4da; border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; font-weight: 600; background: white; color: #333; outline: none; cursor: pointer; transition: border-color 0.2s; width: 100%; }
    .filter-dropdown:focus { border-color: var(--teleport-blue); }
    .filter-dropdown.active-filter { border-color: var(--teleport-blue); background: #eef3ff; color: var(--teleport-blue); }
    .filter-dropdown.active-filter-green { border-color: #198754; background: #f0fdf4; color: #065f46; }
    .filter-dropdown.active-filter-purple { border-color: #6f42c1; background: #f3f0ff; color: #4c1d95; }
    .active-filter-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
    .filter-tag { display: inline-flex; align-items: center; gap: 4px; background: #eef3ff; border: 1px solid #bfdbfe; color: #1e40af; border-radius: 14px; padding: 3px 10px 3px 8px; font-size: 0.72rem; font-weight: 700; }
    .filter-tag.tag-green { background: #f0fdf4; border-color: #86efac; color: #065f46; }
    .filter-tag.tag-purple { background: #f3f0ff; border-color: #c4b5fd; color: #4c1d95; }
    .filter-tag-remove { background: none; border: none; padding: 0; cursor: pointer; font-size: 0.78rem; line-height: 1; color: inherit; opacity: 0.7; margin-left: 2px; }
    .filter-tag-remove:hover { opacity: 1; }

    .admin-order-list { display: flex; flex-direction: column; gap: 10px; }
    .order-card { border: 1.5px solid #e9ecef; border-radius: 12px; background: white; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; }
    .order-card:hover { border-color: #bfdbfe; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
    .order-card-header { display: flex; align-items: center; padding: 8px 12px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; cursor: pointer; gap: 10px; min-height: 58px; }
    .ktp-thumb-wrap { flex-shrink: 0; width: 40px; height: 50px; border-radius: 5px; overflow: hidden; border: 2px solid #dee2e6; background: #f0f4ff; display: flex; align-items: center; justify-content: center; position: relative; }
    .ktp-thumb-wrap.has-foto { border-color: #198754; }
    .ktp-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .ktp-no-foto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 100%; height: 100%; color: #adb5bd; text-align: center; }
    .ktp-no-foto i { font-size: 1rem; }
    .ktp-no-foto span { font-size: 0.48rem; font-weight: 600; line-height: 1.1; }
    .order-card-info { flex: 1; min-width: 0; }
    .order-card-id { font-family: monospace; font-size: 0.68rem; color: #6c757d; }
    .order-card-name { font-weight: 800; font-size: 0.88rem; color: var(--teleport-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .order-card-paket { font-size: 0.7rem; color: #6c757d; }
    .order-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
    .badge-status { font-size: 0.68rem; padding: 3px 8px; border-radius: 12px; font-weight: 700; white-space: nowrap; }
    .badge-PROSES    { background: #fef3c7; color: #92400e; }
    .badge-SURVEY    { background: #eef2ff; color: #3730a3; }
    .badge-CONFIRMED { background: #d1fae5; color: #065f46; }
    .badge-BATAL     { background: #fee2e2; color: #991b1b; }
    .badge-TERPASANG { background: #ecfdf5; color: #064e3b; }
    .order-card-body { padding: 12px 14px; display: none; }
    .order-card-body.show { display: block; }
    /* Focused card mode */
    .order-cards-list.focused-mode .order-card { display: none; }
    .order-cards-list.focused-mode .order-card.card-focused { display: block; }
    .order-card.card-focused { border-color: #0d6efd !important; box-shadow: 0 0 0 3px rgba(13,110,253,.15), 0 4px 20px rgba(0,0,0,.1) !important; }
    .card-close-btn { display: none; background: rgba(220,53,69,.12); border: 1.5px solid rgba(220,53,69,.3); border-radius: 50%; width: 28px; height: 28px; align-items: center; justify-content: center; cursor: pointer; color: #dc3545; font-size: 0.85rem; flex-shrink: 0; transition: all .2s; }
    .card-close-btn:hover { background: rgba(220,53,69,.22); transform: scale(1.1); }
    .card-focused .card-close-btn { display: flex; }

    .foto-body-wrap { margin-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; border: 1.5px solid #dee2e6; border-bottom: none; }
    .foto-body-header { padding: 7px 12px; background: #f8f9fa; border-bottom: 1px solid #e9ecef; display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 700; color: #495057; }
    .foto-body-img-wrap { background: #f0f0f0; position: relative; min-height: 60px; display: flex; align-items: center; justify-content: center; }
    .foto-body-img { width: 100%; max-height: 200px; object-fit: contain; display: block; cursor: pointer; }
    .foto-body-no-foto { padding: 20px; text-align: center; color: #adb5bd; font-size: 0.78rem; }
    .foto-body-no-foto i { font-size: 2rem; display: block; margin-bottom: 6px; }
    .foto-body-actions { display: flex; gap: 6px; padding: 8px 10px; background: #f8f9fa; border-top: 1px solid #e9ecef; flex-wrap: wrap; align-items: center; }
    .edit-foto-panel { background: #fff8e1; border: 1.5px solid #fcd34d; border-radius: 0 0 10px 10px; padding: 14px; display: none; border-top: 1px solid #fcd34d; }
    .edit-foto-panel.show { display: block; }
    .edit-foto-panel-title { font-size: 0.8rem; font-weight: 700; color: #92400e; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
    .edit-foto-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
    .edit-foto-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 8px; border: 2px solid #dee2e6; border-radius: 8px; background: white; cursor: pointer; transition: all 0.2s; font-weight: 700; font-size: 0.78rem; color: #444; position: relative; overflow: hidden; user-select: none; }
    .edit-foto-btn i { font-size: 1.5rem; }
    .edit-foto-btn.btn-kamera-edit { border-color: #0d6efd; color: #0d6efd; background: #eef3ff; }
    .edit-foto-btn.btn-galeri-edit { border-color: #6f42c1; color: #6f42c1; background: #f3f0ff; }
    .edit-foto-btn input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
    .edit-foto-preview-wrap { display: none; margin-bottom: 10px; }
    .edit-foto-preview-wrap.show { display: block; }
    .edit-foto-preview-wrap img { width: 100%; max-height: 160px; object-fit: contain; border-radius: 8px; border: 2px solid #198754; display: block; }
    .edit-foto-status { font-size: 0.75rem; margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(0,0,0,0.04); display: flex; align-items: center; gap: 6px; color: #555; }
    .edit-foto-progress { margin-top: 6px; display: none; }
    .edit-foto-progress.show { display: block; }
    .edit-foto-progress .progress { height: 5px; border-radius: 3px; }
    .edit-foto-actions { display: flex; gap: 8px; margin-top: 10px; }

    .report-actions-bar { display: flex; gap: 6px; padding: 8px 10px; background: #f0f4ff; border: 1.5px solid #bfdbfe; border-radius: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
    .report-actions-label { font-size: 0.7rem; font-weight: 700; color: #1e40af; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
    .btn-report { border: none; border-radius: 6px; padding: 5px 10px; font-size: 0.72rem; font-weight: 700; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 4px; }
    .btn-report-copy { background: #e0f2fe; color: #0369a1; }
    .btn-report-wa { background: #dcfce7; color: #15803d; }
    .btn-report-dl { background: #ede9fe; color: #6d28d9; }

    .report-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: flex-start; justify-content: center; padding: 16px; overflow-y: auto; }
    .report-modal-box { background: white; border-radius: 14px; padding: 18px; max-width: 580px; width: 100%; margin: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
    .report-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
    .report-modal-title { font-weight: 800; font-size: 0.9rem; color: var(--teleport-dark); display: flex; align-items: center; gap: 6px; }
    .report-modal-close { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 0.85rem; }
    .report-modal-textarea { width: 100%; height: 360px; font-family: 'Courier New', monospace; font-size: 0.73rem; border: 1px dashed #ced4da; border-radius: 8px; padding: 12px; background: #f8f9fa; color: #333; line-height: 1.6; resize: vertical; }
    .report-modal-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

    .detail-row { display: flex; gap: 6px; margin-bottom: 6px; font-size: 0.82rem; }
    .detail-label { color: #6c757d; font-weight: 600; min-width: 90px; flex-shrink: 0; }
    .detail-value { color: #333; word-break: break-word; }

    .quick-status-selector { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
    .qs-btn { border: 2px solid #dee2e6; border-radius: 16px; padding: 4px 12px; font-size: 0.72rem; font-weight: 700; cursor: pointer; background: white; transition: all 0.15s; user-select: none; }
    .qs-btn:active { transform: scale(0.95); }
    .qs-btn.qs-PROSES    { border-color: #f59e0b; color: #92400e; }
    .qs-btn.qs-PROSES.selected { background: #fef3c7; }
    .qs-btn.qs-SURVEY    { border-color: #6366f1; color: #3730a3; }
    .qs-btn.qs-SURVEY.selected { background: #eef2ff; }
    .qs-btn.qs-CONFIRMED { border-color: #10b981; color: #065f46; }
    .qs-btn.qs-CONFIRMED.selected { background: #d1fae5; }
    .qs-btn.qs-TERPASANG { border-color: #059669; color: #064e3b; }
    .qs-btn.qs-TERPASANG.selected { background: #ecfdf5; }
    .qs-btn.qs-BATAL     { border-color: #ef4444; color: #991b1b; }
    .qs-btn.qs-BATAL.selected { background: #fee2e2; }
    .qs-select { border: 2px solid #dee2e6; border-radius: 16px; padding: 5px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer; background: white; transition: all 0.15s; max-width: 100%; }
    .qs-select:disabled { opacity: 0.6; cursor: default; }
    .qs-select.qs-PROSES    { border-color: #f59e0b; color: #92400e; background: #fef3c7; }
    .qs-select.qs-SURVEY    { border-color: #6366f1; color: #3730a3; background: #eef2ff; }
    .qs-select.qs-CONFIRMED { border-color: #10b981; color: #065f46; background: #d1fae5; }
    .qs-select.qs-TERPASANG { border-color: #059669; color: #064e3b; background: #ecfdf5; }
    .qs-select.qs-BATAL     { border-color: #ef4444; color: #991b1b; background: #fee2e2; }

    .card-edit-form { background: #f8f9fa; border-radius: 10px; padding: 14px; margin-top: 12px; border: 1px solid #e9ecef; }
    .card-edit-form .form-label { font-size: 0.78rem; margin-bottom: 3px; }
    .card-edit-form .form-control, .card-edit-form .form-select { font-size: 0.82rem; padding: 6px 10px; }
    .card-edit-form textarea { resize: vertical; min-height: 60px; }
    .saving-indicator { display: inline-flex; align-items: center; gap: 5px; font-size: 0.73rem; color: #6c757d; }
    .loading-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: #1e40af; background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 12px; padding: 3px 10px; white-space: nowrap; }
    .loading-badge.hidden { display: none; }
    .loading-badge .spinner-border { width: 0.75rem; height: 0.75rem; border-width: 2px; }

    /* Jenis Koneksi toggle in teknis form */
    .teknis-jenis-toggle { display: flex; gap: 8px; margin-bottom: 12px; }
    .teknis-jenis-btn { flex: 1; border: 2px solid #dee2e6; border-radius: 8px; padding: 8px 6px; font-size: 0.78rem; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.2s; background: white; color: #555; }
    .teknis-jenis-btn.active-fo { border-color: #0d6efd; background: #eef3ff; color: #0d6efd; }
    .teknis-jenis-btn.active-wl { border-color: #198754; background: #f0fdf4; color: #198754; }
    .teknis-section-wl { display: none; }
    .teknis-section-wl.show { display: block; }


    /* ========== USER MANAGEMENT ========== */
    .user-card{border:1px solid #e9ecef;border-radius:10px;padding:12px 14px;margin-bottom:8px;background:white;transition:box-shadow 0.2s}
    .user-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.07)}
    .user-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;flex-shrink:0}
    .avatar-superadmin{background:linear-gradient(135deg,#dc3545,#c92a2a);color:white}
    .avatar-admin{background:linear-gradient(135deg,#0d6efd,#0054b4);color:white}
    .avatar-supervisor{background:linear-gradient(135deg,#f59e0b,#d97706);color:white}
    .avatar-operator{background:linear-gradient(135deg,#198754,#146c43);color:white}
    .avatar-viewer{background:linear-gradient(135deg,#6c757d,#495057);color:white}
    .role-badge{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:8px;text-transform:uppercase}
    .role-superadmin{background:#fee2e2;color:#991b1b}.role-admin{background:#dbeafe;color:#1e40af}
    .role-supervisor{background:#fef3c7;color:#92400e}.role-operator{background:#d1fae5;color:#065f46}
    .role-viewer{background:#f3f4f6;color:#374151}
    .perm-chip{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;font-weight:600;background:#f0f4ff;color:#3b5bdb;border-radius:6px;padding:2px 6px;margin:1px}
    .perm-chip.denied{background:#fff1f0;color:#c92a2a}
    .user-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999;display:flex;align-items:flex-start;justify-content:center;padding:16px;overflow-y:auto}
    .user-modal-box{background:white;border-radius:14px;padding:20px;max-width:480px;width:100%;margin:auto;box-shadow:0 8px 32px rgba(0,0,0,.2)}
    .perm-toggle-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:8px}
    .perm-toggle-row{display:flex;align-items:center;justify-content:space-between;background:#f8f9fa;border-radius:6px;padding:5px 9px;font-size:.73rem;font-weight:600}
    .tog{position:relative;display:inline-block;width:34px;height:19px}
    .tog input{opacity:0;width:0;height:0}
    .tog-slider{position:absolute;cursor:pointer;inset:0;background:#ccc;transition:.3s;border-radius:19px}
    .tog-slider:before{position:absolute;content:"";height:13px;width:13px;left:3px;bottom:3px;background:white;transition:.3s;border-radius:50%}
    input:checked+.tog-slider{background:#0d6efd}
    input:checked+.tog-slider:before{transform:translateX(15px)}
    /* ========== SURVEY — UISP STYLE ========== */
    .survey-overlay{position:fixed;inset:0;background:rgba(10,18,40,.75);z-index:9998;display:flex;align-items:stretch;justify-content:center;padding:0;overflow:hidden}
    .survey-box{background:#f0f2f5;border-radius:0;width:100%;height:100vh;height:100dvh;margin:0;overflow:hidden;box-shadow:none;display:flex;flex-direction:column}
    .survey-hdr{background:linear-gradient(135deg,#0d1b2e 0%,#1a3a5c 100%);color:white;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
    .survey-hdr-left{display:flex;align-items:center;gap:10px}
    .survey-hdr-icon{width:32px;height:32px;background:rgba(255,255,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}
    .survey-hdr-text .survey-hdr-title{font-weight:800;font-size:.88rem;color:#fff;line-height:1.2}
    .survey-hdr-text .survey-hdr-sub{font-size:.68rem;color:rgba(255,255,255,.55);margin-top:1px}
    .survey-close{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:7px;color:rgba(255,255,255,.8);padding:4px 11px;cursor:pointer;font-size:.78rem;transition:all .2s}
    .survey-close:hover{background:rgba(255,255,255,.2)}
    .survey-body{padding:12px;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
    /* Soft Survey picker tetap dialog kecil di tengah, bukan full screen seperti modal survey utama */
    .survey-overlay.survey-picker-overlay{align-items:center !important;padding:16px !important;}
    .survey-box.survey-picker-box{height:auto !important;max-height:90vh;border-radius:14px !important;box-shadow:0 12px 50px rgba(0,0,0,.4) !important;margin:auto !important;flex-direction:column !important;}
    .survey-picker-box .survey-body{flex:0 1 auto;overflow-y:auto;}
    .stabs{display:flex;gap:2px;margin-bottom:12px;background:#e4e7ed;border-radius:9px;padding:3px}
    .stab{background:none;border:none;padding:6px 11px;font-size:.74rem;font-weight:700;color:#6c757d;cursor:pointer;border-radius:7px;transition:all .2s;flex:1;text-align:center}
    .stab.active{background:white;color:#0d6efd;box-shadow:0 1px 4px rgba(0,0,0,.12)}
    .stab-content{display:none}.stab-content.active{display:block}

    /* Map */
    #surveyMap{width:100%;height:300px;border-radius:10px;border:none;box-shadow:0 2px 8px rgba(0,0,0,.12)}

    /* UISP Device Panel — Fiber */
    .uisp-panel{background:#1a2236;border-radius:10px;color:white;padding:0;overflow:hidden;margin-bottom:10px}
    .uisp-panel-inner{display:flex;gap:0;min-height:110px}
    .uisp-device{flex:1;padding:10px 12px;border-right:1px solid rgba(255,255,255,.08);min-width:0}
    .uisp-device:last-child{border-right:none}
    .uisp-device-label{font-size:.6rem;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}
    .uisp-device-name{font-size:.82rem;font-weight:800;color:#fff;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .uisp-device-sub{font-size:.65rem;color:rgba(255,255,255,.5);margin-bottom:2px}
    .uisp-device-val{font-size:.72rem;color:#5bc8f5;font-weight:700}
    .uisp-device-img{width:42px;height:42px;object-fit:contain;filter:brightness(1.1);margin-bottom:4px}
    .uisp-center{flex:0 0 auto;padding:10px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:150px;border-right:1px solid rgba(255,255,255,.08)}
    .uisp-capacity-bar-wrap{width:100%;margin:5px 0 3px}
    .uisp-bar-label{font-size:.58rem;color:rgba(255,255,255,.5);margin-bottom:2px;display:flex;justify-content:space-between}
    .uisp-bar-track{background:rgba(255,255,255,.1);border-radius:3px;height:5px;overflow:hidden}
    .uisp-bar-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#0d6efd,#00d4ff);transition:width .5s ease}
    .uisp-bar-fill.warn{background:linear-gradient(90deg,#f59e0b,#fcd34d)}
    .uisp-bar-fill.ok{background:linear-gradient(90deg,#10b981,#6ee7b7)}
    .uisp-bar-fill.bad{background:linear-gradient(90deg,#ef4444,#fca5a5)}
    .uisp-signal-row{display:flex;align-items:center;gap:6px;margin:3px 0}
    .uisp-signal-label{font-size:.6rem;color:rgba(255,255,255,.5);flex:1}
    .uisp-signal-val{font-size:.75rem;font-weight:800;color:#fff}
    /* Signal: -1 s/d -50 dBm = Hijau, -50 s/d -89 dBm = Kuning, -90+ = Merah */
    /* Signal: -1~-30 Biru, -30~-60 Hijau, -60~-90 Kuning, <-90 Merah */
    .uisp-signal-val.best{color:#38bdf8}
    .uisp-signal-val.good{color:#10b981}
    .uisp-signal-val.warn{color:#f59e0b}
    .uisp-signal-val.bad{color:#ef4444}
    /* Badge pill signal */
    .sig-badge{display:inline-block;padding:1px 7px;border-radius:20px;font-size:.7rem;font-weight:800;line-height:1.6}
    .sig-badge.best{background:rgba(56,189,248,.18);color:#38bdf8;border:1px solid rgba(56,189,248,.35)}
    .sig-badge.good{background:rgba(16,185,129,.18);color:#10b981;border:1px solid rgba(16,185,129,.35)}
    .sig-badge.warn{background:rgba(245,158,11,.18);color:#f59e0b;border:1px solid rgba(245,158,11,.35)}
    .sig-badge.bad{background:rgba(239,68,68,.18);color:#ef4444;border:1px solid rgba(239,68,68,.35)}
    .uisp-dist-line{font-size:.62rem;color:rgba(255,255,255,.4);text-align:center;margin-top:4px;border-top:1px solid rgba(255,255,255,.08);padding-top:5px;width:100%}
    .uisp-dist-line b{color:#5bc8f5}
    .uisp-capacity-big{font-size:1.05rem;font-weight:900;color:#fff;text-align:center;line-height:1}
    .uisp-capacity-sub{font-size:.6rem;color:rgba(255,255,255,.5);text-align:center;margin-top:1px}
    .uisp-status-chip{display:inline-flex;align-items:center;gap:4px;font-size:.62rem;font-weight:700;border-radius:6px;padding:2px 7px;margin-top:4px}
    .uisp-status-chip.ok{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.3)}
    .uisp-status-chip.warn{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.3)}

    /* Elevation Profile — UISP style */
    .elev-wrap{background:#0d1b2e;border-radius:10px;padding:10px;margin-top:10px}
    .elev-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
    .elev-header-left{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:5px}
    .elev-fresnel-badge{font-size:.6rem;background:rgba(91,200,245,.1);color:#5bc8f5;border:1px solid rgba(91,200,245,.25);border-radius:5px;padding:1px 6px}
    .elev-dl-img-btn{font-size:.62rem;font-weight:700;background:rgba(91,200,245,.12);color:#5bc8f5;border:1px solid rgba(91,200,245,.3);border-radius:6px;padding:3px 8px;display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
    .elev-dl-img-btn:hover{background:rgba(91,200,245,.22)}
    .elev-dl-img-btn:active{transform:translateY(1px)}
    .uisp-mini-select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.25);border-radius:4px;color:inherit;font:inherit;font-size:.68rem;padding:1px 2px;max-width:128px;}
    #uispWirelessPanel .uisp-signal-row{flex-wrap:wrap;}
    #uispWirelessPanel .uisp-signal-row .uisp-mini-select{max-width:100%;width:100%;white-space:normal;}
    #uispWirelessPanel .uisp-device[style*="text-align:right"] .uisp-mini-select{text-align:right;}
    #uispWirelessPanel .uisp-signal-row .uisp-signal-val{flex:1 1 100%;min-width:0;}
    #uispWirelessPanel .uisp-signal-row .uisp-signal-label{flex:0 0 auto;}
    .uisp-mini-select option{color:#1a2236;}
    #elevChart{width:100%;height:220px}
    /* Stat grid — 3 col default, 4 col desktop */
    .elev-stats-uisp{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
    .elev-stat-box{background:rgba(255,255,255,.05);border-radius:7px;padding:7px 9px;text-align:center}
    .elev-stat-val{font-size:.85rem;font-weight:800;color:#fff}
    .elev-stat-lbl{font-size:.6rem;color:rgba(255,255,255,.45);margin-top:1px}

    /* Fiber network list */
    .fiber-elem{display:flex;align-items:center;gap:8px;background:white;border:1px solid #e4e7ed;border-radius:8px;padding:7px 11px;margin-bottom:5px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
    .fiber-elem-body{flex:1;min-width:0}
    .fiber-elem-name{font-size:.76rem;font-weight:700;color:#1a2236}
    .fiber-elem-det{font-size:.67rem;color:#6c757d}
    .fiber-elem-cond{font-size:.66rem;font-weight:700;margin-top:2px;}
    .fiber-elem-cond.ok{color:#0f6e56}
    .fiber-elem-cond.warn{color:#854f0b}
    .fiber-elem-cond.bad{color:#a32d2d}
    .dist-chip{background:#d1fae5;color:#065f46;font-size:.63rem;font-weight:700;padding:2px 7px;border-radius:7px;white-space:nowrap}
    .dist-chip.warn{background:#fef3c7;color:#92400e}
    .dist-chip.bad{background:#fee2e2;color:#991b1b}

    /* BTS grid */
    .bts-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px;max-height:300px;overflow-y:auto;padding-right:4px;}
    .bts-card{border:1.5px solid #dee2e6;border-radius:9px;padding:8px 7px;cursor:pointer;transition:all .2s;text-align:center;background:white}
    .bts-card:hover{border-color:#0d6efd;background:#eef3ff}
    .bts-card.sel{border-color:#0d6efd;background:#dbeafe;box-shadow:0 0 0 2px rgba(13,110,253,.15)}
    .bts-card-name{font-size:.69rem;font-weight:700;color:#1a2236;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .bts-card-dist{font-size:.62rem;color:#6c757d;margin-top:1px}

    /* Result rows */
    .survey-result-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid #e9ecef;font-size:.78rem}
    .survey-result-row:last-child{border:none}
    .srl{color:#6c757d;font-weight:600}.srv{font-weight:700;color:#333}
    .srv.ok{color:#059669}.srv.warn{color:#d97706}.srv.bad{color:#dc3545}

    /* Photos */
    .photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
    .photo-card{border:2px dashed #ced4da;border-radius:10px;padding:10px;text-align:center;cursor:pointer;transition:all .2s;background:white}
    .photo-card:hover{border-color:#0d6efd;background:#eef3ff}
    .photo-card.has-img{border:2px solid #198754;background:#f0fdf4}
    .photo-card img{width:100%;height:72px;object-fit:cover;border-radius:6px;display:block;margin-bottom:3px}
    .photo-lbl{font-size:.69rem;font-weight:700;color:#6c757d}

    .btn-survey-open{background:linear-gradient(135deg,#0d6efd,#0054b4);border:none;border-radius:9px;color:white;font-weight:700;font-size:.78rem;padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .2s;white-space:nowrap}
    .btn-survey-open:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(13,110,253,.35)}
    .survey-dl-btn{background:linear-gradient(135deg,#6f42c1,#5a32a3);border:none;border-radius:8px;color:white;font-weight:700;font-size:.78rem;padding:7px 13px;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .2s}
    .elev-stats{background:#f8f9fa;border-radius:9px;padding:10px;margin-top:8px}


    /* ========== LANDING PAGE ========== */
    body.landing-bg {
      background: linear-gradient(135deg, #0a1628 0%, #1a2e55 40%, #0d6efd 100%);
      min-height: 100vh;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #landingPage {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px 16px 40px;
      position: relative;
      overflow: hidden;
    }
    /* animated bg circles */
    #landingPage::before {
      content: '';
      position: fixed;
      top: -120px; right: -120px;
      width: 400px; height: 400px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(13,110,253,.25) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    #landingPage::after {
      content: '';
      position: fixed;
      bottom: -100px; left: -100px;
      width: 350px; height: 350px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(25,135,84,.2) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }
    .landing-inner { position: relative; z-index: 1; width: 100%; max-width: 400px; }
    .landing-logo-wrap {
      text-align: center;
      margin-bottom: 12px;
      animation: fadeSlideDown .6s ease both;
    }
    .landing-logo {
      max-width: 180px;
      height: auto;
      filter: drop-shadow(0 4px 16px rgba(255,255,255,.25));
    }
    .landing-logo-fallback {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: linear-gradient(135deg,#0d6efd,#198754);
      border-radius: 16px;
      padding: 14px 22px;
      box-shadow: 0 8px 32px rgba(13,110,253,.4);
    }
    .landing-logo-fallback span {
      font-size: 1.6rem;
      font-weight: 900;
      color: white;
      letter-spacing: 1px;
    }
    .landing-tagline {
      text-align: center;
      margin-bottom: 8px;
      animation: fadeSlideDown .7s ease both;
    }
    .landing-tagline h1 {
      font-size: 1.35rem;
      font-weight: 900;
      color: white;
      margin: 0;
      letter-spacing: .5px;
      text-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
    .landing-tagline p {
      font-size: .82rem;
      color: rgba(255,255,255,.7);
      margin: 5px 0 0;
    }
    .landing-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 20px 0 16px;
      animation: fadeSlideUp .8s ease both;
    }
    .landing-divider::before, .landing-divider::after {
      content:'';
      flex:1;
      height:1px;
      background: rgba(255,255,255,.2);
    }
    .landing-divider span { font-size:.7rem; color:rgba(255,255,255,.5); font-weight:600; white-space:nowrap; }

    /* GUEST CARD */
    .landing-card-guest {
      background: white;
      border-radius: 20px;
      padding: 28px 24px;
      text-align: center;
      box-shadow: 0 12px 48px rgba(0,0,0,.3);
      cursor: pointer;
      transition: all .25s ease;
      margin-bottom: 14px;
      animation: fadeSlideUp .7s ease both;
      border: 2px solid transparent;
      position: relative;
      overflow: hidden;
    }
    .landing-card-guest::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, #0d6efd, #198754);
    }
    .landing-card-guest:hover {
      transform: translateY(-4px);
      box-shadow: 0 20px 60px rgba(0,0,0,.4);
      border-color: rgba(13,110,253,.3);
    }
    .landing-card-guest:active { transform: translateY(-1px); }
    .landing-guest-icon {
      width: 72px; height: 72px;
      background: linear-gradient(135deg, #0d6efd, #0054b4);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 14px;
      font-size: 1.8rem;
      box-shadow: 0 6px 20px rgba(13,110,253,.4);
    }
    .landing-card-guest h2 {
      font-size: 1.2rem; font-weight: 900; color: #1a2236; margin: 0 0 6px;
    }
    .landing-card-guest p {
      font-size: .81rem; color: #6c757d; margin: 0 0 18px; line-height: 1.5;
    }
    .btn-enter-guest {
      background: linear-gradient(135deg, #0d6efd 0%, #0054b4 100%);
      color: white; border: none;
      border-radius: 12px;
      padding: 13px 0;
      width: 100%;
      font-size: .95rem; font-weight: 800;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: all .2s;
      box-shadow: 0 4px 16px rgba(13,110,253,.4);
      letter-spacing: .3px;
    }
    .btn-enter-guest:hover { box-shadow: 0 6px 24px rgba(13,110,253,.55); }
    .landing-features {
      display: flex; gap: 6px; justify-content: center; flex-wrap: wrap;
      margin-top: 14px;
    }
    .lf-chip {
      background: #f0f6ff; color: #0d6efd;
      font-size: .65rem; font-weight: 700;
      border-radius: 20px; padding: 3px 10px;
      border: 1px solid #c7dcff;
    }

    /* LACAK STATUS ORDER CARD */
    .landing-card-track {
      width: 100%;
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 14px;
      padding: 14px 16px;
      display: flex; align-items: center; gap: 12px;
      cursor: pointer;
      transition: all .25s;
      animation: fadeSlideUp .9s ease both;
      text-align: left;
      margin-bottom: 14px;
    }
    .landing-card-track:hover {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.35);
      transform: translateY(-2px);
    }
    .landing-card-track:active { transform: translateY(0); }
    .track-card-icon {
      width: 40px; height: 40px; flex-shrink: 0;
      background: rgba(13,110,253,.25);
      border: 1.5px solid rgba(13,110,253,.4);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; color: #8fc4ff;
    }
    .track-card-text { flex: 1; min-width: 0; }
    .track-card-text strong { display: block; font-size: .85rem; font-weight: 800; color: white; margin-bottom: 2px; }
    .track-card-text span { font-size: .72rem; color: rgba(255,255,255,.55); }
    .track-card-arrow { color: rgba(255,255,255,.4); font-size: .9rem; }

    /* HASIL LACAK STATUS (dirender di dalam SweetAlert2) */
    .lacak-status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 999px; font-weight: 800; font-size: .85rem; margin: 6px 0 14px; }
    .lacak-info-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-bottom: 1px solid #e9ecef; font-size: .82rem; text-align: left; }
    .lacak-info-row:last-child { border-bottom: none; }
    .lacak-info-row span:first-child { color: #6c757d; font-weight: 600; }
    .lacak-info-row span:last-child { color: var(--teleport-dark); font-weight: 700; text-align: right; }
    .lacak-desc-box { background: #f8f9fa; border-radius: 10px; padding: 10px 12px; font-size: .78rem; color: #495057; margin-top: 12px; text-align: left; line-height: 1.5; }
    .lacak-stepper { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
    .lacak-step { flex: 1; text-align: center; position: relative; }
    .lacak-step-dot { width: 22px; height: 22px; border-radius: 50%; background: #e9ecef; color: #adb5bd; display: flex; align-items: center; justify-content: center; margin: 0 auto 4px; font-size: .68rem; font-weight: 800; }
    .lacak-step-label { font-size: .6rem; color: #adb5bd; font-weight: 700; }
    .lacak-step::after { content:''; position:absolute; top:11px; left:50%; width:100%; height:2px; background:#e9ecef; z-index:-1; }
    .lacak-step:last-child::after { display:none; }
    .lacak-step.done .lacak-step-dot { background: #198754; color:#fff; }
    .lacak-step.done .lacak-step-label { color: #198754; }
    .lacak-step.done::after { background: #198754; }
    .lacak-step.active .lacak-step-dot { background: #0d6efd; color:#fff; box-shadow: 0 0 0 4px rgba(13,110,253,.2); }
    .lacak-step.active .lacak-step-label { color: #0d6efd; }

    /* ADMIN CARD */

    /* ==================== PRICE MANAGEMENT ==================== */
    #priceMgmtPanel .price-card-item { background:#fff; border:1.5px solid #e9ecef; border-radius:10px; padding:10px 12px; display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    #priceMgmtPanel .price-card-item.hidden-card { opacity:.55; background:#f8f9fa; }
    .price-card-speed { font-weight:800; font-size:.85rem; color:#1a2236; flex:1; }
    .price-card-harga-val { font-weight:700; font-size:.85rem; color:#198754; min-width:90px; text-align:right; }
    .price-card-actions { display:flex; gap:6px; align-items:center; }
    .price-toggle-check { width:38px; height:20px; position:relative; cursor:pointer; flex-shrink:0; }
    .price-toggle-check input { display:none; }
    .price-toggle-track { position:absolute; inset:0; background:#ced4da; border-radius:20px; transition:.2s; }
    .price-toggle-track::after { content:''; position:absolute; width:16px; height:16px; background:white; border-radius:50%; top:2px; left:2px; transition:.2s; }
    .price-toggle-check input:checked + .price-toggle-track { background:#198754; }
    .price-toggle-check input:checked + .price-toggle-track::after { left:20px; }

    /* ==================== PROMO SLIDER (landing page banner) ==================== */
    .promo-slider-wrap { position:relative; margin:16px 0 4px; }
    .promo-slider-banner { position:relative; overflow:hidden; border-radius:18px; padding:22px 22px; margin:16px 0 4px; min-height:118px; display:flex; align-items:center; gap:16px; color:#fff; animation: promoSliderPop .5s ease; }
    .promo-slider-wrap .promo-slider-banner { display:none; margin:0; animation:none; }
    .promo-slider-wrap .promo-slider-banner.active { display:flex; animation: promoSliderPop .5s ease; }
    .promo-slider-dots { display:flex; justify-content:center; gap:6px; margin-top:9px; }
    .promo-slider-dot { width:7px; height:7px; border-radius:50%; background:#d1d5db; cursor:pointer; transition:.25s; }
    .promo-slider-dot.active { width:20px; border-radius:4px; background:#f97316; }
    .promo-slider-icon { font-size:2.6rem; flex-shrink:0; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); animation: promoSliderBounce 1.8s ease-in-out infinite; }
    .promo-slider-text { flex:1; min-width:0; position:relative; z-index:1; }
    .promo-slider-badge { display:inline-block; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.4); font-size:.68rem; font-weight:700; letter-spacing:.03em; padding:4px 11px; border-radius:999px; margin-bottom:8px; animation: promoSliderPulse 1.6s ease-in-out infinite; }
    .promo-slider-title { font-size:1.22rem; font-weight:800; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.15); }
    .promo-slider-subtitle { font-size:.82rem; opacity:.92; margin-top:5px; line-height:1.45; }
    .promo-slider-shine { position:absolute; top:0; left:-60%; width:50%; height:100%; background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); animation: promoSliderShine 3.2s ease-in-out infinite; }
    @keyframes promoSliderShine { 0% { left:-60%; } 55% { left:130%; } 100% { left:130%; } }
    @keyframes promoSliderBounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-4px); } }
    @keyframes promoSliderPulse { 0%,100% { opacity:1; } 50% { opacity:.6; } }
    @keyframes promoSliderPop { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
    .promo-theme-swatch { width:34px; height:34px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; transition:.15s; }
    .promo-theme-swatch:hover { transform:scale(1.1); }
    .promo-theme-swatch.active { border-color:#1a2236; box-shadow:0 0 0 2px #fff, 0 0 0 4px #1a2236; }
    @media (max-width:480px) {
      .promo-slider-banner { padding:18px 16px; gap:12px; border-radius:16px; min-height:100px; }
      .promo-slider-icon { font-size:2.1rem; }
      .promo-slider-title { font-size:1.05rem; }
      .promo-slider-subtitle { font-size:.75rem; }
    }

    /* Promo price overlay on regular card */
    .paket-card.has-promo-override { border-color:#f97316 !important; }
    .paket-harga-wrap { position:relative; }
    .paket-harga-original { font-size:.82rem; color:#adb5bd; font-weight:600; text-decoration:line-through; margin-top:2px; display:none; }
    .paket-harga-promo { font-size:.82rem; color:#ea580c; font-weight:800; margin-top:1px; display:none; }
    .paket-harga-promo-badge { font-size:.6rem; background:linear-gradient(90deg,#f97316,#ef4444); color:white; border-radius:6px; padding:1px 5px; margin-left:4px; font-weight:800; vertical-align:middle; }
    .paket-card.promo-price-shown .paket-harga { display:none; }
    .paket-card.promo-price-shown .paket-harga-original { display:block; }
    .paket-card.promo-price-shown .paket-harga-promo { display:block; }
    /* Promo code management */
    .promo-code-item { background:#fff7ed; border:1.5px solid #fed7aa; border-radius:10px; padding:10px 12px; display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .promo-code-item.inactive { opacity:.5; background:#f8f9fa; border-color:#dee2e6; }
    .promo-code-kode { font-family:'Courier New',monospace; font-weight:800; font-size:.85rem; color:#92400e; flex:1; }
    .promo-code-tipe { font-size:.72rem; color:#6c757d; }
    .promo-paket-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
    .promo-paket-row .promo-paket-kapasitas { flex: 2; }
    .promo-paket-row .promo-paket-harga { flex: 1; }
    .promo-paket-row .promo-paket-row-del { flex:0 0 auto; font-size:.72rem; padding:4px 9px; }
    /* Superadmin guard badge */
    .superadmin-only-badge { display:inline-flex; align-items:center; gap:4px; background:#fee2e2; color:#991b1b; border-radius:6px; padding:2px 7px; font-size:.65rem; font-weight:800; margin-left:6px; }
    .landing-card-admin {
      background: rgba(255,255,255,.08);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 14px;
      padding: 14px 18px;
      display: flex; align-items: center; gap: 14px;
      cursor: pointer;
      transition: all .25s;
      animation: fadeSlideUp .9s ease both;
      text-decoration: none;
    }
    .landing-card-admin:hover {
      background: rgba(255,255,255,.14);
      border-color: rgba(255,255,255,.35);
      transform: translateY(-2px);
    }
    .admin-card-icon {
      width: 42px; height: 42px; flex-shrink: 0;
      background: rgba(220,53,69,.25);
      border: 1.5px solid rgba(220,53,69,.4);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; color: #ff8fa0;
    }
    .admin-card-text { flex: 1; }
    .admin-card-text strong {
      display: block; font-size: .85rem; font-weight: 800; color: white; margin-bottom: 2px;
    }
    .admin-card-text span { font-size: .72rem; color: rgba(255,255,255,.55); }
    .admin-card-arrow { color: rgba(255,255,255,.4); font-size: .9rem; }
    .landing-footer {
      text-align: center;
      margin-top: 22px;
      font-size: .68rem;
      color: rgba(255,255,255,.35);
      animation: fadeSlideUp 1s ease both;
    }
    /* Animations */
    @keyframes fadeSlideDown {
      from { opacity:0; transform: translateY(-20px); }
      to   { opacity:1; transform: translateY(0); }
    }
    @keyframes fadeSlideUp {
      from { opacity:0; transform: translateY(20px); }
      to   { opacity:1; transform: translateY(0); }
    }
    /* Admin Login Modal from Landing */
    .admin-modal-overlay {
      position: fixed; inset: 0;
      background: rgba(10,22,40,.75);
      backdrop-filter: blur(6px);
      z-index: 99999;
      display: flex; align-items: center; justify-content: center;
      padding: 16px;
    }
    .admin-modal-box {
      background: white;
      border-radius: 18px;
      padding: 28px 24px;
      max-width: 360px; width: 100%;
      box-shadow: 0 16px 60px rgba(0,0,0,.4);
      animation: fadeSlideUp .3s ease both;
      position: relative;
    }
    .admin-modal-box::before {
      content:'';
      position: absolute;
      top:0; left:0; right:0;
      height: 4px;
      background: linear-gradient(90deg,#dc3545,#ff8c00);
      border-radius: 18px 18px 0 0;
    }
    .admin-modal-logo { text-align:center; margin-bottom:16px; }
    .admin-modal-title {
      font-size: 1.05rem; font-weight: 900; color: #1a2236; text-align:center; margin-bottom: 4px;
    }
    .admin-modal-sub {
      font-size: .75rem; color: #6c757d; text-align:center; margin-bottom: 20px;
    }
    .admin-modal-close {
      position: absolute; top: 14px; right: 14px;
      background: #f8f9fa; border: 1px solid #dee2e6;
      border-radius: 8px; padding: 3px 9px;
      cursor: pointer; font-size: .8rem; color: #6c757d;
    }
    .admin-modal-close:hover { background:#e9ecef; }
    .btn-login-submit {
      background: linear-gradient(135deg,#dc3545,#c92a2a);
      color: white; border: none; border-radius: 11px;
      padding: 12px; width: 100%;
      font-size: .92rem; font-weight: 800;
      cursor: pointer;
      display: flex; align-items:center; justify-content:center; gap:7px;
      transition: all .2s;
      box-shadow: 0 4px 14px rgba(220,53,69,.35);
      margin-top: 4px;
    }
    .btn-login-submit:hover { box-shadow: 0 6px 20px rgba(220,53,69,.5); }
    .btn-login-submit:disabled { opacity:.7; cursor:default; }
    .login-err { background:#fff1f0; border:1px solid #fca5a5; border-radius:8px; padding:8px 12px; font-size:.78rem; font-weight:600; color:#991b1b; margin-top:10px; display:none; }

    .hidden { display: none !important; }
    @media (max-width: 480px) {
      .paket-grid { grid-template-columns: repeat(2, 1fr); }
      .promo-grid { grid-template-columns: repeat(3, 1fr); }
      .card-main { padding: 14px 10px 22px; }
      .stats-grid { grid-template-columns: repeat(3, 1fr); }
      .ktp-thumb-wrap { width: 36px; height: 46px; }
      .order-card-header { min-height: 52px; padding: 6px 10px; }
      .admin-filter-row2 { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 767px) {
      .admin-navbar-toggle { display: flex; }
      .admin-navbar-menu { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 8px; order: 3; overflow: hidden; }
      .admin-navbar-menu.show { display: flex; }
      .admin-navbar-menu .btn { width: 100%; text-align: left; }
    }
    @media (max-width: 380px) {
      .admin-filter-row2 { grid-template-columns: 1fr; }
      .promo-grid { grid-template-columns: repeat(2, 1fr); }
    }
  
    /* V8: Wide Dashboard Layout */
    #adminDashboard { width: 100%; }
    .admin-navbar { padding: 14px 16px; margin-bottom: 14px; }
    .admin-filter-bar { padding: 10px 16px; }
    #adminOrderList { padding: 0 8px; }
    .admin-order-card { max-width: 100%; }
    
    /* Stats cards grid - 3 per row di semua ukuran layar */
    #statsGrid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px 8px; }
    @media (min-width: 768px) { #statsGrid { grid-template-columns: repeat(3, 1fr) !important; } }
    @media (min-width: 1200px) { #statsGrid { grid-template-columns: repeat(3, 1fr) !important; } }
    .stat-card { min-width: 0; }
    
    /* Order list grid on desktop */
    #adminOrderList{display:flex !important;flex-direction:column !important;gap:10px;}
.order-card,.admin-order-card{width:100% !important;border:2px solid #cfd8dc !important;border-radius:12px !important;}
.order-card *,.admin-order-card *{box-sizing:border-box;}
    
    /* ===== RESPONSIVE SURVEY OVERLAY — SEMUA UKURAN LAYAR ===== */
    /* Mobile first: overlay fullscreen, no scroll loss */
    @media (max-width: 767px) {
      .survey-overlay { padding: 0 !important; align-items: stretch !important; }
      .survey-box { border-radius: 0 !important; height: 100dvh; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
      .survey-hdr { flex-shrink: 0; padding: 9px 12px; }
      .survey-hdr-title { font-size:.82rem !important; }
      .survey-hdr-sub { font-size:.62rem !important; }
      .survey-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px !important; }
      .stabs { gap:0 !important; padding: 2px !important; border-radius: 8px !important; }
      .stab { padding: 5px 4px !important; font-size: .68rem !important; }
      /* UISP Wireless Panel mobile stack */
      #uispWirelessPanel .uisp-panel-inner { flex-direction: column !important; gap: 0 !important; }
      #uispWirelessPanel .uisp-device { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 10px !important; }
      #uispWirelessPanel .uisp-device:last-child { border-bottom: none !important; }
      #uispWirelessPanel .uisp-center { min-width: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 10px !important; width: 100%; }
      #uispWirelessPanel .uisp-device[style*="text-align:right"] { text-align: left !important; }
      #uispWirelessPanel .uisp-signal-row[style*="flex-end"] { justify-content: flex-start !important; }
      /* Elevation chart fill */
      #elevChart { height: 180px !important; }
      .elev-stats-uisp { grid-template-columns: 1fr 1fr 1fr !important; gap: 4px !important; }
      .elev-stat-val { font-size: .75rem !important; }
      /* BTS grid 2 col on mobile */
      .bts-grid { grid-template-columns: 1fr 1fr !important; max-height: 200px !important; }
      /* Hasil tab */
      #stab-result { padding: 0; }
      /* Survey map full width */
      #surveyMap { height: 280px !important; border-radius: 8px !important; }
      /* Fiber panel */
      #uispFiberPanel .uisp-panel-inner { flex-direction: column !important; }
      #uispFiberPanel .uisp-device { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 10px !important; }
      #uispFiberPanel .uisp-center { min-width: 0 !important; border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.08); padding: 9px 10px !important; width: 100%; }
      /* Elevation header */
      .elev-header { flex-wrap: wrap; gap: 6px; }
      .elev-header-left { font-size: .65rem !important; }
      /* Calc signal link bar */
      .calc-signal-bar { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
      .calc-signal-bar .csb-actions { width: 100% !important; justify-content: flex-start !important; }
    }
    @media (max-width: 400px) {
      .stab { padding: 4px 2px !important; font-size: .62rem !important; }
      .stab i { display: none !important; }
      #surveyMap { height: 240px !important; }
      #elevChart { height: 150px !important; }
    }
    /* Tablet */
    @media (min-width: 768px) and (max-width: 1024px) {
      #surveyMap { height: 340px !important; }
      #elevChart { height: 200px !important; }
    }
    /* Desktop wide: restore side-by-side layout + big elevation chart */
    @media (min-width: 900px) {
      #uispWirelessPanel .uisp-panel-inner { flex-direction: row !important; }
      #uispFiberPanel .uisp-panel-inner { flex-direction: row !important; }
      #uispWirelessPanel .uisp-device { border-right: 1px solid rgba(255,255,255,.08) !important; border-bottom: none !important; }
      #uispWirelessPanel .uisp-center { border-right: 1px solid rgba(255,255,255,.08) !important; border-bottom: none !important; }
      #surveyMap { height: 500px !important; }
      /* Elevation chart: large like screenshot */
      #elevChart { height: 360px !important; }
      .elev-wrap { padding: 14px 16px !important; border-radius: 12px !important; }
      .elev-header-left { font-size: .82rem !important; }
      .elev-fresnel-badge { font-size: .68rem !important; padding: 2px 9px !important; }
      /* Stats: 4-col big numbers like screenshot */
      .elev-stats-uisp { grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; margin-top: 12px !important; }
      .elev-stat-box { padding: 18px 14px !important; border-radius: 10px !important; background: rgba(255,255,255,.06) !important; }
      .elev-stat-val { font-size: 1.55rem !important; font-weight: 900 !important; letter-spacing: -.5px; }
      .elev-stat-lbl { font-size: .7rem !important; margin-top: 4px !important; color: rgba(255,255,255,.5) !important; }
      /* LOS banner bigger with visible left stripe */
      #losStatusBanner { font-size: .78rem !important; padding: 11px 16px !important; border-radius: 10px !important; border-left-width: 5px !important; line-height: 1.55 !important; }
      /* Survey box memenuhi layar penuh, body diberi padding lebih lega di desktop */
      .survey-body { padding: 16px !important; }
      /* Wireless panel UISP on desktop */
      .uisp-panel { border-radius: 12px !important; }
      .uisp-capacity-big { font-size: 1.3rem !important; }
      /* Calc signal bar */
      .calc-signal-bar { padding: 12px 16px !important; border-radius: 10px !important; }
      .calc-signal-bar .csb-title { font-size: .8rem !important; }
      .calc-signal-bar .csb-sub { font-size: .68rem !important; }
      /* Signal legend */
      .sig-legend { padding: 8px 14px !important; }
      .sig-legend-item { font-size: .65rem !important; gap: 5px !important; }
    }
    @media (min-width: 1100px) {
      #elevChart { height: 420px !important; }
      .elev-stat-val { font-size: 1.75rem !important; }
    }
    @media (min-width: 1300px) {
      #elevChart { height: 460px !important; }
    }
    /* Landscape phone */
    @media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
      .survey-overlay { padding: 0 !important; }
      .survey-box { max-height: 100vh; flex-direction: row; border-radius: 0; }
      .survey-hdr { writing-mode: vertical-rl; text-orientation: mixed; width: 36px; flex-direction: column; justify-content: flex-start; padding: 8px 6px; }
      .survey-hdr-left { flex-direction: column; }
      .survey-body { height: 100vh; overflow-y: auto; }
      #surveyMap { height: 180px !important; }
      #elevChart { height: 150px !important; }
    }
    /* ===== CALC SIGNAL LINK BAR ===== */
    .calc-signal-bar { display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,#0d1b2e 0%,#1a3060 100%); border:1.5px solid rgba(91,200,245,.3); border-radius:9px; padding:9px 12px; margin-top:8px; }
    .calc-signal-bar .csb-icon { font-size:1.2rem; color:#5bc8f5; flex-shrink:0; }
    .calc-signal-bar .csb-info { flex:1; min-width:0; }
    .calc-signal-bar .csb-title { font-size:.72rem; font-weight:800; color:#fff; line-height:1.2; }
    .calc-signal-bar .csb-sub { font-size:.62rem; color:rgba(255,255,255,.45); margin-top:1px; }
    .calc-signal-bar .csb-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
    .csb-btn { display:inline-flex; align-items:center; gap:4px; background:rgba(91,200,245,.15); color:#5bc8f5; border:1px solid rgba(91,200,245,.4); border-radius:7px; padding:5px 11px; font-size:.7rem; font-weight:800; cursor:pointer; transition:all .2s; text-decoration:none; white-space:nowrap; }
    .csb-btn:hover { background:rgba(91,200,245,.28); transform:translateY(-1px); color:#5bc8f5; }
    .csb-btn.primary { background:linear-gradient(135deg,#0d6efd,#0054b4); color:#fff; border-color:#0d6efd; }
    .csb-btn.primary:hover { background:linear-gradient(135deg,#0954c2,#003d87); color:#fff; }
    /* Signal legend bar */
    .sig-legend { display:flex; align-items:center; gap:6px; padding:6px 10px; background:rgba(0,0,0,.15); border-radius:7px; margin-top:6px; flex-wrap:wrap; }
    .sig-legend-item { display:flex; align-items:center; gap:3px; font-size:.58rem; font-weight:700; }
    .sig-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
    .sig-dot.b { background:#38bdf8; }
    .sig-dot.g { background:#10b981; }
    .sig-dot.y { background:#f59e0b; }
    .sig-dot.r { background:#ef4444; }
    .sig-legend-item.b { color:#38bdf8; }
    .sig-legend-item.g { color:#10b981; }
    .sig-legend-item.y { color:#f59e0b; }
    .sig-legend-item.r { color:#ef4444; }

.order-card,.admin-order-card,.detail-card{border:2px solid #d0d7de !important;}

/* Sales terkunci via URL hash */
.sales-locked { background-color:#e9f7ef !important; border-color:#198754 !important; color:#0f5132; font-weight:600; opacity:1 !important; cursor:not-allowed; }
</style>
