/* ==========================================================================
   site.css — hand-authored styles for the multi-page SEO rebuild.
   NOT generated by scripts/extract.mjs (that script owns assets/shell.css).
   Loads AFTER assets/shell.css and only adds/overrides what the shell lacks:
     · home page (header, hero, tool grid, SEO sections, footer)
     · tool page wrapper + intro + stage + SEO block
   All colours come from the shell design tokens so dark mode works for free.
   ========================================================================== */

/* ---------- 0. Home page is a document, not an app shell ---------- */
body[data-page="home"] {
  display: block;
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

/* anchor hygiene: shell.css has no global <a> reset, and the nav is now <a>-based */
a.nav-item,
a.mobile-nav-item,
a.site-brand,
a.mobile-header-title,
a.tool-card,
a.language-option { text-decoration: none; }

/* ---------- 0b. Breadcrumb (tool pages) ---------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  padding: 0;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
.breadcrumb .sep { color: var(--border); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 620; }

/* ---------- 1. Site header (home / 404) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.site-brand {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.site-brand strong {
  color: var(--text);
  font-size: 1.06rem;
  line-height: 1.15;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.site-brand span {
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.2;
}
.site-header .footer-preferences {
  width: auto;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
}
.site-header .language-options { margin-right: 0; }

/* quick-link strip in the home header (hidden on narrow screens below) */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 16px;
  min-width: 0;
}
.site-nav a {
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color 130ms ease, border-color 130ms ease;
}
.site-nav a:hover {
  border-bottom-color: var(--primary);
  color: var(--primary);
}

/* language switcher is rendered as <a> links (crawlable zh <-> en) */
a.language-option {
  display: grid;
  place-items: center;
  text-decoration: none;
  line-height: 1;
}
a.language-option.active { font-weight: 700; }

/* ---------- 2. Home layout ---------- */
.home-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 34px 24px 0;
}
.home-hero {
  padding: 26px 28px 30px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:
    radial-gradient(120% 150% at 0% 0%, var(--primary-soft) 0%, transparent 58%),
    var(--panel-bg);
  box-shadow: var(--shadow);
}
.home-hero h1 {
  margin: 0;
  color: var(--text);
  font-size: 2.1rem;
  line-height: 1.16;
  letter-spacing: -.03em;
}
.home-hero p {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.6;
}
.home-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.home-badges > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .72rem;
  font-weight: 620;
  line-height: 1.3;
}
.home-badges > span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ea580c;
  flex: 0 0 auto;
}
.home-section-title {
  margin: 40px 0 0;
  color: var(--text);
  font-size: 1.16rem;
  letter-spacing: -.01em;
}

