@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme:light;
  --bg:#F8F7FD;
  --surface:#FFFFFF;
  --surface-2:#F3F1FC;
  --border:#E8E4F7;
  --text:#1C1A2E;
  --text-dim:#6E6B85;
  --accent:#7C5CFC;
  --accent-rgb:124,92,252;
  --accent-dark:#6A48F0;
  --accent-2:#16C079;
  --danger:#EF4444;
  --radius:16px;
  --shadow:0 10px 30px rgba(124,92,252,.14);
  --font:'Poppins','Noto Sans Devanagari',system-ui,-apple-system,Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--font);
  background:
    radial-gradient(700px 420px at 8% 0%, rgba(124,92,252,.13) 0%, transparent 60%),
    radial-gradient(650px 400px at 95% 8%, rgba(22,192,121,.11) 0%, transparent 58%),
    radial-gradient(600px 500px at 50% 100%, rgba(124,92,252,.07) 0%, transparent 55%),
    radial-gradient(circle, rgba(124,92,252,.06) 1px, transparent 1.5px) 0 0/26px 26px,
    var(--bg);
  color:var(--text);
  min-height:100vh;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
.container{max-width:1040px;margin:0 auto;padding:24px 22px 60px}
.container-wide{max-width:1280px;margin:0 auto;padding:24px 28px 60px}

/* Header */
.site-header{
  border-bottom:1px solid var(--border);
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:50;
}
.site-header .inner{
  max-width:1240px;margin:0 auto;padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{font-size:1.3rem;font-weight:800;letter-spacing:.2px}
.brand span{color:var(--accent)}
.back-link{
  font-size:.85rem;font-weight:600;color:var(--accent);
  border:1px solid var(--border);
  background:var(--surface-2);
  padding:9px 16px;border-radius:999px;
  transition:.2s;
}
.back-link:hover{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ===== Mega nav (auto-injected inline into .site-header .inner by common.js) ===== */
.mega-nav{
  display:flex;gap:2px;align-items:center;overflow-x:auto;
  scrollbar-width:none;flex:1;min-width:0;margin:0 14px;
}
.mega-nav::-webkit-scrollbar{display:none}
.mega-nav-item{position:static;flex-shrink:0}
.mega-nav-btn{
  padding:9px 14px;border-radius:999px;background:none;border:none;
  color:var(--text-dim);font-weight:600;font-size:.85rem;cursor:pointer;
  white-space:nowrap;display:flex;align-items:center;gap:5px;
  transition:.15s;font-family:var(--font);
}
.mega-nav-btn .caret{font-size:.65em;opacity:.7}
.mega-nav-btn:hover, .mega-nav-item.open .mega-nav-btn{background:var(--surface-2);color:var(--accent)}
.mega-nav-btn.active-cat{background:rgba(124,92,252,.12);color:var(--accent)}

/* Multi-column dropdown panel */
.mega-panel{
  position:absolute;top:100%;left:0;right:0;margin-top:1px;
  background:var(--surface);border-top:1px solid var(--border);
  box-shadow:0 16px 30px rgba(28,26,46,.12);
  display:none;z-index:70;padding:22px 0;
}
.mega-nav-item.open .mega-panel{display:block}
.mega-panel-grid{
  max-width:1240px;margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:repeat(var(--cols,2),1fr);
  gap:4px 24px;
}
.mega-panel-grid a{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;
  font-size:.88rem;color:var(--text);
}
.mega-panel-grid a:hover{background:var(--surface-2);color:var(--accent)}
.mega-panel-viewall{
  display:block;max-width:1240px;margin:14px auto 0;padding:12px 28px 0;
  border-top:1px solid var(--border);font-weight:700;color:var(--accent);font-size:.85rem;
}
@media(hover:hover){
  .mega-nav-item:hover .mega-panel{display:block}
}

/* Header search (desktop inline) */
.header-search{position:relative;flex-shrink:0}
.header-search-input{
  width:190px;padding:9px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);font-size:.85rem;font-family:var(--font);outline:none;transition:.2s;
}
.header-search-input:focus{width:240px;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px rgba(124,92,252,.12)}
.header-search-results{
  position:absolute;top:calc(100% + 8px);right:0;width:280px;max-height:360px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:8px;
  box-shadow:var(--shadow);display:none;z-index:70;
}
.header-search-results.show{display:block}
.header-search-results a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:.85rem;color:var(--text)}
.header-search-results a:hover{background:var(--surface-2);color:var(--accent)}
.search-no-match{padding:10px;font-size:.85rem;color:var(--text-dim);text-align:center}

/* Hamburger (mobile only) */
.mega-hamburger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);
  cursor:pointer;flex-shrink:0;
}
.mega-hamburger span{display:block;width:18px;height:2px;background:var(--text);margin:0 auto;border-radius:2px}

