/* ToolCraft - main stylesheet (v2 design: toolkit drawer) */

/* ============ DESIGN TOKENS (v2 — warm/rounded) ============ */
:root{
  --bg:#F4F6FB;
  --surface:#FFFFFF;
  --surface-2:#EAEEF9;
  --ink:#1B2340;
  --ink-soft:#5B6480;
  --ink-faint:#8D95AC;
  --coral:#FF5A45;
  --coral-soft:#FF7A69;
  --sun:#FFB238;
  --mint:#1FA97F;
  --border:#DEE3F2;
  --radius:22px;
  --shadow:0 2px 4px rgba(27,35,64,.05), 0 14px 30px rgba(27,35,64,.08);
  --font-display:'Baloo 2',sans-serif;
  --font-body:'Inter',sans-serif;
  --font-mono:'JetBrains Mono',monospace;
}
html[data-theme="dark"]{
  --bg:#12162A;
  --surface:#1B2140;
  --surface-2:#242A4C;
  --ink:#EEF0FB;
  --ink-soft:#A6ACC9;
  --ink-faint:#666E92;
  --coral:#FF6E5C;
  --coral-soft:#FF5A45;
  --sun:#FFC15C;
  --mint:#3FD1A3;
  --border:#333B63;
  --shadow:0 2px 4px rgba(0,0,0,.3), 0 14px 30px rgba(0,0,0,.35);
}
*{transition:background-color .25s ease, border-color .25s ease, color .25s ease;}
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;}
}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15.5px;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);font-weight:700;letter-spacing:-0.01em;}
.font-mono{font-family:var(--font-mono);}
a{color:inherit;text-decoration:none;}
.text-soft{color:var(--ink-soft);}
.text-faint{color:var(--ink-faint);}
.border-token{border:2px solid var(--border)!important;}
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);}
.btn-coral{background:var(--coral);border:2px solid var(--coral);color:#fff;font-weight:700;border-radius:999px;padding:.7rem 1.5rem;font-family:var(--font-display);}
.btn-coral:hover{background:var(--coral-soft);border-color:var(--coral-soft);color:#fff;}
.btn-outline-token{background:transparent;border:2px solid var(--border);color:var(--ink);border-radius:999px;padding:.7rem 1.5rem;font-weight:700;font-family:var(--font-display);}
.btn-outline-token:hover{border-color:var(--coral);color:var(--coral);}
:focus-visible{outline:3px solid var(--sun);outline-offset:2px;}

/* ============ HEADER ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(222,227,242,.9);
  box-shadow:0 12px 28px rgba(27,35,64,.04);
}
html[data-theme="dark"] .site-header{
  background:rgba(27,33,64,.84);
  border-bottom-color:rgba(51,59,99,.9);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.navbar{min-height:78px;}
.navbar .container{display:flex;align-items:center;justify-content:space-between;}
.brand{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.35rem;
  display:flex;
  align-items:center;
  gap:.55rem;
  color:var(--ink);
  letter-spacing:-.04em;
}
.brand .mark{
  width:36px;height:36px;border-radius:12px;
  background:linear-gradient(135deg,var(--coral),var(--sun));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1rem;
  transform:rotate(-6deg);box-shadow:0 10px 22px rgba(255,90,69,.35);
}
.navbar-nav{align-items:center;gap:.15rem;}
.navbar-nav .nav-item{position:relative;}
.nav-link-token{
  color:var(--ink-soft)!important;
  font-weight:700!important;
  font-size:.92rem;
  padding:.7rem .9rem!important;
  border-radius:12px;
  transition:all .2s ease;
}
.nav-link-token:hover,
.nav-link-token:focus,
.nav-link-token[aria-expanded="true"]{
  color:var(--coral)!important;
  background:rgba(255,90,69,.08);
}
.dropdown-menu{background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:.9rem .85rem;}
.dropdown-item{
  border-radius:12px;
  padding:.55rem .7rem;
  color:var(--ink-soft);
  font-size:.9rem;
  font-weight:600;
}
.dropdown-item:hover,.dropdown-item:focus{
  background:rgba(255,90,69,.07);
  color:var(--coral);
}
.mega-dropdown{position:relative;}
.navbar .mega-dropdown-menu{
  position:absolute;
  left:0;
  right:auto;
  transform:none;
  width:min(920px,70vw);
  top:calc(100% + 12px);
  margin-top:0;
  padding:1.25rem 1.15rem;
  border-radius:24px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(222,227,242,.95);
  box-shadow:0 18px 40px rgba(27,35,64,.12);
}
html[data-theme="dark"] .navbar .mega-dropdown-menu{
  background:rgba(27,33,64,.98);
  border-color:var(--border);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.mega-menu-col{padding:0 .7rem;}
.mega-menu-col:not(:last-child){border-right:1px solid var(--border);}
.mega-dropdown-menu .dropdown-header{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--coral)!important;
  padding:.25rem .45rem .65rem;
  margin-bottom:.3rem;
  font-weight:800;
}
.mega-dropdown-menu .dropdown-item{padding:.5rem .55rem;}
.mega-dropdown-menu .dropdown-divider{margin:.6rem 0;border-top-color:var(--border);}
.search-box{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;
  display:flex;align-items:center;gap:.5rem;
  padding:.45rem .9rem;
  min-width:220px;
  position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.search-box input{background:transparent;border:0;outline:0;color:var(--ink);font-size:.85rem;width:100%;}
.search-box input::placeholder{color:var(--ink-faint);}
.icon-btn,.theme-toggle{
  width:42px;height:42px;border-radius:999px;border:1px solid var(--border);background:var(--surface);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);box-shadow:0 8px 18px rgba(27,35,64,.05);
}
.icon-btn:hover,.theme-toggle:hover{
  color:var(--coral);border-color:var(--coral);background:rgba(255,90,69,.04);
}
.navbar__hamburger{
  width:42px;height:42px;border:1px solid var(--border);border-radius:12px;background:var(--surface);display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;box-shadow:0 8px 18px rgba(27,35,64,.05);
}
.navbar__hamburger span{
  display:block;width:18px;height:2px;border-radius:99px;background:var(--ink);transition:all .2s ease;
}
.navbar__hamburger[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg);}
.navbar__hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.navbar__hamburger[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg);}
.navbar__actions{position:relative;}

@media (max-width:991px){
  .navbar__hamburger{display:flex;}
  .navbar-collapse{
    width:100%;
    max-height:calc(100vh - 86px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:.35rem;
  }
  .navbar-nav{
    width:100%;
    align-items:flex-start;
    text-align:left;
    padding:0.2rem 0 0.5rem;
  }
  .navbar-nav .nav-item,
  .navbar-nav .nav-link,
  .navbar-nav .dropdown-toggle{
    width:100%;
    text-align:left;
  }
  .nav-link-token{
    display:block;
    text-align:left;
    padding-left:0.75rem!important;
    padding-right:0.75rem!important;
  }
  .mega-dropdown{
    position:static;
    width:100%;
  }
  .navbar .mega-dropdown-menu{
    position:static;
    width:100vw;
    max-width:none;
    left:0;
    right:0;
    transform:none;
    border-radius:18px;
    padding:.75rem .65rem;
    margin: .5rem 0 0 -12px;
  }
  .navbar .mega-dropdown-menu .row{display:block;}
  .mega-menu-col{width:100%;padding:0 .35rem;}
  .mega-menu-col:not(:last-child){
    border-right:none;
    border-bottom:1px solid var(--border);
    padding-bottom:.75rem;
    margin-bottom:.75rem;
  }
  .mega-dropdown-menu .dropdown-item{padding:.52rem .4rem;}
  .search-box{display:none;}
}

/* ============ HERO ============ */
.hero{padding:4rem 0 2.5rem;position:relative;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(0px);opacity:.5;z-index:0;}
.blob-1{width:340px;height:340px;background:var(--sun);opacity:.18;top:-120px;right:-80px;}
.blob-2{width:220px;height:220px;background:var(--mint);opacity:.14;bottom:-60px;left:-60px;}
.hero .container{position:relative;z-index:1;}
.hero-eyebrow-pill{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:2px solid var(--border);border-radius:999px;padding:.4rem .9rem;font-size:.78rem;color:var(--ink-soft);font-family:var(--font-mono);margin-bottom:1.2rem;font-weight:600;}
.hero-eyebrow-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);}
.hero h1{font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1.06;margin-bottom:1rem;}
.hero h1 .accent{color:var(--coral);position:relative;}
.hero p.lead-text{color:var(--ink-soft);font-size:1.05rem;max-width:480px;margin-bottom:1.9rem;}

