/* ============ Design tokens ============ */
:root{
  --bg:#f7f8fb;
  --surface:#ffffff;
  --border:#e6e8ef;
  --border-hover:#fca5a5;
  --text-primary:#1f2430;
  --text-muted:#6b7280;
  --text-faint:#9aa0ac;
  --brand:#ef4444;
  --brand-dark:#dc2626;
  --brand-tint:#fef2f2;
  --success:#16a34a;
  --danger:#dc2626;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --font:'Inter', -apple-system, sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);

  /* per-category accent colors, used for icon badges */
  --c-organize:#ef4444;
  --c-organize-tint:#fef2f2;
  --c-optimize:#f97316;
  --c-optimize-tint:#fff7ed;
  --c-word:#2563eb;
  --c-word-tint:#eff6ff;
  --c-excel:#16a34a;
  --c-excel-tint:#f0fdf4;
  --c-ppt:#f59e0b;
  --c-ppt-tint:#fffbeb;
  --c-image:#8b5cf6;
  --c-image-tint:#f5f3ff;
  --c-security:#db2777;
  --c-security-tint:#fdf2f8;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text-primary);
  font-family:var(--font);
  line-height:1.6;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

a{color:inherit; text-decoration:none;}
h1,h2,h3{margin:0; font-weight:800; letter-spacing:-0.02em;}
p{margin:0;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
code{font-family:ui-monospace, monospace; background:#f1f2f6; padding:2px 7px; border-radius:6px; font-size:0.9em;}
.text-brand{color:var(--brand);}

/* ============ Header ============ */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding-block:14px;}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:1.2rem;}
.brand-mark svg{width:28px; height:28px; display:block;}
.brand-accent{color:var(--brand);}
.site-nav{display:flex; gap:28px; font-size:0.93rem; color:var(--text-muted); font-weight:500;}
.site-nav a{transition:color .2s var(--ease);}
.site-nav a:hover{color:var(--brand);}
@media (max-width:820px){.site-nav{display:none;}}

/* ============ Buttons ============ */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:10px; font-weight:700; font-size:0.93rem; cursor:pointer; border:1px solid transparent; transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);}
.btn--primary{background:var(--brand); color:#fff; box-shadow:0 8px 20px -6px rgba(239,68,68,0.5);}
.btn--primary:hover{background:var(--brand-dark); transform:translateY(-1px);}
.btn:disabled{opacity:0.45; cursor:not-allowed; transform:none !important; box-shadow:none !important;}

/* ============ Hero ============ */
.hero{text-align:center; padding:64px 24px 40px;}
.eyebrow{font-size:0.82rem; font-weight:600; color:var(--text-muted); margin-bottom:18px; letter-spacing:0.02em;}
.hero h1{font-size:clamp(2.1rem, 5vw, 3.2rem); line-height:1.2; margin-bottom:18px;}
.hero-sub{color:var(--text-muted); font-size:1.08rem; max-width:52ch; margin:0 auto 34px;}

.filter-bar{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.filter-pill{
  padding:10px 20px; border-radius:999px; border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-muted); font-weight:600; font-size:0.9rem; cursor:pointer;
  transition:all .2s var(--ease);
}
.filter-pill:hover{border-color:var(--border-hover); color:var(--brand);}
.filter-pill.is-active{background:var(--brand); border-color:var(--brand); color:#fff;}

/* ============ Tool grid ============ */
.tools-section{padding:20px 24px 60px;}
.tool-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:18px;}

.tool-card{
  cursor:pointer;
  padding:24px;
  border-radius:var(--radius-md);
  background:var(--surface);
  border:1px solid var(--border);
  transition:transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  display:flex; flex-direction:column; gap:14px;
}
.tool-card:hover{transform:translateY(-3px); border-color:var(--border-hover); box-shadow:0 16px 32px -18px rgba(31,36,48,0.25);}
.tool-card .icon-badge{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
}
.tool-card h4{margin:0; font-size:1.03rem; font-weight:700;}
.tool-card p{color:var(--text-muted); font-size:0.87rem;}
.tool-card.is-hidden{display:none;}

/* per-category icon badge coloring */
.tool-card[data-cat="organize"] .icon-badge{background:var(--c-organize-tint); color:var(--c-organize);}
.tool-card[data-cat="optimize"] .icon-badge{background:var(--c-optimize-tint); color:var(--c-optimize);}
.tool-card[data-cat="word"] .icon-badge{background:var(--c-word-tint); color:var(--c-word);}
.tool-card[data-cat="excel"] .icon-badge{background:var(--c-excel-tint); color:var(--c-excel);}
.tool-card[data-cat="ppt"] .icon-badge{background:var(--c-ppt-tint); color:var(--c-ppt);}
.tool-card[data-cat="image"] .icon-badge{background:var(--c-image-tint); color:var(--c-image);}
.tool-card[data-cat="security"] .icon-badge{background:var(--c-security-tint); color:var(--c-security);}

/* ============ Deploy note ============ */
.deploy-note{padding:10px 24px 90px;}
.deploy-card{padding:30px; max-width:820px; margin:0 auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);}
.deploy-card h3{margin-bottom:12px; font-size:1.1rem;}
.deploy-card p{color:var(--text-muted); font-size:0.94rem;}

/* ============ Footer ============ */
.site-footer{padding:30px 24px 46px; color:var(--text-faint); font-size:0.85rem; text-align:center; border-top:1px solid var(--border);}

