/* public/style.css */
:root{
  --bg:#0f1419;
  --panel:#131a21;
  --text:#e7eef7;
  --muted:#9ab;
  --accent:#1f6feb;
  --ok:#2ea043;
  --warn:#d29922;
  --err:#f85149;
  --btn:#f5f7fa;
  --btn-text:#111;
  --btn-disabled-bg:#3a4756;
  --btn-disabled-text:#cdd6e1;
  --border:#2b3a48;
}
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:24px; background:var(--bg); color:var(--text); font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
.container{ max-width:1000px; margin:0 auto; }
h1{ margin:0 0 16px; }
.row{ margin-bottom:16px; }
.grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 900px){ .grid{ grid-template-columns:1fr 1fr; } }
.dropzone{ border:2px dashed var(--border); padding:16px; border-radius:10px; background:var(--panel); text-align:center; }
.dropzone.dragover{ border-color:var(--accent); background:#0f1b2e; }
.preview{ max-width:100%; height:auto; display:block; margin-top:12px; border-radius:10px; }
textarea, input[type="text"]{ width:100%; min-height:84px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:#0f1620; color:var(--text); outline:none; }
.small-input{ min-height:40px; }
.label-row{ display:flex; align-items:center; gap:8px; }
.counter{ font-size:.85em; color:var(--muted); }
.actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.btn{ padding:8px 12px; border-radius:10px; border:1px solid var(--border); background:var(--btn); color:var(--btn-text); cursor:pointer; }
.btn:hover{ filter:brightness(0.96); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ background:var(--btn-disabled-bg); color:var(--btn-disabled-text); cursor:not-allowed; border-color:var(--btn-disabled-bg); }
.btn-primary{ background:var(--accent); color:#fff; border-color:#275fda; }
.status{ min-height:24px; color:#cfe1ff; }
.hint{ color:var(--muted); font-size:.9em; }
.note{ background:#101820; border:1px dashed var(--border); padding:10px 12px; border-radius:10px; color:var(--muted); }