/* Toolbox drawer panel (signature element) */
.panel{background:var(--surface);border:3px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--sun);padding:1.5rem;position:relative;}
html[data-theme="dark"] .panel{box-shadow:8px 8px 0 var(--coral-soft);}
.panel-tabs{display:flex;gap:.4rem;background:var(--surface-2);border-radius:999px;padding:.35rem;margin-bottom:1.1rem;}
.panel-tab{flex:1;text-align:center;padding:.5rem .4rem;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--ink-soft);cursor:pointer;border:0;background:transparent;font-family:var(--font-display);}
.panel-tab.active{background:var(--coral);color:#fff;}
.readout{background:var(--ink);color:var(--sun);font-family:var(--font-mono);font-size:1.6rem;font-weight:600;border-radius:16px;padding:.9rem 1.1rem;text-align:right;margin-bottom:.9rem;min-height:58px;word-break:break-all;}
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;}
.mini-btn{background:var(--surface-2);border:2px solid var(--border);border-radius:14px;padding:.6rem 0;font-family:var(--font-mono);font-weight:700;color:var(--ink);font-size:.95rem;}
.mini-btn:hover{border-color:var(--coral);color:var(--coral);}
.mini-btn.op{background:var(--sun);color:var(--ink);border-color:var(--sun);}
.mini-btn.op:hover{filter:brightness(.95);}
.tool-pane{display:none;}
.tool-pane.active{display:block;}
.field-row label{font-size:.78rem;color:var(--ink-soft);font-weight:700;margin-bottom:.35rem;display:block;}
.field-row select,.field-row input,.field-row textarea{background:var(--surface-2);border:2px solid var(--border);border-radius:14px;padding:.55rem .8rem;font-size:.9rem;color:var(--ink);width:100%;}
.count-badges{display:flex;gap:.6rem;margin-top:.7rem;}
.count-badges .badge-item{flex:1;background:var(--surface-2);border-radius:14px;padding:.6rem;text-align:center;}
.count-badges .num{font-family:var(--font-mono);font-weight:700;font-size:1.15rem;color:var(--coral);}
.count-badges .lbl{font-size:.66rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}

