:root{
      --bg:#f5f6f8;--panel:#fff;--ink:#22272f;--muted:#8d949d;--line:#e5e7eb;
      --green:#287c53;--green-dark:#17633e;--green-soft:#edf8f1;--blue-soft:#eaf1fb;
      --orange:#c77913;--orange-soft:#fff5df;--red:#be4141;--red-soft:#fff0f0;
      --purple:#7558b5;--purple-soft:#f2edfb;--shadow:0 1px 3px rgba(20,31,43,.08);
    }
    *{box-sizing:border-box}
    html{font-size:16px}
    body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC","PingFang HK","Microsoft JhengHei",sans-serif;line-height:1.45}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer}
    svg{display:block}
    .app{min-height:100vh}
    .sidebar{position:fixed;inset:16px auto 16px 12px;width:270px;background:var(--panel);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:18px 16px;display:flex;flex-direction:column;z-index:30}
    .brand{display:flex;align-items:flex-start;justify-content:space-between;padding:4px 12px 17px;border-bottom:1px solid var(--line)}
    .brand strong{font-size:1.2rem}.brand span{display:block;color:var(--muted);font-size:.86rem}
    .collapse{border:0;background:none;color:var(--muted);font-size:1.3rem}
    .nav{display:grid;gap:6px;padding-top:12px}
    .nav-btn{border:0;background:transparent;color:#343a42;border-radius:12px;padding:12px 13px;display:flex;align-items:center;gap:12px;text-align:left;min-height:46px;text-decoration:none}
    .nav-btn:hover{background:#f4f6f8}.nav-btn.active{background:#e7eef8;color:#1f2a36;font-weight:700}
    .nav-btn .ico{width:21px;height:21px;color:#60666d;display:grid;place-items:center;font-size:1.05rem}
    .nav-btn .count{margin-left:auto;background:#f0f1f3;border-radius:999px;padding:2px 9px;color:#7d838b;font-size:.79rem}
    .nav-spacer{flex:1}
    .report{border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 13px;display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit}
    .profile{margin-top:13px;padding:2px 12px;display:flex;align-items:center;gap:10px;color:#777f89}.profile #sideLogout{border:0;background:transparent;cursor:pointer;color:inherit}
    .avatar{width:30px;height:30px;border-radius:50%;background:#f0f2f4;display:grid;place-items:center;font-size:.82rem}
    .main{margin-left:294px;min-width:0}
    .topbar{height:78px;padding:17px 24px 11px;display:flex;align-items:center;justify-content:space-between}
    .date{font-size:1.04rem;color:#8b9199}
    .top-actions{display:flex;align-items:center;gap:10px}
    .top-btn{height:45px;padding:0 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#69717a;display:flex;align-items:center;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.03)}
    .top-btn b{color:#174d33;font-size:1.08rem}
    .plus{width:31px;height:31px;border:0;border-radius:9px;background:var(--green);color:white;font-size:1.35rem;line-height:1}
    .page{padding:6px 24px 48px;max-width:1720px;margin:auto}
    .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:6px 0 13px}
    h1{font-size:1.78rem;line-height:1.2;margin:0 0 7px;letter-spacing:-.02em}
    .subtitle{color:#818892;margin:0}
    .head-actions{display:flex;align-items:center;gap:10px}
    .primary{border:0;border-radius:11px;background:var(--green);color:white;font-weight:700;padding:11px 17px;box-shadow:0 2px 4px rgba(26,104,67,.2)}
    .primary:hover{background:var(--green-dark)}
    .secondary{border:1px solid var(--line);border-radius:10px;background:#fff;color:#424a53;padding:9px 13px}
    .stats{display:grid;grid-template-columns:repeat(6,96px);gap:8px;margin-bottom:12px;overflow-x:auto;padding-bottom:2px}
    .stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 11px;width:96px;height:82px;text-align:left;box-shadow:var(--shadow);position:relative}
    .stat:hover,.stat.selected{border-color:#8bb9a0;box-shadow:0 0 0 2px rgba(40,124,83,.09)}
    .stat-top{display:flex;align-items:center;justify-content:space-between;color:#626a73;font-size:.9rem}
    .dot{width:9px;height:9px;border-radius:50%;background:#a6adb4}
    .stat strong{display:block;font-size:1.3rem;margin-top:6px;line-height:1}
    .stat.payment .dot{background:#d89a30}.stat.shipping .dot{background:#5683d6}.stat.transit .dot{background:#7558b5}.stat.receive .dot{background:#37a174}.stat.follow .dot{background:#dc8120}
    .attention{display:flex;align-items:center;justify-content:space-between;background:var(--orange-soft);border:1px solid #f0ddb4;border-radius:14px;padding:12px 16px;margin-bottom:16px;color:#765016}
    .attention-left{display:flex;align-items:center;gap:11px}.attention strong{color:#67430c}.attention button{border:0;background:transparent;color:#8b5d0f;font-weight:700}
    .work-card{background:#fff;border:1px solid var(--line);border-radius:17px;box-shadow:var(--shadow);overflow:hidden}
    .tabs{display:flex;align-items:center;gap:6px;padding:14px 17px 0;border-bottom:1px solid var(--line)}
    .tab{border:0;background:transparent;color:#747c85;padding:10px 13px 12px;border-bottom:2px solid transparent}
    .tab.active{color:var(--green-dark);font-weight:700;border-color:var(--green)}
    .filters{display:grid;grid-template-columns:minmax(260px,1.5fr) minmax(145px,.7fr) auto;gap:10px;padding:15px 17px}
    .field{position:relative}
    .field input,.field select{width:100%;height:42px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:0 12px;color:#454d55}
    .field input{padding-left:39px}
    .search-ico{position:absolute;left:13px;top:11px;color:#9aa0a7}
    .clear{border:0;background:transparent;color:#787f87;padding:0 8px}
    .table-scroll{overflow:auto;border-top:1px solid #eff0f2}
    table{width:100%;border-collapse:collapse;min-width:800px}
    th{background:#fafbfc;color:#7c838c;font-weight:600;font-size:.82rem;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
    td{padding:15px 14px;border-bottom:1px solid #eef0f2;vertical-align:middle;font-size:.91rem}
    tbody tr:hover{background:#fbfcfc}
    .order-id{font-size:.78rem;color:#979da5;margin-top:3px}
    .order-updated{font-size:.74rem;color:#979da5;margin-top:5px}
    .product{font-weight:700;color:#252b31}.meta{font-size:.8rem;color:#9198a0;margin-top:3px}
    .note-preview{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#59626b;font-size:.84rem}.note-preview.empty{color:#a0a6ad}
    .request-note{display:none;margin:-5px 0 18px;padding:11px 13px;border:1px solid #e5eee8;background:#f5faf7;border-radius:10px;color:#4f5e55;font-size:.88rem}
    .lead-time{display:grid;gap:2px;white-space:nowrap}.lead-time b{font-size:1rem;color:#2c6047}.lead-time span{font-size:.76rem;color:#8b929a}
    .pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:.78rem;font-weight:650;white-space:nowrap}
    .pill.green{background:var(--green-soft);color:#246944}.pill.orange{background:var(--orange-soft);color:#8c5a09}.pill.blue{background:#edf3ff;color:#426cae}.pill.purple{background:var(--purple-soft);color:#684da2}.pill.red{background:var(--red-soft);color:#a53c3c}.pill.gray{background:#f1f2f4;color:#6f757d}
    .reason{font-size:.8rem;color:#5d656d;background:#f3f5f6;padding:4px 8px;border-radius:7px;white-space:nowrap}
    .follow-date{font-weight:650}.follow-date.due{color:#b36d10}.follow-date.late{color:#b23b3b}
    .row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px}
    .expanded-order td{background:#fbfdfa;padding:7px 16px 16px}
    .expanded-content{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end;border-top:1px solid #e7eee8;padding-top:8px}
    .expanded-products{display:grid;gap:0;min-width:0}
    .expanded-product{padding:9px 0;border-bottom:1px solid #edf1ec}
    .expanded-product:last-child{border-bottom:0}
    .expanded-product b{display:block;font-size:.9rem;font-weight:650}
    .expanded-config{display:block;margin-top:2px;color:#607e68;font-size:.78rem}
    .expanded-quantity{display:inline-block;margin-left:8px;font-size:.8rem;font-weight:650;color:#3c4a40}
    .list-items{min-width:200px}
    .item-summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:3px 8px;padding:2px 0;font-size:.86rem}
    .item-summary .item-name{font-weight:650;color:#252b31}
    .item-summary .item-quantity{font-weight:700;white-space:nowrap;color:#3c4a40}
    .item-summary .item-config{color:#5d6b60;font-size:.8rem}
    .item-more-note{padding:2px 0;color:#7c838c;font-size:.8rem}
    .list-items-empty{color:#a0a6ad}
    .badge.amber{display:inline-flex;align-items:center;padding:1px 7px;border-radius:999px;font-size:.72rem;font-weight:650;white-space:nowrap;background:#fdf1dc;color:#8a5a09;margin-left:4px}
    .expanded-content .row-actions{align-self:end;flex-wrap:wrap}
    .mini{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 10px;color:#535b63;white-space:nowrap}
    .mini.green{background:var(--green);border-color:var(--green);color:#fff}
    .pager{display:flex;align-items:center;justify-content:space-between;padding:13px 17px;color:#838a93;font-size:.85rem}
    .pager-btns{display:flex;gap:5px}.page-btn{width:31px;height:31px;border:1px solid var(--line);background:#fff;border-radius:8px;color:#69717a}.page-btn.active{background:var(--green);color:#fff;border-color:var(--green)}
    .overlay{position:fixed;inset:0;background:rgba(20,26,32,.28);z-index:50;opacity:0;pointer-events:none;transition:.2s}
    .overlay.open{opacity:1;pointer-events:auto}
    .drawer{position:fixed;top:var(--影子帶高,0px);right:0;width:min(570px,94vw);height:calc(100vh - var(--影子帶高,0px));background:#fff;z-index:60;box-shadow:-12px 0 35px rgba(21,30,38,.16);transform:translateX(103%);transition:transform .25s ease;display:flex;flex-direction:column}
    .drawer.open{transform:translateX(0)}
    .drawer-head{padding:22px 24px 17px;border-bottom:1px solid var(--line)}
    .drawer-title-line{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
    .cancel-order{display:inline-block;margin-top:12px;padding:8px 12px;border:1px solid var(--red);border-radius:8px;background:#fff;color:var(--red);font:inherit;font-weight:700;cursor:pointer}.cancel-order:hover{background:#fff1f1}.cancel-order:disabled{opacity:.55;cursor:default}.cancel-order[hidden]{display:none}
    .drawer-danger{margin-top:28px;padding-top:14px;border-top:1px solid #eef0f2;text-align:right}.cancel-link{border:0;background:none;padding:4px 0;color:var(--red);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer}.cancel-link:hover{opacity:.75}.cancel-link[hidden]{display:none}
    .drawer h2{margin:3px 0 5px;font-size:1.35rem}.drawer .close,.modal .close{border:0;background:#f2f4f5;border-radius:9px;width:36px;height:36px;color:#697079;font-size:1.2rem}
    .drawer-body{padding:20px 24px 35px;overflow:auto}
    .summary-band{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:19px}
    .summary-cell{background:#f7f8f9;border-radius:11px;padding:11px}.summary-cell small{display:block;color:#9197a0}.summary-cell strong{display:block;margin-top:4px;font-size:.92rem}
    .section{border-top:1px solid var(--line);padding-top:18px;margin-top:18px}
    .section:first-of-type{border-top:0;padding-top:0}.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.section-title h3{font-size:1rem;margin:0}
    .items{display:grid;gap:8px}.item-line{display:flex;justify-content:space-between;gap:15px;padding:11px 12px;border:1px solid var(--line);border-radius:10px}.item-line b{font-size:.92rem}.item-line span{color:#777f87;font-size:.85rem}
    .timeline{position:relative;padding-left:24px}.timeline:before{content:"";position:absolute;left:7px;top:7px;bottom:9px;width:2px;background:#dfe4e1}
    .event{position:relative;padding:0 0 17px 8px}.event:before{content:"";position:absolute;left:-22px;top:4px;width:12px;height:12px;border-radius:50%;background:#fff;border:3px solid #9ba2aa}
    .event.done:before{border-color:var(--green);background:var(--green)}.event.current:before{border-color:#d98b1c;background:#fff}.event b{display:block;font-size:.9rem}.event span{display:block;color:#8b929a;font-size:.79rem;margin-top:2px}
    .follow-box{background:#fff8e9;border:1px solid #f0ddba;border-radius:11px;padding:12px 13px}.follow-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:8px}.follow-grid small{display:block;color:#98733c}.follow-grid b{font-size:.9rem}
    .checklist{display:grid;gap:9px}.check{display:flex;align-items:center;gap:10px;color:#4d555d;font-size:.9rem}.check i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.72rem;background:#e6f5eb;color:#277049}.check.pending i{background:#f1f2f4;color:#949aa1}
    .note-history{display:grid;gap:8px}.note{border-left:3px solid #cfd8d2;padding:3px 0 3px 11px}.note b{font-size:.84rem}.note p{font-size:.86rem;color:#626a72;margin:3px 0}
    .modal-wrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:22px;background:rgba(20,26,32,.33);opacity:0;pointer-events:none;transition:.2s}
    .modal-wrap.open{opacity:1;pointer-events:auto}
    .modal{width:min(760px,96vw);max-height:92vh;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.2);overflow:hidden;display:flex;flex-direction:column;transform:translateY(8px);transition:.2s}
    .modal-wrap.open .modal{transform:none}.modal-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.modal-head h2{margin:0;font-size:1.25rem}.modal>form{display:flex;flex:1;min-height:0;flex-direction:column;overflow:hidden}.modal>.modal-body{flex:1}.modal-body{padding:20px 22px;overflow-y:auto;min-height:0;overscroll-behavior:contain}.modal-foot{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:9px;flex:0 0 auto}
    .form-section{margin-bottom:22px}.form-section h3{font-size:.95rem;margin:0 0 12px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-row{display:grid;gap:6px}.form-row.full{grid-column:1/-1}.form-row label{font-size:.82rem;color:#687079;font-weight:650}.form-row input,.form-row select,.form-row textarea{border:1px solid var(--line);border-radius:9px;padding:10px 11px;color:#333b43;background:white;min-width:0}.form-row textarea{min-height:80px;resize:vertical}
    .product-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(80px,.4fr) auto;gap:8px;margin-bottom:12px;align-items:start}.product-entry{display:grid;gap:7px;min-width:0}.product-select{min-height:42px;width:100%;border:1px solid var(--line);border-radius:9px;background:#fff;padding:8px 10px}.config-fields{display:flex;gap:7px;flex-wrap:wrap}.config-fields label{display:grid;gap:3px;font-size:.75rem;color:#687079}.config-fields select{min-height:39px;border:1px solid var(--line);border-radius:9px;background:#fff;padding:7px 9px;min-width:125px}.qty-input{min-height:42px;width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 10px}.remove-line{border:1px solid var(--line);background:#fff;border-radius:8px;color:#a04b4b;padding:0 11px;min-height:42px}.add-line{border:0;background:none;color:var(--green);font-weight:700;padding:7px 0}
    .catalog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.catalog-toolbar .field{flex:1}.catalog-add{display:none;padding:14px;margin-bottom:14px;border:1px solid #dce8e0;background:#f7fbf8;border-radius:12px}.catalog-add.open{display:block}.catalog-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}.catalog-row{display:grid;grid-template-columns:minmax(220px,1.5fr) minmax(100px,.5fr) 90px 90px;gap:12px;align-items:center;padding:11px 13px;border-bottom:1px solid #eef0f2;font-size:.86rem}.catalog-row:last-child{border-bottom:0}.catalog-row.head{background:#fafbfc;color:#7c838c;font-weight:650;font-size:.8rem}.catalog-product{font-weight:650}.catalog-count{color:#818892;font-size:.84rem;white-space:nowrap}
    .modal-foot{position:sticky;bottom:0;background:#fff;z-index:2}
    .toast{position:fixed;right:24px;bottom:24px;z-index:90;background:#25342c;color:#fff;padding:12px 16px;border-radius:11px;box-shadow:0 8px 25px rgba(0,0,0,.18);transform:translateY(20px);opacity:0;transition:.22s;pointer-events:none}.toast.show{transform:none;opacity:1}
    .empty{padding:52px;text-align:center;color:#8b929a;display:none}
    @media(max-width:1320px){.filters{grid-template-columns:minmax(220px,1.4fr) 1fr auto}}
    @media(max-width:900px){
      .sidebar{display:none}.main{margin-left:0}.topbar{height:auto;padding:10px 15px}.page{padding:8px 14px 35px}.page-head{align-items:flex-start}.head-actions{align-items:flex-end;flex-direction:column}.filters{grid-template-columns:1fr 1fr}.filters .field:first-child{grid-column:1/-1}
    }
    @media(max-width:560px){
      .page-head{display:flex}.primary{width:auto}.filters{grid-template-columns:1fr 1fr}.summary-band,.form-grid,.follow-grid{grid-template-columns:1fr}.product-row{grid-template-columns:minmax(0,1fr) 76px 42px}.expanded-content{grid-template-columns:1fr}.expanded-content .row-actions{justify-content:flex-end}.drawer-body{padding:17px}.modal-body{padding:17px}.catalog-row{grid-template-columns:1fr 90px 80px}.catalog-row>*:nth-child(4){display:none}
      .table-scroll{overflow:visible}table{min-width:0}thead{display:none}tbody tr:not(.expanded-order){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:12px 14px;border-bottom:1px solid var(--line)}tbody tr:not(.expanded-order) td{display:block;padding:0;border:0}tbody tr:not(.expanded-order) td:first-child{grid-column:1}tbody tr:not(.expanded-order) td:nth-child(2),tbody tr:not(.expanded-order) td:nth-child(3),tbody tr:not(.expanded-order) td:nth-child(4){grid-column:1}tbody tr:not(.expanded-order) td:last-child{grid-column:2;grid-row:1/span 4;align-self:start}.expanded-order{display:block}.expanded-order[hidden]{display:none}.expanded-order td{display:block;width:100%;padding:8px 14px 15px}.order-updated{display:inline}.lead-time{display:block}.lead-time span{margin-left:5px}
    }
    .stats[hidden]{display:none}