*,*::before,*::after{box-sizing:border-box}
:root,[data-theme="light"]{
  --bg:#fafafa;
  --bg2:#f2f3f8;
  --sur:#ffffff;
  --sur2:#f5f6fc;
  --sur3:#eceef8;
  --bdr:#e2e4f0;
  --bdr2:#c8ccdf;
  --tx:#0d0e1a;
  --tx2:#42455e;
  --tx3:#8c8fac;
  --nav-bg:rgba(250,250,250,.88);
  --a:#4f52e8;
  --a2:#e03d6b;
  --glow:rgba(79,82,232,.14);
  --card-sh:0 1px 3px rgba(0,0,0,.05),0 4px 16px rgba(79,82,232,.07);
  --card-sh-h:0 4px 24px rgba(79,82,232,.16),0 1px 4px rgba(0,0,0,.06);
  --dot-color:rgba(79,82,232,.07);
}
[data-theme="dark"]{
  --bg:#080810;
  --bg2:#0e0e1c;
  --sur:#111120;
  --sur2:#171728;
  --sur3:#1e1e30;
  --bdr:#252538;
  --bdr2:#32324e;
  --tx:#eeeeff;
  --tx2:#9090c0;
  --tx3:#505075;
  --nav-bg:rgba(8,8,16,.9);
  --a:#7b7eff;
  --a2:#f06090;
  --glow:rgba(123,126,255,.18);
  --card-sh:0 1px 3px rgba(0,0,0,.3),0 4px 16px rgba(123,126,255,.08);
  --card-sh-h:0 4px 28px rgba(123,126,255,.22),0 1px 4px rgba(0,0,0,.4);
  --dot-color:rgba(123,126,255,.08);
}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"DM Sans",system-ui,sans-serif;
  background:var(--bg);
  color:var(--tx);
  min-height:100vh;
  background-image:radial-gradient(var(--dot-color) 1px,transparent 1px);
  background-size:24px 24px;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,.logo,.nav-cat-badge,.t-title,.seo-h2{font-family:"Syne",system-ui,sans-serif}
code,.mono,textarea,input,select,button{font-family:"JetBrains Mono","Cascadia Code",Consolas,monospace}

nav{
  position:sticky;
  top:0;
  z-index:999;
  height:60px;
  background:var(--nav-bg);
  backdrop-filter:blur(24px) saturate(200%);
  border-bottom:1px solid var(--bdr);
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:0 1.1rem;
  box-shadow:0 1px 0 var(--bdr),0 4px 24px rgba(0,0,0,.04);
}
.logo{
  font-size:1.35rem;
  font-weight:800;
  letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--a),var(--a2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.nav-search-link{
  display:inline-flex;
  align-items:center;
  gap:.55rem;
  min-width:min(360px,42vw);
  padding:.5rem .85rem;
  border:1px solid var(--bdr);
  border-radius:10px;
  background:var(--sur2);
  color:var(--tx2);
  font-size:.84rem;
}
.nav-r{display:flex;align-items:center;gap:.55rem;margin-left:auto}
.nav-cat-badge{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--bdr);
  border-radius:999px;
  background:var(--sur2);
  color:var(--tx2);
  padding:.35rem .7rem;
}
.theme-btn,.btn,.btn2,.pbtn,.copy-btn,.tb-b{
  appearance:none;
  border:1px solid var(--bdr);
  border-radius:12px;
  background:var(--sur2);
  color:var(--tx);
  cursor:pointer;
  font:600 .88rem/1 inherit;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease;
}
.theme-btn{
  padding:.5rem .8rem;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
}
.btn,.btn-primary,.copy-btn{
  border:none;
  background:linear-gradient(135deg,var(--a),var(--a2));
  color:#fff;
  box-shadow:0 10px 24px var(--glow);
}
.btn,.btn-primary,.btn2,.copy-btn{padding:.78rem 1rem}
.btn2,.pbtn,.tb-b{background:var(--sur2);color:var(--tx2)}
.pbtn,.tb-b{padding:.56rem .88rem;border-radius:10px}
.theme-btn:hover,.btn:hover,.btn2:hover,.pbtn:hover,.copy-btn:hover,.tb-b:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  border-color:var(--bdr2);
}
.tb-r,.split-toolbar,.ctrls,.actions{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  align-items:center;
  margin-bottom:.85rem;
}
.tb-b.active{
  background:linear-gradient(135deg,var(--a),var(--a2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px var(--glow);
}
.mob-sb-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:9px;
  border:1.5px solid var(--bdr);
  background:none;
  color:var(--tx2);
  cursor:pointer;
}
.sb-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.6);
  z-index:998;
  backdrop-filter:blur(4px);
}
.sb-overlay.show,.sb-overlay.on{display:block}