/* ============ AD SLOTS ============ */
.ad-slot{border:2px dashed var(--border);border-radius:18px;color:var(--ink-faint);font-size:.75rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;justify-content:center;padding:1rem;background:var(--surface-2);}

/* ============ CATEGORY RAIL ============ */
.cat-rail{display:flex;gap:.8rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin;height:92px;align-items:stretch;padding-top:10px;}
.cat-chip{flex:0 0 auto;display:flex;align-items:center;gap:.6rem;background:var(--surface);border:2px solid var(--border);border-radius:18px;padding:.75rem 1.1rem;min-width:175px;height:100%;box-sizing:border-box;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;}
.cat-chip:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:var(--shadow);}
.cat-chip .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.05rem;flex:none;color:#fff;}
.cat-chip .lbl{font-weight:700;font-size:.86rem;font-family:var(--font-display);}
.cat-chip .sub{font-size:.7rem;color:var(--ink-faint);}

/* ============ SECTION HEADERS ============ */
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.5rem;}
.section-head h2{font-size:1.6rem;margin:0;}
.section-head .view-all{font-size:.85rem;font-weight:700;color:var(--coral);}

/* ============ TOOL CARDS (sticky-note style) ============ */
.tool-card{background:var(--surface);border:2px solid var(--border);border-top:6px solid var(--coral);border-radius:18px;padding:1.3rem;height:100%;display:flex;flex-direction:column;gap:.6rem;}
.tool-card:nth-child(4n+2){border-top-color:var(--sun);}
.tool-card:nth-child(4n+3){border-top-color:var(--mint);}
.tool-card:nth-child(4n+4){border-top-color:var(--ink-soft);}
.tool-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.tool-card .ic{width:44px;height:44px;border-radius:13px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;color:var(--coral);font-size:1.2rem;}
.tool-card h3{font-size:1.02rem;margin:0;font-family:var(--font-display);font-weight:700;}
.tool-card p{font-size:.83rem;color:var(--ink-soft);margin:0;flex:1;}
.tool-card .go{font-size:.78rem;font-weight:700;color:var(--mint);display:flex;align-items:center;gap:.3rem;}

/* ============ FEATURE BAND ============ */
.feature-item{display:flex;gap:.9rem;align-items:flex-start;}
.feature-item .ic{width:48px;height:48px;border-radius:14px;background:var(--surface-2);color:var(--mint);display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex:none;}
.feature-item h4{font-size:.98rem;margin-bottom:.25rem;font-family:var(--font-display);}
.feature-item p{font-size:.83rem;color:var(--ink-soft);margin:0;}

