/* === PDFSmile Mobile Tune-up (additive, non-destructive) ================= */
:root{
  --fg:#e9e9f1; --bg:#0b0b0f; --muted:#b8b8c7;
  --card:rgba(255,255,255,0.06); --glass:rgba(16,16,24,0.5);
  --ring:rgba(255,255,255,0.16); --brand:#7aa9ff; /* match your glow */
  --radius:16px;
  --step-0:clamp(15px,1.7vw,16px);
  --step-1:clamp(18px,2.4vw,20px);
  --step-2:clamp(22px,3.4vw,28px);
}
html,body{color:var(--fg);font-size:var(--step-0);line-height:1.55;-webkit-text-size-adjust:100%}
h1{font-size:var(--step-2);line-height:1.15}
h2{font-size:var(--step-1);line-height:1.2}

/* Responsive tools grid (added class by JS) */
.tools{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
@media (max-width:640px){.tools{grid-template-columns:repeat(2,1fr)}}
@media (max-width:360px){.tools{grid-template-columns:1fr}}
.tool-card{
  border-radius:var(--radius);background:var(--card);padding:14px;border:1px solid var(--ring);
  display:flex;align-items:center;gap:10px;min-height:56px;transition:outline-color .2s ease
}
.tool-card:hover{outline:1px solid var(--brand)}
.tool-card.pro{position:relative}
.tool-card.pro::after{
  content:"PRO";position:absolute;top:8px;right:8px;font-size:12px;padding:2px 6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(122,169,255,.25),rgba(255,255,255,.15));border:1px solid var(--ring)
}

/* <details> if you convert long sections to accordions */
.tool-accordion{border:1px solid var(--ring);border-radius:var(--radius);background:var(--glass);overflow:hidden}
.tool-accordion>summary{list-style:none;cursor:pointer;padding:14px 16px;font-weight:600}
.tool-accordion>summary::-webkit-details-marker{display:none}
.tool-accordion[open]{outline:1px solid var(--brand)}
.tool-accordion>*:not(summary){padding:12px 16px}

/* Sticky bottom actions for selected files */
.sticky-actions{
  position:fixed;left:0;right:0;bottom:0;z-index:6000;backdrop-filter:blur(10px);
  background:rgba(12,12,18,0.86);border-top:1px solid var(--ring);
  padding:12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))
}
.sticky-actions__inner{max-width:960px;margin:0 auto;display:flex;gap:10px;align-items:center}
.sticky-actions__spacer{flex:1}
.btn{
  height:44px;min-width:44px;padding:0 14px;border-radius:999px;border:1px solid var(--ring);
  background:var(--card);color:var(--fg);font-weight:600
}
.btn.primary{background:linear-gradient(180deg,rgba(122,169,255,.25),rgba(255,255,255,.08))}
.btn.ghost{background:transparent}

/* Pro gate modal */
.pro-gate{position:fixed;inset:0;z-index:8000;display:grid;place-items:center}
.pro-gate[hidden]{display:none}
.pro-gate__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.pro-gate__card{
  position:relative;width:min(92vw,420px);border-radius:24px;padding:20px;
  background:linear-gradient(180deg,rgba(18,18,30,.96),rgba(10,10,16,.96));
  border:1px solid var(--ring);box-shadow:0 10px 30px rgba(0,0,0,.45)
}
.pro-gate__title{margin:0 0 8px 0}
.pro-gate__copy{margin:0 0 14px 0;color:var(--muted)}

/* Touch */
button,.btn,input[type="file"]+label{touch-action:manipulation}

/* Reduce CLS on blog/tool images (if any) */
img[loading="lazy"]{inline-size:100%;height:auto}