/* =====================================================================
   imageurl — antarmuka

   Arahnya sama seperti sebelumnya dan tidak berubah: alat foto profesional
   memakai perabot gelap dan kanvas netral, karena latar berwarna atau terang
   menggeser cara mata menilai warna gambar yang sedang diperiksa. Warna
   dijaga hemat — hijau untuk yang bisa diklik, merah bata untuk yang merusak,
   dan kartu gambar putih bersih tanpa rona apa pun.

   Yang dirapikan di putaran ini:

   1. Lebar konten dibatasi. Di layar 1900px semuanya dulu melar penuh, jadi
      kotak unggah berubah jadi pita tipis dengan isi terlempar ke dua ujung.
      Baris teks yang terlalu lebar juga melelahkan dibaca.

   2. Rel kiri diringankan. Blok hitam setinggi layar dengan tiga item di
      dalamnya terasa berat sebelah; sekarang lebih lembut dan tombol
      "Kelola akun" tidak lagi berteriak.

   3. Kedalaman dibuat bertingkat, bukan datar. Elemen yang tingginya berbeda
      terbaca berbeda: kartu nyaris menempel, kotak unggah sedikit terangkat,
      selubung dan dialog jelas melayang.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;450;500;600&display=swap');

:root {
  /* Perabot — nyaris hitam dengan sedikit undernada hijau, supaya menyatu
     dengan warna aksinya alih-alih tampak sebagai abu-abu yang terpisah. */
  --chrome:      #14181a;
  --chrome-2:    #1b2124;
  --chrome-deep: #0e1113;
  --chrome-line: rgba(255, 255, 255, .08);
  --chrome-ink:  #e9ecea;
  --chrome-mute: #8c9793;

  /* Kanvas & kertas */
  --canvas:  #eae8e4;
  --canvas-2:#e3e1dc;
  --card:    #ffffff;
  --ink:     #15181a;
  --muted:   #6a6a64;
  --faint:   #9b9b94;
  --line:    #dddcd6;
  --line-2:  #c6c5be;
  --sunken:  #f4f4f1;

  /* Isyarat */
  --signal:      #1f4d3d;
  --signal-2:    #2a6450;
  --signal-deep: #143328;
  --signal-lift: #6fbf9b;
  --signal-soft: #e7f0eb;
  --signal-edge: #bad3c8;

  --alert:      #8a2e1c;
  --alert-soft: #f8e9e5;
  --alert-edge: #e3bfb5;

  --lift-1: 0 1px 1px rgba(21, 24, 26, .04), 0 1px 3px rgba(21, 24, 26, .05);
  --lift-2: 0 1px 2px rgba(21, 24, 26, .05), 0 6px 16px rgba(21, 24, 26, .07);
  --lift-3: 0 2px 4px rgba(21, 24, 26, .06), 0 18px 44px rgba(21, 24, 26, .14);

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Lebar baca. Di atas ini konten berhenti melebar dan mulai menengah. */
  --measure: 1280px;

  --plate: #fbfbf9;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  background-image: linear-gradient(180deg, var(--canvas) 0%, var(--canvas-2) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--signal); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(18px, 2.4vw, 30px);
  height: 60px;
  background: linear-gradient(180deg, var(--chrome-2), var(--chrome));
  border-bottom: 1px solid var(--chrome-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
  color: var(--chrome-ink);
  position: relative;
  z-index: 20;
}

.wordmark {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--chrome-ink);
  display: flex;
  align-items: center;
  gap: 11px;
}

/* Tanda kecil, bukan logo: dua bidang bertumpuk, sebagaimana gambar
   ditumpuk di dalam folder. Yang belakang cuma garis, yang depan padat. */
.wordmark::before {
  content: '';
  width: 17px;
  height: 14px;
  border-radius: 3px;
  background: var(--signal-lift);
  box-shadow:
    3px -3px 0 -1px var(--chrome),
    3px -3px 0 0 rgba(111, 191, 155, .38);
}

.masthead-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 22px);
  font-size: 13px;
  color: var(--chrome-mute);
}

.masthead-meta b {
  font: 500 13px/1 var(--mono);
  color: var(--chrome-ink);
}

.masthead-meta form { display: contents; }

