/* ==================================================================
   FWA KMZ Studio — antarmuka gelap dengan aksen neon
   Palet mengikuti warna balon KMZ: teal utama, hijau/amber/merah zona.
   ================================================================== */

:root {
  /* dasar */
  --bg:            #05100f;
  --bg-2:          #071a18;
  --surface:       rgba(12, 34, 32, .62);
  --surface-solid: #0a1f1d;
  --raise:         rgba(255, 255, 255, .045);
  --line:          rgba(96, 233, 208, .14);
  --line-soft:     rgba(96, 233, 208, .08);

  /* teks */
  --tx:      #e6fff9;
  --tx-mid:  #93bdb5;
  --tx-dim:  #5f8681;

  /* aksen */
  --neon:      #34f4d1;
  --neon-2:    #3dff88;
  --neon-deep: #0d3b38;
  --danger:    #ff6b6b;
  --danger-bg: #401518;
  --amber:     #ffbe3d;

  /* lampu indikator zona — hijau = paling dekat tower, merah = di luar jangkauan */
  --z200:  #3dff88;
  --z800:  #ffd93d;
  --z1200: #ff9f43;
  --zout:  #ff5470;

  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;

  --shadow:    0 18px 48px -20px rgba(0, 0, 0, .85);
  --shadow-lg: 0 34px 80px -28px rgba(0, 0, 0, .9);
  --glow:      0 0 0 1px rgba(52, 244, 209, .28), 0 12px 34px -14px rgba(52, 244, 209, .45);

  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

/* Aturan `display` di kelas mengalahkan [hidden] bawaan browser —
   tegaskan di sini supaya atribut `hidden` selalu benar-benar menyembunyikan. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--tx);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ---------------- latar aurora ---------------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .5;
}
.aurora span:nth-child(1) {
  width: 46vw; height: 46vw; min-width: 340px; min-height: 340px;
  top: -14vw; left: -8vw;
  background: radial-gradient(circle, rgba(52, 244, 209, .34), transparent 68%);
}
.aurora span:nth-child(2) {
  width: 38vw; height: 38vw; min-width: 280px; min-height: 280px;
  top: 24vh; right: -10vw;
  background: radial-gradient(circle, rgba(61, 255, 136, .2), transparent 68%);
}
.aurora span:nth-child(3) {
  width: 42vw; height: 42vw; min-width: 300px; min-height: 300px;
  bottom: -18vw; left: 26vw;
  background: radial-gradient(circle, rgba(20, 120, 190, .22), transparent 70%);
}
body::after {                       /* grid halus di atas aurora */
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(52, 244, 209, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(52, 244, 209, .028) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 30%, transparent 78%);
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 4vw, 44px) clamp(16px, 3.4vw, 32px) 40px;
}

/* ============================ HEADER ============================ */
/* Dua baris: identitas + tombol keluar di atas, tombol aksi di bawah.
   Susunan ini membuat tombol keluar selalu berada di kanan atas pada lebar
   berapa pun, dan memberi baris penuh untuk tombol aksi yang teksnya panjang. */
.hdr {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 22px;
}

.hdr__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.hdr__brand { display: flex; align-items: center; gap: 15px; min-width: 0; }

.hdr__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  border-radius: 15px;
  color: var(--neon);
  background: linear-gradient(150deg, rgba(52, 244, 209, .2), rgba(52, 244, 209, .05));
  border: 1px solid rgba(52, 244, 209, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 10px 26px -14px rgba(52, 244, 209, .8);
}
.hdr__mark svg { width: 27px; height: 27px; }

