/* ============================================================
   imgto10kb — design tokens & visual system
   Palette: muted slate-blue ink on warm paper. Structure is
   carried by borders and spacing; shadows and pills are used
   sparingly and only where they mean something.
   ============================================================ */
:root{
  /* neutral surfaces (warm paper, not cold SaaS gray) */
  --bg:#efece6;
  --surface:#ffffff;
  --surface-2:#f5f2ec;
  --surface-3:#ece7dd;
  --border:#e0dace;
  --border-strong:#cdc6b6;

  /* ink */
  --ink:#22252a;          /* headings */
  --ink-body:#3c4149;     /* body copy */
  --muted:#63666e;        /* secondary / meta */

  /* brand — refined, desaturated slate blue */
  --brand:#2f5d86;
  --brand-strong:#264a6a;
  --brand-ink:#285079;    /* links / brand text on light */
  --brand-tint:#e8eef4;   /* soft hover fill */
  --brand-border:#bfd0df; /* soft outline / focus */
  --on-brand:#ffffff;

  /* semantic */
  --ok:#2f7d54;   --ok-ink:#246448; --ok-soft:#e7efe9; --ok-border:#c9ddd0;
  --warn:#9c6b1f; --warn-soft:#f3ebda; --warn-border:#e4d5b6;
  --error:#a53f3a;--error-soft:#f4e6e3;--error-border:#e6c8c4;

  /* radii — structural elements lightly rounded, tags are pills */
  --r-lg:12px;   /* cards */
  --r-md:8px;    /* inputs, buttons */
  --r-sm:6px;    /* nav items */

  /* shadows — restrained, warm-tinted, used selectively */
  --shadow-sm:0 1px 2px rgba(38,34,26,.06);
  --shadow-card:0 1px 2px rgba(38,34,26,.05), 0 10px 24px -16px rgba(38,34,26,.18);
  --shadow-pop:0 14px 34px -10px rgba(38,34,26,.28);

  --ring:0 0 0 3px var(--brand-border);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:hidden}
img{max-width:100%; height:auto}
.wrap,.nav,.legal{overflow-wrap:break-word}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink-body);
  min-height:100vh;
  padding:22px 20px 48px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}
a{color:var(--brand-ink); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}

/* shared focus treatment for accessibility */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible{
  outline:2px solid var(--brand); outline-offset:2px; border-radius:3px;
}

.wrap{max-width:820px; margin:0 auto}

/* ---------- Navigation: a real header, not a floating pill ---------- */
.nav{
  max-width:820px; margin:0 auto 26px; display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; padding:2px 2px 14px; background:transparent; border:0;
  border-bottom:1px solid var(--border); border-radius:0; box-shadow:none; flex-wrap:wrap;
}
.nav .brand{font-size:18px; font-weight:700; color:var(--ink); letter-spacing:-.2px}
.nav .brand span{color:var(--brand)}
.nav .brand:hover{text-decoration:none}
.nav .menu{display:flex; gap:2px; flex-wrap:wrap}
.nav .menu a{font-size:14px; color:var(--muted); padding:6px 11px; border-radius:var(--r-sm);
  transition:background .14s ease, color .14s ease}
.nav .menu a:hover{background:var(--brand-tint); color:var(--brand-ink); text-decoration:none}

.crumbs{font-size:13px; color:var(--muted); margin-bottom:20px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--brand-ink)}

/* ---------- Hero ---------- */
header.hero{text-align:center; margin-bottom:30px; padding:6px 0 2px}
.logo{font-size:22px; font-weight:700; letter-spacing:-.2px; color:var(--ink)}
.logo span{color:var(--brand)}
h1{font-size:31px; line-height:1.18; margin:14px 0 12px; font-weight:700;
  letter-spacing:-.5px; color:var(--ink)}
.tag{color:var(--muted); font-size:16px; line-height:1.55; max-width:600px; margin:0 auto}