.masthead-meta a {
  color: var(--chrome-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.masthead-meta a:hover { color: var(--chrome-ink); }

.linkbtn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.linkbtn:hover { color: var(--ink); }

.masthead .linkbtn { color: var(--chrome-mute); }
.masthead .linkbtn:hover { color: var(--chrome-ink); }

/* ------------------------------------------------------------------ shell */

.shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - 60px);
}

.rail {
  background: linear-gradient(180deg, var(--chrome) 0%, var(--chrome-deep) 100%);
  color: var(--chrome-ink);
  padding: 24px 16px 40px 22px;
  border-right: 1px solid var(--chrome-deep);
}

.rail h2 {
  margin: 0 0 12px 10px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--chrome-mute);
}

.rail-group { margin-bottom: 24px; }

.folder-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 1px;
}

.folder-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--chrome-ink);
  text-decoration: none;
  font-size: 14px;
  transition: background-color .12s;
}

.folder-list a:hover { background: rgba(255, 255, 255, .055); }

.folder-list a[aria-current='true'] {
  background: rgba(111, 191, 155, .12);
  color: #d0ebdf;
  font-weight: 500;
  box-shadow: inset 2px 0 0 var(--signal-lift);
}

.folder-list .count {
  margin-left: auto;
  font: 400 12px/1 var(--mono);
  color: var(--chrome-mute);
}

.folder-new { display: flex; gap: 6px; }
.folder-new input { flex: 1; min-width: 0; }

/* Isian di dalam rel gelap ikut gelap, jangan kotak putih menyala. */
.rail input[type='text'] {
  background: rgba(255, 255, 255, .045);
  border-color: var(--chrome-line);
  color: var(--chrome-ink);
}

.rail input::placeholder { color: #737d7a; }

.rail .btn-quiet {
  background: rgba(255, 255, 255, .07);
  border-color: var(--chrome-line);
  color: var(--chrome-ink);
}

.rail .btn-quiet:hover { background: rgba(255, 255, 255, .13); }

.rail .linkbtn { color: var(--chrome-mute); font-size: 13px; }
.rail .linkbtn:hover { color: #e8a898; }

.rail-admin {
  padding-top: 20px;
  border-top: 1px solid var(--chrome-line);
}

/* Tautan, bukan tombol besar. Ini pintu yang jarang dipakai; memberinya
   bobot sebesar aksi utama membuat rel terasa berat tanpa alasan. */
.rail-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: var(--r-sm);
  color: var(--chrome-mute);
  text-decoration: none;
  font-size: 14px;
  transition: background-color .12s, color .12s;
}

.rail-link::before {
  content: '';
  width: 13px;
  height: 11px;
  flex: none;
  border-radius: 2px;
  border: 1.5px solid currentColor;
  opacity: .75;
}

.rail-link:hover {
  background: rgba(255, 255, 255, .055);
  color: var(--chrome-ink);
}

/* ------------------------------------------------------------------ form */

input[type='text'],
input[type='search'],
input[type='password'],
input[type='email'],
input[type='number'],
input[type='url'],
input[type='tel'],
select {
  font: 400 14px/1.4 var(--sans);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  transition: border-color .12s, box-shadow .12s;
}

input:focus,
select:focus {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(31, 77, 61, .1);
  outline: none;
}

input::placeholder { color: var(--faint); }

select { padding-right: 28px; }

.btn {
  font: 500 14px/1 var(--sans);
  padding: 10px 17px;
  border: 1px solid var(--signal-deep);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--signal-2), var(--signal));
  color: #f2f8f5;
  cursor: pointer;
  box-shadow: var(--lift-1), inset 0 1px 0 rgba(255, 255, 255, .09);
  transition: filter .12s, box-shadow .12s, transform .06s;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); box-shadow: none; }

.btn-quiet {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: var(--lift-1);
}

.btn-quiet:hover { background: var(--sunken); filter: none; }

.btn-small { font-size: 13px; padding: 7px 12px; }

/* -------------------------------------------------------------- main pane */

.pane { padding: 26px clamp(18px, 3vw, 40px) 80px; }

/* Batas lebar baca. Tanpa markup tambahan: setiap anak langsung .pane
   berhenti melebar di titik yang sama dan menengah bersama-sama. */
.pane > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

/* Area lepas file — satu-satunya elemen yang boleh berteriak di halaman ini,
   karena inilah pekerjaan utamanya. */
