/* JPGJoy Tools — stylesheet.
   Ported verbatim from the approved JPGJoy demo (index.html <style> block).
   The only addition is the small anchor rule at the bottom: on the live site
   the tool cards/tiles are real <a> links instead of the demo's <button>s. */

      :root{
        --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#EDF6F3;
        --ink:#1E293B; --ink2:#475569; --muted:#64748B;
        --line:#DDECE8; --line2:#B9DAD2;
        --blue:#0F766E; --blue-dark:#0B5B54; --blue-soft:#E0F2EE;
        --accent:#14B8A6;
        --green:#1E9E62; --green-soft:#E2F4EA;
        --amber:#9A6206; --amber-soft:#FBF0DA;
        --red:#B3261E; --red-soft:#FBE9E7;
        --shadow:0 16px 36px -16px rgba(11,91,84,.30);
        --radius:14px;
      }
      @media (prefers-color-scheme: dark){
        :root{
          --bg:#0A1514; --surface:#10201D; --surface2:#17302B;
          --ink:#E7F3F0; --ink2:#A9C6C0; --muted:#7FA198;
          --line:#1D3A35; --line2:#2C5149;
          --blue:#14B8A6; --blue-dark:#2DD4BF; --blue-soft:#103A34;
          --accent:#2DD4BF;
          --green:#4CC47E; --green-soft:#14301F;
          --amber:#E0A83E; --amber-soft:#2C2210;
          --red:#F08A80; --red-soft:#331815;
          --shadow:0 16px 36px -16px rgba(0,0,0,.7);
        }
      }
      *{box-sizing:border-box}
      [hidden]{display:none !important}
      html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
      body{
        margin:0;background:var(--bg);color:var(--ink);
        font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
        font-size:16px;line-height:1.55;
      }
      .wrap{max-width:1060px;margin:0 auto;padding:0 20px}
      button{font:inherit}
      a{color:var(--blue)}

      /* ---------- header ---------- */
      header.site{background:var(--surface);border-bottom:1px solid var(--line);position:relative;z-index:30}
      .sitebar{display:flex;align-items:center;gap:22px;padding:12px 20px}
      .brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
      .mark{width:32px;height:32px;border-radius:10px;background:var(--blue);display:grid;place-items:center;flex:none}
      .mark svg{width:19px;height:19px;stroke:#fff}
      .brandname{font-weight:700;font-size:18px;letter-spacing:-.01em;white-space:nowrap}
      .brandname span{color:var(--blue)}
      .tools-menu-btn{
        appearance:none;background:none;border:0;cursor:pointer;color:var(--ink);
        font-size:12.5px;font-weight:600;letter-spacing:.06em;display:flex;align-items:center;gap:6px;
        padding:8px 4px;white-space:nowrap;
      }
      .tools-menu-btn svg{width:13px;height:13px;stroke:var(--ink2);transition:transform .15s}
      .tools-menu-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
      .tools-menu-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:6px}
      .head-note{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
      @media (max-width:560px){ .head-note{display:none} .sitebar{gap:14px} }

      /* tools dropdown panel */
      .tools-panel{
        position:absolute;left:0;right:0;top:100%;
        display:none;justify-content:center;padding:10px 20px 0;pointer-events:none;
      }
      .tools-panel.open{display:flex}
      .tools-panel-inner{
        pointer-events:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;
        box-shadow:var(--shadow);padding:22px 26px;width:100%;max-width:1020px;
        max-height:70vh;overflow:auto;
      }

      /* grouped tool lists (shared: dropdown + page section) */
      .tool-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 30px}
      @media (max-width:760px){ .tool-groups{grid-template-columns:repeat(2,1fr)} }
      @media (max-width:430px){ .tool-groups{grid-template-columns:1fr} }
      .tool-group h3{
        margin:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.09em;color:var(--muted);
      }
      .tool-group ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:3px}
      .tool-tile{
        display:flex;align-items:center;gap:10px;width:100%;text-align:left;
        appearance:none;background:none;border:0;border-radius:8px;cursor:pointer;
        padding:7px 8px;color:var(--ink);font-size:14.5px;
      }
      .tool-tile:hover{background:var(--surface2)}
      .tool-tile:focus-visible{outline:2px solid var(--blue);outline-offset:1px}
      .tool-tile .tic{
        width:24px;height:24px;border-radius:6px;flex:none;display:grid;place-items:center;
      }
      .tool-tile .tic svg{width:14px;height:14px;stroke:#fff}
      .tic.c-convert{background:#0F766E}
      .tic.c-optimize{background:#2E9E5B}
      .tic.c-modify{background:#0891B2}
      .tic.c-security{background:#D96C33}
      .tool-tile .here{
        margin-left:auto;font-size:11px;font-weight:600;color:var(--green);
        background:var(--green-soft);border-radius:999px;padding:2px 8px;white-space:nowrap;
      }
      .tool-tile.live{font-weight:600}

      /* ---------- tool zone ---------- */
      .tool-zone{text-align:center;padding:44px 0 30px;position:relative}
      .crumb{font-size:13.5px;color:var(--muted);margin-bottom:14px}
      .crumb a{text-decoration:none}
      .crumb a:hover{text-decoration:underline}
      .tool-zone h1{font-size:34px;font-weight:700;letter-spacing:-.015em;margin:0 0 10px;line-height:1.15}
      @media (max-width:560px){ .tool-zone h1{font-size:28px} .tool-zone{padding-top:34px} }
      .tool-zone .sub{color:var(--ink2);margin:0 auto 30px;font-size:16.5px;max-width:520px}
      .big-btn{
        appearance:none;border:0;cursor:pointer;background:var(--blue);color:#fff;
        font-size:19px;font-weight:600;padding:17px 58px;border-radius:12px;
        box-shadow:0 10px 22px -8px rgba(15,118,110,.5);transition:background .15s;
      }
      .big-btn:hover{background:var(--blue-dark)}
      .big-btn:focus-visible{outline:3px solid var(--blue-soft);outline-offset:2px}
      .drop-hint{margin-top:13px;font-size:13.5px;color:var(--muted)}
      .sample-line{margin-top:20px;font-size:13.5px;color:var(--muted)}
      .sample-line button{
        background:none;border:0;padding:0;cursor:pointer;color:var(--blue);font-size:13.5px;
        text-decoration:underline;text-underline-offset:3px;
      }
      .format-row{
        margin-top:26px;display:flex;align-items:center;justify-content:center;gap:10px;
        font-size:13.5px;color:var(--muted);
      }
      .segmented{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--surface)}
      .segmented button{
        appearance:none;border:0;background:transparent;color:var(--ink2);cursor:pointer;
        font-weight:600;font-size:13.5px;padding:6px 16px;border-right:1px solid var(--line);
      }
      .segmented button:last-child{border-right:0}
      .segmented button[aria-pressed="true"]{background:var(--blue);color:#fff}
      .segmented button:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}

      .drag-veil{
        position:fixed;inset:0;z-index:60;display:none;place-items:center;
        background:rgba(20,184,166,.14);border:3px dashed var(--blue);border-radius:0;
        font-size:20px;font-weight:600;color:var(--blue-dark);pointer-events:none;
      }
      .drag-veil.show{display:grid}

      /* ---------- queue ---------- */
      .queue{max-width:680px;margin:30px auto 0;text-align:left}
      .queue[hidden]{display:none}
      ul.files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
      li.file{
        display:flex;align-items:center;gap:12px;background:var(--surface);
        border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;
      }
      .thumb{
        width:50px;height:50px;border-radius:7px;flex:none;overflow:hidden;
        background:var(--surface2);border:1px solid var(--line);display:grid;place-items:center;
      }
      .thumb img{width:100%;height:100%;object-fit:cover;display:block}
      .thumb svg{width:21px;height:21px;stroke:var(--muted)}
      .f-main{flex:1;min-width:0}
      .f-name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .f-meta{font-size:12.5px;color:var(--muted);margin-top:1px;font-variant-numeric:tabular-nums}
      .f-warn{font-size:12.5px;color:var(--amber);margin-top:2px}
      .f-err{font-size:12.5px;color:var(--red);margin-top:2px;line-height:1.45}
      .status{
        flex:none;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
        padding:4px 9px;border-radius:999px;border:1px solid var(--line);color:var(--muted);
        background:var(--surface2);white-space:nowrap;
      }
      .status.working{color:var(--amber);background:var(--amber-soft)}
      .status.done{color:var(--green);background:var(--green-soft)}
      .status.error{color:var(--red);background:var(--red-soft)}
      .f-actions{flex:none;display:flex;gap:6px;align-items:center}
      .small-btn{
        appearance:none;border:1px solid var(--line2);background:var(--surface);color:var(--ink);
        font-size:13.5px;font-weight:600;padding:7px 13px;border-radius:8px;cursor:pointer;
        display:inline-flex;align-items:center;gap:6px;
      }
      .small-btn svg{width:14px;height:14px;stroke:currentColor}
      .small-btn:hover{border-color:var(--blue);color:var(--blue)}
      .small-btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
      .small-btn.primary:hover{background:var(--blue-dark);color:#fff}
      .small-btn:disabled{opacity:.45;cursor:not-allowed}
      .small-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
      .icon-btn{
        appearance:none;width:32px;height:32px;border-radius:8px;border:1px solid var(--line2);
        background:var(--surface);cursor:pointer;display:grid;place-items:center;color:var(--ink2);
      }
      .icon-btn svg{width:15px;height:15px;stroke:currentColor}
      .icon-btn:hover{border-color:var(--blue);color:var(--blue)}
      @media (max-width:560px){
        li.file{flex-wrap:wrap}
        .f-main{flex-basis:calc(100% - 62px)}
        .status{order:3}
        .f-actions{order:4;margin-left:auto}
      }
      .queue-actions{
        display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:14px;
      }
      .queue-actions .spacer{flex:1}
      .text-btn{
        appearance:none;background:none;border:0;cursor:pointer;color:var(--ink2);
        font-size:13.5px;font-weight:500;padding:7px 6px;
      }
      .text-btn:hover{color:var(--blue)}
      .text-btn:disabled{opacity:.45;cursor:not-allowed}

      /* ---------- below-fold sections ---------- */
      section.block{max-width:680px;margin:0 auto;padding:38px 0 2px}
      section.block.wide{max-width:1060px}
      section.block h2{font-size:19px;font-weight:700;margin:0 0 8px;letter-spacing:-.01em}
      section.block p{color:var(--ink2);margin:0 0 10px;font-size:15px}
      .steps{list-style:none;counter-reset:step;margin:6px 0 0;padding:0}
      .steps li{display:flex;gap:13px;padding:11px 0;border-top:1px solid var(--line)}
      .steps li:first-child{border-top:0}
      .step-n{
        counter-increment:step;flex:none;width:27px;height:27px;border-radius:50%;
        background:var(--blue-soft);color:var(--blue);font-weight:700;font-size:13.5px;
        display:grid;place-items:center;margin-top:1px;
      }
      .step-n::before{content:counter(step)}
      .steps h3{margin:0 0 1px;font-size:15.5px}
      .steps p{margin:0;font-size:14.5px}
      .faq details{border-top:1px solid var(--line);padding:12px 0}
      .faq details:last-child{border-bottom:1px solid var(--line)}
      .faq summary{font-weight:600;cursor:pointer;font-size:15.5px}
      .faq p{margin:7px 0 2px;font-size:14.5px}
      .tools-section-note{font-size:13.5px;color:var(--muted);margin-top:2px}

      /* ---------- homepage ---------- */
      .home-hero{text-align:center;padding:42px 0 4px}
      .home-hero h1{font-size:44px;font-weight:800;letter-spacing:-.025em;line-height:1.15;margin:0 auto 12px;max-width:700px}
      @media (max-width:560px){ .home-hero h1{font-size:31px} .home-hero{padding-top:30px} }
      .home-hero .sub{color:var(--ink2);margin:0 auto;font-size:16.5px;max-width:540px}
      .banner-strip{
        margin:20px auto 0;max-width:620px;background:var(--blue-soft);color:var(--blue-dark);
        border:1px solid var(--line);font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:999px;
      }
      .pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:24px 0 22px}
      .pill{
        appearance:none;border:1px solid var(--line2);background:var(--surface);color:var(--ink);
        font-size:13.5px;font-weight:600;padding:7px 18px;border-radius:999px;cursor:pointer;
      }
      .pill:hover{border-color:var(--blue);color:var(--blue)}
      .pill.active{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-dark)}
      .pill.active:hover{color:var(--blue-dark)}
      .pill:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
      .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;text-align:left}
      @media (max-width:900px){ .cards{grid-template-columns:repeat(3,1fr)} }
      @media (max-width:640px){ .cards{grid-template-columns:repeat(2,1fr)} }
      @media (max-width:360px){ .cards{grid-template-columns:1fr} }
      .tool-card{
        appearance:none;text-align:left;background:var(--surface);border:1px solid var(--line);
        border-radius:18px;padding:20px 18px;cursor:pointer;color:var(--ink);
        box-shadow:0 2px 10px -4px rgba(11,91,84,.10),0 12px 26px -20px rgba(11,91,84,.22);
        position:relative;width:100%;font:inherit;
        transition:border-color .15s,box-shadow .18s,transform .18s;
      }
      .tool-card:hover{
        border-color:var(--line2);transform:translateY(-3px);
        box-shadow:0 6px 14px -6px rgba(11,91,84,.14),0 20px 36px -16px rgba(11,91,84,.30);
      }
      @media (prefers-reduced-motion: reduce){ .tool-card:hover{transform:none} }
      .tool-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
      .tool-card .tic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px}
      .tool-card .tic svg{width:21px;height:21px;stroke:#fff}
      .tc-name{display:block;font-size:15.5px;font-weight:700;margin-bottom:5px}
      .tc-desc{display:block;font-size:13px;color:var(--ink2);line-height:1.5}
      .live-badge{
        position:absolute;top:12px;right:12px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
        color:var(--green);background:var(--green-soft);border-radius:999px;padding:2px 8px;
      }
      .workway{padding:48px 0 4px;text-align:center}
      .workway h2{font-size:24px;font-weight:700;letter-spacing:-.015em;margin:0 0 22px}
      .workway-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;text-align:left}
      @media (max-width:760px){ .workway-grid{grid-template-columns:1fr} }
      .workway-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 18px;
        box-shadow:0 2px 10px -4px rgba(11,91,84,.08)}
      .workway-card .wic{width:38px;height:38px;border-radius:11px;background:var(--blue-soft);display:grid;place-items:center;margin-bottom:12px}
      .workway-card .wic svg{width:20px;height:20px;stroke:var(--blue)}
      .workway-card h3{margin:0 0 5px;font-size:15.5px}
      .workway-card p{margin:0;font-size:13.5px;color:var(--ink2)}

      footer.site{margin-top:52px;border-top:1px solid var(--line);background:var(--surface);
        padding:18px 0 30px;color:var(--muted);font-size:13px}
      footer.site .wrap{display:flex;gap:8px;flex-wrap:wrap;justify-content:space-between}

      .toast{
        position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);z-index:80;
        background:var(--ink);color:var(--bg);font-size:14px;font-weight:500;
        padding:11px 18px;border-radius:10px;box-shadow:var(--shadow);
        opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:min(92vw,520px);text-align:center;
      }
      .toast.show{opacity:1;transform:translate(-50%,0)}

