/* Resizo Embed Widgets — shared stylesheet.
   Self-contained: no Tailwind, no external fonts. ~5KB minified.
   Theme is controlled by `html.dark` (set by embed-base.js from ?theme=…). */

:root{
  --bg:#ffffff;
  --surface:#f8fafc;
  --surface-2:#f1f5f9;
  --border:#e2e8f0;
  --text:#0f172a;
  --muted:#64748b;
  --brand:#1B70E0;
  --brand-hover:#1559b3;
  --brand-soft:#e6f0fb;
  --success:#10b981;
  --danger:#ef4444;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
}
html.dark{
  --bg:#0a0e1a;
  --surface:#0f172a;
  --surface-2:#111827;
  --border:#1e293b;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --brand:#3b8eff;
  --brand-hover:#5da3ff;
  --brand-soft:#0e2547;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
button{font-family:inherit}
.wrap{
  display:flex;flex-direction:column;
  min-height:100vh;
  padding:16px;
  gap:12px;
}
.head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.head .brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text)}
.head .brand svg{width:18px;height:18px;flex-shrink:0}
.head h1{font-size:14px;font-weight:600;margin:0;color:var(--text)}
.head .actions{display:flex;align-items:center;gap:4px}
.icon-btn{
  background:transparent;border:none;color:var(--muted);
  width:30px;height:30px;border-radius:6px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  transition:background .15s,color .15s;
}
.icon-btn:hover{background:var(--surface-2);color:var(--text)}
.icon-btn svg{width:16px;height:16px}
.main{flex:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.drop{
  position:relative;
  border:2px dashed var(--border);
  border-radius:var(--radius);
  padding:22px 14px;
  text-align:center;
  cursor:pointer;
  background:var(--surface);
  transition:border-color .15s,background .15s;
}
.drop:hover,.drop.drag{border-color:var(--brand);background:var(--brand-soft)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.drop .ico{
  width:40px;height:40px;color:var(--brand);margin:0 auto 6px;display:block;
}
.drop .title{font-weight:600;color:var(--text);margin-bottom:2px;font-size:13px}
.drop .sub{font-size:11px;color:var(--muted)}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px;
}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:8px;align-items:flex-end}
.field{flex:1;min-width:0}
.label{
  display:block;font-size:10px;font-weight:600;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px;
}
.input,.select{
  width:100%;padding:8px 10px;font-size:13px;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);font-family:inherit;outline:none;
  transition:border-color .15s,box-shadow .15s;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
.select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center;background-size:14px;
  padding-right:28px;
}
.input:focus,.select:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(27,112,224,.15)}
html.dark .input:focus,html.dark .select:focus{box-shadow:0 0 0 3px rgba(59,142,255,.2)}
.btn{
  padding:9px 14px;font-size:13px;font-weight:600;
  border:1px solid transparent;border-radius:var(--radius-sm);
  cursor:pointer;transition:background .15s,transform .05s,color .15s;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;
}
.btn svg{width:14px;height:14px}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-hover)}
.btn-primary:active{transform:scale(.98)}
.btn-secondary{background:var(--bg);color:var(--text);border-color:var(--border)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-full{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.preview{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  display:flex;align-items:center;justify-content:center;
  min-height:120px;overflow:hidden;
}
.preview img{
  max-width:100%;max-height:220px;border-radius:6px;
  object-fit:contain;display:block;background:repeating-conic-gradient(#e2e8f0 0% 25%,#cbd5e1 0% 50%) 50%/12px 12px;
}
html.dark .preview img{background:repeating-conic-gradient(#1e293b 0% 25%,#0f172a 0% 50%) 50%/12px 12px}
.info{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:12px;margin:0}
.info dt{color:var(--muted)}
.info dd{margin:0;font-weight:500;text-align:right;color:var(--text)}
.foot{
  margin-top:auto;padding-top:8px;text-align:center;font-size:11px;color:var(--muted);
}
.foot a{color:var(--brand);text-decoration:none;font-weight:600}
.foot a:hover{text-decoration:underline}
.toggle{
  position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:13px;color:var(--text);
}
.toggle input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.toggle .switch{
  width:32px;height:18px;border-radius:9px;background:var(--border);position:relative;transition:background .15s;flex-shrink:0;
}
.toggle .switch::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.toggle input:checked + .switch{background:var(--brand)}
.toggle input:checked + .switch::after{transform:translateX(14px)}
.range{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer;
}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brand);cursor:pointer;border:2px solid var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brand);cursor:pointer;border:2px solid var(--bg)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.thumb{
  position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-2);aspect-ratio:1;border:1px solid var(--border);
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb .x{
  position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;border:none;cursor:pointer;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.thumb .x:hover{background:rgba(0,0,0,.85)}
.pill{
  display:inline-block;padding:2px 8px;font-size:10px;font-weight:600;border-radius:99px;
  background:var(--brand-soft);color:var(--brand);text-transform:uppercase;letter-spacing:.04em;
}
.alert{
  padding:8px 10px;border-radius:var(--radius-sm);font-size:12px;background:var(--surface-2);color:var(--text);border:1px solid var(--border);
}
.alert.error{background:#fef2f2;color:#991b1b;border-color:#fecaca}
html.dark .alert.error{background:#3f1212;color:#fecaca;border-color:#7f1d1d}
.spinner{
  width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;
  border-radius:50%;animation:spin .8s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.color-input{
  width:32px;height:32px;padding:2px;border:1px solid var(--border);border-radius:6px;background:var(--bg);cursor:pointer;
}
.color-input::-webkit-color-swatch-wrapper{padding:0}
.color-input::-webkit-color-swatch{border:none;border-radius:4px}
@media (max-width:380px){
  .wrap{padding:12px}
  .row{flex-direction:column;align-items:stretch}
}