/* ImgTool base styles */
:root{
  --bg:#0f172a; /* slate-900 */
  --panel:#111827; /* gray-900 */
  --muted:#94a3b8; /* slate-400 */
  --text:#e5e7eb; /* gray-200 */
  --brand:#22c55e; /* green-500 */
  --brand-600:#16a34a;
  --accent:#38bdf8; /* sky-400 */
  --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:linear-gradient(180deg,var(--bg),#0b1025); color:var(--text);
}
header{
  position:sticky; top:0; z-index:10; backdrop-filter:saturate(120%) blur(8px);
  background:rgba(17,24,39,.7); border-bottom:1px solid rgba(148,163,184,.15);
}
.header-inner{max-width:1200px; margin:auto; display:flex; align-items:center; gap:16px; padding:14px 20px}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px}
.brand .logo{width:28px; height:28px; border-radius:6px; background:linear-gradient(135deg,var(--brand),var(--accent)); display:inline-block}
/* When using an <img class="logo">, remove gradient and fit the image */
.brand img.logo{background:none; object-fit:contain;}
nav.lang{margin-left:auto; display:flex; gap:8px}
nav.lang a{color:var(--muted); text-decoration:none; padding:6px 8px; border-radius:6px}
nav.lang a:hover{color:var(--text); background:rgba(148,163,184,.15)}
main{max-width:1200px; margin:24px auto; padding:0 20px; display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}
@media (max-width: 960px){ main{grid-template-columns: 1fr} }
.panel{background:rgba(17,24,39,.75); border:1px solid rgba(148,163,184,.15); border-radius:14px; padding:18px}
.controls{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.controls .full{grid-column:1 / -1}
@media (max-width: 960px){ .preview-wrap{ grid-template-rows: auto auto 1fr } }
label{font-size:.9rem; color:var(--muted); display:block; margin-bottom:6px}
input[type="file"], select, input[type="number"], input[type="range"], button, .btn{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid rgba(148,163,184,.25); background:#0b1224; color:var(--text);
}
input[type="range"]{padding:0}
.field{margin-bottom:10px}
.inline-inputs{display:flex; gap:8px}
.inline-inputs .input--sm{flex:1 1 0; min-width:0}
.actions{display:flex; gap:12px; margin-top:6px}
.btn-primary{background:var(--brand); border:none; color:#052e16; font-weight:700}
.btn-primary:hover{background:var(--brand-600); cursor:pointer}
.btn{ cursor:pointer; transition: background .18s ease, box-shadow .18s ease, transform .05s ease }
.btn:hover{ box-shadow:0 0 0 2px rgba(56,189,248,.15) inset }
.btn:active{ transform: translateY(1px) }
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.btn:disabled{ opacity:.6; cursor:not-allowed }
.btn-secondary{background:#0b1224}
.btn-secondary:hover{ background:#0d1630; border-color:rgba(148,163,184,.45) }
.btn-danger{background:#1a0b0b; border-color:#3b0b0b; color:#fecaca}
.preview-wrap{display:grid; grid-template-rows:auto 1fr; gap:8px}
.preview-area{min-height:300px; display:grid; place-items:center; overflow:hidden; border-radius:12px; background:#0b1224; border:1px dashed rgba(148,163,184,.35)}
.preview-area img{max-width:100%; height:auto; display:block}
.img-wrap{width:100%; display:grid; place-items:center}
.img-wrap img{max-width:100%; height:auto}
/* By default, hide the <img> to avoid broken icon until a real image is loaded */
.img-wrap:not(.loaded) img{display:none}
/* When loaded, show the image */
.img-wrap.loaded img{display:block}
/* Hide the broken image icon until src exists; show placeholder text instead */
.img-wrap img:not([src]), .img-wrap img[src=""]{display:none}
/* Hide placeholder when the image has loaded */
.img-wrap.loaded .placeholder{display:none}
.img-wrap .placeholder{color:var(--muted); text-align:center; padding:12px}
.result-area{margin-top:10px}
.status{font-size:.9rem; color:var(--muted)}
aside.ad-slot{min-height:120px; background:#0b1224; border:1px dashed rgba(148,163,184,.35); border-radius:12px; display:grid; place-items:center; color:var(--muted)}
.section{max-width:1200px; margin:32px auto; padding:0 20px}
footer{border-top:1px solid rgba(148,163,184,.15); background:rgba(17,24,39,.75); padding:24px 20px}
footer .content{max-width:1200px; margin:auto; color:var(--muted); line-height:1.6}
.small{font-size:.85rem}
.hidden{display:none !important}
.badge{display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(56,189,248,.15); color:#7dd3fc; font-size:.75rem; margin-left:8px}
/* Ensure native [hidden] always hides the element regardless of other rules */
img[hidden]{display:none !important}

/* Interactive Dropzone */
.dropzone{
  position:relative; display:grid; place-items:center; text-align:center;
  min-height:220px; padding:22px; margin:12px 0 16px;
  border:2px dashed rgba(148,163,184,.35); border-radius:14px;
  background:#0b1224; color:var(--muted);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor:pointer;
}
.dropzone:hover{ border-color:rgba(56,189,248,.75); box-shadow:0 0 0 3px rgba(56,189,248,.18) inset }
.dropzone .dz-text{ max-width:680px }
.dropzone .dz-text strong{ display:block; color:var(--text); font-size:1.05rem; margin-bottom:6px }
.dropzone .dz-text kbd{
  background:rgba(148,163,184,.18); color:var(--text);
  border:1px solid rgba(148,163,184,.35); border-bottom-color:rgba(148,163,184,.45);
  padding:2px 6px; border-radius:6px; font-size:.85rem;
}
.dropzone.is-dragover{ border-color:var(--accent); background:rgba(56,189,248,.08); color:#bdeafe }
.dropzone.is-success{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(34,197,94,.18) inset }
.dropzone.is-error{ border-color:var(--danger); box-shadow:0 0 0 3px rgba(239,68,68,.18) inset; color:#fecaca }

/* Loading spinner indicator */
@keyframes spin{ to{ transform:rotate(360deg) } }
.dropzone.is-loading::before{
  content:""; position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%;
  border:3px solid rgba(148,163,184,.35); border-top-color:var(--accent);
  animation:spin 1s linear infinite;
}

/* Toast notifications */
.toast-container{ position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:10px; z-index:1000; pointer-events:none }
.toast{ pointer-events:auto; min-width:220px; max-width:360px; background:rgba(17,24,39,.95); color:var(--text); border:1px solid rgba(148,163,184,.25); border-radius:10px; padding:10px 12px; box-shadow:0 10px 24px rgba(0,0,0,.35); opacity:0; transform: translateY(8px) }
.toast--success{ border-color: rgba(34,197,94,.6); box-shadow:0 0 0 2px rgba(34,197,94,.12) inset }
.toast--error{ border-color: rgba(239,68,68,.6); box-shadow:0 0 0 2px rgba(239,68,68,.12) inset }
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px) } to{ opacity:1; transform: translateY(0) } }
@keyframes toast-out{ from{ opacity:1; transform: translateY(0) } to{ opacity:0; transform: translateY(8px) } }

/* Responsive Ads rules */
/* Allow AdSense blocks to expand to container width even if the slot is centered */
aside.ad-slot .adsbygoogle{ display:block; width:100%; justify-self:stretch; align-self:stretch }
/* Default: show bottom ad, hide inline ad */
.ad-slot--bottom{ display:block }
.ad-slot--inline{ display:none }
/* On single-column layout (<=960px), prefer the inline ad and hide the bottom one */
@media (max-width: 960px){
  .ad-slot--inline{ display:block }
  .ad-slot--bottom{ display:none }
}
/* On very small devices, reserve more height to avoid layout shift when the ad loads */
@media (max-width: 480px){
  aside.ad-slot{ min-height:250px }
}