@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+TC:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#18352e; --ink-soft:#50615a; --paper:#f7f4ef; --white:#fffdf9; --line:#dfddd6; --line-dark:#c9cac2; --accent:#d77751; --accent-soft:#f2d9c9; --sage:#dce7dc; --sage-deep:#9fbbab; --shadow:0 12px 30px rgba(24,53,46,.08); --radius:18px; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--paper); color:var(--ink); font-family:'Noto Sans TC',sans-serif; }
body { -webkit-font-smoothing:antialiased; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
svg { display:block; }

.sidebar { position:fixed; z-index:5; inset:0 auto 0 0; width:246px; display:flex; flex-direction:column; padding:30px 18px 20px; background:#f1eee8; border-right:1px solid #e4e2dc; }
.brand-mark { display:flex; align-items:center; gap:11px; padding:0 13px 34px; }
.brand-mark > span,.mobile-brand > span { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:var(--ink); color:#f3eee6; font-family:Georgia,serif; font-size:22px; font-weight:700; line-height:1; }
.brand-mark strong { display:block; font-family:'Space Grotesk',sans-serif; letter-spacing:-.04em; font-size:20px; line-height:1; }
.brand-mark small { display:block; margin-top:5px; color:#78857e; font-family:'DM Mono',monospace; font-size:7px; letter-spacing:.02em; white-space:nowrap; }
.main-nav { display:flex; flex-direction:column; gap:5px; }
.nav-item { display:flex; align-items:center; gap:13px; min-height:44px; padding:0 13px; color:#68766e; text-decoration:none; font-size:13px; border-radius:11px; transition:background .2s,color .2s; }
.nav-item:hover,.nav-item.active { color:var(--ink); background:#e1e9e1; }
.nav-item.active { font-weight:600; }
.nav-item em { margin-left:auto; display:grid; place-items:center; min-width:19px; height:19px; border-radius:20px; color:#718078; background:#dfe4dc; font-size:10px; font-style:normal; }
.sidebar-bottom { margin-top:auto; }
.help-card { position:relative; display:flex; align-items:center; gap:9px; margin:0 4px 22px; padding:13px 10px; border:1px solid #dedcd4; border-radius:13px; background:#f7f4ef; }
.help-card > svg { margin-left:auto; color:#95a098; }
.help-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:#b77450; background:#f3ddcf; font-family:Georgia,serif; font-size:17px; }
.help-card strong { display:block; font-size:11px; font-weight:700; }
.help-card p { margin:3px 0 0; color:#8b918b; font-size:10px; }
.profile { display:flex; align-items:center; gap:9px; padding:14px 10px 0; border-top:1px solid #dfddd6; }
.avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:50%; color:#f8f4ea; background:#d89a76; font-size:12px; font-weight:700; }
.profile strong,.profile small { display:block; }
.profile strong { font-size:11px; }
.profile small { margin-top:2px; color:#929991; font-size:10px; }
.profile-dot { width:7px; height:7px; margin-left:auto; border-radius:50%; background:#84b292; box-shadow:0 0 0 3px #dceddb; }
.login-sidebar { display:flex; align-items:center; gap:8px; width:100%; min-height:38px; padding:0 10px; color:#6e8677; background:#e5eee4; border:1px solid #d4e3d3; border-radius:9px; font-size:10px; font-weight:600; }
.login-sidebar:hover { color:var(--ink); background:#dceadc; }

.main-shell { min-height:100vh; margin-left:246px; overflow:hidden; }
.topbar { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 43px; border-bottom:1px solid #e5e2db; }
.breadcrumb { display:flex; align-items:center; gap:10px; color:#a0a59e; font-size:11px; }
.breadcrumb strong { color:#3f554b; font-weight:600; }
.topbar-actions { display:flex; align-items:center; gap:21px; }
.save-state { display:flex; align-items:center; gap:5px; color:#8a958d; font-size:10px; }
.save-state svg { color:#719d78; }
.share-button { display:flex; align-items:center; gap:10px; padding:9px 14px; color:#f5f0e8; background:var(--ink); border:0; border-radius:8px; font-size:11px; font-weight:600; }
.share-button svg { transition:transform .2s; }
.share-button:hover svg { transform:translateX(3px); }
.mobile-brand,.mobile-more { display:none; }
.page-intro { display:flex; align-items:flex-end; justify-content:space-between; padding:43px 43px 35px; }
.intro-meta,.eyebrow { color:#a08d7d; font-family:'DM Mono',monospace; font-size:9px; letter-spacing:.11em; text-transform:uppercase; }
.intro-meta { display:flex; align-items:center; gap:9px; color:#85928b; }
.live-dot { width:6px; height:6px; border-radius:50%; background:#76a17c; box-shadow:0 0 0 3px #e2eee1; }
.meta-separator { color:#c4bbb0; }
h1 { margin:12px 0 7px; font-family:'Space Grotesk','Noto Sans TC',sans-serif; font-size:38px; letter-spacing:-.055em; line-height:1.08; font-weight:700; }
h1 em { color:var(--accent); font-style:normal; }
.page-intro p { margin:0; color:#849089; font-size:12px; }
.intro-side { display:flex; align-items:center; gap:13px; }
.version-pill { padding:7px 10px; color:#8d948f; background:#eeece7; border-radius:20px; font-family:'DM Mono',monospace; font-size:9px; }
.more-button,.secondary-button,.icon-button { display:flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); background:transparent; border-radius:8px; color:#738079; font-size:10px; }
.more-button { padding:8px 11px; }
.more-button:hover,.secondary-button:hover,.icon-button:hover { border-color:#a6b6aa; color:var(--ink); background:#f9f7f2; }

.workspace { display:grid; grid-template-columns:258px minmax(360px,1fr) 274px; gap:18px; padding:0 43px 45px; }
.asset-panel,.canvas-panel,.inspector-panel,.quote-panel { background:var(--white); border:1px solid #e4e2db; border-radius:var(--radius); }
.asset-panel { min-width:0; padding:22px 16px 15px; }
.panel-heading,.canvas-toolbar,.inspector-heading,.quote-kicker,.setting-label,.breakdown-header { display:flex; align-items:flex-start; justify-content:space-between; }
.panel-heading h2,.canvas-toolbar h2,.inspector-heading h2 { margin:5px 0 0; font-family:'Space Grotesk','Noto Sans TC',sans-serif; font-size:17px; letter-spacing:-.03em; }
.count-pill { padding:4px 7px; color:#8c968e; background:#eff2ed; border-radius:6px; font-family:'DM Mono',monospace; font-size:9px; }
.search-box { display:flex; align-items:center; gap:9px; margin:20px 0 13px; padding:0 11px; height:35px; color:#9ba49e; background:#f7f6f2; border:1px solid #eceae4; border-radius:8px; }
.search-box input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:11px; }
.search-box input::placeholder { color:#adb4ae; }
.category-tabs { display:flex; gap:5px; overflow:auto; padding-bottom:13px; scrollbar-width:none; }
.category-tabs::-webkit-scrollbar { display:none; }
.category-tab { padding:5px 8px; white-space:nowrap; border:0; border-radius:6px; color:#9ba39c; background:transparent; font-size:10px; }
.category-tab:hover { color:var(--ink); }
.category-tab.active { color:var(--ink); background:#e2eee3; font-weight:600; }
.asset-list { display:flex; flex-direction:column; gap:9px; }
.asset-card { position:relative; display:grid; grid-template-columns:62px 1fr; gap:10px; min-height:77px; padding:7px; border:1px solid #eceae4; border-radius:11px; background:#fffefa; transition:border .2s,transform .2s,box-shadow .2s; }
.asset-card:hover,.asset-card.dragging { border-color:#adc4b2; box-shadow:0 5px 13px rgba(54,79,64,.08); transform:translateY(-1px); }
.asset-visual { position:relative; overflow:hidden; width:100%; height:100%; min-height:62px; border-radius:8px; background:#eef1e9; }
.asset-visual .visual-shadow { position:absolute; left:14%; right:14%; bottom:11%; height:10%; border-radius:50%; background:rgba(84,84,67,.14); filter:blur(3px); }
.asset-visual .visual-shape,.asset-visual .visual-line,.asset-visual .visual-dot { position:absolute; display:block; }
.asset-visual .shape-a,.asset-visual .shape-b,.asset-visual .shape-c { border-radius:50%; }
.asset-visual.arch { background:linear-gradient(140deg,#e3ecdf,#d1e0d1); }
.asset-visual.arch .shape-a { left:19%; top:14%; width:60%; height:68%; border:7px solid #8cae96; border-bottom-color:transparent; border-radius:55% 55% 0 0; }
.asset-visual.arch .shape-b { left:12%; top:19%; width:17%; height:17%; background:#efe0cf; box-shadow:26px 18px 0 #eabda9,43px -3px 0 #f0d5bc; }
.asset-visual.arch .shape-c { right:12%; top:20%; width:20%; height:22%; background:#b9d0ad; box-shadow:-21px 17px 0 #d5ad89; }
.asset-visual.arch .line-a { left:25%; bottom:9%; width:49%; height:17%; border-radius:50%; background:#a4bd9f; }
.asset-visual.arch .dot-a { left:25%; top:20%; width:7px; height:7px; background:#d58c76; }
.asset-visual.arch .dot-b { right:25%; top:25%; width:6px; height:6px; background:#f1d0b6; }
.asset-visual.bouquet { background:linear-gradient(130deg,#f8e8da,#f4d2c2); }
.asset-visual.bouquet .shape-a { left:26%; top:15%; width:21%; height:22%; background:#d99886; box-shadow:15px 3px 0 #ecc0ac,28px 21px 0 #d9a48d,4px 28px 0 #f0b9a2; }
.asset-visual.bouquet .shape-b { left:46%; top:25%; width:15%; height:27%; background:#9fb78e; transform:rotate(28deg); border-radius:50% 5px; }
.asset-visual.bouquet .shape-c { left:40%; bottom:15%; width:28%; height:29%; background:#c88765; border-radius:5px 5px 38% 38%; transform:rotate(8deg); }
.asset-visual.bouquet .line-a { left:47%; top:42%; width:2px; height:37%; background:#718d71; transform:rotate(-8deg); }
.asset-visual.bouquet .line-b { left:62%; top:46%; width:2px; height:33%; background:#718d71; transform:rotate(16deg); }
.asset-visual.plant { background:linear-gradient(130deg,#e2ebdf,#c9dccb); }
.asset-visual.plant .shape-a { left:31%; bottom:14%; width:38%; height:28%; background:#b48662; border-radius:5px 5px 17px 17px; }
.asset-visual.plant .shape-b { left:38%; top:20%; width:20%; height:46%; background:#6b936d; border-radius:80% 0 80% 0; transform:rotate(27deg); }
.asset-visual.plant .shape-c { left:52%; top:20%; width:20%; height:45%; background:#89a87c; border-radius:0 80% 0 80%; transform:rotate(-27deg); }
.asset-visual.table { background:linear-gradient(145deg,#f0e4d2,#e8d4b9); }
.asset-visual.table .shape-a { left:13%; bottom:26%; width:74%; height:25%; background:#b98259; border-radius:4px; box-shadow:0 5px 0 #916347; }
.asset-visual.table .shape-b { left:25%; bottom:10%; width:9%; height:32%; background:#9d6a4e; border-radius:0 0 3px 3px; }
.asset-visual.table .shape-c { right:25%; bottom:10%; width:9%; height:32%; background:#9d6a4e; border-radius:0 0 3px 3px; }
.asset-visual.table .dot-a { left:34%; top:27%; width:13px; height:13px; background:#8ca887; box-shadow:17px 7px 0 #d28d6d,27px -3px 0 #f0d2b8; }
.asset-visual.lamp { background:linear-gradient(145deg,#f5e2bd,#f2cca3); }
.asset-visual.lamp .shape-a { left:35%; top:14%; width:31%; height:35%; background:#dc9a59; border-radius:50% 50% 10% 10%; box-shadow:inset 0 -4px #c18149; }
.asset-visual.lamp .shape-b { left:48%; top:46%; width:5%; height:38%; background:#8c7658; }
.asset-visual.lamp .shape-c { left:30%; bottom:10%; width:40%; height:6%; background:#8c7658; border-radius:50%; }
.asset-visual.card { background:linear-gradient(145deg,#eee9dd,#e5dccb); }
.asset-visual.card .shape-a { left:27%; top:19%; width:47%; height:58%; background:#fffdf5; border:1px solid #cdbfa9; border-radius:2px; transform:rotate(-8deg); box-shadow:4px 3px 0 #d7c7b2; }
.asset-visual.card .line-a { left:37%; top:39%; width:26%; height:2px; background:#d18d72; transform:rotate(-8deg); }
.asset-visual.card .line-b { left:40%; top:50%; width:18%; height:2px; background:#b4a898; transform:rotate(-8deg); }
.asset-name-row { display:flex; align-items:center; gap:5px; min-width:0; }
.asset-copy { padding:2px 14px 0 0; min-width:0; }
.asset-copy h3 { overflow:hidden; margin:0; white-space:nowrap; text-overflow:ellipsis; font-size:11px; font-weight:600; }
.asset-copy p { overflow:hidden; margin:4px 0 5px; color:#9aa29c; white-space:nowrap; text-overflow:ellipsis; font-size:9px; }
.asset-copy strong { font-family:'Space Grotesk',sans-serif; font-size:12px; }
.asset-copy strong small { color:#a3aaa5; font-family:'Noto Sans TC',sans-serif; font-size:8px; font-weight:400; }
.asset-tag { padding:2px 4px; color:#b77a5b; background:#f7e5d9; border-radius:3px; font-size:7px; white-space:nowrap; }
.asset-add { position:absolute; right:6px; bottom:6px; display:grid; place-items:center; width:19px; height:19px; color:#78927e; background:#e6efe5; border:0; border-radius:5px; }
.asset-add:hover { color:#fff; background:var(--ink); }
.panel-tip { display:flex; align-items:center; gap:5px; margin:15px 2px 0; color:#a4aaa4; font-size:9px; }
.empty-state { padding:30px 10px; color:#9da49e; text-align:center; font-size:11px; line-height:2; }
.text-button { padding:0; color:var(--accent); border:0; background:none; font-size:10px; }

.canvas-panel { min-width:0; padding:22px 21px 15px; }
.canvas-toolbar { align-items:center; }
.canvas-actions { display:flex; align-items:center; gap:6px; }
.icon-button { width:30px; height:30px; padding:0; }
.icon-button:active { transform:scale(.96); }
.toolbar-divider { width:1px; height:19px; margin:0 3px; background:#e5e4dd; }
.secondary-button { height:30px; padding:0 9px; }
.canvas-stage-wrap { padding:19px 0 0; }
.canvas-stage { position:relative; isolation:isolate; overflow:hidden; min-height:505px; aspect-ratio:1 / 1.02; border:1px solid #e8e4da; border-radius:13px; background:#e8efe7; box-shadow:inset 0 0 0 8px rgba(255,255,255,.18); touch-action:none; }
.canvas-stage::before { position:absolute; z-index:-2; inset:0; content:''; background:radial-gradient(circle at 50% 37%, rgba(255,250,236,.83), rgba(220,234,220,.5) 43%, rgba(194,214,197,.55)); }
.canvas-stage::after { position:absolute; z-index:-1; inset:0; content:''; opacity:.35; background:linear-gradient(140deg,transparent 20%,rgba(255,255,255,.6) 20.2%,transparent 20.8%,transparent 58%,rgba(255,255,255,.34) 58.3%,transparent 58.8%); }
.stage-grid { position:absolute; inset:8%; border:1px dashed rgba(77,109,86,.2); border-radius:3px; background-image:linear-gradient(rgba(89,120,94,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(89,120,94,.07) 1px,transparent 1px); background-size:12.5% 12.5%; }
.stage-label { position:absolute; z-index:0; color:#76917c; font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.09em; text-transform:uppercase; }
.stage-top { left:10%; top:4%; }
.stage-bottom { right:10%; bottom:4%; }
.canvas-drop-hint { position:absolute; left:50%; top:54%; display:flex; align-items:center; gap:7px; color:#739079; opacity:.55; font-size:10px; transform:translate(-50%,-50%); transition:opacity .2s; pointer-events:none; }
.canvas-drop-hint.has-items { opacity:0; }
.canvas-stage.drag-over .canvas-drop-hint { opacity:1; }
.placed-item { position:absolute; z-index:2; width:108px; height:108px; transform:translate(-50%,-50%) scale(var(--item-scale)) rotate(var(--item-rotation)); cursor:grab; touch-action:none; user-select:none; transition:filter .2s; }
.placed-item.dragging { cursor:grabbing; filter:drop-shadow(0 10px 9px rgba(47,73,53,.18)); transition:none; }
.placed-item .asset-visual { min-height:108px; height:108px; box-shadow:0 9px 16px rgba(50,79,55,.12); }
.placed-item.arch { width:190px; height:190px; }
.placed-item.arch .asset-visual { min-height:190px; height:190px; }
.placed-item.table { width:148px; height:112px; }
.placed-item.table .asset-visual { min-height:112px; height:112px; }
.placed-item.bouquet { width:94px; height:114px; }
.placed-item.bouquet .asset-visual { min-height:114px; height:114px; }
.placed-item .asset-visual { border-radius:14px; }
.placed-item .selection-ring { position:absolute; z-index:-1; inset:-6px; border:1px solid transparent; border-radius:17px; }
.placed-item.selected { z-index:4; }
.placed-item.selected .selection-ring { border-color:#d77e59; box-shadow:0 0 0 4px rgba(215,126,89,.12); }
.placed-item.selected::after { position:absolute; top:-13px; right:-10px; width:8px; height:8px; content:''; background:var(--accent); border:2px solid var(--white); border-radius:50%; box-shadow:0 0 0 1px var(--accent); }
.drag-hint { position:absolute; left:50%; bottom:-22px; padding:3px 6px; color:#fff; background:var(--ink); border-radius:4px; font-size:8px; white-space:nowrap; transform:translateX(-50%); }
.canvas-footer { display:flex; align-items:center; gap:13px; padding:14px 2px 0; color:#a3aaa4; font-size:9px; }
.canvas-footer span { display:flex; align-items:center; gap:5px; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#8ab78b; }
.reset-button { margin-left:auto; padding:0; color:#9a8f83; border:0; background:none; font-size:9px; text-decoration:underline; text-underline-offset:3px; }

.right-rail { display:flex; flex-direction:column; gap:15px; min-width:0; }
.inspector-panel { padding:21px 17px 16px; }
.inspector-heading { align-items:center; }
.close-inspector { display:grid; place-items:center; width:27px; height:27px; color:#99a19c; background:#f2f1ec; border:0; border-radius:7px; }
.close-inspector:hover { color:var(--ink); background:#e8eee8; }
.selected-preview { display:flex; align-items:center; gap:10px; margin:20px 0 21px; padding:8px; border-radius:10px; background:#f3f3ed; }
.selected-preview .asset-visual { width:54px; min-height:54px; height:54px; }
.selected-preview h3 { margin:3px 0 1px; font-size:12px; }
.selected-preview p,.selected-category { margin:0; color:#9aa49d; font-size:9px; }
.selected-category { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:.05em; }
.setting-group { padding:13px 0; border-top:1px solid #eeeae3; }
.setting-label { align-items:center; margin-bottom:10px; font-size:10px; font-weight:600; }
.setting-label .muted { color:#a6ada7; font-size:9px; font-weight:400; }
.segmented-control { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:4px; background:#f2f2ec; border-radius:8px; }
.segment { display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 4px; border:0; border-radius:5px; color:#919b94; background:transparent; font-size:10px; }
.segment small { color:#b8bdb7; font-size:7px; }
.segment.active { color:var(--ink); background:#fffdf9; box-shadow:0 2px 5px rgba(32,52,40,.08); font-weight:600; }
.quantity-control { display:flex; align-items:center; justify-content:space-between; width:100%; height:37px; padding:4px; border:1px solid #e6e4dc; border-radius:8px; }
.quantity-control button { display:grid; place-items:center; width:28px; height:27px; color:#79867d; background:#f3f3ed; border:0; border-radius:5px; }
.quantity-control button:hover { color:var(--ink); background:#e3eee3; }
.quantity-control strong { font-family:'Space Grotesk',sans-serif; font-size:13px; }
.range-input { width:100%; height:3px; accent-color:var(--accent); }
.inspector-price { display:flex; align-items:center; justify-content:space-between; padding:13px 0 15px; border-top:1px solid #eeeae3; color:#8b958e; font-size:10px; }
.inspector-price strong { color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:18px; }
.remove-button { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; height:31px; color:#b17660; background:#fff7f2; border:1px solid #f2dfd4; border-radius:7px; font-size:10px; }
.remove-button:hover { background:#fbe9df; }
.empty-inspector { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:233px; text-align:center; }
.empty-inspector-icon { display:grid; place-items:center; width:42px; height:42px; color:#a2b0a5; background:#eaf1e9; border-radius:13px; }
.empty-inspector h3 { margin:12px 0 3px; font-size:12px; }
.empty-inspector p { margin:0; color:#9ca59e; font-size:9px; }
.quote-panel { padding:20px 18px 17px; color:#f8f4eb; background:var(--ink); border-color:var(--ink); box-shadow:0 13px 25px rgba(24,53,46,.13); }
.quote-kicker { align-items:center; }
.quote-panel .eyebrow { color:#a2b9aa; }
.estimate-badge { padding:4px 7px; color:#b6cdb9; background:#2d4d41; border-radius:5px; font-size:8px; }
.quote-total-label { margin-top:23px; color:#9fb2a4; font-size:10px; }
.quote-total { margin-top:4px; font-family:'Space Grotesk',sans-serif; font-size:36px; font-weight:700; letter-spacing:-.06em; }
.quote-note { margin:7px 0 20px; color:#8fa69a; font-size:9px; line-height:1.6; }
.quote-breakdown { padding-top:15px; border-top:1px solid #385348; }
.breakdown-header { align-items:center; margin-bottom:10px; }
.breakdown-header h3 { margin:0; font-size:11px; font-weight:600; }
.breakdown-header span { color:#86a091; font-size:9px; }
.quote-line { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:37px; padding:5px 0; border-bottom:1px solid #2c4a3e; font-size:10px; }
.quote-line > div { min-width:0; }
.quote-line strong,.quote-line span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.quote-line strong { color:#edf0e8; font-weight:500; }
.quote-line span { margin-top:2px; color:#88a195; font-size:8px; }
.quote-line b { flex:none; font-family:'Space Grotesk',sans-serif; font-size:11px; font-weight:500; }
.muted-line { border-bottom:0; color:#95a99d; }
.muted-line b { color:#a2b5a8; }
.quote-empty { padding:12px 0; color:#8da398; font-size:9px; }
.primary-button { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:39px; border:0; border-radius:8px; color:var(--ink); background:#d5e6d3; font-size:10px; font-weight:700; transition:background .2s,transform .2s; }
.primary-button:hover { background:#e0f0de; }
.primary-button:active { transform:scale(.98); }
.quote-footnote { display:flex; align-items:center; justify-content:center; gap:4px; margin-top:13px; color:#789384; font-size:8px; }
.quote-footnote svg { color:#9bbb9c; }
.mobile-nav { display:none; }
.toast { position:fixed; z-index:10; left:50%; bottom:27px; display:flex; align-items:center; gap:8px; max-width:calc(100% - 38px); padding:10px 14px; color:#f3f2e9; background:rgba(24,53,46,.94); border-radius:9px; box-shadow:0 10px 28px rgba(22,45,35,.18); font-size:10px; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .25s,transform .25s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast svg { color:#acd1ab; }

@media (max-width:1200px) { .workspace { grid-template-columns:230px minmax(320px,1fr) 245px; gap:12px; padding-left:25px; padding-right:25px; } .page-intro { padding-left:25px; padding-right:25px; } .topbar { padding-left:25px; padding-right:25px; } .sidebar { width:215px; } .main-shell { margin-left:215px; } }
@media (max-width:980px) { .sidebar { width:72px; padding:26px 10px 17px; } .brand-mark { justify-content:center; padding:0 0 31px; } .brand-mark > div,.nav-item span,.nav-item em,.help-card,.profile > div:not(.avatar),.profile-dot { display:none; } .nav-item { justify-content:center; padding:0; } .profile { justify-content:center; padding:15px 0 0; } .main-shell { margin-left:72px; } .workspace { grid-template-columns:215px minmax(300px,1fr); } .right-rail { grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; } }
@media (max-width:720px) {
  body { background:#f4f1eb; }
  .sidebar { display:none; }
  .main-shell { margin-left:0; padding-bottom:72px; }
  .topbar { height:60px; padding:0 18px; background:#f7f4ef; }
  .breadcrumb,.save-state,.share-button { display:none; }
  .mobile-brand { display:flex; align-items:center; gap:7px; padding:0; border:0; background:none; font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:700; letter-spacing:-.05em; }
  .mobile-brand > span { width:25px; height:25px; font-size:18px; border-radius:7px; }
  .mobile-more { display:block; padding:5px 0 5px 12px; color:#849089; border:0; background:none; letter-spacing:2px; }
  .page-intro { display:block; padding:25px 18px 23px; }
  .page-intro h1 { font-size:32px; margin-top:11px; }
  .page-intro p { font-size:11px; }
  .intro-side { margin-top:17px; }
  .more-button { display:none; }
  .workspace { display:block; padding:0 13px; }
  .asset-panel,.right-rail { display:none; }
  .canvas-panel { display:block; padding:17px 13px 14px; border-radius:16px; }
  .canvas-toolbar { align-items:center; }
  .canvas-toolbar h2 { font-size:16px; }
  .canvas-toolbar .eyebrow { font-size:8px; }
  .canvas-actions { gap:5px; }
  .canvas-actions .secondary-button { font-size:0; width:30px; padding:0; }
  .canvas-actions .secondary-button svg { margin:0; }
  .canvas-stage-wrap { padding-top:14px; }
  .canvas-stage { min-height:0; aspect-ratio:1 / 1.08; }
  .canvas-footer { padding-top:12px; font-size:8px; }
  .canvas-footer span:last-of-type { display:none; }
  .right-rail { grid-template-columns:1fr; }
  .mobile-nav { position:fixed; z-index:8; inset:auto 0 0; display:flex; justify-content:space-around; height:68px; padding:8px 24px max(8px, env(safe-area-inset-bottom)); background:rgba(255,253,249,.96); border-top:1px solid #e2e0d9; backdrop-filter:blur(12px); }
  .mobile-nav-item { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:65px; padding:0; color:#9ca49e; border:0; background:none; font-size:9px; }
  .mobile-nav-item.active { color:var(--ink); font-weight:700; }
  .mobile-nav-item.active svg { stroke-width:2.2; }
  .mobile-nav-item i { position:absolute; top:1px; right:7px; display:grid; place-items:center; width:15px; height:15px; color:#fff; background:var(--accent); border:2px solid #fffdf9; border-radius:50%; font-size:7px; font-style:normal; }
  .toast { bottom:79px; }
  .workspace.mobile-show-assets .asset-panel { display:block; padding:17px 13px; }
  .workspace.mobile-show-assets .canvas-panel { display:none; }
  .workspace.mobile-show-assets .asset-list { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .workspace.mobile-show-assets .asset-card { grid-template-columns:1fr; gap:6px; min-height:165px; padding:7px; }
  .workspace.mobile-show-assets .asset-visual { min-height:93px; }
  .workspace.mobile-show-assets .asset-copy { padding:0 2px 15px; }
  .workspace.mobile-show-assets .asset-copy p { margin-bottom:4px; }
  .workspace.mobile-show-assets .panel-tip { margin-bottom:1px; }
  .workspace.mobile-show-quote .canvas-panel { display:none; }
  .workspace.mobile-show-quote .right-rail { display:flex; }
  .workspace.mobile-show-quote .inspector-panel { display:block; order:2; }
  .workspace.mobile-show-quote .quote-panel { display:block; order:1; border-radius:16px; }
}
@media (max-width:370px) { .page-intro h1 { font-size:29px; } .workspace { padding:0 9px; } .canvas-panel { padding-left:10px; padding-right:10px; } }


/* Staff asset console */
.admin-page { max-width:1260px; margin:0 auto; padding:43px 43px 48px; }
.admin-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:28px; }
.admin-page-head h1 { margin-bottom:8px; }
.admin-page-head p { margin:0; color:#849089; font-size:12px; }
.admin-back-button { display:flex; align-items:center; gap:8px; flex:none; height:36px; padding:0 13px; color:#f8f4eb; background:var(--ink); border:0; border-radius:8px; font-size:10px; font-weight:600; }
.admin-back-button svg { transform:rotate(180deg); }
.admin-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:30px 0 17px; }
.admin-stat { padding:18px 19px 16px; background:var(--white); border:1px solid #e4e2db; border-radius:14px; }
.admin-stat span,.admin-stat small { display:block; color:#9aa39c; font-size:10px; }
.admin-stat strong { display:block; margin:4px 0 2px; color:var(--ink); font-family:'Space Grotesk',sans-serif; font-size:28px; letter-spacing:-.05em; }
.admin-stat small { color:#b1aaa0; font-size:9px; }
.admin-layout { display:grid; grid-template-columns:340px minmax(0, 1fr); gap:17px; align-items:start; }
.admin-form-card,.admin-inventory-card { min-width:0; padding:21px 20px 19px; background:var(--white); border:1px solid #e4e2db; border-radius:18px; }
.admin-card-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding-bottom:16px; border-bottom:1px solid #eeeae3; }
.admin-card-heading h2 { margin:5px 0 0; font-family:'Space Grotesk','Noto Sans TC',sans-serif; font-size:17px; letter-spacing:-.03em; }
.admin-card-heading .text-button { margin-top:8px; }
.form-status { padding:4px 7px; color:#8e9b91; background:#eff2ed; border-radius:6px; font-family:'DM Mono',monospace; font-size:8px; }
.admin-preview-row { display:flex; align-items:center; gap:11px; margin:18px 0 17px; padding:9px; background:#f4f3ed; border-radius:10px; }
.admin-preview { flex:none; width:57px; height:57px; }
.admin-preview .asset-visual { min-height:57px; height:57px; }
.admin-preview-row strong { display:block; font-size:10px; }
.admin-preview-row p { margin:3px 0 0; color:#9aa39c; font-size:8px; line-height:1.5; }
.admin-field { display:block; margin-top:13px; }
.admin-field > span { display:flex; align-items:center; gap:5px; margin-bottom:6px; color:#68776e; font-size:10px; font-weight:600; }
.admin-field > span small { color:#a4aca5; font-size:8px; font-weight:400; }
.admin-field input,.admin-field select,.admin-list-tools select { width:100%; height:35px; padding:0 10px; color:var(--ink); background:#fbfaf6; border:1px solid #e6e4dc; border-radius:7px; outline:0; font-size:10px; }
.admin-field input:focus,.admin-field select:focus,.admin-list-tools select:focus { border-color:#9bb6a2; box-shadow:0 0 0 3px #e9f1e8; }
.admin-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.admin-switch { display:flex; align-items:center; gap:9px; margin-top:17px; cursor:pointer; }
.admin-switch input { position:absolute; opacity:0; pointer-events:none; }
.switch-track { position:relative; flex:none; width:29px; height:17px; border-radius:20px; background:#d9ddd7; transition:background .2s; }
.switch-track::after { position:absolute; top:3px; left:3px; width:11px; height:11px; content:''; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(24,53,46,.16); transition:transform .2s; }
.admin-switch input:checked + .switch-track { background:#8caf92; }
.admin-switch input:checked + .switch-track::after { transform:translateX(12px); }
.admin-switch strong,.admin-switch small { display:block; }
.admin-switch strong { font-size:10px; }
.admin-switch small { margin-top:2px; color:#a0aaa2; font-size:8px; }
.admin-form-actions { display:flex; gap:7px; margin-top:20px; }
.admin-form-actions .secondary-button { flex:0 0 70px; }
.admin-form-actions .primary-button { height:35px; flex:1; font-size:10px; }
.admin-list-tools { display:grid; grid-template-columns:minmax(0, 1fr) 94px; gap:7px; margin:17px 0 12px; }
.admin-list-tools .search-box { margin:0; height:35px; }
.admin-list-tools select { height:35px; padding:0 7px; color:#78867d; font-size:9px; }
.admin-inventory-list { display:flex; flex-direction:column; gap:7px; }
.admin-asset-row { display:grid; grid-template-columns:58px minmax(0, 1fr) auto; gap:11px; align-items:center; min-height:75px; padding:7px; border:1px solid #ebe9e2; border-radius:11px; background:#fffefa; transition:border .2s,box-shadow .2s; }
.admin-asset-row:hover { border-color:#adc4b2; box-shadow:0 5px 13px rgba(54,79,64,.06); }
.admin-asset-row.is-inactive { background:#f8f7f3; opacity:.76; }
.admin-asset-thumb,.admin-asset-thumb .asset-visual { width:58px; height:58px; min-height:58px; }
.admin-asset-info { min-width:0; }
.admin-asset-title { display:flex; align-items:center; gap:6px; min-width:0; }
.admin-asset-title strong { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:11px; }
.admin-asset-info p { overflow:hidden; margin:4px 0 5px; color:#9aa39c; white-space:nowrap; text-overflow:ellipsis; font-size:9px; }
.admin-asset-info b { font-family:'Space Grotesk',sans-serif; font-size:12px; }
.admin-asset-info b small { color:#9aa39c; font-family:'Noto Sans TC',sans-serif; font-size:8px; font-weight:400; }
.admin-status { padding:2px 5px; color:#6d9976; background:#e5f0e5; border-radius:4px; font-size:7px; white-space:nowrap; }
.admin-status.inactive { color:#9d8d7e; background:#eeeae3; }
.admin-row-actions { display:flex; gap:4px; }
.admin-row-actions .icon-button { width:27px; height:27px; }
.admin-row-actions .danger-icon { color:#b77762; }
.admin-row-actions .danger-icon:hover { border-color:#e6b8a8; color:#a64e37; background:#fff5ef; }
.admin-empty { padding:40px 12px; color:#9ca59e; text-align:center; font-size:10px; }
.admin-footnote { display:flex; align-items:center; gap:5px; margin-top:15px; color:#9da79f; font-size:9px; }
.admin-footnote svg { color:#78a27e; }

@media (max-width:720px) {
  .admin-page { padding:25px 13px 35px; }
  .admin-page-head { display:block; }
  .admin-page-head h1 { margin-top:11px; font-size:29px; }
  .admin-page-head p { font-size:11px; line-height:1.6; }
  .admin-back-button { display:none; }
  .admin-stats { gap:7px; margin:21px 0 12px; }
  .admin-stat { padding:12px 10px; border-radius:11px; }
  .admin-stat span,.admin-stat small { font-size:8px; }
  .admin-stat strong { font-size:22px; }
  .admin-layout { display:flex; flex-direction:column; gap:12px; }
  .admin-form-card,.admin-inventory-card { width:100%; padding:17px 14px 15px; border-radius:15px; }
  .admin-card-heading h2 { font-size:16px; }
  .admin-preview-row { margin-top:14px; }
  .admin-form-grid { gap:7px; }
  .admin-asset-row { grid-template-columns:48px minmax(0, 1fr); gap:9px; }
  .admin-asset-thumb,.admin-asset-thumb .asset-visual { width:48px; height:48px; min-height:48px; }
  .admin-row-actions { grid-column:2; justify-content:flex-end; margin-top:-3px; }
  .admin-row-actions .icon-button { width:29px; height:29px; }
  .admin-footnote { line-height:1.5; }
}