/* ---------- Card: the primary elevated surface ---------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--shadow-card);
}

/* ---------- Dropzone ---------- */
#drop{
  border:1.5px dashed var(--border-strong);
  border-radius:var(--r-md);
  padding:46px 20px;
  text-align:center;
  cursor:pointer;
  background:var(--surface-2);
  transition:border-color .16s ease, background .16s ease;
}
#drop:hover,#drop.drag{border-color:var(--brand); background:var(--brand-tint)}
#drop .big{font-size:17px; font-weight:600; color:var(--ink)}
#drop .sub{color:var(--muted); font-size:14px; margin-top:6px}
.hidden{display:none !important}

/* ---------- Controls / forms ---------- */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:24px}
@media(max-width:680px){.grid{grid-template-columns:1fr; gap:18px}}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:8px; font-weight:600;
  text-transform:uppercase; letter-spacing:.4px}
input[type=number],select{
  width:100%; padding:11px 12px; border-radius:var(--r-md);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--ink);
  font-size:16px; /* 16px avoids iOS auto-zoom on focus */
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type=number]:focus,select:focus{outline:none; border-color:var(--brand); box-shadow:var(--ring)}

.presets{display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
.chip{
  padding:6px 13px; border-radius:999px; border:1px solid var(--border-strong);
  background:var(--surface); color:var(--ink-body); font-size:13px; cursor:pointer;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.chip:hover{border-color:var(--brand-border); color:var(--brand-ink); background:var(--brand-tint)}
.chip.active{background:var(--brand); border-color:var(--brand); color:var(--on-brand); font-weight:600}
.row{display:flex; align-items:center; gap:10px; margin-top:16px}
.row input[type=checkbox]{width:17px; height:17px; accent-color:var(--brand)}
.dims{display:flex; gap:10px; margin-top:12px}

/* ---------- Buttons ---------- */
button.primary{
  width:100%; margin-top:22px; padding:13px 16px; border:1px solid var(--brand-strong);
  border-radius:var(--r-md); cursor:pointer; font-size:15px; font-weight:600;
  color:var(--on-brand); background:var(--brand); box-shadow:var(--shadow-sm);
  transition:background .15s ease, transform .05s ease;
}
button.primary:hover{background:var(--brand-strong)}
button.primary:active{transform:translateY(1px)}
button.primary:disabled{opacity:.55; cursor:not-allowed; transform:none}
button.ghost{
  padding:11px 16px; border-radius:var(--r-md); cursor:pointer; font-weight:600; font-size:15px;
  background:var(--surface); color:var(--ink-body); border:1px solid var(--border-strong);
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
button.ghost:hover{border-color:var(--brand-border); color:var(--brand-ink); background:var(--brand-tint)}

/* ---------- Results ---------- */
.results{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:680px){.results{grid-template-columns:1fr}}
.prev{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; text-align:center}
.prev h4{margin:0 0 12px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.7px; font-weight:700}
.prev img{max-width:100%; max-height:240px; border-radius:6px; background:var(--surface); border:1px solid var(--border)}
.stat{margin-top:12px; font-size:14px; color:var(--muted)}
.stat b{font-size:21px; color:var(--ink)}
.size-ok{color:var(--ok-ink)} .size-warn{color:var(--warn)}

/* result banner — neutral by default, semantic when a state is set */
.bar{
  margin-top:18px; padding:12px 16px; border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--border); color:var(--ink-body);
  font-size:14px; text-align:center;
}
.bar.ok{background:var(--ok-soft); border-color:var(--ok-border); color:var(--ok-ink)}
.bar.warn{background:var(--warn-soft); border-color:var(--warn-border); color:var(--warn)}
.bar b{color:inherit}
.actions{display:flex; gap:12px; margin-top:18px}
.actions button{flex:1; margin-top:0}

/* ---------- Spec tags under hero ---------- */
.spec{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:16px 0 2px}
.spec span{background:var(--surface-2); border:1px solid var(--border); border-radius:999px;
  padding:5px 12px; font-size:13px; color:var(--muted)}

/* ---------- Long-form copy ---------- */
section.copy{margin:34px 0}
section.copy h2{font-size:20px; margin:28px 0 12px; font-weight:700; letter-spacing:-.2px; color:var(--ink)}
section.copy p{color:var(--ink-body); font-size:16px; max-width:68ch}
section.copy ol.steps{margin:10px 0 6px; padding-left:0; list-style:none; counter-reset:step}
section.copy ol.steps li{position:relative; padding:0 0 14px 44px; max-width:66ch; color:var(--ink-body); font-size:15.5px}
section.copy ol.steps li::before{counter-increment:step; content:counter(step);
  position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%;
  background:var(--brand-tint); color:var(--brand-ink); border:1px solid var(--brand-border);
  font-size:14px; font-weight:700; display:flex; align-items:center; justify-content:center}
section.copy ol.steps li:last-child{padding-bottom:0}
section.copy ol.steps li b{color:var(--ink)}

/* FAQ — a single divided list, not a stack of floating cards */
.faq{border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden}
.faq details{border-bottom:1px solid var(--border); padding:0 18px}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer; padding:15px 0; font-weight:600; list-style:none; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; float:right; color:var(--muted); font-weight:400; font-size:19px; line-height:1.4}
.faq details[open] summary::after{content:"\2013"}
.faq p{padding:0 0 15px; margin:0; color:var(--muted); font-size:15px; max-width:68ch}

/* ---------- Related links (tag cloud) ---------- */
.links{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.links a{
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:6px 13px; font-size:13px; color:var(--ink-body);
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.links a:hover{border-color:var(--brand-border); color:var(--brand-ink); background:var(--brand-tint); text-decoration:none}

.grouphead{font-size:12px; color:var(--muted); font-weight:700; margin:24px 0 8px;
  text-transform:uppercase; letter-spacing:.7px}

/* ---------- Footer ---------- */
footer{text-align:center; color:var(--muted); font-size:13px; margin-top:44px; padding-top:22px;
  border-top:1px solid var(--border); line-height:1.9}
footer a{color:var(--muted)}
footer a:hover{color:var(--brand-ink)}

/* ---------- Misc ---------- */
.spin{display:inline-block; width:15px; height:15px; border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; animation:s .7s linear infinite; vertical-align:-2px; margin-right:7px}
@keyframes s{to{transform:rotate(360deg)}}

/* ---------- Legal / info prose ---------- */
.legal{max-width:720px; margin:0 auto}
.legal .card{padding:32px 34px}
.legal h1{text-align:left; font-size:27px; margin:0 0 6px}
.legal .updated{color:var(--muted); font-size:13px; margin-bottom:20px; padding-bottom:16px; border-bottom:1px solid var(--border)}
.legal h2{font-size:18px; margin:26px 0 8px; font-weight:700; color:var(--ink)}
.legal p, .legal li{color:var(--ink-body); font-size:15.5px}
.legal ul{padding-left:20px} .legal li{margin-bottom:6px}
.legal a{color:var(--brand-ink)}

/* Article meta line */
.legal .meta{color:var(--muted); font-size:13px; margin:-2px 0 20px; padding-bottom:16px; border-bottom:1px solid var(--border)}
.legal .meta a{color:var(--muted)}

/* Callout / tip box (used in articles and on tool pages) */
.callout{background:var(--brand-tint); border:1px solid var(--brand-border); border-left:3px solid var(--brand);
  border-radius:var(--r-md); padding:13px 16px; margin:16px 0; font-size:15px; color:var(--ink-body)}
.callout b{color:var(--ink)}

/* Spec tables */
.tablewrap{overflow-x:auto; margin:16px 0; border:1px solid var(--border); border-radius:var(--r-md)}
table.spec-table{border-collapse:collapse; width:100%; font-size:14px; min-width:520px}
table.spec-table th,table.spec-table td{padding:9px 12px; text-align:left; border-bottom:1px solid var(--border)}
table.spec-table th{background:var(--surface-2); color:var(--ink); font-weight:700; white-space:nowrap}
table.spec-table tr:last-child td{border-bottom:0}
table.spec-table td a{color:var(--brand-ink); font-weight:600}

/* Guides hub list */
.guide-item{display:block; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow-sm); transition:border-color .15s ease, box-shadow .15s ease}
.guide-item:hover{border-color:var(--brand-border); box-shadow:var(--shadow-card); text-decoration:none}
.guide-item h3{margin:0 0 6px; font-size:18px; color:var(--ink)}
.guide-item p{margin:0; color:var(--muted); font-size:14.5px}

/* ---------- AdSense ad slots ---------- */
.ad-slot{
  max-width:820px; margin:24px auto; min-height:90px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-lg);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.ad-slot::before{
  content:"Advertisement"; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px;
}
.ad-slot .adsbygoogle{display:block !important; width:100%}

/* ---------- Copy section lists ---------- */
section.copy ul{margin:10px 0 18px; padding-left:22px; max-width:68ch}
section.copy ul li{color:var(--ink-body); font-size:15.5px; margin-bottom:8px; line-height:1.6}

/* ---------- Cookie consent banner ---------- */
#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999; max-width:800px; margin:0 auto;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-pop); padding:18px 20px; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
#cookie-banner p{margin:0; flex:1 1 320px; font-size:14px; color:var(--ink-body); line-height:1.55}
#cookie-banner .cta{display:flex; gap:10px; flex:0 0 auto}
#cookie-banner button{padding:10px 18px; border-radius:var(--r-md); font-weight:600; font-size:14px;
  cursor:pointer; border:1px solid var(--border-strong); transition:background .15s ease, border-color .15s ease}
#cookie-banner .accept{background:var(--brand); color:var(--on-brand); border-color:var(--brand-strong)}
#cookie-banner .accept:hover{background:var(--brand-strong)}
#cookie-banner .reject{background:var(--surface); color:var(--ink-body)}
#cookie-banner .reject:hover{background:var(--surface-2); border-color:var(--border-strong)}

/* ============================================================
   Mobile / small-screen refinements
   ============================================================ */
@media (max-width:560px){
  body{padding:16px 14px 40px}
  .nav{align-items:center; margin-bottom:20px; padding-bottom:12px}
  .nav .menu{width:100%; margin-top:6px; gap:2px 4px}
  .nav .menu a{padding:8px 10px}                 /* larger tap target */
  header.hero{margin-bottom:24px}
  h1{font-size:25px; letter-spacing:-.3px; margin:10px 0 10px}
  .tag{font-size:15px}
  .card{padding:18px 16px}
  #drop{padding:34px 16px}
  .grid{gap:16px}
  .chip{padding:9px 14px}                          /* easier to tap */
  .presets{gap:9px}
  section.copy{margin:26px 0}
  section.copy h2{font-size:19px}
  section.copy p{font-size:15.5px}
  .legal .card{padding:22px 20px}
  .legal h1{font-size:23px}
  .actions{flex-direction:column}                 /* stack Try/Download */
  .actions button{width:100%}
  #cookie-banner{left:10px; right:10px; bottom:10px; padding:16px}
  #cookie-banner .cta{width:100%}
  #cookie-banner .cta button{flex:1}
}
@media (max-width:380px){
  h1{font-size:23px}
  .nav .menu a{padding:7px 8px; font-size:13px}
}

/* ============================================================
   Dark mode — separately tuned tones, not a simple inversion.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15181c;
    --surface:#1d2126;
    --surface-2:#232830;
    --surface-3:#2b313a;
    --border:#2f353d;
    --border-strong:#3c434d;

    --ink:#eef1f4;
    --ink-body:#c8ced6;
    --muted:#8b939d;

    --brand:#3d7cbb;
    --brand-strong:#4e8bc9;
    --brand-ink:#8fbde8;
    --brand-tint:#213040;
    --brand-border:#34485d;
    --on-brand:#ffffff;

    --ok:#5cbd86;   --ok-ink:#84cfa4; --ok-soft:#182a20; --ok-border:#2d4838;
    --warn:#d7a355; --warn-soft:#2a2314; --warn-border:#4a3c20;
    --error:#e2908a;--error-soft:#2c1a18;--error-border:#4d302c;

    --shadow-sm:0 1px 2px rgba(0,0,0,.45);
    --shadow-card:0 1px 2px rgba(0,0,0,.45), 0 12px 26px -18px rgba(0,0,0,.7);
    --shadow-pop:0 16px 36px -12px rgba(0,0,0,.72);
    --ring:0 0 0 3px var(--brand-border);
  }
  /* photo previews sit on a neutral tile so transparent PNGs read well */
  .prev img{background:var(--surface-3)}
}