/* --- plugin port addition: cards/tiles are <a> links, not <button>s --- */
a.tool-card, a.tool-tile{text-decoration:none}

/* --- plugin port addition (1.1.1): centered section heading (homepage "More Tools") --- */
h2.centered{text-align:center}

/* --- plugin addition (1.2.0): image logo, header Blog/Contact links, footer page links --- */
.brand-logo{height:36px;width:auto;display:block}
.head-links{margin-left:auto;display:flex;align-items:center;gap:20px}
.head-links a{color:var(--ink2);text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap}
.head-links a:hover{color:var(--blue);text-decoration:underline}
.foot-links{width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin-bottom:14px;text-align:center}
.foot-links a{color:var(--ink2);text-decoration:none;font-size:14px;white-space:nowrap}
.foot-links a:hover{color:var(--blue);text-decoration:underline}
.foot-links .sep{color:var(--muted)}
@media (max-width:560px){
  .brand-logo{height:29px}
  .head-links{gap:14px}
  .head-links a{font-size:13.5px}
}
@media (max-width:420px){
  .sitebar{gap:8px;padding-left:14px;padding-right:14px}
  .brand-logo{height:25px}
  .tools-menu-btn{padding:8px 0;font-size:11px;letter-spacing:.03em}
  .head-links{gap:8px}
  .head-links a{font-size:13px}
}

