:root{
  --bg:#f3f5fb;
  --card:#ffffff;
  --ink:#1c2130;
  --ink-soft:#6b7290;
  --line:#e5e8f2;
  --blue:#2f6fed;
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#0e1224;
  --card:#171c33;
  --ink:#eef0fb;
  --ink-soft:#9aa0c2;
  --line:#2a3055;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  transition:background .3s, color .3s;
}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

/* TOPBAR */
body{
  font-family:'Segoe UI',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  transition:background .3s, color .3s;
  padding-top:64px; /* header ki height ke barabar - content ko header ke niche nahi chupne dega */
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;height:64px;background:var(--card);border-bottom:1px solid var(--line);
  position:fixed;top:0;left:0;right:0;width:100%;z-index:500;
  box-sizing:border-box;
}
.mobile-drawer{
  display:none;flex-direction:column;background:var(--card);
  border-bottom:1px solid var(--line);
  position:fixed;top:64px;left:0;right:0;z-index:400;
  max-height:calc(100vh - 64px);overflow-y:auto;
}
.mobile-drawer.open{display:flex;}
.icon-btn{font-size:20px;color:var(--ink);width:40px;height:40px;border-radius:10px;}
.icon-btn:hover{background:var(--bg);}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;}
.logo .heart{color:var(--blue);}
.topbar-right{display:flex;align-items:center;gap:8px;}
.theme-toggle{font-size:18px;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);}

/* HERO */
.hero{padding:40px 20px 24px;text-align:center;}
.hero h1{font-size:clamp(24px,5vw,36px);font-weight:800;line-height:1.25;margin-bottom:12px;}
.hero p{color:var(--ink-soft);font-size:15px;margin-bottom:26px;}
.filter-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.tab{
  padding:12px 22px;border-radius:30px;border:1.5px solid var(--line);
  background:var(--card);font-weight:600;font-size:14.5px;color:var(--ink);
  transition:all .2s;
}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
[data-theme="dark"] .tab.active{background:var(--blue);border-color:var(--blue);}