.pg-layout,.pg-wrap{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  min-height:calc(100vh - 60px);
}
.pg-sidebar{
  background:var(--sur);
  border-right:1px solid var(--bdr);
  padding:.8rem 0 2rem;
  position:sticky;
  top:60px;
  height:calc(100vh - 60px);
  overflow-y:auto;
}
.pg-sb-header,.sb-logo-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:0 1rem .9rem;
  border-bottom:1px solid var(--bdr);
}
.pg-sb-count{
  font-size:.72rem;
  color:var(--tx3);
  border:1px solid var(--bdr);
  background:var(--sur2);
  border-radius:999px;
  padding:.28rem .6rem;
}
.pg-sb-search,.pg-sb-cat,.sb-section-title{padding:.3rem 1rem}
.pg-sb-search{padding-top:.85rem;padding-bottom:.5rem}
.pg-sb-search input,#sbSearch,.sb-search input{
  width:100%;
  background:var(--sur2);
  border:1.5px solid var(--bdr);
  color:var(--tx);
  padding:.74rem .9rem;
  border-radius:12px;
  font-size:.84rem;
  outline:none;
}
.pg-sb-cat-title,.sb-section-title,.sb-cat{
  display:flex;
  align-items:center;
  gap:.45rem;
  color:var(--tx3);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.35rem 0;
}
.pg-sb-dot,.sb-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  display:inline-block;
}
.pg-sb-item,.sb-item{
  display:block;
  position:relative;
  padding:.62rem 1rem .62rem 1.55rem;
  color:var(--tx2);
  font-size:.92rem;
  border-left:2px solid transparent;
}
.pg-sb-item.active,.sb-item.active{
  color:var(--a);
  background:rgba(79,82,232,.08);
  border-left-color:var(--a);
  font-weight:700;
}
.pg-sb-item.hidden,.sb-item.hidden{display:none!important}
.pg-sb-tooltip{display:none!important}

.pg-main{min-width:0}
.pg-main-inner{
  max-width:100%;
  margin:0;
  padding:1rem 1.05rem 1.6rem;
}
.breadcrumb,.t-bc{
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  color:var(--tx3);
  font-size:.84rem;
  margin-bottom:.85rem;
}
.breadcrumb-sep{opacity:.7}
.t-bc,.t-back{display:none!important}