/* --- plugin addition (1.3.0): branded standard pages ("page" view) --- */
.page-wrap{max-width:780px;margin:0 auto;padding:36px 20px 56px}
.page-title{font-size:32px;line-height:1.2;color:var(--ink);margin:0 0 18px;letter-spacing:-.01em}
.page-content p{font-size:16.5px;line-height:1.7;color:var(--ink2);margin:0 0 16px}
.page-content h2{font-size:22px;line-height:1.3;color:var(--ink);margin:30px 0 10px}
.page-content h3{font-size:18px;line-height:1.3;color:var(--ink);margin:24px 0 8px}
.page-content a{color:var(--blue);text-decoration:none}
.page-content a:hover{text-decoration:underline}
.page-content ul,.page-content ol{font-size:16.5px;line-height:1.7;color:var(--ink2);margin:0 0 16px;padding-left:22px}
.page-content li{margin-bottom:6px}
.page-content img{max-width:100%;height:auto}

/* --- plugin addition (1.3.0): Contact Form 7, styled like the sister sites --- */
.page-content .wpcf7 label{display:block;font-weight:600;color:var(--ink);margin:14px 0 6px}
.page-content .wpcf7 input[type="text"],
.page-content .wpcf7 input[type="email"],
.page-content .wpcf7 input[type="url"],
.page-content .wpcf7 input[type="tel"],
.page-content .wpcf7 select,
.page-content .wpcf7 textarea{width:100%;padding:12px 14px;border:1px solid #CBD5E1;border-radius:10px;font:inherit;color:var(--ink);background:#fff;margin-top:6px}
.page-content .wpcf7 textarea{min-height:140px;resize:vertical}
.page-content .wpcf7 input:focus,
.page-content .wpcf7 select:focus,
.page-content .wpcf7 textarea:focus{border-color:var(--blue);outline:3px solid var(--blue-soft);outline-offset:0}
.page-content .wpcf7 .wpcf7-submit{background:#0F766E;color:#fff;font-weight:700;font-size:16px;padding:13px 34px;border:none;border-radius:999px;cursor:pointer;margin-top:18px;width:auto}
.page-content .wpcf7 .wpcf7-submit:hover{background:#0B5B54}
.page-content .wpcf7 .wpcf7-not-valid-tip{display:block;color:var(--red);font-size:13.5px;font-weight:400;margin-top:5px}
.page-content .wpcf7 .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border-radius:10px;font-size:15px}
.page-content .wpcf7 form.invalid .wpcf7-response-output,
.page-content .wpcf7 form.unaccepted .wpcf7-response-output,
.page-content .wpcf7 form.payment-required .wpcf7-response-output{background:var(--red-soft);border:1px solid var(--red);color:var(--red)}
.page-content .wpcf7 form.sent .wpcf7-response-output{background:var(--green-soft);border:1px solid var(--green);color:var(--green)}
@media (prefers-color-scheme: dark){
  .page-content .wpcf7 input[type="text"],
  .page-content .wpcf7 input[type="email"],
  .page-content .wpcf7 input[type="url"],
  .page-content .wpcf7 input[type="tel"],
  .page-content .wpcf7 select,
  .page-content .wpcf7 textarea{background:var(--surface);border-color:var(--line2)}
}

/* --- plugin hotfix (1.3.1): narrow-phone header fit (single row down to ~340px).
   Sizing does the real work; the clip is only a seatbelt against stray overflow. --- */
header.site{overflow-x:clip}
@media (max-width:380px){
  .brand-logo{height:23px}
  .tools-menu-btn{font-size:10.5px;letter-spacing:.02em}
  .head-links a{font-size:12.5px}
}