/* TOOL LIST */
.tool-list{max-width:640px;margin:0 auto;padding:20px 16px 60px;display:flex;flex-direction:column;gap:16px;}
.tool-row{
  display:flex;align-items:center;gap:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  transition:transform .2s, box-shadow .2s;
}
.tool-row:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(20,25,60,.25);}
.tool-icon{
  width:52px;height:52px;border-radius:12px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.icon-green{background:#e3f6ea;}
.icon-orange{background:#fdecd8;}
.icon-blue{background:#dbeafe;}
.icon-red{background:#fde2e1;}
.tool-text h3{font-size:17px;font-weight:700;margin-bottom:4px;}
.tool-text p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.chevron{font-size:22px;color:var(--ink-soft);}

.footer{text-align:center;padding:24px;color:var(--ink-soft);font-size:12.5px;border-top:1px solid var(--line);}

/* ===== SHARED TOOL PAGE STYLES ===== */
.tool-page{max-width:960px;margin:0 auto;padding:24px 16px 60px;}
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:14px;margin-bottom:16px;}
.tool-title{font-size:26px;font-weight:800;margin-bottom:24px;}

.stepper{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;}
.step-pill{font-size:12.5px;font-weight:600;color:var(--ink-soft);padding:7px 12px;border-radius:20px;border:1px solid var(--line);}
.step-pill.active{color:#fff;background:var(--blue);border-color:var(--blue);}

.dropzone{
  border:2px dashed var(--line);border-radius:16px;padding:44px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s, background .2s;background:var(--card);
}
.dropzone.drag{border-color:var(--blue);background:#eaf1ff;}
.dropzone h4{font-size:16px;margin-bottom:6px;}
.dropzone p{font-size:13px;color:var(--ink-soft);}
.dropzone input{display:none;}

.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;margin-top:20px;}
@media(max-width:700px){.grid-2{grid-template-columns:1fr;}}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;}
.field-label{font-size:12.5px;font-weight:700;color:var(--ink-soft);margin-bottom:8px;display:block;}
input[type=range]{width:100%;accent-color:var(--blue);}
.mono-tag{font-family:monospace;font-size:12px;background:#eaf1ff;color:var(--blue);padding:2px 8px;border-radius:6px;}

.chip-row{display:flex;gap:8px;flex-wrap:wrap;}
.chip{padding:9px 14px;border-radius:9px;border:1px solid var(--line);background:var(--card);font-size:13px;font-weight:600;color:var(--ink-soft);}
.chip.active,.chip:hover{border-color:var(--blue);color:var(--blue);}

.icon-round{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--card);font-size:15px;color:var(--ink-soft);}
.icon-round:hover{border-color:var(--blue);color:var(--blue);}

.stat-row{display:flex;justify-content:space-between;font-size:13.5px;padding:8px 0;border-bottom:1px solid var(--line);}
.stat-row:last-child{border-bottom:none;}
.stat-row .v{font-family:monospace;font-weight:700;}
.stat-row .v.good{color:#1f9d6b;}

.preview-stage{
  background:var(--card);border:1px solid var(--line);border-radius:12px;min-height:220px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.preview-stage img,.preview-stage canvas{max-width:100%;max-height:340px;}

.crop-stage-wrap{position:relative;background:#000;border-radius:12px;overflow:hidden;touch-action:none;}
.crop-stage-wrap img{display:block;width:100%;pointer-events:none;}
.crop-box{position:absolute;border:2px solid #f5a524;box-shadow:0 0 0 4000px rgba(0,0,0,.5);cursor:move;}
.crop-handle{position:absolute;width:14px;height:14px;background:#f5a524;border-radius:3px;}
.crop-handle.nw{top:-7px;left:-7px;cursor:nwse-resize;}
.crop-handle.ne{top:-7px;right:-7px;cursor:nesw-resize;}
.crop-handle.sw{bottom:-7px;left:-7px;cursor:nesw-resize;}
.crop-handle.se{bottom:-7px;right:-7px;cursor:nwse-resize;}

.file-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:10px;cursor:grab;}
.file-thumb{width:50px;height:50px;border-radius:7px;object-fit:cover;background:#000;}
.file-name{font-size:13px;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.file-meta{font-size:11px;color:var(--ink-soft);font-family:monospace;}

.text-input{width:100%;padding:10px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:14px;}
.color-swatch{width:32px;height:32px;border-radius:8px;border:2px solid transparent;cursor:pointer;}
.color-swatch.active{border-color:var(--blue);}

.btn-primary{background:var(--blue);color:#fff;padding:12px 22px;border-radius:10px;font-weight:700;font-size:14.5px;}
.btn-secondary{background:var(--card);color:var(--ink);padding:12px 22px;border-radius:10px;font-weight:700;font-size:14.5px;border:1.5px solid var(--line);}
.download-bar{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;}
.note{font-size:12.5px;background:#e3f6ea;color:#1f9d6b;padding:10px 14px;border-radius:9px;margin-top:14px;}
.error-note{background:#fde2e1;color:#e0524a;}
.mobile-drawer{
  display:none;flex-direction:column;background:var(--card);
  border-bottom:1px solid var(--line);
}
.mobile-drawer.open{display:flex;}
.mobile-drawer a{
  padding:16px 20px;font-weight:600;font-size:15px;color:var(--ink);
  border-bottom:1px solid var(--line);
}
.mobile-drawer a:last-child{border-bottom:none;}
.mobile-drawer a:hover{background:var(--bg);}
.content-section{max-width:900px;margin:50px auto 0;padding:0 16px;}
.content-section h2{font-size:22px;font-weight:800;margin-bottom:14px;margin-top:36px;}
.content-section h2:first-child{margin-top:0;}
.content-section p{font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin-bottom:14px;}
.content-section ul,.content-section ol{margin:0 0 14px 20px;color:var(--ink-soft);font-size:14.5px;line-height:1.8;}
.spec-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px;}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;}
.spec-table th{background:var(--card);font-weight:700;}
.faq-item{border-bottom:1px solid var(--line);padding:16px 0;}
.faq-item h3{font-size:15px;font-weight:700;margin-bottom:6px;}
.faq-item p{margin-bottom:0;}
[id$="StageContainer"]{overflow:auto;border-radius:12px;max-height:420px;}
.grid-2{align-items:start;}
@media(max-width:480px){
  .tool-title{font-size:21px;}
  .topbar{padding:0 12px;}
  .logo{font-size:16px;}
  .download-bar{flex-direction:column;}
  .download-bar .btn-primary,.download-bar .btn-secondary{width:100%;text-align:center;}
  .chip-row{gap:6px;}
  .chip{padding:8px 11px;font-size:12px;}
  .spec-table{font-size:12px;}
  .spec-table th,.spec-table td{padding:6px 8px;}
}