/* TOOLBOX v2.0 — SEO + AdSense Ready */
:root {
  --bg: #f8f7fc; --bg-white: #fbfaff; --bg-panel: #f5f3fc; --bg-hover: #eeeafc; --bg-sidebar: #fbfaff;
  --purple: #6d3bef; --purple-dark: #5527cc; --purple-light: #ede8fd; --purple-wash: #f5f3ff;
  --purple-dim: #6d3bef55; --purple-border: #e3ddfa;
  --text: #1e1b2e; --text-secondary: #4a4560; --text-muted: #6e6a82; --text-faint: #9995ad;
  --border: #eae7f2; --border-hover: #d4cef0;
  --red: #e5484d; --red-bg: #fff0f0; --green: #30a46c; --green-bg: #e9f9f1;
  --shadow-sm: 0 1px 3px rgba(109,59,239,0.04); --shadow-md: 0 4px 16px rgba(109,59,239,0.06);
  --shadow-lg: 0 8px 32px rgba(109,59,239,0.08);
  --shadow-card: 0 1px 4px rgba(109,59,239,0.04), 0 4px 16px rgba(109,59,239,0.03);
  --radius: 14px; --radius-sm: 10px; --sidebar-w: 272px; --topbar-h: 58px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'General Sans','Sora',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
::selection{background:var(--purple);color:#fff}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--purple-border);border-radius:4px}
a{color:var(--purple);text-decoration:none}a:hover{text-decoration:underline}

/* CATEGORY FILTER PILLS */
.cat-pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:0 20px 28px;max-width:900px;margin:0 auto}
.cat-pill{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;border:1.5px solid var(--border);background:var(--bg-white);color:var(--text-secondary);font-family:'General Sans',sans-serif;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;user-select:none}
.cat-pill:hover{border-color:var(--purple-border);color:var(--purple);background:var(--purple-wash);transform:translateY(-1px);box-shadow:0 4px 12px rgba(109,59,239,.08)}
.cat-pill.active{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 4px 16px rgba(109,59,239,.25);transform:translateY(-1px)}
.cat-pill.active:hover{background:var(--purple-dark);border-color:var(--purple-dark)}
.cat-pill.active .pill-count{background:rgba(255,255,255,.25);color:#fff}
.pill-count{font-size:11px;font-weight:700;background:var(--purple-light);color:var(--purple);padding:2px 8px;border-radius:20px;min-width:22px;text-align:center;transition:all .2s}
@keyframes catFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.cat-pills{gap:6px;padding:0 12px 20px}.cat-pill{padding:7px 13px;font-size:12px}.pill-count{font-size:10px;padding:1px 6px}}

/* APP SHELL */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--bg-sidebar);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:100;transition:transform .3s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sidebar-header{padding:22px 24px 18px;border-bottom:1px solid var(--border)}
.sidebar-logo{font-family:'Sora',sans-serif;font-size:21px;font-weight:800;color:var(--text);letter-spacing:-.5px;display:flex;align-items:center;gap:10px;text-decoration:none;cursor:pointer}
.sidebar-logo:hover{text-decoration:none}
.sidebar-logo .logo-hex{flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(124,58,237,.3))}
.sidebar-logo .logo-text{font-family:'Sora',sans-serif;font-size:19px;font-weight:700;color:var(--text);letter-spacing:-.3px}
.sidebar-logo .logo-accent{background:linear-gradient(135deg,#7c3aed,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-tagline{font-size:11px;color:var(--text-muted);margin-top:4px;padding-left:42px}
.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;margin:12px 10px 2px;cursor:pointer;border-radius:9px;transition:all .2s;background:var(--purple-wash);border:1.5px solid var(--purple-border);user-select:none}
.accordion-header:hover{background:var(--purple-light)}
.accordion-header:active{transform:scale(.98)}
.accordion-header .acc-left{display:flex;align-items:center;gap:10px}
.accordion-header .acc-icon{width:28px;height:28px;border-radius:7px;background:var(--purple);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(109,59,239,.2)}
.accordion-header .acc-label{font-size:13px;font-weight:600;color:var(--purple)}
.accordion-header .acc-right{display:flex;align-items:center;gap:6px}
.accordion-header .acc-count{font-size:11px;color:#fff;background:var(--purple);padding:2px 10px;border-radius:10px;font-weight:700;border:none;font-family:'Sora',sans-serif;letter-spacing:0.5px}
.accordion-header .acc-chevron{font-size:14px;color:var(--purple-dim);transition:transform .35s cubic-bezier(.4,0,.2,1);line-height:1}
.accordion-header.collapsed .acc-chevron{transform:rotate(-90deg)}
.accordion-body{overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1),opacity .25s ease;opacity:1}
.accordion-body.collapsed{max-height:0 !important;opacity:0;pointer-events:none}
.sidebar-nav{flex:1;overflow-y:auto;padding:4px 0 20px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:all .2s;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--text-secondary);text-decoration:none;margin-bottom:2px}
.nav-item:hover{background:var(--purple-wash);color:var(--purple);text-decoration:none}
.nav-item.active{background:var(--purple-light);color:var(--purple);font-weight:600}
.nav-item .nav-icon{width:28px;height:28px;border-radius:7px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--text-muted);flex-shrink:0;transition:all .2s}
.nav-item.active .nav-icon{background:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(109,59,239,.2)}
.nav-item:hover .nav-icon{background:var(--purple-light);color:var(--purple)}
.nav-item.active:hover .nav-icon{background:var(--purple);color:#fff}
.sidebar-footer{padding:14px 24px;border-top:1px solid var(--border);font-size:11px;color:var(--text-faint)}
.sidebar-mobile-nav{display:none;border-bottom:1px solid var(--border);padding-bottom:4px;margin-bottom:4px}
.main{margin-left:var(--sidebar-w);flex:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{height:var(--topbar-h);background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 28px;gap:12px;position:sticky;top:0;z-index:50}
.hamburger{display:none;background:none;border:1px solid var(--border);color:var(--text);font-size:18px;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .2s}
.hamburger:hover{background:var(--purple-wash);border-color:var(--purple-border)}
.topbar-crumb{font-size:13px;color:var(--text-secondary);font-weight:600}.topbar-crumb span{background:linear-gradient(135deg,#7c3aed,#ec4899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.topbar-title{font-family:'Sora',sans-serif;font-size:14px;font-weight:600;color:var(--text)}
.topbar-nav{display:flex;align-items:center;gap:4px}
.topbar-nav a{font-size:13px;font-weight:500;color:var(--text-secondary);text-decoration:none;padding:7px 14px;border-radius:8px;transition:all .2s}
.topbar-nav a:hover{color:var(--purple);background:var(--purple-wash);text-decoration:none}
.topbar-nav a.active{color:var(--purple);font-weight:600;background:var(--purple-light)}

/* ALL TOOLS — Category Section */
.category-section{margin-bottom:40px}
.category-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.category-icon{width:44px;height:44px;border-radius:12px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--purple);flex-shrink:0}
.category-header h2{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--text)}
.category-header .cat-count{font-size:11px;color:var(--purple);background:var(--purple-light);padding:3px 10px;border-radius:12px;font-weight:600;margin-left:8px}
.category-header p{font-size:13px;color:var(--text-secondary);margin-top:2px}

/* Contact Section */
.contact-section{margin-top:40px;padding-top:32px;border-top:1px solid var(--border)}
.contact-card{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius);padding:36px;max-width:600px;box-shadow:var(--shadow-sm)}
.contact-card h2{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:var(--text);margin-bottom:8px}
.contact-card p{font-size:14px;color:var(--text-muted);line-height:1.7;margin-bottom:20px}
.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form input,.contact-form textarea{padding:12px 16px;border:1.5px solid var(--border);border-radius:9px;font-family:'General Sans',sans-serif;font-size:14px;color:var(--text);background:var(--bg);outline:none;transition:border-color .2s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--purple)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form button{align-self:flex-start}
.breadcrumbs{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);margin-bottom:20px}
.breadcrumbs a{color:var(--purple-dim);text-decoration:none;font-weight:500}.breadcrumbs a:hover{color:var(--purple);text-decoration:underline}
.breadcrumbs .sep{color:var(--text-muted)}.breadcrumbs .current{color:var(--text-secondary);font-weight:600}
.tool-area{flex:1;padding:28px;max-width:1200px;width:100%;margin:0 auto}
.tool-header{margin-bottom:24px;display:flex;align-items:center;gap:16px}
.tool-icon-wrap{width:50px;height:50px;border-radius:13px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--purple);flex-shrink:0}
h1.tool-title,.tool-title{font-family:'Sora',sans-serif;font-size:20px;font-weight:700;color:var(--text);margin-bottom:3px;letter-spacing:-.3px}
.tool-desc{font-size:13.5px;color:var(--text-secondary);line-height:1.5}

