:root{color:#1f262d;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary:#59c6ef;--primary-dark:#2a88aa;--accent:#55606a;--surface:#f8fafbe0;--surface-soft:#59c6ef1a;--surface-muted:#55606a0f;--border:#606c7629;--text:#1f262d;--text-muted:#66727c;--success:#5da9b4;--danger:#b86d63;--warning:#a88b67;--glow:0 0 0 1px #59c6ef24, 0 18px 36px #59c6ef1a;--shadow:0 22px 54px #252e381a;--app-header-height:0px;background:#eef1f2;font-family:Inter,Noto Sans TC,PingFang TC,Microsoft JhengHei,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body,#app{min-width:320px;min-height:100vh;margin:0}body{color:var(--text);background:radial-gradient(circle at top,#59c6ef1f,#0000 22%),linear-gradient(#f4f7f8 0%,#edf1f3 35%,#e7ecef 100%)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-main{padding-top:var(--app-header-height);flex:1}.topbar{z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(#242c34f5,#343d46eb),#242c34f0;border-bottom:1px solid #59c6ef2e;position:fixed;top:0;left:0;right:0;box-shadow:0 14px 34px #181f2638}.topbar-inner,.page,.footer-inner{width:min(1180px,100% - 32px);margin:0 auto}.topbar-inner{justify-content:space-between;align-items:center;gap:18px;padding:10px 0;display:flex}.topbar-primary{justify-content:space-between;align-items:center;gap:16px;display:flex}.brand{align-items:center;gap:4px;max-width:min(100%,520px);display:inline-flex}.brand-icon{object-fit:contain;flex-shrink:0;align-self:stretch;width:auto;max-width:80px;height:auto;display:block}.brand-text{flex-direction:column;min-width:0;display:flex}.brand-title{color:var(--primary);letter-spacing:.12em;text-transform:uppercase;font-family:Nunito,Varela Round,Trebuchet MS,Arial,sans-serif;font-size:1.75rem;font-weight:900;line-height:.94}.brand-copy{color:#c7d0d8cc;letter-spacing:.28em;text-transform:uppercase;margin-top:4px;font-family:Nunito,Varela Round,Trebuchet MS,Arial,sans-serif;font-size:.8rem;font-weight:700}.topbar-quick,.topbar-panel{align-items:center;gap:12px;display:flex}.topbar-quick{flex-shrink:0}.topbar-panel{flex:1;justify-content:space-between}.topbar-nav{flex-wrap:wrap;flex:1;align-items:center;gap:12px;display:flex}.nav-group,.actions-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.nav-link{color:#dee6ecb8;border-radius:999px;align-items:center;padding:10px 12px;transition:all .2s;display:inline-flex}.nav-link:hover,.nav-link.router-link-active{color:var(--primary);background:#59c6ef1f;box-shadow:inset 0 0 0 1px #59c6ef1f}.topbar-meta{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;display:flex}.meta-summary{flex-wrap:wrap;align-items:center;gap:10px;display:inline-flex}.menu-toggle{color:#eef7fb;background:#59c6ef1a;border:1px solid #59c6ef2e;border-radius:999px;align-items:center;gap:10px;min-height:44px;padding:10px 14px;font-weight:700;display:none;box-shadow:inset 0 0 0 1px #59c6ef14}.menu-toggle-icon{gap:4px;display:inline-grid}.menu-toggle-icon span{background:currentColor;border-radius:999px;width:16px;height:2px;display:block}.cart-link{width:44px;height:44px;color:var(--primary);background:#59c6ef1f;border-radius:999px;justify-content:center;align-items:center;transition:all .2s;display:inline-flex;position:relative;box-shadow:inset 0 0 0 1px #59c6ef24}.cart-link:hover,.cart-link.router-link-active{color:#eef7fb;background:#59c6ef33;box-shadow:inset 0 0 0 1px #59c6ef33,0 10px 20px #17222a29}.cart-link-icon{width:22px;height:22px;display:inline-flex}.cart-link-icon svg{width:100%;height:100%}.cart-count{color:#0f1c23;background:#eef7fb;border-radius:999px;justify-content:center;align-items:center;min-width:20px;height:20px;padding:0 5px;font-size:.72rem;font-weight:800;line-height:1;display:inline-flex;position:absolute;top:-3px;right:-3px;box-shadow:0 8px 16px #17222a2e}.pill,.badge{border-radius:999px;align-items:center;gap:6px;padding:6px 10px;font-size:.86rem;font-weight:600;display:inline-flex}.pill{color:var(--primary);background:#59c6ef1f;box-shadow:inset 0 0 0 1px #59c6ef24}.badge{color:var(--primary-dark);background:#59c6ef1f}.badge.warning{color:var(--warning);background:#af815624}.badge.danger{color:var(--danger);background:#c55e5224}.page{padding:32px 0 56px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;display:flex}.page-title{margin:0;font-size:clamp(1.8rem,3vw,2.7rem);line-height:1.08}.page-subtitle{max-width:760px;color:var(--text-muted);margin:10px 0 0;font-size:1rem}.hero-banner{border-radius:16px;margin-bottom:28px;line-height:0;overflow:hidden}.hero-banner a{display:block}.hero-banner-img{object-fit:cover;width:100%;height:auto;display:block}.hero{grid-template-columns:1.2fr .8fr;gap:24px;margin-bottom:28px;display:grid}.card,.hero-panel,.metric-card,.summary-card,.table-card,.auth-card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:24px}.hero-panel,.card,.metric-card,.summary-card,.table-card,.auth-card{padding:24px}.hero-panel{flex-direction:column;gap:16px;display:flex}.hero-panel:first-child{background:linear-gradient(145deg, #232b33fa, #363f49f0), var(--surface);box-shadow:var(--shadow), var(--glow);border-color:#59c6ef2e}.hero-panel:first-child .hero-title,.hero-panel:first-child .hero-copy,.hero-panel:first-child .hero-points li{color:#f1f7fb}.hero-panel:first-child .hero-copy{color:#e2eaf0c2}.hero-panel:first-child .hero-points li{border-bottom-color:#59c6ef1f}.hero-kicker,.section-kicker{color:var(--primary);letter-spacing:.08em;text-transform:uppercase;font-size:.88rem;font-weight:700}.hero-title,.section-title,.card-title{color:#1b1d21;margin:0;font-size:clamp(1.4rem,3vw,2.5rem);line-height:1.15}.section-title,.card-title{font-size:1.35rem}.hero-copy,.section-copy,.muted{color:var(--text-muted);margin:0}.button-row,.inline-actions,.filter-row,.form-grid,.stat-grid,.product-grid,.dashboard-grid,.summary-grid,.checkout-grid,.detail-grid{gap:16px;display:grid}.button-row{grid-template-columns:repeat(auto-fit,minmax(160px,max-content))}.button,.button-secondary,.button-ghost,.button-danger{border:0;border-radius:14px;padding:12px 18px;font-weight:700;transition:transform .18s,box-shadow .18s,background .18s}.button{color:#08131a;background:linear-gradient(135deg,#63d2f5 0%,#3ca8cb 100%);box-shadow:0 14px 28px #3ca8cb3d}.button:hover,.button-secondary:hover,.button-ghost:hover,.button-danger:hover{transform:translateY(-1px)}.button:disabled{opacity:.6;cursor:not-allowed;transform:none}.button-secondary{color:#eef5fa;background:linear-gradient(135deg,#323b44 0%,#495560 100%);box-shadow:inset 0 0 0 1px #59c6ef14}.button-ghost{color:var(--text);border:1px solid var(--border);background:#fffcf88f}.button-danger{color:var(--danger);background:#c55e521f}.hero-points,.list-reset{margin:0;padding:0;list-style:none}.hero-points li,.list-reset li{border-bottom:1px solid var(--border);padding:12px 0}.hero-points li:last-child,.list-reset li:last-child{border-bottom:0}.stat-grid,.dashboard-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.metric-card h3,.summary-card h3,.card h3{margin:0;font-size:1.05rem}.metric-value{margin-top:10px;font-size:2rem;font-weight:800}.metric-hint{color:var(--text-muted);margin-top:6px;font-size:.92rem}.section{margin-top:28px}.section-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:18px;display:flex}.product-grid{grid-template-columns:repeat(4,1fr);gap:16px}.product-grid--compact{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.product-card{cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:16px;flex-direction:column;transition:transform .15s,box-shadow .15s;display:flex;position:relative;overflow:hidden}.product-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000002e}.product-card--compact{border-radius:10px}.product-image{aspect-ratio:1;background:radial-gradient(circle at 50% 35%,#59c6ef42,#0000 30%),linear-gradient(145deg,#2f3a44 0%,#64707a 100%);width:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #59c6ef24}.view-toggle{gap:4px;display:flex}.view-toggle-btn{width:36px;height:36px;color:var(--text-muted);cursor:pointer;background:0 0;border:1px solid #59c6ef33;border-radius:8px;justify-content:center;align-items:center;transition:background .15s,color .15s,border-color .15s;display:flex}.view-toggle-btn:hover{color:var(--primary);background:#59c6ef14}.view-toggle-btn.active{color:var(--primary);background:#59c6ef26;border-color:#59c6ef66}.product-image{aspect-ratio:4/3;color:var(--primary);background:radial-gradient(circle at 50% 35%,#59c6ef42,#0000 30%),linear-gradient(145deg,#2f3a44 0%,#64707a 100%);border-radius:18px;place-items:center;font-size:2rem;font-weight:800;display:grid;overflow:hidden;box-shadow:inset 0 0 0 1px #59c6ef24}.product-photo{object-fit:cover;width:100%;height:100%;display:block}.product-info{flex-direction:column;gap:6px;padding:10px 12px;display:flex}.product-info-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:600;overflow:hidden}.product-info-bottom{justify-content:space-between;align-items:center;gap:8px;display:flex}.product-card--compact .product-info{gap:4px;padding:6px 8px}.product-card--compact .product-info-name{font-size:.76rem}.product-overlay-price{color:var(--primary);font-size:1rem;font-weight:800}.product-add-btn{background:var(--primary);color:#fff;cursor:pointer;border:0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s,transform .15s;display:flex}.product-add-btn:hover:not(:disabled){background:var(--primary-dark);transform:scale(1.1)}.product-add-btn:disabled{opacity:.4;cursor:not-allowed}.product-card--compact .product-overlay{opacity:1;padding:8px}.product-card--compact .product-overlay-name{-webkit-line-clamp:1;font-size:.75rem}.product-card--compact .product-overlay-price{font-size:.82rem}.product-card--compact .product-add-btn{width:26px;height:26px}.price-row,.summary-row,.line-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.price{font-size:1.4rem;font-weight:800}.small-copy,.meta-copy{color:var(--text-muted);font-size:.92rem}.filter-row,.form-grid,.checkout-grid,.detail-grid,.summary-grid{grid-template-columns:repeat(12,1fr)}.field,.field-span-6,.field-span-4,.field-span-8,.field-span-12{flex-direction:column;gap:8px;display:flex}.field-span-4{grid-column:span 4}.field-span-6{grid-column:span 6}.field-span-8{grid-column:span 8}.field-span-12{grid-column:span 12}.input,.select,.textarea{border:1px solid var(--border);width:100%;color:var(--text);background:#fffbf5d1;border-radius:14px;padding:12px 14px}.upload-panel{grid-template-columns:minmax(280px,1fr) 220px;align-items:start;gap:16px;display:grid}.upload-actions,.upload-preview{gap:12px;display:grid}.empty-image-state,.table-product-image{background:#f8fafbb8;border:1px dashed #59c6ef47;border-radius:18px}.empty-image-state{min-height:165px;color:var(--text-muted);text-align:center;place-items:center;padding:18px;display:grid}.table-product-image{width:72px;height:72px;overflow:hidden}.textarea{resize:vertical;min-height:120px}.inline-actions{grid-auto-flow:column;justify-content:start;align-items:center}.quantity-control{border:1px solid var(--border);background:#fffaf5b8;border-radius:999px;align-items:center;gap:10px;padding:6px;display:inline-flex}.quantity-control button{color:#eaf6fb;background:linear-gradient(135deg,#33404a 0%,#4c5863 100%);border:0;border-radius:50%;width:32px;height:32px}.summary-card.sticky{position:sticky;top:96px}.checkout-grid,.detail-grid{align-items:start}.checkout-main{grid-column:span 7}.checkout-side{grid-column:span 5}.detail-main{grid-column:span 7}.detail-side{grid-column:span 5}.info-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;display:grid}.info-chip{background:linear-gradient(135deg, #2b353efa, #434e58eb), var(--surface-soft);color:#eef7fb;border-radius:18px;padding:14px;box-shadow:inset 0 0 0 1px #59c6ef1a}.table-card{overflow:hidden}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--border);text-align:left;vertical-align:middle;padding:14px 12px}th{color:#6cd6fceb;text-transform:uppercase;letter-spacing:.04em;background:#2f3943eb;font-size:.88rem}tr:last-child td{border-bottom:0}.is-editing-row td{background:#6cd6fc14}.notice,.empty-state{border:1px solid var(--border);background:#fffaf5bd;border-radius:18px;padding:18px 20px}.notice.warning{background:#af81561f;border-color:#af81563d}.notice.success{background:#59c6ef1a;border-color:#59c6ef2e}.auth-grid{grid-template-columns:1.05fr .95fr;gap:24px;display:grid}.footer{border-top:1px solid var(--border);background:linear-gradient(#273039f5,#37404aeb),#273039f0}.footer-inner{color:#dbe4ebb8;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;padding:20px 0 28px;display:flex}@media (width<=960px){.hero,.auth-grid,.upload-panel{grid-template-columns:1fr}.checkout-main,.checkout-side,.detail-main,.detail-side,.field-span-4,.field-span-6,.field-span-8{grid-column:span 12}.summary-card.sticky{position:static}}@media (width<=720px){.topbar-inner,.page,.footer-inner{width:min(100% - 24px,1180px)}.topbar-inner{flex-direction:column;align-items:stretch;gap:10px;padding:8px 0}.topbar-primary{gap:12px;width:100%}.brand{gap:10px;min-width:0;max-width:min(100%,360px)}.brand-icon{max-width:80px}.brand-title{font-size:1.2rem}.brand-copy{letter-spacing:.14em;font-size:.68rem}.topbar-quick{gap:10px;margin-left:auto}.cart-link{width:42px;height:42px}.menu-toggle{display:inline-flex}.topbar-panel{flex-direction:column;align-items:stretch;gap:14px;width:100%;padding-top:4px;display:none}.topbar-panel.open{display:flex}.topbar-nav,.nav-group,.topbar-meta,.actions-group{flex-direction:column;align-items:stretch;width:100%}.nav-group{gap:10px}.nav-link{background:#ffffff0a;border-radius:16px;width:100%;min-height:44px;padding:12px 14px}.topbar-meta{gap:10px}.meta-summary{justify-content:flex-start;width:100%}.badge{align-self:flex-start}.actions-group>*{text-align:center;justify-content:center;width:100%;display:inline-flex}.page{padding-top:24px}.product-grid{grid-template-columns:repeat(2,1fr)}.hero-panel,.card,.metric-card,.summary-card,.table-card,.auth-card{padding:20px}}
