:root{--bg:#0b0d10;--panel:#11151a;--muted:#98a2b3;--ink:#e5e7eb;--accent:#2bdc8d;--warn:#ef4444}
    *{box-sizing:border-box}
    html, body { height:100%; overflow:hidden; }
    body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
    .app{display:grid;grid-template-columns:var(--side, 500px) 6px 1fr;height:100vh}

  aside{
    background:var(--panel);
    border-right:1px solid #23272f;
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    overscroll-behavior-x: none;
    overflow-y:auto;     /* hanya atas bawah */
    overflow-x:hidden;   /* 🔥 kunci kiri kanan */
  }
    h1{font-size:18px;margin:2px 0 6px}
    h2{font-size:15px;margin:2px 0 6px;color:#d1d5db}
    label{font-size:12px;color:var(--muted)}
    .card{background:#0f1318;border:1px solid #1b2028;border-radius:16px;padding:12px}
    .row{display:flex;gap:10px;flex-wrap:wrap}
    input[type="file"],select,button,textarea,input[type="number"],input[type="text"],input[type="date"],input[type="color"]{background:#0b0f14;color:var(--ink);border:1px solid #1b2028;border-radius:12px;padding:10px 12px;font-size:14px;width:100%}
    textarea{min-height:90px;resize:vertical}
    button{cursor:pointer}
    button.primary{background:linear-gradient(135deg,#1cc37e,#0ca86a);border:0}
    button.ghost{background:transparent}
    small.muted{color:var(--muted);display:block;margin-top:6px}
    .legend{max-height:200px;overflow:auto;display:flex;flex-direction:column;gap:8px}
    .badge{display:inline-flex;align-items:center;gap:8px}
    .dot{width:12px;height:12px;border-radius:50%}
    .warn{color:var(--warn)}
    main{display:grid;grid-template-rows:auto 1fr;overflow:hidden;position:relative}
    .toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid #2f2b23;background:#3782df}
    canvas{width:100%;height:100%;display:block;background:#e2eee6;cursor:crosshair}
    .help{font-size:12px;color:#cbd5e1}
    .controls{display:flex;gap:8px;align-items:center}
    .man-ctrl{display:none;gap:8px;align-items:center}
    .man-ctrl.show{display:flex}
    .switch {
      position: relative;
      display: inline-block;
      width: 46px;
      height: 24px;
    }

    .multi-check-group{

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  margin-top:8px;

}

.multi-check-group label{

  display:flex;

  align-items:center;

  gap:4px;

  background:#f2f2f2;

  padding:6px 10px;

  border-radius:6px;

  cursor:pointer;

}
#rotationBox{
  position: relative;

  z-index: 1000;

  pointer-events: auto;

  user-select: none;
}

#rotationBar{
  position: relative;

  width: 100%;

  height: 26px;

  border-radius: 999px;

  overflow: hidden;

  cursor: ew-resize;

  pointer-events: auto;

  user-select: none;

  touch-action: none;
}

#rotationFill{
  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 0%;
}

#rotationLabel{
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  pointer-events: none;

  font-weight: 600;
}
/* =========================================
   KHUSUS TABLE REVIEW DBTECH
========================================= */

#reviewTable{

    min-width:4200px;

    table-layout:fixed;

    font-size:12px;
}

/* =========================================
   HEADER
========================================= */

#reviewTable th{

    background:#0d47a1;

    color:#fff;

    padding:8px;

    border:1px solid #d6d6d6;

    white-space:normal;

    word-break:break-word;

    text-align:center;

    vertical-align:middle;

    line-height:1.2;
}

/* =========================================
   BODY
========================================= */

#reviewTable td{

    padding:6px;

    border:1px solid #e0e0e0;

    text-align:center;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

/* =========================================
   STICKY HEADER
========================================= */

#reviewTable thead th{

    position:sticky;

    top:0;

    z-index:10;
}

/* =========================================
   STICKY COLUMN ID BLAST
========================================= */

#reviewTable th:first-child,
#reviewTable td:first-child{

    position:sticky;

    left:0;

    background:#ffffff;

    z-index:5;

    min-width:120px;

    max-width:120px;
}

#reviewTable th:first-child{

    background:#0d47a1;

    color:#fff;

    z-index:11;
}

/* =========================================
   STICKY TANGGAL
========================================= */

#reviewTable th:nth-child(2),
#reviewTable td:nth-child(2){

    position:sticky;

    left:120px;

    background:#ffffff;

    z-index:5;

    min-width:90px;

    max-width:90px;
}

#reviewTable th:nth-child(2){

    background:#0d47a1;

    color:#fff;

    z-index:11;
}

/* =========================================
   PIT
========================================= */

#reviewTable th:nth-child(3),
#reviewTable td:nth-child(3){

    min-width:100px;
}

/* =========================================
   SEAM
========================================= */

#reviewTable th:nth-child(4),
#reviewTable td:nth-child(4){

    min-width:100px;
}

/* =========================================
   KOLOM ANGKA
========================================= */

#reviewTable td{

    font-variant-numeric:
    tabular-nums;
}

/* =========================================
   KOLOM PF
========================================= */

#reviewTable th:nth-child(27),
#reviewTable th:nth-child(28),
#reviewTable th:nth-child(29),
#reviewTable th:nth-child(30),

#reviewTable td:nth-child(27),
#reviewTable td:nth-child(28),
#reviewTable td:nth-child(29),
#reviewTable td:nth-child(30){

    min-width:90px;

    background:#fff8e1;
}

/* =========================================
   STATUS COLOR
========================================= */

#reviewTable tr td:last-child{

    font-weight:bold;
}

