:root{
  --panel: #ffffff;
  --ink: #111827;          /* near-black */
  --muted: #6b7280;        /* slate-500 */
  --ring: #e5e7eb;         /* gray-200 */
  --soft: #f8fafc;         /* slate-50 */
}

.pdf2img-grid{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:1.5rem;
}

.pdf2img-sidebar{
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:14px;
  padding:1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.pdf2img-main{
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:14px;
  padding:1rem;
  min-height:320px;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

.tool-header h1{
  margin:0 0 .25rem 0;
}



.input-group{
  margin-bottom:1rem;
}

.input-group label{
  font-weight:600;
  display:block;
  margin-bottom:.35rem;
}

.hint{
  font-size:.9rem;
  color:var(--muted);
  margin-top:.25rem
}

.note{
  font-size:.85rem;
  color:var(--muted);
  margin:.25rem 0 0
}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem
}

.checkbox-row{
  display:flex;
  gap:.5rem;
  align-items:center
}

.range-row{
  display:grid;
  grid-template-columns:1fr max-content;
  gap:.75rem;
  align-items:center
}

.tool-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.progress{
  width:100%;
  height:10px;
  background:#eef2f7;
  border-radius:999px;
  overflow:hidden;
  margin:.6rem 0 .25rem
}
.progress-bar{
  height:100%;
  background:linear-gradient(90deg,#6366f1,#22c55e);
  width:0%;
  transition:width .2s ease;
}
.progress-text{
  font-size:.9rem;
  color:var(--muted)
}

.stat-stack{
  margin-top:.75rem;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem
}
.stat-item{
  background:var(--soft);
  border:1px solid var(--ring);
  border-radius:10px;
  padding:.6rem .8rem;
  text-align:center
}
.stat-value{
  font-weight:800;
  display:block;
  font-size:1.1rem
}
.stat-label{
  color:var(--muted);
  font-size:.85rem
}

.result-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.75rem
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1rem
}
.page-card{
  border:1px solid var(--ring);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  display:flex;
  flex-direction:column;
  box-shadow: 0 1px 1px rgba(0,0,0,.02);
}
.page-card .thumb{
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:220px
}
.page-card .thumb canvas,
.page-card .thumb img{
  max-width:100%;
  height:auto;
  display:block
}
.page-card .meta{
  padding:.75rem;
  border-top:1px solid var(--ring);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem;
  flex-wrap:wrap
}
.page-label{
  font-weight:700
}

.drop-notice{
  border:2px dashed var(--ring);
  border-radius:12px;
  padding:2rem;
  text-align:center;
  color:var(--muted);
  font-weight:600
}

.seo-content{
  margin-top:2rem;
  background:var(--panel);
  border:1px solid var(--ring);
  border-radius:14px;
  padding:1.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

@media (max-width: 1024px){
  .pdf2img-grid{ grid-template-columns: 280px 1fr; }
}
@media (max-width: 960px){
  .pdf2img-grid{ grid-template-columns:1fr }
}
/* Fancy Section */
.fancy-extra-section {
  margin-top: 3rem;
  padding: 3rem 1rem;
  background: linear-gradient(145deg, #f8fafc, #ffffff);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.fancy-inner {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

.fx-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 2rem;
  color: var(--ink);
}

.fx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.fx-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.5rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 5px 14px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}

.fx-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,.1);
}

.fx-icon {
  font-size: 2.2rem;
  margin-bottom: .5rem;
}

.fx-card h3 {
  margin-bottom: .5rem;
  font-size: 1.2rem;
  color: var(--ink);
}

.fx-card p {
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.4;
}
/* Enhanced SEO Section Styles */
.enhanced-seo {
  padding: 2rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.seo-header h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: .5rem;
}

.seo-intro {
  font-size: 1.05rem;
  color: var(--muted);
  line-height: 1.6;
}

.seo-section {
  margin-top: 1.8rem;
}

.enhanced-seo h3 {
  font-size: 1.4rem;
  margin-bottom: .5rem;
  margin-top: 2rem;
  color: var(--ink);
  font-weight: 700;
}

.feature-grid,
.tip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.feature-card,
.tip-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  transition: transform .18s ease, box-shadow .18s ease;
}

.feature-card:hover,
.tip-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}

.feature-card h4,
.tip-card h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: .3rem;
}

.feature-card p,
.tip-card p {
  color: var(--muted);
  font-size: .95rem;
}

/* Lists */
.enhanced-seo ul,
.enhanced-seo ol {
  margin-left: 1.2rem;
  color: var(--muted);
  line-height: 1.6;
}

.seo-protip {
  margin-top: 2rem;
  font-size: 1rem;
  color: var(--ink);
  background: #f0fdfa;
  border-left: 4px solid #14b8a6;
  padding: 1rem;
  border-radius: 8px;
  font-style: italic;
}