:root {
  --primary: #6366f1;
  --primary-hover: #4f46e5;
  --primary-soft: #e0e7ff;
  --secondary: #0ea5e9;
  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --white: #fff;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
  --shadow-lg: 0 18px 36px rgb(15 23 42 / 12%);
  --focus-ring: 0 0 0 3px rgb(99 102 241 / 20%);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { min-height: 100%; margin: 0; color: var(--gray-700); background: var(--white); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 1.6; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
[hidden] { display: none !important; }
.site-shell { width: min(100% - 32px, 1180px); margin: 0 auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 12px; transform: translateY(-140%); border-radius: var(--radius-sm); color: var(--white); background: var(--gray-900); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: sticky; z-index: 100; top: 0; height: 72px; border-bottom: 1px solid rgb(226 232 240 / 85%); background: rgb(255 255 255 / 96%); backdrop-filter: blur(12px); }
.nav-shell { display: flex; height: 72px; align-items: center; justify-content: space-between; gap: 24px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--gray-900); text-decoration: none; }
.site-brand > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: var(--radius-md); color: var(--white); background: var(--primary); font-size: 13px; font-weight: 800; }
.site-brand > img { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--radius-md); object-fit: contain; }
.site-brand > strong { font-size: 20px; font-weight: 750; }
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav a { color: var(--gray-700); font-weight: 550; text-decoration: none; }
.site-nav a:hover { color: var(--primary-hover); }
.site-nav .nav-primary { min-height: 42px; padding: 8px 18px; border-radius: var(--radius-md); color: var(--white); background: var(--primary); }
.site-nav .nav-primary:hover { color: var(--white); background: var(--primary-hover); }
.nav-auth { position: relative; }
.nav-auth-trigger { display: inline-flex; min-height: 44px; align-items: center; gap: 10px; padding: 5px 12px 5px 6px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--gray-900); background: var(--white); font-weight: 650; cursor: pointer; box-shadow: var(--shadow-sm); }
.nav-auth-trigger:hover, .nav-auth-trigger[aria-expanded="true"] { border-color: var(--primary-soft); color: var(--primary-hover); }
.nav-auth-avatar { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; color: var(--white); background: var(--gray-900); font-size: 14px; font-weight: 750; }
.nav-auth-avatar.has-image, .user-profile-avatar.has-image { color: transparent; background: var(--gray-100); }
.nav-auth-avatar img, .user-profile-avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.nav-auth-label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-auth.has-menu::after { position: absolute; z-index: 179; top: 100%; right: 0; display: none; width: max(100%, 190px); height: 12px; content: ""; }
.nav-auth.has-menu:hover::after, .nav-auth.has-menu.is-open::after, .nav-auth.has-menu:focus-within::after { display: block; }
.nav-auth-menu { position: absolute; z-index: 180; top: calc(100% + 10px); right: 0; display: none; width: 190px; padding: 7px 0; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-lg); }
.nav-auth.is-open .nav-auth-menu, .nav-auth:hover .nav-auth-menu, .nav-auth:focus-within .nav-auth-menu { display: block; }
.nav-auth-menu::before { position: absolute; top: -7px; right: 28px; width: 12px; height: 12px; transform: rotate(45deg); border-top: 1px solid var(--gray-200); border-left: 1px solid var(--gray-200); background: var(--white); content: ""; }
.nav-auth-info { padding: 9px 14px 11px; border-bottom: 1px solid var(--gray-200); }
.nav-auth-info strong, .nav-auth-info span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-auth-info strong { color: var(--gray-900); font-size: 14px; }
.nav-auth-info span { color: var(--gray-500); font-size: 12px; }
.nav-auth-menu form { margin: 0; }
.nav-auth-menu a, .nav-auth-menu button { display: flex; width: 100%; min-height: 42px; align-items: center; padding: 8px 14px; border: 0; color: var(--gray-600); background: transparent; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; }
.nav-auth-menu a:hover, .nav-auth-menu button:hover { color: var(--gray-900); background: var(--gray-50); }
.nav-auth-menu button.is-danger { border-top: 1px solid var(--gray-200); color: var(--gray-600); }
.nav-auth-menu button.is-danger:hover { color: var(--danger); background: #fef2f2; }
.nav-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); background: var(--white); cursor: pointer; }
.nav-toggle span { display: block; height: 2px; margin: 4px 0; background: var(--gray-700); }

.home-hero { position: relative; display: flex; min-height: 690px; align-items: center; overflow: hidden; color: var(--white); background-color: var(--gray-900); background-image: url('/images/baicai-tools-hero.jpg'); background-position: center; background-size: cover; }
.home-hero::before { position: absolute; inset: 0; background: rgb(15 23 42 / 68%); content: ""; }
.hero-content { position: relative; z-index: 1; padding: 88px 0 112px; }
.hero-content h1 { max-width: 760px; margin: 14px 0 12px; color: var(--white); font-size: 58px; font-weight: 800; line-height: 1.14; letter-spacing: 0; }
.hero-badge { display: inline-flex; min-height: 32px; align-items: center; margin: 0; padding: 5px 12px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 9999px; color: rgb(255 255 255 / 88%); background: rgb(255 255 255 / 9%); font-size: 13px; font-weight: 650; }
.hero-lead { max-width: 680px; margin: 0 0 28px; color: rgb(255 255 255 / 82%); font-size: 20px; line-height: 1.7; }
.hero-search, .tool-search { display: flex; width: min(100%, 700px); min-height: 58px; padding: 6px; border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-lg); }
.hero-search input, .tool-search input { min-width: 0; flex: 1; border: 0; padding: 0 16px; color: var(--gray-800); background: transparent; }
.hero-search input:focus, .tool-search input:focus { outline: none; }
.hero-search button, .tool-search button { min-width: 112px; border: 0; border-radius: 6px; color: var(--white); background: var(--primary); font-weight: 650; cursor: pointer; }
.hero-search button:hover, .tool-search button:hover { background: var(--primary-hover); }
.hero-actions { display: flex; gap: 12px; margin-top: 20px; }
.button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; padding: 9px 20px; border: 1px solid transparent; border-radius: var(--radius-md); font-weight: 650; text-decoration: none; transition: background-color 180ms, border-color 180ms, color 180ms; }
.button-primary { color: var(--white); background: var(--primary); }
.button-primary:hover { background: var(--primary-hover); }
.button-ghost { border-color: rgb(255 255 255 / 35%); color: var(--white); background: rgb(255 255 255 / 6%); }
.button-ghost:hover { background: rgb(255 255 255 / 14%); }
.button-secondary { border-color: var(--gray-300); color: var(--gray-700); background: var(--white); }