.dropzone {
  position: relative;
  background:
    linear-gradient(180deg, var(--card), #fcfcfa);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-2);
  padding: 30px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  transition: border-color .14s, box-shadow .14s;
}

/* Garis putus-putus dipasang sebagai lapisan di dalam, bukan sebagai border
   elemen: sudut membulatnya tetap rapi dan perubahan tebalnya tidak
   menggeser tata letak. */
.dropzone::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px dashed var(--line-2);
  border-radius: 10px;
  pointer-events: none;
  transition: border-color .14s;
}

.dropzone.is-armed {
  border-color: var(--signal);
  box-shadow: var(--lift-3);
}

.dropzone.is-armed::before {
  border-color: var(--signal);
  border-style: solid;
}

.dropzone-copy { min-width: 250px; position: relative; }

.dropzone-copy p {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.016em;
}

.dropzone-copy small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.dropzone-controls {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: relative;
}

.dropzone-controls label { font-size: 13px; color: var(--muted); }

.dropzone input[type='file'] { display: none; }

/* Selubung se-halaman penuh. Muncul begitu file diseret ke mana pun di
   jendela, supaya melepas di luar kotak tidak lagi membuat browser kabur
   membuka gambarnya dan menelan halaman ini. */
.dropveil {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  place-items: center;
  padding: 28px;
  background: rgba(20, 24, 26, .58);
  backdrop-filter: blur(3px);
}

.dropveil.is-up { display: grid; }

.dropveil-inner {
  width: min(520px, 100%);
  border: 2px dashed var(--signal-lift);
  border-radius: var(--r-xl);
  background: var(--card);
  box-shadow: var(--lift-3);
  padding: 48px 30px;
  text-align: center;
}

.dropveil strong {
  display: block;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.018em;
}

.dropveil span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

/* Antrean upload */
.queue {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  position: relative;
  width: 100%;
}

.queue li {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 7px 12px 7px 7px;
  font-size: 13px;
}

.queue .chip {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 3px;
  border: 1px solid var(--line-2);
  background: var(--plate) center / cover no-repeat;
}

.queue .name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue .state { font: 400 12px/1 var(--mono); color: var(--muted); }
.queue .state.done { color: var(--signal); }
.queue .state.fail { color: var(--alert); }

.bar {
  width: 90px;
  height: 3px;
  flex: none;
  background: var(--line-2);
  border-radius: 2px;
  overflow: hidden;
}

.bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--signal);
  transition: width .18s linear;
}

.queue-foot {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  width: 100%;
}

.queue-foot[hidden] { display: none; }

/* --------------------------------------------------------------- toolbar */

.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 34px auto 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.toolbar h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}

.toolbar .tally {
  font: 400 13px/1 var(--mono);
  color: var(--faint);
}

