/*
Theme Name: QuickSizeConvert Tools
Theme URI: https://quicksizeconvert.com/
Author: QuickSizeConvert
Description: Same-to-same WordPress version of the QuickSizeConvert Tools live preview HTML — free length and weight converters.
Version: 1.2.3
License: GNU General Public License v2 or later
Text Domain: quicksizeconvert-tools
*/

:root{
    --yellow:#FFC907;
    --yellow-soft:#FFDF4D;
    --yellow-tint:#FFF3C2;
    --purple:#6D28D9;
    --purple-dark:#4C1D95;
    --purple-strip:#3D1573;
    --purple-deep:#2A1650;
    --plum:#3A1470;
    --cream:#FFFBEB;
    --muted:#7C6FA3;
    --body:#4A3F66;
    --faint:#A79BCB;
    --line:#F0E3C0;
    --line-purple:#E9E1F7;
    --shadow:0 14px 34px rgba(58,20,112,.09);
    --shadow-sm:0 6px 18px rgba(58,20,112,.08);
    --radius:22px;
    --header-h:72px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
  body{
    margin:0;
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--body);
    background:var(--cream);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4{font-family:"Fredoka","Inter",sans-serif;font-weight:600;line-height:1.15;margin:0;color:var(--plum)}
  p{margin:0}
  a{color:var(--purple);text-decoration:none;font-weight:600}
  a:hover{text-decoration:underline}
  button{font:inherit;cursor:pointer}
  :focus-visible{outline:3px solid rgba(109,40,217,.45);outline-offset:2px;border-radius:6px}
  .wrap{max-width:1130px;margin:0 auto;padding:0 20px}
  .anchor{scroll-margin-top:calc(var(--header-h) + 16px)}

  /* Top strip */
  .topbar{
    background:var(--purple-strip);color:#fff;
    font-size:13.5px;font-weight:600;
    text-align:center;padding:9px 16px;
  }
  .topbar a{color:var(--yellow-soft);font-weight:700}
  .topbar a:hover{color:#fff}

  /* Header */
  .site-header{
    position:sticky;top:0;z-index:60;background:var(--cream);
    border-bottom:1px solid var(--line);
    transition:box-shadow .2s ease;
  }
  .site-header.scrolled{box-shadow:0 10px 24px -14px rgba(58,20,112,.25)}
  .header-in{display:flex;align-items:center;gap:12px;min-height:var(--header-h);padding:8px 0;flex-wrap:wrap}
  .logo{display:flex;align-items:center;gap:8px;color:var(--plum);flex:none;padding-top:2px}
  .logo:hover{text-decoration:none}
  .logo-mark{
    width:34px;height:34px;border-radius:50%;background:var(--yellow);
    display:flex;align-items:center;justify-content:center;flex:none;
  }
  .logo-mark svg{display:block}
  .logo-text{font-family:"Fredoka",sans-serif;font-size:20px;font-weight:700;letter-spacing:.01em;color:var(--plum)}
  .logo-text em{font-style:normal;color:var(--purple)}
  /* Desktop menu: one horizontal row beside the logo (visible above 640px) */
  .main-nav{
    display:flex;flex-direction:row;align-items:center;gap:0;flex-wrap:wrap;
    margin-left:auto;min-width:0;
  }
  .main-nav>a,.tool-wrap>a{
    display:inline-flex;align-items:center;white-space:nowrap;
    color:var(--plum);font-weight:600;font-size:13.5px;
    padding:6px 9px;border-radius:999px;background:none;border:0;
  }
  .main-nav>a:hover,.tool-wrap>a:hover{color:var(--purple);text-decoration:none;background:#fff}
  .tool-wrap{position:relative}
  .tool-dropdown{
    display:none;position:absolute;top:calc(100% + 6px);right:0;z-index:70;
    width:250px;max-height:70vh;overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border:1px solid var(--line);border-radius:14px;
    box-shadow:var(--shadow);padding:6px;
    scrollbar-width:thin;scrollbar-color:var(--purple) var(--yellow-tint);
  }
  .tool-dropdown.open{display:block}
  .tool-wrap:hover .tool-dropdown{display:block}
  .tool-dropdown button{
    display:block;width:100%;text-align:left;background:none;border:0;
    padding:9px 10px;font-size:14.5px;color:var(--plum);font-weight:600;border-radius:9px;
  }
  .tool-dropdown button:hover{background:var(--yellow-tint);color:var(--purple-dark)}
  .tool-dropdown::-webkit-scrollbar,.mobile-menu::-webkit-scrollbar,.m-sub::-webkit-scrollbar{width:8px}
  .tool-dropdown::-webkit-scrollbar-thumb,.mobile-menu::-webkit-scrollbar-thumb,.m-sub::-webkit-scrollbar-thumb{background:var(--purple);border-radius:99px}
  .tool-dropdown::-webkit-scrollbar-track,.mobile-menu::-webkit-scrollbar-track,.m-sub::-webkit-scrollbar-track{background:var(--yellow-tint)}
  .burger{
    display:none;margin-left:auto;background:#fff;border:1px solid var(--line);
    border-radius:12px;width:42px;height:42px;align-items:center;justify-content:center;
    box-shadow:var(--shadow-sm);
  }
  .mobile-menu{
    display:none;border-top:1px solid var(--line);background:var(--cream);padding:10px 20px 18px;
    max-height:calc(100dvh - var(--header-h));overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--purple) var(--yellow-tint);
  }
  .mobile-menu.open{display:block}
  .mobile-menu a,.mobile-menu .m-group{
    display:block;width:100%;text-align:left;padding:11px 6px;color:var(--plum);
    font-weight:600;font-size:16px;border:0;border-bottom:1px solid var(--line);background:none;
  }
  .mobile-menu a:hover{color:var(--purple);text-decoration:none}
  .m-sub{display:none;padding:2px 0 8px 14px}
  .m-sub.open{
    display:block;max-height:38vh;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--purple) var(--yellow-tint);
  }
  .m-sub button{
    display:block;width:100%;text-align:left;background:none;border:0;
    padding:8px 6px;font-size:15px;color:var(--muted);font-weight:600;
  }
  .m-sub button:hover{color:var(--purple-dark)}
  .mobile-menu .btn{width:100%;margin-top:14px}

  /* Buttons and pill labels */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    background:var(--purple);color:#fff;border:0;
    font-family:"Fredoka",sans-serif;font-weight:600;font-size:16px;letter-spacing:.01em;
    padding:12px 26px;border-radius:999px;box-shadow:var(--shadow-sm);
    transition:transform .12s ease,background .15s ease;
  }
  .btn:hover{background:var(--purple-dark);text-decoration:none;color:#fff;transform:translateY(-1px)}
  .btn.yellow{background:var(--yellow);color:var(--plum)}
  .btn.yellow:hover{background:var(--yellow-soft);color:var(--plum)}
  .btn.white{background:#fff;color:var(--plum);border:1px solid var(--line)}
  .btn.white:hover{background:var(--yellow-tint);color:var(--plum)}
  .btn.small{padding:9px 20px;font-size:14.5px}
  .pill-label{
    display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--purple-dark);
    border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-sm);
    font-family:"Fredoka",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    padding:7px 18px;
  }
  .pill-label svg{flex:none}

  /* Hero */
  .hero-band{
    background:
      radial-gradient(560px 300px at 12% 0%, rgba(255,201,7,.28), rgba(255,201,7,0) 70%),
      radial-gradient(620px 340px at 88% 4%, rgba(109,40,217,.14), rgba(109,40,217,0) 70%),
      var(--cream);
  }
  .hero{padding:64px 0 54px;text-align:center}
  .hero h1{
    font-size:clamp(40px,6vw,66px);font-weight:700;color:var(--plum);
    max-width:820px;margin:26px auto 0;letter-spacing:.005em;
  }
  .hero h1 .hl{
    background:linear-gradient(transparent 64%, var(--yellow-soft) 64%, var(--yellow-soft) 94%, transparent 94%);
    padding:0 4px;
  }
  .hero .sub{color:var(--muted);font-size:17.5px;font-weight:500;max-width:620px;margin:20px auto 0}
  .hero-popular{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;align-items:center;margin-top:30px}
  .hero-popular .p-label{font-size:14.5px;color:var(--faint);font-weight:500;margin-right:2px}
  .chip{
    background:#fff;border:1px solid var(--line);color:var(--plum);
    border-radius:999px;padding:8px 17px;font-size:14.5px;font-weight:600;
    box-shadow:0 3px 10px rgba(58,20,112,.05);
    transition:background .12s ease,transform .1s ease;
  }
  .chip:hover{background:var(--yellow-tint);transform:translateY(-1px)}
  .hero-stats{display:flex;gap:56px;justify-content:center;flex-wrap:wrap;margin-top:46px}
  .hero-stats .stat .num{font-family:"Fredoka",sans-serif;font-size:34px;font-weight:700;color:var(--plum);line-height:1.1}
  .hero-stats .stat .lab{font-size:14.5px;color:var(--faint);font-weight:500;margin-top:3px}

  /* Marquee */
  .marquee{background:var(--purple-strip);overflow:hidden;padding:11px 0}
  .marquee-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
  .marquee-group{display:flex;align-items:center;flex:none}
  .marquee-group span{
    font-family:"Fredoka",sans-serif;font-size:13.5px;font-weight:600;letter-spacing:.14em;
    color:#fff;text-transform:uppercase;padding:0 14px;white-space:nowrap;
  }
  .marquee-group svg{flex:none}
  @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

  /* Sections */
  section.block{padding:64px 0}
  section.block.white{background:#fff}
  .sec-head{text-align:center;max-width:680px;margin:0 auto 34px}
  .sec-head h2{font-size:clamp(28px,3.6vw,38px);font-weight:700;margin-top:18px}
  .sec-head p{color:var(--muted);font-size:16.5px;margin-top:10px}

  /* Zone cards */
  .zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .zone-card{
    position:relative;overflow:hidden;border-radius:var(--radius);
    padding:26px 26px 20px;box-shadow:var(--shadow-sm);
    display:flex;flex-direction:column;
  }
  .zone-card::before,.zone-card::after{
    content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;
  }
  .zone-card::before{width:74px;height:74px;top:-26px;right:-18px}
  .zone-card::after{width:44px;height:44px;bottom:-14px;left:-10px;background:rgba(255,255,255,.35)}
  .z-yellow{background:#FDE9A8}
  .z-lav{background:#E9E1FC}
  .z-peach{background:#FCEBD2}
  .z-blue{background:#DFEDFA}
  .z-mint{background:#DFF3E4}
  .z-cream{background:#FFF0BC}
  .zone-num{font-size:13px;font-weight:800;letter-spacing:.12em;color:rgba(58,20,112,.38)}
  .zone-card h3{font-size:23px;font-weight:600;margin-top:8px}
  .zone-card .z-desc{font-size:14.5px;color:#6B5B96;margin-top:5px}
  .zone-tools{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:5px;position:relative;z-index:1}
  .zone-tools button,.zone-tools a.z-all{
    width:100%;background:rgba(255,255,255,.55);border:0;text-align:left;padding:8px 12px;border-radius:10px;
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    font-size:14.5px;font-weight:600;color:var(--plum);
    transition:background .12s ease;
  }
  .zone-tools button:hover,.zone-tools a.z-all:hover{background:#fff;text-decoration:none}
  .zone-tools button span,.zone-tools a.z-all span{color:var(--muted);font-size:12.5px;font-weight:600;flex:none}

  /* Converter of the Day */
  .cotd-card{
    position:relative;overflow:hidden;text-align:center;
    background:linear-gradient(115deg,#FFF6D6 0%,#F7F1FC 55%,#EFE7FD 100%);
    border-radius:28px;box-shadow:var(--shadow);
    padding:50px 30px 46px;
  }
  .cotd-card .dot{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);pointer-events:none}
  .cotd-card .dot.d1{width:26px;height:26px;top:34px;left:7%}
  .cotd-card .dot.d2{width:16px;height:16px;bottom:40px;right:9%;background:rgba(109,40,217,.14)}
  .cotd-card .dot.d3{width:12px;height:12px;top:44%;left:4%;background:rgba(255,201,7,.5)}
  .cotd-icon{
    width:76px;height:76px;margin:24px auto 0;border-radius:50%;background:var(--yellow);
    display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
  }
  .cotd-big{
    font-family:"Fredoka",sans-serif;font-weight:700;color:var(--plum);
    font-size:clamp(30px,4.6vw,46px);line-height:1.2;margin-top:22px;
  }
  .cotd-big b{color:var(--purple)}
  .cotd-sub{color:var(--muted);font-size:16px;font-weight:500;max-width:56ch;margin:12px auto 0}
  .cotd-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

  /* Converter */
  .converter-anchor{scroll-margin-top:calc(var(--header-h) + 18px)}
  .converter-wrap{max-width:780px;margin:30px auto 0}
  .converter-card{
    background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);
    padding:26px 26px 22px;text-align:left;
  }
  .converter-card.flash{animation:flash 1s ease}
  @keyframes flash{0%{box-shadow:0 0 0 4px rgba(109,40,217,.35),var(--shadow)}100%{box-shadow:var(--shadow)}}
  @media (prefers-reduced-motion:reduce){ .converter-card.flash{animation:none} }
  .conv-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
  .conv-title h3{font-size:21px;font-weight:600}
  .conv-title p{color:var(--muted);font-size:14px;font-weight:500}
  .conv-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;margin-top:18px;align-items:end}
  .field label{display:block;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--purple);margin-bottom:6px}
  .field input,.field select{
    width:100%;font:inherit;font-size:16.5px;font-weight:600;color:var(--plum);
    border:1.5px solid #E7DFF2;border-radius:13px;background:#fff;
    padding:12px 13px;outline:none;
  }
  .field input:focus,.field select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,40,217,.14)}
  .conv-row2{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-top:14px;align-items:end}
  .swap-btn{
    width:46px;height:48px;border-radius:13px;flex:none;
    border:0;background:var(--yellow);color:var(--plum);
    box-shadow:var(--shadow-sm);
    display:flex;align-items:center;justify-content:center;
  }
  .swap-btn:hover{background:var(--yellow-soft)}
  .convert-btn{height:50px;padding:0 36px}
  .conv-result{
    margin-top:18px;background:var(--yellow-tint);border-radius:15px;
    padding:16px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  }
  .conv-result .r-big{font-family:"Fredoka",sans-serif;font-size:29px;font-weight:700;color:var(--plum);letter-spacing:.01em}
  .conv-result .r-big b{color:var(--purple)}
  .conv-result .r-eq{color:#6B5B96;font-size:14.5px;font-weight:500;width:100%}
  .copy-btn{
    margin-left:auto;background:#fff;border:1px solid var(--line);color:var(--plum);
    border-radius:999px;font-size:13.5px;font-weight:700;padding:7px 15px;flex:none;
  }
  .copy-btn:hover{background:var(--yellow)}
  .conv-formula{margin-top:10px;font-size:13.5px;color:var(--muted);font-weight:500}
  .conv-formula b{color:var(--purple-dark);font-weight:700}
  .quick-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px;align-items:center}
  .quick-row .q-label{font-size:13.5px;font-weight:700;color:var(--muted);margin-right:2px}
  /* Popular tool cards */
  .tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .tool-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;
    transition:transform .12s ease,box-shadow .12s ease;
  }
  .tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .tool-top{height:148px;display:flex;align-items:center;justify-content:center}
  .t-lav{background:#E9E1FC}
  .t-peach{background:#FCEBD2}
  .t-yellow{background:#FDE9A8}
  .t-blue{background:#DFEDFA}
  .t-mint{background:#DFF3E4}
  .t-cream{background:#FFF0BC}
  .pair-visual{display:flex;align-items:center;gap:10px}
  .u-badge{
    background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);
    font-family:"Fredoka",sans-serif;font-weight:700;font-size:23px;color:var(--plum);
    padding:11px 15px;letter-spacing:.03em;
  }
  .pair-arrow{font-family:"Fredoka",sans-serif;font-weight:700;font-size:20px;color:var(--purple)}
  .tool-body{padding:22px 24px 20px;display:flex;flex-direction:column;flex:1}
  .tool-body h3{font-size:20px;font-weight:600}
  .tool-body .desc{font-size:14.5px;color:var(--muted);margin-top:7px;flex:1}
  .tool-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
  .tool-meta .ex{font-size:13.5px;color:var(--faint);font-weight:600}
  .use-btn{
    background:none;border:0;padding:0;flex:none;
    color:var(--purple);font-family:"Fredoka",sans-serif;font-weight:600;font-size:15.5px;
  }
  .use-btn:hover{color:var(--purple-dark);text-decoration:underline}

  /* All 12 tools strip */
  .all-tools{
    margin-top:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);padding:22px 24px;
  }
  .all-tools h3{font-size:17px;font-weight:600;margin-bottom:4px}
  .all-tools p{font-size:14px;color:var(--muted);margin-bottom:14px}
  .all-tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
  .all-tools-grid button{
    background:var(--cream);border:1px solid var(--line);border-radius:12px;
    padding:10px 12px;text-align:left;font-size:14px;font-weight:600;color:var(--plum);
    display:flex;justify-content:space-between;align-items:center;gap:8px;
  }
  .all-tools-grid button:hover{background:var(--yellow-tint)}
  .all-tools-grid button span{color:var(--faint);font-size:12px;font-weight:600;flex:none}

  /* Guide cards */
  .guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .guide-card{
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;
    transition:transform .12s ease,box-shadow .12s ease;
  }
  .guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
  .guide-top{
    height:138px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(115deg,#FFF3C2 0%,#EFE7FD 100%);
  }
  .guide-ic{
    width:72px;height:72px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);
    display:flex;align-items:center;justify-content:center;
    font-family:"Fredoka",sans-serif;font-weight:700;font-size:21px;color:var(--purple);letter-spacing:.04em;
  }
  .guide-body{padding:22px 24px 20px;display:flex;flex-direction:column;flex:1}
  .guide-cat{font-size:11.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--purple)}
  .guide-body h3{font-size:20px;font-weight:600;margin-top:7px}
  .guide-body .desc{font-size:14.5px;color:var(--muted);margin-top:7px;flex:1}
  .guide-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}
  .guide-meta .zone{font-size:13.5px;color:var(--faint);font-weight:600}

  /* Bottom converter panel */
  .bottom-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;align-items:start}
  .side-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:22px 24px}
  .side-panel h3{font-size:18px;font-weight:600;margin-bottom:4px}
  .side-panel p{font-size:14px;color:var(--muted);margin-bottom:10px}
  .side-panel ul{list-style:none;margin:0;padding:0}
  .side-panel li{border-bottom:1px dashed var(--line-purple)}
  .side-panel li:last-child{border-bottom:0}
  .side-panel li button{
    width:100%;background:none;border:0;text-align:left;padding:9px 4px;
    display:flex;justify-content:space-between;align-items:center;gap:8px;
    font-size:14.5px;font-weight:600;color:var(--plum);
  }
  .side-panel li button:hover{color:var(--purple)}
  .side-panel li button span{color:var(--faint);font-size:12.5px;font-weight:600}

  /* Footer */
  footer{background:var(--purple-deep);color:#CFC4EE}
  .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;padding:48px 0 30px}
  .footer-brand p{color:#CFC4EE;font-size:14.5px;margin-top:12px;max-width:34ch}
  footer .logo-text{color:#fff}
  footer .logo-text em{color:var(--yellow)}
  footer h4{font-family:"Fredoka",sans-serif;font-size:13px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--yellow);margin:6px 0 13px}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
  footer ul a,footer ul button{color:#CFC4EE;font-size:14.5px;background:none;border:0;padding:0;text-align:left;font-weight:500}
  footer ul a:hover,footer ul button:hover{color:var(--yellow);text-decoration:none}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.16);padding:17px 0 21px;
    display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
    font-size:13.5px;color:#A99BD6;
  }
  .footer-bottom nav{display:flex;gap:18px;flex-wrap:wrap}
  .footer-bottom button{background:none;border:0;color:#A99BD6;font-size:13.5px;padding:0;font-weight:500}
  .footer-bottom button:hover{color:var(--yellow)}

  /* Info sheet */
  .overlay{
    position:fixed;inset:0;background:rgba(42,22,80,.55);z-index:90;
    display:none;align-items:flex-end;justify-content:center;padding:0;
  }
  .overlay.open{display:flex}
  .sheet{
    background:#fff;width:100%;max-width:640px;max-height:82vh;overflow:auto;
    border-radius:20px 20px 0 0;padding:26px 26px 34px;
  }
  @media (min-width:700px){ .overlay{align-items:center;padding:20px} .sheet{border-radius:20px;box-shadow:var(--shadow)} }
  .sheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
  .sheet-head h2{font-size:23px;font-weight:700}
  .sheet-close{background:var(--yellow);border:0;border-radius:50%;width:36px;height:36px;font-size:15px;color:var(--plum);font-weight:700}
  .sheet p{color:var(--muted);font-size:15px;margin-bottom:11px}
  .sheet p b{color:var(--plum)}

  /* Responsive */
  @media (max-width:1020px){
    .tool-grid,.zone-grid,.guide-grid{grid-template-columns:repeat(2,1fr)}
    .all-tools-grid{grid-template-columns:repeat(3,1fr)}
    .footer-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:860px){
    .bottom-grid{grid-template-columns:1fr}
  }
  @media (max-width:639px){
    .main-nav{display:none}
    .burger{display:flex}
    .header-in{align-items:center;flex-wrap:nowrap}
    .logo{padding-top:0}
  }
  @media (max-width:640px){
    .header-in{gap:10px}
    .logo{gap:8px}
    .logo-mark{width:34px;height:34px}
    .logo-text{font-size:20px}
    .burger{width:38px;height:38px}
    .hero{padding:44px 0 40px}
    .hero-stats{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
      gap:10px;width:100%;margin-top:36px;
    }
    .hero-stats .stat{min-width:0;text-align:center}
    .hero-stats .stat .num{font-size:25px}
    .hero-stats .stat .lab{font-size:12.5px}
    .converter-card{padding:20px 16px 18px}
    .conv-grid{grid-template-columns:1fr}
    .conv-grid .swap-wrap{display:flex;justify-content:center}
    .conv-grid .swap-btn{transform:rotate(90deg)}
    .conv-row2{grid-template-columns:1fr 1fr}
    .convert-btn{grid-column:1/-1;width:100%}
    .tool-grid,.zone-grid,.guide-grid{grid-template-columns:1fr}
    .all-tools-grid{grid-template-columns:1fr 1fr}
    .footer-grid{grid-template-columns:1fr}
    .cotd-card{padding:38px 20px 34px}
    section.block{padding:46px 0}
    .conv-result .r-big{font-size:24px}
    .copy-btn{margin-left:0}
  }

/* WordPress only: keep the sticky header below the admin bar when logged in. Visitors see no change. */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* v1.2.0: navigation links that replace data-load buttons must look like the old buttons */
.zone-tools a{width:100%;background:rgba(255,255,255,.55);border:0;text-align:left;padding:8px 12px;border-radius:10px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--plum)}
.zone-tools a:hover{background:#fff;text-decoration:none}
.zone-tools a span{color:var(--muted);font-size:12.5px;font-weight:600;flex:none}
.all-tools-grid a{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--plum)}
.all-tools-grid a:hover{background:var(--yellow-tint);text-decoration:none}
.side-panel ul a{width:100%;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--plum)}
.side-panel ul a:hover{background:var(--yellow-tint);text-decoration:none}
.side-panel ul a span{color:var(--muted);font-size:12.5px;font-weight:600;flex:none}
.tool-dropdown a{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;font-size:14.5px;color:var(--plum);font-weight:600;border-radius:9px}
.tool-dropdown a:hover{background:var(--yellow-tint);color:var(--purple-dark);text-decoration:none}
.m-sub a{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;font-size:14.5px;color:var(--plum);font-weight:600;border-radius:9px}
.footer-grid ul a{color:inherit}
.guide-card h3 a{color:inherit}