/* ============ RECENT CHIPS ============ */
.recent-chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:2px solid var(--border);border-radius:999px;padding:.55rem 1.1rem;font-size:.82rem;font-weight:600;margin:.25rem;}
.recent-chip .badge-new{background:var(--mint);color:#fff;font-size:.6rem;font-weight:800;border-radius:999px;padding:.15rem .45rem;text-transform:uppercase;}

/* ============ FAQ ============ */
.accordion-item{background:var(--surface);border:2px solid var(--border)!important;border-radius:16px!important;margin-bottom:.65rem;overflow:hidden;}
.accordion-button{background:var(--surface)!important;color:var(--ink)!important;font-weight:700;font-size:.94rem;font-family:var(--font-display);}
.accordion-button:not(.collapsed){color:var(--coral)!important;box-shadow:none!important;}
.accordion-body{color:var(--ink-soft);font-size:.88rem;}

/* ============ FOOTER ============ */
.site-footer{background:var(--surface);border-top:2px solid var(--border);padding:3rem 0 1.5rem;margin-top:2rem;}
.site-footer h5{font-family:var(--font-display);font-size:1rem;margin-bottom:1rem;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:.55rem;}
.site-footer a{color:var(--ink-soft);font-size:.87rem;}
.site-footer a:hover{color:var(--coral);}
.footer-bottom{border-top:2px solid var(--border);margin-top:2rem;padding-top:1.2rem;font-size:.8rem;color:var(--ink-faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;}

/* ============================================================
   TOOL PAGE — shared building blocks for every individual
   tool page (breadcrumb, header, interface panel, tree view,
   stat chips, path finder, how-to, FAQ reuse, related tools)
   ============================================================ */

.breadcrumb-token{font-size:.82rem;color:var(--ink-faint);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;padding:1.1rem 0 0;}
.breadcrumb-token a{color:var(--ink-soft);font-weight:600;}
.breadcrumb-token a:hover{color:var(--coral);}
.breadcrumb-token .sep{opacity:.6;}
.breadcrumb-token .current{color:var(--ink);font-weight:700;}

.tool-header{padding:1.5rem 0 2rem; position:relative;}
.tool-header .tool-icon{width:52px;height:52px;border-radius:16px;background:var(--coral);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:none;}
.tool-header h1{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 .4rem;}
.tool-header .tool-desc{color:var(--ink-soft);font-size:.98rem;max-width:680px;margin:0;}
.tool-header .badge-token{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface-2);border-radius:999px;padding:.3rem .7rem;font-size:.72rem;font-weight:700;color:var(--mint);margin-right:.4rem;}
.tool-header .d-flex{gap:1.1rem!important;}

html[data-theme="dark"] .tool-header .tool-icon{box-shadow:0 10px 22px rgba(255,110,92,.35);}
html[data-theme="dark"] .tool-header .badge-token{background:var(--surface-2);} 

.tool-interface{background:var(--surface);border:3px solid var(--ink);border-radius:26px;box-shadow:8px 8px 0 var(--sun);padding:1.6rem;}
html[data-theme="dark"] .tool-interface{box-shadow:8px 8px 0 var(--coral-soft);}
.tool-toolbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.tool-btn{background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:.5rem 1rem;font-weight:700;font-size:.83rem;color:var(--ink);display:inline-flex;align-items:center;gap:.4rem;}
.tool-btn:hover{border-color:var(--coral);color:var(--coral);}
.tool-btn.primary{background:var(--coral);border-color:var(--coral);color:#fff;}
.tool-btn.primary:hover{background:var(--coral-soft);border-color:var(--coral-soft);color:#fff;}

.code-area{width:100%;min-height:260px;background:var(--ink);color:#EAF0FF;font-family:var(--font-mono);font-size:.86rem;border-radius:16px;border:0;padding:1rem;resize:vertical;line-height:1.55;}
html[data-theme="dark"]{}
.code-area::placeholder{color:#7A83A8;}
.code-output{background:var(--ink);color:#EAF0FF;font-family:var(--font-mono);font-size:.86rem;border-radius:16px;padding:1rem;line-height:1.6;overflow:auto;max-height:420px;white-space:pre-wrap;word-break:break-word;}
.code-output .tok-key{color:#7FC6FF;}
.code-output .tok-string{color:#8FE3A1;}
.code-output .tok-number{color:var(--sun);}
.code-output .tok-bool{color:#FF9E7A;}
.code-output .tok-null{color:#B9A9FF;}
.code-output .tok-punc{color:#7A83A8;}

.status-line{display:flex;align-items:center;gap:.5rem;font-size:.83rem;font-weight:700;padding:.6rem .9rem;border-radius:12px;margin-bottom:1rem;}
.status-line.ok{background:rgba(31,169,127,.12);color:var(--mint);}
.status-line.err{background:rgba(255,90,69,.12);color:var(--coral);}
.status-line.idle{background:var(--surface-2);color:var(--ink-soft);}

.stat-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1rem;}
.stat-chip{flex:1;min-width:100px;background:var(--surface-2);border-radius:14px;padding:.6rem .8rem;text-align:center;}
.stat-chip .num{font-family:var(--font-mono);font-weight:700;font-size:1.15rem;color:var(--coral);display:block;}
.stat-chip .lbl{font-size:.66rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}

.path-finder{display:flex;gap:.5rem;margin-top:1rem;}
.path-finder input{flex:1;background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:.6rem .9rem;font-family:var(--font-mono);font-size:.85rem;color:var(--ink);}
.path-finder input:focus{outline:none;border-color:var(--coral);}
.path-result{margin-top:.6rem;background:var(--surface-2);border-radius:12px;padding:.7rem .9rem;font-family:var(--font-mono);font-size:.84rem;color:var(--ink);word-break:break-word;}

.json-tree{font-family:var(--font-mono);font-size:.85rem;line-height:1.7;}
.json-tree ul{list-style:none;margin:0;padding-left:1.15rem;border-left:1px dashed var(--border);}
.json-tree details{margin:.1rem 0;}
.json-tree summary{cursor:pointer;color:var(--ink);list-style:none;}
.json-tree summary::-webkit-details-marker{display:none;}
.json-tree summary::before{content:"▸";display:inline-block;width:1rem;color:var(--ink-faint);transition:transform .15s ease;}
.json-tree details[open]>summary::before{transform:rotate(90deg);}
.json-tree .k{color:#B8791E;font-weight:700;}
html[data-theme="dark"] .json-tree .k{color:var(--sun);}
.json-tree .t{color:var(--ink-faint);font-size:.75rem;margin-left:.3rem;}
.json-tree .v-string{color:var(--mint);}
.json-tree .v-number{color:var(--coral);}
.json-tree .v-bool{color:#8E5AE0;}
.json-tree .v-null{color:var(--ink-faint);font-style:italic;}
.json-tree .leaf{padding-left:1.15rem;}

.view-toggle{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:.3rem;gap:.3rem;}
.view-toggle button{border:0;background:transparent;border-radius:999px;padding:.4rem .9rem;font-weight:700;font-size:.8rem;color:var(--ink-soft);font-family:var(--font-display);}
.view-toggle button.active{background:var(--coral);color:#fff;}

.howto-step{display:flex;gap:.8rem;margin-bottom:1.1rem;}
.howto-step .num{width:32px;height:32px;border-radius:10px;background:var(--surface-2);color:var(--coral);font-family:var(--font-display);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;}
.howto-step h4{font-size:.92rem;margin-bottom:.15rem;font-family:var(--font-display);}
.howto-step p{font-size:.85rem;color:var(--ink-soft);margin:0;}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet and below */
@media (max-width:991px){
  .navbar-collapse{overflow:visible!important;}
  .mega-dropdown{position:static;}
  .navbar .mega-dropdown-menu{
    position:fixed;
    top:78px;
    left:0;
    right:0;
    width:100vw;
    max-width:none;
    max-height:calc(100vh - 92px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:0 0 22px 22px;
    transform:none;
    z-index:1040;
    margin:0;
    padding:1rem .9rem;
  }
  .mega-menu-col:not(:last-child){border-right:none;border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:.75rem;}
  .search-box{display:none;}
  .hero{padding:2.75rem 0 2rem;}
  .panel{padding:1.2rem;}
  .tool-interface{padding:1.2rem;box-shadow:6px 6px 0 var(--sun);}
  html[data-theme="dark"] .tool-interface{box-shadow:6px 6px 0 var(--coral-soft);}
}

/* Small tablet / large phone */
@media (max-width:767px){
  body{font-size:15px;}
  .section-head{flex-direction:column;align-items:flex-start;gap:.4rem;}
  .section-head h2{font-size:1.35rem;}
  .cat-chip{min-width:150px;}
  .tool-header{padding:.75rem 0 1.4rem;}
  .tool-header .tool-icon{width:44px;height:44px;font-size:1.15rem;}
  .code-area{min-height:200px;font-size:.82rem;}
  .code-output{max-height:320px;font-size:.82rem;}
  .stat-chip{min-width:84px;}
  .path-finder{flex-direction:column;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* Small phone */
/* ============================================================
   CONFIG FORM ELEMENTS — type grid, color/range fields, presets
   (shared building blocks for generator-style tools)
   ============================================================ */

.type-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;}
.type-btn{background:var(--surface-2);border:2px solid var(--border);border-radius:14px;padding:.7rem .4rem;text-align:center;font-size:.78rem;font-weight:700;color:var(--ink-soft);}
.type-btn .emoji{display:block;font-size:1.3rem;margin-bottom:.25rem;}
.type-btn:hover{border-color:var(--coral);}
.type-btn.active{background:var(--coral);border-color:var(--coral);color:#fff;}

.config-block{margin-top:1.3rem;}
.config-block > label.block-label{font-weight:700;font-size:.85rem;color:var(--ink-soft);display:block;margin-bottom:.5rem;}

.color-field{display:flex;align-items:center;gap:.6rem;background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:.5rem .7rem;}
.color-field input[type="color"]{width:34px;height:34px;border:2px solid var(--border);border-radius:8px;padding:0;background:none;flex:none;}
.color-field input[type="text"]{flex:1;background:transparent;border:0;outline:0;font-family:var(--font-mono);font-size:.85rem;color:var(--ink);}

.range-field{background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:.7rem .9rem;}
.range-field .range-head{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--ink-soft);margin-bottom:.4rem;}
.range-field .range-head .val{color:var(--coral);font-family:var(--font-mono);}
.range-field input[type="range"]{width:100%;accent-color:var(--coral);}
.range-field .range-minmax{display:flex;justify-content:space-between;font-size:.68rem;color:var(--ink-faint);margin-top:.2rem;}

.preset-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;}
.preset-swatch{width:34px;height:34px;border-radius:10px;border:2px solid var(--border);position:relative;overflow:hidden;}
.preset-swatch:hover{border-color:var(--ink);transform:translateY(-2px);}
.preset-swatch .half{position:absolute;top:0;bottom:0;width:50%;}
.preset-swatch .half.l{left:0;}
.preset-swatch .half.r{right:0;}

/* ============================================================
   QR PREVIEW & RECENT LIST
   ============================================================ */

.qr-preview-box{background:var(--surface-2);border:2px dashed var(--border);border-radius:18px;min-height:280px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1.5rem;gap:.4rem;}
.qr-preview-box canvas{max-width:100%;border-radius:8px;}
.qr-preview-box .ph-icon{font-size:2.4rem;opacity:.5;}
.qr-preview-box .ph-text{color:var(--ink-soft);font-weight:600;font-size:.9rem;}
.qr-preview-box .ph-sub{color:var(--ink-faint);font-size:.78rem;}

.recent-row{display:flex;gap:.6rem;overflow-x:auto;padding-top:.8rem;}
.recent-thumb{flex:0 0 auto;width:64px;height:64px;border-radius:10px;border:2px solid var(--border);background:#fff;padding:4px;cursor:pointer;}
.recent-thumb img{width:100%;height:100%;object-fit:contain;}
.recent-thumb:hover{border-color:var(--coral);}

/* ============================================================
   USE-CASE CARDS & GUIDE CONTENT
   ============================================================ */

.usecase-card{background:var(--surface);border:2px solid var(--border);border-radius:18px;padding:1.2rem;height:100%;}
.usecase-card .ic{width:46px;height:46px;border-radius:13px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.7rem;}
.usecase-card h3{font-size:.98rem;margin:0 0 .3rem;font-family:var(--font-display);}
.usecase-card p{font-size:.83rem;color:var(--ink-soft);margin:0;}

.guide-block{margin-bottom:2.2rem;}
.guide-block h3{font-size:1.2rem;margin-bottom:.7rem;}
.guide-block p{color:var(--ink-soft);font-size:.92rem;line-height:1.65;}

.table-token{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;}
.table-token th{background:var(--surface-2);color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;padding:.7rem .9rem;text-align:left;}
.table-token td{padding:.7rem .9rem;border-top:1px solid var(--border);color:var(--ink);}
.table-token td code{font-family:var(--font-mono);font-size:.8rem;color:var(--coral);background:var(--surface-2);padding:.1rem .4rem;border-radius:5px;}
.table-token tr:first-child td{border-top:none;}
.table-wrap{background:var(--surface);border:2px solid var(--border);border-radius:16px;overflow:hidden;}

.tip-list{list-style:none;padding:0;margin:0;}
.tip-list li{display:flex;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--border);font-size:.88rem;color:var(--ink-soft);}
.tip-list li:last-child{border-bottom:none;}
.tip-list li .bi{color:var(--coral);flex:none;margin-top:.15rem;}
.tip-list li strong{color:var(--ink);}

.format-list{list-style:none;padding:0;margin:0;}
.format-list li{padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.88rem;color:var(--ink-soft);}
.format-list li:last-child{border-bottom:none;}
.format-list li strong{color:var(--ink);font-family:var(--font-mono);}

/* ============================================================
   PASSWORD GENERATOR — strength meter, char chips, history,
   comparison cards, strength scale (reusable for security tools)
   ============================================================ */

.pw-readout{background:var(--ink);border-radius:16px;padding:1rem 1.1rem;display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;}
.pw-readout .pw-text{flex:1;font-family:var(--font-mono);font-size:1.25rem;font-weight:600;color:#EAF0FF;word-break:break-all;line-height:1.3;}
.pw-readout button{background:var(--surface-2);border:0;border-radius:10px;width:38px;height:38px;flex:none;color:var(--ink);display:flex;align-items:center;justify-content:center;}
.pw-readout button:hover{color:var(--coral);}

.strength-meter{margin-bottom:1rem;}
.strength-bar-track{height:8px;background:var(--surface-2);border-radius:999px;overflow:hidden;display:flex;gap:2px;}
.strength-bar-track .seg{flex:1;border-radius:999px;background:var(--border);}
.strength-bar-track .seg.on{background:var(--seg-color, var(--coral));}
.strength-label-row{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;font-size:.85rem;}
.strength-label-row .lbl{font-weight:800;font-family:var(--font-display);}
.strength-label-row .sub{color:var(--ink-faint);font-size:.78rem;}

.char-chip{display:flex;align-items:center;justify-content:space-between;background:var(--surface-2);border:2px solid var(--border);border-radius:12px;padding:.55rem .8rem;font-size:.85rem;font-weight:600;cursor:pointer;}
.char-chip.active{border-color:var(--coral);}
.char-chip .cc-left{display:flex;align-items:center;gap:.55rem;}
.char-chip .cc-count{color:var(--ink-faint);font-family:var(--font-mono);font-size:.72rem;}
.char-chip input{accent-color:var(--coral);width:16px;height:16px;}

.adv-details summary{cursor:pointer;font-weight:700;font-size:.85rem;color:var(--ink-soft);list-style:none;display:flex;align-items:center;gap:.4rem;padding:.3rem 0;}
.adv-details summary::-webkit-details-marker{display:none;}
.adv-details summary::before{content:"▸";display:inline-block;transition:transform .15s ease;color:var(--ink-faint);}
.adv-details[open] summary::before{transform:rotate(90deg);}
.adv-option{display:flex;align-items:center;gap:.55rem;padding:.5rem 0;font-size:.85rem;color:var(--ink-soft);}
.adv-option input{accent-color:var(--coral);width:16px;height:16px;}

.history-list{display:flex;flex-direction:column;gap:.5rem;max-height:220px;overflow-y:auto;}
.history-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;background:var(--surface-2);border-radius:10px;padding:.5rem .7rem;}
.history-item .h-pw{font-family:var(--font-mono);font-size:.8rem;color:var(--ink);word-break:break-all;}
.history-item .h-time{font-size:.68rem;color:var(--ink-faint);white-space:nowrap;flex:none;}

.compare-card{background:var(--surface);border:2px solid var(--border);border-radius:18px;padding:1.3rem;height:100%;}
.compare-card .cc-example{font-family:var(--font-mono);background:var(--ink);color:var(--sun);padding:.6rem .8rem;border-radius:10px;font-size:.9rem;margin-bottom:.9rem;word-break:break-all;}
.compare-card ul{list-style:none;padding:0;margin:0 0 .9rem;}
.compare-card ul li{font-size:.85rem;padding:.35rem 0;color:var(--ink-soft);display:flex;gap:.5rem;}
.compare-card .best-for{font-size:.78rem;font-weight:700;color:var(--mint);}
.vs-divider{display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:800;color:var(--ink-faint);font-size:.9rem;}

.scale-item{display:flex;gap:.9rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--border);}
.scale-item:last-child{border-bottom:none;}
.scale-item .dot{width:12px;height:12px;border-radius:50%;margin-top:.3rem;flex:none;}
.scale-item h4{font-size:.92rem;margin:0 0 .15rem;font-family:var(--font-display);}
.scale-item .range{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-faint);margin-left:.4rem;}
.scale-item p{margin:0;font-size:.83rem;color:var(--ink-soft);}
.scale-item .ex{font-size:.76rem;color:var(--ink-faint);font-family:var(--font-mono);margin-top:.15rem;}

.avoid-card{background:var(--surface);border:2px solid var(--border);border-radius:16px;padding:1.1rem;height:100%;}
.avoid-card h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:.7rem;}
.avoid-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem;}
.avoid-list li{background:rgba(255,90,69,.1);color:var(--coral);font-family:var(--font-mono);font-size:.78rem;padding:.3rem .6rem;border-radius:8px;}

@media (max-width:575px){
  .site-header .container{padding-left:12px;padding-right:12px;}
  .navbar .mega-dropdown-menu{width:calc(100vw - 18px);left:0;right:0;}
  .mega-menu-col{padding:0 .25rem;}
  .hero-eyebrow-pill{font-size:.7rem;}
  .btn-coral,.btn-outline-token{padding:.6rem 1.1rem;font-size:.9rem;width:100%;text-align:center;}
  .hero .d-flex.gap-2{flex-direction:column;}
  .panel{border-radius:20px;box-shadow:5px 5px 0 var(--sun);}
  html[data-theme="dark"] .panel{box-shadow:5px 5px 0 var(--coral-soft);}
  .mini-grid{gap:.35rem;}
  .mini-btn{font-size:.85rem;padding:.5rem 0;}
  .readout{font-size:1.3rem;padding:.75rem .85rem;min-height:50px;}
  .tool-interface{border-radius:18px;padding:1rem;}
  .tool-btn{flex:1 1 auto;justify-content:center;font-size:.78rem;padding:.5rem .7rem;}
  .breadcrumb-token{font-size:.76rem;}
  .stat-row{gap:.4rem;}
  .stat-chip{min-width:72px;padding:.5rem .5rem;}
  .stat-chip .num{font-size:1rem;}
  .view-toggle{width:100%;}
  .view-toggle button{flex:1;}
  .site-footer{padding:2.2rem 0 1.2rem;}
  .type-grid{grid-template-columns:repeat(3,1fr);}
  .pw-readout .pw-text{font-size:1rem;}
}


.site-header .container{position:relative}.navbar .dropdown.mega-dropdown{position:relative}.navbar .mega-dropdown-menu{position:absolute;width:min(920px,70vw);left:0;right:auto;transform:none;padding:1.5rem;margin-top:.5rem;border-radius:24px;box-shadow:0 18px 40px rgba(27,35,64,.12);background:rgba(255,255,255,.97);border:1px solid rgba(222,227,242,.95)}.mega-menu-col{padding:0 .75rem}.mega-menu-col:not(:last-child){border-right:1px solid var(--border)}.mega-dropdown-menu .dropdown-header{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;padding-left:.5rem;padding-right:.5rem;color:var(--coral)!important}.mega-dropdown-menu .dropdown-item{padding:.35rem .5rem;border-radius:12px;font-size:.875rem;color:var(--ink-soft)}.mega-dropdown-menu .dropdown-item:hover{background:rgba(255,90,69,.07);color:var(--coral)}.mega-dropdown-menu .dropdown-divider{border-top-color:var(--border)}@media (max-width:991px){.navbar .dropdown.mega-dropdown{position:static}.navbar .mega-dropdown-menu{position:static!important;width:100%!important;left:0!important;right:0!important;transform:none!important;max-width:none;padding:.75rem .5rem!important;border-radius:18px!important;margin-top:.5rem}.navbar .mega-dropdown-menu .row{display:block}.mega-menu-col{width:100%;padding:0 .25rem}.mega-menu-col:not(:last-child){border-right:none;border-bottom:1px solid var(--border);padding-bottom:.75rem;margin-bottom:.75rem}.mega-dropdown-menu .dropdown-item{padding:.5rem .4rem}}[data-theme="dark"] .mega-dropdown-menu{background:rgba(27,33,64,.98);border-color:var(--border);box-shadow:0 18px 40px rgba(0,0,0,.28)}[data-theme="dark"] .mega-menu-col:not(:last-child){border-right-color:var(--border)}[data-theme="dark"] .mega-dropdown-menu .dropdown-item{color:#ced4da}[data-theme="dark"] .mega-dropdown-menu .dropdown-item:hover{background:rgba(255,90,69,.08);color:#fff}[data-theme="dark"] .mega-dropdown-menu .dropdown-divider{border-top-color:var(--border)}
.faq-section .accordion { border:none !important; box-shadow:none !important; }