.hdr__txt { min-width: 0; }
.hdr__txt h1 {
  margin: 0;
  font-size: clamp(19px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: -.4px;
  background: linear-gradient(92deg, #ffffff 12%, var(--neon) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hdr__txt p {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--tx-dim);
  letter-spacing: .2px;
}
.hdr__txt b { color: var(--tx-mid); font-weight: 600; }

.hdr__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================ TOMBOL ============================ */
.btn {
  --btn-bg: var(--raise);
  --btn-tx: var(--tx);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-tx);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .1px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .22s var(--ease),
              background .22s var(--ease), border-color .22s var(--ease), opacity .2s;
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.btn:disabled { cursor: not-allowed; }

.btn--primary {
  --btn-bg: linear-gradient(135deg, #3ffbd8, #17bd9d);
  --btn-tx: #04211d;
  border-color: transparent;
  box-shadow: 0 12px 30px -14px rgba(52, 244, 209, .9);
}
.btn--primary:hover:not(:disabled) { box-shadow: 0 20px 42px -16px rgba(52, 244, 209, 1); }

.btn--ghost { background: rgba(52, 244, 209, .08); border-color: rgba(52, 244, 209, .26); color: #b6fff0; }
.btn--ghost:hover:not(:disabled) { background: rgba(52, 244, 209, .15); border-color: rgba(52, 244, 209, .45); }

.btn--quiet { background: transparent; border-color: var(--line); color: var(--tx-mid); }
.btn--quiet:hover:not(:disabled) { background: var(--raise); color: var(--tx); }

/* Tombol ikon persegi — dipakai untuk keluar di kanan atas. */
.iconbtn {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .045);
  color: var(--tx-mid);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .18s var(--ease);
}
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:hover:not(:disabled) { transform: translateY(-2px); }
.iconbtn:active:not(:disabled) { transform: translateY(0); }
.iconbtn:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }

.iconbtn--logout:hover:not(:disabled) {
  background: rgba(255, 107, 107, .14);
  border-color: rgba(255, 107, 107, .45);
  color: #ffb4b4;
}
.iconbtn.is-busy { opacity: .55; pointer-events: none; }

.btn--danger {
  --btn-bg: linear-gradient(135deg, #ff7b7b, #d63c3c);
  --btn-tx: #2a0708;
  border-color: transparent;
  box-shadow: 0 12px 30px -14px rgba(255, 107, 107, .85);
}

.btn--locked {
  background: rgba(255, 255, 255, .028);
  border-color: rgba(255, 255, 255, .08);
  border-style: dashed;
  color: #4d6b67;
  opacity: .78;
  padding-right: 13px;
}
.btn--locked svg { opacity: .8; }
/* Teksnya panjang: biarkan membungkus bila ruang menyempit, supaya tidak
   pernah meluap keluar panel saat font fallback lebih lebar dari Inter. */
.btn--locked span { white-space: normal; text-align: left; }
.btn__tag {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(255, 190, 61, .13);
  color: var(--amber);
  border: 1px solid rgba(255, 190, 61, .24);
}

/* ============================ LEGENDA ============================ */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
.legend__lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--tx-dim);
  margin-right: 4px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-soft);
  color: var(--tx-mid);
}
/* Lampu indikator: makin jauh dari tower, makin merah dan makin cepat kedipnya. */
.chip i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: currentColor;
  animation: lamp var(--blink, 1.6s) ease-in-out infinite;
}
@keyframes lamp {
  0%, 100% { opacity: 1;  box-shadow: 0 0 6px currentColor, 0 0 15px currentColor; }
  50%      { opacity: .28; box-shadow: 0 0 2px currentColor; }
}

.chip--z200  { --blink: 2.4s; border-color: rgba(61, 255, 136, .22); }
.chip--z200  i { color: var(--z200); }

.chip--z800  { --blink: 1.7s; border-color: rgba(255, 217, 61, .22); }
.chip--z800  i { color: var(--z800); }

.chip--z1200 { --blink: 1.1s; border-color: rgba(255, 159, 67, .22); }
.chip--z1200 i { color: var(--z1200); }

.chip--zout  { --blink: .9s;  border-color: rgba(255, 84, 112, .26); }
.chip--zout  i { color: var(--zout); }

/* ============================= PANEL ============================= */
.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}

.panel__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, rgba(255, 255, 255, .028), transparent);
}