#reviewTable tr td:last-child:contains("CRITICAL"){

    background:#ffebee;
    color:#c62828;
}

#reviewTable tr td:last-child:contains("WARNING"){

    background:#fff8e1;
    color:#ef6c00;
}

/* =========================================
   HOVER
========================================= */

#reviewTable tbody tr:hover{

    background:#e3f2fd;
}

/* =========================================
   TABLE CONTAINER
========================================= */

.table-container{

    width:100%;

    overflow:auto;

    border-radius:12px;

    border:1px solid #d0d0d0;

    max-height:75vh;

    background:#fff;
}

/* =========================================
   SURVEY TABLE
========================================= */

#surveyTable{

    min-width:1400px;

    table-layout:auto;
}

#surveyTable th{

    background:#1565c0;

    color:#fff;

    position:sticky;

    top:0;
}

#surveyTable td,
#surveyTable th{

    padding:8px;

    border:1px solid #ddd;

    text-align:center;

    white-space:nowrap;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

    #reviewTable{

        font-size:10px;
    }

    #reviewTable th,
    #reviewTable td{

        padding:4px;
    }

    .table-container{

        max-height:65vh;
    }
}
/* =========================
Drillbit
========================= */
.drillbit-buttons{

  display:flex;

  gap:10px;

  margin-top:20px;

}


.drillbit-buttons button{

  flex:1;

  padding:12px;

  border:none;

  border-radius:12px;

  background:#0d1117;

  color:white;

  cursor:pointer;

  font-size:15px;

}
/*-------------------------------Drillbit ------------------------------------------*/
    .map-tooltip{
  position:fixed;
  pointer-events:none;
  background:rgba(15,15,15,0.92);
  color:#fff;
  padding:8px 10px;
  border-radius:6px;
  font-size:12px;
  line-height:1.4;
  display:none;
  z-index:99999;
  box-shadow:0 4px 10px rgba(0,0,0,.45);
}
/*------------------------------- Open File ------------------------------------------*/
    .file-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid #1f2a44;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.2s ease;
}

.file-btn:hover {
  border-color: #6366f1;
  box-shadow: 0 0 10px rgba(99,102,241,0.4);
}

.file-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
/*-------------------------------   Rotation Bar ------------------------------------------*/
#rotationBar {
  position: relative;
  height: 28px;
  background: #1e293b;
  border-radius: 6px;
  margin-top: 6px;
  cursor: pointer;
}

#rotationFill {
  position: absolute;
  height: 100%;
  width: 50%;
  background: #3b82f6;
  border-radius: 6px;
}

#rotationLabel {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 28px;
  color: white;
  font-size: 13px;
}

.bs-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bs-inline input {
  flex: 1;
  text-align: center;
}

.bs-sep {
  font-weight: bold;
  color: #94a3b8;
}#rotationBar {
  position: relative;
  height: 28px;
  background: #1e293b;
  border-radius: 6px;
  margin-top: 6px;
  cursor: pointer;
}

#rotationFill {
  position: absolute;
  height: 100%;
  width: 50%;
  background: #3b82f6;
  border-radius: 6px;
}

#rotationLabel {
  position: absolute;
  width: 100%;
  text-align: center;
  line-height: 28px;
  color: white;
  font-size: 13px;
}

.bs-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bs-inline input {
  flex: 1;
  text-align: center;
}

.bs-sep {
  font-weight: bold;
  color: #94a3b8;
}
/*------------------------------- IDR-USD ------------------------------------------*/
.pref-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 12px;
}

.toggle-group {
  display: flex;
  gap: 4px;
}

.toggle-group button {
  padding: 4px 8px;
  border: none;
  border-radius: 6px;
  background: #2a2a2e;
  color: #aaa;
  cursor: pointer;
}

.toggle-group button.active {
  background: #2ecc71;
  color: #000;
  font-weight: bold;
}

.pref-item input {
  width: 80px;
  padding: 3px 6px;
  border-radius: 6px;
  border: none;
}
.preferences-inner {
  background: transparent; /* atau hapus */
}
/*------------------------------- IDR-USD ------------------------------------------*/

    .ok {
  color: #00e676; /* hijau */
}

.warn {
  color: #ffeb3b; /* kuning */
  font-weight: 600;
}