/* ---------- 3. Tool grid + cards ---------- */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 18px 16px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-bg);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.tool-card:hover,
.tool-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .1);
}
.tool-card-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 1.16rem;
  font-weight: 800;
  line-height: 1;
}
.tool-line-icon { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.tool-card-icon svg { width:26px; height:26px; fill:none; }
.tool-card-icon { background:transparent; border:0; box-shadow:none; color:#496484; }
[data-theme="dark"] .tool-card-icon { color:#a5bddc; }
.mobile-brand-link { color:inherit; text-decoration:none; }
.phone-home-brand,.phone-home-preferences { display:none; }
#transfer-notice { position:fixed; z-index:300; left:50%; bottom:12px; transform:translateX(-50%); max-width:calc(100vw - 24px); padding:10px 14px; border:1px solid var(--border); border-radius:8px; color:var(--text); background:var(--panel-bg); box-shadow:var(--shadow); font-size:12px; }
#transfer-notice button { margin-left:8px; }
.tool-card-title {
  color: var(--text);
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.25;
}
.tool-card-sub {
  color: var(--muted);
  font-size: .7rem;
  line-height: 1.3;
}
.tool-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ea580c;
  color: #fff;
  font-size: .56rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- 4. "PC 版更佳" mini badge (nav + cards) ---------- */
.pc-preferred {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .52rem;
  font-weight: 650;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: 1px;
}
.tool-card .pc-preferred { margin: 6px 0 0; align-self: flex-start; }

/* ---------- 5. SEO sections (shared by home + tool pages) ---------- */
.home-seo,
.seo-block {
  max-width: 78ch;
  margin-top: 44px;
}
.seo-block { margin-top: 40px; }
.home-seo > h2,
.seo-block > h2 {
  margin: 34px 0 14px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--text);
  font-size: 1.12rem;
  letter-spacing: -.01em;
}
.home-seo > h2:first-child,
.seo-block > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* feature list */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 22px;
}
.feature-item {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding-left: 14px;
  border-left: 2px solid var(--primary-soft);
}
.feature-item strong {
  color: var(--text);
  font-size: .86rem;
  line-height: 1.35;
}
.feature-item span {
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.55;
}

/* steps */
.seo-block ol {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.7;
}
.seo-block ol li { margin-bottom: 6px; }
.seo-block ol li::marker { color: var(--primary); font-weight: 700; }

/* FAQ */
.faq-item {
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel-bg);
  overflow: hidden;
}
.faq-item summary {
  position: relative;
  padding: 12px 38px 12px 14px;
  color: var(--text);
  cursor: pointer;
  font-size: .82rem;
  font-weight: 650;
  line-height: 1.45;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item summary:hover { background: var(--surface-soft); }
.faq-item p {
  margin: 0;
  padding: 0 14px 13px;
  color: var(--muted);
  font-size: .79rem;
  line-height: 1.65;
}

/* related tools */
.related-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.related-tools a {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: .74rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 130ms ease, color 130ms ease, background 130ms ease;
}
.related-tools a:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

/* ---------- 6. Footer ---------- */
.site-footer {
  max-width: 1080px;
  margin: 56px auto 0;
  padding: 22px 24px 34px;
  border-top: 1px solid var(--border);
}
.site-footer p {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.7;
}
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- 7. Tool page wrapper (intro / stage / SEO) ---------- */
.tool-page-wrap {
  max-width: 1240px;
  margin: 0 auto;
}
.tool-intro {
  max-width: 78ch;
  margin-bottom: 18px;
}
.tool-intro h1 {
  margin: 0;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.022em;
}
.tool-intro p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.6;
}
.tool-stage { margin: 0; }
.tool-stage-embed {
  height: calc(100vh - 188px);
  min-height: 480px;
  max-width: 1240px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-bg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.tool-stage-embed .embedded-tool-frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* the extracted fragment carries its own spacing; trim it inside the wrapper */
.tool-stage .tool-page { padding-bottom: 0; }

/* ---------- 8. Responsive ---------- */
@media (max-width: 900px) {
  /* the quick-link strip collides with the brand on narrow screens —
     the tool card grid right below already covers every tool */
  .site-nav { display: none; }
  .site-header { padding: 10px 14px; gap: 10px; }
  .site-brand strong { font-size: .98rem; }
  .home-main { padding: 18px 14px 0; }
  .home-hero { padding: 20px 18px 22px; border-radius: 12px; }
  .home-hero h1 { font-size: 1.5rem; }
  .home-hero p { font-size: .84rem; }
  .home-section-title { margin-top: 30px; }
  .tool-grid {
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: 10px;
  }
  .tool-card { padding: 14px 12px 12px; }
  .tool-card-icon { width: 32px; height: 32px; font-size: 1rem; margin-bottom: 8px; }
  .tool-card-title { font-size: .84rem; }
  .tool-card-sub { font-size: .64rem; }
  .feature-list { grid-template-columns: 1fr; gap: 12px; }
  .home-seo, .seo-block { margin-top: 32px; }
  .home-seo > h2, .seo-block > h2 { margin: 26px 0 12px; padding-top: 18px; font-size: 1.02rem; }
  .site-footer { margin-top: 40px; padding: 18px 14px 30px; }
  .tool-intro { margin-bottom: 14px; }
  .tool-intro h1 { font-size: 1.24rem; }
  .tool-intro p { font-size: .78rem; }
  .tool-stage-embed {
    height: auto;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .tool-stage-embed .embedded-tool-frame { height: 78vh; min-height: 460px; }
}

@media (max-width: 420px) {
  .home-hero h1 { font-size: 1.32rem; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card-sub { display: none; }
}

/* ---------- 9. Print ---------- */
/* The approved phone home, on the same phone-shaped viewport gate as the editors.
   SEO descriptions stay in the document below the tool grid, not above the app. */
html[data-phone="true"] {
  --home-bg:#fafbfd; --home-card:#fff; --home-featured:#f3f7fe; --home-text:#152033;
  --home-muted:#727d8e; --home-icon:#496484; --home-border:#e4e9ef; --home-pill:#edf0f4;
  --home-pill-text:#5e6774; --home-blue:#2176df; --home-blue-soft:#e1edff;
  --home-shadow:0 3px 10px #233c5b06,0 1px 3px #233c5b03;
}
html[data-phone="true"][data-theme="dark"] {
  --home-bg:#131b27; --home-card:#1c2737; --home-featured:#202f45; --home-text:#edf3fb;
  --home-muted:#a1afc1; --home-icon:#a5bddc; --home-border:#2b3a4e; --home-pill:#2c394b;
  --home-pill-text:#bdc9d8; --home-blue:#79b2ff; --home-blue-soft:#293f60; --home-shadow:0 3px 12px #00000018;
}
html[data-phone="true"] body[data-page="home"] { background:var(--home-bg); color:var(--home-text); }
html[data-phone="true"] [data-page="home"] .site-header { display:none; }
html[data-phone="true"] .phone-home-brand { display:flex; flex-direction:column; padding:30px 21px 20px; }
html[data-phone="true"] .phone-home-brand strong { font-size:29px; font-weight:800; letter-spacing:-1px; line-height:1.1; }
html[data-phone="true"] .phone-home-brand span { color:var(--home-muted); margin-top:5px; font-size:15px; line-height:1.3; }
html[data-phone="true"] .phone-home-brand a { color:var(--home-muted); text-decoration:none; margin-top:4px; font-size:10px; line-height:1.4; }
html[data-phone="true"] .home-main { display:flex; flex-direction:column; padding:0 14px; }
html[data-phone="true"] .home-hero { order:1; margin-top:28px; }
html[data-phone="true"] .home-seo { order:2; }
html[data-phone="true"] .home-section-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
html[data-phone="true"] .tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin:0; }
html[data-phone="true"] .tool-card {
  display:grid; grid-template-columns:clamp(24px,7vw,32px) minmax(0,1fr) 5px; grid-template-rows:auto auto;
  min-height:clamp(84px,23vw,112px); padding:22px clamp(10px,3vw,16px) 14px;
  column-gap:clamp(7px,2.3vw,12px); row-gap:5px; align-items:center; align-content:center;
  color:var(--home-text); border:1px solid var(--home-border); border-radius:10px;
  background:var(--home-card); box-shadow:var(--home-shadow); transition:none;
}
html[data-phone="true"] .tool-card:has(.tool-card-badge) { background:var(--home-featured); }
html[data-phone="true"] .tool-card:hover { transform:none; }
html[data-phone="true"] .tool-card:active { background:var(--home-blue-soft); border-color:var(--home-blue); }
html[data-phone="true"] .tool-card::after { content:""; grid-column:3; grid-row:1 / span 2; width:5px; height:5px; border-top:1.2px solid var(--home-muted); border-right:1.2px solid var(--home-muted); transform:rotate(45deg); }
html[data-phone="true"] .tool-card-icon { grid-column:1; grid-row:1 / span 2; width:100%; height:auto; margin:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--home-icon); }
html[data-phone="true"] .tool-card-icon svg { width:100%; height:auto; }
html[data-phone="true"] .tool-card-title { grid-column:2; grid-row:1; min-width:0; margin:0; font-size:clamp(11px,3.35vw,16px); font-weight:650; line-height:1.35; }
html[data-phone="true"] .tool-card:not(:has(.pc-preferred)) { padding-top:14px; }
html[data-phone="true"] .tool-card:not(:has(.pc-preferred)) .tool-card-title { grid-row:1 / span 2; }
html[data-phone="true"] .tool-card-sub { display:none; }
html[data-phone="true"] .tool-card .pc-preferred { grid-column:2; grid-row:2; justify-self:start; align-self:center; margin:0; padding:3px 7px; border:0; border-radius:20px; background:var(--home-pill); color:var(--home-pill-text); font-size:clamp(8px,2.6vw,11px); font-weight:500; line-height:1.1; white-space:nowrap; }
html[data-phone="true"] .tool-card-badge { top:7px; right:7px; padding:3px 7px; border-radius:20px; color:var(--home-blue); background:var(--home-blue-soft); font-size:8px; line-height:1; font-style:normal; font-weight:600; text-transform:none; }
html[data-phone="true"] .phone-home-preferences { display:flex; margin-top:25px; padding:15px 0 24px; border-top:1px solid var(--home-border); justify-content:space-between; gap:24px; }
html[data-phone="true"] .phone-home-preferences :is(.language-options,.theme-options) { height:auto; grid-template-columns:repeat(2,36px); gap:0; padding:1px; border:1px solid var(--home-border); border-radius:24px; background:transparent; }
html[data-phone="true"] .phone-home-preferences :is(.language-option,.theme-option) { display:grid; place-items:center; width:36px; height:28px; min-width:0; min-height:0; padding:0; border-radius:24px; background:transparent; color:var(--home-muted); box-shadow:none; font-size:12px; }
html[data-phone="true"] .phone-home-preferences .language-option.active { color:#fff; background:#2375d9; }
html[data-phone="true"] .phone-home-preferences .theme-option.active { color:var(--home-blue); background:var(--home-blue-soft); }
html[data-phone="true"] .phone-home-preferences .theme-option { font-size:0; }
html[data-phone="true"] .phone-home-preferences .theme-option::before { font-size:19px; }
html[data-phone="true"] .mobile-header { min-height:48px; padding:2px 10px; box-shadow:none; flex-shrink:0; }
html[data-phone="true"] .mobile-header .mobile-header-title :is(span,.mobile-feedback) { display:none; }
html[data-phone="true"] #mobile-menu-toggle { min-height:44px; max-width:65%; font-size:12px; }
@media print {
  .site-header, .site-footer, .related-tools { display: none; }
}

/* Shared navigation uses outline artwork, never the legacy solid-icon fill. */
:is(.nav-item,.mobile-nav-item) svg.tool-line-icon { fill:none; stroke:currentColor; stroke-width:1.6; }
.sidebar-home-link { display:block; color:inherit; text-decoration:none; }
.sidebar-home-link:focus-visible { outline:2px solid var(--primary); outline-offset:4px; }
html:not([data-phone="true"]) .pc-preferred { display:none; }
html[data-phone="true"] .mobile-nav-item .pc-preferred { display:block; padding:0; margin-top:3px; border:0; border-radius:0; background:none; color:#c34d20; font-size:10px; font-weight:500; }
html[data-phone="true"][data-theme="dark"] .mobile-nav-item .pc-preferred { color:#ff9966; }
.site-header .footer-preferences { margin-left:auto; }
.home-main { padding-top:22px; }
.home-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.48fr); gap:24px; padding:22px 24px; color:#edf4ff; border-color:#334966; background:radial-gradient(ellipse at 8% 0%,#426084 0%,transparent 65%),radial-gradient(ellipse at 98% 100%,#294f62 0%,transparent 60%),linear-gradient(115deg,#25374d,#121e30); box-shadow:inset 0 1px 0 #ffffff1c,0 8px 25px #14233c16; }
.home-hero h1 { color:#f5f8ff; font-size:1.65rem; }
.home-hero p { color:#c1cede; font-size:.82rem; margin-top:8px; line-height:1.5; }
.home-badges { gap:6px; margin-top:12px; }
.home-badges > span { padding:3px 8px; color:#dae6f4; background:#ffffff08; border-color:#ffffff26; font-size:.62rem; }
.home-ad { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:7px; min-width:0; border-left:1px solid #ffffff26; padding-left:24px; }
.home-ad > span { font-size:9px; letter-spacing:.14em; color:#9fb9d7; }
.home-ad strong { font-size:15px; font-weight:600; }
.home-ad p { margin:0; font-size:11px; }
.home-ad a { color:#e3f2ff; font-size:12px; text-decoration:none; border-bottom:1px solid #85b6d5; padding-bottom:3px; margin-top:3px; }
html:not([data-phone="true"]) .tool-card { min-height:151px; padding:14px 16px; gap:4px; }
html:not([data-phone="true"]) .tool-card-icon { height:32px; margin-bottom:4px; }
html:not([data-phone="true"]) .tool-card-sub { line-height:1.4; }
.tool-title-row { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.feature-help { position:relative; flex:0 0 auto; z-index:20; }
.feature-help > summary { cursor:pointer; list-style:none; padding:5px 10px; border:1px solid var(--border); border-radius:8px 8px 4px 4px; color:var(--muted); background:var(--panel-bg); font-size:11px; white-space:nowrap; }
.feature-help > summary::-webkit-details-marker { display:none; }
.feature-help > summary:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.feature-popover { position:absolute; top:100%; right:0; width:min(520px,calc(100vw - 40px)); padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--panel-bg); box-shadow:0 12px 32px #0f172a26; color:var(--text); }
.feature-popover .feature-list { margin:0; }
.feature-popover .feature-item { font-size:12px; }
.feature-help:not([open]) > .feature-popover { display:none; }
@media (hover:hover) {
  .feature-help:hover > .feature-popover { display:block; }
  .feature-help:hover::details-content { content-visibility:visible; }
}
html[data-phone="true"] .home-hero { grid-template-columns:1fr; gap:18px; padding:20px 18px; }
html[data-phone="true"] .home-ad { border-left:0; border-top:1px solid #ffffff26; padding:16px 0 0; }
html[data-phone="true"] .feature-popover .feature-list { grid-template-columns:1fr; gap:12px; }

/* Tool-page heading doubles as feature help; the adjacent menu owns tool links. */
.tool-intro { max-width:none; }
html[data-phone="true"] .title-tool-menu > a.title-menu-phone { font-size:19.4px; }
.title-tool-menu a[aria-current="page"] { background:var(--primary-soft); font-weight:700; }
.preference-toggle { display:inline-flex; align-items:center; padding:2px; gap:0; min-height:34px; border:1px solid var(--border); color:var(--text); background:var(--panel-bg); text-decoration:none; cursor:pointer; }
.preference-toggle span { display:grid; place-items:center; min-width:32px; padding:4px 7px; font-size:13px; }
.preference-toggle span.active { background:var(--primary-soft); font-weight:700; }
.resize-quality-heading { display:flex; gap:4px; align-items:baseline; justify-content:space-between; }
#resize-estimate { font-size:10px; font-weight:400; color:var(--muted); text-align:right; }
.convert-export-actions { display:flex; gap:8px; width:100%; }
.convert-export-actions .btn { flex:1; }
.lasso-tool-switch { flex:0 0 auto; flex-wrap:nowrap; gap:4px; }
.lasso-selection-switch { display:flex; flex:0 0 auto; margin-left:auto; gap:4px; }
.lasso-selection-switch .btn { padding:6px 8px; min-height:44px; }
.lasso-preview-options { display:flex; align-items:center; justify-content:space-between; gap:10px; grid-column:1/-1; }
.lasso-background-label { display:flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
html[data-phone="true"] .lasso-preview-options { grid-row:1; }
html[data-phone="true"] .lasso-tool-switch .btn { min-width:36px; padding:6px; }
#convert-dropzone { position:relative; }
#convert-result-meta { grid-column:1/-1; }
.convert-controls-column .tool-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); align-items:end; }
.convert-controls-column .tool-row > div:has(#convert-quality) { grid-column:1/-1; grid-row:1; }
.convert-controls-column .tool-row > div:has(#convert-format) { grid-column:1; grid-row:2; min-width:0; }
.convert-controls-column #convert-format { min-width:0; width:100%; }
.convert-controls-column #btn-do-convert { grid-column:2; grid-row:2; margin:0; height:42px; }
.convert-controls-column .convert-export-actions,.convert-controls-column #convert-format-hint { grid-column:1/-1; }
#convert-dropzone #convert-change-images { display:none; position:absolute; right:8px; top:8px; z-index:5; min-height:35px; padding:6px 10px; }
#convert-dropzone.loaded #convert-change-images { display:block; }
.resize-controls-column .tool-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.resize-controls-column .tool-row > * { grid-column:1/-1; min-width:0; }
.resize-controls-column .tool-row > div:has(#resize-format) { grid-column:1; }
.resize-controls-column .tool-row > div:has(#resize-quality) { grid-column:2; }
.resize-controls-column #resize-format { min-width:0!important; width:100%; }
.resize-controls-column .quality-control { height:42px; width:100%; min-width:0; }
.resize-controls-column .quality-control input { flex:1; min-width:0; width:0; }
.lasso-file-bar { display:none!important; }
.lasso-heading-replace { margin-left:auto; padding:4px 10px; min-height:32px; font-size:12px; white-space:nowrap; }
html[data-phone="true"] .lasso-tool-switch .btn,html[data-phone="true"] .lasso-selection-switch .btn { min-height:35px; height:35px; padding-block:3px; }
html[data-phone="true"] #lasso-background { font-size:12.4px; height:35px; min-height:35px; width:111px; padding:4px 8px; }
html[data-phone="true"] #lasso-wrapper { width:100%; aspect-ratio:1; height:auto; min-height:0; max-height:none; box-sizing:border-box; }
#lasso-canvas { background-color:#fff; background-image:conic-gradient(#dce3ec 25%,transparent 0 50%,#dce3ec 0 75%,transparent 0); background-size:20px 20px; }
#convert-delete { display:none; position:absolute; right:8px; top:8px; z-index:5; min-height:36px; padding:6px 10px; }
#convert-dropzone.loaded #convert-delete { display:block; }
html[data-phone="true"] .convert-preview-column #convert-dropzone { width:100%; aspect-ratio:1; height:auto; min-height:0; max-height:none; }
html[data-phone="true"] #convert-dropzone .image-upload-preview { position:absolute; inset:0; width:100%; height:100%; overflow:hidden; touch-action:none; }
html[data-phone="true"] #convert-preview { transform-origin:center; user-select:none; -webkit-user-drag:none; }
.lasso-tool-switch svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.lasso-tool-switch .btn { min-width:44px; min-height:44px; display:grid; place-items:center; }
body .lasso-tool-switch button[aria-pressed="true"],body .lasso-selection-switch button[aria-pressed="true"] { background:var(--text); color:var(--panel-bg); border-color:var(--text); }
.tool-title-row { justify-content:flex-start; align-items:flex-end; gap:10px; }
.tool-title-row > p { flex:1; min-width:0; margin:0; font-size:12px; line-height:1.45; }
.title-feature-help > summary { padding:0; border:0; border-radius:0; background:none; white-space:normal; cursor:help; }
.title-feature-help { flex:0 1 auto; min-width:0; }
.title-feature-help .feature-popover { left:0; right:auto; }
.title-tool-switcher { position:relative; flex:0 0 auto; z-index:25; }
.title-tool-switcher > summary { list-style:none; display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--border); border-radius:6px; background:var(--panel-bg); cursor:pointer; }
.title-tool-switcher > summary::-webkit-details-marker { display:none; }
.title-tool-switcher > summary svg { width:16px; height:16px; fill:none; stroke:var(--text); stroke-width:1.7; }
.title-tool-switcher[open] > summary svg { transform:rotate(180deg); }
.title-tool-menu { position:absolute; top:calc(100% + 5px); left:0; width:260px; max-width:calc(100vw - 40px); max-height:65vh; overflow-y:auto; padding:6px; background:var(--panel-bg); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px #0f172a26; }
.title-tool-menu .mobile-nav-item { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px; text-decoration:none; color:var(--text); }
.title-tool-menu .mobile-nav-item:hover { background:var(--primary-soft); }
[data-wide-workspace="true"] .scroll-area { padding:0; }
[data-wide-workspace="true"] .tool-page-wrap { max-width:none; width:100%; }
[data-wide-workspace="true"] .tool-intro { padding:16px 20px; margin:0; }
[data-wide-workspace="true"] .tool-stage-embed { border:0; border-radius:0; box-shadow:none; width:100%; }
[data-wide-workspace="true"] .embedded-tool-frame { border:0; border-radius:0; }
html[data-phone="true"] .tool-title-row { flex-wrap:wrap; }
html[data-phone="true"] .tool-title-row > p { flex-basis:100%; }
html[data-phone="true"] [data-wide-workspace="true"] .tool-intro { padding:12px; }
html[data-phone="true"] .title-feature-help .feature-popover { width:calc(100vw - 64px); }
html[data-phone="true"] body[data-page="tool"] .mobile-header { display:none !important; }
.title-menu-phone { display:none; }
html[data-phone="true"] .title-tool-menu .title-menu-phone { display:flex; }
html[data-phone="true"] .title-tool-menu .footer-preferences { padding:10px; border-top:1px solid var(--border); justify-content:space-between; }

/* Embedded editors must share their viewport with the host, not retain the
   legacy 680px iframe minimum inside a smaller, clipped stage. */
body[data-wide-workspace="true"] { height:100dvh; }
[data-wide-workspace="true"] .tool-page-wrap { display:flex; flex-direction:column; height:100%; min-height:0; }
[data-wide-workspace="true"] .tool-intro { flex:0 0 auto; }
[data-wide-workspace="true"] .tool-stage-embed { position:relative; flex:1 0 400px; height:auto; min-height:400px; max-width:none; }
[data-wide-workspace="true"] .tool-stage-embed .embedded-tool-frame { position:absolute; inset:0; width:100%; height:100%; min-height:0; max-height:none; }
html[data-phone="true"] [data-wide-workspace="true"] .tool-stage-embed { flex-basis:360px; min-height:360px; }

/* Shared image picker: available in the multi-page shell as well as the SPA. */
.image-upload-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; width:100%; text-align:center; }
.image-upload .image-upload-preview { display:none; }
.image-upload.loaded > :is(.image-upload-empty,input[type="file"]) { display:none; }
#convert-dropzone.loaded { padding:0; border:1px solid var(--border); cursor:default; overflow:hidden; }
#convert-dropzone.loaded .image-upload-preview { display:flex; width:100%; height:100%; min-height:0; margin:0; padding:12px; border:0; border-radius:0; box-sizing:border-box; }
#convert-dropzone .preview-img { display:block; max-width:100%; max-height:100%; width:100%; height:100%; object-fit:contain; }
#convert-file-list { margin:12px 0; }
#pdf-dropzone.loaded { cursor:default; }
#pdf-dropzone.loaded #pdf-staging { display:flex; flex-wrap:wrap; align-content:flex-start; justify-content:center; width:100%; max-height:100%; overflow:auto; margin:0; }
#pdf-staging .add-btn-small input { position:absolute; }
html[data-phone="true"] :is(.tool-card,.mobile-nav-item) .pc-preferred {color:#2671ce;}
html[data-phone="true"][data-theme="dark"] :is(.tool-card,.mobile-nav-item) .pc-preferred {color:#85b8ff;}
html[data-phone="true"] :is(.tool-card,.mobile-nav-item) .pc-required {color:#d33333;}
html[data-phone="true"][data-theme="dark"] :is(.tool-card,.mobile-nav-item) .pc-required {color:#ff8585;}

/* Keep lasso navigation and image controls complete on phone screens. */
#lasso-replace[hidden] { display:none !important; }
.lasso-zoom .lasso-magnifier-toggle { display:flex; align-items:center; gap:4px; flex:0 0 auto; white-space:nowrap; margin:0; font-size:12px; }
.lasso-zoom #lasso-magnifier-toggle { flex:0 0 auto; width:14px; height:14px; margin:0; }
html[data-phone="true"] .lasso-zoom { gap:6px; }
html[data-phone="true"] .lasso-zoom > input[type="range"] { width:0; flex:1 1 0; }
html[data-phone="true"] .title-tool-menu { max-height:calc(100dvh - 64px); }
html[data-phone="true"] .title-tool-menu .mobile-nav-item { padding-block:7px; }

html[data-phone="true"] .tool-card-badge { color:#fff; background:#ea580c; }
.home-ad a { overflow-wrap:anywhere; }

/* Shell pages do not carry the embedded editors' data-ui attribute. */
html[data-theme="dark"] #tool-lasso button:is([data-lasso-tool],[data-lasso-operation])[aria-pressed="true"] { background:#fff; color:#111; border-color:#fff; box-shadow:none; }
html .tool-card-badge,
html[data-phone="true"] .tool-card-badge { background:#000; color:#fff; }
html[data-theme="dark"] .tool-card-badge { background:#fff; color:#000; }

/* Keep preferences and advertising visible while only the tool list scrolls. */
.sidebar { height:100dvh; min-height:0; overflow:hidden; }
.sidebar-brand,.sidebar-footer { flex-shrink:0; }
.sidebar-tools { flex:1 1 0; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.sidebar-tools .nav-item { flex-shrink:0; }

.sidebar-group-button {display:flex;align-items:center;gap:9px;width:100%;min-height:48px;padding:11px 14px;border:0;border-right:2px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:12px;text-align:left;cursor:pointer;}
.sidebar-group-button>span:not(.tool-glyph):not(.sidebar-group-arrow) {flex:1;min-width:0;}
.sidebar-group-button.active,.sidebar-group-button:hover,.sidebar-group-button[aria-expanded=true] {background:var(--primary-soft);color:var(--primary);}
.sidebar-group-button.active {border-right-color:var(--primary);font-weight:700;}
.sidebar-group-button:focus-visible {outline:2px solid var(--primary);outline-offset:-3px;}
.sidebar-group-arrow {font-size:20px;}
.sidebar-submenu {position:fixed;width:244px;max-height:calc(100dvh - 16px);overflow-y:auto;padding:6px;background:var(--panel-bg);border:1px solid var(--border);box-shadow:4px 8px 24px #0002;z-index:100;}
.sidebar-submenu .nav-item {min-height:44px;padding:10px;}

.sidebar-group-button svg.tool-line-icon {fill:none;stroke:currentColor;stroke-width:1.6;}

.opencanvas-promo{display:none}
@media(min-width:761px){html:not([data-phone="true"]) .opencanvas-promo{display:flex;position:relative;overflow:hidden;min-width:0;min-height:114px;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:12px 14px;color:#fff!important;background:linear-gradient(90deg,#111d40e8,#111d4070 65%,#111d4010),url('/assets/opencanvas-promo-20261017.png') center/cover;border:1px solid #7d87e9;box-shadow:0 5px 20px #4159b62b;text-decoration:none;transition:transform .18s,box-shadow .18s}.opencanvas-promo:hover{transform:translateY(-2px);box-shadow:0 8px 24px #4159b64d}.opencanvas-promo strong{font-size:23px;line-height:1.1;letter-spacing:-.6px;color:#fff}.opencanvas-promo>span:not(.opencanvas-promo-label){font-size:11px;line-height:1.4;max-width:100%;color:#f1efff}.opencanvas-promo .opencanvas-promo-label{font-size:9px;letter-spacing:1.2px;color:#d2d4ff}.opencanvas-promo b{font-size:10px;line-height:1.4;color:#fff0d9;background:#ad502abf;padding:3px 8px;border-radius:4px}}
.home-tool-group + .home-tool-group {margin-top:28px;}
.home-group-title {font-size:18px;line-height:1.4;margin:0 0 12px;color:var(--text);}
.home-tool-group .tool-grid {grid-template-columns:repeat(auto-fit,minmax(210px,1fr));}
@media(max-width:600px){.home-tool-group + .home-tool-group{margin-top:22px}.home-group-title{font-size:16px}.home-tool-group .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

@media(min-width:761px){
 .home-tool-groups {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px;}
 .home-tool-groups .home-tool-group {grid-column:span 4;margin:0;min-width:0;}
 .home-tool-groups .home-tool-group-half {grid-column:span 2;}
 .home-tool-groups .tool-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
 .home-tool-groups .home-tool-group-half .tool-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
 html:not([data-phone="true"]) .home-tool-groups .tool-card {min-height:114px;padding:10px 14px;gap:3px;}
 html:not([data-phone="true"]) .home-tool-groups .tool-card-icon {height:24px;margin-bottom:2px;}
 html:not([data-phone="true"]) .home-tool-groups .tool-card-icon svg {width:22px;height:22px;}
 html:not([data-phone="true"]) .home-tool-groups .tool-card-sub {font-size:12px;line-height:1.35;}
}

.home-group-title {font-size:16px;}
#home-group-0 {margin-top:13px;}
html:not([data-phone="true"]) .home-main > .home-hero {min-height:119px;padding-top:13px;padding-bottom:13px;align-items:center;}

html[data-phone="true"] .phone-home-brand {padding-top:25px;padding-bottom:15px;position:sticky;top:0;z-index:30;background:var(--home-bg,var(--bg));}
.mobile-tool-group {border-bottom:1px solid var(--border);}
.mobile-tool-group>summary {display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;}
.mobile-tool-group>summary::-webkit-details-marker {display:none;}
.mobile-tool-group>summary::after {content:'';display:block;flex:0 0 auto;width:10px;height:6px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%);align-self:center;margin-left:12px;}
.mobile-tool-group[open]>summary::after {transform:rotate(180deg);}
.mobile-tool-group>.mobile-nav-item {padding-left:24px;font-size:13px;}

@media(min-width:901px){html:not([data-phone="true"]) .title-tool-switcher {display:none;}}

.mobile-tool-group[open] {background:var(--surface-muted);}
.mobile-tool-group>summary {background:var(--panel-bg);}
.mobile-tool-group>.mobile-nav-item {background:transparent;border-left:2px solid var(--border);margin-left:10px;}
.mobile-tool-group>.mobile-nav-item[aria-current="page"] {background:var(--primary-soft);border-left-color:var(--primary);}

/* ---------------- Guides (independent tutorial pages) ---------------- */
.guide-article { max-width: 760px; margin: 0 auto; padding: 8px 4px 40px; }
.guide-header { margin-bottom: 22px; }
.guide-eyebrow { color: var(--primary, #4f8cff); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 6px; }
.guide-header h1 { font-size: 30px; line-height: 1.22; margin: 0 0 12px; }
.guide-lede { font-size: 17px; line-height: 1.6; color: var(--muted, #5b6b86); margin: 0 0 8px; }
.guide-meta { font-size: 13px; color: var(--muted, #5b6b86); opacity: .8; margin: 0; }
.guide-body h2 { font-size: 22px; margin: 30px 0 10px; line-height: 1.3; }
.guide-body h3 { font-size: 17px; margin: 18px 0 6px; color: var(--text, #1a2233); }
.guide-body p { font-size: 16px; line-height: 1.72; margin: 0 0 14px; color: var(--text, #26323f); }
.guide-body ul, .guide-body ol { margin: 0 0 16px; padding-left: 22px; }
.guide-body li { font-size: 16px; line-height: 1.7; margin: 6px 0; }
.guide-tip { background: var(--primary-soft, #eef4ff); border-left: 3px solid var(--primary, #4f8cff); border-radius: 8px; padding: 12px 16px; margin: 18px 0; }
.guide-tip-eyebrow { display: block; font-size: 12px; font-weight: 700; color: var(--primary, #4f8cff); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.guide-tip p { margin: 0; font-size: 15px; }
.guide-faq-q { margin-top: 22px !important; }
.guide-cta { background: var(--surface, #f7f9fc); border: 1px solid var(--border, #e3e8f0); border-radius: 12px; padding: 20px 22px; margin: 32px 0 8px; text-align: center; }
.guide-cta h2 { margin: 0 0 6px; font-size: 19px; }
.guide-cta p { margin: 0 0 14px; color: var(--muted, #5b6b86); }
.guide-cta-btn { display: inline-block; background: var(--primary, #4f8cff); color: #fff; font-weight: 600; padding: 10px 22px; border-radius: 8px; text-decoration: none; }
.guide-cta-btn:hover { opacity: .92; }
.guide-back { margin: 22px 0 0; font-size: 14px; }
.guide-crosslink { margin-top: 18px; }
.guide-crosslink a { font-weight: 600; }
.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 18px; }
.guide-card { display: block; position: relative; background: var(--surface, #f7f9fc); border: 1px solid var(--border, #e3e8f0); border-radius: 12px; padding: 18px 20px; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.guide-card:hover { border-color: var(--primary, #4f8cff); box-shadow: 0 4px 16px rgba(79,140,255,.12); }
.guide-card h2 { font-size: 17px; margin: 0 0 8px; line-height: 1.35; }
.guide-card p { font-size: 14px; line-height: 1.55; color: var(--muted, #5b6b86); margin: 0; }
.guide-card-arrow { position: absolute; right: 16px; bottom: 14px; color: var(--primary, #4f8cff); font-weight: 700; }
.guide-home-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 8px 0 4px; }
.guide-home-links a { color: var(--primary, #4f8cff); font-weight: 600; text-decoration: none; }
.guide-home-more { margin: 6px 0 0; }
.guide-home-more a { color: var(--muted, #5b6b86); font-weight: 600; text-decoration: none; }
.guide-home-more a:hover { color: var(--primary, #4f8cff); }

/* Guide pages render as standalone documents, not the app shell */
body[data-page="guide"],
body[data-page="guides-hub"] {
  display: block;
  height: auto;
  min-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.guide-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  min-height: 60vh;
}
body[data-page="guides-hub"] .guide-main > .guide-header { margin-bottom: 18px; }

/* GIF routes are distinct workflows; expose them without lengthening the sidebar. */
.home-gif-entry{min-width:0;display:flex;flex-direction:column}
.home-gif-entry>.tool-card{flex:1}
.home-gif-functions{border:1px solid var(--border);border-top:0;background:var(--panel-bg)}
.home-gif-functions>summary{padding:9px 12px;font-size:13px;cursor:pointer}
.gif-function-links{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px}
.gif-function-links a{display:inline-flex;align-items:center;min-height:34px;padding:5px 10px;border:1px solid var(--border);background:var(--panel-bg);color:var(--text);font-size:13px;text-decoration:none}
.gif-function-links a:hover,.gif-function-links a[aria-current="page"]{background:var(--primary-soft);color:var(--primary)}
.gif-function-links a:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.home-gif-functions .gif-function-links{padding:8px}

.save-apply-hint{display:block;position:relative;width:100%}
.save-apply-hint>button{width:100%}
.save-apply-hint:has(>button:disabled)>button{pointer-events:none}
.save-apply-hint:has(>button:disabled):is(:hover,:focus-visible)::after{content:attr(data-hint);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);padding:7px 10px;white-space:nowrap;background:#111827;color:white;border-radius:4px;font-size:13px;z-index:20;pointer-events:none}

/* Desktop editors dedicate the full workspace height to the canvas. */
@media (min-width:901px) {
  html:not([data-phone="true"]) body:is([data-tool="sprite-editor"],[data-tool="pixel-editor"],[data-tool="pix-remake"]) .tool-intro {
    display:none;
  }
}