:root{
  --bg:#1b1a17;
  --surface:#242220;
  --surface-2:#2c2a26;
  --line:#3a3730;
  --text:#f2ede2;
  --muted:#a8a196;
  --accent:#e8973a;
  --accent-2:#4f8a82;
  --danger:#c1553f;
  --radius:6px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  min-height:100vh;
}

.hidden{display:none !important;}

.eyebrow{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 6px;
}

/* ---------- Gate ---------- */
.gate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(232,151,58,0.06), transparent 40%),
    var(--bg);
}
.gate-card{
  width:100%;
  max-width:360px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 28px;
  text-align:left;
}
.gate-title{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:2rem;
  margin:0 0 8px;
}
.gate-sub{color:var(--muted);font-size:0.9rem;margin:0 0 20px;line-height:1.5;}
.gate-note{color:var(--danger);font-size:0.82rem;min-height:1.2em;margin:10px 0 0;}
#gatePassword{
  width:100%;
  padding:11px 12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:0.95rem;
  margin-bottom:12px;
}
#gatePassword:focus{outline:2px solid var(--accent);outline-offset:1px;}

/* ---------- Buttons ---------- */
.btn{
  font-family:'Inter',sans-serif;
  font-weight:600;
  font-size:0.9rem;
  border:none;
  border-radius:var(--radius);
  padding:11px 18px;
  cursor:pointer;
  transition:transform 0.08s ease, opacity 0.15s ease;
}
.btn:active{transform:scale(0.98);}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.btn-primary{background:var(--accent);color:#1b1a17;width:100%;}
.btn-primary:hover{opacity:0.92;}
.btn-secondary{background:var(--accent-2);color:#0f1a18;margin-bottom:12px;}
.btn-secondary:hover{opacity:0.9;}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--line);}
.btn-ghost:hover{color:var(--text);border-color:var(--muted);}
.btn-large{padding:14px 18px;font-size:1rem;}
.btn:disabled{opacity:0.45;cursor:not-allowed;}

/* ---------- App shell ---------- */
.app{max-width:760px;margin:0 auto;padding:24px 20px 80px;}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:28px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
}
.brand{
  font-family:'Fraunces',serif;
  font-weight:700;
  font-size:1.7rem;
  margin:0;
}

.layout{display:flex;flex-direction:column;gap:20px;}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
}
.panel-title{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.15rem;
  margin:0 0 4px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.frame-num{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.8rem;
  color:var(--accent);
  border:1px solid var(--line);
  border-radius:3px;
  padding:1px 6px;
}
.panel-hint{color:var(--muted);font-size:0.85rem;margin:0 0 14px;line-height:1.5;}

/* ---------- Dropzone / thumbs ---------- */
.dropzone{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:110px;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  color:var(--muted);
  font-size:0.9rem;
  cursor:pointer;
  text-align:center;
  padding:16px;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.dropzone:hover, .dropzone.dragover{border-color:var(--accent);color:var(--text);}

.thumb-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin-top:14px;
  padding-bottom:4px;
}
.thumb{
  position:relative;
  flex:0 0 auto;
  width:64px;
  height:64px;
  border-radius:4px;
  overflow:hidden;
  border:2px solid var(--line);
  cursor:pointer;
  filter:sepia(0.15) contrast(1.02);
}
.thumb.active{border-color:var(--accent);}
.thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.thumb-remove{
  position:absolute;top:2px;right:2px;
  width:16px;height:16px;
  background:rgba(20,18,15,0.8);
  color:var(--text);
  border:none;border-radius:3px;
  font-size:11px;line-height:1;
  cursor:pointer;
}

/* ---------- Viewer ---------- */
.viewer{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  outline:none;
}
.viewer:focus-visible .frame{outline:2px solid var(--accent);outline-offset:3px;}
.frame{
  position:relative;
  width:100%;
  max-width:420px;
  aspect-ratio:1/1;
  background:
    repeating-linear-gradient(90deg, var(--surface-2) 0 8px, transparent 8px 16px) top/100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--surface-2) 0 8px, transparent 8px 16px) bottom/100% 10px no-repeat,
    #100f0d;
  border-radius:4px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.frame img{max-width:100%;max-height:100%;object-fit:contain;}
.frame-counter{
  position:absolute;
  bottom:14px;right:12px;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.72rem;
  background:rgba(20,18,15,0.75);
  padding:3px 7px;
  border-radius:3px;
  letter-spacing:0.05em;
}
.nav{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--text);
  width:38px;height:38px;
  border-radius:50%;
  font-size:1.3rem;
  cursor:pointer;
  flex:0 0 auto;
}
.nav:hover{border-color:var(--accent);color:var(--accent);}
.nav:disabled{opacity:0.3;cursor:not-allowed;}

/* ---------- Prompt / caption ---------- */
.prompt-editor{margin-bottom:14px;color:var(--muted);font-size:0.85rem;}
.prompt-editor summary{cursor:pointer;color:var(--text);}
.prompt-editor textarea{margin-top:10px;}
textarea, select{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:0.9rem;
  padding:10px;
  resize:vertical;
}
textarea:focus, select:focus{outline:2px solid var(--accent);outline-offset:1px;}
#captionText{margin-top:4px;}

.status{
  font-family:'IBM Plex Mono',monospace;
  font-size:0.78rem;
  color:var(--muted);
  min-height:1.2em;
  margin:10px 0 0;
}
.status.error{color:var(--danger);}
.status.ok{color:var(--accent-2);}

/* ---------- Schedule ---------- */
.field-row{display:flex;gap:14px;flex-wrap:wrap;}
.field-row label{
  flex:1 1 180px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.82rem;
  color:var(--muted);
}

.panel-send{border-color:var(--accent);}

@media (max-width:480px){
  .app{padding:18px 14px 60px;}
  .panel{padding:16px;}
}