.danger {
  color: #ff5252; /* merah */
  font-weight: 700;
}
.panel-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
#dt_result {
  grid-column: span 2;
}
.full {
  grid-column: span 2;
}
@media (max-width: 600px) {
  .panel-body {
    grid-template-columns: 1fr;
  }
  .full {
    grid-column: span 1;
  }

}
.row {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
    .about-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .about-content {
    width: 600px;
    max-height: 80vh;
    background: #1e1e1e;
    color: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .about-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    background: #2c2c2c;
    font-weight: bold;
  }

  .about-header button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
  }

  .about-body {
    padding: 10px 15px;
    overflow-y: auto;
  }

  .about-body pre {
    white-space: pre-wrap;
    font-family: Arial;
    font-size: 13px;
  }
    .lp-label {
    color: #fff;
    background: rgba(0,0,0,0.7);
    padding: 2px 6px;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
  }
  .form-group {
    margin-bottom: 10px;
  }

  .form-group label {
    display: block;
    margin-top: 6px;
    margin-bottom: 2px;
    font-size: 12px;
    color: #bbb;
  }

  .form-group input {
    width: 100%;
    padding: 6px;
    margin-bottom: 5px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #111;
    color: #fff;
  }

  .btn-group {
    display: flex;
    gap: 6px;
    margin-top: 10px;
  }

  .btn-group button {
    flex: 1;
    padding: 8px;
    border-radius: 6px;
  }

  /* warna dasar */
  :root {
    --menu-tosca: #14b8a6;     /* tosca */
    --menu-tosca-dark: #0f766e;
    --menu-text-dark: #0f172a;
      --menu-radius: 8px;
    --menu-radius-item: 6px;
  }
  .actual-btn {
    width: 100%;
    padding: 8px;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .actual-btn:hover {
    background: #1e293b;
    border-color: #60a5fa;
  }

  .actual-btn:active {
    transform: scale(0.98);
  }
  .gps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
  }

  .actual-btn {
    width: 100%;
    padding: 8px;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .actual-btn:hover {
    background: #1e293b;
    border-color: #60a5fa;
  }

    .modal {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      display: none;

      /* ⬇️ KUNCI TENGAH */
      align-items: center;
      justify-content: center;

      z-index: 9999;
    }
  .modal.show {
    display: flex;   /* ⬅️ ini kunci */
  }

  .modal-content {
    background: #222;
    color: #fff;
    padding: 20px;
    width: 320px;
    max-height: 75vh;
    overflow-y: auto;
    border-radius: 10px;
  }

  .modal input {
    width: 95%;
    margin: 5px 0 10px;
    padding: 5px;
  }

.modal-title{

  font-size:20px;
  font-weight:bold;

  margin-bottom:15px;

}
.modal label{
  display:block;
  margin-top:10px;
  margin-bottom:5px;

  font-size:14px;

}

.modal-buttons{
  margin-top:20px;
  display:flex;
  gap:10px;

}
.modal-buttons button{
  flex:1;
  padding:10px;
  border:none;
  border-radius:6px;
  cursor:pointer;
}
  .popup label {
    display: block;
    margin-bottom: 6px;
    cursor: pointer;
  }
  .popup {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    position: absolute;
    top: 60px;
    right: 20px;
    background: #1f232a;
    padding: 14px;
    border-radius: 10px;
    color: #e5e7eb;
    font-size: 13px;
    display: none;
  }

  .popup.show {
    display: block;
    display: block;
    opacity: 1;
    transform: translateY(0);
  }
  .popup input {
    margin-right: 6px;
  }
  .actual-btn:active {
    transform: scale(0.98);
  }
  .hudtbl {
    width: 100%;
    table-layout: fixed;   /* ⬅️ ini kunci utama */
  }
  .hudtbl {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .key {
    width: 40px;          /* ⬅️ label cukup panjang */
    white-space: nowrap;
  }


  .hud table{border-collapse:separate;border-spacing:2px 6px;width:100%}
  .hudtbl {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .key {
    width: 88px;
    white-space: nowrap;
  }

  .sep {
    width: 5px;
    text-align: left;
  }

  .val {
    width: 120px;
    text-align: left;   /* ⬅️ INI KUNCINYA */
    font-weight: 600;
  }

  .unit {
    width: 60px;
    text-align: left;
    color: #aaa;
  }

  .hudtbl td {
    padding: 2px 4px;
  }
  .hud .hr{height:1px;background:#263141;margin:6px 0 2px;opacity:.6}
  .shift-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
  }

  .shift-btn {
    width: 100%;
    padding: 8px;
    background: #0f172a;
    color: #ffffff;
    border: 1px solid #3b82f6;
    border-radius: 6px;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.2s ease;
  }

  .shift-btn:hover {
    background: #1e293b;
    border-color: #60a5fa;
  }

  .shift-btn:active {
    transform: scale(0.95);
  }
  .action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
  }

  .menubar .menu {
    border-radius: var(--menu-radius);
    color: #e5e7eb;
    border-radius: var(--menu-radius);
    padding: 6px 10px;
  }

  .menubar .menu:hover {
    background: var(--menu-tosca);
    color: var(--menu-text-dark);
    border-radius: var(--menu-radius);
    border-radius: var(--menu-radius);
  }

  /* ================================
    FIX TEXT COLOR MENU & SUBMENU
    ================================ */

  /* DROPDOWN CONTAINER */
  .menubar .menu .drop,
  .menubar .submenu > .drop {
    background: #0b0f14;          /* gelap solid */
    border: 1px solid #1f2937;
    border-radius: 10px;
    color: #e5e7eb;               /* ⬅️ TEKS TERANG */
  }

  /* ITEM DROPDOWN */
  .menubar .menu .drop > div,
  .menubar .submenu .drop > div {
    color: #e5e7eb;               /* ⬅️ TEKS TERANG */
    padding: 8px 14px;
    margin: 2px 6px;
    border-radius: 8px;
    cursor: pointer;
    background: transparent;
  }

  /* HOVER ITEM */
  .menubar .menu .drop > div:hover,
  .menubar .submenu .drop > div:hover {
    background: var(--menu-tosca);
    color: #0f172a;               /* ⬅️ TEKS GELAP KONTRAS */
  }

  /* SUBMENU ARROW (▶) */
  .menubar .menu .drop > div::after {
    color: inherit;
  }

  /* NON-AKTIF / DISABLED */
  .menubar .menu .drop > div.disabled {
    color: #64748b;               /* abu-abu */
    pointer-events: none;
  }



  /* SUBMENU (Import ▶, Export ▶) */
  .menubar .submenu > .drop {
    background: #0b0f14;
  }

  /* ITEM SUBMENU */
  .menubar .submenu .drop > div:hover {
    background: var(--menu-tosca);
    color: var(--menu-text-dark);
  }

  /* DIVIDER */
  .menubar .divider {
    height: 1px;
    background: #1f2937;
    margin: 4px 0;
  }

  /* ================================
    ACTIVE / SELECTED STATE (OPSIONAL)
    ================================ */

  /* kalau nanti mau ditandai aktif via class */
  .menu.active,
  .drop > div.active {
    background: var(--menu-tosca-dark);
    color: white;
  }

  .menubar .menu,
  .menubar .menu .drop > div {
    transition:
      background 0.15s ease,
      color 0.15s ease,
      border-radius 0.15s ease;
  }

  /* ===== MENU BAR (BIAR NYATU) ===== */
  .menubar {
    height: 26px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: #f2f2f2;
    border-bottom: 1px solid #c9c9c9;
    font-size: 12px;
  }

  /* ===== TOOLBAR AUTO­CAD STYLE ===== */
  .toolbar {
    height: 24px;                 /* ⬅️ SANGAT TIPIS */
    display: flex;
    align-items: center;
    gap: 1px;                     /* ⬅️ MEPEEET */
    padding: 0 3px;               /* ⬅️ KETAT */
    background: #f2f2f2;
    border-bottom: 1px solid #c9c9c9;
  }

  /* ===== TOMBOL IKON ===== */
  .tool-btn {
    width: 20px;                  /* ⬅️ KECIL */
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 2px;
    cursor: pointer;
    font-size: 11px;              /* emoji / svg */
    line-height: 1;
  }

  /* hover ala desktop */
  .tool-btn:hover {
    background: #e6e6e6;
    border-color: #bdbdbd;
  }

  /* pressed */
  .tool-btn:active {
    background: #dcdcdc;
  }

  /* ===== SEPARATOR ===== */
  .tool-sep {
    width: 1px;
    height: 14px;
    background: #bdbdbd;
    margin: 0 2px;
  }

  input[type="file"].hidden-file {
    display: none !important;
  }


  .switch input { display:none; }
  .slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 24px;
    top: 0; left: 0; right: 0; bottom: 0;
    transition: .2s;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: .2s;
  }
  input:checked + .slider {
    background-color: #2196F3;
  }
  input:checked + .slider:before {
    transform: translateX(22px);
  }
  /* ===== MODAL DXF ===== */
  #modalExportDXF {
    position: fixed;
    inset: 0;
    display: none;                 /* default hidden */
    align-items: center;           /* ⬅️ CENTER VERTIKAL */
    justify-content: center;       /* ⬅️ CENTER HORIZONTAL */
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    z-index: 10000;
  }

  /* Card popup */
  #modalExportDXF .modal-content {
    min-width: 320px;
    max-width: 420px;
    background: #1e1e1e;
    padding: 20px 24px;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  }

  .exp-btn {
    width: 100%;
    padding: 12px;
    margin: 6px 0;
    background: #1e88e5;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
  }
  .exp-btn:hover {
    background: #1565c0;
  }

  .btn-edit-big {
    padding:10px 16px;
    background:#1976d2;
    color:#fff;
    border:none;
    border-radius:8px;
    margin:4px;
    font-size:14px;
  }

  .btn-delete-big {
    padding:10px 16px;
    background:#1976d2;
    color:#fff;
    border:none;
    border-radius:8px;
    margin:4px;
    font-size:14px;
  }

  /* --------------------------------------------- MODAL Calculator ---------------------------------- */