/* Mobile drawer */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(20,18,35,.45);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:.25s;z-index:90;
}
.drawer-overlay.show{opacity:1;pointer-events:auto}
.mobile-drawer{
  position:fixed;top:0;right:0;height:100%;width:86%;max-width:360px;
  background:var(--surface);box-shadow:-12px 0 30px rgba(28,26,46,.18);
  transform:translateX(100%);transition:.28s ease;z-index:95;
  display:flex;flex-direction:column;padding:18px;overflow-y:auto;
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.drawer-title{font-weight:800;font-size:1.05rem}
.drawer-title b{color:var(--accent)}
.drawer-close{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:.95rem}
.drawer-search{
  width:100%;padding:11px 14px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);font-size:.9rem;font-family:var(--font);outline:none;margin-bottom:6px;
}
.drawer-search:focus{border-color:var(--accent)}
.drawer-results{display:none;margin-bottom:10px}
.drawer-results.show{display:block}
.drawer-results a{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:8px;font-size:.88rem;color:var(--text)}
.drawer-results a:hover{background:var(--surface-2);color:var(--accent)}
.drawer-cat{border-bottom:1px solid var(--border)}
.drawer-cat-head{
  width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;
  padding:13px 4px;font-size:.92rem;font-weight:700;color:var(--text);cursor:pointer;text-align:left;font-family:var(--font);
}
.drawer-cat-count{
  margin-left:auto;background:var(--surface-2);color:var(--text-dim);font-size:.72rem;font-weight:700;
  padding:2px 8px;border-radius:999px;
}
.drawer-caret{transition:.2s;font-size:.8em;color:var(--text-dim)}
.drawer-cat.open .drawer-caret{transform:rotate(180deg)}
.drawer-cat-body{display:none;flex-direction:column;padding:0 4px 10px}
.drawer-cat.open .drawer-cat-body{display:flex}
.drawer-cat-body a{padding:8px 10px 8px 14px;font-size:.86rem;color:var(--text-dim);border-radius:8px}
.drawer-cat-body a:hover{background:var(--surface-2);color:var(--accent)}

@media(max-width:760px){
  .mega-nav, .header-search{display:none}
  .mega-hamburger{display:flex}
}

/* Hero */
.hero{text-align:center;padding:56px 0 30px;position:relative}
.hero h1{font-size:2.3rem;font-weight:800;margin-bottom:12px;letter-spacing:-.5px}
.hero p{color:var(--text-dim);font-size:1.05rem;max-width:620px;margin:0 auto}
@media(min-width:900px){
  .hero{padding:72px 0 36px}
  .hero h1{font-size:3.1rem}
  .hero p{font-size:1.12rem}
}

/* Search */
.search-wrap{max-width:620px;margin:30px auto 8px}
.search-wrap input{
  width:100%;padding:16px 22px;border-radius:999px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text);font-size:1rem;outline:none;transition:.2s;
  box-shadow:var(--shadow);
}
.search-wrap input:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(124,92,252,.15)}

/* Category */
.category-title{
  margin:38px 0 14px;font-size:.95rem;font-weight:700;
  display:flex;align-items:center;gap:10px;
  color:var(--text);
}
.category-title::before{
  content:'';width:5px;height:18px;border-radius:3px;background:var(--accent);display:inline-block;
}

/* Tool grid */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.tool-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:20px;
  display:flex;flex-direction:column;gap:8px;
  transition:.22s;cursor:pointer;
  box-shadow:0 2px 10px rgba(28,26,46,.04);
}
.tool-card:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)}
.tool-card .icon{
  font-size:1.4rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border-radius:12px;
}
.tool-card h3{font-size:1rem;font-weight:700}
.tool-card p{font-size:.85rem;color:var(--text-dim)}

/* Tool page layout */
.tool-header{padding:34px 0 6px}
.tool-header h1{font-size:1.8rem;font-weight:800;margin-bottom:6px;display:flex;align-items:center;gap:10px;letter-spacing:-.3px}
.tool-header p{color:var(--text-dim)}

.panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:22px;margin-top:18px;
  box-shadow:var(--shadow);
}

/* Form elements */
textarea, input[type=text], input[type=number], input[type=date], input[type=datetime-local], input[type=file], select{
  width:100%;background:var(--surface-2);border:1px solid var(--border);
  color:var(--text);border-radius:10px;padding:12px 14px;font-size:.95rem;
  font-family:var(--font);outline:none;transition:.2s;
}
textarea{min-height:180px;resize:vertical;line-height:1.5}
textarea:focus, input:focus, select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,252,.12)}
label{font-size:.85rem;color:var(--text-dim);display:block;margin-bottom:6px;font-weight:600}
.field{margin-bottom:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row > .field{flex:1;min-width:160px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--accent);color:#fff;border:none;
  padding:13px 26px;border-radius:999px;font-size:.95rem;font-weight:600;
  cursor:pointer;transition:.2s;
  box-shadow:0 4px 14px rgba(124,92,252,.3);
}
.btn:hover{background:var(--accent-dark);box-shadow:0 6px 18px rgba(124,92,252,.4)}
.btn:active{transform:scale(.98)}
.btn.secondary{background:var(--surface-2);border:1px solid var(--border);color:var(--text);box-shadow:none;border-radius:999px}
.btn.secondary:hover{background:var(--surface);border-color:var(--accent);color:var(--accent)}
.btn.danger{background:var(--danger);box-shadow:0 4px 14px rgba(239,68,68,.3)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* Result box */
.result-box{
  margin-top:16px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:10px;padding:16px;font-size:.95rem;word-break:break-word;
}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin-top:14px}
.stat-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center}
.stat-box .num{font-size:1.4rem;font-weight:800;color:var(--accent)}
.stat-box .lbl{font-size:.75rem;color:var(--text-dim);margin-top:4px}