.tool-box,.seo-section{
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:22px;
  box-shadow:var(--card-sh);
}
.tool-box{
  padding:1.25rem;
  overflow:hidden;
}
.t-title{
  font-size:1.66rem;
  font-weight:800;
  letter-spacing:-.04em;
  line-height:1.08;
}
.t-sub{
  color:var(--tx2);
  font-size:1rem;
  line-height:1.62;
  margin:.3rem 0 1rem;
}
.ws{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.tw,.tool-shell{
  border:1px solid var(--bdr);
  background:linear-gradient(180deg,rgba(79,82,232,.06),rgba(224,61,107,.03) 42%,transparent 100%);
  border-radius:20px;
  padding:1rem;
}
.panel,.feature-card,.usecase-card,.related-card,.mini-card{
  border:1px solid var(--bdr);
  background:var(--sur2);
  border-radius:18px;
  padding:1rem;
}
.p-hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  margin-bottom:.7rem;
  font-size:.84rem;
  font-weight:700;
  color:var(--tx2);
}
.p-btns{display:flex;flex-wrap:wrap;gap:.45rem}
.stat-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
  margin-top:.75rem;
  color:var(--tx3);
  font-size:.8rem;
}
textarea,.toolInput,.inp,.toolSelect,select,input:not([type="checkbox"]):not([type="radio"]):not([type="color"]){
  width:100%;
  background:var(--sur);
  border:1.5px solid var(--bdr);
  color:var(--tx);
  padding:.78rem .88rem;
  border-radius:12px;
  outline:none;
}
textarea{min-height:160px;resize:vertical}
textarea[readonly]{background:var(--sur2)}
textarea:focus,.toolInput:focus,.inp:focus,.toolSelect:focus,select:focus,input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):focus{
  border-color:var(--a);
  box-shadow:0 0 0 4px var(--glow);
}
input[type="color"]{
  border:1px solid var(--bdr);
  border-radius:10px;
  background:var(--sur);
}
.out-w,.result,.preview,.shadow-preview,#toolOutput,#toolInput,[id*="result"],[id*="output"],[class*="result"],[class*="output"]{max-width:100%}
.rb{
  margin-top:.9rem;
  border:1px solid var(--bdr);
  border-radius:18px;
  background:var(--sur2);
  padding:1rem;
}
.rg{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
}
.rg > div,.result-card{
  border:1px solid var(--bdr);
  background:var(--sur);
  border-radius:14px;
  padding:.8rem;
}
.rl,.result-label{
  display:block;
  font-size:.74rem;
  color:var(--tx3);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.35rem;
}
.rv,.rb2,.result-value{display:block;font-size:1rem;line-height:1.55;color:var(--tx);word-break:break-word}
.rn,.tool-note{margin-top:.85rem;color:var(--tx2);font-size:.92rem;line-height:1.75}
.seo-section{padding:1.25rem 1.25rem 1.35rem;margin-top:1rem}
.seo-h2{font-size:1.36rem;line-height:1.18;letter-spacing:-.02em;margin:0 0 .8rem}
.seo-section p,.seo-section li,.feature-desc,.usecase-desc,.related-desc,.faq-a{
  font-size:1rem;
  line-height:1.86;
  color:var(--tx2);
}
.seo-section p + p{margin-top:.75rem}
.features-grid,.usecases-grid,.related-grid,.result-grid,.mini-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem;
}
.feature-title,.usecase-title,.related-name,.faq-q{
  display:block;
  font-size:.98rem;
  line-height:1.35;
  font-weight:800;
  color:var(--tx);
  margin-bottom:.35rem;
}
.howto-list{padding-left:1.2rem}
.faq-item + .faq-item{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--bdr)}
.link-box{
  font-family:"JetBrains Mono","Cascadia Code",Consolas,monospace;
  background:var(--sur2);
  border:1px solid var(--bdr);
  border-radius:12px;
  padding:.9rem;
  color:var(--tx2);
  overflow:auto;
}
.toast{
  position:fixed;
  right:1rem;
  bottom:1rem;
  z-index:1000;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:all .18s ease;
  padding:.75rem .95rem;
  border-radius:12px;
  background:var(--tx);
  color:#fff;
  box-shadow:var(--card-sh-h);
  font-size:.84rem;
}
.toast.on,.toast.show{opacity:1;transform:translateY(0)}
footer{padding:2rem 1.35rem 2.5rem}
.foot-inner{
  max-width:none;
  margin:0;
  background:var(--sur);
  border:1px solid var(--bdr);
  border-radius:22px;
  padding:1.25rem;
  box-shadow:var(--card-sh);
}
.foot-top{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1.85fr);
  gap:1.25rem;
}
.foot-logo{
  font-family:"Syne",system-ui,sans-serif;
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:-.03em;
}
.foot-brand p,.foot-col a,.foot-made,.foot-bottom,.foot-copy,.foot-verify{
  font-size:.95rem;
  line-height:1.8;
  color:var(--tx2);
}
.foot-links-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1rem;
}
.foot-col h4,.foot-col-title{
  font-size:.84rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tx3);
  margin:0 0 .55rem;
}
.foot-col a{display:block;margin:.34rem 0}
.foot-bottom,.foot-made{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  border-top:1px solid var(--bdr);
  margin-top:1rem;
  padding-top:1rem;
}
table{
  width:100%;
  border-collapse:collapse;
  background:var(--sur);
  color:var(--tx);
}
th,td{
  border:1px solid var(--bdr);
  padding:.6rem .7rem;
  text-align:left;
}
pre,code{
  white-space:pre-wrap;
  word-break:break-word;
}
canvas,img,svg,video{max-width:100%}

@media (max-width:1080px){
  .pg-layout,.pg-wrap{grid-template-columns:1fr}
  .pg-sidebar{
    position:fixed;
    top:60px;
    left:0;
    bottom:0;
    width:min(290px,88vw);
    height:auto;
    z-index:999;
    transform:translateX(-102%);
    transition:transform .2s ease;
  }
  .pg-sidebar.open{transform:translateX(0)}
  .mob-sb-btn{display:inline-flex}
}
@media (max-width:860px){
  .nav-search-link span,.theme-btn-label,.nav-cat-badge{display:none}
  nav{padding:0 .9rem}
  .pg-main-inner,footer{padding-left:.9rem;padding-right:.9rem}
  .ws,.features-grid,.usecases-grid,.related-grid,.result-grid,.mini-grid,.foot-top,.foot-links-grid,.rg{
    grid-template-columns:1fr;
  }
  .tool-box,.seo-section{padding:1rem}
}