/* ── Pitfall: cross-origin font CDN blocking first paint ───────────
   Problem: fonts.bunny.net (Google Fonts mirror) added 200-800ms latency
   for CN/RU users due to cross-border DNS+TLS+transfer, blocking first paint.
   Root cause: <link> to external CSS is render-blocking; each navigation
   re-fetched it with no browser cache benefit.
   Fix: Self-host 8 Inter woff2 subsets (4 weights × latin/cyrillic) under
   /assets/fonts/. @font-face unicode-range lets the browser download only
   the subset matching page characters (CN pages skip latin/cyrillic fonts).
   Also removed fonts.bunny.net from CSP style-src/font-src (now 'self' only).
   Note: Adding a new weight requires downloading both latin+cyrillic woff2
   and adding two @font-face rules. Files live in assets/fonts/ (source)
   and are copied to dist/assets/fonts/ during build (see line ~2220).
   ────────────────────────────────────────────────────────────────── */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-cyrillic-400-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-cyrillic-500-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-cyrillic-600-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-cyrillic-700-normal.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
:root{--bg:#fff;--fg:#1d1d1f;--muted:#515154;--line:#e6e6e8;--soft:#f5f5f7;--blue:#1d1d1f;--dark:#0a0a0c;--ok:#1aa260;--no:#6e6e73;--gold:#c79a3a;--gold-bg:rgba(199,154,58,.10);--prem-grad:linear-gradient(135deg,#1d1d1f,#3a3a40);--top:52px;
/* 导航控件尺寸令牌（2026-09-15）——单一事实源。
   老板反馈：同一排控件出现 30/32/40/44px 四种高度、圆角在 6/8/10/12/14/16/999 之间乱跳。
   规范：**宽度可随屏幕压缩，高度与形状永不变**。
   --ctl-h 视觉高度（所有导航控件一致）｜--ctl-touch 触摸热区（Apple HIG 最低 44px） */
--ctl-h:40px;--ctl-touch:44px;--ctl-r:999px;--ctl-gap:8px;--logo-color:#1d1d1f;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--font-mono:"SF Mono",SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
/* Logo 自适应配色（2026-09-09）：站点为纯浅色站，不跟随系统 prefers-color-scheme（否则浅底+白logo不可见）。
   只有真正的深色容器加 .on-dark，Logo 才渲染 Paper 白版；切换为 CSS 变量 + currentColor，无 JS、无闪烁。 */
.on-dark{--logo-color:#fff}
.brand .logo-mark{width:22px;height:22px}
.foot-brand .logo-mark{width:26px;height:26px}
.brand .logo-mark,.foot-brand .logo-mark{color:var(--logo-color);flex-shrink:0;display:inline-block;vertical-align:middle}
*{box-sizing:border-box;-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{font-family:var(--font-sans);color:var(--fg);background:var(--bg);line-height:1.65;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:inherit}
a{color:#1d1d1f;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
/* top bar: header (sticky) */
.topwrap{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
header.site{background:transparent;border:0;padding:0}
.site-inner{max-width:1080px;margin:0 auto;padding:6px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-weight:700;font-size:20px;letter-spacing:-.5px;color:var(--logo-color);flex-shrink:0;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.brand a{color:inherit;text-decoration:none}
.brand strong{font-weight:inherit}
.brand .dot{color:#1d1d1f}
.brand-sub{display:block;font-size:11px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:1px}
.brand-txt{display:flex;flex-direction:column;justify-content:center;line-height:1.12;min-width:0}
.brand-txt strong{line-height:1.1;display:block}
.brand .brand-sub{margin-top:0;line-height:1.15}
nav.main{display:flex;gap:48px;font-size:15px;font-weight:500;margin:0 auto}
nav.main a{color:var(--fg);padding:6px 0}
nav.main a.on{font-weight:600}
/* mobile hamburger / overlay nav */
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:var(--ctl-h);height:var(--ctl-h);border:1px solid var(--line);background:var(--soft);cursor:pointer;padding:0;gap:4px;border-radius:var(--ctl-r);margin-left:auto;position:relative;flex-shrink:0}
/* 触摸热区统一扩到 44px（Apple HIG），但**不改变视觉高度** —— 视觉 40px / 热区 44px。 */
.nav-toggle::after,.langsel-btn::after,.nav-auth-btn::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:var(--ctl-touch);pointer-events:none}
.nav-toggle:hover{background:var(--soft)}
.nav-toggle span{display:block;width:20px;height:2.5px;background:#1D1D1F;border-radius:2px;transition:transform .2s,opacity .2s}
/* Sector/specialty pages: shared container so breadcrumb/content align with
   the site grid instead of hugging the viewport edge. */
.sec-wrap{max-width:1128px;margin:0 auto;padding:28px 24px 60px}
.sec-wrap .breadcrumb{margin-bottom:18px}
.lock-card{background:var(--soft);border:1px dashed var(--line);border-radius:10px;padding:18px 20px;margin-top:14px;text-align:center}
.lock-card .lock-t{margin:0 0 10px;font-size:13.5px;color:var(--muted);line-height:1.6}
.lock-btn{display:inline-block;height:36px;line-height:36px;padding:0 20px;border-radius:999px;background:#1D1D1F;color:#fff;font-size:13px;font-weight:500;text-decoration:none}
.nav-toggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.on span:nth-child(2){opacity:0}
.nav-toggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* 2026-09-15：改半屏。注意**必须保留 height:100dvh/100vh 兜底** ——
   .topwrap 带 backdrop-filter，会创建 containing block，fixed 抽屉若没有显式 height 会塌陷成空白菜单
   （tests/test_mobile_nav.py 的 MOBILE-2 就是守这条）。所以用 max-height 限高而不是删掉 height：
   height 给兜底、max-height 决定实际半屏高度，二者叠加后实际 = min(100dvh, 60dvh) = 60dvh。 */
.mobile-nav{display:none;position:fixed;top:0;left:0;right:0;bottom:auto;height:100dvh;height:100vh;max-height:60dvh;background:rgba(255,255,255,.98);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);z-index:110;padding:72px 20px 18px;flex-direction:column;gap:6px;overflow-y:auto;border-radius:0 0 18px 18px;box-shadow:0 14px 34px rgba(0,0,0,.13)}
.mobile-nav.on{display:flex}
.mobile-nav a{display:flex;align-items:center;min-height:52px;padding:0 12px;font-size:18px;font-weight:600;color:var(--fg);border-radius:12px}
.mobile-nav a:hover,.mobile-nav a.on{background:var(--soft);text-decoration:none}
.mobile-nav-close{position:absolute;top:14px;right:18px;width:var(--ctl-h);height:var(--ctl-h);display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;background:var(--soft);border:1px solid var(--line);color:var(--fg);cursor:pointer;border-radius:var(--ctl-r)}
.mobile-nav-close:hover{background:var(--soft);color:var(--fg)}
.mobile-nav-langs{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:center}
/* 抽屉里的语言切换：同一个 .langsel 组件、同一高度与形状，只是菜单就地展开（不浮层）。 */
.mobile-nav-langs .langsel{margin-left:0}
.mobile-nav-langs .langsel-menu{position:static;margin-top:8px;box-shadow:none;border:0;background:transparent;min-width:0}
.mobile-nav-langs .langsel-menu button{text-align:center}
/* hero */
.hero{background:var(--dark);color:#fff;padding:72px 24px 64px;text-align:center}
.hero h1{font-size:clamp(30px,5vw,48px);font-weight:600;letter-spacing:-.6px;margin:0 0 14px}
.hero p{color:#a1a1a6;font-size:clamp(15px,2.2vw,19px);margin:0 auto;max-width:680px}
.hero .search-big{max-width:560px;margin:26px auto 0;position:relative}
.hero .search-big input{width:100%;padding:15px 18px 15px 48px;border:0;border-radius:14px;font-size:16px;background:#fff;color:var(--fg)}
.hero .search-big svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;stroke:var(--muted);fill:none;stroke-width:2}
/* stats */
.stats{max-width:1080px;margin:-40px auto 0;position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 6px 24px rgba(0,0,0,.05)}
.stat .n{font-size:32px;font-weight:600;letter-spacing:-.6px}
.stat .l{color:var(--muted);font-size:13px;margin-top:3px}
.stat .l .pulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-left:6px;vertical-align:middle;animation:pulse 2s infinite}
.stat .l .pulse-date{color:var(--muted);margin-left:4px}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(26,162,96,.4)}50%{opacity:.5;box-shadow:0 0 0 4px rgba(26,162,96,0)}}
/* submission forms */
.submit-section{max-width:720px;margin:0 auto;padding:0 24px}
/* ── Switch-style tabs (bottom-border indicator, matching prototype) ──
   Changed from rounded-top tab style to bottom-border indicator style.
   Reason: prototype uses .switch with border-bottom:2px indicator which
   is cleaner and more modern. Old style had border+background on active
   tab creating a "card tab" look; new style is a flat underline.
   ────────────────────────────────────────────────────────────────── */

.sf-form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px}
/* ── 供应商合作中心 / 精选合作（2026-09-14 改版）────────────────────────
   金色 #C8A24A 只用于精选合作一处：卡片右上角星标与描边徽标。
   合作中心四卡与 /categories/ 共用 .cat-card + .cat-grid，此处只补版式。 */
.pgrid{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr}
.prem-star{position:absolute;top:14px;right:16px}
.prem-star-lg{flex:0 0 18px}
.prem-head{display:inline-flex;align-items:center;gap:8px;margin:0 0 6px}
/* 精选合作卡：金边取代原来的金色标签（2026-09-14 owner 要求），金星保留 */
.cat-card.gold-card{border-color:#C8A24A}
.cat-card.gold-card:hover{border-color:#B8933E}
.cat-card .card-step{font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.cat-card .card-h{font-size:17px;margin:0 0 8px}
.cat-card .card-b{font-size:13.5px;color:#3a3a3c;line-height:1.55;margin:0 0 12px}
.pstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:38px 0 0;
border:1px solid var(--line);border-radius:14px;padding:24px 26px}
.pstrip b{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
.pstrip span{font-size:13.5px;line-height:1.5}
.blk-h{font-size:15.5px;font-weight:600;margin:0 0 12px;color:var(--muted)}
.faq{margin:0}
.faqrow{display:flex;gap:14px;padding:17px 0;border-top:1px solid var(--line)}
.faqrow:first-child{border-top:0}
.faqrow dt{flex:0 0 200px;font-weight:600;font-size:13.5px;margin:0}
.faqrow dd{flex:1;margin:0;font-size:13.5px;color:#3a3a3c;line-height:1.6}
.benefit{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.benefit-item{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.benefit-item b{display:block;font-size:14px;margin-bottom:5px}
.benefit-item span{font-size:13px;color:#3a3a3c;line-height:1.55}
.prem-form{max-width:520px}
.prem-form label{display:block;margin:0 0 5px;font-size:13px;font-weight:600;color:var(--fg)}
.pm-in{display:block;width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:10px;
font-size:14px;font-family:inherit;margin:0 0 16px;background:#fff;color:var(--fg)}
.pm-in:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.sf-form .kv-in{background:var(--soft);color:var(--muted)}

.sf-form>p{margin:0 0 20px}
.sf-form label{display:block;margin:0 0 5px;font-size:13px;font-weight:600;color:var(--fg)}
.sf-form input,.sf-form textarea,.sf-form select{display:block;width:100%;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit;margin-bottom:16px;background:#fff;color:var(--fg);transition:border-color .15s,box-shadow .15s}
.sf-form input:focus,.sf-form textarea:focus,.sf-form select:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.sf-form textarea{min-height:80px;resize:vertical}
/* T2: searchable trilingual country combobox */
.ccombo{position:relative;margin-bottom:16px}
.ccombo input[type=text]{margin-bottom:0}
.ccombo-list{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 34px rgba(0,0,0,.10);margin-top:4px}
.ccombo-list.open{display:block}
.ccombo-list .cc-item{padding:9px 14px;font-size:13.5px;cursor:pointer;color:var(--fg)}
.ccombo-list .cc-item:hover,.ccombo-list .cc-item.hl{background:var(--soft)}
.ccombo-list .cc-empty{padding:10px 14px;font-size:13px;color:var(--muted);cursor:default}
/* ── Pitfall: submit button CSS selector missing type=submit ────────
   Problem: Submit page buttons showed browser default style (gray, rectangular)
   instead of the site's black pill style.
   Root cause: Selector `.sf-form button:not([type])` requires the element
   to have NO type attribute. But the buttons are <button type="submit">, so
   `:not([type])` never matches. `.sf-form>button` also fails because the
   buttons are inside <form>, not direct children of .sf-form.
   Fix: Added `.sf-form button[type=submit]` to the selector list so
   <button type="submit"> matches. Kept the original selectors for any
   future typeless buttons.
   Note: Always test with the ACTUAL HTML element, not just the class name.
   ────────────────────────────────────────────────────────────────── */
.sf-form button[type=button],.sf-form button:not([type]){background:none;border:1px dashed var(--line);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--fg);cursor:pointer;margin-bottom:16px;transition:background .15s}
.sf-form button[type=button]:hover,.sf-form button:not([type]):hover{background:var(--soft)}
.sf-form button:not([type]):last-of-type,.sf-form>button,.sf-form button[type=submit]{background:#1d1d1f;color:#fff;border:0;border-radius:999px;padding:11px 24px;font-size:14px;font-weight:500;cursor:pointer;margin-top:8px;margin-bottom:0}
.sf-form>button:hover,.sf-form button[type=submit]:hover{opacity:.9}
.sf-form .note{font-size:12px;color:var(--muted);margin-top:12px}
/* 附件行（CTA 表单）：改用自定义 label 作按钮 —— 原生 ::file-selector-button 的文字
   由浏览器语言决定、无法跟随站点 i18n，且尺寸偏大。用视觉隐藏的 input + label 既能
   走 data-i18n 三语，又能把按钮做紧凑（同时保留键盘可达性）。 */
.file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.file-row .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.file-btn{display:inline-flex;align-items:center;background:var(--fg);color:#fff;border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:500;cursor:pointer;line-height:1;margin:0}
.file-btn:hover{opacity:.9}
.file-row input[type=file]:focus-visible + .file-btn{outline:2px solid var(--fg);outline-offset:2px}
/* 附件按钮文字不可见（2026-09-14 修）：.form-grid label 是 (0,1,1)，裸 .file-btn 只有
   (0,1,0)，于是 display 被打回 block、color 被打回 --fg —— 而底色也是 --fg，黑底黑字，
   看上去只剩一个黑胶囊。这里统一用 (0,2,1) 起的选择器盖住所有表单上下文，并锁成紧凑胶囊。 */
.form-grid label.file-btn,.sf-form label.file-btn,.reg-wrap label.file-btn,
.file-row label.file-btn,label.file-btn{display:inline-flex;align-items:center;justify-content:center;
width:auto;max-width:max-content;flex:0 0 auto;background:var(--fg);color:#fff;border-radius:999px;
padding:8px 16px;font-size:13px;font-weight:500;line-height:1;margin:0;white-space:nowrap;cursor:pointer}
.form-grid label.file-btn:hover,.sf-form label.file-btn:hover,.reg-wrap label.file-btn:hover,
.file-row label.file-btn:hover,label.file-btn:hover{opacity:.9}
/* 认领表单：选填徽标 + “能加快审核”的醒目提示 */
.opt-badge{display:inline-block;font-size:11px;font-weight:600;color:var(--muted);
border:1px solid var(--line);border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.speed-hint{background:var(--soft);border-left:3px solid var(--fg);border-radius:0 10px 10px 0;
padding:12px 14px;font-size:13px;line-height:1.65;margin:0 0 16px;color:var(--fg)}
.speed-hint strong,.speed-hint .speed-hint-t{font-weight:600}
.speed-hint .speed-hint-t{display:block;margin-bottom:3px}
/* /partner/ 第四张卡（入选合作 / Premium）的角标，沿用卡片同一套视觉 */
.cat-card .pcard-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;
color:var(--fg);background:var(--soft);border:1px solid var(--line);border-radius:999px;
padding:3px 9px;margin:0 0 10px}
.cat-card .pcard-cta{display:inline-block;margin-top:auto;padding-top:10px;font-size:13.5px;font-weight:600}
.file-name{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.sf-form .msg{margin-top:10px;font-size:13px}
/* ── Prototype-aligned form components ──────────────────────────────
   These classes bridge the prototype design system (form-card,
   section-title with numbered circles, 2-column form-grid, field-error,
   alert-success) into the existing site using site CSS variables.
   Used by both Contact and Submit pages.
   ────────────────────────────────────────────────────────────────── */
.section-title{font-size:15px;font-weight:700;margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.section-title .num{width:24px;height:24px;border-radius:50%;background:var(--fg);color:#fff;font-size:12px;display:grid;place-items:center;flex-shrink:0;font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:24px}
/* P1-fix: selector bug — `.form-grid.full` requires both classes on same element;
   `.full` is a child div, so the original rule never matched, leaving `.full`
   stuck at 50% width. Changed to child selector to span full grid width. */
.form-grid>.full{grid-column:1/-1}
.form-grid>div{display:flex;flex-direction:column}
.form-grid label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--fg)}
.form-grid label .req{color:#e03}
/* REQ-STAR: universal red asterisk for required fields, any form/label context */
label .req,span.req{color:#e03;font-weight:600;margin-left:2px}
.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit;background:#fff;color:var(--fg);transition:border-color .15s}
.form-grid input::placeholder,.form-grid textarea::placeholder{color:#9ca3af;opacity:1}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.form-grid input.invalid,.form-grid textarea.invalid,.form-grid select.invalid{border-color:#e03}
.form-grid textarea{min-height:90px;resize:vertical}
.field-error{color:#e03;font-size:12px;margin-top:5px;display:none}
.alert-success{border:1px solid #bbf7d0;background:#f0fdf4;color:#166534;border-radius:12px;padding:20px;font-size:14px;margin-top:24px}
.alert-success strong{display:block;margin-bottom:4px;font-size:15px}
.form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:28px;flex-wrap:wrap;gap:12px}
.form-actions .btn-primary{background:var(--fg);color:#fff;border:0;border-radius:999px;padding:11px 24px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit}
.form-actions .btn-primary:hover{opacity:.9}
.form-hint{font-size:13px;color:var(--muted)}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}.form-actions{flex-direction:column;align-items:stretch}}
/* supplier search autocomplete (Correct tab) */
.search-input-wrap{display:flex;gap:8px;align-items:stretch}
/* P1-fix: input gets box-sizing so padding doesn't shrink usable width; button is fixed-width icon */
.search-input-wrap input{flex:1;margin:0;box-sizing:border-box;min-width:0}
.search-input-wrap .search-btn{background:var(--fg);color:#fff;border:0;border-radius:10px;width:44px;padding:0;display:grid;place-items:center;cursor:pointer;font-family:inherit;flex-shrink:0;transition:opacity .15s}
.search-input-wrap .search-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search-input-wrap .search-btn:hover{opacity:.9}
.sup-search-results{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.sup-search-results[hidden]{display:none}
.sup-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s;background:#fff}
.sup-card:hover{border-color:var(--fg);background:var(--soft)}
.sup-card.selected{border-color:var(--ok);background:rgba(26,162,96,.06);box-shadow:0 0 0 1px var(--ok) inset}
.sup-card-logo{width:40px;height:40px;border-radius:50%;background:var(--fg);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px;flex-shrink:0;letter-spacing:-.5px}
.sup-card-body{flex:1;min-width:0;overflow:hidden}
.sup-card-name{font-weight:600;font-size:14px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-card-meta{font-size:12px;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* P1-fix: all cards show a badge (verified=green, unverified=grey) — matches detail page .tag.ok/.no */
.sup-card-badge{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;white-space:nowrap;flex-shrink:0}
.sup-card-badge-ok{background:#e8f5e9;color:#1b5e20;border:1px solid #c8e6c9}
.sup-card-badge-no{background:#f5f5f7;color:#6e6e73;border:1px solid var(--line)}
.sup-empty{padding:18px;color:var(--muted);font-size:13.5px;text-align:center;border:1px dashed var(--line);border-radius:12px;background:var(--soft)}
.sup-selected-bar{margin-top:14px;padding:12px 16px;border-radius:12px;background:rgba(26,162,96,.07);border:1px solid var(--ok);display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;flex-wrap:wrap}
.sup-selected-bar[hidden]{display:none}
.sup-selected-bar strong{color:var(--ok);margin-right:4px;font-size:13px}
.sup-selected-bar .change-link{background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;text-decoration:underline;font-family:inherit;padding:0}
.sup-selected-bar .change-link:hover{color:var(--fg)}
/* field correction rows */
.cf-row{display:flex;gap:10px;margin-bottom:12px;align-items:flex-end}
.cf-row>div{display:flex;flex-direction:column}
.cf-row label{margin-bottom:5px}
.cf-row .cf-remove{background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;padding:0 0 8px 0;flex-shrink:0;transition:color .15s}
.cf-row .cf-remove:hover{color:#e03}
.cf-row select,.cf-row input{margin-bottom:0}
/* sections */
section.block{max-width:1080px;margin:54px auto;padding:0 24px}
section.block h2{font-size:24px;font-weight:600;letter-spacing:-.4px;margin:0 0 4px}
section.block .sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}
/* cat grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.cat-card{border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:block;color:var(--fg);transition:box-shadow .2s,transform .2s}
.cat-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.07);transform:translateY(-2px);text-decoration:none}
.cat-card .cn{font-weight:600;font-size:16px}
.cat-card .cc{color:var(--muted);font-size:13px;margin-top:4px}
/* supplier index (SEO 2026-08-29): the sector cards stay single-target
   clickable (whole card -> filtered list). Crawlable detail-page links live
   here as a plain text index instead, so no click target overlaps another and
   the browse-by-sector flow is untouched. Reuses existing tokens only. */
/* collapsible supplier index (SEO 2026-08-30). Native <details>: no JS, keyboard
   operable, screen-reader friendly. Collapsed content stays in the HTML source,
   which keeps it indexable — CSS-hidden links would breach Google's hidden
   text/links policy AND pass no link equity. */
.cat-index{margin-top:30px;border-top:1px solid var(--line);padding-top:12px}
.cat-index summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--fg)}
.cat-index summary::-webkit-details-marker{display:none}
.cat-index summary:hover .ci-sum{color:#0071e3}
.cat-index .ci-chev{margin-left:auto;width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.cat-index[open] .ci-chev{transform:rotate(-135deg)}
.cat-index .ci-body{padding:4px 0 6px}
.cat-index .ci-group{padding:16px 0;border-top:1px solid var(--line)}
.cat-index .ci-group:first-child{border-top:0}
.cat-index .ci-group-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.cat-index .ci-cat{font-weight:600;font-size:14px;color:var(--fg)}
.cat-index .ci-cnt{font-size:12px;color:var(--muted)}
.cat-index .ci-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 18px}
.cat-index .ci-item{display:block;padding:8px 0;text-decoration:none;border-top:1px solid var(--line)}
.cat-index .ci-name{display:block;font-size:13px;color:var(--fg);line-height:1.35}
.cat-index .ci-meta{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.cat-index .ci-item:hover .ci-name{color:#0071e3}
@media(max-width:680px){.cat-index .ci-grid{grid-template-columns:1fr}}
/* category page: bottom collapse trigger for the expanded supplier index */
.cat-index .ci-foot{margin-top:14px;text-align:center}
.cat-index .ci-collapse{display:inline-block;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:0;border-radius:8px;cursor:pointer;padding:8px 16px}
.cat-index .ci-collapse:hover{color:#0071e3}
/* premium */
.prem-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.prem-card{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff;position:relative}
.prem-card .pn{font-size:16.5px;font-weight:600;letter-spacing:-.3px}
.prem-card .pb{color:var(--muted);font-size:13px;margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.prem-card .pm{margin-top:10px;font-size:12px;color:var(--muted)}
/* list page */
/* ── Pitfall: container width mismatch causes layout misalignment ────
   Problem: On /categories/ and /suppliers/, the title left edge did not align
   with the card grid below — visible 50px offset.
   Root cause: .list-title/.toolbar/.grid used max-width:1180px while
   section.block (the card container on many pages) used max-width:1080px.
   The 100px difference made title content shift left of the cards.
   Fix: All four selectors (.list-title, .list-title+.sub, .toolbar, .grid)
   set to max-width:1080px to match section.block.
   Note: DO NOT change section.block — it's used on many other pages. If
   you add a new page with a title+grid layout, use 1080px for ALL containers
   to stay aligned. Verify with: grep 'max-width:1180px' ssg.py (should be 0
   in layout selectors, may exist in admin-only rules).
   ────────────────────────────────────────────────────────────────── */
.list-title{max-width:1080px;margin:24px auto 0;padding:0 24px;font-size:24px;font-weight:600;letter-spacing:-.4px}
.list-title+.sub{max-width:1080px;margin:-6px auto 22px;padding:0 24px;color:var(--muted);font-size:14.5px}
.toolbar{position:sticky;top:var(--top,92px);z-index:20;max-width:1080px;margin:16px auto 12px;padding:10px 24px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;background:var(--bg)}
.toolbar .search{flex:1;min-width:220px;position:relative}
.toolbar .search input{width:100%;padding:11px 14px 11px 40px;border:1px solid var(--line);border-radius:12px;font-size:14.5px;background:#fff}
.toolbar .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted);fill:none;stroke-width:2}
.toolbar select{border:1px solid var(--line);border-radius:12px;padding:11px 12px;font-size:14px;background:#fff;color:var(--fg);max-width:220px}
.toolbar select.active{border-color:var(--fg);background:var(--fg);color:#fff;font-weight:600}
.toolbar .toggle{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--muted);cursor:pointer;user-select:none;min-height:44px}
.grid{max-width:1080px;margin:8px auto 0;padding:16px 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
/* skeleton shimmer while list-data loads (defer) — replaced by render() */
.skel-card{border:1px solid var(--line);border-radius:16px;min-height:172px;background:linear-gradient(90deg,var(--soft) 25%,#ececf0 37%,var(--soft) 63%);background-size:400% 100%;animation:skel-shimmer 1.2s ease infinite}
@keyframes skel-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media(prefers-reduced-motion:reduce){.skel-card{animation:none}}
.list-loading{text-align:center;color:var(--muted);font-size:13.5px;margin:14px 0 -6px}
/* (grid width aligned with .list-title/.toolbar/section.block — see pitfall above) */
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;display:block;position:relative;overflow:hidden;box-shadow:0 1px 1px rgba(0,0,0,.02),0 1px 2px rgba(0,0,0,.03),0 0 0 1px rgba(0,0,0,.03);transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s cubic-bezier(.16,1,.3,1)}
.card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(0,0,0,.04),0 8px 16px rgba(0,0,0,.06),0 0 0 1px rgba(0,0,0,.04)}
a.card{text-decoration:none;color:var(--fg)}
.card{cursor:pointer}
.card .brow{display:flex;gap:6px;align-items:center;margin-bottom:10px}
.bdg{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.bdg svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4}
.bdg-ok{background:rgba(22,163,74,.10);color:#16A34A}
.bdg-no{background:var(--soft);color:#9A9AA0}
.bdg-p{background:rgba(199,154,58,.12);color:#C79A3A}
.bdg-p svg{fill:#C79A3A;stroke:#C79A3A}
.card .bname{font-size:17px;font-weight:600;letter-spacing:-.014em;line-height:1.3}
.card .bname a{color:var(--fg)}
.card .bname a:hover,.card:hover .bname a{text-decoration:none}
.card .legal{font-size:12px;color:#6E6E73;margin-top:2px}
.card .desc{font-size:14px;color:#3A3A3C;line-height:1.65;margin-top:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:#6E6E73}
.card .meta span{display:inline-flex;align-items:center;gap:5px;min-width:0}
.card .meta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;flex-shrink:0}
.card .meta a{color:#6E6E73}
.card.prem{box-shadow:0 0 0 1px rgba(199,154,58,.35),0 2px 4px rgba(199,154,58,.10),0 8px 16px rgba(199,154,58,.08)}
.card.prem:hover{box-shadow:0 0 0 1px rgba(199,154,58,.5),0 4px 8px rgba(199,154,58,.12),0 16px 32px rgba(199,154,58,.10)}
@media(prefers-reduced-motion:reduce){.card,.card:hover{transition:none;transform:none}}
.card:hover{box-shadow:0 8px 30px rgba(0,0,0,.07);transform:translateY(-2px)}
.card .head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.card .name{font-size:17px;font-weight:600;letter-spacing:-.3px}
.card .name a{color:var(--fg)}
.card .row{display:flex;gap:7px;font-size:13.5px;color:var(--muted);align-items:flex-start}
.card .row svg{width:15px;height:15px;flex:0 0 15px;margin-top:3px;stroke:var(--muted);fill:none;stroke-width:2}
.card .row .v{color:var(--fg);word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tag{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.tag.ok{background:rgba(26,162,96,.12);color:var(--ok)}
.tag.no{background:#f0f0f2;color:var(--no)}
/* premium badge */
.premium-badge{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#f8ecc9,#e7c878);color:#6b4e12;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:3px 10px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 4px rgba(199,154,58,.28)}
.premium-badge svg{width:11px;height:11px;fill:#c79a3a;stroke:#c79a3a}


.card.premium:hover{box-shadow:0 8px 30px rgba(199,154,58,.14)}
/* 语言切换：全端唯一形态 —— 「中/En」字标胶囊 + 下拉菜单（2026-09-15 重绘）
   原先宽屏是三个文字按钮(32px)、窄屏是圆形地球图标(40px)，同一功能两种形状；
   且与汉堡（圆角方形 10px）、登录（胶囊 30px）混用三种形状语言、四种高度。
   现在所有断点共用这一个组件：高度固定 var(--ctl-h)、形状固定 var(--ctl-r)，
   只允许宽度随屏幕压缩。 */
.langsel{position:relative;flex-shrink:0;margin-left:auto;align-self:center;display:inline-flex}
.langsel-btn{display:inline-flex;align-items:center;gap:5px;height:var(--ctl-h);padding:0 10px 0 11px;border:1px solid var(--line);background:var(--soft);color:var(--fg);border-radius:var(--ctl-r);cursor:pointer;font-family:inherit;position:relative;transition:background .15s,border-color .15s}
.langsel-btn:hover,.langsel-btn[aria-expanded="true"]{background:#fff;border-color:#c9c9ce}
.langsel-mark{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;line-height:1;font-weight:600}
.langsel-mark b{font-weight:600}
.langsel-mark i{display:block;width:1px;height:12px;background:#c9c9ce;flex-shrink:0}
.langsel-caret{width:9px;height:9px;flex-shrink:0;color:var(--muted);transition:transform .18s}
.langsel-btn[aria-expanded="true"] .langsel-caret{transform:rotate(180deg)}
.langsel-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:148px;padding:5px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 28px rgba(0,0,0,.14);display:flex;flex-direction:column;gap:2px}
.langsel-menu[hidden]{display:none}
.langsel-menu button{border:0;background:none;font-family:inherit;font-size:13.5px;line-height:1.2;color:var(--fg);text-align:left;padding:9px 11px;border-radius:9px;cursor:pointer;white-space:nowrap}
.langsel-menu button:hover{background:var(--soft)}
.langsel-menu button.on{background:#1d1d1f;color:#fff}
.pager{max-width:1180px;margin:40px auto 50px;padding:0 24px;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.pager button,.pager a.pgbtn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 18px;cursor:pointer;font-size:13.5px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--fg);text-decoration:none;min-width:44px}
.pager button:disabled{opacity:.4;cursor:not-allowed}
.pager a.pgbtn:hover{border-color:var(--fg)}
.pager .pg{color:var(--muted);font-size:13.5px;display:inline-flex;align-items:center;min-width:44px;justify-content:center}
.pager .pg b{color:var(--fg)}
.pager a.pgbtn[aria-current]{border-color:var(--fg);font-weight:600}
/* detail */
article.detail{max-width:1128px;margin:0 auto;padding:36px 24px 60px}
/* Block IA v2 (2026-09-05): typography aligned to supplier-detail-v2-preview.html —
   22px section titles, hairline separators, 74ch measure, 1.75 leading. */
.detail-layout .blk{padding:26px 0;border-top:1px solid var(--line)}
.detail-layout .blk:first-of-type{border-top:0;padding-top:4px}
.detail-layout .blk h2{font-size:22px;font-weight:600;letter-spacing:-.2px;color:var(--fg);margin:0 0 14px}
.detail-layout .blk .fv{font-size:15px;line-height:1.75;max-width:74ch;word-break:break-word;overflow-wrap:anywhere}
.detail-layout .blk .kv{grid-template-columns:150px 1fr;gap:10px 16px;font-size:14.5px}
.detail-layout .blk .kv .k{font-size:13px}
/* contact-unlocked badge (replaces the old "sign in to view" link after /api/session confirms) */
.c-unlocked{color:var(--ok);font-size:12px;font-weight:600;cursor:default;text-decoration:none}
.det-side{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.det-side .cta{margin:0;max-width:none;background:none;border:0;border-radius:0;padding:0}
.det-side .cta h3{font-size:18px;font-weight:600;margin:0 0 8px}
.det-side .cta p{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 16px}
.det-side .cta .btn{display:block;width:100%;text-align:center;height:40px;line-height:40px;padding:0;border-radius:10px;background:#1d1d1f;color:#fff;font-size:15px;font-weight:500}
@media(max-width:880px){.detail-layout .blk{padding:20px 0}.detail-layout .blk:first-of-type{padding-top:0}.det-side{position:static}}
.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:18px}
.breadcrumb a{color:var(--muted)}
.breadcrumb span{margin:0 8px}
h1.det-title{font-size:30px;font-weight:600;letter-spacing:-.6px;margin:0 0 10px;line-height:1.2;word-break:break-word;overflow-wrap:anywhere}
.badges{display:flex;gap:8px;margin-bottom:24px}
.badges .tag{font-size:12px;padding:4px 11px}
section.fs{margin-top:30px}
section.fs h2{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:0 0 10px}
section.fs .fv{font-size:15.5px;line-height:1.7;word-break:break-word;overflow-wrap:anywhere}
.kv{display:grid;grid-template-columns:160px 1fr;gap:8px 18px;font-size:14.5px}
.kv .k{color:var(--muted)}
.kv .v{color:var(--fg);word-break:break-word}
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px;align-items:start;max-width:1080px;margin:0 auto;padding:0 24px}
.det-side{position:sticky;top:84px}
.det-side .cta{margin:0;max-width:none}
.det-side .side-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.65}
@media(max-width:880px){.detail-layout{grid-template-columns:1fr;gap:8px}.det-side{position:static;order:2}}
/* 2026-09-14 owner：related 收紧——每张卡信息量不变（仍是全站统一卡片），
   但每组 6→3 条、组标题更小、间距更紧，整块高度约减半。 */
.related{max-width:1080px;margin:0 auto;padding:18px 24px 42px}
.related h2{font-size:15.5px;font-weight:600;margin:0 0 10px;color:var(--muted)}
/* Sector (/sectors/) landing pages — section headings inside .block, and a
   card grid that must breathe between stacked groups. */
.sec-h{font-size:20px;font-weight:600;margin:34px 0 16px}
.sec-h:first-child{margin-top:0}
.rel-card:hover{border-color:var(--muted);text-decoration:none}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px;grid-auto-rows:1fr}
/* FR-1.2 静态可爬分页器：纯链接、无 JS 可用；36px 触达尺寸 / 圆角 9px（对齐 UI/UE 组件规范） */
.c-masked{color:#9A9AA0;letter-spacing:1px}
/* 静态分页器与线上 .pager 同构；只有 disabled 态需要一条新规则：线上用
   <button disabled>（opacity:.4），静态页用 <a>/<span>，故补 .pg-off。 */
.pager .pg-off{opacity:.4;cursor:not-allowed}
/* ── 产品线（FR-6.1）：标签页沿用站内既有「下边框指示器」风格 ── */
.prod-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:2px solid var(--line);margin:0 0 18px;padding-bottom:2px}
.prod-tab{border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 12px;min-height:44px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px}
.prod-tab.on{color:var(--fg);border-bottom-color:var(--fg)}
.prod-tab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.prod-panel{padding:2px 0 0}
.prod-panel[hidden]{display:none}
.prod-img{width:100%;max-width:640px;aspect-ratio:16/10;object-fit:contain;background:var(--soft);border:1px solid var(--line);border-radius:14px;display:block;margin:0 0 16px}
.prod-name{font-size:17px;font-weight:600;margin:0 0 6px;letter-spacing:-.014em}
.prod-cat{font-size:12.5px;color:var(--muted);margin:0 0 12px}
table.spec{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 4px}
table.spec th,table.spec td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.spec th{width:34%;text-align:left;font-weight:600;color:var(--muted);background:var(--soft)}
table.spec td{color:var(--fg)}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:none}
.prod-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:0 0 18px}
.prod-shot{margin:0;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--soft);border:1px solid var(--line);border-radius:14px}
@media(max-width:680px){.prod-tabs{gap:2px}}
.rel-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;min-width:0}
.rel-card .rn{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.rel-card .rc{color:var(--muted);font-size:12.5px;margin-top:3px;line-height:1.5;overflow-wrap:anywhere;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cta{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:34px 0;max-width:820px;margin-left:auto;margin-right:auto}
.cta h3{margin:0 0 6px;font-size:18px;font-weight:600}
.cta p{margin:0 0 14px;color:var(--muted);font-size:14px}
.cta .btn{display:inline-block;background:#1d1d1f;color:#fff;padding:10px 20px;border-radius:999px;font-size:14px;font-weight:500}
/* About page — v3 localized-production sub-blocks (cards + 6-phase table) */
article.detail .sub-block{margin-top:24px}
article.detail .sub-block h3{font-size:17px;font-weight:600;margin:0 0 12px;letter-spacing:-.2px}
article.detail .sub-note{font-size:15px;color:var(--muted);line-height:1.75;margin:0 0 14px}
article.detail .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
/* 2026-09-13：痛点卡片原用 .card，继承了供应商卡片的 cursor:pointer 与 hover 位移，
   而它不可点击 → 误导用户。改用独立类，视觉保持一致但无任何交互暗示。 */
article.detail .about-card{border:1px solid var(--line);border-radius:12px;padding:18px}
article.detail .about-card h4{font-size:14.5px;font-weight:600;margin:0 0 8px;color:var(--fg)}
article.detail .about-card p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}
article.detail .table-wrap{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:12px}
article.detail table{width:100%;border-collapse:collapse;font-size:13.5px}
article.detail th{background:var(--soft);text-align:left;padding:11px 14px;font-weight:600;color:var(--fg);border-bottom:1px solid var(--line);white-space:nowrap}
article.detail td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted);line-height:1.55}
article.detail tr:last-child td{border-bottom:none}
@media(max-width:680px){article.detail .cards{grid-template-columns:1fr}}
/* footer */
footer.site{background:var(--soft);border-top:1px solid var(--line);padding:30px 24px 22px;color:var(--muted);font-size:13px;margin-top:60px}
.foot-inner{max-width:1080px;margin:0 auto;padding:20px 24px 16px;display:grid;grid-template-columns:1fr auto;column-gap:48px;row-gap:0;align-items:start;font-size:12.5px;color:var(--muted)}
.foot-inner>*{min-width:0}
.foot-brand-block{padding-top:0}
.foot-contact{padding-top:0;justify-self:start}
.foot-contact h4{margin:0 0 14px;font-size:13px;font-weight:600;line-height:1;color:var(--fg);letter-spacing:.3px}
.foot-rule{grid-column:1/-1;border-top:1px solid var(--line);margin:14px 0 0}
.foot-left{grid-column:1;grid-row:3;align-self:center;padding:10px 0}
.foot-legal{grid-column:2;grid-row:3;align-self:center;padding:10px 0}
.foot-col h4{margin:0 0 14px;font-size:13px;font-weight:600;line-height:1;color:var(--fg);letter-spacing:.3px}
.foot-brand{display:inline-flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:0;color:var(--logo-color)}
.foot-brand strong{font-size:16px;letter-spacing:.2px;line-height:1;display:block}
.foot-brand .brand-sub{font-size:10px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase}
.foot-desc{font-size:13.5px;line-height:1.55;color:var(--muted);max-width:340px}
.foot-desc{font-size:13.5px;line-height:1.6;color:var(--fg)}
.foot-list{display:flex;flex-direction:column;gap:9px}
.foot-list .ci{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--fg)}
.ci-txt{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.3}
.ci-k{color:var(--muted);font-size:12px;font-weight:500}
.foot-list .ci a{color:var(--blue);text-decoration:none}
.foot-list .ci a:hover{text-decoration:underline}
.c-unlock{font-size:12px;color:var(--blue);text-decoration:none;border:1px solid var(--blue);border-radius:6px;padding:1px 8px;margin-left:6px;white-space:nowrap}
.c-unlock:hover{background:var(--blue);color:#fff}
.acct{max-width:420px;margin:40px auto;padding:0 20px}
.acct h1{font-size:28px;font-weight:700;letter-spacing:-.02em;margin-bottom:6px}
.acct .sub{color:var(--muted);font-size:14px;margin-bottom:20px}
.acct-tabs{display:flex;gap:0;margin-bottom:24px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.acct-tab{flex:1;padding:11px 16px;font-size:14px;font-weight:600;border:none;cursor:pointer;background:var(--soft);color:var(--muted);font-family:inherit;transition:background .15s,color .15s}
.acct-tab:first-child{border-right:1px solid var(--line)}
.acct-tab.on{background:var(--blue);color:#fff}
.acct-tab:hover:not(.on){background:var(--line);color:var(--fg)}
/* 登录/注册页底部的切换链接：各占一行 + 下划线（2026-09-15）
   老板反馈：英俄语境下「Создать / Create one」与「Забыли пароль? / Forgot password?」
   挤在同一行、缺少视觉区分，容易误点。改为一链接一行，并加下划线明确"可点击"。 */
.acct-alt-row{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.acct-alt-row:first-child{margin-top:0}
/* 注意用 a.acct-link 提高特异性：站点全局有一条 a{text-decoration:none}，
   仅写 .acct-link 会被它盖掉（实测 textDecorationLine 仍是 none）。
   display:inline-block + 上下 padding 把点击热区从 16px 提到 22px。 */
a.acct-link{color:var(--fg);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2.5px;cursor:pointer;display:inline-block;padding:3px 0}
a.acct-link:hover{text-decoration-thickness:2px}
.acct input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-size:15px;margin-bottom:12px;font-family:inherit}
.acct input:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(0,0,0,.12)}
.acct .btn-full{width:100%;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:12px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.acct .btn-full:hover{opacity:.9}
.acct .swap{text-align:center;margin-top:16px;font-size:13.5px;color:var(--muted)}
/* 登录/注册页底部的切换链接（2026-09-15）
   原为 .acct .swap a{color:var(--blue);text-decoration:none}，特异性高于 a.acct-link，
   把下划线盖掉了（实测 textDecorationLine 恒为 none）。这里直接就地改写：
   加下划线 + 提高点击热区，并保持与 a.acct-link 一致的视觉。 */
.acct .swap a{color:var(--fg);cursor:pointer;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2.5px;display:inline-block;padding:3px 0}
.acct .swap a:hover{text-decoration-thickness:2px}
.acct .msg{font-size:13.5px;margin:10px 0;padding:10px 12px;border-radius:8px;display:none}
.acct .msg.ok{background:rgba(26,162,96,.08);color:var(--ok);display:block}
.acct .msg.err{background:rgba(200,40,40,.07);color:#c22;display:block}
.match-ok{color:var(--ok);font-size:12.5px;margin-top:2px;display:block}
.match-err{color:#c22;font-size:12.5px;margin-top:2px;display:block}
#code-group{display:flex;gap:8px;align-items:stretch}
#code-group #f-code{flex:1;margin:0;text-align:center;letter-spacing:4px;font-size:18px}
#send-code-btn{flex:0 0 auto;padding:0 16px;border:1px solid var(--fg);border-radius:10px;background:transparent;color:var(--fg);font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;white-space:nowrap;transition:all .15s}
#send-code-btn:hover:not(:disabled){background:var(--fg);color:#fff}
#send-code-btn:disabled{opacity:.6;cursor:not-allowed}
#send-code-btn.counting{border-color:var(--muted);color:var(--muted)}
.foot-list .ci svg{width:15px;height:15px;flex:0 0 15px;stroke:#1d1d1f;fill:none;stroke-width:2}
.foot-left{display:inline-flex;align-items:center;gap:12px;flex-shrink:1;min-width:0}
.foot-left .foot-note-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.foot-legal{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;justify-self:start}
.foot-legal a{text-decoration:underline;letter-spacing:.3px}
.foot-sep{display:inline-block;width:1px;height:12px;background:var(--line);flex-shrink:0}
@media(max-width:900px){.foot-legal{justify-self:start}}
@media(max-width:760px){.foot-inner{grid-template-columns:1fr;row-gap:14px;padding:20px 20px 16px}
  .foot-brand-block,.foot-contact{padding-top:0;justify-self:start}
  .foot-rule{margin-top:8px}
  .foot-left{grid-column:1;grid-row:4;padding:10px 0 0}
  .foot-legal{grid-column:1;grid-row:5;padding:2px 0 0}
  .foot-list{gap:7px}
  .foot-left{flex-wrap:wrap;gap:8px 12px}
  .foot-left .foot-note-txt{white-space:normal;flex-basis:100%;overflow:visible}
  .foot-legal{gap:10px}
  .foot-legal a{min-height:36px;display:inline-flex;align-items:center}}
@media(max-width:860px){.langsel{order:1}}
/* 已废弃：原窄屏地球图标按钮（.langbtn 系列）在 2026-09-15 被 .langsel 统一取代 ——
   它和宽屏三按钮是同一功能的两种形态，正是老板指出的"形态不一致"。 */
/* nav spacing guard: shrink menu gap on narrower laptops/tablets to prevent wrap */
@media(max-width:900px){nav.main{gap:30px}}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}.foot-inner{grid-template-columns:1fr}.foot-contact{grid-column:1;grid-row:2}.kv{grid-template-columns:1fr}.toolbar{position:static;background:transparent;padding:0 24px}:root{--top:60px}/* 移动端导航必须单行（2026-09-15）：原来带 flex-wrap:wrap 且 .brand 是 flex:1 1 auto（吃满剩余空间），未登录时多了「登录」按钮，语言切换器被挤到第二行、header 高达 114px。 */.site-inner{gap:8px;padding:8px 14px;flex-wrap:nowrap}.brand{flex:0 1 auto;min-width:0;font-size:17px;margin-right:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brand-sub{display:none}.nav-auth{flex-shrink:0;margin-left:0}.hero{padding:54px 18px 46px}nav.main{display:none}.nav-toggle{display:flex}}
@media(max-width:414px){.site-inner{padding:8px 12px}.brand{font-size:16px}.brand-sub{font-size:9px}.nav-auth-btn{padding:0 11px}}
/* 窄屏：只压缩「宽度」（内边距/字号/间距），**高度与形状仍然不动**。
   字标比原来的 40px 圆形图标宽，实测 320/360px 会把品牌名压出省略号，
   收紧内边距与字距即可腾出空间；配合 ≤339px 的「登录图标化」，
   320px 也放得下完整品牌名。 */
@media(max-width:375px){.brand-sub{display:none}.langsel-btn{padding:0 8px 0 9px;gap:4px}.langsel-mark{gap:4px;font-size:11.5px}}
/* 已删除：原先 <480px 把语言切换「换成地球图标」的规则。
   2026-09-15 起语言切换全端统一为 .langsel 字标胶囊，不再有形态切换，
   也不再需要区分断点 —— 这正是老板指出的"同一功能两种形状"的来源。 */
/* 极窄屏（≤359px）仍要保持四件套同行：logo + 汉堡 + 登录 + 语言字标。
   实测 320px 时 brand 需要 106px 却只分到 96px、340px 分到 89px（被省略号截断），
   所以把「登录」收成纯图标（73→42px）、品牌字号降 1px、字标内边距再收紧。
   注意：这样改的**只有宽度**，控件高度(40px)与形状(999px)完全不动 —— 符合统一规范。 */
@media(max-width:359px){.nav-auth-txt{display:none}.brand{font-size:15px}.langsel-btn{padding:0 7px;gap:4px}.langsel-mark{gap:4px;font-size:11px}}
/* ≤309px（Galaxy Fold 外屏一类）：连品牌文字也放不下，只留 logo 图形。 */
@media(max-width:309px){.brand-txt{display:none}}
/* 注：这里原本有一条 .brand{font-size:16px}，会把 ≤359px 规则里的 15px 覆盖掉 ——
   而 320px 恰恰需要更小的字号才放得下完整品牌名，故删除。 */
@media(max-width:320px){.site-inner{gap:8px;padding:8px 12px}.brand-sub{display:none}.nav-toggle{margin-left:4px}.nav-auth-btn{padding:0 11px}.nav-auth{margin-left:4px}}
/* mobile touch targets ≥44px (Apple HIG / WCAG 2.5.5) */
@media(max-width:680px){.submit-form button[type=button],.sf-form button:not([type]){padding:12px 16px;min-height:44px}.c-unlock{padding:6px 12px;min-height:36px;display:inline-flex;align-items:center}#perSel{padding:10px 12px;min-height:44px}.acct-tab{padding:14px 12px;min-height:44px}.acct .btn-full{padding:14px;min-height:48px}.admin-btn.small{padding:10px 14px;min-height:44px}#send-code-btn{padding:0 18px;min-height:48px}.admin-login button{padding:14px 20px;min-height:48px}.cat-card{padding:22px 20px}.pgrid{grid-template-columns:1fr!important}.pstrip{grid-template-columns:1fr}.faqrow{flex-direction:column;gap:4px}.faqrow dt{flex:0 0 auto}.benefit{grid-template-columns:1fr}.rel-card{padding:18px 16px;min-height:44px}.cta .btn{padding:14px 24px;min-height:48px}.foot-list .ci a{padding:0}}
/* admin */
.admin-login{max-width:420px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:12px;padding:28px;box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.05)}
.admin-login h2{font-size:20px;font-weight:600;margin:0 0 14px}
.admin-login label{display:block;font-size:13px;font-weight:500;margin:12px 0 5px}
/* CSV 字段说明 + 图片路径清单（2026-09-14） */
.admin-doc{margin:10px 0 4px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}
.admin-doc summary{cursor:pointer;padding:10px 14px;font-size:13px;font-weight:600}
.admin-doc-body{padding:0 14px 14px}
.admin-doctbl{width:100%;border-collapse:collapse;font-size:12.5px;margin:6px 0 10px}
.admin-doctbl th{background:var(--fg);color:#fff;text-align:left;padding:7px 9px;font-weight:600}
.admin-doctbl td{border-bottom:1px solid var(--line);padding:7px 9px;vertical-align:top}
.admin-doctbl tr:nth-child(even) td{background:#fff}
.admin-docnote{margin:0 0 10px;padding-left:20px;font-size:12.5px;color:var(--muted)}
.admin-docnote li{margin:3px 0}
.admin-imgrow{display:flex;align-items:center;gap:10px;padding:5px 0}
.admin-imgrow code{font-size:12px;flex:1;overflow-wrap:anywhere}
.admin-login input{width:100%;box-sizing:border-box;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font-size:14px;font-family:inherit}
.admin-login input:focus{outline:none;border-color:#0071E3;box-shadow:0 0 0 2px rgba(0,113,227,.2)}
.admin-login .btn,.admin-login button.admin-btn{width:100%;margin-top:14px}
.admin-login .hint{font-size:12.5px;color:var(--muted);line-height:1.6;margin:10px 0}
.admin-login .err{font-size:12.5px;color:var(--danger);margin-top:10px;min-height:16px}
.admin-login ol.steps{margin:0 0 14px;padding-left:18px;font-size:13px;color:var(--muted);line-height:1.7}
.admin-login ol.steps li{margin-bottom:6px}max-width:390px;margin:80px auto;padding:32px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 40px rgba(0,0,0,.06)}
.admin-login h2{font-size:22px;font-weight:600;margin:0 0 20px;text-align:center}
.admin-login input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14.5px;margin-bottom:12px}
.admin-login button,.admin-btn{background:#1d1d1f;color:#fff;border:0;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:500;cursor:pointer}
.admin-login .err{color:#e03;font-size:12.5px;text-align:center;margin-top:8px}
#admin-app{padding:0 24px;max-width:1280px;margin:0 auto}
.admin-top{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:24px;flex-wrap:wrap;gap:12px}
.admin-top h1{font-size:22px;font-weight:600;margin:0}
.admin-top .right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Top-bar buttons mirror the front-nav 38px pill system */
.admin-top .admin-btn{height:38px;border-radius:999px;padding:0 18px}
.admin-top .admin-btn.small{height:38px;padding:0 16px;font-size:12.5px}
.admin-langs{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;height:38px}
.admin-langs .admin-btn{border:none;border-radius:0;height:36px;background:#fff;color:var(--muted)}
.admin-langs .admin-btn.on{background:var(--fg);color:#fff}
.admin-btn.outline{background:#fff;color:var(--fg);border:1px solid var(--line)}
.admin-btn.danger{background:#e03}
.admin-btn.small{padding:7px 12px;font-size:12.5px}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:28px}
.admin-stat{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.admin-stat .an{font-size:28px;font-weight:600}
.admin-stat .al{font-size:12.5px;color:var(--muted);margin-top:2px}
.admin-toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.admin-toolbar input,.admin-toolbar select{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px}
.admin-toolbar input{flex:1;min-width:200px}
.admin-tbl{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.admin-tbl{overflow-x:auto}
.admin-tbl-row{display:grid;grid-template-columns:1.6fr 1fr 1fr .9fr .7fr minmax(170px,auto);gap:8px;padding:10px 14px;font-size:13.5px;align-items:center;border-bottom:1px solid var(--line);min-width:660px}
.admin-tbl-row:last-child{border-bottom:0}
.admin-tbl-row .act{white-space:nowrap;display:inline-flex;gap:6px;justify-content:flex-end}
.admin-tbl-row .act .admin-btn{height:30px}
.admin-tbl-row.head{background:var(--soft);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px;color:var(--muted)}
.admin-tbl-row .ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-tbl-row .act{display:flex;gap:5px}
.admin-empty{text-align:center;padding:40px;color:var(--muted);font-size:14px}
.admin-feat{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.admin-feat-hint{margin:0;padding:14px 16px;font-size:13px;color:var(--muted);background:var(--soft);border-bottom:1px solid var(--line)}
.admin-feat-row{display:grid;grid-template-columns:44px 1fr 90px 40px 40px;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.admin-feat-row:last-child{border-bottom:0}
.admin-feat-row .fo-rank{font-weight:600;color:var(--muted);text-align:center}
.admin-feat-row .fo-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.admin-feat-row .fo-input{width:100%;padding:6px 8px;border:1px solid var(--line);border-radius:8px;font-size:13px;text-align:center}
/* modal */
.admin-mask{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.admin-mdl{background:#fff;border-radius:18px;max-width:640px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 16px 60px rgba(0,0,0,.15)}
.admin-mdl-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.admin-mdl-head h3{margin:0;font-size:17px}
.admin-mdl-close{width:28px;height:28px;border:0;background:var(--soft);border-radius:50%;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center}
.admin-mdl-body{padding:18px 22px}
.admin-mdl-body label{display:block;font-size:12.5px;font-weight:600;margin:10px 0 3px;color:var(--muted)}
.admin-mdl-body input,.admin-mdl-body textarea,.admin-mdl-body select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;font-size:13.5px;font-family:inherit}
.admin-mdl-body textarea{min-height:60px;resize:vertical}
.admin-mdl-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.admin-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;padding:12px 22px;border-radius:10px;font-size:13.5px;z-index:200;box-shadow:0 6px 24px rgba(0,0,0,.2);animation:toastIn .3s ease}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.admin-pwd-change{max-width:440px;margin:24px auto;padding:20px;border:1px solid var(--line);border-radius:12px}
.admin-pwd-change h3{margin:0 0 14px;font-size:16px}
.admin-pwd-change input{margin-bottom:10px}
.admin-pwd-change .hint{font-size:12px;color:var(--muted);margin-bottom:10px}
.admin-tabs{display:flex;gap:8px;margin:8px 0 18px}
.admin-tab{background:#fff;border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:500;cursor:pointer}
.admin-tab.on{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
.admin-i18n-head{margin-bottom:10px}
.admin-i18n-hint{font-size:12px;color:var(--muted);margin:6px 0 0}
.admin-i18n{display:grid;grid-template-columns:240px 1fr;column-gap:18px}
.admin-irow{display:contents}
.admin-irow .ik{grid-column:1;padding:11px 0;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);align-self:center;word-break:break-all}
.admin-irow .iv{grid-column:2;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;font-family:inherit;min-height:40px;resize:vertical;margin:6px 0}
.admin-btn.primary{background:#1d1d1f;color:#fff;padding:13px 26px;font-size:15px;font-weight:600;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.2);transition:transform .15s ease,box-shadow .15s ease}
.admin-btn.primary:hover{transform:scale(1.04);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.admin-hint-bar{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13.5px;line-height:1.6;color:var(--fg);margin-bottom:16px}
.admin-rb-list{display:flex;flex-direction:column;gap:10px}
.admin-rb-item{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.admin-rb-item .rb-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.admin-rb-item .rb-name{font-size:14px;font-weight:500;word-break:break-all}
.admin-rb-item .rb-size{font-size:12px;color:var(--muted)}
.admin-guide{max-width:840px;margin:0 auto}
.admin-guide .g-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:16px}
.admin-guide .g-card h3{font-size:17px;font-weight:600;margin:0 0 10px;color:#1d1d1f}
.admin-guide .g-card p{font-size:14px;line-height:1.75;color:var(--fg);margin:0 0 8px}
.admin-guide .g-card ul{margin:6px 0 0;padding-left:20px}
.admin-guide .g-card li{font-size:14px;line-height:1.85;color:var(--fg)}
.admin-guide .g-card code{background:var(--soft);border-radius:6px;padding:1px 6px;font-size:12.5px}
/* Nav auth button */
.nav-auth{margin-left:24px;display:flex;align-items:center;flex-shrink:0}
.nav-auth-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--ctl-h);padding:0 14px;border-radius:var(--ctl-r);font-size:12.5px;font-weight:600;line-height:1;cursor:pointer;border:none;background:var(--fg);color:#fff;transition:opacity .15s,transform .15s;font-family:inherit;text-decoration:none}
.nav-auth-btn:hover{opacity:.85;text-decoration:none;transform:translateY(-1px)}
.nav-auth-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
.nav-auth-avatar{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--muted);font-size:15px;font-weight:600;cursor:pointer;transition:background .15s;position:relative;border:1px solid var(--line)}
.nav-auth-avatar:hover{background:var(--line)}
.nav-auth-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);min-width:160px;padding:6px;z-index:50;display:none;font-size:13.5px}
.nav-auth-menu.on{display:block}
.nav-auth-menu .mu{display:block;padding:8px 12px;color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--line);margin-bottom:4px}
.nav-auth-menu .mi{display:block;padding:8px 12px;color:var(--fg);border-radius:8px;cursor:pointer;text-decoration:none;transition:background .1s}
.nav-auth-menu .mi:hover{background:var(--soft)}
.nav-auth-menu .mi.disabled{opacity:.45;pointer-events:none;color:var(--muted);cursor:default}
/* Auth modal */
.auth-modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;align-items:center;justify-content:center;padding:24px}
.auth-modal-mask.on{display:flex}
.auth-modal{background:#fff;border-radius:20px;max-width:420px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.2);overflow:hidden;animation:modalIn .25s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.auth-modal-body{padding:36px 28px 32px;position:relative;text-align:center}
.auth-modal-body .am-icon{width:56px;height:56px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.auth-modal-body .am-icon svg{width:28px;height:28px;stroke:var(--fg);fill:none;stroke-width:1.5}
.auth-modal-body h2{font-size:22px;font-weight:700;margin:0 0 6px;letter-spacing:-.3px}
.auth-modal-body .am-sub{color:var(--muted);font-size:14.5px;margin-bottom:28px;line-height:1.5}
.auth-modal-body .am-actions{display:flex;flex-direction:column;gap:10px}
.am-btn{display:block;width:100%;padding:13px 20px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;text-align:center;text-decoration:none;font-family:inherit;transition:opacity .15s}
.am-btn.primary{background:var(--fg);color:#fff;border:none}
.am-btn.primary:hover{opacity:.9;text-decoration:none}
.am-btn.secondary{background:var(--soft);color:var(--fg);border:1px solid var(--line)}
.am-btn.secondary:hover{text-decoration:none;background:var(--bg)}
.am-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px;transition:background .15s}
.am-close:hover{background:var(--soft)}
/* Registration page */
.reg-wrap{max-width:460px;margin:40px auto 60px;padding:0 20px}
.reg-wrap h1{font-size:28px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px}
.reg-wrap .sub{color:var(--muted);font-size:14.5px;margin-bottom:28px}
.reg-wrap .fg{margin-bottom:20px}
.reg-wrap .fg label{display:block;font-size:13px;font-weight:600;margin-bottom:5px;color:var(--fg)}
.reg-wrap .fg input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit;transition:border-color .15s,box-shadow .15s;background:#fff}
.reg-wrap .fg input:focus{outline:none;border-color:var(--fg);box-shadow:0 0 0 3px rgba(0,0,0,.08)}
.reg-wrap .fg input.err{border-color:#e03}
.reg-wrap .fg .hint{font-size:12px;color:var(--muted);margin-top:5px}
.pw-strength{display:flex;gap:4px;margin-top:6px}
.pw-strength-bar{flex:1;height:4px;border-radius:2px;background:var(--line);transition:background .2s}
.pw-strength .st-text{font-size:11.5px;color:var(--muted);margin-top:3px}
.match-ok{color:var(--ok);font-size:12px;margin-top:4px}
.match-err{color:#e03;font-size:12px;margin-top:4px}
.reg-wrap .btn-submit{width:100%;padding:13px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;border:none;background:var(--fg);color:#fff;font-family:inherit;transition:opacity .15s}
.reg-wrap .btn-submit:hover{opacity:.9}
.reg-wrap .btn-submit:disabled{opacity:.4;cursor:not-allowed}
.reg-wrap .swap-line{text-align:center;margin-top:18px;font-size:13.5px;color:var(--muted)}
.reg-wrap .swap-line a{color:var(--fg);text-decoration:underline;font-weight:500}
.reg-wrap .msg{font-size:13.5px;margin-bottom:16px;padding:10px 14px;border-radius:8px;display:none}
.reg-wrap .msg.ok{background:rgba(26,162,96,.08);color:var(--ok);display:block}
.reg-wrap .msg.err{background:rgba(200,40,40,.07);color:#c22;display:block}
/* Toast */
.site-toast{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:300;background:var(--fg);color:#fff;padding:12px 24px;border-radius:10px;font-size:14px;font-weight:500;box-shadow:0 6px 30px rgba(0,0,0,.2);animation:toastIn .35s ease;display:none}
.site-toast.on{display:block}