:root{
  --room:#0d0a09;
  --room-2:#151110;
  --panel:#1b1512;
  --panel-2:#221a16;
  --line:#332823;
  --line-soft:#251d19;
  --safelight:#ff4326;
  --safelight-2:#ff7d4d;
  --paper:#f3ece0;
  --paper-2:#ece2d2;
  --paper-edge:#dccdb7;
  --ink:#ECE3DA;
  --muted:#9c8d80;
  --faint:#6c5e55;
  --print-ink:#2a201a;
  --print-muted:#7c6f60;
  --fixed:#3fbf9a;
  --danger:#e0492f;
  --shadow:0 18px 40px -18px rgba(0,0,0,.8), 0 4px 14px -8px rgba(0,0,0,.6);
  --r:14px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:
    radial-gradient(1100px 480px at 78% -8%, rgba(255,67,38,.10), transparent 60%),
    radial-gradient(900px 520px at -5% 110%, rgba(255,125,77,.06), transparent 55%),
    var(--room);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Header ---------- */
.bar{
  position:relative; z-index:2;
  max-width:1000px; margin:0 auto; padding:22px 22px 8px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.wordmark{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit}
.bulb{
  width:13px; height:13px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9b7d, var(--safelight) 60%, #b51f0c);
  box-shadow:0 0 0 4px rgba(255,67,38,.14), 0 0 18px 3px rgba(255,67,38,.55);
  flex:none;
}
.wm-text{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:20px; letter-spacing:-.02em}
.wm-dim{color:var(--faint); font-weight:600}
.bar-right{display:flex; align-items:center; gap:12px}
.navlink{
  font-size:13px; color:var(--muted); text-decoration:none; padding:6px 12px;
  border:1px solid var(--line); border-radius:999px; transition:color .2s, border-color .2s; white-space:nowrap;
}
.navlink:hover{color:var(--ink); border-color:var(--faint)}
.counter{
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:-.01em;
  color:var(--muted); padding:6px 11px; border:1px solid var(--line); border-radius:999px;
  background:rgba(0,0,0,.2); white-space:nowrap;
}

/* ---------- Layout ---------- */
.wrap{position:relative; z-index:1; max-width:1000px; margin:0 auto; padding:14px 22px 40px}
.stage{margin-top:10px}

/* ---------- Dropzone ---------- */
.dropzone{
  position:relative; display:block; cursor:pointer; overflow:hidden;
  border-radius:var(--r);
  border:1.5px dashed var(--line);
  background:linear-gradient(180deg, var(--panel), var(--room-2));
  min-height:288px;
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  outline:none;
}
.dz-inner{
  position:relative; z-index:2;
  min-height:288px; padding:34px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:7px;
}
.dz-icon{
  width:58px; height:58px; margin-bottom:8px; border-radius:50%;
  display:grid; place-items:center; font-size:24px; font-weight:700;
  color:var(--safelight);
  border:1.5px solid var(--line);
  background:radial-gradient(circle at 50% 35%, rgba(255,67,38,.12), transparent 70%), var(--panel-2);
  transition:transform .3s ease, border-color .25s ease, color .25s ease;
}
.dz-title{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:21px; letter-spacing:-.01em}
.dz-sub{color:var(--muted); font-size:14px}
.dz-formats{
  margin-top:12px; font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.02em;
  color:var(--faint); text-transform:uppercase;
}
.safelight-glow{
  position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none;
  background:radial-gradient(620px 320px at 50% 38%, rgba(255,67,38,.22), transparent 62%);
  transition:opacity .3s ease;
}
.dropzone:hover{border-color:var(--faint); transform:translateY(-1px)}
.dropzone:hover .dz-icon{transform:translateY(-2px)}
.dropzone:focus-visible{border-color:var(--safelight); box-shadow:0 0 0 4px rgba(255,67,38,.18)}
.dropzone.hot{
  border-color:var(--safelight); border-style:solid;
  box-shadow:0 0 0 4px rgba(255,67,38,.18), inset 0 0 60px rgba(255,67,38,.10);
}
.dropzone.hot .safelight-glow{opacity:1}
.dropzone.hot .dz-icon{transform:translateY(-4px) scale(1.05); color:#ff9b7d; border-color:var(--safelight)}
.dropzone.hot .dz-title{color:#fff}
.dropzone.locked{cursor:default; pointer-events:none; filter:saturate(.6) brightness(.7)}

/* ---------- Gerbang password ---------- */
.gate{
  position:relative; z-index:1; max-width:430px; margin:6px auto 0;
  background:linear-gradient(180deg, var(--panel), var(--room-2));
  border:1px solid var(--line); border-radius:var(--r); padding:30px 26px; text-align:center;
}
.gate .lock{
  width:46px; height:46px; margin:0 auto 14px; border-radius:50%; display:grid; place-items:center;
  border:1.5px solid var(--line); color:var(--safelight);
  background:radial-gradient(circle at 50% 35%, rgba(255,67,38,.12), transparent 70%), var(--panel-2);
}
.gate h2{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:19px; margin:0 0 6px}
.gate p{color:var(--muted); font-size:13.5px; margin:0 0 18px}
.field{display:flex; gap:9px}
.field input{
  flex:1; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink);
  background:rgba(0,0,0,.28); border:1px solid var(--line); border-radius:9px; padding:11px 13px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus{border-color:var(--safelight); box-shadow:0 0 0 3px rgba(255,67,38,.16)}
.btn{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:14px; color:#fff;
  background:var(--safelight); border:none; border-radius:9px; padding:11px 18px; cursor:pointer;
  transition:background .2s, transform .08s; white-space:nowrap;
}
.btn:hover{background:#ff5a3e}
.btn:active{transform:scale(.98)}
.gate-err{color:var(--safelight-2); font-size:13px; margin-top:12px; min-height:16px}

/* ---------- Lembar kontak / grid ---------- */
.sheet{margin-top:30px}
.sheet-head{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 2px 14px; border-bottom:1px solid var(--line-soft); margin-bottom:18px; flex-wrap:wrap;
}
.sheet-label{
  font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.clear-btn{
  font-family:'Inter',sans-serif; font-size:13px; color:var(--muted); cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:8px; padding:6px 12px;
  transition:color .2s, border-color .2s;
}
.clear-btn:hover{color:var(--ink); border-color:var(--faint)}

.grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(248px, 1fr));
}

/* ---------- Kartu = cetakan foto ---------- */
.card{
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  border:1px solid var(--paper-edge);
  border-radius:6px; padding:11px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  animation:slot .45s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes slot{from{opacity:0; transform:translateY(10px) scale(.985)} to{opacity:1; transform:none}}

.frame{
  position:relative; border-radius:3px; overflow:hidden; background:#0c0a09;
  aspect-ratio:4/3; border:1px solid rgba(0,0,0,.18);
}
.frame img{width:100%; height:100%; object-fit:cover; display:block}
.frame img.developing{animation:develop 1.5s ease forwards}
@keyframes develop{
  0%{filter:brightness(.05) contrast(1.6) sepia(.7) blur(7px); opacity:.4}
  55%{filter:brightness(.55) contrast(1.15) sepia(.25) blur(2px); opacity:.9}
  100%{filter:none; opacity:1}
}
.devlabel{
  position:absolute; left:8px; bottom:8px; z-index:2;
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.04em;
  color:#ffd9cb; background:rgba(20,8,4,.7); padding:3px 8px; border-radius:6px;
  display:flex; align-items:center; gap:6px;
}
.devlabel::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--safelight);
  box-shadow:0 0 8px var(--safelight); animation:pulse 1s infinite ease-in-out;
}
@keyframes pulse{0%,100%{opacity:.4} 50%{opacity:1}}

.meta{display:flex; align-items:baseline; gap:8px; min-width:0}
.fno{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--print-muted); flex:none}
.fname{
  font-size:12.5px; color:var(--print-ink); font-weight:500;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.subinfo{font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--print-muted); flex:none; margin-left:auto}

.urlrow{
  display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--paper-edge); border-radius:6px; padding:7px 10px;
}
.url{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:#5b4f43;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0;
  direction:rtl; text-align:left;
}

.actions{display:flex; gap:8px}
.copy{
  flex:1; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px;
  color:#fff; background:var(--safelight); border:none; border-radius:7px; padding:9px 12px;
  cursor:pointer; letter-spacing:.01em; transition:background .2s, transform .08s;
  display:flex; align-items:center; justify-content:center; gap:7px;
}
.copy:hover{background:#ff5a3e}
.copy:active{transform:scale(.98)}
.copy.ok{background:var(--fixed)}
.iconbtn{
  width:40px; flex:none; display:grid; place-items:center; cursor:pointer;
  background:#fff; border:1px solid var(--paper-edge); border-radius:7px; color:#6a5d4f;
  transition:color .2s, border-color .2s, background .2s;
}
.iconbtn:hover{color:var(--safelight); border-color:#e7c3b6}
.iconbtn.danger:hover{color:#fff; background:var(--danger); border-color:var(--danger)}
.iconbtn svg{width:16px; height:16px}

.card.pending .copy{background:#c9bdab; pointer-events:none}
.card.pending .iconbtn{opacity:.4; pointer-events:none}
.card.pending .url{color:#a99c8b}
.card.error .frame{filter:grayscale(.6) brightness(.7)}
.card.error .copy{background:#8a5b50; pointer-events:none}
.card.error .url{color:#9b3b2a}
.card.removing{animation:fade .3s ease forwards}
@keyframes fade{to{opacity:0; transform:scale(.96)}}

/* ---------- Admin: bilah statistik & kosong ---------- */
.stats{
  display:flex; gap:22px; flex-wrap:wrap; align-items:baseline;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(180deg, var(--panel), var(--room-2)); margin-top:10px;
}
.stat .num{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:24px; letter-spacing:-.02em}
.stat .lbl{font-size:12px; color:var(--muted); margin-left:8px}
.empty{
  text-align:center; color:var(--muted); padding:54px 20px; border:1px dashed var(--line);
  border-radius:var(--r); margin-top:24px; background:rgba(0,0,0,.12);
}
.empty .big{font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:18px; color:var(--ink); margin-bottom:6px}

/* ---------- Footer + toast ---------- */
.foot{
  position:relative; z-index:1; max-width:1000px; margin:0 auto;
  padding:8px 22px 36px; color:var(--faint); font-size:12.5px; text-align:center;
}
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px); z-index:50;
  background:#fff; color:#1c1714; font-weight:600; font-size:13.5px;
  padding:11px 18px; border-radius:10px; box-shadow:0 14px 30px -10px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  display:flex; align-items:center; gap:9px; max-width:90vw;
}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast .dot{width:8px; height:8px; border-radius:50%; background:var(--fixed); flex:none}
.toast.err .dot{background:var(--safelight)}

@media (max-width:560px){
  .bar{padding:18px 16px 6px}
  .wrap{padding:12px 16px 32px}
  .dz-inner,.dropzone{min-height:230px}
  .dz-title{font-size:18px}
  .grid{grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px}
  .counter{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}