/* Watermarker Flask Styling */
:root {
  --bg-dark:#121212;
  --bg-light:#f5f5f5;
  --panel-dark:#1e1e1e;
  --panel-light:#ffffff;
  --border-dark:#2a2a2a;
  --border-light:#d8d8d8;
  --accent:#3b82f6;
  --accent-hover:#1d4ed8;
  --text-dark:#e8e8e8;
  --text-light:#141414;
  --muted-dark:#9ca3af;
  --muted-light:#5f666d;
  --radius:14px;
  --focus-ring-dark:0 0 0 3px rgba(255,255,255,.35);
  --focus-ring-light:0 0 0 3px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { height:100%; }
body { margin:0; font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; background:var(--bg-dark); color:var(--text-dark); -webkit-font-smoothing:antialiased; }

.wrapper { max-width: 980px; margin: 0 auto; padding: 40px 32px 80px; }

.header { text-align:center; margin-bottom:40px; }
.header h1 { font-size:clamp(1.9rem,4vw,2.3rem); margin:0 0 8px; font-weight:600; letter-spacing:.4px; color:var(--text-dark); }
.header p { margin:0; color:var(--muted-dark); font-size:.9rem; }

.panel { background:var(--panel-dark); border:1px solid var(--border-dark); padding:28px 30px 26px; border-radius:var(--radius); box-shadow:0 6px 20px -8px rgba(0,0,0,.55); }
.panel:before { display:none; }

form { display:grid; gap:24px; }
.grid-3 { display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:20px; }
.field { display:flex; flex-direction:column; }
.field label { font-size:.6rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; margin-bottom:6px; color:var(--muted-dark); }
.field input[type=file], .field input[type=number] { padding:12px 14px; border:1px solid var(--border-dark); background:#181818; color:var(--text-dark); border-radius:10px; font-size:.85rem; outline:none; }
.field input[type=number]:focus, .field input[type=file]:focus { box-shadow:var(--focus-ring-dark); }
.field small { margin-top:6px; font-size:.7rem; color: var(--muted); }
.checkbox-row { display:flex; align-items:center; gap:10px; }
.checkbox-row input { transform:scale(1.2); }

.dropzone { border:2px dashed #2e2e2e; padding:24px 18px; text-align:center; border-radius:12px; transition:.25s border-color,.25s background; cursor:pointer; background:#181818; }
.dropzone.drag { border-color:var(--accent); background:#1f2937; }
.dropzone h3 { margin:0 0 6px; font-size:1rem; font-weight:600; }
.dropzone p { margin:0; font-size:.75rem; color: var(--muted); }

.actions { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
button.primary { background:var(--accent); color:#fff; border:0; padding:14px 22px; font-weight:600; font-size:.95rem; letter-spacing:.4px; border-radius:12px; cursor:pointer; transition:.2s background,.2s transform; }
button.primary:hover { background:var(--accent-hover); }
button.primary:active { transform:translateY(2px); }
.status-text { font-size:.75rem; color: var(--muted); }

.footer { margin-top:42px; text-align:center; font-size:.65rem; color: var(--muted); }

.honeypot { position:absolute; left:-9999px; top:-9999px; opacity:0; visibility:hidden; }

.header-with-toggle { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.header-with-toggle .header-text { flex:1 1 auto; }
.toggle-theme { display:flex; align-items:center; }
.toggle-theme button { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid var(--border-dark); border-radius:50%; cursor:pointer; transition:.25s background,.25s border-color,.25s transform; color:var(--text-dark); position:relative; }
.toggle-theme button:hover { background:#1e1e1e; }
.toggle-theme button:active { transform:scale(.9); }
.toggle-theme button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.toggle-theme button svg { width:20px; height:20px; position:absolute; opacity:0; transition:.3s opacity,.3s transform; transform:scale(.7); stroke:currentColor; fill:none; }
.toggle-theme button svg.sun { opacity:1; }
.toggle-theme button.is-light svg.sun { opacity:0; transform:scale(.5); }
.toggle-theme button.is-light svg.moon { opacity:1; transform:scale(1); }
body.light .toggle-theme button { border-color:var(--border-light); color:var(--text-light); }
body.light .toggle-theme button:hover { background:#f0f0f0; }

body.light { background:var(--bg-light); color:var(--text-light); }
body.light .header h1 { color:var(--text-light); }
body.light .header p { color:var(--muted-light); }
body.light .panel { background:var(--panel-light); border:1px solid var(--border-light); box-shadow:0 4px 16px -4px rgba(0,0,0,.12); }
body.light .field label { color:var(--muted-light); }
body.light .field input[type=file], body.light .field input[type=number] { background:#ffffff; color:var(--text-light); border-color:var(--border-light); }
body.light .field input[type=number]:focus, body.light .field input[type=file]:focus { box-shadow:var(--focus-ring-light); }
body.light .dropzone { background:#ffffff; border-color:var(--border-light); }
body.light .dropzone.drag { background:#eef5ff; border-color:var(--accent); }
body.light button.primary { box-shadow:0 2px 4px rgba(0,0,0,.15); }

@media (max-width: 640px) {
  .panel { padding:30px 26px 28px; }
  .header { margin-bottom:30px; }
}