/* AD SLOTS — invisible reserved space; replace inner content with AdSense <ins> when ready */
.ad-slot{border-radius:var(--radius-sm);overflow:hidden;min-height:0;font-size:0;color:transparent}
.ad-slot-top{margin-bottom:24px}
.ad-slot-mid{margin:32px 0}
.ad-slot-bottom{margin-top:32px}
/* When ads go live, add: .ad-slot{min-height:90px} .ad-slot-mid{min-height:250px} */

/* TOOL COMPONENTS */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s}
.panel:focus-within{box-shadow:var(--shadow-md);border-color:var(--purple)}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 18px;border-bottom:1.5px solid var(--border);background:var(--bg-panel)}
.panel-body{padding:18px}
.panel-label{font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:600}
.panel-body textarea{width:calc(100% + 36px);height:1020px;background:transparent;border:none;color:var(--text);font-family:'DM Mono',monospace;font-size:13px;line-height:1.75;padding:16px 18px;resize:none;outline:none;margin:-18px;box-sizing:border-box}
.panel-body textarea::placeholder{color:var(--text-faint)}
.panel-body input[type="text"],.panel-body input[type="number"],.panel-body input[type="url"],
.panel-body input[type="password"],.panel-body input[type="date"],.panel-body input[type="datetime-local"]{
  width:100%;background:var(--bg-white);border:1.5px solid var(--border);border-radius:10px;
  color:var(--text);font-family:'General Sans',sans-serif;font-size:14px;
  padding:10px 14px;outline:none;transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 2px rgba(0,0,0,.04);box-sizing:border-box
}
.panel-body input[type="text"]:focus,.panel-body input[type="number"]:focus,.panel-body input[type="url"]:focus,
.panel-body input[type="password"]:focus,.panel-body input[type="date"]:focus,.panel-body input[type="datetime-local"]:focus{
  border-color:var(--purple);box-shadow:0 0 0 3.5px rgba(109,59,239,.1)
}
.panel-body input::placeholder{color:var(--text-faint)}
.panel-body pre{width:calc(100% + 36px);height:340px;overflow:auto;padding:16px 18px;font-family:'DM Mono',monospace;font-size:13px;line-height:1.75;white-space:pre-wrap;word-wrap:break-word;color:var(--text);margin:-18px;background:transparent;box-sizing:border-box}
.action-bar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.btn{padding:9px 20px;border:none;border-radius:9px;font-family:'General Sans',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:6px}
.btn-primary{background:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(109,59,239,.2)}
.btn-primary:hover{background:var(--purple-dark);box-shadow:0 4px 16px rgba(109,59,239,.3);transform:translateY(-1px)}
.btn-secondary{background:var(--bg-white);color:var(--text-secondary);border:1.5px solid var(--border)}
.btn-secondary:hover{border-color:var(--purple-border);color:var(--purple);background:var(--purple-wash)}
.btn-ghost{background:transparent;color:var(--text-muted);padding:9px 14px}
.btn-ghost:hover{color:var(--purple);background:var(--purple-wash)}
.copy-btn{background:var(--purple-light);color:var(--purple);border:1px solid transparent;border-radius:7px;
  padding:5px 12px;font-family:'General Sans',sans-serif;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;gap:4px;letter-spacing:.3px}
.copy-btn:hover{background:var(--purple);color:#fff;box-shadow:0 2px 8px rgba(109,59,239,.2);transform:translateY(-1px)}
.indent-select{background:var(--bg-white);border:1.5px solid var(--border);color:var(--text);font-family:'General Sans',sans-serif;font-size:12px;padding:8px 32px 8px 12px;border-radius:10px;outline:none;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}
.indent-select:focus{border-color:var(--purple);box-shadow:0 0 0 3.5px rgba(109,59,239,.1)}

/* FORM ELEMENTS — inputs, selects, labels */
.form-input,.cc-input{
  width:100%;background:var(--bg-white);border:1.5px solid var(--border);border-radius:10px;
  color:var(--text);font-family:'General Sans',sans-serif;font-size:14px;
  padding:11px 14px;outline:none;transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 2px rgba(0,0,0,.04)
}
.form-input:hover,.cc-input:hover{border-color:var(--purple-border);box-shadow:0 2px 6px rgba(109,59,239,.06)}
.form-input:focus,.cc-input:focus{border-color:var(--purple);box-shadow:0 0 0 3.5px rgba(109,59,239,.1);background:var(--bg-white)}
.form-input::placeholder,.cc-input::placeholder{color:var(--text-faint);font-weight:400}
.cc-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700;color:var(--purple);margin-bottom:8px;margin-top:2px;font-family:'General Sans',sans-serif;padding-left:2px}

