:root{--bg:#F6F4EE;--surface:#FCFAF6;--line:#E5DFD5;--sand:#EDE9DF;--ink:#222222;--muted:#6E6961;--brass:#BFA15F;--brass-deep:#7A6429;--error:#8F3328;--ok:#3F5A3C;--serif:"Cormorant Garamond","Noto Serif TC",serif;--zh-serif:"Noto Serif TC",serif;--sans:"Noto Sans TC",sans-serif;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.8;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled,select:disabled{cursor:not-allowed}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.container{width:calc(100% - 80px);max-width:1280px;margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:20px;z-index:40;background:var(--ink);color:var(--surface);padding:12px}
.skip-link:focus{top:12px}

/* 頂部提示 */
.topbar{min-height:34px;padding:6px 24px;background:var(--ink);color:var(--surface);display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;letter-spacing:.06em;line-height:1.6}
.topbar.is-warning{background:var(--error)}
.header{background:rgba(246,244,238,.97);border-bottom:1px solid var(--line)}
.header-inner{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-family:var(--serif);font-size:22px;line-height:1.2;letter-spacing:.09em;font-weight:500;text-decoration:none}
.wordmark>span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.2em;margin-top:6px;color:var(--muted)}
.header-link{font-size:12px;letter-spacing:.06em;min-height:44px;display:inline-flex;align-items:center;text-underline-offset:5px}

/* 標題區 */
.intro{padding-block:64px 8px}
.intro h1{font-family:var(--zh-serif);font-weight:500;font-size:38px;line-height:1.5;letter-spacing:.04em}
.intro p{margin-top:14px;max-width:34em;font-size:13px;line-height:2.1;color:var(--muted);letter-spacing:.03em}

