/* ===== Shared styles — warm beige, chill-professional theme ===== */
:root{
  --bg:#ece3d5;          /* main beige background */
  --panel:#faf6ef;       /* card top (cream) */
  --panel-2:#f4ecdf;     /* card bottom (soft sand) */
  --soft:#f1e7d9;        /* inputs / drop zone / tiles */
  --line:#e2d6c2;        /* borders */
  --text:#41392e;        /* warm charcoal-brown */
  --muted:#93876f;       /* muted warm gray */
  --accent:#bf7550;      /* terracotta / clay */
  --accent-ink:#a35e3a;  /* darker accent for links/text on beige */
  --accent-2:#6f8f66;    /* sage green (success) */
  --danger:#c05a49;
  --radius:14px;
  --shadow:0 12px 34px -20px rgba(120,86,54,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1100px 520px at 50% -220px,#f7f0e4,transparent),var(--bg);
  color:var(--text); line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink);text-decoration:none}
img{max-width:100%}

/* ---- Top nav ---- */
.nav{
  position:sticky;top:0;z-index:20;backdrop-filter:blur(8px);
  background:rgba(245,239,230,.82);border-bottom:1px solid var(--line);
}
.nav-inner{max-width:1040px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 20px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.brand .logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#cf9264,#bf7550);
  display:grid;place-items:center;font-size:15px}
.nav-links{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.nav-links a{color:#5c5140;font-weight:600;padding:7px 13px;border-radius:8px;font-size:14px;
  background:#f6efe2;border:1px solid var(--line);transition:.12s}
.nav-links a:hover{color:var(--accent-ink);background:#f1e7d6;border-color:#d8c9b2}
.nav-links a.active{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ---- Layout ---- */
header.hero{max-width:920px;margin:0 auto;padding:44px 20px 4px;text-align:center}
h1{font-size:clamp(26px,4vw,40px);margin:0 0 10px;letter-spacing:-.02em}
.sub{color:var(--muted);font-size:17px;max-width:640px;margin:0 auto}
.wrap{max-width:920px;margin:0 auto;padding:0 20px 60px}
.wrap-wide{max-width:1040px}

/* ---- Ad slot: invisible when empty; auto-sizes to injected ad ---- */
.ad-slot{margin:0 auto;max-width:728px;display:flex;justify-content:center}
.ad-slot:empty{margin:0}

/* ---- Card / controls ---- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-top:20px;
  box-shadow:var(--shadow);
}
.drop{
  border:2px dashed #d3c3a9;border-radius:var(--radius);padding:44px 20px;text-align:center;
  cursor:pointer;transition:.15s;background:var(--soft);
}
.drop:hover,.drop.drag{border-color:var(--accent);background:#f3e8d6}
.drop svg{width:48px;height:48px;opacity:.6;margin-bottom:8px;color:var(--accent)}
.drop b{color:var(--accent-ink)}
.hint{color:var(--muted);font-size:13px;margin-top:6px}
input[type=file]{display:none}

.controls{display:grid;gap:20px;margin-top:6px}
@media(min-width:640px){.controls{grid-template-columns:1fr 1fr}}
.field label{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-bottom:8px}
.field label b{color:var(--text)}
input[type=range]{width:100%;accent-color:var(--accent)}
select,input[type=text],input[type=number],textarea{
  width:100%;background:#fffdf9;border:1px solid var(--line);color:var(--text);
  border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;
}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{
  background:#fffdf9;border:1px solid var(--line);color:var(--muted);
  padding:8px 12px;border-radius:999px;cursor:pointer;font-size:13px;transition:.12s
}
.seg button:hover{border-color:var(--accent);color:var(--text)}
.seg button.active{border-color:var(--accent);color:#fff;background:var(--accent)}

.check{display:flex;align-items:center;gap:8px;color:var(--text);font-size:14px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  background:var(--accent);color:#fff;border:0;border-radius:10px;padding:13px 22px;
  font-size:15px;font-weight:600;cursor:pointer;transition:.12s;width:100%
}
.btn:hover{filter:brightness(1.05)}
.btn.green{background:var(--accent-2)}
.btn.ghost{background:#ece0cd;color:var(--text)}
.btn.ghost:hover{background:#e3d5be}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:grid;gap:12px;margin-top:18px}
@media(min-width:640px){.row-2{grid-template-columns:1fr 1fr}}

/* ---- Preview / result ---- */
.preview{display:grid;gap:16px;margin-top:20px}
@media(min-width:640px){.preview{grid-template-columns:1fr 1fr}}
.shot{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.shot img{max-height:220px;border-radius:8px;object-fit:contain}
.shot .tag{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.size{font-size:22px;font-weight:700;margin-top:6px}
.save{color:var(--accent-2);font-size:14px;font-weight:600}

/* ---- Homepage tool grid ---- */
.grid{display:grid;gap:16px;margin-top:26px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
@media(min-width:860px){.grid{grid-template-columns:1fr 1fr 1fr}}
.tool{
  display:block;background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:.15s;color:var(--text)
}
.tool:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 14px 32px -20px rgba(191,117,80,.55)}
.tool .ico{font-size:26px}
.tool h3{margin:12px 0 6px;font-size:17px}
.tool p{margin:0;color:var(--muted);font-size:14px}
.tool .go{margin-top:12px;color:var(--accent-ink);font-size:13px;font-weight:600}

/* ---- Stats row (counter etc.) ---- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
@media(min-width:560px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.stat .n{font-size:26px;font-weight:800;color:var(--accent-ink)}
.stat .l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-top:4px}

/* ---- FAQ ---- */
.faq{margin-top:40px}
.faq h2{font-size:22px}
details{border-top:1px solid var(--line);padding:16px 0}
details summary{cursor:pointer;font-weight:600;list-style:none}
details summary::-webkit-details-marker{display:none}
details p{color:var(--muted);margin:10px 0 0}

footer{border-top:1px solid var(--line);color:var(--muted);text-align:center;padding:28px 20px;font-size:13px}
footer a{color:var(--muted)}