/* SELECT — custom styled dropdowns */
select.form-input,select.cc-input,
select.indent-select,select.conv-select,
.action-bar select,.panel-body select,.panel select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236d3bef' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  padding-right:40px;cursor:pointer;
  font-family:'General Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--text);
  background-color:var(--bg-white);
  border:1.5px solid var(--border);border-radius:10px;
  padding:11px 40px 11px 14px;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  box-shadow:0 1px 3px rgba(0,0,0,.04);
  line-height:1.4
}
select.form-input:hover,select.cc-input:hover,
select.indent-select:hover,select.conv-select:hover,
.action-bar select:hover,.panel-body select:hover,.panel select:hover{
  border-color:var(--purple);box-shadow:0 2px 10px rgba(109,59,239,.1);
  background-color:var(--purple-wash)
}
select.form-input:focus,select.cc-input:focus,
select.indent-select:focus,select.conv-select:focus,
.action-bar select:focus,.panel-body select:focus,.panel select:focus{
  border-color:var(--purple);box-shadow:0 0 0 3.5px rgba(109,59,239,.12);
  background-color:var(--bg-white);outline:none
}
select option{
  background:var(--bg-white);color:var(--text);padding:10px 14px;font-family:'General Sans',sans-serif;font-size:13px;line-height:1.6
}
select option:checked{background:var(--purple);color:#fff}
select option:hover{background:var(--purple-wash)}
/* Select empty/placeholder state */
select.form-input:invalid,select:required:invalid{color:var(--text-faint)}
select.form-input option[value=""]{color:var(--text-faint)}

/* Converter arrow */
.cc-arrow{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--purple-light);color:var(--purple);font-size:18px;cursor:pointer;font-weight:700;
  transition:all .25s cubic-bezier(.4,0,.2,1);border:1.5px solid transparent;flex-shrink:0}