/* =========================
   PANEL BASE (FINAL STABLE)
========================= */
.panel {
  position: fixed;
  top: 50%;
  left: 50%;

  opacity: 0;
  transform: translate(-50%, -60%) scale(0.95);
  transition: all 0.2s ease;

  width: 320px;
  max-width: 90vw;

  /* 🔥 FIX UTAMA */
  background: #141419;       /* solid */
  backdrop-filter: none;     /* disable blur */

  border-radius: 12px;
  padding: 12px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  z-index: 9999;

  /* 🔥 anti GPU glitch */
  will-change: transform;
  isolation: isolate;
}

/* tampil */
.tool-panel:not(.hidden) {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}

/* penting supaya tidak ganggu canvas */
.tool-panel {
pointer-events: auto;
}

.hidden {
display: none;
}

/* =========================
HEADER
========================= */
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;

font-weight: bold;
margin-bottom: 8px;

border-bottom: 1px solid rgba(255,255,255,0.08);
padding-bottom: 6px;
}

.close {
cursor: pointer;
opacity: 0.7;
transition: 0.15s;
}

.close:hover {
opacity: 1;
}

/* =========================
FORM
========================= */
.field {
margin-bottom: 8px;
}

.row {
display: flex;
gap: 6px;
}

.inline {
display: flex;
gap: 4px;
align-items: center;
}

.inline input {
width: 60px;
}

/* =========================
INPUT UX
========================= */
.panel input,
.panel select {
transition: all 0.15s ease;
}

.panel input:focus,
.panel select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(34,197,94,0.4);
}

/* =========================
RESULT
========================= */
.result {
margin-top: 8px;
font-size: 12px;
line-height: 1.5;
}

.result span.pf-low,
.result span.pf-high {
font-weight: bold;
}

