:root{--ink:#10243f;--ink2:#17365d;--cream:#f6f4ee;--paper:#fff;--line:#dfe4e8;--muted:#718092;--blue:#2563eb;--cyan:#64d8d3;--coral:#ff775f;--lime:#c8ef63;--shadow:0 18px 50px rgba(15,36,63,.09);--font:"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--font);line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}[hidden]{display:none!important}
.app-shell{min-height:100vh;display:grid;grid-template-columns:236px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;padding:28px 18px 22px;background:var(--ink);color:white;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;color:white;text-decoration:none}.brand-mark,.login-brand span{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--coral);color:white;font-weight:900;box-shadow:0 8px 20px rgba(255,119,95,.3)}.brand strong{display:block;font-size:1rem}.brand small{display:block;margin-top:1px;color:#90a3b9;font:700 .61rem/1 system-ui;letter-spacing:.16em}.nav{display:grid;gap:6px;margin-top:58px}.nav-item,.logout{border:0;background:transparent;color:#b6c2cf;border-radius:12px;padding:12px;text-align:left;font-weight:700;display:flex;align-items:center;gap:12px}.nav-item span{width:25px;height:25px;border:1px solid #41556d;border-radius:7px;display:grid;place-items:center}.nav-item b{margin-left:auto;background:#284562;color:#d9f9f7;border-radius:99px;padding:1px 8px;font-size:.72rem}.nav-item:hover,.nav-item.active{background:#1b3655;color:#fff}.nav-item.active span{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}.side-note{margin-top:auto;border:1px solid #2d4866;background:#162e4b;border-radius:14px;padding:14px;display:flex;gap:10px}.side-note .pulse{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 5px rgba(100,216,211,.12);margin-top:5px}.side-note strong,.side-note small{display:block}.side-note strong{font-size:.79rem}.side-note small{font-size:.7rem;color:#91a5b9;margin-top:3px}.logout{margin-top:9px;font-size:.77rem;justify-content:center;color:#90a3b9}
main{min-width:0}.topbar{height:100px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;background:rgba(246,244,238,.91);backdrop-filter:blur(12px);position:sticky;top:0;z-index:5}.topbar h1{margin:2px 0 0;font-size:1.7rem;letter-spacing:-.04em}.eyebrow{margin:0;color:var(--blue);font:800 .68rem/1 system-ui;letter-spacing:.17em}.top-actions{display:flex;align-items:center;gap:12px}.date-chip{font-size:.8rem;color:var(--muted);border-right:1px solid #cfd6dc;padding-right:16px}.primary,.secondary{border:0;border-radius:10px;padding:11px 16px;font-weight:800;transition:.18s transform,.18s background}.primary{background:var(--blue);color:white;box-shadow:0 8px 20px rgba(37,99,235,.2)}.primary:hover{background:#174fd0;transform:translateY(-1px)}.secondary{background:white;color:var(--ink);border:1px solid var(--line)}.wide{width:100%;padding:13px}.mobile-menu{display:none;border:0;background:transparent;font-size:1.25rem}.view{display:none;padding:0 34px 44px;max-width:1600px;margin:0 auto}.view.active{display:block}
.hero-strip{min-height:188px;border-radius:24px;padding:30px 34px;color:white;background:linear-gradient(128deg,#10243f 0%,#183b66 72%,#1d4d77 100%);display:flex;align-items:center;justify-content:space-between;overflow:hidden;position:relative}.hero-strip:before{content:"";position:absolute;width:260px;height:260px;border:1px solid rgba(100,216,211,.26);border-radius:50%;right:80px;top:-160px}.hero-strip p{margin:0 0 9px;color:var(--cyan);font-weight:800;font-size:.8rem}.hero-strip h2{font-size:1.7rem;line-height:1.25;margin:0 0 9px;letter-spacing:-.04em}.hero-strip span{color:#aabed1;font-size:.85rem}.hero-orbit{margin-right:28px;width:100px;height:100px;border:1px solid #45617c;border-radius:50%;display:grid;place-items:center;position:relative}.hero-orbit i{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--coral);top:9px;left:13px;box-shadow:0 0 0 6px rgba(255,119,95,.15)}.hero-orbit span{font:900 .7rem/1 system-ui;letter-spacing:.2em;color:white}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.metric{background:white;border:1px solid var(--line);border-radius:17px;padding:19px 20px;box-shadow:0 8px 30px rgba(15,36,63,.04)}.metric header{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}.metric header i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:#edf4ff;color:var(--blue)}.metric strong{display:block;font-size:1.75rem;margin:8px 0 2px;letter-spacing:-.05em}.metric small{color:var(--muted)}.metric small b{color:#169072}
.dashboard-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(275px,.62fr);gap:18px}.panel{background:white;border:1px solid var(--line);border-radius:17px;box-shadow:0 10px 36px rgba(15,36,63,.045)}.panel-head,.section-head{display:flex;align-items:center;justify-content:space-between}.panel-head{padding:21px 22px 15px}.panel-head h2{margin:5px 0 0;font-size:1.12rem}.text-btn{border:0;background:transparent;color:var(--blue);font-weight:800}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:620px}th{text-align:left;font-size:.7rem;letter-spacing:.06em;color:#8a96a4;padding:11px 18px;background:#fafbfc}td{padding:15px 18px;border-top:1px solid #edf0f2;font-size:.85rem}td strong{display:block}td small{display:block;color:var(--muted);margin-top:2px}.order-no{font:800 .75rem/1 ui-monospace,monospace;color:var(--blue)}.money{font-weight:900;white-space:nowrap}.status{display:inline-flex;padding:5px 9px;border-radius:99px;font-size:.72rem;font-weight:900;white-space:nowrap}.status.new{background:#e9f1ff;color:#2459bf}.status.confirmed{background:#fff2d5;color:#9a6500}.status.purchased{background:#eee9ff;color:#684bc0}.status.transit{background:#dff8f4;color:#0d806f}.status.ready{background:#e8f7d8;color:#4d7d11}.status.shipped{background:#e4f0f8;color:#315d7b}.row-btn{width:31px;height:31px;border:1px solid var(--line);background:white;border-radius:9px;color:var(--ink)}.flow-list{padding:0 21px 22px}.flow-item{display:grid;grid-template-columns:36px 1fr auto;gap:11px;align-items:center;padding:14px 0;border-top:1px solid #edf0f2}.flow-item:first-child{border-top:0}.flow-item>span{width:34px;height:34px;border-radius:10px;background:#f0f5fa;display:grid;place-items:center;font-weight:900}.flow-item strong,.flow-item small{display:block}.flow-item strong{font-size:.8rem}.flow-item small{font-size:.7rem;color:var(--muted)}.flow-item b{font-size:1.2rem}.empty{text-align:center;padding:46px 20px}.empty>span{font-size:2rem;color:var(--blue)}.empty h3{margin:7px 0 2px}.empty p{margin:0;color:var(--muted)}
.section-head{margin:6px 0 20px}.section-head p{color:var(--muted);margin:0}.filters{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px}.search{height:44px;width:min(390px,100%);background:white;border:1px solid var(--line);border-radius:11px;display:flex;align-items:center;gap:9px;padding:0 13px}.search input{border:0;outline:0;width:100%;background:transparent}.status-tabs{display:flex;gap:6px;overflow:auto}.status-tabs button{border:1px solid var(--line);background:white;color:var(--muted);border-radius:99px;padding:8px 12px;white-space:nowrap;font-weight:800;font-size:.75rem}.status-tabs button.active{background:var(--ink);color:white;border-color:var(--ink)}.full-table{min-width:900px}.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.link-card{background:white;border:1px solid var(--line);border-radius:18px;padding:22px;position:relative;overflow:hidden}.link-card:before{content:"";position:absolute;width:90px;height:90px;border-radius:50%;background:var(--lime);right:-45px;top:-44px}.link-card.inactive{opacity:.62}.link-card .tag{color:var(--blue);font-size:.68rem;font-weight:900;letter-spacing:.14em}.link-card h3{margin:10px 0 5px;font-size:1.05rem}.link-card p{min-height:42px;color:var(--muted);font-size:.8rem}.link-product{border-top:1px solid #edf0f2;border-bottom:1px solid #edf0f2;padding:13px 0;margin:15px 0;display:flex;justify-content:space-between;gap:12px;font-size:.8rem}.link-product b:last-child{white-space:nowrap}.link-actions{display:flex;gap:8px}.link-actions button{flex:1}.copy-btn{border:0;border-radius:9px;background:var(--ink);color:white;padding:9px;font-weight:800}.open-btn{border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);padding:9px;font-weight:800}
label{display:block;font-size:.78rem;font-weight:800;color:#33485e}input,select,textarea{width:100%;border:1px solid #d5dce2;border-radius:10px;background:white;color:var(--ink);padding:11px 12px;margin-top:6px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}textarea{resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid .full{grid-column:1/-1}.form-error{color:#c43e36;font-size:.78rem;min-height:20px}.modal-backdrop,.drawer-backdrop{position:fixed;inset:0;background:rgba(8,24,43,.56);z-index:20}.modal-backdrop{display:grid;place-items:center;padding:20px}.modal{background:white;width:min(590px,100%);border-radius:20px;padding:25px;box-shadow:0 30px 90px rgba(8,24,43,.3)}.modal>p{color:var(--muted);font-size:.83rem}.modal-head,.drawer-head{display:flex;justify-content:space-between;align-items:flex-start}.modal h2,.drawer h2{margin:5px 0 0}.icon-btn{border:0;background:#f0f3f5;width:34px;height:34px;border-radius:50%;font-size:1.2rem}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.drawer-backdrop{display:flex;justify-content:flex-end}.drawer{width:min(440px,100%);height:100%;overflow:auto;background:white;padding:27px;box-shadow:-20px 0 70px rgba(8,24,43,.2)}.drawer-summary{margin:24px 0;padding:18px;background:#f4f7f8;border-radius:14px}.drawer-summary div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:.82rem}.drawer-summary span{color:var(--muted)}.drawer form{display:grid;gap:16px}
.login-screen{min-height:100vh;display:grid;grid-template-columns:1.25fr .75fr;background:var(--ink)}.login-art{position:relative;overflow:hidden;padding:45px 6vw;color:white;background:radial-gradient(circle at 80% 20%,rgba(100,216,211,.25),transparent 24%),linear-gradient(145deg,#10243f,#173d67)}.login-art:after{content:"";position:absolute;width:430px;height:430px;border:1px solid rgba(255,255,255,.12);border-radius:50%;right:-100px;bottom:-170px}.login-brand{display:flex;gap:10px;align-items:center;font-weight:900}.big-type{font:900 clamp(3.2rem,7vw,7.5rem)/.86 system-ui,sans-serif;letter-spacing:-.07em;margin-top:14vh}.login-art>p{color:#acc0d1;font-size:1.05rem}.art-card{position:absolute;right:8%;top:20%;width:155px;padding:18px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.1);backdrop-filter:blur(12px);border-radius:18px;transform:rotate(5deg)}.art-card small,.art-card strong{display:block}.art-card strong{font-size:2.5rem}.art-card i{color:var(--lime);font-size:.75rem}.login-card{display:flex;flex-direction:column;justify-content:center;padding:9vw;background:var(--cream)}.login-card h1{font-size:2.2rem;letter-spacing:-.05em;margin:12px 0 4px}.login-card>p:not(.eyebrow){color:var(--muted);margin-bottom:27px}.login-card label{margin-bottom:17px}
.customer-page{min-height:100vh;background:#edf3f6}.customer-nav{height:82px;padding:0 5vw;display:flex;justify-content:space-between;align-items:center;background:white;border-bottom:1px solid var(--line)}.brand.dark{color:var(--ink)}.customer-nav>span{font-size:.75rem;color:var(--muted);font-weight:800}.customer-main{max-width:1180px;margin:0 auto;padding:58px 28px;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.product-story{position:relative}.round-label{position:absolute;right:10px;top:-10px;width:88px;height:88px;border-radius:50%;background:var(--coral);color:white;display:grid;place-items:center;text-align:center;font-weight:900;transform:rotate(8deg);box-shadow:0 14px 30px rgba(255,119,95,.25)}.product-story h1{font-size:clamp(2.5rem,5vw,4.5rem);line-height:1.02;letter-spacing:-.07em;margin:18px 80px 18px 0}.product-story>p:not(.eyebrow){color:#5f7286;max-width:520px}.product-ticket{margin:34px 0 23px;border:1px solid #cfdce4;background:white;border-radius:18px;padding:20px 23px;display:flex;justify-content:space-between;gap:30px;position:relative}.product-ticket:after{content:"";position:absolute;top:0;bottom:0;left:65%;border-left:1px dashed #c9d4dc}.product-ticket span{display:block}.product-ticket small,.product-ticket strong{display:block}.product-ticket small{color:var(--muted);font-size:.72rem;margin-bottom:5px}.product-ticket strong{font-size:.95rem}.customer-promise{display:flex;gap:16px;flex-wrap:wrap;font-size:.75rem;color:#547085}.order-form,.order-success{background:white;border-radius:24px;padding:34px;box-shadow:var(--shadow)}.order-form h2{font-size:1.7rem;margin:8px 0 25px}.quantity{display:grid;grid-template-columns:42px 1fr 42px;margin-top:6px}.quantity input{margin:0;border-radius:0;text-align:center;border-inline:0}.quantity button{border:1px solid #d5dce2;background:#f7f9fa;font-size:1.1rem}.quantity button:first-child{border-radius:10px 0 0 10px}.quantity button:last-child{border-radius:0 10px 10px 0}.order-total{display:flex;justify-content:space-between;align-items:end;padding:20px 0}.order-total span,.order-total small{display:block}.order-total small{color:var(--muted);font-size:.65rem}.order-total strong{font-size:1.35rem}.order-success{text-align:center}.order-success>span{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;background:#e7f8e7;color:#269447;font-size:1.5rem}.order-success>strong{display:block;font:900 1.5rem/1 ui-monospace,monospace;color:var(--blue);margin:10px}.toast{position:fixed;z-index:50;right:24px;bottom:24px;background:var(--ink);color:white;padding:13px 17px;border-radius:11px;box-shadow:var(--shadow);transform:translateY(100px);opacity:0;transition:.25s}.toast.show{transform:none;opacity:1}
@media(max-width:1050px){.metrics{grid-template-columns:1fr 1fr}.dashboard-grid{grid-template-columns:1fr}.link-grid{grid-template-columns:1fr 1fr}.login-screen{grid-template-columns:1fr 1fr}.customer-main{gap:35px}.product-story h1{font-size:3rem}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:fixed;z-index:15;left:0;transform:translateX(-100%);transition:.2s;width:236px}.sidebar.open{transform:none}.mobile-menu{display:block}.topbar{height:82px;padding:0 16px}.topbar>div:first-of-type{margin-right:auto;margin-left:10px}.topbar h1{font-size:1.3rem}.topbar .eyebrow,.date-chip{display:none}.top-actions .primary{font-size:.75rem;padding:9px 11px}.view{padding:0 14px 30px}.hero-strip{padding:24px;min-height:174px}.hero-orbit{display:none}.hero-strip h2{font-size:1.4rem}.metrics{gap:9px}.metric{padding:15px}.metric strong{font-size:1.35rem}.filters{align-items:stretch;flex-direction:column}.status-tabs{padding-bottom:4px}.link-grid{grid-template-columns:1fr}.login-screen{display:block;background:var(--cream)}.login-art{min-height:40vh;padding:28px}.big-type{margin-top:8vh;font-size:3.6rem}.art-card{display:none}.login-card{padding:45px 28px}.customer-main{display:block;padding:38px 18px}.product-story{margin-bottom:35px}.product-story h1{font-size:2.7rem}.round-label{width:68px;height:68px;font-size:.8rem}.order-form{padding:25px}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.customer-nav{padding:0 18px}.modal{padding:20px}.drawer{padding:22px}}
@media(max-width:430px){.metrics{grid-template-columns:1fr 1fr}.metric header i{display:none}.metric{padding:14px 12px}.metric strong{font-size:1.25rem}.customer-promise{display:grid;gap:7px}.product-ticket{display:grid}.product-ticket:after{display:none}.product-story h1{margin-right:0}.round-label{top:-32px}.top-actions .primary{font-size:0;width:40px;height:40px;padding:0}.top-actions .primary:after{content:"＋";font-size:1rem}}