.toolbar form {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* ----------------------------------------------------------------- sheet */

.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 18px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.frame {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--lift-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .16s, border-color .16s, transform .16s;
}

.frame:hover {
  box-shadow: var(--lift-2);
  border-color: var(--line-2);
  transform: translateY(-1px);
}

.frame-plate {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;

  /* WAJIB. Tanpa ini, min-height:auto bawaan flex item mengambil tinggi
     asli gambar dan mengalahkan aspect-ratio di atas — itulah sebabnya satu
     foto portrait dulu memanjang sampai keluar layar. */
  min-height: 0;
  flex: none;

  background: linear-gradient(180deg, #f8f8f6, var(--plate));
  border-bottom: 1px solid var(--line);
}

/* Sisa ruang di kiri-kanan gambar portrait diisi gambarnya sendiri dalam
   keadaan buram. Warnanya selalu menyambung karena sumbernya sama. */
.frame-blur {
  position: absolute;
  inset: -14%;
  background: center / cover no-repeat;
  filter: blur(22px) saturate(118%);
  opacity: .6;
  z-index: 0;
  pointer-events: none;
}

/* contain, bukan cover. Thumbnail yang dipotong menyesatkan kalau gambarnya
   sebentar lagi mau dipasang di tempat lain — yang dilihat harus utuh. */
.frame-plate img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hairline di dalam, supaya gambar terbaca duduk DI DALAM plat. */
.frame-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  box-shadow: inset 0 0 0 1px rgba(21, 24, 26, .05);
  pointer-events: none;
}

.frame-body {
  padding: 12px 13px 13px;
  display: grid;
  gap: 9px;
  align-content: start;
  min-width: 0;
}

/* Anak grid bawaannya min-width:auto, yang artinya "selebar isi terpanjang".
   Untuk <select>, isi terpanjang itu teks opsinya — cukup untuk memaksa
   seluruh kolom kartu melar melewati lebar kartunya, memotong judul dan URL,
   dan mendorong tombol Hapus keluar dari area yang terlihat. Nol-kan. */
.frame-body > * { min-width: 0; }

.frame-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-facts {
  display: flex;
  gap: 10px;
  font: 400 11.5px/1 var(--mono);
  color: var(--faint);
}

/* Aksi utama kartu: pilih format, lalu salin. */
.frame-link { display: grid; gap: 6px; min-width: 0; }
.frame-link > * { min-width: 0; }

.frame-copy {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: 400 11.5px/1.35 var(--mono);
  color: var(--muted);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}

.frame-copy .u {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-copy .tag {
  flex: none;
  font: 500 11px/1 var(--sans);
  color: var(--signal);
  letter-spacing: .01em;
}

.frame-copy:hover {
  color: var(--ink);
  border-color: var(--signal-edge);
  background: var(--signal-soft);
}

.frame-copy.is-done {
  border-color: var(--signal);
  background: var(--signal-soft);
  color: var(--signal);
}

.frame-opts {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.frame-opts > * { min-width: 0; }

.frame-format {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  font-size: 13px;
  padding: 7px 10px;
  background: var(--card);
}

.frame-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  padding-top: 2px;
}

.frame-actions form { display: contents; }

/* Didorong ke kanan lewat margin, bukan lewat elemen pengganjal yang bisa
   ikut melar kalau tata letaknya meleset. */
.frame-actions .danger { margin-left: auto; }

.frame-edit[hidden] { display: none; }

.frame-edit {
  display: grid;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.frame-edit input,
.frame-edit select { width: 100%; font-size: 13px; }

.frame-edit .row { display: flex; gap: 6px; align-items: center; }

.danger { color: var(--alert); }
.danger:hover { color: #a83a24; }

/* ------------------------------------------------------------- messages */

.note {
  padding: 12px 15px;
  border-radius: var(--r-md);
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid;
  box-shadow: var(--lift-1);
}

.note-ok  { background: var(--signal-soft); border-color: var(--signal-edge); color: var(--signal); }
.note-err { background: var(--alert-soft);  border-color: var(--alert-edge);  color: var(--alert); }

/* Keadaan kosong. Diberi bentuk, bukan cuma kalimat di tengah kotak — halaman
   yang benar-benar kosong adalah kesan pertama yang didapat pengguna baru. */
.empty {
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-xl);
  padding: 64px 28px 68px;
  text-align: center;
  color: var(--muted);
  background: rgba(255, 255, 255, .4);
}

/* Lambang foto sederhana: bingkai dengan matahari kecil di dalamnya. */
.empty::before {
  content: '';
  display: block;
  width: 46px;
  height: 36px;
  margin: 0 auto 18px;
  border: 2px solid var(--line-2);
  border-radius: 5px;
  background:
    radial-gradient(circle at 31% 33%, var(--line-2) 3.5px, transparent 4px),
    linear-gradient(122deg, transparent 46%, var(--line-2) 46%, var(--line-2) 60%, transparent 60%);
  background-repeat: no-repeat;
}

.empty strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.012em;
  margin-bottom: 5px;
}

/* ------------------------------------------------------------ pagination */

.pager {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
  font: 400 13px/1 var(--mono);
}

.pager a, .pager span {
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--lift-1);
}

.pager a:hover { border-color: var(--line-2); background: var(--sunken); }

.pager span[aria-current] {
  background: var(--signal);
  border-color: var(--signal-deep);
  color: #fff;
}

/* ------------------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 12px);
  background: var(--chrome);
  color: var(--chrome-ink);
  border: 1px solid var(--chrome-line);
  padding: 12px 20px;
  border-radius: var(--r-md);
  box-shadow: var(--lift-3);
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s, transform .16s;
  z-index: 90;
}

.toast.is-up { opacity: 1; transform: translate(-50%, 0); }

/* ================================================================= admin */

.admin {
  max-width: 1060px;
  margin: 0 auto;
  padding: 38px clamp(18px, 3vw, 30px) 90px;
}

.admin-head { margin-bottom: 28px; }

.admin-head h1 {
  margin: 0 0 7px;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.026em;
}

.admin-head p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  max-width: 62ch;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  padding: 24px 26px 26px;
  margin-bottom: 22px;
}