/* --------- pencarian --------- */
.search { position: relative; flex: 1 1 320px; min-width: 0; }
.search__icon {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--tx-dim);
  pointer-events: none;
  transition: color .2s;
}
.search input {
  width: 100%;
  padding: 13px 42px 13px 43px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(2, 12, 11, .55);
  color: var(--tx);
  font: inherit;
  font-size: 14px;
  transition: border-color .22s, box-shadow .22s, background .22s;
}
.search input::placeholder { color: #4a6c67; }
.search input::-webkit-search-cancel-button { display: none; }
.search input:focus {
  outline: none;
  border-color: rgba(52, 244, 209, .55);
  background: rgba(2, 12, 11, .8);
  box-shadow: 0 0 0 4px rgba(52, 244, 209, .1);
}
.search input:focus ~ .search__icon,
.search:focus-within .search__icon { color: var(--neon); }

.search__clear {
  position: absolute;
  right: 9px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 27px; height: 27px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, .07);
  color: var(--tx-mid);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.search__clear svg { width: 13px; height: 13px; }
.search__clear:hover { background: rgba(255, 255, 255, .14); color: var(--tx); }

/* --------- counter --------- */
.counter {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid rgba(52, 244, 209, .24);
  background: rgba(52, 244, 209, .07);
  color: #a9f6e7;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .25s, background .25s, color .25s;
}
.counter__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--neon);
  box-shadow: 0 0 0 0 rgba(52, 244, 209, .5);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 244, 209, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 244, 209, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 244, 209, 0); }
}
.counter.is-search {
  border-color: rgba(255, 190, 61, .3);
  background: rgba(255, 190, 61, .09);
  color: #ffdf9e;
}
.counter.is-search .counter__dot { background: var(--amber); animation: none; }
.counter.is-empty {
  border-color: rgba(255, 107, 107, .3);
  background: rgba(255, 107, 107, .09);
  color: #ffbdbd;
}
.counter.is-empty .counter__dot { background: var(--danger); animation: none; }

/* --------- daftar site (tinggi terbatas + scroll) --------- */
.list {
  height: clamp(340px, 52vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scrollbar-width: thin;
  scrollbar-color: rgba(52, 244, 209, .28) transparent;
}
.list:focus-visible { outline: 2px solid rgba(52, 244, 209, .4); outline-offset: -3px; }
.list::-webkit-scrollbar { width: 9px; }
.list::-webkit-scrollbar-track { background: transparent; }
.list::-webkit-scrollbar-thumb {
  background: rgba(52, 244, 209, .22);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.list::-webkit-scrollbar-thumb:hover { background: rgba(52, 244, 209, .42); background-clip: padding-box; }

/* --------- kartu site --------- */
.card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  background: rgba(255, 255, 255, .028);
  transition: transform .2s var(--ease), border-color .2s, background .2s, box-shadow .2s;
  animation: cardIn .32s var(--ease) both;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.card:hover {
  transform: translateX(3px);
  border-color: rgba(52, 244, 209, .3);
  background: rgba(52, 244, 209, .055);
  box-shadow: 0 10px 28px -18px rgba(52, 244, 209, .7);
}
.card.is-going { animation: cardOut .3s var(--ease) forwards; }
@keyframes cardOut { to { opacity: 0; transform: translateX(-26px) scale(.97); height: 0; padding-block: 0; margin-top: -9px; } }

.card__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(150deg, rgba(52, 244, 209, .17), rgba(52, 244, 209, .04));
  border: 1px solid rgba(52, 244, 209, .2);
  color: var(--neon);
}
.card__ico svg { width: 19px; height: 19px; }

.card__main { flex: 1 1 auto; min-width: 0; }
.card__name {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.15px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card__name mark {
  background: rgba(255, 190, 61, .26);
  color: #ffe4a8;
  border-radius: 3px;
  padding: 0 1px;
}
.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--tx-dim);
}
.card__meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.card__meta svg { width: 12px; height: 12px; flex: none; opacity: .8; }
.card__meta .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.card__file {
  margin-top: 5px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10.5px;
  color: #4f7a74;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__act { flex: none; display: flex; gap: 7px; }
.icobtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--tx-mid);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .16s var(--ease);
}
.icobtn svg { width: 15px; height: 15px; }
.icobtn:hover { transform: translateY(-1px); }
.icobtn:focus-visible { outline: 2px solid var(--neon); outline-offset: 2px; }
.icobtn--dl:hover { background: rgba(52, 244, 209, .16); border-color: rgba(52, 244, 209, .45); color: #b6fff0; }
.icobtn--del { padding: 9px 11px; }
.icobtn--del:hover { background: rgba(255, 107, 107, .16); border-color: rgba(255, 107, 107, .45); color: #ffb4b4; }
.icobtn.is-busy { opacity: .55; pointer-events: none; }

/* --------- keadaan kosong --------- */
.empty {
  margin: auto;
  padding: 34px 20px;
  text-align: center;
  color: var(--tx-dim);
  animation: cardIn .3s var(--ease) both;
}
.empty svg { width: 46px; height: 46px; opacity: .3; margin-bottom: 12px; }
.empty h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--tx-mid); }
.empty p { margin: 0; font-size: 13px; max-width: 340px; margin-inline: auto; line-height: 1.6; }
.empty code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  background: rgba(255, 255, 255, .06);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--neon);
}