/* ============ Workspace modal ============ */
.workspace-overlay{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  background:rgba(17,20,28,0.45); backdrop-filter:blur(3px); padding:24px;
}
.workspace-overlay.open{display:flex;}
.workspace{
  width:100%; max-width:500px; max-height:88vh; overflow-y:auto;
  padding:28px; position:relative; background:var(--surface); border-radius:var(--radius-lg);
  box-shadow:0 30px 70px -20px rgba(17,20,28,0.35);
  animation:popIn .3s var(--ease);
}
@keyframes popIn{from{opacity:0; transform:translateY(12px) scale(0.98);} to{opacity:1; transform:none;}}
.workspace-close{position:absolute; top:16px; right:16px; background:#f1f2f6; border:none; color:var(--text-muted); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:0.9rem;}
.workspace-close:hover{color:var(--text-primary); background:#e6e8ef;}
.workspace-head{display:flex; gap:14px; margin-bottom:20px; padding-right:34px;}
.workspace-icon{width:42px; height:42px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--brand-tint); color:var(--brand);}
.workspace-head h3{font-size:1.1rem; margin-bottom:4px;}
.workspace-head p{color:var(--text-muted); font-size:0.85rem;}

.dropzone{
  border:1.5px dashed var(--border); border-radius:var(--radius-md); padding:26px 16px;
  text-align:center; cursor:pointer; transition:all .2s var(--ease); background:#fafbfc;
}
.dropzone.dragover{border-color:var(--brand); background:var(--brand-tint);}
.dropzone-inner{display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-muted);}
.dropzone-inner span{color:var(--brand); font-weight:700;}
.dropzone-inner small{color:var(--text-faint); font-size:0.78rem;}

.file-list{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px;}
.file-list li{display:flex; align-items:center; justify-content:space-between; background:#fafbfc; border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 14px; font-size:0.85rem;}
.file-list button{background:none; border:none; color:var(--danger); cursor:pointer; font-size:0.95rem;}

.tool-options{display:flex; flex-direction:column; gap:14px; margin-top:16px;}
.tool-options label{font-size:0.85rem; color:var(--text-muted); font-weight:600; display:flex; flex-direction:column; gap:6px;}
.tool-options input[type=text], .tool-options input[type=number], .tool-options select{
  background:#fafbfc; border:1px solid var(--border); color:var(--text-primary);
  padding:10px 12px; border-radius:var(--radius-sm); font-family:var(--font); font-size:0.9rem; font-weight:400;
}
.tool-options input:focus, .tool-options select:focus{outline:none; border-color:var(--brand);}
.tool-options .range-row{display:flex; align-items:center; gap:10px;}
.tool-options input[type=range]{accent-color:var(--brand);}

.workspace-submit{width:100%; margin-top:20px;}
.workspace-status{margin-top:14px; font-size:0.85rem; text-align:center; min-height:20px; color:var(--text-muted);}
.workspace-status.error{color:var(--danger);}
.workspace-status.success{color:var(--success);}

.spinner{width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,0.35); border-top-color:#fff; display:inline-block; animation:spin .7s linear infinite; margin-left:8px;}
@keyframes spin{to{transform:rotate(360deg);}}

a:focus-visible, button:focus-visible, .tool-card:focus-visible{outline:2px solid var(--brand); outline-offset:2px;}

/* ============ Dedicated tool pages ============ */
.breadcrumb{padding:18px 24px 0; font-size:0.85rem; color:var(--text-faint);}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:var(--brand);}
.breadcrumb span{margin:0 6px;}

.tool-page-hero{padding:36px 24px 8px; text-align:center;}
.tool-page-hero h1{font-size:clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom:14px;}
.tool-page-intro{color:var(--text-muted); font-size:1.02rem; max-width:60ch; margin:0 auto;}

.tool-widget-section{padding:34px 24px 10px; display:flex; justify-content:center;}
.tool-widget-section .workspace{
  width:100%; max-width:560px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:30px; box-shadow:0 20px 50px -30px rgba(17,20,28,0.25);
}

.tool-steps-section, .tool-faq-section, .related-section{padding:40px 24px; max-width:760px; margin:0 auto;}
.tool-steps-section h2, .tool-faq-section h2, .related-section h2{font-size:1.4rem; margin-bottom:20px;}

.steps-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.steps-list li{display:flex; align-items:flex-start; gap:14px; color:var(--text-muted); font-size:0.98rem;}
.step-num{
  flex-shrink:0; width:28px; height:28px; border-radius:50%; background:var(--brand-tint); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem;
}

.faq-list{display:flex; flex-direction:column; gap:10px;}
.faq-item{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px;}
.faq-item summary{cursor:pointer; font-weight:600; font-size:0.96rem; list-style:none;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:'+'; display:inline-block; width:18px; color:var(--brand); font-weight:800;}
.faq-item[open] summary::before{content:'–';}
.faq-item p{margin-top:10px; color:var(--text-muted); font-size:0.92rem; line-height:1.6;}

.related-links{display:flex; flex-wrap:wrap; gap:10px;}
.related-link{
  padding:9px 16px; border-radius:999px; border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); font-size:0.88rem; font-weight:600; transition:all .2s var(--ease);
}
.related-link:hover{border-color:var(--border-hover); color:var(--brand);}