.page-section { padding: 88px 0; }
.workbench-section { background: var(--gray-50); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 36px; }
.section-heading > p { max-width: 520px; margin: 0; color: var(--gray-500); }
.section-kicker { margin: 0 0 6px; color: var(--primary-hover); font-size: 13px; font-weight: 750; text-transform: uppercase; }
.section-heading h2, .split-section h2 { margin: 0; color: var(--gray-900); font-size: 38px; line-height: 1.25; letter-spacing: 0; }
.tool-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tool-card { position: relative; display: grid; min-height: 222px; grid-template-rows: auto 1fr auto; gap: 16px; padding: 24px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--gray-700); background: var(--white); text-decoration: none; transition: transform 200ms, border-color 200ms, box-shadow 200ms; }
.tool-card:hover { transform: translateY(-4px); border-color: var(--primary-soft); box-shadow: var(--shadow-lg); }
.tool-icon { display: grid; width: 50px; height: 50px; place-items: center; border-radius: var(--radius-md); color: #2563eb; background: #dbeafe; font-size: 18px; font-weight: 800; line-height: 1; text-align: center; }
.tool-icon.is-violet { color: #7c3aed; background: #ede9fe; }
.tool-icon.is-green { color: #059669; background: #d1fae5; }
.tool-icon.is-orange { color: #c2410c; background: #ffedd5; }
.tool-icon.is-pink { color: #be185d; background: #fce7f3; }
.tool-icon.is-cyan { color: #0e7490; background: #cffafe; }
.tool-card-content strong, .tool-card-content small { display: block; }
.tool-card-content strong { margin-bottom: 7px; color: var(--gray-900); font-size: 19px; }
.tool-card-content small { color: var(--gray-500); font-size: 14px; line-height: 1.65; }
.tool-meta { padding-top: 14px; border-top: 1px solid var(--gray-200); color: var(--gray-500); font-size: 13px; }
.tool-card.compact { min-height: 176px; }
.feature-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.feature-tags span { padding: 3px 8px; border-radius: 9999px; color: var(--gray-600); background: var(--gray-100); font-size: 12px; }
.notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 22px; padding: 14px 16px; border: 1px solid; border-radius: var(--radius-md); }
.notice strong, .notice span { display: block; }
.notice span { color: inherit; opacity: .82; }
.notice-warning { border-color: #fcd34d; color: #92400e; background: #fef3c7; }
.notice-info { border-color: #bfdbfe; color: #1e40af; background: #eff6ff; }
.empty-state { padding: 64px 24px; border: 1px dashed var(--gray-300); border-radius: var(--radius-md); text-align: center; background: var(--white); }
.empty-state h2, .empty-state h3 { margin: 0 0 8px; color: var(--gray-900); }
.empty-state p { margin: 0 0 20px; color: var(--gray-500); }
.split-section { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 80px; align-items: start; }
.split-section > div > p:last-child { color: var(--gray-500); }
.shortcut-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--gray-200); }
.shortcut-list a { display: flex; min-height: 58px; align-items: center; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--gray-200); color: var(--gray-700); font-weight: 600; text-decoration: none; }
.shortcut-list a:hover { color: var(--primary-hover); }
.inner-hero { position: relative; color: var(--white); background-color: var(--gray-900); background-image: url('/images/baicai-tools-hero.jpg'); background-position: center; background-size: cover; }
.inner-hero::before { position: absolute; inset: 0; background: rgb(15 23 42 / 76%); content: ""; }
.inner-hero-content { position: relative; z-index: 1; padding: 84px 0 88px; text-align: center; }
.inner-hero h1 { margin: 14px 0 10px; color: var(--white); font-size: 46px; line-height: 1.2; }
.inner-hero p:not(.hero-badge) { max-width: 700px; margin: 0 auto; color: rgb(255 255 255 / 72%); font-size: 18px; }
.inner-hero .hero-badge { margin: 0 auto; }
.tool-search { margin: 28px auto 0; }
.simple-hero .inner-hero-content { padding-top: 72px; padding-bottom: 72px; }
.catalog-summary { position: relative; z-index: 2; margin-top: -28px; }
.catalog-summary .site-shell { display: grid; min-height: 74px; grid-template-columns: repeat(3, 1fr); align-items: center; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-lg); }
.catalog-summary span { padding: 12px 24px; border-right: 1px solid var(--gray-200); text-align: center; }
.catalog-summary span:last-child { border-right: 0; }
.catalog-summary strong { margin-right: 4px; color: var(--gray-900); font-size: 22px; }
.catalog-section { padding: 60px 0 88px; background: var(--gray-50); }
.tools-entry { padding: 34px 0 22px; background: var(--gray-50); }
.tools-entry .site-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 520px); gap: 28px; align-items: end; }
.tools-entry-heading h1 { margin: 0 0 8px; color: var(--gray-900); font-size: 38px; line-height: 1.18; letter-spacing: 0; }
.tools-entry-heading span { display: block; max-width: 720px; color: var(--gray-500); font-size: 16px; }
.tools-entry-search { display: flex; min-height: 54px; padding: 6px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.tools-entry-search input { min-width: 0; flex: 1; border: 0; padding: 0 14px; color: var(--gray-800); background: transparent; }
.tools-entry-search input:focus { outline: none; }
.tools-entry-search button { min-width: 94px; border: 0; border-radius: 6px; color: var(--white); background: var(--primary); font-weight: 650; cursor: pointer; }
.tools-directory { padding: 18px 0 78px; background: var(--gray-50); }
.tools-directory-bar { margin-bottom: 18px; padding: 16px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.metric-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.metric-strip span { min-height: 34px; padding: 5px 11px; border-radius: 9999px; color: var(--gray-600); background: var(--gray-100); font-size: 13px; }
.metric-strip strong { margin-right: 4px; color: var(--gray-900); }
.filter-tabs { display: flex; gap: 10px; margin-bottom: 28px; padding-bottom: 4px; overflow-x: auto; }
.filter-tabs a { flex: 0 0 auto; min-height: 40px; padding: 7px 16px; border: 1px solid var(--gray-300); border-radius: 9999px; color: var(--gray-700); background: var(--white); font-weight: 600; text-decoration: none; }
.filter-tabs a:hover { border-color: var(--primary); color: var(--primary-hover); }
.filter-tabs a.is-active { border-color: var(--primary); color: var(--white); background: var(--primary); }
.filter-tabs small { margin-left: 4px; opacity: .72; }
.catalog-grid .tool-card { min-height: 278px; }
.compact-tool-grid .tool-card { min-height: 178px; padding: 18px; gap: 12px; }
.compact-tool-grid .tool-icon { width: 42px; height: 42px; font-size: 15px; }
.compact-tool-grid .tool-card-content strong { margin-bottom: 4px; font-size: 17px; }
.compact-tool-grid .tool-card-content small { font-size: 13px; line-height: 1.55; }
.compact-tool-grid .tool-meta { padding-top: 10px; }
.category-entry-card { grid-template-rows: 1fr auto; }
.category-entry-main { display: grid; min-width: 0; grid-template-rows: auto 1fr auto; gap: 12px; color: inherit; text-decoration: none; }
.category-tool-chips { padding-top: 12px; border-top: 1px solid var(--gray-200); }
.category-tool-chips a { padding: 3px 8px; border-radius: 9999px; color: var(--gray-600); background: var(--gray-100); font-size: 12px; text-decoration: none; }
.category-tool-chips a:hover { color: var(--primary-hover); background: var(--primary-soft); }
.category-tool-page { background: var(--gray-50); }
.single-tool-page { background: var(--gray-50); }
.single-tool-workbench { padding: 16px 0 36px; }
.compact-breadcrumbs { margin-bottom: 10px; font-size: 13px; }
.single-tool-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.single-tool-title { display: grid; min-width: 0; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; }
.single-tool-title .tool-icon { width: 52px; height: 52px; font-size: 18px; }
.single-tool-title p, .single-tool-title h1, .single-tool-title div > span { margin: 0; }
.single-tool-title p { color: var(--primary-hover); font-size: 13px; font-weight: 700; }
.single-tool-title h1 { margin: 1px 0; color: var(--gray-900); font-size: 32px; line-height: 1.2; letter-spacing: 0; }
.single-tool-title div > span { display: block; max-width: 920px; color: var(--gray-500); font-size: 15px; line-height: 1.55; }
.single-tool-header .button { flex: 0 0 auto; min-height: 40px; padding: 7px 14px; }
.tool-mode-tabs { display: flex; gap: 8px; margin-bottom: 12px; padding: 10px; overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.tool-mode-tabs a { display: inline-flex; flex: 0 0 auto; min-height: 38px; align-items: center; gap: 8px; padding: 5px 11px; border: 1px solid var(--gray-200); border-radius: 9999px; color: var(--gray-700); background: var(--gray-50); font-size: 13px; font-weight: 650; text-decoration: none; }
.tool-mode-tabs a:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--white); }
.tool-mode-tabs a.is-active { border-color: var(--primary); color: var(--white); background: var(--primary); }
.tool-mode-tabs .tool-icon { width: 26px; height: 26px; border-radius: 6px; font-size: 10px; }
.tool-mode-tabs a.is-active .tool-icon { color: var(--primary-hover); background: var(--white); }
.tool-workbench-panel { scroll-margin-top: 92px; }
.tool-workbench-panel .native-tool-panel { padding: 18px; }
.tool-workbench-panel .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.tool-panel-title { display: grid; min-width: 0; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.tool-panel-title .tool-icon { width: 40px; height: 40px; font-size: 14px; }
.tool-panel-title p, .tool-panel-title h2, .tool-panel-title div > span { margin: 0; }
.tool-panel-title p { color: var(--primary-hover); font-size: 12px; font-weight: 700; }
.tool-panel-title h2 { margin: 1px 0; color: var(--gray-900); font-size: 20px; line-height: 1.25; }
.tool-panel-title div > span { display: block; color: var(--gray-500); font-size: 13px; line-height: 1.5; }
.tool-workbench-panel .tool-io-grid { gap: 14px; }
.tool-workbench-panel .tool-box textarea, .tool-workbench-panel .tool-rich-output { min-height: 204px; }
.tool-workbench-panel .tool-actions { margin: 0 0 12px; }
.tool-workbench-panel .button { min-height: 40px; padding: 7px 14px; }
.tool-workbench-panel .tool-message { margin-top: 10px; }
.tool-after-section { padding: 48px 0; background: var(--white); }
.compact-related-section { padding: 48px 0 70px; }
.category-side-link { display: block; min-height: 42px; padding: 8px 0; border-top: 1px solid var(--gray-200); color: var(--gray-700); font-weight: 650; text-decoration: none; }
.category-side-link:last-child { border-bottom: 1px solid var(--gray-200); }
.category-side-link:hover, .category-side-link.is-active { color: var(--primary-hover); }

.workbench-header { padding: 30px 0 24px; border-bottom: 1px solid var(--gray-200); background: var(--white); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; color: var(--gray-500); font-size: 14px; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--primary-hover); }
.workbench-title-row { display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: center; }
.workbench-title-row .tool-icon { width: 64px; height: 64px; font-size: 22px; }
.workbench-title-row p, .workbench-title-row h1, .workbench-title-row div > span { margin: 0; }
.workbench-title-row p { color: var(--primary-hover); font-size: 13px; font-weight: 650; }
.workbench-title-row h1 { margin: 2px 0; color: var(--gray-900); font-size: 32px; line-height: 1.25; }
.workbench-title-row div > span { color: var(--gray-500); }
.local-badge { padding: 6px 12px; border-radius: 9999px; color: var(--success); background: #d1fae5; font-size: 13px; font-weight: 650; }
.content-section { padding: 80px 0; }
.content-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 72px; }
.content-layout h2, .article-content h2 { margin: 0 0 18px; color: var(--gray-900); font-size: 28px; }
.steps-list { padding: 0; list-style: none; counter-reset: steps; }
.steps-list li { position: relative; min-height: 52px; padding: 4px 0 22px 52px; border-left: 1px solid var(--gray-200); counter-increment: steps; }
.steps-list li:last-child { border-left-color: transparent; }
.steps-list li::before { position: absolute; left: -18px; top: 0; display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--primary-soft); border-radius: 50%; color: var(--primary-hover); background: var(--white); content: counter(steps); font-size: 13px; font-weight: 750; }
.article-content pre { min-height: 100px; margin: 0; padding: 16px; overflow: auto; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--gray-700); background: var(--gray-50); white-space: pre-wrap; word-break: break-word; }
.faq-list details { border-top: 1px solid var(--gray-200); }
.faq-list details:last-child { border-bottom: 1px solid var(--gray-200); }
.faq-list summary { padding: 16px 0; color: var(--gray-800); font-weight: 650; cursor: pointer; }
.faq-list details p { margin: -4px 0 18px; color: var(--gray-500); }
.related-section { padding: 72px 0 88px; background: var(--gray-50); }
.article-content { max-width: 860px; }
.article-content h2 { margin-top: 36px; }
.article-content h2:first-child { margin-top: 0; }
.article-content p { color: var(--gray-600); }