/* =========================
PF COLOR
========================= */
.pf-low { color: #facc15; }   /* < 0.2 */
.pf-ok { color: #22c55e; }    /* 0.2 - 0.3 */
.pf-high { color: #ef4444; }  /* > 0.3 */

  /* --------------------------------------------- MODAL BACKDROP ---------------------------------- */


  /* === MODAL BOX === */
  .modal-box,
  .modal-content {
    background: #1e1e1e;
    color: #fff;

    min-width: 320px;
    max-width: 350px;
    width: 90%;

    padding: 16px 18px;
    border-radius: 10px;

    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  }

  .modal-box {
    animation: popIn .18s ease-out;
  }
  @keyframes popIn {
    from { transform: scale(.92); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

  .modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 5px;
  }

  /* Header table daftar karyawan */
  .modal-content table thead tr {
      background: #2c2c2c !important;   /* gelap agar kontras */
  }

  .modal-content table thead th {
      color: #ffffff !important;        /* teks putih */
      font-weight: 600 !important;      /* tebal */
      padding: 10px !important;
      border-bottom: 1px solid #444 !important;
  }
  .table-action-btn {
      padding: 6px 10px;
      font-size: 12px;
      margin: 0 3px;
      border-radius: 6px;
      cursor: pointer;
      border: none;
  }

  .btn-edit {
      background: #1976d2;
      color: white;
  }

  .btn-delete {
      background: #d32f2f;
      color: white;
  }

  .btn-save {
      background: #2e7d32;
      color: white;
  }

  .btn-cancel {
      background: #777;
      color: white;
  }


  /* Card modern */
  .modal-content {
    position:relative;
    margin:10% auto;
    width:0%; max-width:420px;
    background:#08ec2aee;
    padding:20px 24px;
    border-radius:16px;
    box-shadow:0 8px 25px rgba(0,0,0,0.25);
    animation: slideUp 0.25s ease-out;
  }

  .modal-content h3 {
    margin-top:0;
    margin-bottom:16px;
    text-align:center;
    font-size:20px;
    font-weight:600;
  }

  .modal-content input,
  .modal-content select {
    width:100%;
    padding:10px;
    margin:6px 0 12px 0;
    border-radius:10px;
    border:1px solid #f9f2f2;
    font-size:14px;
  }

  /* Button style modern */
  .btn-primary {
    width:100%;
    padding:10px;
    background:#007bff;
    color:#fff;
    border:none;
    border-radius:10px;
    margin-top:12px;
    font-size:15px;
    cursor:pointer;
  }
  .btn-primary:hover { background:#0069d9; }

  .btn-secondary {
    width:100%;
    padding:10px;
    background:#05e951;
    border:none;
    border-radius:10px;
    margin-top:8px;
    font-size:15px;
    cursor:pointer;
  }

  @keyframes fadeIn { from{opacity:0} to{opacity:1} }
  @keyframes slideUp {
    from{ transform: translateY(20px); opacity:0 }
    to  { transform: translateY(0px); opacity:1 }
  }
  .tool-rack {
    width: 56px;
    background: #0b0f14;
    border-right: 1px solid #1b2028;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 4px;
  }
  .tool-rack .icon-btn {
    width: 48px;
    height: 48px;
  }
   /* --------------------------------------------- MENU BAR ---------------------------------- */
  .menubar {
    height: 28px;
    display: flex;
    background: #0f1318;
    border-bottom: 1px solid #1b2028;
    font-size: 13px;
    user-select: none;
  }

  .menu {
    position: relative;
    padding: 4px 14px;
  }

  .menu:hover {
    background: #1b2028;
  }

  .drop {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: #0f1318;
    border: 1px solid #1b2028;
    display: none;
    box-shadow: 0 14px 28px rgba(0,0,0,.45);
    z-index: 9999;
  }

  .menu:hover > .drop {
    display: block;
  }

  .drop div {
    padding: 7px 12px;
    white-space: nowrap;
  }

  .drop div:hover {
    background: #1b2028;
  }

  .submenu {
    position: relative;
  }

  .submenu:hover > .drop.right {
    display: block;
  }

  .drop.right {
    top: 0;
    left: 100%;
  }

  .divider {
    height: 1px;
    background: #1b2028;
    margin: 6px 0;
  }

  /* HUD floating */
.hud {
  background: rgba(20,20,25,0.85);
  backdrop-filter: blur(6px);

  color: #fff;
  font-size: 11px;              /* sedikit diperkecil */

  border-radius: 10px;
  padding: 8px;                 /* lebih compact */
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);

  width: 240px;                 /* 🔥 kunci biar tidak lebar */
  max-width: 90vw;

  transition: transform 0.25s ease;  /* 🔥 wajib untuk swipe */
  will-change: transform;

  touch-action: pan-y;          /* 🔥 penting: biar tidak ganggu scroll */
}

.hudtbl {
  width: 100%;
  table-layout: fixed;   /* 🔥 ini kunci */
  border-collapse: collapse;
}

.hudtbl td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.coords{
  position:absolute;
  left:10px;
  bottom:30px; /* 🔥 dari 10px → naik ke atas */
  z-index:20;
  background:rgba(15,17,21,.9);
  border:1px solid #2a2f36;
  border-radius:12px;
  padding:8px 10px;
  color:#e5e7eb;
  font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  min-width:230px;
  pointer-events:none;
}
.hud-table{
  display:grid;
  grid-template-columns: auto 10px auto; /* label | : | value */
  column-gap: 6px;
  row-gap: 2px;
  margin-top: 4px;
}

.hud-table div{
  white-space: nowrap;
}

/* label */
.hud-table div:nth-child(3n+1){
  color:#9aa3af;
}

/* titik dua */
.hud-table div:nth-child(3n+2){
  text-align:center;
}

/* value */
.hud-table div:nth-child(3n){
  text-align:right;
}
#map {
  width: 100%;
  height: 100vh; /* WAJIB */
}
.menu .drop div.active {
  background: #2d6cdf;
  color: #fff;
}
  /* Context menu */
  .ctx{position:absolute;z-index:70;background:#0f1115;border:1px solid #2a2f36;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.5);min-width:220px;display:none}
  .ctx button{all:unset;display:block;width:100%;padding:10px 12px;color:var(--ink);cursor:pointer}
  .ctx button:hover{background:#1a1f27}





  /* Overlay list / plan list */
  .overlay-list,.plan-list{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow:auto}
  .overlay-item,.plan-item{display:flex;flex-direction:column;gap:6px;background:#0b0f14;border:1px solid #1b2028;border-radius:10px;padding:8px}
  .overlay-item .name,.plan-item .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .overlay-item button,.plan-item button{padding:6px 8px}

  /* Print */
  @media print{
    body *{visibility:hidden}
    #printArea, #printArea *{visibility:visible}
    #printArea{position:absolute;inset:0;padding:16mm}
    #printArea table thead { display: table-header-group; }
    #printArea table tr { page-break-inside: avoid; }
  }
  #printArea{display:none;background:#fff;color:#000;font-family:Inter,system-ui,Segoe UI,Roboto,Arial}
  #printArea.show{display:block}
  #printArea h1{font-size:20px;margin:0 0 6px}
  #printArea h2{font-size:16px;margin:14px 0 6px}
  #printArea table{width:100%;border-collapse:collapse;font-size:12px}
  #printArea th,#printArea td{border:1px solid #ccc;padding:6px 8px;text-align:right}
  #printArea th:first-child,#printArea td:first-child{text-align:left}
  #printArea .meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;margin-bottom:8px}
  #printArea .meta div{background:#f5f5f5;border:1px solid #e5e5e5;border-radius:8px;padding:6px 8px}
  #printArea .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  #printArea .mini{width:140px;height:140px;border:1px solid #ddd;border-radius:8px;background:#fff}
  .tests{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;background:#0b0f14;border:1px solid #1b2028;border-radius:10px;padding:8px;max-height:220px;overflow:auto;color:#dbeafe}

  /* Splitter (resize sidebar/canvas) */
  .splitter{
    background:#0e1217;
    border-right:1px solid #1e242c;
    border-left:1px solid #1e242c;
    cursor:col-resize;
  }
  .splitter:hover{ background:#121822; }

  /* Canvas top-center checkbox overlay */
  .canvas-top-center{
    position:absolute;
    left: 94%;
    top:85px;
    transform:translateX(-70%);
    z-index:20;
    background:rgba(15,17,21,.92  );
    border:1px solid #2a2f36;
    border-radius:12px;
    padding:8px 12px;
    box-shadow:0 8px 8px rgba(0,0,0,.35);
    backdrop-filter: blur(5px);
  }
  .canvas-top-center .check{
    display:flex; align-items:center; gap:10px; font-size:15px;
  }
  .canvas-top-center input[type="checkbox"]{
    width:20px; height:20px;
  }

  /* ================================
    TOOLBAR FINAL (NO STRETCH)
    ================================ */

  .toolbar {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: 0;
    background: #111827;
    padding: 2px;
  }

  .toolbar > * {
    flex: 0 0 auto !important;
  }

  .toolbar hr,
  .toolbar .line,
  .toolbar .spacer,
  .toolbar .divider {
    display: none !important;
  }

  .tool-btn {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    background: #111827;
    color: #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
  }

  .tool-btn:hover {
    background: #14b8a6;
    color: #0f172a;
  }
/*---------------------------------------------------- UI --------------------------------------------------------------------

/* ================================
   TOOL GROUP
================================ */
.tool-group{
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(15,23,42,0.65);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  z-index: 100;

}

/* ================================
   BUTTON (SEMUA SERAGAM)
================================ */
.tool-btn{
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 20px;
  line-height: 1;

  padding: 0;

  background: #0f172a;
  border: 1px solid #1f2937;
  border-radius: 12px;

  color: #e5e7eb;
  cursor: pointer;

  box-sizing: border-box;

  transition: transform .2s cubic-bezier(.4,0,.2,1),
              box-shadow .2s ease,
              background .15s ease;
}

/* hover */
.tool-btn:hover{
  transform: translateY(-8px) scale(1.15);
  z-index: 10;

  background: #14b8a6;
  color: #0f172a;

  box-shadow:
    0 10px 20px rgba(0,0,0,0.4),
    0 0 0 2px rgba(20,184,166,0.3);
}

/* active */
.tool-btn.active{
  background: #14b8a6;
  color: #0f172a;
  box-shadow: 0 0 0 2px rgba(20,184,166,0.3);
}

/* ================================
   PLAN TOOLS (JANGAN OVERRIDE)
================================ */
.plan-tools{
  display: flex;
  gap: 8px;
}
.tool-group{
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
}
.tool-group.expanded{
  transform: translateX(10px);
}
  .tool-group,
.tool-btn{
  will-change: transform;
  transform: translateZ(0);
}


/*------------------------------- Context Menu --------------------------------------------------
/* container */
.ctx{
  position: absolute;
  min-width: 240px;
  padding: 8px;

  background: rgba(10, 15, 25, 0.009);
  backdrop-filter: blur(14px);

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 12px 30px rgba(0,0,0,0.45),
    inset 0 0 0 1px rgba(255,255,255,0.03);

  z-index: 999;
}

/* item */
.ctx button{
  width: 90%;
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 10px 12px;

  border: none;
  background: transparent;

  color: #020b1d;
  font-size: 14px;

  border-radius: 10px;

  cursor: pointer;
  transition: all .15s ease;
}

/* icon */
.ctx .icon{
  width: 20px;
  text-align: center;
  font-size: 16px;
  opacity: 0.85;
}

/* hover (lebih subtle) */
.ctx button:hover{
  background: rgba(20,184,166,0.15);
  color: #14b8a6;

  transform: translateX(3px);
}

/* ACTIVE ITEM (bukan hover) */
.ctx button.active{
  background: linear-gradient(135deg, #14b8a6, #0ea5e9);
  color: #0f172a;

  box-shadow:
    0 4px 12px rgba(20,184,166,0.35);
}



/* danger */
.ctx .danger:hover{
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}
/*-------------------------------------- Tooltip -------------------------------------*/
.hole-tooltip{
  position: absolute;

  padding: 10px 12px;
  min-width: 180px;

  background: rgba(10,15,25,0.9);
  backdrop-filter: blur(10px);

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);

  box-shadow:
    0 8px 20px rgba(0,0,0,0.4),
    inset 0 0 0 1px rgba(255,255,255,0.03);

  font-size: 13px;
  color: #e5e7eb;

  pointer-events: none;
  z-index: 50;
}

/* row */
.tt-row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0;
}

/* label */
.tt-label{
  opacity: 0.6;
}

/* value */
.tt-value{
  font-weight: 500;
}

/* highlight (depth) */
.tt-highlight{
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.06);

  color: #27d817;
  font-weight: 600;
}
/*-------------------------------------- HIDE  --------------------------------------------*/
#centerSel,
#fitSel{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tool-sep{
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.08);
  margin: 0 4px;
}

/* primary (aksi utama) */
.primary-icon{
  background: linear-gradient(135deg, #14b8a6, #0ea5e9);
  color: #0f172a;
  border: none;
}

.primary-icon:hover{
  box-shadow: 0 8px 18px rgba(20,184,166,0.35);
}

/* ghost */
.ghost-icon{
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(255,255,255,0.08);
}

.ghost-icon:hover{
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}


#liveUpdateBox {
  display: none;
}
/*--------------------------------- CSS GRID ----------------------------------*/

/* ===== LAYOUT ===== */
.gps-grid{
  display:flex;
  flex-wrap:wrap;
  gap:2px;
}

.gps-section{
  background: transparent;
  border:none;
  padding:2px;
}

.gps-panel{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* ================================
   HIDDEN
================================ */
#gps_avg_duration,
#gps_accuracy_status{
  display: none !important;
}
/*------------------------ Dev Lock ----------------------------------*/
.dev-only{
  display: none !important;
}

body.dev-mode .dev-only{
  display: block !important;
}
/*----------------------- Upload Company --------------------------*/
.upload-icons{
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
/* ================= ITEM ================= */


/* hover (sama feel export) */
.upload-item:hover{
  transform: translateY(-6px) scale(1.08);
  background:#14b8a6;
  color:#0f172a;
}

/* ================= ICON ================= */


/* ================= TEXT (OPTIONAL) ================= */
.upload-item span{
  display:none; /* 🔥 disembunyikan biar sama kayak export */
}
/* ================= POPUP ================= */
.upload-popup{
  position:fixed;
  inset:0;

  background: rgba(0,0,0,0.6);

  display:flex;
  align-items:center;
  justify-content:center;

  opacity:0;
  pointer-events:none;

  transition:.2s;
}

.upload-popup.show{
  opacity:1;
  pointer-events:auto;
}

.popup-content{
  background:#0f172a;
  padding:12px;
  border-radius:12px;
}

.popup-content img{
  max-width:300px;
  border-radius:8px;
}
/* ============= Export Grid==================*/
/* ===== EXPORT GRID = TOOLBAR STYLE ===== */
.export-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 2px;              /* sama seperti gps */
}

/* optional grouping spacing */
.export-grid .tool-btn{
  margin: 0;
}
/*------------------------------ Shift Direction -----------------------*/
.shift-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2  px;
}

#shiftUp    { grid-column: 2; }
#shiftLeft  { grid-column: 1; grid-row: 2; }
#shiftRight { grid-column: 3; grid-row: 2; }
#shiftDown  { grid-column: 2; grid-row: 3; }
/*------------------------------ Icon Drill Nav -----------------------*/

/* group */
.icon-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* warna khusus */
.primary-icon{
  background:#22c55e;
  color:#0f172a;
}

.ghost-icon{
  background:transparent;
  border:1px solid #1f2937;
}
/*================================ */
#gps_boost_accuracy{ grid-column: 2; }
#gps_stop{ grid-column: 3; }
#gps-pill{ grid-column: 4; }
  /* Manual list */
  .manual-header{ font-weight:600; margin-top:8px; margin-bottom:6px; }
  .manual-list{ display:flex; flex-direction:column; gap:6px; max-height:220px; overflow:auto; }
  .manual-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.08); border-radius:10px; }
  .manual-item .chip{ width:14px; height:14px; border-radius:50%; border:2px solid rgba(0,0,0,0.2); flex:0 0 auto; }
  .manual-item .name{ flex:1 1 auto; font-size:12px; }
  .manual-item .meta{ font-size:11px; opacity:0.75; margin-left:6px; }
  .manual-item .actions{ display:flex; gap:6px; }
  .manual-item .actions .btn-ghost{ background:transparent; border:1px solid rgba(255,255,255,0.15); padding:2px 6px; border-radius:8px; font-size:11px; cursor:pointer; }
  .manual-item.active{ outline:2px solid rgba(255,255,255,0.25); }


  /* Manual export controls */
  .manual-export{ margin:8px 0 10px; display:flex; flex-direction:column; gap:4px; }
  .manual-export .row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
  .manual-export .btn{ padding:4px 10px; font-size:10px; border-radius:8px; }


  /* Progress bar */
  .progress{ position:relative; flex:1 1 160px; height:14px; background:#0b0f14; border:1px solid #1b2028; border-radius:999px; overflow:hidden; min-width:160px }
  .progress .bar{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#1cc37e,#0ca86a) }
  .progress .label{ position:absolute; left:8px; top:50%; transform:translateY(-50%); font-size:11px; color:#cbd5e1 }


  #planTools .field{display:flex;gap:8px;align-items:center;margin:6px 0}
  #planTools .field label{min-width:220px;color:var(--muted)}
  #planTools .field select{padding:4px 8px;background:var(--panel);color:var(--ink);border:1px solid #222;border-radius:8px}



  canvas{touch-action:none}


  /* Ensure floating UI doesn't block canvas interactions */
  .canvas-top-center{ pointer-events:none; }
  .canvas-top-center .check,
  .canvas-top-center input,
  .canvas-top-center button,
  .canvas-top-center select,
  .canvas-top-center label{ pointer-events:auto; }


  .plan-tools{ pointer-events:none; }
  .plan-tools *{ pointer-events:auto; }
  /* ==== Auth & Account Styles (injected) ==== */

  .modal.hidden{display:none}
  .modal .modal-content{background:#0f1318;border:1px solid #1b2028;border-radius:14px;padding:16px 18px;min-width:320px;max-width:92vw}
  .modal .tabs{display:flex;gap:8px;margin:8px 0 10px}
  .modal .tabs button{padding:6px 10px;border-radius:8px;border:1px solid #1b2028;background:#0b0f14;color:var(--ink);cursor:pointer}
  .modal .tabs button.active{background:linear-gradient(135deg,#1cc37e,#0ca86a);border:0}
  .modal .form{display:flex;flex-direction:column;gap:6px}
  .account-chip{
    position:fixed; right:12px; top:85px; z-index:180;
    background:#0f1115; border:1px solid #2a2f36; border-radius:12px; padding:8px 10px;
    display:flex; gap:10px; align-items:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.35);
  }
  .account-chip .name{font-weight:700}
  .account-chip .dir{font-size:12px; color:var(--muted)}
  .dropdown{
    position:fixed; right:12px; top:175px; z-index:190;
    background:#0f1115; border:1px solid #2a2f36; border-radius:12px;
    box-shadow:0 10px 28px rgba(0,0,0,.45); padding:10px; width:280px;
  }
  .dropdown.hidden{display:none}
  .dropdown .section{border-top:1px solid #1d232c; padding-top:8px; margin-top:8px}
  .dropdown .section:first-child{border-top:0; padding-top:0; margin-top:0}
  .dropdown .title{font-size:12px; color:var(--muted); margin-bottom:6px}
  .dropdown .rowlike{display:flex; align-items:center; justify-content:space-between; gap:8px}
  .dropdown .warn{color:var(--warn)}
  #repositionPanel{
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #ddd;
    padding: 6px 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    font-size: 14px;
    z-index: 9999;
  }
  #repositionPanel input[type="checkbox"]{
    transform: translateY(1px);
    margin-right: 6px;
  }


  /* ====== RESPONSIVE LAYOUT: Desktop ↔ Mobile (Grid + Flex) ====== */

  /* Desktop default: sidebar | splitter | main */
  @media (min-width: 901px){
    .app{
      grid-template-columns: var(--side, 400px) 6px 1fr;
    }
  }

  /* Mobile: main full width; sidebar as drawer */
  @media (max-width: 700px){
    html, body { overflow: hidden; }
    .app{
      grid-template-columns: 1fr;
    }
    .splitter{ display:none; }

    aside{
      position: fixed;
      inset: 0 auto 0 0;
      width: min(80vw, 280px);
      max-width: 80vw;
      transform: translateX(-100%);
      transition: transform .25s ease;
      z-index: 220;
      box-shadow: 18px 0 40px rgba(0,0,0,.45);
      border-right: 1px solid #1f2530;
      background: #11151a;
    }
    body.drawer-open aside{
      transform: translateX(0);
    }

    .drawer-backdrop{
      position: fixed; inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(2px);
      z-index: 150; display: none;
    }
    body.drawer-open .drawer-backdrop{ display:block; }

    .toolbar{
      position: sticky; top: 0; z-index: 140;
      display: flex; align-items: center; gap: 8px;
    }
  .centerSlider {
    position:relative;
    height:28px;
    background:#1e293b;
    border-radius:6px;
    margin-top:6px;
    cursor:pointer;
    user-select:none;
  }

  .centerFill {
    position:absolute;
    height:100%;
    width:50%;
    left:50%;
    background:#3b82f6;
    border-radius:6px;
    transform:translateX(-50%);
  }

  .centerLabel {
    position:absolute;
    width:100%;
    text-align:center;
    line-height:28px;
    color:white;
    font-size:13px;
  }
    .gridbar{
      position: fixed; left: 0; right: 0; bottom: 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      padding: 10px;
      background: rgba(15,17,21,.95);
      border-top: 1px solid #23272f;
      z-index: 140;
    }
    .gridbar .gb-item{
      display: flex; align-items: center; justify-content: center;
      padding: 10px 8px;
      border: 1px solid #1b2028; border-radius: 11px;
      background: #0b0f14;
      font-size: 13px;
    }

    main{ padding-bottom: 68px; }
  }

  .btn-menu{
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    border: 1px solid #1b2028; background: #0b0f14; cursor: pointer;
  }
  .btn-menu:active{ transform: translateY(1px); }

  .icon-12{ width:12px; height:12px; display:inline-block; }
  /* === FIX MODAL VISIBILITY === */