.panel__foot {
  padding: 12px 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 11.5px;
  color: var(--tx-dim);
  background: rgba(0, 0, 0, .16);
}

.credit {
  margin-top: 18px;
  text-align: center;
  font-size: 11px;
  color: #3d5b57;
  letter-spacing: .3px;
}

/* ============================= MODAL ============================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 18px;
}
.modal[hidden] { display: none; }

.modal__veil {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 8, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: fade .25s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.modal__box {
  position: relative;
  width: min(500px, 100%);
  max-height: calc(100vh - 36px);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(168deg, #0c2523, #081917 70%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .07);
  animation: pop .3s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.modal__box--sm { width: min(410px, 100%); }
.modal__box--danger { border-color: rgba(255, 107, 107, .26); background: linear-gradient(168deg, #2a1113, #170a0b 70%); }

.modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.modal__head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.25px; }
.modal__head p { margin: 5px 0 0; font-size: 12.5px; color: var(--tx-dim); line-height: 1.55; }
.modal__head b { color: var(--tx-mid); }

.modal__x {
  flex: none;
  display: grid;
  place-items: center;
  width: 31px; height: 31px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: transparent;
  color: var(--tx-dim);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.modal__x svg { width: 14px; height: 14px; }
.modal__x:hover { background: rgba(255, 255, 255, .08); color: var(--tx); }

.modal__body {
  padding: 18px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.modal__foot {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 15px 20px 20px;
  border-top: 1px solid var(--line-soft);
}

.modal__err {
  margin: 0;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(255, 107, 107, .12);
  border: 1px solid rgba(255, 107, 107, .3);
  color: #ffb9b9;
  font-size: 12.5px;
  line-height: 1.5;
  animation: shake .34s var(--ease);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  22% { transform: translateX(-5px); }
  55% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}

/* --------- field --------- */
.field { display: flex; flex-direction: column; gap: 7px; }
.field__lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--tx-dim);
}
.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(2, 12, 11, .6);
  color: var(--tx);
  font: inherit;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input::placeholder { color: #4a6c67; }
.field input:focus {
  outline: none;
  border-color: rgba(52, 244, 209, .55);
  background: rgba(2, 12, 11, .85);
  box-shadow: 0 0 0 4px rgba(52, 244, 209, .1);
}
.modal__box--danger .field input:focus {
  border-color: rgba(255, 107, 107, .55);
  box-shadow: 0 0 0 4px rgba(255, 107, 107, .1);
}
.field input.is-bad { border-color: rgba(255, 107, 107, .6); }
.field__hint { font-size: 11.5px; color: var(--tx-dim); }

/* Peringatan Site ID kembar — muncul seketika saat mengetik. */
.field__warn {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #ffb4b4;
  animation: shake .34s var(--ease);
}
.field__warn::before {
  content: '!';
  flex: none;
  display: grid;
  place-items: center;
  width: 14px; height: 14px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(255, 107, 107, .18);
  border: 1px solid rgba(255, 107, 107, .5);
  color: var(--danger);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

/* Baris label + badge. Badge memakai bentuk tombol Download pada kartu site
   (radius, tebal garis, ukuran huruf) tapi tanpa interaksi apa pun. */
.field__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: var(--tx-mid);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.3;
  white-space: nowrap;
  cursor: default;          /* bukan tombol — tidak bisa diklik */
  user-select: none;
}

/* Input dengan awalan tetap "EMR-" yang tidak bisa diedit. */
.prefixed {
  display: flex;
  align-items: stretch;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: rgba(2, 12, 11, .6);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.prefixed:focus-within {
  border-color: rgba(52, 244, 209, .55);
  background: rgba(2, 12, 11, .85);
  box-shadow: 0 0 0 4px rgba(52, 244, 209, .1);
}
.prefixed.is-bad { border-color: rgba(255, 107, 107, .6); }
.prefixed__fix {
  display: flex;
  align-items: center;
  padding: 0 2px 0 14px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--neon);
  background: rgba(52, 244, 209, .07);
  border-right: 1px solid var(--line-soft);
  padding-right: 10px;
  margin-right: 2px;
  user-select: none;
}
.prefixed input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 12px 10px;
  border: 0;
  background: transparent;
  color: var(--tx);
  font: inherit;
  font-size: 14px;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .4px;
}
.prefixed input:focus { outline: none; }
.prefixed input::placeholder {
  color: #4a6c67;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
}
.field__hint code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: rgba(255, 255, 255, .06);
  padding: 1px 5px;
  border-radius: 5px;
  color: var(--neon);
}