.tool-native-header { padding-top: 42px; }
.tool-run-section { padding: 42px 0 72px; background: var(--gray-50); }
.native-tool-panel { padding: 24px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.native-tool-panel .panel-heading { margin-bottom: 20px; }
.tool-options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.tool-option { display: grid; min-width: 132px; gap: 5px; color: var(--gray-600); font-size: 13px; font-weight: 650; }
.tool-option:has(input[type="checkbox"]) { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; }
.tool-option input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--primary); }
.tool-io-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tool-box { min-width: 0; }
.tool-box.is-wide { grid-column: 1 / -1; }
.tool-box label { display: block; margin-bottom: 7px; color: var(--gray-700); font-weight: 700; }
.tool-box textarea, .tool-box input[type="file"], .tool-option input, .tool-option select { width: 100%; border: 1px solid var(--gray-300); border-radius: 6px; color: var(--gray-800); background: var(--white); }
.tool-box textarea { min-height: 260px; padding: 12px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }
.tool-box input[type="file"] { min-height: 56px; padding: 14px; border-style: dashed; background: var(--gray-50); }
.tool-option input, .tool-option select { min-height: 42px; padding: 7px 10px; }
.tool-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tool-message { min-height: 24px; margin: 14px 0 0; color: var(--gray-500); }
.tool-message.is-success { color: var(--success); }
.tool-message.is-warning { color: var(--warning); }
.tool-message.is-error { color: var(--danger); }
.tool-rich-output { min-height: 260px; padding: 14px; overflow: auto; border: 1px solid var(--gray-200); border-radius: 6px; color: var(--gray-800); background: var(--gray-50); }
.tool-rich-output h1, .tool-rich-output h2, .tool-rich-output h3 { color: var(--gray-900); }
.tool-rich-output pre { overflow: auto; padding: 12px; border-radius: 6px; color: #e2e8f0; background: var(--gray-900); }
.tool-preview-media { display: flex; min-height: 260px; align-items: center; justify-content: center; overflow: auto; }
.tool-preview-media img, .tool-preview-media canvas, .tool-preview-media svg { max-width: 100%; max-height: 620px; }
.catalog-breadcrumbs { margin-bottom: 18px; }
.tool-guide-section { background: var(--white); }

.standalone-tool-page { background: var(--gray-50); }
.converter-notice { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid #fecdd3; border-left: 4px solid #fb7185; border-radius: var(--radius-md); color: #9f1239; background: #fff1f2; }
.converter-notice strong { flex: 0 0 auto; color: #9f1239; }
.converter-notice span { min-width: 0; color: inherit; }
.chatgpt-converter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.converter-panel { display: flex; min-width: 0; flex-direction: column; gap: 14px; }
.converter-panel-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.converter-panel-bar h2, .converter-panel-bar p { margin: 0; }
.converter-panel-bar h2 { color: var(--gray-900); font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.converter-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.converter-controls .button { min-height: 40px; padding: 7px 13px; }
.converter-controls .button:disabled { cursor: not-allowed; opacity: .55; }
.converter-select-label { color: var(--gray-500); font-size: 13px; font-weight: 650; }
.converter-select { min-height: 40px; max-width: 190px; border: 1px solid var(--gray-300); border-radius: 6px; color: var(--gray-800); background: var(--white); font-weight: 650; }
.converter-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.converter-stat { min-width: 0; padding: 10px 12px; border: 1px solid #d7e7e5; border-radius: 6px; background: #f5faf9; }
.converter-stat span, .converter-stat strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.converter-stat span { color: var(--gray-500); font-size: 13px; font-weight: 650; }
.converter-stat strong { color: var(--gray-900); font-size: 20px; line-height: 1.2; }
.converter-label { display: block; color: var(--gray-700); font-weight: 700; }
.converter-textarea, .converter-output { width: 100%; min-height: 520px; margin: 0; padding: 12px; overflow: auto; border: 1px solid var(--gray-300); border-radius: 6px; color: var(--gray-900); background: linear-gradient(180deg, var(--white) 0%, #fbfcfd 100%); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; tab-size: 2; }
.converter-textarea { resize: vertical; }
.converter-output { white-space: pre-wrap; word-break: break-word; }
.converter-message { margin-top: 0; }

.scan-login-section { min-height: calc(100vh - 72px); padding: 64px 0 86px; background: var(--gray-50); }
.scan-login-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 56px; align-items: center; }
.scan-login-copy h1, .scan-login-copy p { margin: 0; }
.scan-login-copy h1 { color: var(--gray-900); font-size: 42px; line-height: 1.18; letter-spacing: 0; }
.scan-login-copy p:not(.section-kicker) { max-width: 520px; margin-top: 12px; color: var(--gray-500); font-size: 17px; }
.scan-login-panel { padding: 28px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); text-align: center; box-shadow: var(--shadow-sm); }
.scan-login-panel h2 { margin: 0 0 18px; color: var(--gray-900); font-size: 22px; line-height: 1.25; letter-spacing: 0; }
.scan-login-panel p { min-height: 26px; margin: 14px 0 18px; color: var(--gray-500); }
.scan-login-code { display: grid; width: 240px; height: 240px; place-items: center; margin: 0 auto; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); color: var(--gray-500); }
.scan-login-code img { width: 216px; height: 216px; object-fit: contain; }
.scan-login-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.scan-login-actions .button { min-height: 42px; padding: 8px 14px; }

.user-profile-section { min-height: calc(100vh - 72px); padding: 64px 0 86px; background: var(--gray-50); }
.user-profile-layout { display: grid; place-items: start center; }
.user-profile-panel { width: min(100%, 620px); padding: 28px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.user-profile-header { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--gray-200); }
.user-profile-avatar { display: grid; width: 72px; height: 72px; place-items: center; border-radius: 50%; color: var(--white); background: var(--gray-900); font-size: 28px; font-weight: 800; }
.user-profile-header p, .user-profile-header h1, .user-profile-header span { margin: 0; }
.user-profile-header h1 { color: var(--gray-900); font-size: 32px; line-height: 1.2; letter-spacing: 0; }
.user-profile-header span { display: block; margin-top: 4px; color: var(--gray-500); }
.user-profile-meta { display: grid; gap: 0; margin: 22px 0; }
.user-profile-meta div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--gray-200); }
.user-profile-meta dt, .user-profile-meta dd { margin: 0; }
.user-profile-meta dt { color: var(--gray-500); }
.user-profile-meta dd { min-width: 0; overflow-wrap: anywhere; color: var(--gray-900); font-weight: 650; }
.user-profile-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.user-profile-actions .button { min-height: 42px; padding: 8px 14px; }

.shop-toolbar-section { padding: 34px 0 20px; border-bottom: 1px solid var(--gray-200); background: var(--white); }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.shop-title-block h1, .shop-title-block p { margin: 0; }
.shop-title-block h1 { color: var(--gray-900); font-size: 34px; line-height: 1.2; letter-spacing: 0; }
.shop-list-section, .shop-detail-section { padding: 28px 0 76px; background: var(--gray-50); }
.shop-search-bar { display: flex; min-height: 54px; margin-bottom: 14px; padding: 6px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.shop-search-bar input { min-width: 0; flex: 1; border: 0; padding: 0 14px; color: var(--gray-800); background: transparent; }
.shop-search-bar input:focus { outline: 0; }
.shop-search-bar button { min-width: 86px; border: 0; border-radius: 6px; color: var(--white); background: var(--primary); font-weight: 650; cursor: pointer; }
.shop-sort-tabs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; }
.shop-sort-tabs a { flex: 0 0 auto; min-height: 38px; padding: 7px 14px; border: 1px solid var(--gray-300); border-radius: 9999px; color: var(--gray-700); background: var(--white); font-weight: 650; text-decoration: none; cursor: pointer; }
.shop-sort-tabs a:hover { border-color: var(--primary); color: var(--primary-hover); }
.shop-sort-tabs a.is-active { border-color: var(--primary); color: var(--white); background: var(--primary); }
.shop-list-status { min-height: 28px; margin-bottom: 12px; color: var(--gray-500); font-size: 14px; }
.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.shop-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 160ms, box-shadow 160ms, border-color 160ms; }
.shop-card:hover { transform: translateY(-1px); border-color: var(--gray-300); box-shadow: var(--shadow-md); }
.shop-card:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.shop-card-icon { display: grid; width: 56px; height: 56px; place-items: center; overflow: hidden; border-radius: 10px; color: #fff; font-size: 20px; font-weight: 800; flex: 0 0 auto; }
.shop-card-icon img { width: 100%; height: 100%; object-fit: cover; }
.shop-g1 { background: linear-gradient(135deg, #f97316, #ef4444); }
.shop-g2 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.shop-g3 { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.shop-g4 { background: linear-gradient(135deg, #10b981, #22c55e); }
.shop-g5 { background: linear-gradient(135deg, #f59e0b, #f97316); }
.shop-g6 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.shop-g7 { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.shop-g8 { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.shop-card-info { display: grid; min-width: 0; gap: 3px; }
.shop-card-name { overflow: hidden; color: var(--gray-900); font-size: 15px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.shop-card-desc { display: -webkit-box; overflow: hidden; color: var(--gray-500); font-size: 12px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 2px; font-size: 11px; }
.shop-card-score { color: #d97706; font-weight: 600; }
.shop-card-likes { color: var(--gray-500); }
.shop-card-likes::before { content: '♡'; margin-right: 2px; color: var(--gray-400); }
.shop-card-cat { padding: 0 5px; border-radius: 9999px; color: var(--gray-600); background: var(--gray-100); }
.shop-card-date { color: var(--gray-400); margin-left: auto; }
.shop-preview-logo { width: 72px; height: 72px; border-radius: 14px; font-size: 26px; }
.shop-preview-logo img { width: 100%; height: 100%; object-fit: cover; }
.shop-logo { display: grid; place-items: center; overflow: hidden; }
.shop-preview-dialog { width: min(860px, calc(100vw - 40px)); max-height: min(86vh, 760px); padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--gray-700); box-shadow: var(--shadow-lg); }
.shop-preview-dialog::backdrop { background: rgb(15 23 42 / 58%); backdrop-filter: blur(5px); }
.shop-preview-panel { display: grid; max-height: min(86vh, 760px); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); }
.shop-preview-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 26px 18px; border-bottom: 1px solid var(--gray-200); }
.shop-preview-header h2, .shop-preview-header p { margin: 0; }
.shop-preview-header h2 { color: var(--gray-900); font-size: 26px; line-height: 1.25; letter-spacing: 0; }
.shop-preview-close { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid var(--gray-200); border-radius: 50%; color: var(--gray-700); background: var(--gray-50); font-size: 28px; line-height: 1; cursor: pointer; }
.shop-preview-close:hover { color: var(--gray-900); background: var(--gray-100); }
.shop-preview-body { min-height: 0; overflow-y: auto; padding: 22px 26px; }
.shop-preview-store { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: center; }
.shop-preview-logo { width: 72px; height: 72px; font-size: 24px; }
.shop-preview-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.shop-preview-facts div { min-width: 0; padding: 10px 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); }
.shop-preview-facts dt { margin-bottom: 2px; color: var(--gray-500); font-size: 12px; }
.shop-preview-facts dd { margin: 0; overflow: hidden; color: var(--gray-900); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.shop-preview-summary { margin: 18px 0 0; padding: 13px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--gray-600); background: var(--gray-50); }
.shop-preview-risk { margin-top: 18px; padding: 16px 18px; border: 1px solid #fecaca; border-left: 4px solid #ef4444; border-radius: var(--radius-md); color: #991b1b; background: #fef2f2; }
.shop-preview-risk strong, .shop-preview-risk p { margin: 0; }
.shop-preview-risk p { margin-top: 6px; line-height: 1.75; }
.shop-preview-goods { margin-top: 20px; }
.shop-preview-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.shop-preview-subheading strong { color: var(--gray-900); font-size: 16px; }
.shop-preview-subheading span { color: var(--gray-500); font-size: 13px; }
.shop-preview-empty { margin: 0; padding: 16px; border: 1px dashed var(--gray-300); border-radius: var(--radius-md); color: var(--gray-500); background: var(--gray-50); text-align: center; }
.shop-preview-goods-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-preview-goods-card { display: grid; min-width: 0; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: inherit; background: var(--gray-50); text-decoration: none; }
.shop-preview-goods-card:hover { border-color: var(--primary-soft); background: var(--white); }
.shop-preview-goods-content { min-width: 0; }
.shop-preview-goods-content strong { display: -webkit-box; overflow: hidden; color: var(--gray-900); font-size: 14px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-preview-goods-content small { display: block; overflow: hidden; margin-top: 4px; color: var(--gray-500); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.shop-preview-goods-content em { display: block; margin-top: 4px; color: var(--danger); font-size: 16px; font-style: normal; font-weight: 800; }
.shop-preview-actions { display: flex; justify-content: flex-end; gap: 12px; padding: 16px 26px; border-top: 1px solid var(--gray-200); background: var(--white); }
.shop-pagination { align-items: center; justify-content: center; margin-top: 22px; color: var(--gray-500); }
.shop-pagination button { min-height: 38px; padding: 7px 12px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); color: var(--gray-700); background: var(--white); cursor: pointer; }
.shop-pagination button:disabled { cursor: not-allowed; opacity: .5; }
.shop-loadmore-sentinel { display: flex; align-items: center; justify-content: center; margin-top: 28px; padding: 20px 0; }
.shop-loadmore-status { color: var(--gray-500); font-size: 14px; }
.shop-loadmore-sentinel.is-loading .shop-loadmore-status { position: relative; padding-left: 28px; }
.shop-loadmore-sentinel.is-loading .shop-loadmore-status::before { content: ''; position: absolute; left: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border: 2px solid var(--gray-300); border-top-color: var(--primary-500); border-radius: 50%; animation: shop-spin 0.8s linear infinite; }
.shop-loadmore-done { color: var(--gray-400); font-size: 13px; letter-spacing: 0.5px; }
@keyframes shop-spin { to { transform: rotate(360deg); } }
.shop-back-link { display: inline-flex; margin-bottom: 18px; color: var(--gray-600); font-weight: 650; text-decoration: none; }
.shop-detail { padding: 26px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.shop-detail-header { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.shop-detail-logo { width: 72px; height: 72px; font-size: 24px; }
.shop-detail-header h1, .shop-detail-header p { margin: 0; }
.shop-detail-header h1 { color: var(--gray-900); font-size: 34px; line-height: 1.2; letter-spacing: 0; }
.shop-detail-header div > p:not(.section-kicker) { margin: 8px 0 12px; color: var(--gray-500); }
.shop-cover { display: block; width: 100%; max-height: 360px; margin-top: 22px; border-radius: var(--radius-md); object-fit: cover; }
.shop-detail-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.shop-detail-metrics span { padding: 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); color: var(--gray-500); background: var(--gray-50); font-size: 13px; }
.shop-detail-metrics strong { display: block; color: var(--gray-900); font-size: 24px; line-height: 1.2; }
.shop-detail-body { max-width: 850px; color: var(--gray-600); }
.shop-detail-body p { margin: 0 0 12px; }
.shop-detail-actions { align-items: center; margin-top: 22px; }
.shop-detail-actions form, .user-profile-actions form, .scan-login-actions form { margin: 0; }
.shop-detail-actions button:not(.button) { min-height: 42px; padding: 8px 14px; border: 1px solid var(--gray-300); border-radius: var(--radius-md); color: var(--gray-700); background: var(--white); font-weight: 650; cursor: pointer; }
.shop-detail-actions button:not(.button).is-active { border-color: var(--success); color: var(--success); background: #d1fae5; }
.shop-detail-actions button:not(.button).is-down.is-active { border-color: var(--danger); color: var(--danger); background: #fee2e2; }
.shop-goods-panel { margin-top: 18px; padding: 22px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); }
.shop-goods-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.shop-goods-heading h2, .shop-goods-heading p { margin: 0; }
.shop-goods-heading h2 { color: var(--gray-900); font-size: 24px; line-height: 1.25; letter-spacing: 0; }
.shop-goods-heading > p { color: var(--gray-500); font-size: 13px; }
.shop-goods-search-bar { display: flex; min-height: 50px; margin-bottom: 14px; padding: 6px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); }
.shop-goods-search-bar input { min-width: 0; flex: 1; border: 0; padding: 0 12px; color: var(--gray-800); background: transparent; }
.shop-goods-search-bar input:focus { outline: 0; }
.shop-goods-search-bar button { min-width: 82px; border: 0; border-radius: 6px; color: var(--white); background: var(--primary); font-weight: 650; cursor: pointer; }
.shop-goods-filter-row { display: grid; grid-template-columns: 1fr; gap: 4px; margin-bottom: 6px; }
.shop-goods-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.shop-goods-card { display: grid; min-height: 172px; grid-template-rows: 1fr auto; gap: 12px; padding: 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--gray-50); }
.shop-goods-main { display: grid; min-width: 0; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; color: inherit; text-decoration: none; }
.shop-goods-image { display: grid; width: 56px; height: 56px; place-items: center; overflow: hidden; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); color: var(--gray-500); background: var(--white); font-size: 12px; font-weight: 750; }
.shop-goods-image img { width: 100%; height: 100%; object-fit: cover; }
.shop-goods-content { min-width: 0; }
.shop-goods-content strong { display: -webkit-box; overflow: hidden; color: var(--gray-900); font-size: 16px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-goods-content small { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--gray-500); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.shop-goods-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 11px; border-top: 1px solid var(--gray-200); color: var(--gray-500); font-size: 12px; }
.shop-goods-meta strong { color: var(--danger); font-size: 20px; line-height: 1.2; }
.shop-toast { position: fixed; z-index: 450; right: 24px; bottom: 24px; max-width: min(360px, calc(100vw - 48px)); padding: 12px 16px; border-radius: var(--radius-md); color: var(--white); background: var(--gray-900); box-shadow: var(--shadow-lg); }
.shop-toast[data-type="error"] { background: var(--danger); }
.shop-toast[data-type="success"] { background: var(--success); }

.shop-go-section { min-height: calc(100vh - 72px); padding: 110px 0 130px; background: var(--gray-50); }
.shop-go-page .shop-go-section { min-height: 100vh; }
.shop-go-shell { display: grid; min-height: calc(100vh - 312px); place-items: center; }
.shop-go-card { width: min(100%, 680px); padding: 32px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: 0 24px 70px rgb(15 23 42 / 12%); text-align: center; }
.shop-go-card h1, .shop-go-card p { margin: 0; }
.shop-go-card h1 { color: var(--gray-900); font-size: 30px; line-height: 1.25; letter-spacing: 0; }
.shop-go-lead { margin-top: 12px !important; color: var(--gray-500); font-size: 17px; }
.shop-go-lead strong { color: var(--primary-hover); }
.shop-go-risk { margin-top: 24px; padding: 18px 20px; border: 1px solid #fecaca; border-left: 4px solid #ef4444; border-radius: var(--radius-md); color: #991b1b; background: #fef2f2; text-align: left; }
.shop-go-risk strong, .shop-go-risk p { margin: 0; }
.shop-go-risk p { margin-top: 8px; line-height: 1.8; }
.shop-go-target { display: grid; gap: 6px; margin-top: 22px; padding: 13px 16px; border-radius: var(--radius-md); color: var(--gray-600); background: var(--gray-100); }
.shop-go-target span { overflow: hidden; color: var(--gray-900); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.shop-go-target code { overflow: hidden; color: var(--gray-600); font-family: inherit; text-overflow: ellipsis; white-space: nowrap; }
.shop-go-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }

.site-footer { padding: 60px 0 22px; color: rgb(255 255 255 / 64%); background: var(--gray-900); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(120px, 1fr)); gap: 44px; padding-bottom: 44px; }
.footer-brand { color: var(--white); }
.footer-grid > div p { max-width: 430px; }
.footer-grid nav { display: flex; flex-direction: column; gap: 8px; }
.footer-grid nav strong { margin-bottom: 6px; color: var(--white); }
.footer-grid nav a { text-decoration: none; }
.footer-grid nav a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 10%); font-size: 13px; }
.footer-records { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; }
.footer-records a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; white-space: nowrap; }
.footer-records a:hover { color: var(--white); }
.footer-records img { flex: 0 0 auto; width: 20px; height: 20px; }

.search-page { background: var(--white); }
.search-hero { position: relative; color: var(--white); background-color: var(--gray-900); background-image: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%); }
.search-hero::before { position: absolute; inset: 0; background: radial-gradient(120% 120% at 80% 0%, rgb(255 255 255 / 12%) 0%, rgb(15 23 42 / 28%) 60%, rgb(15 23 42 / 42%) 100%); content: ""; }
.search-hero-inner { position: relative; z-index: 1; padding: 72px 0 64px; max-width: 760px; }
.search-hero h1 { margin: 14px 0 12px; color: var(--white); font-size: 48px; font-weight: 800; line-height: 1.15; }
.search-hero-lead { max-width: 620px; margin: 0 0 26px; color: rgb(255 255 255 / 84%); font-size: 18px; line-height: 1.7; }
.search-bar { display: flex; width: min(100%, 680px); min-height: 60px; padding: 6px; border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-lg); }
.search-bar input { min-width: 0; flex: 1; border: 0; padding: 0 18px; color: var(--gray-800); background: transparent; font-size: 17px; }
.search-bar input:focus { outline: none; }
.search-bar button { min-width: 116px; border: 0; border-radius: 6px; color: var(--white); background: var(--primary); font-size: 16px; font-weight: 650; cursor: pointer; }
.search-bar button:hover { background: var(--primary-hover); }
.search-hero-hint { margin: 14px 0 0; color: rgb(255 255 255 / 70%); font-size: 13px; }
.search-discover { background: var(--gray-50); }
.search-suggest-block { margin-bottom: 40px; }
.search-suggest-block:last-of-type { margin-bottom: 24px; }
.search-suggest-block h2 { margin: 0 0 18px; color: var(--gray-900); font-size: 28px; line-height: 1.25; }
.search-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.search-chip { display: inline-flex; min-height: 46px; align-items: center; padding: 8px 20px; border: 1px solid var(--gray-300); border-radius: 9999px; color: var(--gray-700); background: var(--white); font-size: 15px; font-weight: 650; text-decoration: none; transition: border-color 160ms, color 160ms, background-color 160ms, transform 160ms; }
.search-chip:hover { border-color: var(--primary); color: var(--primary-hover); background: var(--primary-soft); transform: translateY(-1px); }
.search-chip-hot { border-color: #fbcfe8; color: #be185d; background: #fdf2f8; }
.search-chip-hot:hover { border-color: #ec4899; color: #9d174d; background: #fce7f3; }
.search-discover-foot { margin-top: 8px; }
.search-results { padding: 32px 0 76px; background: var(--gray-50); }
.search-result-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.search-result-head h2 { margin: 0; color: var(--gray-900); font-size: 30px; line-height: 1.25; }
.search-result-count { margin: 0; color: var(--gray-500); font-size: 14px; white-space: nowrap; }
.search-filter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-bottom: 22px; }
.search-filter-row .filter-tabs:last-child { justify-content: flex-end; }
.compare-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.compare-card { display: grid; grid-template-rows: 1fr auto; gap: 12px; padding: 14px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-sm); transition: transform 160ms, border-color 160ms, box-shadow 160ms; }
.compare-card:hover { transform: translateY(-2px); border-color: var(--primary-soft); box-shadow: var(--shadow-lg); }
.compare-main { display: grid; min-width: 0; grid-template-columns: 60px minmax(0, 1fr); gap: 12px; color: inherit; text-decoration: none; }
.compare-image { display: grid; width: 60px; height: 60px; place-items: center; overflow: hidden; border: 1px solid var(--gray-200); border-radius: var(--radius-sm); color: var(--gray-500); background: var(--gray-50); font-size: 12px; font-weight: 750; }
.compare-image img { width: 100%; height: 100%; object-fit: cover; }
.compare-content { min-width: 0; }
.compare-content strong { display: -webkit-box; overflow: hidden; color: var(--gray-900); font-size: 16px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.compare-content small { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--gray-500); font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.compare-meta { display: flex; flex-direction: column; gap: 6px; padding-top: 11px; border-top: 1px solid var(--gray-200); color: var(--gray-500); font-size: 12px; }
.compare-store-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.compare-store { display: inline-flex; min-width: 0; max-width: 100%; }
.compare-store a { overflow: hidden; color: var(--primary-hover); font-weight: 650; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.compare-store a:hover { text-decoration: underline; }
.compare-updated { flex-shrink: 0; color: var(--gray-400); font-size: 12px; white-space: nowrap; }
.compare-price-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.compare-price { color: var(--danger); font-size: 20px; line-height: 1.2; }
.compare-market { text-decoration: line-through; }
.compare-cat { padding: 0 6px; border-radius: 9999px; color: var(--gray-600); background: var(--gray-100); }
.compare-stock { margin-left: auto; }
.compare-stock-count { color: var(--primary-hover); }
.compare-stock-note { color: var(--danger); }

@media (max-width: 991px) {
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: 64px; right: 16px; left: 16px; display: none; align-items: stretch; gap: 0; padding: 8px; border: 1px solid var(--gray-200); border-radius: var(--radius-md); background: var(--white); box-shadow: var(--shadow-lg); }
  .site-nav.is-open { display: flex; flex-direction: column; }
  .site-nav a { min-height: 46px; padding: 10px 12px; }
  .site-nav .nav-primary { margin-top: 4px; text-align: center; }
  .nav-auth { width: 100%; margin-top: 4px; }
  .nav-auth-trigger { width: 100%; justify-content: flex-start; }
  .nav-auth-menu { position: static; width: 100%; margin-top: 6px; box-shadow: var(--shadow-sm); }
  .nav-auth-menu::before { display: none; }
  .home-hero { min-height: 620px; }
  .hero-content h1 { font-size: 46px; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-section, .content-layout { grid-template-columns: 1fr; gap: 44px; }
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
  .tools-entry .site-shell { grid-template-columns: 1fr; align-items: start; }
  .tool-options { justify-content: flex-start; }
  .tool-io-grid { grid-template-columns: 1fr; }
  .tool-box.is-wide { grid-column: auto; }
  .tool-workbench-panel .panel-heading { flex-direction: column; }
  .chatgpt-converter-grid { grid-template-columns: 1fr; }
  .converter-panel-bar { flex-direction: column; }
  .converter-controls { justify-content: flex-start; }
  .converter-textarea, .converter-output { min-height: 380px; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-preview-goods-grid { grid-template-columns: 1fr; }
  .shop-goods-grid { grid-template-columns: 1fr; }
  .shop-detail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scan-login-layout { grid-template-columns: 1fr; gap: 28px; }
  .scan-login-copy { text-align: center; }
  .scan-login-copy p:not(.section-kicker) { margin-right: auto; margin-left: auto; }
}

@media (max-width: 767px) {
  .site-shell { width: min(100% - 32px, 1180px); }
  .home-hero { min-height: 570px; }
  .hero-content { padding: 72px 0 88px; }
  .hero-content h1 { font-size: 38px; }
  .hero-lead { font-size: 17px; }
  .hero-search, .tool-search { min-height: 54px; }
  .hero-search button, .tool-search button { min-width: 88px; }
  .hero-actions { flex-direction: column; }
  .page-section { padding: 64px 0; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section-heading h2, .split-section h2 { font-size: 28px; }
  .tool-grid { grid-template-columns: 1fr; }
  .tool-card { min-height: 192px; }
  .shortcut-list { grid-template-columns: 1fr; }
  .inner-hero-content { padding: 64px 0 72px; }
  .inner-hero h1 { font-size: 32px; }
  .inner-hero p:not(.hero-badge) { font-size: 16px; }
  .catalog-summary .site-shell { grid-template-columns: 1fr 1fr; }
  .catalog-summary span { border-bottom: 1px solid var(--gray-200); }
  .catalog-summary span:nth-child(2) { border-right: 0; }
  .catalog-summary span:last-child { grid-column: 1 / 3; border-bottom: 0; }
  .workbench-title-row { grid-template-columns: 54px 1fr; }
  .workbench-title-row .tool-icon { width: 54px; height: 54px; }
  .workbench-title-row h1 { font-size: 26px; }
  .local-badge { grid-column: 1 / 3; justify-self: start; }
  .content-section { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div { grid-column: 1 / 3; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 6px; }
  .footer-records { justify-content: flex-start; gap: 6px 12px; }
  .tools-entry { padding-top: 26px; }
  .tools-entry-heading h1 { font-size: 30px; }
  .tools-entry-search { min-height: 50px; }
  .single-tool-workbench { padding-top: 12px; }
  .single-tool-header { flex-direction: column; }
  .single-tool-title { grid-template-columns: 44px minmax(0, 1fr); }
  .single-tool-title .tool-icon { width: 44px; height: 44px; font-size: 15px; }
  .single-tool-title h1 { font-size: 25px; }
  .native-tool-panel { padding: 16px; }
  .tool-actions .button { flex: 1 1 140px; }
  .tool-panel-title { grid-template-columns: 36px minmax(0, 1fr); }
  .tool-panel-title .tool-icon { width: 36px; height: 36px; font-size: 12px; }
  .tool-panel-title h2 { font-size: 18px; }
  .tool-workbench-panel .tool-box textarea, .tool-workbench-panel .tool-rich-output { min-height: 184px; }
  .converter-notice { flex-direction: column; gap: 4px; }
  .converter-status-grid { grid-template-columns: 1fr; }
  .converter-select { width: 100%; max-width: none; }
  .converter-controls .button { flex: 1 1 120px; }
  .converter-textarea, .converter-output { min-height: 320px; }
  .scan-login-section { padding: 42px 0 64px; }
  .scan-login-copy h1 { font-size: 32px; }
  .scan-login-panel { padding: 20px; }
  .scan-login-code { width: 220px; height: 220px; }
  .scan-login-code img { width: 196px; height: 196px; }
  .scan-login-actions .button { flex: 1 1 140px; }
  .user-profile-section { padding: 42px 0 64px; }
  .user-profile-panel { padding: 20px; }
  .user-profile-header { grid-template-columns: 56px minmax(0, 1fr); }
  .user-profile-avatar { width: 56px; height: 56px; font-size: 22px; }
  .user-profile-header h1 { font-size: 26px; }
  .user-profile-meta div { grid-template-columns: 1fr; gap: 4px; }
  .user-profile-actions .button { flex: 1 1 140px; }
  .shop-toolbar { align-items: flex-start; flex-direction: column; }
  .shop-grid { grid-template-columns: 1fr; }
  .shop-preview-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
  .shop-preview-panel { max-height: calc(100vh - 24px); }
  .shop-preview-header, .shop-preview-body, .shop-preview-actions { padding-right: 16px; padding-left: 16px; }
  .shop-preview-header h2 { font-size: 22px; }
  .shop-preview-store { grid-template-columns: 54px minmax(0, 1fr); gap: 12px; }
  .shop-preview-logo { width: 54px; height: 54px; font-size: 18px; }
  .shop-preview-facts { grid-template-columns: 1fr; }
  .shop-preview-actions { flex-direction: column; }
  .shop-preview-actions .button { width: 100%; }
  .shop-detail { padding: 18px; }
  .shop-goods-panel { padding: 16px; }
  .shop-goods-heading { flex-direction: column; }
  .shop-goods-search-bar { flex-direction: column; gap: 6px; }
  .shop-goods-search-bar input { min-height: 38px; }
  .shop-goods-search-bar button { min-height: 38px; }
  .shop-detail-header { grid-template-columns: 54px minmax(0, 1fr); }
  .shop-detail-logo { width: 54px; height: 54px; font-size: 18px; }
  .shop-detail-header h1 { font-size: 26px; }
  .shop-detail-metrics { grid-template-columns: 1fr 1fr; }
  .shop-detail-actions .button { width: 100%; }
  .shop-go-section { padding: 52px 0 72px; }
  .shop-go-card { padding: 22px 18px; }
  .shop-go-card h1 { font-size: 26px; }
  .shop-go-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 991px) {
  .search-hero h1 { font-size: 40px; }
  .search-filter-row { grid-template-columns: 1fr; }
  .search-filter-row .filter-tabs:last-child { justify-content: flex-start; }
  .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .search-hero-inner { padding: 56px 0 48px; }
  .search-hero h1 { font-size: 32px; }
  .search-hero-lead { font-size: 16px; }
  .search-bar { min-height: 54px; }
  .search-bar button { min-width: 88px; }
  .search-result-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .search-result-head h2 { font-size: 24px; }
  .search-suggest-block h2 { font-size: 24px; }
  .compare-grid { grid-template-columns: 1fr; }
  .search-discover-foot .button { width: 100%; }
}