:root { --ink:#163837; --muted:#6c7774; --paper:#f6f3ed; --card:#fffdf9; --line:#dedbd3; --teal:#174e4a; --teal-soft:#e2eeeb; --copper:#b8653d; --shadow:0 14px 40px rgba(27,52,49,.09); }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.topbar { height:72px; padding:0 clamp(20px,4vw,64px); display:flex; align-items:center; justify-content:space-between; background:rgba(246,243,237,.94); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(12px); }
.brand-lockup { display:flex; align-items:center; gap:11px; }
.logo-mark { width:38px; height:38px; display:grid; place-items:center; background:var(--teal); color:white; font-family:serif; font-size:21px; }
.brand-lockup div { display:flex; flex-direction:column; line-height:1.2; }
.brand-lockup strong { font-size:16px; letter-spacing:.06em; }
.brand-lockup span:last-child { color:var(--muted); font-size:11px; margin-top:4px; }
.status-area { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.status-area button { border:1px solid var(--teal); background:transparent; color:var(--teal); padding:6px 9px; font-size:10px; cursor:pointer; }
.status-area button:hover { background:var(--teal); color:#fff; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#d39743; box-shadow:0 0 0 4px rgba(211,151,67,.12); }
.status-dot.online { background:#3b8e6a; box-shadow:0 0 0 4px rgba(59,142,106,.12); }
.hero { margin:0 clamp(20px,4vw,64px); padding:25px 0; display:grid; grid-template-columns:minmax(0,1fr) 190px; align-items:center; gap:32px; border-bottom:1px solid var(--line); }
.eyebrow,.section-kicker { color:var(--copper); font-size:12px; font-weight:700; letter-spacing:.12em; }
.hero-workflow-head { display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.hero-workflow-head p { max-width:580px; color:var(--muted); line-height:1.6; margin:0; font-size:12px; }
.workflow-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:14px; }
.workflow-steps>div { display:flex; align-items:center; gap:10px; min-width:0; padding:11px 12px; background:var(--card); border:1px solid var(--line); }
.workflow-steps b { color:var(--copper); font:600 18px/1 Georgia,serif; }
.workflow-steps span { display:grid; gap:3px; min-width:0; }.workflow-steps strong { font-size:11px; }.workflow-steps small { overflow:hidden; color:var(--muted); font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.hero-stat { border-left:3px solid var(--copper); padding:7px 0 5px 20px; display:grid; }
.hero-stat strong { font-family:serif; font-size:42px; line-height:1; }
.hero-stat span { font-size:13px; font-weight:700; margin-top:7px; }
.hero-stat small { color:var(--muted); margin-top:4px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(360px,.85fr); gap:24px; padding:28px clamp(20px,4vw,64px) 120px; align-items:start; }
.catalog-panel,.chat-panel { min-width:0; }
.section-heading { display:flex; justify-content:space-between; gap:20px; align-items:end; margin-bottom:14px; }
.section-heading h2 { margin:4px 0 0; font:600 26px/1.2 "Songti SC","SimSun",serif; }
.search-box { display:flex; align-items:center; gap:8px; min-width:220px; background:var(--card); border:1px solid var(--line); padding:10px 12px; }
.search-box input { border:0; outline:0; background:transparent; width:100%; color:var(--ink); font-size:13px; }
.catalog-meta { display:flex; gap:18px; color:var(--muted); font-size:11px; margin-bottom:17px; }
.category-tabs{display:flex;gap:7px;overflow-x:auto;padding:14px 0 12px;scrollbar-width:thin}.category-tabs button{flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--muted);padding:8px 11px;cursor:pointer;font-size:10px;white-space:nowrap}.category-tabs button b{display:inline-grid;place-items:center;min-width:19px;height:19px;margin-left:4px;border-radius:10px;background:var(--paper);font-size:9px}.category-tabs button:hover,.category-tabs button.active{border-color:var(--teal);background:var(--teal);color:#fff}.category-tabs button.active b{background:rgba(255,255,255,.18)}
.category-nav-shell{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-width:0}.category-menu-toggle{display:flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 13px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--teal);white-space:nowrap;cursor:pointer;font-weight:700}.category-menu-toggle b{font-size:16px;line-height:1}.category-menu-toggle:hover,.category-menu-toggle.active{background:var(--teal);border-color:var(--teal);color:#fff}.category-menu{position:absolute;z-index:45;top:calc(100% + 6px);left:0;right:0;max-height:min(62vh,560px);overflow:auto;padding:18px;border:1px solid rgba(23,78,74,.22);border-radius:16px;background:rgba(255,253,249,.98);box-shadow:0 22px 60px rgba(16,51,47,.2);backdrop-filter:blur(16px)}.category-menu[hidden]{display:none}.category-menu-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0 2px 12px;border-bottom:1px solid var(--line)}.category-menu-head strong{font-size:17px;color:var(--ink)}.category-menu-head small{font-size:11px;color:var(--muted)}.category-menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:14px}.category-menu-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-content:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.category-menu-group>span{grid-column:1/-1;color:var(--copper);font-size:11px;font-weight:800;letter-spacing:.05em}.category-menu-group button{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:44px;padding:8px 10px;border:1px solid #e2ded6;border-radius:9px;background:#fbfaf7;color:var(--ink);text-align:left;cursor:pointer;font-size:12px}.category-menu-group button b{flex:0 0 auto;color:var(--muted);font-size:10px}.category-menu-group button:hover,.category-menu-group button.active{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}.category-menu-all{grid-column:1/-1;grid-template-columns:1fr}.category-menu-all button{max-width:280px}
.catalog-meta span+span:before { content:"·"; margin-right:18px; color:#b6b0a7; }
.product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.product-card { overflow:hidden; background:var(--card); border:1px solid var(--line); box-shadow:0 4px 15px rgba(33,50,48,.04); transition:.2s ease; }
.product-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#c8c3b9; }
.product-image-wrap { height:230px; position:relative; background:#fff; overflow:hidden; }
.product-image { width:100%; height:100%; display:block; object-fit:contain; padding:12px; background:#fff; }
.product-card:hover .product-image { transform:none; }
.finish-badge { position:absolute; left:12px; top:12px; background:rgba(255,253,249,.92); border:1px solid rgba(255,255,255,.8); padding:5px 9px; font-size:11px; backdrop-filter:blur(5px); }
.product-body { padding:16px; }
.product-heading { display:flex; justify-content:space-between; align-items:start; }
.brand { color:var(--muted); font-size:11px; }
.product-heading h3 { margin:2px 0 0; font:600 25px/1.1 "Songti SC","SimSun",serif; }
.price { color:var(--copper); font-size:18px; }
.feature { font-size:13px; font-weight:700; margin:14px 0 6px; }
.description { color:var(--muted); font-size:12px; line-height:1.65; min-height:40px; margin:0; }
.product-actions { display:grid; grid-template-columns:1.2fr 1fr; gap:8px; margin-top:14px; }
.product-actions button { min-height:38px; border:1px solid var(--line); background:transparent; cursor:pointer; font-size:12px; transition:.15s; }
.secondary-button { background:var(--teal)!important; color:#fff!important; border-color:var(--teal)!important; }
.secondary-button:hover { background:#0f3d3a!important; }
.compare-button:hover,.compare-button.selected { color:var(--teal); border-color:var(--teal); background:var(--teal-soft); }
.empty { padding:50px; text-align:center; color:var(--muted); border:1px dashed var(--line); background:var(--card); }
.chat-panel { height:calc(100vh - 96px); min-height:680px; position:sticky; top:88px; display:grid; grid-template-rows:auto 1fr auto; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); }
.chat-heading { padding:16px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:10px; }
.agent-avatar { width:38px; height:38px; border-radius:50%; background:var(--teal); color:#fff; display:grid; place-items:center; font:700 11px/1 serif; }
.chat-identity { display:flex; flex-direction:column; min-width:0; }
.chat-heading strong { font-size:14px; }
.chat-heading span { color:var(--muted); font-size:10px; margin-top:3px; }
.chat-expand-button { margin-left:auto; width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:1px solid var(--line); background:#fff; color:var(--teal); cursor:pointer; font-size:20px; line-height:1; transition:background .15s,color .15s,transform .15s; }
.chat-expand-button:hover { background:var(--teal); color:#fff; transform:translateY(-1px); }
.chat-expand-button:focus-visible { outline:3px solid rgba(23,78,74,.25); outline-offset:2px; }
body.chat-drawer-open { overflow:hidden; }
.chat-panel.is-expanded { position:fixed; inset:0; top:0; z-index:45; width:100vw; height:100dvh; min-height:0; border:0; box-shadow:-24px 0 80px rgba(9,35,33,.24); animation:chatDrawerIn .22s ease-out; }
.chat-panel.is-expanded .chat-heading { padding:17px clamp(18px,4vw,56px); }
.chat-panel.is-expanded .messages,.chat-panel.is-expanded .chat-compose { width:min(1000px,100%); margin-inline:auto; }
.chat-panel.is-expanded .messages { padding:26px clamp(18px,4vw,44px); }
.chat-panel.is-expanded .message-bubble { max-width:min(760px,88%); }
.chat-panel.is-expanded .chat-products { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
@keyframes chatDrawerIn { from{transform:translateX(7%);opacity:.72} to{transform:translateX(0);opacity:1} }
.messages { overflow:auto; padding:18px; scroll-behavior:smooth; }
.message-row { display:flex; flex-direction:column; align-items:flex-start; margin-bottom:18px; }
.message-row.user { align-items:flex-end; }
.message-bubble { max-width:92%; background:var(--teal-soft); padding:12px 14px; border-left:2px solid var(--teal); }
.user .message-bubble { background:var(--teal); color:white; border-left:0; }
.message-bubble p { margin:0; font-size:13px; line-height:1.7; white-space:pre-wrap; }
.message-bubble small { display:block; color:#778c88; margin-top:7px; font-size:9px; }
.chat-products { width:100%; display:grid; gap:7px; margin-top:8px; }
.chat-products-more{display:grid;gap:7px}.chat-products-more[hidden]{display:none}.chat-products-more:not([hidden]){display:contents}.chat-products-toggle{grid-column:1/-1;width:100%;min-height:38px;border:1px solid rgba(23,78,74,.28);border-radius:10px;background:var(--teal-soft);color:var(--teal);font-weight:800;cursor:pointer}.chat-products-toggle:hover{background:var(--teal);color:#fff}.chat-category-options{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:8px}.chat-category-options button{min-height:40px;padding:8px 13px;border:1px solid rgba(23,78,74,.3);border-radius:999px;background:#fff;color:var(--teal);font-weight:700;cursor:pointer}.chat-category-options button:hover{background:var(--teal);color:#fff}
.chat-product { width:100%; border:1px solid var(--line); background:#fff; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:9px; padding:7px; text-align:left; cursor:pointer; }
.chat-product:hover { border-color:var(--teal); }
.chat-product img { width:48px; height:48px; object-fit:cover; }
.chat-product span { display:flex; flex-direction:column; min-width:0; }
.chat-product strong { font-size:11px; }
.chat-product small { color:var(--muted); font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }
.chat-product b { color:var(--copper); font-size:12px; }
.typing { display:flex; gap:5px; padding:15px; }
.typing i { width:5px; height:5px; border-radius:50%; background:var(--teal); animation:pulse 1.1s infinite; }.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes pulse { 0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)} }
.chat-compose { padding:12px 14px 10px; border-top:1px solid var(--line); background:#faf8f3; }
.photo-identify { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.photo-identify button { border:1px solid var(--teal); background:var(--teal-soft); color:var(--teal); padding:7px 10px; font-size:10px; font-weight:700; cursor:pointer; }
.photo-identify button:hover { background:var(--teal); color:#fff; }
.photo-identify button:disabled { opacity:.55; cursor:wait; }
.photo-identify small { color:var(--muted); font-size:9px; }
.photo-message { width:100%; margin-bottom:8px; display:flex; align-items:center; gap:9px; padding:8px; background:#fff; border:1px solid var(--line); }
.photo-message img { width:62px; height:62px; object-fit:cover; }
.photo-message span { display:flex; flex-direction:column; gap:3px; }
.photo-message strong { font-size:11px; }
.photo-message small { color:var(--muted); font-size:9px; }
.quick-prompts { display:flex; gap:6px; overflow:auto; padding-bottom:9px; }
.quick-prompts button { flex:0 0 auto; border:1px solid #d7d2c8; background:white; padding:6px 8px; font-size:9px; cursor:pointer; }
.quick-prompts button:hover { color:var(--teal); border-color:var(--teal); }
.chat-compose form { display:grid; grid-template-columns:1fr 42px 56px; background:white; border:1px solid #cbc7bd; }
.chat-compose textarea { border:0; resize:none; outline:0; padding:10px 11px; color:var(--ink); font-size:12px; line-height:1.5; background:transparent; }
.chat-compose form button { border:0; margin:5px; background:var(--teal); color:white; cursor:pointer; font-size:11px; }
.chat-compose form button:disabled { opacity:.4; cursor:default; }
.chat-compose .voice-button { margin:8px 1px; background:transparent; color:var(--teal); border:1px solid var(--line); }
.chat-compose .voice-button span { display:block; font-size:11px; line-height:1; }
.chat-compose .voice-button:hover { border-color:var(--teal); background:var(--teal-soft); }
.chat-compose .voice-button.listening { color:#fff; background:#b94d3d; border-color:#b94d3d; animation:voicePulse 1.2s infinite; }
@keyframes voicePulse { 0%,100%{box-shadow:0 0 0 0 rgba(185,77,61,.32)}50%{box-shadow:0 0 0 6px rgba(185,77,61,0)} }
.scope-note { color:#97918a; font-size:9px; text-align:center; margin:7px 0 0; }
.compare-tray { position:fixed; z-index:30; bottom:18px; left:50%; transform:translateX(-50%); width:min(1040px,calc(100vw - 40px)); background:#153c3a; color:white; box-shadow:0 18px 60px rgba(10,38,36,.28); padding:12px 14px; display:grid; grid-template-columns:155px 1fr; gap:12px; }
.compare-title { display:flex; flex-wrap:wrap; align-content:center; gap:7px; border-right:1px solid rgba(255,255,255,.2); }
.compare-title strong { width:100%; white-space:nowrap; }.compare-title span { font-size:11px; opacity:.7; white-space:nowrap; }.compare-title button { border:0;background:none;color:#d2dfdd;text-decoration:underline;font-size:10px;cursor:pointer; }.compare-title .order-start{width:100%;padding:7px;background:#fff;color:var(--teal);text-decoration:none;font-weight:700}.compare-title .price-unlock{width:100%;padding:6px;border:1px solid rgba(255,255,255,.32);text-decoration:none}.compare-title .price-unlock.authorized{background:#347b61;border-color:#347b61;color:#fff}
.compare-items { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.compare-item { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:10px; align-items:center; min-width:0; background:rgba(255,255,255,.08); padding:10px; }
.compare-item-media { display:grid; place-items:center; min-width:0; }
.compare-item-media img { display:block; width:56px; height:56px; object-fit:cover; }
.compare-item-info { min-width:0; display:grid; gap:3px; }
.compare-item-info strong { font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-item-info small { font-size:9px; opacity:.72; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-item-controls { display:flex; align-items:center; gap:8px; min-width:max-content; white-space:nowrap; }
.compare-price-wrap { display:flex!important; flex-direction:row!important; align-items:center; gap:2px; white-space:nowrap; }
.compare-price-wrap input { width:58px; border:1px solid transparent; background:transparent; color:#fff; font-size:11px; font-weight:700; padding:3px; }
.compare-price-wrap input.unlocked { border-color:#8ec8b1; background:rgba(255,255,255,.12); outline:0; }
.compare-remove { width:28px; height:28px; border:1px solid rgba(255,255,255,.22); border-radius:7px; background:transparent; color:white; cursor:pointer; opacity:.82; line-height:1; }
.compare-qty { display:flex!important; flex-direction:row!important; align-items:center; gap:2px; white-space:nowrap; }
.compare-qty button { width:28px; height:28px; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; cursor:pointer; line-height:1; }
.compare-qty input { width:34px; height:28px; text-align:center; border:0; background:rgba(255,255,255,.12); color:#fff; font-size:10px; }
.modal-backdrop { position:fixed; inset:0; z-index:50; background:rgba(9,25,24,.74); display:grid; place-items:center; padding:24px; }
.video-modal { position:relative; width:min(940px,96vw); max-height:92vh; overflow:auto; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr); background:var(--card); box-shadow:0 30px 90px rgba(0,0,0,.35); }
.video-modal video { width:100%; height:100%; min-height:460px; max-height:78vh; background:#0d1918; object-fit:contain; }
.video-modal>div { padding:38px 28px; align-self:center; }.video-modal span{color:var(--copper);font-size:11px;letter-spacing:.08em}.video-modal h2{font:600 28px/1.2 "Songti SC",serif;margin:7px 0 14px}.video-modal p{color:var(--muted);font-size:13px;line-height:1.8}.video-modal strong{display:block;color:var(--copper);font-size:20px;margin-top:22px}.modal-close{position:absolute;z-index:2;right:12px;top:10px;width:34px;height:34px;border:0;background:rgba(255,255,255,.9);font-size:22px;cursor:pointer}
.key-dialog { position:relative; width:min(470px,94vw); background:var(--card); padding:38px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.key-dialog h2 { margin:7px 0 10px; font:600 27px/1.2 "Songti SC",serif; }
.key-dialog p { color:var(--muted); font-size:12px; line-height:1.7; }
.key-dialog form { display:grid; gap:10px; margin-top:20px; }
.key-dialog input { width:100%; border:1px solid var(--line); background:#fff; padding:12px; outline:0; }
.key-dialog input:focus { border-color:var(--teal); }
.key-dialog form button { border:0; background:var(--teal); color:#fff; padding:12px; cursor:pointer; }
.key-dialog>small { display:block; min-height:17px; margin-top:9px; color:#b34935; }
.order-dialog { position:relative; width:min(920px,96vw); max-height:94vh; overflow:auto; background:var(--card); padding:32px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.order-head { display:flex; justify-content:space-between; align-items:start; gap:20px; padding-bottom:17px; border-bottom:2px solid var(--teal); }
.order-head h2 { margin:5px 0 0; font:600 30px/1.1 "Songti SC",serif; }
.order-head>div:last-child { display:grid; text-align:right; gap:3px; }
.order-head small { color:var(--muted); font-size:10px; }.order-head strong{font-size:13px}
.order-customer { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0; }
.order-customer label,.order-summary label { color:var(--muted); font-size:10px; }
.order-customer input,.order-summary textarea { width:100%; display:block; margin-top:5px; padding:9px; border:1px solid var(--line); background:#fff; color:var(--ink); outline:0; }
.order-table-wrap { overflow:auto; }.order-table{width:100%;border-collapse:collapse;font-size:12px}.order-table th{background:var(--teal-soft);color:var(--teal);text-align:left;padding:10px 8px}.order-table td{padding:10px 8px;border-bottom:1px solid var(--line)}.order-table td:first-child{font-weight:700}.order-table input{width:78px;padding:6px;border:1px solid var(--line);text-align:right}.order-table .order-qty{width:58px}.order-table .line-total{color:var(--copper);font-weight:700;white-space:nowrap}
.order-summary { display:grid; grid-template-columns:1fr 240px; gap:24px; margin-top:20px; align-items:end; }.order-summary>div{text-align:right;display:grid;gap:8px}.order-summary>div span{font-size:12px;color:var(--muted)}.order-summary>div>strong{font-size:24px;color:var(--copper)}
.order-hint { margin:16px 0 0; padding:10px; background:#f2eee6; color:var(--muted); font-size:10px; line-height:1.6; }
.order-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }.order-actions button{border:1px solid var(--teal);background:transparent;color:var(--teal);padding:10px 16px;cursor:pointer}.order-actions button:last-child{background:var(--teal);color:#fff}
@media (max-width:1050px){.workspace{grid-template-columns:1fr}.chat-panel{position:relative;top:0;height:760px}.product-image-wrap{height:280px}.catalog-panel{order:2}.chat-panel{order:1}}
@media (max-width:680px){.topbar{height:62px}.hero{grid-template-columns:1fr;padding-top:20px}.hero-stat{display:none}.hero-workflow-head{display:grid;gap:8px}.workflow-steps{grid-template-columns:1fr}.workspace{padding-left:14px;padding-right:14px}.section-heading{align-items:stretch;flex-direction:column}.search-box{min-width:0}.product-grid{grid-template-columns:1fr}.product-image-wrap{height:300px}.catalog-meta{gap:7px;flex-wrap:wrap}.catalog-meta span+span:before{margin-right:7px}.chat-panel{height:72vh;min-height:600px}.chat-panel.is-expanded{height:100dvh;min-height:0}.chat-panel.is-expanded .chat-heading{padding:12px 14px}.chat-panel.is-expanded .messages{padding:16px 14px}.chat-panel.is-expanded .chat-products{grid-template-columns:1fr}.compare-tray{grid-template-columns:1fr;max-height:62vh;overflow:auto}.compare-title{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:7px}.compare-title strong{width:auto}.compare-title .order-start{width:auto}.compare-items{grid-template-columns:1fr}.video-modal{grid-template-columns:1fr}.video-modal video{min-height:280px;height:45vh}.video-modal>div{padding:24px}.status-area span:last-child{display:none}.order-dialog{padding:24px 16px}.order-customer{grid-template-columns:1fr}.order-summary{grid-template-columns:1fr}.order-head{flex-direction:column}.order-head>div:last-child{text-align:left}}
@media print{body>*{visibility:hidden!important}#order-modal,#order-modal *{visibility:visible!important}#order-modal{position:absolute!important;inset:0!important;background:#fff!important;padding:0!important;display:block!important}#order-modal .order-dialog{width:100%!important;max-height:none!important;box-shadow:none!important;overflow:visible!important}.no-print{display:none!important}}

.admin-entry{border:1px solid var(--line);color:var(--teal);padding:8px 12px;text-decoration:none;font-size:11px;white-space:nowrap;background:rgba(255,255,255,.7)}
.account-logout{font-family:inherit;cursor:pointer}
.image-placeholder{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#e1ebe7,#f2eee6);color:var(--teal)}
.image-placeholder strong{font-size:22px;letter-spacing:.04em}.image-placeholder span{font-size:10px;color:var(--muted)}
.modal-product-image{width:100%;height:100%;min-height:460px;max-height:78vh;object-fit:contain;background:#edf1ed}
.mini-placeholder,.chat-placeholder{display:grid;place-items:center;background:var(--teal-soft);color:var(--teal);font-weight:700;font-size:9px}
.mini-placeholder{width:44px;height:44px}.chat-placeholder{width:48px;height:48px}
@media (max-width:680px){.admin-entry{padding:7px 8px}.modal-product-image{min-height:280px;height:45vh}}

/* 正式版视觉层级与跨设备适配 */
html { min-height:100%; }
body {
  min-height:100%;
  background:
    radial-gradient(circle at 8% 4%,rgba(193,224,214,.42),transparent 26rem),
    radial-gradient(circle at 94% 20%,rgba(218,177,134,.18),transparent 28rem),
    linear-gradient(180deg,#f8f6f1 0%,#f3f0e9 100%);
}
.topbar {
  box-shadow:0 10px 35px rgba(23,55,52,.06);
  border-bottom-color:rgba(180,181,172,.6);
}
.logo-mark { border-radius:10px; box-shadow:0 10px 24px rgba(23,78,74,.2); }
.hero { max-width:1536px; margin-inline:auto; padding-inline:clamp(20px,4vw,64px); }
.workflow-steps>div {
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,246,239,.92));
  box-shadow:0 8px 24px rgba(23,55,52,.045);
}
.workspace { max-width:1664px; margin-inline:auto; }
.product-card,.chat-panel { border-radius:18px; }
.product-card { box-shadow:0 10px 35px rgba(26,54,51,.065); }
.product-image-wrap { background:linear-gradient(160deg,#fff 0%,#f7f8f4 100%); }
.product-image { transition:transform .35s ease; }
.product-card:hover .product-image { transform:scale(1.025); }
.category-tabs button,.search-box,.product-actions button,.photo-identify button,.quick-prompts button { border-radius:9px; }
.chat-panel {
  overflow:hidden;
  border-color:rgba(174,183,178,.7);
  box-shadow:0 24px 70px rgba(15,55,51,.12);
}
.chat-heading {
  background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(232,242,238,.85));
}
.agent-avatar {
  box-shadow:0 8px 22px rgba(23,78,74,.24);
  font-size:17px;
}
.chat-tools { margin-left:auto; display:flex; align-items:center; gap:6px; }
.chat-tool-button,.chat-expand-button {
  margin-left:0;
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.86);
  color:var(--teal);
  cursor:pointer;
  line-height:1;
  transition:.18s ease;
}
.chat-tool-button:hover,.chat-tool-button.active,.chat-expand-button:hover {
  background:var(--teal);
  border-color:var(--teal);
  color:#fff;
  transform:translateY(-1px);
}
.speech-toggle-button {
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
  font-size:17px;
  line-height:1;
}
.chat-clear-button {
  width:auto;
  min-width:58px;
  flex-basis:auto;
  padding:0 12px;
  font-family:inherit;
  font-size:12px;
  font-weight:800;
}
.chat-clear-button:focus-visible {
  outline:3px solid rgba(192,91,47,.3);
  outline-offset:2px;
}
.message-bubble,.chat-product,.photo-message { border-radius:12px; }
.chat-compose { background:linear-gradient(180deg,#fbfaf6,#f3f0e8); }
.chat-compose form { border-radius:12px; overflow:hidden; box-shadow:0 6px 18px rgba(24,55,52,.045); }
.key-dialog label { display:grid; gap:6px; color:var(--muted); font-size:11px; }
.key-dialog label+label { margin-top:4px; }

@media (min-width:1450px){
  .workspace { grid-template-columns:minmax(0,1.65fr) minmax(400px,.8fr); }
  .product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .product-image-wrap { height:240px; }
}
@media (max-width:1050px){
  .workspace { padding-top:20px; }
  .chat-panel { height:min(720px,76dvh); min-height:560px; }
}
@media (max-width:680px){
  input,textarea,select { font-size:16px!important; }
  body { background:linear-gradient(180deg,#f8f6f1,#f1eee7); }
  .topbar { padding:0 12px; gap:8px; }
  .brand-lockup { gap:8px; }
  .brand-lockup span:last-child,.status-dot,#status-text { display:none; }
  .status-area { margin-left:auto; gap:5px; }
  .admin-entry { max-width:96px; overflow:hidden; text-overflow:ellipsis; }
  .hero { margin:0; padding:18px 14px; }
  .hero-workflow-head p { font-size:11px; }
  .workflow-steps { grid-template-columns:repeat(3,1fr); gap:6px; }
  .workflow-steps>div { display:grid; justify-items:start; padding:10px 8px; }
  .workflow-steps small { white-space:normal; line-height:1.4; }
  .workspace { padding:14px 12px 126px; gap:18px; }
  .chat-panel { height:70dvh; min-height:540px; border-radius:16px; }
  .chat-heading { padding:12px; }
  .chat-identity span { max-width:126px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .chat-tools { gap:4px; }
  .chat-tool-button,.chat-expand-button { width:34px; height:34px; flex-basis:34px; }
  .chat-clear-button { width:auto; min-width:48px; flex-basis:auto; padding:0 8px; font-size:10px; }
  .messages { padding:14px 12px; }
  .chat-compose { padding:10px; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  .photo-identify { justify-content:space-between; }
  .photo-identify small { max-width:48%; text-align:right; }
  .chat-compose form { grid-template-columns:minmax(0,1fr) 44px 58px; }
  .chat-compose textarea { min-height:50px; }
  .product-grid { gap:12px; }
  .product-card { border-radius:15px; }
  .product-image-wrap { height:260px; }
  .product-body { padding:14px; }
  .product-heading h3 { font-size:23px; }
  .category-tabs { margin-inline:-12px; padding-inline:12px; }
  .compare-tray { bottom:max(10px,env(safe-area-inset-bottom)); width:calc(100vw - 20px); border-radius:15px; }
  .modal-backdrop { padding:10px; padding-bottom:max(10px,env(safe-area-inset-bottom)); }
  .video-modal,.order-dialog,.key-dialog { border-radius:16px; }
  .key-dialog { padding:30px 20px; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

.chat-failure {
  border:1px solid rgba(171,106,68,.28);
  background:linear-gradient(145deg,#fffaf3,#f7eee3);
  box-shadow:0 10px 28px rgba(91,57,34,.08);
}
.chat-failure-actions {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}
.chat-failure-actions button {
  min-height:40px;
  padding:8px 12px;
  border:1px solid rgba(23,78,74,.28);
  border-radius:9px;
  background:#fff;
  color:var(--teal);
  cursor:pointer;
  font:inherit;
}
.chat-failure-actions button:first-child {
  background:var(--teal);
  color:#fff;
  border-color:var(--teal);
}
.chat-failure-actions button:disabled {
  opacity:.6;
  cursor:wait;
}
@media (max-width:680px){
  .chat-failure-actions { flex-direction:column; }
  .chat-failure-actions button { width:100%; }
}

.catalog-heading-actions{display:flex;align-items:center;gap:8px;min-width:0}
.catalog-expand-button{display:none;width:36px;height:36px;flex:0 0 36px;place-items:center;border:1px solid var(--line);background:#fff;color:var(--teal);cursor:pointer;font-size:20px;line-height:1;transition:background .15s,color .15s,transform .15s}
.catalog-expand-button:hover{background:var(--teal);color:#fff;transform:translateY(-1px)}
.catalog-expand-button:focus-visible{outline:3px solid rgba(23,78,74,.25);outline-offset:2px}
.compare-toggle,.compare-close,.compare-total{display:none}
body.workspace-fullscreen{overflow:hidden}

@media (min-width:681px){
  html,body,body>main{height:100%;min-height:0;overflow:hidden}
  .topbar{height:78px;padding:0 24px;position:relative}
  .brand-lockup strong{font-size:20px}
  .brand-lockup span:last-child{font-size:13px}
  .logo-mark{width:46px;height:46px;font-size:25px;border-radius:12px}
  .status-area{gap:14px}
  .status-area #status-text{display:none}
  .status-dot{width:12px;height:12px;box-shadow:0 0 0 5px rgba(211,151,67,.12)}
  .status-dot.online{box-shadow:0 0 0 5px rgba(59,142,106,.12)}
  .admin-entry,.status-area button{min-height:52px;padding:0 18px;font-size:15px;display:flex;align-items:center}
  .hero{display:none}
  .workspace{
    height:calc(100dvh - 78px);
    min-height:0;
    padding:12px 16px 16px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:minmax(0,61fr) minmax(0,39fr);
    gap:12px;
    overflow:hidden;
    align-items:stretch;
  }
  body.cart-visible .workspace{padding-bottom:92px}
  body.cart-visible .workspace[data-view="chat"] .chat-compose{padding-bottom:16px}
  .catalog-panel,.chat-panel{
    position:relative;
    inset:auto;
    top:auto;
    width:auto;
    height:auto;
    min-height:0;
    overflow:hidden;
    border:2px solid #9aaca7;
    border-radius:18px;
    background:var(--card);
    box-shadow:0 8px 24px rgba(27,52,49,.09);
  }
  .chat-panel{
    order:1;
    display:grid;
    grid-template-rows:auto minmax(0,1fr) auto;
  }
  .catalog-panel{
    order:2;
    display:grid;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;
    padding:0;
  }
  .chat-heading,.section-heading{
    min-height:68px;
    margin:0;
    padding:10px 14px;
    border-bottom:1px solid var(--line);
    align-items:center;
    background:linear-gradient(90deg,#fbfdfc,#edf6f3);
  }
  .section-heading h2{font-size:23px}
  .section-kicker{font-size:12px}
  .chat-heading strong{font-size:20px}
  .chat-heading span{font-size:13px}
  .agent-avatar{width:48px;height:48px;font-size:16px}
  .chat-tool-button,.chat-expand-button,.catalog-expand-button{
    display:grid;
    width:52px;
    height:52px;
    min-height:52px;
    flex-basis:52px;
    border-radius:12px;
    font-size:24px;
  }
  .chat-clear-button{width:auto;min-width:64px;flex-basis:auto;padding:0 12px;font-size:13px}
  .catalog-heading-actions{flex:1;justify-content:flex-end}
  .search-box{width:min(58vw,620px);min-height:52px;padding:0 16px;border-radius:12px}
  .search-box input{font-size:18px}
  .category-tabs{padding:9px 14px 7px}
  .category-tabs button{min-height:52px;padding:0 16px;font-size:15px;border-radius:999px}
  .catalog-meta{margin:0;padding:0 14px 8px;font-size:13px}
  .product-grid{
    min-height:0;
    overflow:auto;
    padding:0 14px 16px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:max-content;
    gap:12px;
    align-content:start;
  }
  .product-card{border-radius:14px}
  .product-image-wrap{height:190px}
  .product-image{object-fit:contain;padding:10px}
  .product-body{padding:13px}
  .product-heading h3{font-size:23px}
  .brand,.description{font-size:13px}
  .feature{font-size:15px;margin:10px 0 5px}
  .price{font-size:20px}
  .product-actions button{min-height:52px;font-size:14px}
  .messages{min-height:0;padding:16px 18px;overflow:auto}
  .message-bubble{max-width:88%;padding:14px 16px;border-radius:14px}
  .message-bubble p{font-size:18px;line-height:1.65}
  .message-bubble small{font-size:12px}
  .chat-product{grid-template-columns:72px 1fr auto;gap:12px;min-height:88px;padding:8px 10px;border-radius:12px}
  .chat-product img,.chat-placeholder{width:72px;height:72px;object-fit:contain}
  .chat-product strong{font-size:16px}
  .chat-product small{font-size:13px}
  .chat-product b{font-size:19px}
  .chat-compose{padding:12px 14px;background:linear-gradient(180deg,#fbfaf6,#f3f0e8)}
  .photo-identify button,.quick-prompts button{min-height:52px;padding:0 16px;font-size:14px}
  .photo-identify small,.scope-note{font-size:12px}
  .chat-compose form{min-height:96px;grid-template-columns:minmax(0,1fr) 64px 88px;border-radius:14px}
  .chat-compose textarea{min-height:96px;padding:16px;font-size:18px;line-height:1.55}
  .chat-compose form button{min-height:52px;font-size:16px;border-radius:10px}
  .workspace[data-view="chat"],.workspace[data-view="catalog"]{grid-template-rows:minmax(0,1fr)}
  .workspace[data-view="chat"] .catalog-panel,
  .workspace[data-view="catalog"] .chat-panel{display:none}
  .workspace[data-view="chat"] .chat-panel,
  .workspace[data-view="catalog"] .catalog-panel{display:grid}
  .chat-panel.is-expanded,.catalog-panel.is-expanded{
    position:relative;
    inset:auto;
    width:auto;
    height:auto;
    min-height:0;
    z-index:auto;
    border:2px solid #9aaca7;
    animation:portraitModuleIn .2s ease-out;
  }
  .chat-panel.is-expanded .chat-heading{padding:10px 14px}
  .catalog-panel.is-expanded .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .catalog-panel.is-expanded .product-image-wrap{height:330px}
  .catalog-panel.is-expanded .product-body{padding:18px}
  .chat-panel.is-expanded .messages,.chat-panel.is-expanded .chat-compose{width:100%;max-width:none}
  .compare-tray{
    left:16px;
    right:16px;
    bottom:max(12px,env(safe-area-inset-bottom));
    width:auto;
    height:72px;
    min-height:72px;
    transform:none;
    padding:8px 10px;
    display:block;
    overflow:hidden;
    border-radius:16px;
    z-index:35;
  }
  .compare-title{
    min-height:56px;
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    align-items:center;
    gap:10px;
    border:0;
  }
  .compare-title strong{width:auto;font-size:18px}
  .compare-title span{font-size:14px}
  .compare-total{display:inline;justify-self:end;font-size:16px!important;font-weight:800;opacity:1!important}
  .compare-toggle,.compare-close{
    min-height:52px;
    padding:0 18px!important;
    border-radius:10px!important;
    text-decoration:none!important;
    font-size:15px!important;
  }
  .compare-toggle{display:block;justify-self:end;background:#fff!important;color:var(--teal)!important}
  .compare-close{display:none}
  .compare-tray:not(.is-open) .price-unlock,
  .compare-tray:not(.is-open) .order-start,
  .compare-tray:not(.is-open) #compare-clear,
  .compare-tray:not(.is-open) .compare-items{display:none}
  .compare-tray.is-open .compare-toggle{display:none}
  .compare-tray.is-open .compare-close{display:block}
  .compare-tray.is-open .price-unlock,
  .compare-tray.is-open .order-start,
  .compare-tray.is-open #compare-clear{
    display:block;
    width:auto;
    min-height:52px;
    padding:0 12px;
  }
  @keyframes portraitModuleIn{
    from{opacity:.75;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
  }
}

@media (min-width:681px) and (orientation:portrait){
  .compare-tray.is-open{
    height:auto;
    max-height:60dvh;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    padding:12px;
  }
  .compare-tray.is-open .compare-title{
    grid-template-columns:auto auto 1fr repeat(4,auto);
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  .compare-tray.is-open .compare-items{
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding-top:10px;
    overflow:auto;
  }
  .compare-tray.is-open .compare-item{min-height:82px}
}

@media (min-width:681px) and (orientation:landscape){
  .workspace{
    grid-template-rows:minmax(0,55fr) minmax(0,45fr);
  }
  .workspace[data-view="chat"],
  .workspace[data-view="catalog"]{
    grid-template-rows:minmax(0,1fr);
  }
  .compare-tray{
    left:20px;
    right:20px;
    bottom:16px;
    width:auto;
    transform:none;
    border-radius:16px;
    display:block;
    padding:10px 14px;
    overflow:hidden;
  }
  .compare-tray.is-open{
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    height:auto;
    max-height:min(54dvh,520px);
  }
  .compare-tray.is-open .compare-title{
    display:grid;
    grid-template-columns:auto auto 1fr repeat(4,auto);
    align-items:center;
    gap:10px;
    padding-bottom:10px;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  .compare-tray.is-open .compare-items{
    min-height:0;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    padding-top:10px;
    overflow:auto;
  }
  .compare-tray.is-open .compare-item-controls{white-space:nowrap}
  .compare-tray.is-open .compare-title button{white-space:nowrap}
}

@media (max-width:1100px) and (orientation:landscape){
  .compare-tray.is-open .compare-items{grid-template-columns:1fr}
}

@media (max-width:680px){
  .catalog-expand-button{display:none}
  .compare-tray{
    left:10px;
    right:10px;
    bottom:max(10px,env(safe-area-inset-bottom));
    width:auto;
    height:68px;
    max-height:none;
    transform:none;
    display:block;
    padding:8px 10px;
    overflow:hidden;
    border-radius:15px;
  }
  .compare-title{
    min-height:52px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:8px;
    padding:0;
    border:0;
  }
  .compare-title strong{width:auto;font-size:16px}
  #compare-count{display:none}
  .compare-total{display:inline;justify-self:end;font-size:14px!important;font-weight:800;opacity:1!important}
  .compare-toggle,.compare-close{
    min-height:44px;
    padding:0 12px!important;
    border-radius:9px!important;
    text-decoration:none!important;
    font-size:13px!important;
    white-space:nowrap;
  }
  .compare-toggle{display:block;background:#fff!important;color:var(--teal)!important}
  .compare-close{display:none}
  .compare-tray:not(.is-open) .price-unlock,
  .compare-tray:not(.is-open) .order-start,
  .compare-tray:not(.is-open) #compare-clear,
  .compare-tray:not(.is-open) .compare-items{display:none}
  .compare-tray.is-open{
    height:auto;
    max-height:72dvh;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr);
    padding:10px;
  }
  .compare-tray.is-open .compare-title{
    grid-template-columns:1fr 1fr;
    gap:8px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.2);
  }
  .compare-tray.is-open .compare-title strong,
  .compare-tray.is-open .compare-total{justify-self:start}
  .compare-tray.is-open .compare-toggle{display:none}
  .compare-tray.is-open .compare-close,
  .compare-tray.is-open .price-unlock,
  .compare-tray.is-open .order-start,
  .compare-tray.is-open #compare-clear{
    display:block;
    width:100%;
    min-height:44px;
    padding:0 8px;
    white-space:nowrap;
  }
  .compare-tray.is-open .compare-items{
    min-height:0;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding-top:10px;
    overflow:auto;
  }
  .compare-item{
    grid-template-columns:48px minmax(0,1fr);
    gap:8px;
    padding:8px;
  }
  .compare-item-media img,.compare-item-media .mini-placeholder{width:48px;height:48px}
  .compare-item-controls{
    grid-column:1/-1;
    justify-content:flex-end;
    min-width:0;
    gap:6px;
  }
  .compare-item-info strong,.compare-item-info small{white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .chat-panel.is-expanded,.catalog-panel.is-expanded{animation:none}
}

@media (min-width:681px){
  .category-nav-shell{padding-right:14px}
  .category-menu-toggle{min-height:52px;padding:0 17px;font-size:15px;border-radius:12px}
  .category-menu{left:14px;right:14px}
  .chat-category-options button,.chat-products-toggle{min-height:52px;font-size:14px}
}

@media (max-width:680px){
  .category-nav-shell{grid-template-columns:minmax(0,1fr) auto;margin-inline:-12px;padding-inline:12px}
  .category-tabs{margin-inline:0;padding-inline:0}
  .category-menu-toggle{min-height:44px;padding:0 10px}
  .category-menu-toggle span{display:none}
  .category-menu{position:fixed;top:auto;left:10px;right:10px;bottom:max(10px,env(safe-area-inset-bottom));max-height:70dvh;padding:14px;border-radius:16px}
  .category-menu-grid{grid-template-columns:1fr;gap:10px}
  .category-menu-group{grid-template-columns:1fr}
  .category-menu-head{position:sticky;top:-14px;z-index:2;background:#fffdf9;padding:12px 2px}
  .chat-category-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .chat-category-options button{min-height:44px}
}