.peril {
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid rgba(255, 107, 107, .26);
  background: rgba(255, 107, 107, .08);
  font-size: 13.5px;
  font-weight: 700;
  color: #ffd0d0;
  word-break: break-word;
}
.peril small {
  display: block;
  margin-top: 4px;
  font-weight: 500;
  font-size: 11.5px;
  color: #c98d8d;
  font-family: 'JetBrains Mono', monospace;
}

/* --------- spinner --------- */
.spinner {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, .25);
  border-top-color: currentColor;
  animation: spin .62s linear infinite;
}
.spinner[hidden] { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.is-busy { pointer-events: none; opacity: .8; }

/* ============================= TOAST ============================= */
.toasts {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 15px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(10, 30, 28, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx);
  animation: toastIn .32s var(--ease);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(28px); } }
.toast.is-out { animation: toastOut .26s var(--ease) forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateX(28px); } }
.toast svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.toast--ok   { border-color: rgba(61, 255, 136, .34); }
.toast--ok   svg { color: #3dff88; }
.toast--err  { border-color: rgba(255, 107, 107, .38); background: rgba(38, 14, 15, .95); }
.toast--err  svg { color: var(--danger); }
.toast--info svg { color: var(--neon); }
.toast b { display: block; font-weight: 700; margin-bottom: 1px; }
.toast span { color: var(--tx-mid); font-size: 12.5px; }

/* ============================ RESPONSIF ============================ */
@media (max-width: 880px) {
  .hdr__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .btn--primary { grid-column: 1 / -1; justify-content: center; }
  .btn { justify-content: center; }
  .btn--locked { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  .hdr__actions { grid-template-columns: 1fr; }
  .btn span { white-space: normal; }
  .panel__top { flex-direction: column; align-items: stretch; }
  /* Sumbu utama berubah jadi vertikal: tanpa reset ini flex-basis 320px
     akan diterapkan ke TINGGI sehingga kolom pencarian melar ke bawah. */
  .search { flex: 0 0 auto; width: 100%; }
  .counter { justify-content: center; }
  .list { height: clamp(320px, 58vh, 500px); }
  .card { flex-wrap: wrap; gap: 11px; }
  .card__ico { width: 34px; height: 34px; border-radius: 9px; }
  .card__main { flex: 1 1 160px; }
  .card__act { width: 100%; }
  .icobtn--dl { flex: 1; justify-content: center; }
  .toasts { left: 14px; right: 14px; bottom: 14px; max-width: none; }
  .modal__foot { flex-direction: column-reverse; }
  .modal__foot .btn { width: 100%; justify-content: center; }
}

/* --------- aksesibilitas: hormati preferensi gerak --------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   HALAMAN GERBANG — Executive Access Verification
   ================================================================== */

.gate { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; }

.gate__wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: clamp(18px, 5vw, 40px);
  display: grid;
  place-items: center;
}

.gate__card {
  position: relative;
  width: min(430px, 100%);
  padding: 30px clamp(22px, 5vw, 34px) 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(168deg, rgba(13, 40, 37, .92), rgba(6, 22, 21, .95) 72%);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .07);
  text-align: center;
  animation: gateIn .5s var(--ease) both;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
@keyframes gateIn { from { opacity: 0; transform: translateY(16px) scale(.975); } }

/* garis cahaya tipis di tepi atas kartu */
.gate__card::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(90deg, transparent, rgba(52, 244, 209, .75), transparent);
}

