:root { color-scheme:light; font-family:Inter,"Microsoft JhengHei","Noto Sans TC",system-ui,sans-serif; color:#171a21; background:#f7f8fa; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; font-size:20px; }
button,input,textarea,select { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:220px 1fr; grid-template-rows:66px 1fr; }
.brand { grid-column:1; grid-row:1; display:flex; align-items:center; gap:10px; padding:0 22px; border-right:1px solid #e3e6ea; border-bottom:1px solid #e3e6ea; background:#fff; font-size:21px; }
.brand-mark,.login-mark { display:grid; place-items:center; background:#222a40; color:#fff; font-weight:800; }
.brand-mark { width:27px; height:27px; border-radius:7px; font-size:17px; }
.topbar { grid-column:2; display:flex; justify-content:flex-end; align-items:center; gap:12px; padding:0 22px; border-bottom:1px solid #e3e6ea; background:#fff; }
.scanner-status { display:flex; align-items:center; gap:8px; color:#626a77; font-size:17px; }
.scanner-status i { width:8px; height:8px; border-radius:50%; background:#28b46b; }
.user-name { color:#626a77; font-size:17px; }
.sidebar { grid-column:1; grid-row:2; padding:20px 12px; border-right:1px solid #e3e6ea; background:#fff; }
.sidebar nav { display:grid; gap:6px; }
.nav-label { margin:7px 12px 3px; color:#9aa1ad; font-size:15px; font-weight:800; letter-spacing:.08em; }
.sidebar button { display:flex; align-items:center; gap:11px; width:100%; border:0; border-radius:9px; padding:10px 12px; background:transparent; color:#626a77; text-align:left; font-weight:650; }
.sidebar button.active { background:#222a40; color:#fff; }
.sidebar button span { width:19px; text-align:center; font-size:20px; }
.content { grid-column:2; grid-row:2; padding:28px 30px 40px; overflow:auto; }
.page { display:none; max-width:1180px; margin:0 auto; }
.page.active,.work-view.active { display:block; }
.page-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:26px; }
h1 { margin:0 0 7px; font-size:35px; letter-spacing:-.02em; }
h2 { margin:0; font-size:22px; }
p { margin:0; color:#737985; line-height:1.55; }
.button { border-radius:8px; padding:9px 14px; font-weight:700; }
.button.primary { border:1px solid #222a40; background:#222a40; color:#fff; }
.button.secondary { border:1px solid #d6dae0; background:#fff; color:#2f3540; }
.button.danger-button { border:1px solid #d92d20; background:#fff; color:#b42318; }
.button.full { width:100%; margin-top:22px; }
.entry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin-bottom:20px; }
.entry-card { min-height:134px; padding:18px; border:1px solid #dfe3e8; border-radius:11px; background:#fff; color:inherit; text-align:left; }
.entry-card:hover { border-color:#8991a0; }
.entry-card b,.entry-card small { display:block; }
.entry-card small { color:#7a818d; margin-top:4px; }
.entry-icon { width:36px; height:36px; display:grid; place-items:center; margin-bottom:17px; border-radius:8px; background:#eef0f4; }
.panel { overflow:hidden; border:1px solid #dfe3e8; border-radius:12px; background:#fff; }
.panel-heading { min-height:59px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid #e4e7eb; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:17px; }
th { padding:11px 14px; background:#f5f6f8; text-align:left; white-space:nowrap; }
th.sortable-header { cursor:pointer; user-select:none; }
th.sortable-header::after { content:' ↕'; color:#9aa1ad; font-size:14px; }
th.sortable-header[data-sort-direction='asc']::after { content:' ↑'; color:#222a40; }
th.sortable-header[data-sort-direction='desc']::after { content:' ↓'; color:#222a40; }
th.sortable-header:focus-visible { outline:2px solid #5c6680; outline-offset:-2px; }
td { padding:13px 14px; border-top:1px solid #e7e9ed; }
.status-tag { display:inline-block; padding:3px 7px; border-radius:5px; background:#dcf8e7; color:#169454; font-size:15px; font-weight:750; }
.status-tag.disabled-tag { background:#eef0f4; color:#626a77; }
.empty { color:#9299a4; text-align:center; }
.login-wrap { min-height:560px; display:grid; place-items:center; }
.login-card { width:min(100%,430px); padding:30px; border:1px solid #dfe3e8; border-radius:13px; background:#fff; }
.login-mark { width:42px; height:42px; margin-bottom:20px; border-radius:10px; }
.captcha-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:11px; }
.captcha-image-button { width:220px; max-width:100%; overflow:hidden; border:1px solid #d5d9df; border-radius:8px; padding:0; background:#f8fafc; color:#626a77; text-align:left; }
.captcha-image-button img { display:block; width:220px; max-width:100%; height:72px; object-fit:contain; background:#f7f4e8; }
.captcha-image-button span { display:block; padding:6px 9px; font-size:14px; font-weight:600; text-align:center; }
label { display:block; margin-top:18px; color:#3e4550; font-size:17px; font-weight:700; }
input,textarea,select { width:100%; margin-top:7px; padding:11px 12px; border:1px solid #d5d9df; border-radius:8px; outline:none; background:#fff; color:#171a21; }
input:focus,textarea:focus,select:focus { border-color:#5c6680; box-shadow:0 0 0 3px rgba(61,72,99,.1); }
textarea { min-height:94px; resize:vertical; }
.login-foot { display:flex; justify-content:space-between; gap:12px; margin-top:15px; color:#858c98; font-size:16px; }
.tabs { display:flex; gap:9px; margin-bottom:18px; flex-wrap:wrap; }
.tabs button { border:1px solid #d7dbe1; border-radius:8px; padding:9px 14px; background:#fff; font-weight:700; }
.tabs button.active { border-color:#222a40; background:#222a40; color:#fff; }
.work-view { display:none; }
.scan-layout { display:grid; grid-template-columns:1.15fr .85fr; }
.scan-zone { min-height:370px; display:grid; place-items:center; padding:28px; border-right:1px solid #e4e7eb; background:#fafbfc; text-align:center; outline:none; }
.scan-zone:focus-within { box-shadow:inset 0 0 0 2px #69728a; }
.scan-glyph { width:94px; height:94px; display:grid; place-items:center; margin:0 auto 18px; border:2px dashed #939ba8; border-radius:13px; font-size:42px; }
.scanner-input-label { max-width:330px; margin:20px auto 0; text-align:left; }
.camera-actions { display:grid; justify-items:center; gap:10px; margin-top:22px; }
.camera-actions small { max-width:440px; color:#737985; line-height:1.55; }
.camera-button { min-width:220px; min-height:52px; font-size:20px; }
.platform-android-app #hardware-scanner-actions,.platform-mobile-web #hardware-scanner-actions { display:none; }
.platform-android-app .scan-zone,.platform-mobile-web .scan-zone { background:#f6f8fc; }
.order-form { padding:20px; }
.product-preview { margin:0 0 12px; padding:13px; border:1px solid #dfe3e8; border-radius:8px; background:#f7f8fa; }
.product-preview.empty { color:#9299a4; }
.product-preview b,.product-preview small { display:block; }
.product-preview small { margin-top:4px; color:#737985; }
.form-actions,.query-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:17px; }
.query-actions { align-items:center; margin:0; }
.query-actions input { width:auto; margin:0; }
.orders-query-heading > div { min-width:0; }
.history-filter { display:grid; grid-template-columns:170px 170px auto 1fr; align-items:end; gap:11px; padding:14px 18px; border-bottom:1px solid #e4e7eb; }
.history-filter label { margin:0; }
.history-filter input { margin-top:6px; padding:9px 10px; }
.history-filter > span { align-self:center; color:#737985; font-size:16px; }
#history-order-message,#admin-order-message { margin:12px 18px; }
.narrow-panel { max-width:700px; }
.product-manager { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr); gap:18px; align-items:start; }
.vendor-dialog { width:min(980px,100%); }
.vendor-import-dialog { width:min(620px,100%); }
.vendor-form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px 18px; padding:20px; }
.vendor-form-grid label { margin:0; }
.vendor-form-grid .message { grid-column:1 / -1; margin:0; }
.vendor-form-actions { grid-column:1 / -1; margin-top:0; }
.input-help { margin:8px 0 0; color:#737985; font-size:16px; }
.form-actions.compact-actions { justify-content:flex-start; margin-top:9px; }
.products-heading > div { min-width:0; }
.product-search { width:min(360px,100%); margin:7px 0 0; padding:8px 10px; font-size:16px; }
.search-with-select { display:flex; gap:8px; }
.search-with-select input,.search-with-select select { margin-top:7px; }
.search-with-select input { min-width:0; flex:1; }
.search-with-select select { width:auto; min-width:132px; }
.product-search-row { width:min(500px,100%); }
.product-search-row .product-search { width:auto; margin-top:7px; }
.product-pagination { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); }
.product-pagination div { display:flex; gap:8px; }
.row-actions { white-space:nowrap; }
.text-button { border:0; padding:4px 7px; border-radius:5px; background:#eef0f4; color:#2f3540; font-weight:700; }
.text-button + .text-button { margin-left:6px; }
.text-button.danger { background:#fff0f0; color:#b42318; }
.schedule-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.schedule-history { margin-top:18px; }
.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:0; padding:12px; border:1px solid #dfe3e8; border-radius:9px; }
.toggle-row span,.toggle-row b,.toggle-row small { display:block; }
.toggle-row small { margin-top:4px; color:#737985; font-weight:400; }
.toggle-row input { width:20px; height:20px; margin:0; accent-color:#222a40; }
.schedule-actions { flex-wrap:wrap; }
.download-link { color:inherit; text-decoration:none; }
.heading-actions { display:flex; align-items:center; gap:9px; }
.heading-actions input { width:155px; margin:0; }
.order-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; margin-bottom:18px; }
.stat-card { padding:17px 18px; border:1px solid #dfe3e8; border-radius:11px; background:#fff; }
.stat-card span,.stat-card small { display:block; color:#7a818d; }
.stat-card span { font-size:16px; font-weight:750; }
.stat-card strong { display:block; margin:7px 0 3px; color:#222a40; font-size:31px; line-height:1; }
.stat-card small { font-size:15px; }
.filter-bar { display:grid; grid-template-columns:145px 145px minmax(220px,1fr) 140px auto; align-items:end; gap:11px; padding:16px 18px; border-bottom:1px solid #e4e7eb; }
.filter-bar label { margin:0; }
.filter-bar input,.filter-bar select { margin-top:6px; padding:9px 10px; }
.filter-actions { display:flex; gap:8px; }
.member-link { display:block; border:0; padding:0; background:transparent; color:#222a40; text-align:left; }
.member-link b,.member-link small { display:block; }
.member-link small { margin-top:3px; color:#858c98; font-size:15px; font-weight:500; }
.modal-backdrop { position:fixed; inset:0; z-index:40; display:grid; place-items:center; padding:22px; background:rgba(23,26,33,.45); }
.detail-modal { width:min(1100px,100%); max-height:calc(100vh - 44px); overflow:auto; border-radius:14px; background:#fff; box-shadow:0 24px 70px rgba(20,27,45,.28); }
.detail-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid #e4e7eb; background:#fff; }
.detail-eyebrow { display:block; margin-bottom:4px; color:#858c98; font-size:15px; font-weight:800; letter-spacing:.08em; }
.icon-button { width:36px; height:36px; border:1px solid #d6dae0; border-radius:9px; background:#fff; color:#626a77; font-size:28px; line-height:1; }
.detail-meta { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:18px 20px; background:#f8f9fb; }
.detail-meta div { min-width:0; padding:13px; border:1px solid #e3e6ea; border-radius:9px; background:#fff; }
.detail-meta span,.detail-meta b,.detail-meta small { display:block; overflow:hidden; text-overflow:ellipsis; }
.detail-meta span { margin-bottom:6px; color:#858c98; font-size:15px; font-weight:750; }
.detail-meta b { color:#222a40; font-size:18px; }
.detail-meta small { margin-top:4px; color:#737985; font-size:15px; white-space:nowrap; }
.detail-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 20px; border-top:1px solid #e7e9ed; border-bottom:1px solid #e7e9ed; }
.detail-toolbar > div { display:flex; gap:8px; }
.select-all-row { display:flex; align-items:center; gap:8px; margin:0; }
.select-all-row input,.detail-item-check { width:17px; height:17px; margin:0; accent-color:#222a40; }
.detail-table { max-height:48vh; }
.detail-table th { position:sticky; top:0; z-index:1; }
.detail-table .detail-item-check { display:block; }
.detail-quantity { width:86px; min-width:74px; margin:0; padding:7px 8px; }
.detail-note { min-width:150px; margin:0; padding:7px 8px; }
.original-quantity { display:block; margin-top:3px; color:#a15c00; font-size:14px; }
.detail-modal > .message { margin:12px 20px 0; }
.camera-scanner-dialog { width:min(720px,100%); overflow:hidden; }
.camera-preview { position:relative; min-height:320px; overflow:hidden; background:#111827; }
.camera-preview video { display:block; width:100%; height:min(62vh,520px); object-fit:cover; }
.camera-guide { position:absolute; inset:50% auto auto 50%; width:min(78%,520px); height:min(38%,210px); border:4px solid rgba(255,255,255,.92); border-radius:16px; box-shadow:0 0 0 999px rgba(0,0,0,.22); transform:translate(-50%,-50%); }
.camera-guide::before,.camera-guide::after { position:absolute; content:''; left:12%; right:12%; height:2px; background:rgba(255,255,255,.65); }
.camera-guide::before { top:38%; }
.camera-guide::after { bottom:38%; }
.camera-scanner-status { padding:14px 20px 0; text-align:center; }
.camera-scanner-actions { display:flex; justify-content:center; padding:14px 20px 20px; }
.message { margin-top:12px; padding:10px 12px; border-radius:7px; font-size:17px; }
.message.error { background:#fff0f0; color:#b42318; }
.message.success { background:#eaf8ef; color:#137a45; }
.toast { position:fixed; right:20px; bottom:20px; z-index:20; max-width:360px; padding:12px 16px; border-radius:9px; background:#222a40; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.2); }
@media (max-width:760px) {
  .app-shell { grid-template-columns:1fr; grid-template-rows:58px auto 1fr; }
  .brand { grid-column:1; grid-row:1; border-right:0; }
  .topbar { grid-column:1; grid-row:1; padding-right:12px; }
  .topbar .scanner-status,.user-name { display:none; }
  .sidebar { grid-column:1; grid-row:2; padding:8px; border-right:0; border-bottom:1px solid #e3e6ea; }
  .sidebar nav { grid-template-columns:repeat(3,1fr); }
  .nav-label { display:none; }
  .sidebar button { justify-content:center; padding:9px 5px; font-size:16px; }
  .content { grid-column:1; grid-row:3; padding:20px 14px 30px; }
  .entry-grid,.scan-layout,.product-manager,.schedule-grid,.order-stats,.detail-meta,.vendor-form-grid { grid-template-columns:1fr; }
  .vendor-form-grid .message,.vendor-form-actions { grid-column:1; }
  .admin-order-heading,.detail-toolbar { align-items:stretch; flex-direction:column; }
  .heading-actions { align-items:stretch; }
  .heading-actions input { flex:1; width:auto; }
  .filter-bar { grid-template-columns:1fr 1fr; }
  .history-filter { grid-template-columns:1fr 1fr; }
  .history-filter > span { grid-column:1 / -1; }
  .filter-search,.filter-actions { grid-column:1 / -1; }
  .search-with-select { flex-direction:column; }
  .search-with-select select { width:100%; }
  .filter-actions .button { flex:1; }
  .modal-backdrop { padding:8px; }
  .detail-modal { max-height:calc(100vh - 16px); }
  .camera-scanner-dialog { max-height:calc(100dvh - 16px); }
  .camera-preview { min-height:280px; }
  .camera-preview video { height:min(64dvh,520px); }
  .scan-zone { min-height:260px; border-right:0; border-bottom:1px solid #e4e7eb; }
  .page-heading { align-items:center; }
}

button:disabled { opacity:.5; cursor:not-allowed; }