/* Drop zone */
.dropzone{
  border:2px dashed var(--border);border-radius:var(--radius);
  padding:40px 20px;text-align:center;color:var(--text-dim);
  cursor:pointer;transition:.2s;background:var(--surface-2);
}
.dropzone:hover, .dropzone.drag{border-color:var(--accent);background:rgba(124,92,252,.07);color:var(--text)}
.dropzone input{display:none}

.file-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.file-item{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface-2);border:1px solid var(--border);
  padding:10px 14px;border-radius:10px;font-size:.88rem;
}
.file-item button{background:none;border:none;color:var(--danger);cursor:pointer;font-size:1rem}

/* swatch / color */
.swatch{width:100%;height:80px;border-radius:10px;border:1px solid var(--border);margin-bottom:10px}

/* How-to / about-this-tool info section */
.info-wrap{max-width:1040px;margin:28px auto 0;padding:0 22px}
.info-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 2px 10px rgba(28,26,46,.04);
  display:grid;grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.info-divider{display:none}
.info-block{margin-bottom:0;padding:26px}
.info-block:first-of-type{border-right:1px solid var(--border)}
.info-block h2{font-size:1.05rem;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.info-block > p{color:var(--text-dim);font-size:.92rem;margin-bottom:14px;line-height:1.75}
.info-block h3{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:8px;margin-top:18px}
.info-block ol{padding-left:20px;color:var(--text-dim);font-size:.92rem;line-height:1.85}
.info-block ol li{margin-bottom:4px}
@media(max-width:760px){
  .info-section{grid-template-columns:1fr}
  .info-block:first-of-type{border-right:none;border-bottom:1px solid var(--border)}
}
@media(max-width:560px){
  .info-block{padding:18px}
}

/* ===== Left sidebar (auto-injected by common.js on tool pages, wide screens only) ===== */
.left-sidebar{display:none}
.left-sidebar-search{
  width:100%;padding:8px 12px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);font-size:.82rem;font-family:var(--font);outline:none;margin-bottom:12px;
}
.left-sidebar-search:focus{border-color:var(--accent)}
.lsb-cat{margin-bottom:2px}
.lsb-cat-head{
  width:100%;display:flex;align-items:center;gap:8px;background:none;border:none;
  padding:10px 8px;border-radius:8px;font-size:.85rem;font-weight:700;color:var(--text);
  cursor:pointer;text-align:left;font-family:var(--font);
}
.lsb-cat-head:hover{background:var(--surface-2)}
.lsb-cat.active-cat .lsb-cat-head{background:rgba(124,92,252,.12);color:var(--accent)}
.lsb-cat-count{margin-left:auto;background:var(--surface-2);color:var(--text-dim);font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:999px}
.lsb-caret{font-size:.75em;color:var(--text-dim);transition:.2s}
.lsb-cat.open .lsb-caret{transform:rotate(180deg)}
.lsb-cat-body{display:none;flex-direction:column;padding:0 6px 8px 24px}
.lsb-cat.open .lsb-cat-body{display:flex}
.lsb-cat-body a{padding:6px 8px;font-size:.8rem;color:var(--text-dim);border-radius:6px}
.lsb-cat-body a:hover{background:var(--surface-2);color:var(--accent)}
.lsb-hidden{display:none !important}

@media(min-width:1180px){
  .with-sidebar-layout{
    display:flex;align-items:flex-start;gap:24px;
    max-width:1280px;margin:0 auto;padding:0 22px;
  }
  .with-sidebar-layout > .container{
    flex:1;min-width:0;max-width:none;margin:0;padding:24px 0 60px;
  }
  .left-sidebar{
    display:block;width:220px;flex-shrink:0;position:sticky;top:84px;
    max-height:calc(100vh - 100px);overflow-y:auto;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
    padding:16px;box-shadow:0 2px 10px rgba(28,26,46,.04);
  }
}

/* footer */
.site-footer{
  text-align:center;color:var(--text-dim);font-size:.85rem;
  padding:30px 18px;border-top:1px solid var(--border);margin-top:40px;
  background:var(--surface);
}
.site-footer a{color:var(--accent);font-weight:600}

/* responsive */
@media(max-width:560px){
  .hero h1{font-size:1.7rem}
  .tool-header h1{font-size:1.45rem}
  .container{padding:18px 14px 40px}
}

/* copy feedback */
.copied-msg{color:var(--accent-2);font-size:.85rem;margin-left:8px;display:none}
.copied-msg.show{display:inline}

canvas{max-width:100%}