:root { --forest:#123c2c; --deep:#09271c; --leaf:#29734d; --lime:#b8d45a; --orange:#ef6a3a; --cream:#f7f3e8; --paper:#fffdf7; --ink:#17251f; --muted:#65736c; --line:rgba(23,37,31,.14); font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; color:var(--ink); }
* { box-sizing:border-box; }
small { font-size: 1rem; }
body { margin:0; min-height:100vh; background:#eef1ec; font-size:16px; line-height:1.6; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
[hidden] { display:none!important; }
h1,h2,p { margin:0; }
.eyebrow { color:var(--leaf); font-size:1rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }

.login-card { width:min(460px,calc(100% - 32px)); margin:8vh auto; padding:38px; border-radius:22px; background:var(--paper); box-shadow:0 26px 80px rgba(9,39,28,.15); text-align:center; }
.login-card .brand { display:flex; align-items:center; gap:12px; text-align:left; }
.login-card .brand img { width:48px; height:48px; border-radius:12px; object-fit:contain; background:#78be20; }
.login-card .brand strong,.login-card .brand span { display:block; }
.login-card .brand span { color:var(--muted); font-size:1rem; }
.login-card > p { margin:26px 0; color:var(--muted); text-align:left; }
.login-card form { text-align:left; }
.password-card h1 { margin:28px 0 0; font-size:1.7rem; text-align:left; }
.password-card form small { display:block; margin:7px 0 17px; color:var(--muted); }
.login-card label { display:block; color:var(--forest); font-weight:800; }
.login-card label + label { margin-top:17px; }
.login-card input { width:100%; margin-top:7px; border:1px solid #ccd3ce; border-radius:10px; background:#fff; padding:12px 13px; color:var(--ink); outline:none; }
.login-card input:focus { border-color:var(--leaf); box-shadow:0 0 0 4px rgba(41,115,77,.1); }
.login-card button { border:0; border-radius:10px; background:var(--forest); color:#fff; padding:12px 18px; font-weight:850; width:100%; margin-top:10px; }
.status { min-height:22px; color:#a9362c; font-size:1rem; }
.button-primary { display:inline-block; border-radius:10px; background:var(--forest); color:#fff; padding:12px 20px; text-decoration:none; font-weight:850; margin-top:12px; }

.portal-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:20px; padding:14px clamp(16px,4vw,48px); background:var(--deep); color:#fff; }
.portal-header .brand { display:flex; align-items:center; gap:10px; }
.portal-header .brand img { width:38px; height:38px; border-radius:10px; object-fit:contain; background:#78be20; }
.portal-header .brand strong { display:block; }
.portal-header .brand span { display:block; color:rgba(255,255,255,.6); font-size:1rem; }
[data-portal-nav] { display:flex; gap:6px; margin-left:auto; }
[data-portal-nav] button { background:transparent; border:0; color:rgba(255,255,255,.7); padding:9px 14px; border-radius:99px; font-weight:800; }
[data-portal-nav] button.is-active,[data-portal-nav] button:hover { background:rgba(255,255,255,.14); color:#fff; }
.cart-chip { background:var(--orange); color:#fff; border:0; border-radius:99px; padding:9px 16px; font-weight:850; }

.announcement-banner { display:flex; align-items:flex-start; gap:16px; padding:12px clamp(16px,4vw,48px); background:#fff4e6; border-bottom:1px solid #f1d9b8; }
.announcement-banner strong { display:block; color:#8a4a1c; }
.announcement-banner p { margin-top:2px; color:#7a5433; font-size:1rem; }
.announcement-banner button { margin-left:auto; background:transparent; border:0; font-size:1.2rem; color:#8a4a1c; }

.portal-main { padding:24px clamp(16px,4vw,48px) 120px; max-width:1180px; margin:0 auto; }
.portal-main h2 { font-size:1.2rem; margin-bottom:14px; }
[data-view-panel] { display:none; }
[data-view-panel].is-active { display:block; }

.catalog-toolbar { position:sticky; top:64px; z-index:10; background:#eef1ec; padding:10px 0 14px; margin-bottom:10px; }
.catalog-toolbar input[type="search"] { width:100%; border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px 14px; margin-bottom:10px; }
.category-scroll { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.category-scroll button { flex:none; border:1px solid var(--line); background:#fff; border-radius:99px; padding:8px 16px; font-weight:700; color:var(--forest); white-space:nowrap; }
.category-scroll button.is-active { background:var(--forest); border-color:var(--forest); color:#fff; }

.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; margin-bottom:28px; }
.product-card { border:1px solid var(--line); border-radius:16px; background:var(--paper); overflow:hidden; display:flex; flex-direction:column; }
.product-media { height:120px; background:#dde3de; display:flex; align-items:center; justify-content:center; font-size:2.2rem; }
.product-media img { width:100%; height:100%; object-fit:cover; }
.product-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:4px; flex:1; }
.product-body h3 { margin:0; font-size:1rem; }
.product-body .meta { color:var(--muted); font-size:1rem; }
.product-body .price { color:var(--forest); font-weight:900; font-size:1.05rem; margin-top:2px; }
.product-actions { margin-top:auto; display:flex; align-items:center; gap:8px; padding-top:8px; }
.qty-stepper { display:flex; align-items:center; border:1px solid var(--line); border-radius:99px; overflow:hidden; }
.qty-stepper button { border:0; background:#fff; width:30px; height:30px; font-weight:900; }
.qty-stepper span { width:28px; text-align:center; font-weight:800; }
.add-to-cart { flex:1; border:0; border-radius:99px; background:var(--forest); color:#fff; padding:8px 12px; font-weight:800; }
.add-to-cart.is-added { background:#1f7a4d; }
.empty { padding:50px 20px; border:1px dashed #b8c2bb; border-radius:14px; color:var(--muted); text-align:center; }

.cart-bar { position:fixed; z-index:25; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--deep); color:#fff; box-shadow:0 -12px 30px rgba(9,39,28,.25); }
.cart-bar button { border:0; border-radius:99px; background:var(--orange); color:#fff; padding:10px 18px; font-weight:850; }
@media (min-width:901px) { .cart-bar { display:none; } }

.scrim { position:fixed; inset:0; z-index:29; background:rgba(9,39,28,.35); }
.cart-panel { position:fixed; z-index:30; top:0; right:0; bottom:0; width:min(400px,100%); background:var(--paper); box-shadow:-20px 0 50px rgba(9,39,28,.2); display:flex; flex-direction:column; padding:20px; transform:translateX(100%); transition:transform .25s ease; }
.cart-panel:not([hidden]) { transform:translateX(0); }
.cart-panel header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.cart-panel .dialog-close,.cart-panel [data-cart-close] { border:0; background:transparent; font-size:1.4rem; color:var(--muted); }
.cart-items { flex:1; overflow-y:auto; display:grid; gap:10px; }
.cart-item { display:grid; grid-template-columns:1fr auto; gap:6px; border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.cart-item strong { display:block; font-size:1rem; }
.cart-item span { color:var(--muted); font-size:1rem; }
.cart-item .remove { justify-self:end; align-self:start; border:0; background:transparent; color:#a9362c; font-weight:800; }
.cart-note { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:12px; font-weight:800; color:var(--forest); font-size:1rem; }
.cart-note input { flex:1 1 100%; margin-top:4px; border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-weight:400; }
.cart-summary { display:flex; align-items:center; justify-content:space-between; margin:14px 0; font-size:1.05rem; }
[data-go-checkout],[data-checkout-submit],[data-announcement-ack],[data-success-view] { width:100%; border:0; border-radius:10px; background:var(--forest); color:#fff; padding:13px; font-weight:850; }
.button-outline { background:transparent!important; border:1px solid var(--line)!important; color:var(--forest)!important; }

@media (max-width:900px) {
  .cart-panel { width:100%; }
  [data-portal-nav] button { padding:8px 10px; font-size:1rem; }
  .catalog-toolbar { top:0; }
}

.order-history-list { display:grid; gap:12px; }
.order-card { border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:16px 18px; }
.order-card-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; }
.order-card-head time { color:var(--muted); font-size:1rem; }
.order-status { font-weight:850; color:var(--forest); font-size:1rem; }
.order-progress { display:flex; gap:4px; margin:10px 0; }
.order-progress span { flex:1; height:5px; border-radius:99px; background:var(--line); }
.order-progress span.is-done { background:var(--leaf); }
.order-progress span.is-cancelled { background:#a9362c; }
.order-card-meta { display:flex; flex-wrap:wrap; gap:14px; color:var(--muted); font-size:1rem; }
.order-items-toggle { margin-top:10px; background:transparent; border:0; color:var(--leaf); font-weight:800; padding:0; }
.order-items-detail { margin-top:10px; display:grid; gap:6px; }
.order-items-detail div { display:flex; justify-content:space-between; font-size:1rem; border-top:1px dashed var(--line); padding-top:6px; }

.account-card { border:1px solid var(--line); border-radius:16px; background:var(--paper); padding:24px; max-width:420px; }
.account-name { font-size:1.2rem; font-weight:850; }
.account-meta { color:var(--muted); margin:6px 0 20px; }
.account-card button { border:0; border-radius:10px; background:var(--forest); color:#fff; padding:11px 18px; font-weight:850; }

.dialog-backdrop { position:fixed; inset:0; z-index:40; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(9,39,28,.55); }
.dialog-backdrop.is-open { display:flex; }
.portal-dialog { position:relative; width:min(480px,100%); max-height:88vh; overflow-y:auto; border-radius:20px; background:var(--paper); padding:32px; box-shadow:0 30px 90px rgba(9,39,28,.3); }
.portal-dialog h2 { margin:8px 0 16px; font-size:1.35rem; }
.dialog-close { position:absolute; top:14px; right:16px; border:0; background:transparent; font-size:1.4rem; color:var(--muted); }
.checkout-items { display:grid; gap:8px; margin-bottom:10px; max-height:260px; overflow-y:auto; }
.checkout-items div { display:flex; justify-content:space-between; font-size:1rem; border-bottom:1px dashed var(--line); padding-bottom:6px; }
.success-mark { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:#1f7a4d; color:#fff; font-size:1.6rem; margin-bottom:10px; }

.toast { position:fixed; z-index:60; left:50%; bottom:26px; transform:translateX(-50%); background:var(--deep); color:#fff; padding:12px 20px; border-radius:99px; box-shadow:0 14px 35px rgba(9,39,28,.3); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.toast.is-visible { opacity:1; }