/* 訂單路徑：整頁唯一的視覺重點 */
.route{padding-block:40px 56px}
.route h2{font-family:var(--zh-serif);font-weight:500;font-size:18px;letter-spacing:.06em;margin-bottom:22px}
.route-line{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;counter-reset:none}
.node{position:relative;padding:22px 22px 24px;border:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;gap:8px;min-width:0}
.node+.node{margin-left:-1px}
.node:not(:last-child)::after{content:"";position:absolute;z-index:2;top:50%;right:-5px;width:9px;height:9px;transform:translateY(-50%) rotate(45deg);background:var(--bg);border-top:1px solid var(--brass);border-right:1px solid var(--brass)}
.node-name{font-family:var(--zh-serif);font-size:17px;line-height:1.5;letter-spacing:.04em}
.node-note{font-size:12px;line-height:1.9;color:var(--muted)}
.node-live{border-color:var(--ink);background:#fff9ec;z-index:1;box-shadow:inset 0 3px 0 var(--brass)}
.node-next{border-style:dashed;background:transparent}
.node-next .node-name{color:var(--muted)}
.chip{align-self:flex-start;margin-top:4px;padding:2px 10px;border:1px solid var(--line);font-size:11px;letter-spacing:.06em;line-height:1.7;background:var(--surface)}
.chip.is-ok{border-color:var(--ok);color:var(--ok)}
.chip.is-demo{border-color:var(--brass);color:var(--brass-deep)}
.chip.is-bad{border-color:var(--error);color:var(--error)}
.chip.is-muted{color:var(--muted)}

/* 工作區 */
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;padding-bottom:96px}
.ledger-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--ink)}
.ledger-head h2,.drive h2{font-family:var(--zh-serif);font-weight:500;font-size:24px;letter-spacing:.05em;line-height:1.4}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{min-height:44px;padding:8px 18px;border:1px solid var(--ink);background:transparent;font-size:12px;letter-spacing:.06em;transition:background-color .2s var(--ease)}
.btn.primary{background:var(--ink);color:var(--surface)}
.btn.quiet{border-color:var(--line)}
.btn:disabled{background:var(--line);border-color:var(--line);color:var(--muted)}
.btn.is-confirm{background:var(--error);border-color:var(--error);color:#fff}
.filters{display:flex;gap:4px;flex-wrap:wrap;padding-block:14px 6px}
.filter{min-height:44px;padding:6px 14px;border:0;border-bottom:1px solid transparent;background:none;font-size:12px;color:var(--muted)}
.filter[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
.filter b{font-family:var(--serif);font-size:15px;font-weight:500;margin-left:6px}
.notice{padding:14px 16px;border-left:2px solid var(--brass);background:var(--surface);font-size:12px;line-height:1.9;margin-block:14px}
.notice.is-bad{border-left-color:var(--error);color:var(--error)}
.key-panel{padding:24px;border:1px solid var(--line);background:var(--surface);margin-block:16px}
.key-panel h3{font-family:var(--zh-serif);font-weight:500;font-size:17px;margin-bottom:6px}
.key-panel p{font-size:12px;color:var(--muted);line-height:1.9}
.key-form{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.key-form input{flex:1 1 220px;min-height:48px;border:1px solid var(--muted);background:var(--bg);padding:10px 12px;font-size:16px;border-radius:0}
.key-error{margin-top:10px;font-size:12px;color:var(--error)}
.key-error:empty{display:none}

.table-wrap{overflow-x:auto}
.orders{width:100%;border-collapse:collapse;font-size:12px}
.orders th{padding:12px 12px 10px;text-align:left;font-weight:500;font-size:11px;color:var(--muted);letter-spacing:.06em;border-bottom:1px solid var(--line);white-space:nowrap}
.orders td{padding:16px 12px;vertical-align:top;border-bottom:1px solid var(--line);line-height:1.7}
.orders tr.is-saving{opacity:.55}
.cell-time{white-space:nowrap}
.cell-time small,.cell-person small,.cell-total small{display:block;font-size:11px;color:var(--muted)}
.cell-person strong{font-weight:500;font-size:13px}
.cell-items{min-width:180px;color:var(--ink)}
.cell-total{white-space:nowrap}
.cell-total .money{font-family:var(--serif);font-size:20px;line-height:1.3;font-weight:500}
.mismatch{color:var(--error)!important}
.status-select{min-height:40px;padding:4px 28px 4px 10px;border:1px solid var(--muted);background:var(--surface);border-radius:0;font-size:12px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.status-select[data-status=paid]{background-color:var(--ink);color:var(--surface);background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%);border-color:var(--ink)}
.status-select[data-status=pending]{border-color:var(--brass);color:var(--brass-deep)}
.status-select[data-status=shipped]{background-color:var(--sand);border-color:var(--ink)}
.status-select[data-status=cancelled]{color:var(--muted);text-decoration:line-through;border-style:dashed}
.link-btn{min-height:44px;padding:0 4px;border:0;background:none;font-size:12px;text-decoration:underline;text-underline-offset:5px}
.empty{padding:56px 16px;text-align:center;color:var(--muted);font-size:13px;line-height:2}
.empty .btn{margin-top:14px}

/* Drive 檔案樹 */
.drive{position:sticky;top:20px;padding:28px;border:1px solid var(--line);background:var(--surface)}
.drive-sub{margin-top:8px;font-size:12px;line-height:1.9;color:var(--muted)}
.tree{margin-top:20px;font-size:12px;line-height:1.7}
.tree ul{margin-left:9px;padding-left:14px;border-left:1px solid var(--line)}
.tree li{padding-block:3px}
.tree .dir{font-family:var(--zh-serif);font-size:13px;letter-spacing:.03em}
.tree .file{color:var(--muted);word-break:break-all}
.tree .file.is-hot{color:var(--ink)}
.tree .sheet{display:block;margin-top:6px;padding:8px 10px;border:1px solid var(--brass);background:#fff9ec;font-family:var(--zh-serif);font-size:13px}
.tree .sheet small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted)}
.facts{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:12px}
.facts dt{color:var(--muted)}
.facts dd{word-break:break-all}
.facts .warn{color:var(--error)}

/* 訂單詳情 */
dialog{border:1px solid var(--line);padding:36px;width:min(600px,calc(100% - 32px));max-height:88vh;overflow:auto;background:var(--surface);color:var(--ink);box-shadow:0 24px 80px #0003}
dialog::backdrop{background:rgba(34,34,34,.4)}
.dialog-close{position:absolute;top:6px;right:6px;width:44px;height:44px;font-size:24px;background:none;border:0}
dialog h2{font-family:var(--zh-serif);font-weight:500;font-size:20px;line-height:1.5;letter-spacing:.02em;padding-right:36px;overflow-wrap:anywhere}
.d-sub{font-size:12px;color:var(--muted);margin-top:2px}
.d-block{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.d-block h3{font-family:var(--zh-serif);font-weight:500;font-size:14px;letter-spacing:.06em;margin-bottom:8px}
.d-row{display:flex;justify-content:space-between;gap:16px;font-size:12px;padding-block:3px}
.d-row span:first-child{color:var(--muted);flex:none}
.d-row span:last-child{text-align:right;word-break:break-all}
.d-total{font-family:var(--serif);font-size:24px}
.d-path{font-size:12px;word-break:break-all;color:var(--muted)}
.d-history li{font-size:12px;color:var(--muted)}
.d-note{font-size:12px;white-space:pre-wrap;word-break:break-word}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:50;background:var(--ink);color:var(--surface);padding:12px 22px;font-size:12px;max-width:calc(100% - 40px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media(hover:hover){.btn.primary:hover{background:#3B3832}.btn.quiet:hover,.btn:not(.primary):not(.quiet):not(.is-confirm):hover{background:var(--sand)}.filter:hover{color:var(--ink)}}

@media(max-width:1100px){
  .workspace{grid-template-columns:1fr;gap:40px}
  .drive{position:static}
}
@media(max-width:860px){
  .container{width:calc(100% - 40px)}
  .intro{padding-block:40px 0}
  .intro h1{font-size:30px}
  .route{padding-block:28px 40px}
  .route-line{grid-template-columns:1fr}
  .node+.node{margin-left:0;margin-top:-1px}
  .node:not(:last-child)::after{top:auto;right:auto;bottom:-5px;left:28px;transform:rotate(135deg)}
  /* 訂單列表改成卡片 */
  .orders thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .orders,.orders tbody,.orders tr,.orders td{display:block;width:100%}
  .orders tr{padding:16px 0;border-bottom:1px solid var(--line)}
  .orders td{padding:4px 0;border:0}
  .orders td[data-label]::before{content:attr(data-label);display:block;font-size:10px;color:var(--muted);letter-spacing:.06em}
  .cell-items{min-width:0}
  .cell-actions{padding-top:8px!important}
  .status-select{width:100%}
  .drive{padding:22px}
  dialog{padding:28px 20px}
  dialog h2{font-size:17px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}