.panel h2 {
  margin: 0 0 18px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
}

.panel .hint {
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 66ch;
}

.grid-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 15px;
  align-items: end;
}

.grid-form > * { min-width: 0; }

.grid-form label {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  align-content: start;
}

.grid-form input,
.grid-form select { width: 100%; min-width: 0; }

/* Tombol diberi barisnya sendiri. Sebagai anggota biasa di grid auto-fit,
   dia ikut mengantre kolom dan berakhir nyelip di bawah kolom pertama
   begitu jumlah kolomnya tidak pas. */
.grid-form-go {
  grid-column: 1 / -1;
  display: flex;
  margin-top: 4px;
}

.grid-form-go .btn { width: auto; min-width: 190px; }

/* Sandi yang hanya muncul sekali. Dibuat menonjol karena kalau terlewat,
   satu-satunya jalan adalah membuat sandi baru lagi. */
.cred {
  background: var(--signal-soft);
  border: 1px solid var(--signal-edge);
  border-radius: var(--r-md);
  padding: 17px 19px;
  margin-bottom: 22px;
  box-shadow: var(--lift-1);
}

.cred strong {
  display: block;
  color: var(--signal);
  font-size: 15px;
  margin-bottom: 5px;
}

.cred p {
  margin: 0 0 13px;
  font-size: 13px;
  color: var(--muted);
  max-width: 68ch;
}

.cred-box {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  text-align: left;
  font: 500 15px/1.3 var(--mono);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--signal-edge);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  cursor: pointer;
}

.cred-box .u { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cred-box .tag { flex: none; font: 500 12px/1 var(--sans); color: var(--signal); }
.cred-box:hover { border-color: var(--signal); }

.table-wrap { overflow-x: auto; }

.users {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.users th {
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.users td {
  padding: 15px 12px 15px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.users tr:last-child td { border-bottom: 0; }

.users .who { font-weight: 500; }

.users .you {
  font: 400 11px/1 var(--sans);
  color: var(--signal);
  background: var(--signal-soft);
  border: 1px solid var(--signal-edge);
  border-radius: 999px;
  padding: 3px 7px;
  margin-left: 5px;
  vertical-align: 1px;
}

.users .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
}

.users .sub code {
  font: 400 12px/1 var(--mono);
  color: var(--ink);
}

.pill {
  display: inline-block;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}

.pill-on {
  background: var(--signal-soft);
  border-color: var(--signal-edge);
  color: var(--signal);
}

.meter {
  width: 150px;
  height: 5px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.meter i {
  display: block;
  height: 100%;
  background: var(--signal);
}

.inline {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}

.inline input[type='number'] {
  width: 92px;
  font: 400 13px/1.4 var(--mono);
  padding: 6px 9px;
}

.row-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ login */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, #1d2327 0%, var(--chrome) 45%, var(--chrome-deep) 100%);
}

.gate-card {
  width: 100%;
  max-width: 372px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--lift-3);
  padding: 36px;
}

.gate-card h1 {
  margin: 0 0 6px;
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.026em;
}

.gate-card p {
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
}

.gate-card label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
}

.gate-card input {
  width: 100%;
  margin-bottom: 17px;
  padding: 11px;
}

.gate-card .btn { width: 100%; padding: 12px; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }

  .rail {
    padding: 16px 20px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--chrome-deep);
    background: var(--chrome);
  }

  .rail-group { margin-bottom: 16px; }
  .rail-admin { padding-top: 14px; }

  .pane { padding: 18px 18px 60px; }
  .dropzone { padding: 22px 18px; }
  .dropzone-copy { min-width: 0; }
  .dropzone-controls { margin-left: 0; width: 100%; }
  .dropzone-controls .btn { flex: 1; }

  .toolbar { margin-top: 26px; }
  .toolbar form { margin-left: 0; width: 100%; }
  .toolbar form input[type='search'] { flex: 1; min-width: 0; }

  .sheet { grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 12px; }

  .empty { padding: 44px 20px 48px; }

  .masthead { padding: 0 16px; }
  .masthead-meta { gap: 12px; font-size: 12px; }

  .admin { padding: 24px 18px 70px; }
  .panel { padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}