:root{--navy:#142541;--blue:#326cba;--accent:#2f79d3;--teal:#148b88;--red:#bd4853;--amber:#b67b27;--ink:#23344c;--muted:#758398;--line:#e6eaf0;--bg:#f4f6fa;--white:#fff;--shadow:0 9px 25px rgba(23,44,68,.035)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;font-size:14px;line-height:1.5}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}a{color:var(--blue)}.hidden{display:none!important}
.shell{display:flex;min-height:100vh}.sidebar{width:230px;flex:0 0 230px;background:var(--navy);color:#d7e2ef;min-height:100vh;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:28px 19px 26px}.brandmark{display:grid;place-items:center;background:#3f80b4;color:#fff;font-weight:900;font-size:24px;width:42px;height:42px;border-radius:12px}.brand strong{display:block;color:#fff;font-size:18px;letter-spacing:.02em}.brand small{display:block;font-size:10px;color:#a7bdd3;letter-spacing:.02em}.navlist{display:flex;flex-direction:column;gap:5px;padding:7px 11px}.nav{background:transparent;border:0;border-radius:9px;text-align:left;color:#aab9cc;padding:12px 15px;font-weight:600;display:flex;gap:12px;align-items:center}.nav span{font-size:19px;width:24px}.nav:hover{background:#233b5a;color:#fff}.nav.active{background:#2b476b;color:#fff}.sidebottom{margin-top:auto;border-top:1px solid #35516b;padding:22px 18px;display:flex;gap:10px;align-items:center}.avatar{width:33px;height:33px;border-radius:50%;background:#3a709e;color:#fff;display:grid;place-items:center;font-weight:bold;font-size:11px}.account{min-width:0}.account b{color:#fff;font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}.account small{color:#a6b8d0;font-size:10px}
.mainarea{flex:1;min-width:0}.topbar{background:#fff;padding:23px 30px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.eyebrow{color:#8fa0b7;font-weight:700;font-size:9px;letter-spacing:.19em}.topbar h1{margin:2px 0;font-size:22px;letter-spacing:.015em}.topbar p{margin:0;font-size:11px;color:var(--muted)}.top-actions{display:flex;align-items:center;gap:8px}.sync-badge{font-size:11px;color:#5b7881;background:#eef7f6;border:1px solid #e0eeec;border-radius:30px;padding:8px 10px;white-space:nowrap}.sync-badge.pending{color:#a37c2f;background:#fff7e8}.sync-badge.error{color:#a9454f;background:#fff0f0}.iconbtn{width:35px;height:35px;display:grid;place-items:center;border:1px solid #dee5ed;border-radius:8px;background:#fff;color:#5b6c83;font-size:17px}.btn{padding:10px 14px;border-radius:8px;border:1px solid #dfe6ef;background:#fff;color:#354c68;font-weight:700}.btn.primary{background:#376bc1;border-color:#376bc1;color:#fff}.btn.primary:hover{background:#275da8}.btn.outline:hover,.btn.ghost:hover{background:#eef3fa}.btn.ghost{background:transparent;border-color:transparent}.btn.full{width:100%;padding:12px}.linkbtn{color:var(--blue);border:0;background:transparent;font-weight:700;white-space:nowrap}main{max-width:1580px;margin:0 auto;padding:24px 28px 65px}.notice{padding:12px 15px;border-radius:10px;margin-bottom:18px;background:#e8f3fb;color:#295d90;border:1px solid #c7dfef}.notice.warning{background:#fff7e7;color:#92631e;border-color:#ebd4aa}.notice.error{background:#fff0ed;color:#a13c40;border-color:#f2c9c7}
.toolbar-row{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:18px}.period-title b{display:block;font-size:15px}.period-title small{font-size:11px;color:var(--muted)}.control-inline{display:flex;align-items:center;gap:9px}.control-inline label{color:var(--muted);font-size:11px;font-weight:700}select,input,textarea{border:1px solid #dbe4ed;border-radius:8px;background:#fff;padding:10px 10px;outline:none;color:var(--ink);min-width:0}select:focus,input:focus,textarea:focus{border-color:#5591d4;box-shadow:0 0 0 3px #4e8dd21b}.control-inline select{min-width:85px}.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:18px}.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;box-shadow:var(--shadow)}.kpi>span{font-size:12px;color:#738399;display:block;font-weight:700}.kpi strong{font-size:34px;font-weight:790;display:block;margin:5px 0 0}.kpi small{font-size:10px;color:#8995a5}.kpi-blue{border-left:3px solid var(--blue)}.red{color:var(--red)}.amber{color:var(--amber)}.two-col{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:16px}.card{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:13px;min-width:0;margin-bottom:18px}.card-title{padding:20px 21px 14px;display:flex;justify-content:space-between;gap:10px;align-items:start}.card-title h2,.card h2{font-size:16px;margin:0 0 2px}.card-title p,.card p{color:var(--muted);font-size:12px;margin:0}.rank-list{padding:0 18px 16px}.rank-item{border-top:1px solid #f0f2f6;display:flex;align-items:center;gap:12px;padding:13px 3px}.rank-item>div:nth-child(2){flex:1;min-width:0}.rank-number{width:25px;height:25px;background:#f0f3f8;border-radius:8px;display:grid;place-items:center;font-weight:750;color:#607490;font-size:12px}.rank-item strong{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-item small{display:block;color:#7f8da0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rank-side{display:flex;align-items:center;gap:6px;white-space:nowrap}.chip{display:inline-block;font-weight:700;font-size:10px;border-radius:20px;padding:4px 8px}.chip.high{background:#fdebee;color:#ad4653}.chip.mid{background:#fff2df;color:#a87221}.chip.single{background:#eef0f5;color:#667186}.chip.normal{background:#e9f6f2;color:#278474}.chip.off{background:#eef0f5;color:#768194}.explain{padding:1px 22px}.explain-row{margin-bottom:16px;display:flex;align-items:center;gap:11px}.explain-row .symbol{width:30px;height:30px;border-radius:10px;background:#f3f6fc;display:grid;place-items:center}.explain-row b{font-size:12px}.explain-row small{display:block;color:var(--muted);font-size:11px}.privacy-inline{border-top:1px solid #eef2f6;margin:4px 20px 20px;padding-top:14px;color:#8a7962;font-size:11px}.hint{padding:24px 13px;color:#8090a2;text-align:center;font-size:13px}
.control-panel{display:grid;grid-template-columns:1.1fr 1.2fr .9fr 1fr;gap:13px;padding:17px}.field label{display:block;font-size:12px;font-weight:700;color:#5e6e84;margin-bottom:6px}.field input,.field select,.field textarea{display:block;width:100%;min-height:41px}.field textarea{resize:vertical;min-height:90px}.clinic-head{display:flex;justify-content:space-between;align-items:center;margin:10px 0 12px}.clinic-head h2{font-size:19px;margin:0}.clinic-head p{font-size:12px;color:var(--muted);margin:3px 0 0}.table-container{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:880px}thead th{position:sticky;top:0;background:#f8fafd;color:#758296;padding:12px 10px;text-align:left;font-size:11px;white-space:nowrap}tbody td{padding:13px 10px;border-top:1px solid #edf0f5;font-size:12px}td .pname{font-weight:650}td .subp{color:#8794a3;font-size:10px}th.num,td.num{text-align:right;font-variant-numeric:tabular-nums}.smallbtn{background:#eff4fc;color:#386caa;border:0;border-radius:7px;padding:7px 10px;font-size:11px;font-weight:750}.table-foot{font-size:10px;color:#8c96a5;padding:12px 18px;border-top:1px solid #eef0f3}.mobile-products{display:none}.import-card{text-align:center;padding:36px 22px 28px}.import-card>p{max-width:520px;margin:7px auto 20px;line-height:1.8}.import-icon{width:60px;height:60px;border-radius:16px;background:#e9f1fc;color:#3579bc;display:grid;place-items:center;font-size:30px;margin:0 auto 14px}.import-card h2{font-size:21px}.file-btn{display:inline-block;background:#316cbd;color:#fff;padding:12px 22px;border-radius:9px;cursor:pointer;font-weight:700;margin-bottom:12px}.supported{font-size:11px;color:#93a0ac;margin-bottom:13px}.import-preview{max-width:540px;background:#f4f8fc;border:1px solid #dfe9f4;border-radius:10px;text-align:left;padding:15px;margin:18px auto}.import-preview b{font-size:14px}.import-preview p{font-size:12px;margin:5px 0;color:#53667d}.progress-track{width:100%;max-width:510px;height:8px;background:#edf1f5;border-radius:10px;margin:12px auto;overflow:hidden}.progress-track>div{height:100%;background:#4592ca;width:0%;transition:width .2s}.progress-label{font-size:12px;color:#5b7491}.foot-card{padding:19px 22px}.foot-card b{font-size:13px}.foot-card p{margin:8px 0 0;line-height:1.75}.settings-card{padding:20px 23px}.settings-card h2{margin:0 0 18px}.settings-line{padding:14px 0;border-top:1px solid #eef0f4;display:flex;justify-content:space-between;gap:13px;font-size:13px}.settings-line>span{color:#8794a3}.settings-line>b{text-align:right;font-weight:650;overflow-wrap:anywhere}.settings-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.rank-all{padding:0 22px 20px}.rank-all .rank-item{padding:14px 5px}.empty{padding:30px 16px;color:#93a0aa;font-size:13px;text-align:center}footer{font-size:10px;color:#a0a9b4;text-align:center;padding:16px}
.overlay,.modal-backdrop{position:fixed;inset:0;background:rgba(11,27,49,.5);display:flex;justify-content:center;align-items:center;z-index:50;padding:18px}.auth-card,.modal{background:white;width:min(440px,100%);border-radius:18px;box-shadow:0 24px 70px #06182c38;padding:26px}.auth-brand{padding:0 0 24px}.auth-brand strong{color:var(--ink)}.auth-brand small{color:var(--muted)}.auth-card h2{font-size:20px;margin:0 0 7px}.auth-copy{font-size:12px;color:var(--muted);margin:0 0 22px}.auth-card form>label{display:block;font-size:12px;color:#5d6f82;font-weight:700;margin-bottom:13px}.auth-card form input{display:block;width:100%;margin-top:6px;padding:12px}.auth-card form button{margin-top:9px}.auth-divide{border-top:1px solid #e8edf3;position:relative;text-align:center;margin:21px 0 16px;height:0}.auth-divide span{position:relative;top:-10px;background:#fff;color:#9ba6b0;padding:0 12px}.auth-note{margin:15px 0 0;text-align:center;color:#98a2b0;font-size:10px}.auth-warning,.form-error{background:#fff5e3;color:#985f20;border:1px solid #f0d8aa;padding:10px;border-radius:9px;font-size:12px;margin-bottom:13px}.form-error{background:#fff0f0;color:#a0414f;border-color:#f4c8c8}.modal{width:min(510px,100%)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-header h2{margin:0;font-size:18px}.modal-product{font-weight:700;margin-bottom:14px;line-height:1.7}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:17px}.mini-grid>div{background:#f7f9fc;border-radius:10px;padding:11px}.mini-grid small{font-size:10px;color:var(--muted);display:block}.mini-grid b{font-size:16px}.modal .field{margin-bottom:13px}.modal-estimate{background:#f0f6fb;border-radius:8px;padding:11px;font-size:12px;margin:13px 0}.modal-actions{display:flex;justify-content:space-between;gap:10px}.small-note{font-size:11px;color:#9a8391;margin:15px 0 0}.bottom-nav{display:none}
@media(max-width:1140px){.sidebar{width:198px;flex-basis:198px}.two-col{grid-template-columns:1fr 1fr}.control-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:820px){.sidebar{display:none}.mainarea{width:100%}.topbar{padding:17px 17px 15px}main{padding:16px 14px 86px}.topbar h1{font-size:18px}.topbar p{font-size:10px}.top-actions{gap:4px}.sync-badge{font-size:10px;padding:5px 7px}.top-actions .btn{display:none}.kpi-grid{gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}.kpi{padding:14px}.kpi strong{font-size:29px}.kpi>span{font-size:11px}.two-col{grid-template-columns:1fr}.toolbar-row{align-items:flex-start;flex-direction:column;gap:13px}.control-inline{width:100%}.control-inline select{flex:1}.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;padding:7px 5px max(8px,env(safe-area-inset-bottom));border-top:1px solid #e0e7ef;z-index:20;box-shadow:0 -6px 25px #1733570c}.bottom-nav button{flex:1;background:transparent;border:0;color:#8a96a5;padding:5px 1px;font-size:10px;display:flex;align-items:center;flex-direction:column;gap:2px}.bottom-nav button span{font-size:21px;line-height:1.3}.bottom-nav button.active{color:var(--blue);font-weight:780}.control-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;padding:12px}.table-container{display:none}.mobile-products{display:block}.product-card{padding:14px 15px;border-top:1px solid #edf0f5}.product-header{display:flex;justify-content:space-between;gap:9px}.product-header strong{font-size:14px;line-height:1.65}.product-header small{display:block;color:#8594a8;font-size:10px;margin-top:2px}.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:12px 0 11px}.product-grid>div{background:#f7f9fc;border-radius:8px;padding:7px}.product-grid small{font-size:10px;color:#8694a7;display:block}.product-grid b{font-size:13px}.product-action{display:flex;justify-content:space-between;align-items:center;gap:5px}.product-action small{color:#8693a2;font-size:10px}.rank-item{gap:7px}.rank-item strong{font-size:12px}.rank-side{flex-direction:column;align-items:flex-end}.rank-item small{font-size:10px}.auth-card,.modal{padding:22px}.modal-backdrop{align-items:flex-end;padding:0}.modal{border-radius:20px 20px 0 0;max-height:94vh;overflow:auto;padding-bottom:max(22px,env(safe-area-inset-bottom))}}
@media(max-width:380px){.topbar{padding:14px 11px}.topbar h1{font-size:16px}.eyebrow{font-size:8px}.control-panel{grid-template-columns:1fr}.mini-grid b{font-size:13px}}

/* V2.2: last-shipment quantity + estimated monthly consumption fields. */
.table-container table{min-width:1000px}
.mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.last-ship-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.last-ship-info small{display:block;line-height:1.4}
@media(max-width:820px){.product-action{align-items:center}.product-action .smallbtn{flex-shrink:0}}

/* V2.3: 產品頁面，全部歷年曾採購客戶依最後採購年月新到舊排序。 */
.catalog-filter{padding:18px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.15fr);gap:14px 17px}
.catalog-search-note{grid-column:1/-1;color:var(--muted);font-size:12px;padding-top:1px}
.catalog-summary{display:flex;gap:14px;justify-content:space-between;align-items:stretch;margin:0 0 16px}
.catalog-title-block{background:#fff;border:1px solid var(--line);border-radius:12px;flex:1;padding:17px 19px;min-width:0}
.catalog-title-block h2{font-size:17px;margin:5px 0 3px;overflow-wrap:anywhere}
.catalog-title-block p{color:var(--muted);margin:0;font-size:11px}
.catalog-kpis{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:10px;flex:1.15}
.catalog-kpis>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px}
.catalog-kpis span{display:block;color:var(--muted);font-size:11px}
.catalog-kpis b{display:block;font-size:20px;font-variant-numeric:tabular-nums;margin-top:4px}
.catalog-table{min-width:750px}
.catalog-history-row td{background:#f8fafc;padding:10px 16px 16px}
.catalog-history{background:#f6f9fd;border:1px solid #e8eef5;border-radius:9px;padding:11px 13px;margin-top:9px}
.catalog-history>b{font-size:11px;color:#5e718a}
.catalog-history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:7px;margin-top:9px}
.catalog-history-grid>div{display:flex;justify-content:space-between;gap:8px;border:1px solid #e5ecf5;border-radius:7px;padding:8px;background:#fff;font-size:11px}
.catalog-history-grid span{color:var(--muted)}
.catalog-history-grid strong{font-variant-numeric:tabular-nums}
.catalog-mobile-card{padding:15px;border-top:1px solid #edf0f5}
.catalog-mobile-title{display:flex;align-items:center;gap:9px}
.catalog-mobile-title>div{flex:1;min-width:0}
.catalog-mobile-title strong{font-size:13px;display:block}
.catalog-mobile-title small{font-size:10px;color:var(--muted);display:block}
.catalog-mobile-title>b{font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums}
.catalog-rank{background:#edf3fb;color:#466d9c;border-radius:8px;min-width:24px;min-height:24px;display:grid;place-items:center;font-size:11px;font-weight:800}
.catalog-mobile-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}
.catalog-mobile-metrics>div{background:#f7f9fc;border-radius:8px;padding:9px}
.catalog-mobile-metrics small{display:block;color:var(--muted);font-size:10px}
.catalog-mobile-metrics strong{font-size:13px;display:block;margin-top:3px}
@media(max-width:820px){.catalog-summary{display:block}.catalog-title-block{margin-bottom:9px}.catalog-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-kpis>div{padding:10px}.catalog-kpis b{font-size:16px}.catalog-filter{grid-template-columns:1fr;padding:14px}.catalog-search-note{grid-column:auto}.bottom-nav button{font-size:9px;min-width:0}.bottom-nav button span{font-size:20px}}
@media(max-width:370px){.catalog-kpis span{font-size:9px}.catalog-mobile-title{gap:5px}.bottom-nav button span{font-size:18px}}

/* V2.3 approved mock: product filters and pagination */
.catalog-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
.catalog-kpis{grid-template-columns:repeat(4,minmax(0,1fr));flex:1.8}
.catalog-kpis b{font-size:19px}
.catalog-pagination{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.catalog-pagination.hidden{display:none}
.catalog-page-actions{display:flex;gap:8px}
.catalog-page-actions .btn{font-size:12px;padding:8px 10px}
.catalog-page-actions .btn:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:1000px){.catalog-summary{display:block}.catalog-title-block{margin-bottom:10px}.catalog-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.catalog-filter{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-kpis b{font-size:15px}.catalog-kpis span{font-size:10px}.catalog-pagination{flex-wrap:wrap}}
@media(max-width:480px){.catalog-filter{grid-template-columns:1fr}.catalog-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-kpis b{font-size:17px}}