.cc-arrow:hover{background:var(--purple);color:#fff;transform:rotate(180deg);box-shadow:0 4px 14px rgba(109,59,239,.25)}

/* Hint / info box */
.cc-hint{display:flex;align-items:flex-start;gap:8px;background:var(--purple-wash);
  border:1px solid var(--purple-border);border-radius:10px;padding:12px 16px;
  font-size:12px;color:var(--text-secondary);line-height:1.5}
.cc-hint-icon{flex-shrink:0;font-size:14px}

/* Range inputs */
input[type="range"]{accent-color:var(--purple);height:6px;cursor:pointer}

/* Checkbox / radio enhancements */
input[type="checkbox"],input[type="radio"]{
  accent-color:var(--purple);width:16px;height:16px;cursor:pointer;
  transition:all .15s ease
}

/* Date / datetime inputs */
input[type="date"],input[type="datetime-local"],input[type="time"]{
  font-family:'General Sans',sans-serif;color:var(--text)
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.6;transition:opacity .2s
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover{opacity:1}
.status-bar{margin-top:12px;font-size:12px;min-height:22px;display:flex;align-items:center;gap:8px;font-weight:500}
.status-bar .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-bar.success .dot{background:var(--green)}.status-bar.error .dot{background:var(--red)}
.status-bar.success{color:var(--green)}.status-bar.error{color:var(--red)}
.validate-card{border-radius:var(--radius);padding:20px;display:flex;align-items:center;gap:14px;margin-top:16px}
.validate-card .v-icon{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.validate-card.valid{background:var(--green-bg);border:1px solid #b4dfcc}
.validate-card.valid .v-icon{background:#d1f5e0;color:var(--green)}.validate-card.valid .v-title{color:var(--green);font-weight:600;font-size:15px;margin-bottom:3px}.validate-card.valid .v-detail{color:#5aa882;font-size:12px}
.validate-card.invalid{background:var(--red-bg);border:1px solid #f5c5c5}
.validate-card.invalid .v-icon{background:#fddede;color:var(--red)}.validate-card.invalid .v-title{color:var(--red);font-weight:600;font-size:15px;margin-bottom:3px}.validate-card.invalid .v-detail{color:#c47070;font-size:12px;font-family:'DM Mono',monospace;line-height:1.6}

/* INFO / FAQ / RELATED */
.info-section{margin-top:40px;padding-top:32px;border-top:1px solid var(--border)}
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.info-card{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow-sm)}
.info-card .info-badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:700;color:var(--purple);background:var(--purple-light);padding:5px 12px;border-radius:6px;margin-bottom:16px}
.info-card h4{font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--text);margin-bottom:12px;margin-top:0}
.info-card p,.info-card li{font-size:13px;color:var(--text-secondary);line-height:1.8}
.info-card p{margin:0;padding:6px 0}
.info-card ul{list-style:none;padding:0;margin:0}.info-card ul li{padding:6px 0 6px 18px;position:relative}
.info-card ul li::before{content:'';position:absolute;left:0;top:13px;width:6px;height:6px;border-radius:50%;background:var(--purple-border)}
.faq-section{margin-top:36px}.faq-section h2{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:16px}
.faq-item{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);margin-bottom:8px;overflow:hidden;transition:border-color .2s}
.faq-item:hover{border-color:var(--purple-border)}
.faq-q{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;cursor:pointer;font-size:14px;font-weight:600;color:var(--text);transition:background .2s}
.faq-q:hover{background:var(--purple-wash)}
.faq-q .faq-chevron{font-size:14px;color:var(--purple-dim);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-q .faq-chevron{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s cubic-bezier(.4,0,.2,1),padding .3s ease;padding:0 20px;font-size:13px;color:var(--text-secondary);line-height:1.7}
.faq-item.open .faq-a{max-height:500px;padding:0 20px 16px}
.related-section{margin-top:36px}.related-section h2{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:16px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.related-card{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:18px;text-decoration:none;display:flex;align-items:center;gap:12px;transition:all .2s;color:var(--text)}
.related-card:hover{border-color:var(--purple-border);box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.related-card .rc-icon{width:36px;height:36px;border-radius:8px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--purple);flex-shrink:0}
.related-card .rc-name{font-size:13px;font-weight:600}.related-card .rc-desc{font-size:11px;color:var(--text-secondary);margin-top:2px}

/* HOME */
.home-hero{padding:12px 0 40px;display:flex;align-items:center;gap:20px}
.hero-left{flex:1;min-width:0}
.hero-right{flex:1;min-width:0;height:300px;position:relative;overflow:hidden}
.hero-scene{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease,transform 1.8s ease;transform:scale(.97);pointer-events:none}
.hero-scene.active{opacity:1;transform:scale(1);pointer-events:auto}
/* Transition variants applied via JS */
.hero-scene.t-slide-up{transform:translateY(30px);opacity:0}.hero-scene.t-slide-up.active{transform:translateY(0);opacity:1}
.hero-scene.t-slide-right{transform:translateX(-30px);opacity:0}.hero-scene.t-slide-right.active{transform:translateX(0);opacity:1}
.hero-scene.t-zoom{transform:scale(1.08);opacity:0}.hero-scene.t-zoom.active{transform:scale(1);opacity:1}
.hero-scene.t-blur{filter:blur(8px);opacity:0}.hero-scene.t-blur.active{filter:blur(0);opacity:1}
@media(max-width:768px){.home-hero{flex-direction:column}.hero-right{width:100%;height:240px}}
.home-badge{display:inline-flex;align-items:center;gap:8px;background:var(--purple-light);color:var(--purple);font-size:12px;font-weight:600;padding:7px 16px;border-radius:20px;margin-bottom:20px}
.home-badge .pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--purple);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.home-title{font-family:'Sora',sans-serif;font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.15;margin-bottom:14px;color:var(--text);letter-spacing:-.5px}
.home-title em{font-style:normal;color:var(--purple)}
.home-subtitle{font-size:15px;color:var(--text-secondary);max-width:500px;line-height:1.7}
/* === Hero Scene 1: Category Carousel === */
.hs-track{display:flex;gap:14px;padding:20px;position:absolute;top:50%;transform:translateY(-50%);animation:hsScroll 24s linear infinite}
@keyframes hsScroll{0%{transform:translateY(-50%) translateX(0)}100%{transform:translateY(-50%) translateX(-50%)}}
.hs-card{width:130px;height:170px;border-radius:14px;flex-shrink:0;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
.hs-card::before{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);z-index:1}
.hs-icon{font-size:32px;position:absolute;top:14px;left:14px;z-index:2;filter:drop-shadow(0 2px 6px rgba(0,0,0,.25))}
.hs-name{position:relative;z-index:2;font-family:'Sora',sans-serif;font-size:12px;font-weight:700;color:#fff}
.hs-count{position:relative;z-index:2;font-size:10px;color:rgba(255,255,255,.7)}
/* === Hero Scene 2: Floating Icons === */
.hs-float-wrap{position:relative;width:100%;height:100%;background:radial-gradient(circle at 50% 50%,rgba(124,58,237,.05),transparent 70%)}
.hs-float{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:20px;background:rgba(124,58,237,.06);border:none;backdrop-filter:blur(2px);animation:hsFloatY 6s ease-in-out infinite}
@keyframes hsFloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
/* === Hero Scene 3: Code Editor === */
.hs-editor{margin:16px;border-radius:10px;overflow:hidden;height:calc(100% - 32px)}
.hs-editor-bar{display:flex;align-items:center;gap:5px;padding:8px 12px;background:rgba(0,0,0,.15);border-bottom:1px solid rgba(0,0,0,.08)}
.hs-dot{width:9px;height:9px;border-radius:50%}
.hs-editor-title{margin-left:10px;font-size:10px;color:var(--text-muted);font-family:'DM Mono',monospace}
.hs-code{padding:14px;font-family:'DM Mono',monospace;font-size:11px;line-height:1.8;color:var(--text-secondary)}
.hc-kw{color:#a78bfa}.hc-str{color:#34d399}.hc-num{color:#fbbf24}.hc-fn{color:#60a5fa}.hc-cm{color:#6b7280}
.hc-cursor{display:inline-block;width:2px;height:14px;background:#7c3aed;vertical-align:middle;animation:hcBlink 1s step-end infinite}
@keyframes hcBlink{0%,100%{opacity:1}50%{opacity:0}}
/* === Hero Scene 4: Gradient Orbs === */
.hs-orbs{position:relative;width:100%;height:100%;overflow:hidden}
.hs-orb{position:absolute;border-radius:50%;filter:blur(50px);opacity:.35;animation:hsOrbMove 8s ease-in-out infinite}
@keyframes hsOrbMove{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(25px,-18px) scale(1.08)}50%{transform:translate(-18px,25px) scale(.92)}75%{transform:translate(18px,10px) scale(1.04)}}
.hs-orb-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:2}
.hs-orb-num{font-family:'Sora',sans-serif;font-size:64px;font-weight:900;background:linear-gradient(135deg,var(--text),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hs-orb-label{font-size:13px;color:var(--text-secondary);letter-spacing:2px;text-transform:uppercase}
/* === Hero Scene 5: Isometric Grid === */
.hs-iso-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hs-iso-grid{display:grid;grid-template-columns:repeat(4,68px);grid-template-rows:repeat(3,68px);gap:7px;transform:perspective(700px) rotateX(22deg) rotateZ(-12deg)}
.hs-iso-cell{background:rgba(124,58,237,.06);border:1px solid rgba(124,58,237,.12);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;animation:hsIsoPulse 3s ease-in-out infinite;transition:all .3s}
.hs-iso-cell:hover{background:rgba(124,58,237,.15);transform:translateZ(16px);box-shadow:0 6px 20px rgba(124,58,237,.2)}
@keyframes hsIsoPulse{0%,100%{transform:translateZ(0)}50%{transform:translateZ(5px)}}
.home-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:8px}
.home-card{background:var(--bg-white);border:1.5px solid var(--border);border-radius:var(--radius);padding:24px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;display:block}
.home-card:hover{border-color:var(--purple-border);box-shadow:0 0 18px rgba(109,59,239,.18), 0 8px 32px rgba(109,59,239,.10);transform:translateY(-3px);text-decoration:none}
.home-card .card-num{position:absolute;top:16px;right:18px;font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--bg);line-height:1}
.home-card:hover .card-num{color:var(--purple-light)}
.home-card .card-icon{width:42px;height:42px;border-radius:10px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--purple);margin-bottom:16px}
.home-card h3{font-family:'Sora',sans-serif;font-size:14.5px;font-weight:700;margin-bottom:6px;color:var(--text)}
.home-card p{font-size:12.5px;color:var(--text-secondary);line-height:1.6}
.home-card .arrow{position:absolute;bottom:20px;right:18px;color:var(--text-muted);font-size:16px;transition:all .2s}
.home-card:hover .arrow{transform:translateX(4px);color:var(--purple)}

/* FOOTER */
.site-footer{background:var(--bg-white);border-top:1px solid var(--border);margin-left:var(--sidebar-w)}
.footer-inner{max-width:1200px;margin:0 auto;padding:48px 28px 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-brand .footer-logo{font-family:'Sora',sans-serif;font-size:18px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.footer-brand .footer-logo .f-icon{width:28px;height:28px;border-radius:7px;background:var(--purple);display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700}
.footer-brand .footer-logo span{color:var(--purple)}
.footer-brand p{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:34px;height:34px;border-radius:8px;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px;transition:all .2s;text-decoration:none}
.footer-social a:hover{background:var(--purple-wash);color:var(--purple);border-color:var(--purple-border)}
.footer-col h5{font-family:'Sora',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text);margin-bottom:16px}
.footer-col ul{list-style:none}.footer-col ul li{margin-bottom:10px}
.footer-col ul li a{font-size:13px;color:var(--text-secondary);text-decoration:none;transition:color .2s}.footer-col ul li a:hover{color:var(--purple)}
.footer-newsletter{border-top:1px solid var(--border);padding:18px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.footer-newsletter .nl-text h5{font-family:'Sora',sans-serif;font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.footer-newsletter .nl-text p{font-size:12px;color:var(--text-secondary)}
.nl-form{display:flex;gap:8px}
.nl-form input{padding:10px 16px;border:1.5px solid var(--border);border-radius:9px;font-family:'General Sans',sans-serif;font-size:13px;color:var(--text);background:var(--bg);outline:none;min-width:240px}
.nl-form input:focus{border-color:var(--purple)}
.nl-form button{padding:10px 20px;background:var(--purple);color:#fff;border:none;border-radius:9px;font-family:'General Sans',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap}
.nl-form button:hover{background:var(--purple-dark)}
.footer-bottom{border-top:1px solid var(--border);padding:14px 0;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--text-muted);flex-wrap:nowrap;gap:12px}
.footer-bottom a{color:var(--text-secondary);text-decoration:none}.footer-bottom a:hover{color:var(--purple)}

/* COOKIE BANNER */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--bg-white);border-top:1px solid var(--border);box-shadow:0 -4px 20px rgba(0,0,0,.06);padding:10px 28px;display:flex;align-items:center;justify-content:center;gap:20px;z-index:200;transition:transform .4s}
.cookie-banner.hidden{transform:translateY(120%)}
.cookie-banner p{font-size:12px;color:var(--text-secondary);line-height:1.4}.cookie-banner p a{color:var(--purple)}
.cookie-btns{display:flex;gap:8px;flex-shrink:0}.cookie-btns .btn{font-size:11px;padding:6px 14px}

/* LEGAL PAGES */
.legal-content{max-width:780px}
.legal-content h1{font-family:'Sora',sans-serif;font-size:28px;font-weight:800;color:var(--text);margin-bottom:8px}
.legal-content .legal-updated{font-size:13px;color:var(--text-muted);margin-bottom:32px}
.legal-content h2{font-family:'Sora',sans-serif;font-size:18px;font-weight:700;color:var(--text);margin:28px 0 12px}
.legal-content p{font-size:14px;color:var(--text-secondary);line-height:1.8;margin-bottom:16px}
.legal-content ul{padding-left:20px;margin-bottom:16px}.legal-content ul li{font-size:14px;color:var(--text-secondary);line-height:1.8;margin-bottom:6px}

/* OVERLAY */
.overlay{display:none;position:fixed;inset:0;background:rgba(30,27,46,.4);backdrop-filter:blur(4px);z-index:90}.overlay.open{display:block}

/* RESPONSIVE */
@media(max-width:1024px){.info-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:900px){.panels{grid-template-columns:1fr}.panel-body textarea,.panel-body pre{height:600px}}
@media(max-width:768px){.sidebar{transform:translateX(-100%);width:280px}.sidebar.open{transform:translateX(0);box-shadow:6px 0 30px rgba(30,27,46,.15)}.main{margin-left:0}.site-footer{margin-left:0}.hamburger{display:flex}.tool-area{padding:20px 16px}.topbar{padding:0 16px}.topbar-nav{display:none}.sidebar-mobile-nav{display:block}.home-grid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.footer-newsletter{flex-direction:column;align-items:flex-start}.nl-form{width:100%}.nl-form input{min-width:0;flex:1}.footer-bottom{flex-direction:column;gap:8px;text-align:center}.cookie-banner{flex-direction:column;text-align:center;padding:10px 16px}.cookie-btns{margin-right:0}}
@media(max-width:480px){.home-grid{grid-template-columns:1fr}.action-bar{gap:6px}.btn{padding:8px 14px;font-size:12px}.tool-title{font-size:17px}.home-title{font-size:24px}.footer-grid{grid-template-columns:1fr;gap:24px}.related-grid{grid-template-columns:1fr}}
.copied-flash{animation:flashGreen .5s ease}@keyframes flashGreen{0%{color:var(--text)}50%{color:var(--green)}100%{color:var(--text)}}

/* DARK MODE TOGGLE BUTTON */
.dark-toggle{background:var(--bg);border:1.5px solid var(--border);width:36px;height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-left:6px;flex-shrink:0}
.dark-toggle:hover{background:var(--purple-wash);border-color:var(--purple-border)}
.dt-icon{font-size:18px;line-height:1;color:var(--text-secondary);transition:transform .35s cubic-bezier(.4,0,.2,1)}
/* Smooth dark/light theme transition */
html.theme-transitioning,html.theme-transitioning *,html.theme-transitioning *::before,html.theme-transitioning *::after{transition:background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, fill .3s ease !important}

/* TOOL USAGE BADGE */
.tool-usage-badge{position:absolute;top:16px;right:16px;font-size:12px;color:var(--text-muted);background:var(--bg);border:1.5px solid var(--border);padding:5px 12px;border-radius:20px;display:flex;align-items:center;gap:5px}
.tool-usage-badge strong{color:var(--purple);font-weight:700}
.tub-icon{font-size:14px}
.tool-header{position:relative}

/* FOOTER STATS ROW */
.footer-stats-inline{white-space:nowrap;font-size:12px;color:var(--text-secondary);flex-shrink:0}
.footer-stats-inline span{font-weight:700;color:var(--purple)}

/* FOOTER — simplified 3-col grid */

/* ═══════════════ MEGA MENU ═══════════════ */
.mega-trigger{position:relative;display:inline-flex}
.mega-trigger a{display:flex;align-items:center;gap:4px}
.mega-caret{font-size:9px;transition:transform .2s;opacity:.5}
.mega-trigger:hover .mega-caret{transform:rotate(180deg);opacity:1}
.mega-menu{display:none;position:fixed;top:var(--topbar-h);left:0;right:0;background:var(--bg-white);border-bottom:1.5px solid var(--border);box-shadow:0 12px 48px rgba(0,0,0,.08);z-index:200;padding:0;opacity:0;transform:translateY(-8px);transition:opacity .2s ease, transform .2s ease}
.mega-menu.open{display:block;opacity:1;transform:translateY(0);animation:megaSlide .2s ease}
@keyframes megaSlide{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
/* Tabbed layout */
.mega-inner{display:flex;max-width:1400px;margin:0 auto;height:440px}
.mm-tabs{width:210px;min-width:210px;border-right:1.5px solid var(--border);overflow-y:auto;padding:8px 6px;background:var(--bg);scrollbar-width:thin}
.mm-tabs::-webkit-scrollbar{width:4px}
.mm-tabs::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:2px}
.mm-tab{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;font-size:12.5px;font-weight:500;color:var(--text-secondary);text-align:left;border-radius:8px;transition:all .15s;font-family:inherit;line-height:1.3}
.mm-tab:hover{background:var(--purple-wash);color:var(--purple)}
.mm-tab.active{background:var(--purple);color:#fff;font-weight:600;box-shadow:0 2px 8px rgba(109,59,239,.25)}
.mm-tab-icon{width:20px;text-align:center;font-size:12px;flex-shrink:0}
.mm-tab-count{margin-left:auto;font-size:10px;opacity:.6;background:rgba(109,59,239,.1);padding:1px 7px;border-radius:8px;font-weight:600;flex-shrink:0}
.mm-tab.active .mm-tab-count{background:rgba(255,255,255,.2)}
.mm-panels{flex:1;overflow-y:auto;padding:20px 28px;scrollbar-width:thin}
.mm-panels::-webkit-scrollbar{width:4px}
.mm-panels::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:2px}
.mm-panel{display:none}
.mm-panel.active{display:block;animation:mmFadeIn .2s ease}
@keyframes mmFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.mm-panel-head{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--purple);font-weight:700;padding:0 0 10px;display:flex;align-items:center;gap:6px;border-bottom:1.5px solid var(--border);margin-bottom:10px}
.mm-panel-icon{font-size:14px;width:22px;text-align:center}
.mm-tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 20px}
.mm-item{display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:7px;font-size:13px;color:var(--text-secondary);text-decoration:none;transition:all .12s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-item:hover{color:var(--purple);background:var(--purple-wash);text-decoration:none;padding-left:12px}
.mm-icon{font-size:11px;width:18px;text-align:center;flex-shrink:0;opacity:.6}
.mm-item:hover .mm-icon{opacity:1}
.mega-foot{border-top:1px solid var(--border);padding:10px 32px;text-align:center}
.mega-all{font-size:13px;font-weight:600;color:var(--purple);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:8px 20px;border-radius:8px;transition:all .15s}
.mega-all:hover{background:var(--purple-wash);text-decoration:none}
@media(max-width:768px){.mega-menu{display:none !important}}

/* ═══════════════ SEARCH ═══════════════ */

/* Search wrapper in topbar */
.search-wrapper{position:relative;margin-left:auto;flex-shrink:0}
.search-toggle{background:var(--bg);border:1.5px solid var(--border);height:36px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;padding:0 14px;color:var(--text-muted);font-family:'General Sans',sans-serif;font-size:13px;font-weight:500}
.search-toggle:hover{background:var(--purple-wash);border-color:var(--purple-border);color:var(--purple)}
.search-toggle-icon{font-size:16px}
.search-toggle-label{opacity:.7}

/* Inline search bar (desktop) */
.search-inline{display:none;align-items:center;gap:8px;background:var(--bg-white);border:1.5px solid var(--purple);border-radius:10px;padding:0 12px;height:38px;width:320px;box-shadow:0 0 0 3px rgba(109,59,239,.1);animation:searchExpand .2s ease}
@keyframes searchExpand{from{width:140px;opacity:.5}to{width:320px;opacity:1}}
.search-wrapper.open .search-inline{display:flex}
.search-wrapper.open .search-toggle{display:none}
.search-inline-icon{font-size:16px;color:var(--purple);flex-shrink:0}
.search-inline-input{flex:1;border:none;background:transparent;font-family:'General Sans',sans-serif;font-size:14px;color:var(--text);outline:none;min-width:0}
.search-inline-input::placeholder{color:var(--text-faint)}
.search-inline-close{background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:14px;padding:2px;border-radius:4px;transition:all .15s;flex-shrink:0;line-height:1}
.search-inline-close:hover{color:var(--purple);background:var(--purple-wash)}

/* Dropdown results panel (desktop) */
.search-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;width:420px;background:var(--bg-white);border:1.5px solid var(--border);border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,.12);z-index:300;overflow:hidden;animation:dropSlide .15s ease}
@keyframes dropSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.search-dropdown.open{display:block}
.search-dropdown .search-hint{padding:20px;text-align:center;color:var(--text-muted);font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}
.search-dropdown .search-hint span{font-size:20px;color:var(--purple);opacity:.5}
.search-dropdown .search-results{max-height:380px;overflow-y:auto;padding:6px}
.search-dropdown-footer{padding:10px 16px;border-top:1px solid var(--border);font-size:10px;color:var(--text-faint);text-align:center;display:none}
.search-dropdown.open .search-dropdown-footer{display:block}
.search-dropdown-footer kbd,.search-footer kbd{display:inline-block;padding:1px 5px;border:1px solid var(--border);border-radius:4px;font-family:'DM Mono',monospace;font-size:9px;background:var(--bg);color:var(--text-muted)}

/* Shared result styles */
.search-cat-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-muted);font-weight:700;padding:10px 12px 4px}
.search-result-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:all .15s;text-decoration:none;color:inherit}
.search-result-item:hover{background:var(--purple-wash);text-decoration:none}
.search-result-icon{width:34px;height:34px;border-radius:9px;background:var(--purple-light);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--purple);flex-shrink:0}
.search-result-info{flex:1;min-width:0}
.search-result-name{font-size:13px;font-weight:600;color:var(--text)}
.search-result-desc{font-size:11px;color:var(--text-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-result-arrow{color:var(--text-faint);font-size:13px;flex-shrink:0;transition:all .15s}
.search-result-item:hover .search-result-arrow{color:var(--purple);transform:translateX(3px)}
.search-empty{padding:32px 20px;text-align:center;color:var(--text-muted);font-size:13px}
.search-empty-icon{font-size:28px;color:var(--text-faint);display:block;margin-bottom:10px}
.search-empty-sub{font-size:11px;margin-top:4px;color:var(--text-faint)}
.footer-search-btn{font-size:14px;padding:12px 24px;gap:8px;min-width:220px;justify-content:center}

/* Mobile search overlay (≤768px) */
.search-overlay{display:none;position:fixed;inset:0;background:rgba(30,27,46,.55);backdrop-filter:blur(8px);z-index:500;align-items:flex-start;justify-content:center;padding:min(12vh,100px) 16px 16px}
.search-overlay.open{display:flex;animation:searchFadeIn .2s ease}
@keyframes searchFadeIn{from{opacity:0}to{opacity:1}}
.search-modal{width:100%;max-width:540px;background:var(--bg-white);border:1.5px solid var(--border);border-radius:16px;box-shadow:0 16px 64px rgba(0,0,0,.2);overflow:hidden;animation:searchSlideUp .25s cubic-bezier(.4,0,.2,1)}
@keyframes searchSlideUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.search-header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1.5px solid var(--border)}
.search-header-icon{font-size:18px;color:var(--purple);flex-shrink:0}
.search-input{flex:1;border:none;background:transparent;font-family:'General Sans',sans-serif;font-size:15px;color:var(--text);outline:none}
.search-input::placeholder{color:var(--text-faint)}
.search-close{background:none;border:1px solid var(--border);color:var(--text-muted);width:28px;height:28px;border-radius:7px;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.search-close:hover{background:var(--purple-wash);border-color:var(--purple-border);color:var(--purple)}
.search-overlay .search-hint{padding:20px;text-align:center;color:var(--text-muted);font-size:13px;display:flex;align-items:center;justify-content:center;gap:8px}
.search-overlay .search-hint span{font-size:20px;color:var(--purple);opacity:.5}
.search-overlay .search-results{max-height:360px;overflow-y:auto;padding:6px}
.search-footer{padding:10px 16px;border-top:1.5px solid var(--border);font-size:10px;color:var(--text-faint);text-align:center}

/* Desktop: no mobile overlay; Mobile: no inline dropdown */
@media(min-width:769px){.search-overlay{display:none !important}}
@media(max-width:768px){.search-toggle-label{display:none}.search-toggle{padding:0 10px;width:36px;justify-content:center}.search-inline{display:none !important}.search-dropdown{display:none !important}}

/* ═══════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════ */
html.dark{
  --bg: #1a1929; --bg-white: #242236; --bg-panel: #2b2940; --bg-hover: #35324d; --bg-sidebar: #1e1c30;
  --purple: #b8a0ff; --purple-dark: #d0c0ff; --purple-light: #3a3060; --purple-wash: #2d2848;
  --purple-dim: #b8a0ff77; --purple-border: #564b88;
  --text: #f0edf8; --text-secondary: #cdc8de; --text-muted: #a49dba; --text-faint: #837da0;
  --border: #443e68; --border-hover: #5e5880;
  --red: #ff8a8e; --red-bg: #3a2228; --green: #6ee7b7; --green-bg: #223830;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.25); --shadow-md: 0 4px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --shadow-card: 0 1px 4px rgba(0,0,0,0.18), 0 4px 16px rgba(0,0,0,0.12);
}
html.dark .topbar{background:rgba(20,18,34,.92);backdrop-filter:blur(12px)}
html.dark .sidebar{background:var(--bg-sidebar);border-right-color:var(--border)}
html.dark .tool-icon-wrap{background:var(--purple-light);border-color:var(--purple-border)}
html.dark .panel-body textarea,html.dark .panel-body pre{background:transparent;color:var(--text);border:none}
html.dark input[type="text"],html.dark input[type="number"],html.dark input[type="email"],html.dark input[type="password"],html.dark input[type="url"],html.dark input[type="date"],html.dark input[type="datetime-local"],html.dark input[type="time"],html.dark select,html.dark .indent-select,html.dark .form-input,html.dark .cc-input{background:var(--bg-panel);color:var(--text);border-color:var(--purple-border)}
html.dark .home-card{background:var(--bg-white);border-color:var(--border)}
html.dark .home-card:hover{border-color:var(--purple-border);background:var(--bg-panel);box-shadow:0 0 22px rgba(184,160,255,.2), 0 8px 32px rgba(184,160,255,.1)}

/* ENHANCED BORDERS — more visible boxes in both modes */
.panel{border:1.5px solid var(--border)}
.panel-body textarea,.panel-body pre{border:none;border-radius:0}
.panel-body textarea:focus,.panel-body pre:focus{border:none;box-shadow:none}
html.dark .panel{border-color:var(--purple-border)}
html.dark .panel-body textarea,html.dark .panel-body pre{border:none}
html.dark .home-card{border-color:var(--border)}
html.dark .accordion-header{border:1.5px solid var(--purple-border)}
html.dark .info-card{border:1.5px solid var(--border)}
html.dark .faq-item{border:1.5px solid var(--border)}
html.dark .related-card{border:1.5px solid var(--border)}
html.dark .contact-card{border:1.5px solid var(--border)}
html.dark .action-bar .btn-secondary{border-color:var(--purple-border)}
html.dark input[type="text"],html.dark input[type="number"],html.dark input[type="email"],html.dark input[type="password"],html.dark input[type="url"],html.dark input[type="date"],html.dark input[type="datetime-local"],html.dark input[type="time"],html.dark select,html.dark .indent-select,html.dark .form-input,html.dark .cc-input{border:1.5px solid var(--purple-border)}
html.dark select.form-input,html.dark select.cc-input,
html.dark select.indent-select,html.dark select.conv-select,
html.dark .action-bar select,html.dark .panel-body select,html.dark .panel select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8a0ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-color:var(--bg-panel);background-repeat:no-repeat;background-position:right 14px center;background-size:12px;
  border:1.5px solid var(--purple-border);color:var(--text)}
html.dark select.form-input:hover,html.dark select.cc-input:hover,
html.dark select.indent-select:hover,html.dark select.conv-select:hover,
html.dark .action-bar select:hover,html.dark .panel select:hover{
  background-color:var(--bg-hover);border-color:var(--purple);box-shadow:0 2px 10px rgba(184,160,255,.12)}
html.dark select option{background:var(--bg-panel);color:var(--text);padding:10px 14px}
html.dark select option:checked{background:var(--purple);color:#fff}
html.dark .cc-arrow{background:var(--purple-wash);border-color:var(--purple-border)}
html.dark .cc-hint{background:var(--purple-wash);border-color:var(--purple-border);color:var(--text-secondary)}
html.dark .cc-label{color:var(--purple)}
html.dark .form-input:hover,html.dark .cc-input:hover{background:var(--bg-hover);border-color:var(--purple)}
html.dark .form-input:focus,html.dark .cc-input:focus{box-shadow:0 0 0 3.5px rgba(184,160,255,.15);background:var(--bg-white);border-color:var(--purple)}
html.dark select.form-input:focus,html.dark select.cc-input:focus{box-shadow:0 0 0 3.5px rgba(184,160,255,.15);background:var(--bg-white);border-color:var(--purple)}
html.dark .nl-form input{border-color:var(--purple-border)}
html.dark .home-card h3{color:var(--text)}
html.dark .home-card p{color:var(--text-secondary)}
html.dark .card-num{color:var(--purple);opacity:.8}
html.dark .btn-secondary{background:var(--bg);color:var(--text-secondary);border-color:var(--border)}
html.dark .btn-ghost{background:transparent;color:var(--text-secondary);border-color:var(--border)}
html.dark .copy-btn{background:var(--purple-wash);color:var(--purple);border-color:var(--purple-border)}
html.dark .copy-btn:hover{background:var(--purple);color:#fff}
html.dark .btn-primary{background:var(--purple);box-shadow:0 2px 12px rgba(184,160,255,.25)}
html.dark img{opacity:.92}
html.dark ::selection{background:var(--purple);color:#fff}
html.dark input[type="range"]{accent-color:var(--purple)}
html.dark .overlay.open{background:rgba(0,0,0,.6)}
html.dark .cookie-banner{background:var(--bg-white);border-color:var(--border)}
html.dark .fmt-btn{background:var(--bg);border-color:var(--border);color:var(--text)}
html.dark .fmt-btn.active{background:var(--purple-wash);border-color:var(--purple);color:var(--purple)}
html.dark .fmt-btn .fmt-sub{color:var(--text-muted)}
html.dark .accordion-header{background:var(--purple-wash);border-color:var(--purple-border)}
html.dark .accordion-header .acc-label{color:var(--purple)}
html.dark .accordion-header .acc-count{background:var(--purple);color:#fff;border:none}
html.dark .nav-item{color:var(--text-secondary)}
html.dark .nav-item:hover{color:var(--purple);background:var(--purple-wash)}
html.dark .nav-item.active{color:var(--purple);background:var(--purple-light)}
html.dark .info-card{background:var(--bg-white);border-color:var(--border)}
html.dark .info-card h4{color:var(--text)}
html.dark .info-card p,html.dark .info-card li{color:var(--text-secondary)}
html.dark .faq-item{background:var(--bg-white);border-color:var(--border)}
html.dark .faq-q{color:var(--text)}
html.dark .faq-a{color:var(--text-secondary)}
html.dark .related-card{background:var(--bg-white);border-color:var(--border)}
html.dark .related-card:hover{border-color:var(--purple-border)}
html.dark .rc-name{color:var(--text)}
html.dark .rc-desc{color:var(--text-secondary)}
html.dark .status-bar{background:var(--bg-white);border-color:var(--purple-border)}
html.dark .panel-head{border-color:var(--purple-border);background:var(--bg-panel)}
html.dark .panel{border-color:var(--purple-border)}
html.dark .tool-desc{color:var(--text-secondary)}
html.dark .breadcrumbs a{color:var(--text-muted)}
html.dark .breadcrumbs .current{color:var(--text)}
html.dark .home-subtitle{color:var(--text-secondary)}
html.dark .cat-pill{background:var(--bg-white);border-color:var(--border);color:var(--text-secondary)}
html.dark .cat-pill:hover{background:var(--purple-wash);border-color:var(--purple-border);color:var(--purple)}
html.dark .cat-pill.active{background:var(--purple);color:#fff;border-color:var(--purple);box-shadow:0 4px 16px rgba(184,160,255,.2)}
html.dark .pill-count{background:var(--purple-light);color:var(--purple)}
html.dark .cat-pill.active .pill-count{background:rgba(255,255,255,.2);color:#fff}
html.dark .category-header p{color:var(--text-secondary)}
html.dark .footer-col ul li a{color:var(--text-secondary)}
html.dark .footer-col ul li a:hover{color:var(--purple)}
html.dark .tool-usage-badge{background:var(--bg-panel);border-color:var(--purple-border);color:var(--text-secondary)}
html.dark .tool-usage-badge strong{color:var(--purple)}
html.dark .action-bar{border-color:var(--purple-border)}
html.dark .panel-body textarea:focus,html.dark .panel-body pre:focus{border:none;box-shadow:none}
html.dark .panel-body textarea::placeholder{color:var(--text-muted)}
html.dark .search-overlay{background:rgba(10,10,20,.65)}
html.dark .search-modal{background:var(--bg-white);border-color:var(--purple-border);box-shadow:0 16px 64px rgba(0,0,0,.5)}
html.dark .search-close{border-color:var(--border)}
html.dark .search-result-item:hover{background:var(--purple-wash)}
html.dark .search-toggle{background:var(--bg);border-color:var(--border);color:var(--text-muted)}
html.dark .search-toggle:hover{background:var(--purple-wash);border-color:var(--purple-border);color:var(--purple)}
html.dark .search-inline{background:var(--bg-white);border-color:var(--purple);box-shadow:0 0 0 3px rgba(184,160,255,.15)}
html.dark .search-dropdown{background:var(--bg-white);border-color:var(--purple-border);box-shadow:0 12px 48px rgba(0,0,0,.4)}
html.dark .search-dropdown-footer{border-color:var(--border)}
html.dark .mega-menu{background:var(--bg-white);border-color:var(--purple-border);box-shadow:0 12px 48px rgba(0,0,0,.4)}
html.dark .mm-tabs{background:var(--bg);border-color:var(--border)}
html.dark .mm-tab{color:var(--text-secondary)}
html.dark .mm-tab:hover{color:var(--purple);background:var(--purple-wash)}
html.dark .mm-tab.active{background:var(--purple);color:#fff}
html.dark .mm-tab-count{background:rgba(109,59,239,.15)}
html.dark .mm-tab.active .mm-tab-count{background:rgba(255,255,255,.2)}
html.dark .mm-panel-head{color:var(--purple);border-color:var(--border)}
html.dark .mm-item{color:var(--text-secondary)}
html.dark .mm-item:hover{color:var(--purple);background:var(--purple-wash)}
html.dark .mega-foot{border-color:var(--border)}

/* RESPONSIVE overrides for new footer */
@media(max-width:768px){.footer-stats-inline{font-size:10px}.footer-grid{grid-template-columns:1fr !important}}
@media(max-width:480px){.tool-usage-badge{position:static;margin-top:10px;display:inline-flex}}

/* Scroll FAB */
.scroll-fab{position:fixed;bottom:24px;right:24px;width:30px;height:30px;border-radius:50%;background:var(--purple);color:#fff;border:none;font-size:13px;cursor:pointer;box-shadow:0 3px 10px rgba(109,59,239,0.35);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:all .3s ease;font-weight:700}
.scroll-fab.visible{opacity:1;pointer-events:auto}
.scroll-fab:hover{transform:scale(1.1);box-shadow:0 4px 14px rgba(109,59,239,0.5)}
@media(max-width:768px){.scroll-fab{bottom:16px;right:16px;width:27px;height:27px;font-size:12px}}

/* ─── Custom Select Dropdown ─── */
.cs-wrap{position:relative;display:inline-block;width:100%;z-index:1}
.cs-wrap:has(.cs-trigger.open){z-index:9999}
.cs-wrap select{display:none !important}
.cs-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:14px;font-family:inherit;cursor:pointer;transition:all .2s;user-select:none;min-height:42px;width:100%}
.cs-trigger:hover{border-color:var(--purple-border)}
.cs-trigger.open{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,59,239,.1)}
.cs-trigger .cs-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.cs-trigger .cs-text.placeholder{color:var(--text-muted)}
.cs-trigger .cs-arrow{flex-shrink:0;font-size:10px;color:var(--text-muted);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.cs-trigger.open .cs-arrow{transform:rotate(180deg);color:var(--purple)}
.cs-list{position:absolute;top:calc(100% + 4px);left:0;min-width:100%;width:max-content;background:var(--card,#fff);border:1.5px solid var(--purple-border);border-radius:10px;box-shadow:0 8px 32px rgba(109,59,239,.15),0 2px 8px rgba(0,0,0,.08);z-index:9999;padding:4px;max-height:260px;overflow-y:auto;opacity:0;transform:translateY(-8px) scale(.98);transform-origin:top center;pointer-events:none;transition:opacity .2s cubic-bezier(.4,0,.2,1),transform .2s cubic-bezier(.4,0,.2,1);scrollbar-width:thin}
.cs-list.flip{top:auto;bottom:calc(100% + 4px);transform-origin:bottom center;transform:translateY(8px) scale(.98)}
.cs-list.flip.open{transform:translateY(0) scale(1)}
.cs-list::-webkit-scrollbar{width:4px}
.cs-list::-webkit-scrollbar-thumb{background:#c4b5fd;border-radius:2px}
.cs-list.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.cs-opt{padding:9px 12px;border-radius:7px;font-size:13px;color:var(--text);cursor:pointer;transition:all .12s;display:flex;align-items:center;gap:8px;user-select:none}
.cs-opt:hover{background:var(--purple-wash);color:var(--purple)}
.cs-opt.selected{background:var(--purple);color:#fff;font-weight:600}
.cs-opt.selected:hover{background:var(--purple)}
.cs-opt.disabled{color:var(--text-muted);cursor:default;font-style:italic;opacity:.6}
.cs-opt.disabled:hover{background:none;color:var(--text-muted)}
.cs-opt .cs-check{width:16px;text-align:center;font-size:11px;opacity:0}
.cs-opt.selected .cs-check{opacity:1}
/* Dark mode */
html.dark .cs-trigger{background:var(--card);border-color:var(--border);color:var(--text)}
html.dark .cs-trigger.open{border-color:var(--purple);box-shadow:0 0 0 3px rgba(109,59,239,.15)}
html.dark .cs-list{background:var(--card,#1e1e2e);border-color:var(--purple-border);box-shadow:0 8px 32px rgba(0,0,0,.4),0 2px 8px rgba(0,0,0,.2)}
html.dark .cs-opt:hover{background:var(--purple-wash);color:var(--purple)}
html.dark .cs-opt.selected{background:var(--purple);color:#fff}