:root {
  --bg: #111;
  --panel: #1b1b1b;
  --panel2: #222;
  --line: #333;
  --fg: #eee;
  --muted: #888;
  --accent: #1fe0e0;
  --green: #1f7a3a;
  --red: #ff3b3b;
  --amber: #ffb84d;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, sans-serif; font-size: 15px; }
a { color: var(--accent); }

#topbar { position: sticky; top: 0; z-index: 20; background: var(--panel);
  border-bottom: 1px solid var(--line); padding: 8px 12px;
  display: flex; align-items: center; gap: 10px; }
#topbar b { font-size: 16px; }
#topbar .spacer { flex: 1; }
#who { font-size: 12px; color: var(--muted); }

.tabs { display: flex; gap: 6px; }
.tabs button { background: var(--panel2); color: var(--fg); border: none;
  padding: 8px 14px; border-radius: 8px 8px 0 0; font-weight: 600; font-size: 14px; }
.tabs button.active { background: var(--accent); color: #000; }

.view { display: none; padding: 12px; max-width: 860px; margin: 0 auto; }
.view.active { display: block; }

button { font-size: 15px; padding: 10px 14px; border: none; border-radius: 8px;
  background: var(--panel2); color: var(--fg); font-weight: 600; cursor: pointer; }
button:active { transform: scale(.98); }
button:disabled { opacity: .5; }
button.primary { background: var(--green); color: #fff; }
button.accent { background: var(--accent); color: #000; }
button.danger { background: #7a1f1f; color: #fff; }
button.sm { padding: 6px 10px; font-size: 13px; }

input, select { font-size: 14px; padding: 8px; background: #000; color: var(--fg);
  border: 1px solid #444; border-radius: 6px; }
input[type=text], input[type=password] { width: 100%; }

.card { background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px; margin-bottom: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); font-size: 13px; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.5; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); font-size: 14px; }
th { color: var(--muted); font-weight: 600; }
.badge { display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 12px; font-weight: 700; }
.badge.ok { background: #14351f; color: #6de08a; }
.badge.warn { background: #3a2a00; color: var(--amber); }

.unknown-item { border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; margin-bottom: 8px; background: var(--panel2); }
.unknown-item .q { font-family: monospace; font-size: 13px; color: #ffd; word-break: break-word; }

/* grid thumbnail foto di UNKNOWN */
.pics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px; margin-bottom: 8px; }
.pic-cell { aspect-ratio: 1; background: #000; border: 1px solid var(--line);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  overflow: hidden; }
.pic-cell img { width: 100%; height: 100%; object-fit: contain; }

/* tabel rencana: bungkus biar bisa geser samping di HP, folder gak kepotong */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
td.folder-cell { word-break: break-word; max-width: 60vw; }

/* daftar folder lengkap (tombol ▾ daftar) */
.folder-list { margin-top: 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #000; overflow: hidden; }

/* ── labeling: bar question + area gambar manual ── */
.qbar { text-align: center; font-size: 14px; color: #ffd;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; margin-bottom: 4px; word-break: break-word; }
#mwrap { position: relative; max-width: 640px; margin: 0 auto;
  overflow: hidden; touch-action: none; border-radius: 6px; }
#mstage { position: relative; transform-origin: 0 0; }
.mbox { position: absolute; border: 2px solid var(--accent);
  background: rgba(31,224,224,.08); border-radius: 3px; }
.mbox.diff { border-color: var(--red); background: rgba(255,59,59,.22); }
.mdel { position: absolute; top: -12px; right: -12px; width: 24px; height: 24px;
  line-height: 22px; text-align: center; background: #000; color: var(--red);
  border: 1px solid var(--red); border-radius: 50%; font-weight: 700; font-size: 15px; }
.mtag { position: absolute; top: -15px; left: -2px; font-size: 10px; font-weight: 700;
  padding: 0 3px; border-radius: 2px; background: var(--red); color: #fff; }
.folder-filter { width: 100%; border: none; border-bottom: 1px solid var(--line);
  border-radius: 0; background: #0a0a0a; }
.folder-opts { max-height: 300px; overflow-y: auto; }
.folder-opt { display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-bottom: 1px solid #222;
  font-size: 13px; cursor: pointer; }
.folder-opt:active { background: var(--panel2); }
.folder-name { word-break: break-word; flex: 1; }
.folder-thumb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 6px;
  background: #000; border: 1px solid var(--line); overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
.folder-thumb img { width: 100%; height: 100%; object-fit: contain; }
.folder-thumb.empty { color: var(--muted); font-size: 16px; }

#log { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: #000d; border-top: 1px solid var(--line); padding: 8px 12px;
  font-size: 13px; color: var(--accent); display: none; }
#log.on { display: block; }
.spin { display: inline-block; width: 12px; height: 12px; border: 2px solid #444;
  border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite;
  vertical-align: middle; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* gate */
#gate { max-width: 480px; margin: 40px auto; }
#gate .card { padding: 20px; }
#gate h2 { margin-top: 0; }