/* --------- badge status kiri atas --------- */
.gate__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  float: left;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(52, 244, 209, .3);
  background: rgba(52, 244, 209, .1);
  color: #a9f6e7;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.gate__lamp {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--neon-2);
  animation: gateLamp 1.6s var(--ease) infinite;
}
@keyframes gateLamp {
  0%, 100% { opacity: 1;   box-shadow: 0 0 6px var(--neon-2), 0 0 14px var(--neon-2); }
  50%      { opacity: .25; box-shadow: 0 0 2px var(--neon-2); }
}

/* --------- gembok --------- */
.gate__lock {
  clear: both;
  display: grid;
  place-items: center;
  width: 68px; height: 68px;
  margin: 26px auto 18px;
  border-radius: 22px;
  color: var(--neon);
  background: linear-gradient(155deg, rgba(52, 244, 209, .2), rgba(52, 244, 209, .04));
  border: 1px solid rgba(52, 244, 209, .32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 16px 34px -18px rgba(52, 244, 209, .85);
}
.gate__lock svg { width: 34px; height: 34px; }

/* --------- judul --------- */
.gate__title {
  margin: 0;
  font-size: clamp(19px, 3.4vw, 22px);
  font-weight: 800;
  letter-spacing: -.35px;
  line-height: 1.25;
  background: linear-gradient(92deg, #ffffff 20%, var(--neon) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.gate__sub {
  margin: 9px auto 24px;
  max-width: 33ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--tx-dim);
}

/* --------- kolom isian --------- */
.gate__field { text-align: left; margin-bottom: 14px; }

.gate__pass { position: relative; display: block; }
.gate__pass input { padding-right: 46px; }
.gate__eye {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 31px; height: 31px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--tx-dim);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.gate__eye svg { width: 17px; height: 17px; }
.gate__eye:hover { background: rgba(255, 255, 255, .07); color: var(--tx-mid); }
.gate__eye.is-on { color: var(--neon); }

/* --------- tetap masuk --------- */
.gate__remember {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  text-align: left;
  cursor: pointer;
  user-select: none;
}
.gate__remember input { position: absolute; opacity: 0; width: 0; height: 0; }
.gate__box {
  flex: none;
  display: grid;
  place-items: center;
  width: 19px; height: 19px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: rgba(2, 12, 11, .6);
  color: #04211d;
  transition: background .18s, border-color .18s;
}
.gate__box svg { width: 11px; height: 11px; opacity: 0; transition: opacity .18s; }
.gate__remember input:checked + .gate__box {
  background: linear-gradient(135deg, #3ffbd8, #17bd9d);
  border-color: transparent;
}
.gate__remember input:checked + .gate__box svg { opacity: 1; }
.gate__remember input:focus-visible + .gate__box { outline: 2px solid var(--neon); outline-offset: 2px; }
.gate__remember-txt { font-size: 12.5px; font-weight: 600; color: var(--tx-mid); line-height: 1.4; }
.gate__remember-txt em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: var(--tx-dim);
}

.gate__err { margin-bottom: 14px; text-align: left; }

.gate__submit { width: 100%; justify-content: center; padding: 13px 18px; font-size: 14px; }

/* --------- pemisah & footer --------- */
.gate__divider {
  height: 1px;
  margin: 22px 0 14px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.gate__foot {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #4f7a74;
}

/* --------- keadaan berhasil --------- */
.is-granted .gate__card { opacity: 0; transform: translateY(-8px) scale(.99); }

@media (max-width: 420px) {
  .gate__card { padding: 26px 18px 20px; border-radius: 18px; }
  .gate__lock { width: 60px; height: 60px; margin-top: 22px; }
  .gate__lock svg { width: 30px; height: 30px; }
}