:root{
  --bg:#120b1f;
  --bg2:#0f081a;
  --card:#221533;
  --line:#3a2b52;
  --text:#f4f0ff;
  --muted:#b8a9d6;
  --accent:#ff4d2d;
  --accent2:#ff6a3d;
  --shadow:0 10px 40px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 600px at 20% 0%, #221133 0%, var(--bg) 55%, var(--bg2));
  color:var(--text);
}

header, main{ max-width:1200px; margin:0 auto; }

header{ padding:18px 18px 6px; }
header h1{ margin:0 0 6px; font-size:22px; }

.small{ font-size:12px; color:var(--muted); line-height:1.35; }

main{
  padding:14px 18px 24px;
  display:grid;
  gap:14px;
  grid-template-columns:380px 1fr;
}

@media (max-width:980px){
  main{ grid-template-columns:1fr; }
}

.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03)),
    var(--card);
  border-radius:14px;
  padding:14px;
  box-shadow:var(--shadow);
}

/* Form */
label{
  display:block;
  margin-bottom:4px;
  font-size:12px;
  color:var(--muted);
}

input, button{
  width:100%;
  padding:8px 10px;        /* smaller */
  border-radius:10px;      /* smaller */
  border:1px solid var(--line);
  background:rgba(10,8,16,.55);
  color:var(--text);
  font:inherit;
  font-size:13px;
}

input[type=file]{
  border-style:dashed;
  background:rgba(10,8,16,.35);
}

input:focus{
  outline:none;
  border-color:rgba(255,77,45,.75);
  box-shadow:0 0 0 2px rgba(255,77,45,.18);
}

input.is-error{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(255,77,45,.30);
}

input[readonly]{
  opacity:.75;
}

/* Divider */
.hr{
  height:1px;
  margin:10px 0;
  background:linear-gradient(90deg, transparent, rgba(184,169,214,.28), transparent);
}

/* Unit toggle */
.unit-toggle{
  display:flex;
  gap:6px;
  margin-bottom:10px;
}

.unit-toggle button{
  padding:6px 8px;         /* smaller */
  font-size:12px;
  border-radius:10px;
  background:rgba(10,8,16,.35);
}

.unit-toggle button.active{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-color:transparent;
}

/* Size grid */
.size-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

@media (max-width:520px){
  .size-grid{ grid-template-columns:1fr; }
}

/* Buttons row */
.row{
  display:flex;
  gap:8px;
}

button{
  cursor:pointer;
  font-weight:650;
  letter-spacing:.1px;
}

button.primary{
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  border-color:transparent;
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* Checkbox */
.chk{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}

.chk input{
  width:13px;
  height:13px;
  margin:0;
}

/* Preview grid */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:10px;
}

.thumb{
  background:rgba(10,8,16,.35);
  border-radius:12px;
  padding:8px;
  cursor:zoom-in;
}

.thumb img{
  width:100%;
  display:block;
  border-radius:10px;
  background:#fff; /* nice against transparent PNGs */
}

/* Log */
.log{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:11px;
  color:#d7ccff;
  white-space:pre-wrap;
}

/* =====================
   LIGHTBOX / PREVIEW
===================== */

.sb-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease;
}

.sb-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.sb-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
}

/* Panel: slightly higher than center */
.sb-lightbox__panel{
  position:absolute;
  left:50%;
  top:42%;
  transform:translate(-50%,-50%);

  width:min(50vw, 640px);
  height:min(50vh, 480px);

  background:var(--card);
  border-radius:16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Close: floating top-right (no bar/box) */
#lightboxClose{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;

  width:auto;              /* overrides button width:100% */
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);

  font-size:22px;
  line-height:1;
  cursor:pointer;
}

#lightboxClose:hover{
  opacity:.85;
}

/* Center image nicely */
.sb-lightbox__content{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.sb-lightbox__content img{
  max-width:100%;
  max-height:100%;
  border-radius:12px;
  background:#fff; /* white behind transparent */
}