:root {
  color-scheme: light;
  --paper: #f7f7f1;
  --panel: #fff;
  --ink: #1a2532;
  --muted: #586572;
  --line: #d9ddd8;
  --blue: #214db9;
  --blue-d: #17398a;
  --tint: #eaf0ff;
  --green: #175741;
  --warm: #a34b14;
  --red: #a53832
}
* {
  box-sizing: border-box
}
html {
  min-height: 100%
}
body {
  margin: 0;
  font: 15px/1.6 "Team Sans",-apple-system,BlinkMacSystemFont,"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
  background: var(--paper);
  color: var(--ink)
}
h1,h2,h3,p {
  margin: 0
}
a {
  color: var(--blue);
  text-underline-offset: .18em
}
button,input,select,textarea {
  font: inherit;
  color: inherit
}
button {
  cursor: pointer
}
button:disabled {
  cursor: wait;
  opacity: .55
}
input,select,textarea {
  width: 100%;
  min-width: 0;
  background: #fff;
  border: 1px solid #bfc8cc;
  border-radius: 7px;
  padding: .6rem .75rem
}
input:focus,textarea:focus,select:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px
}
input[type=checkbox] {
  width: auto;
  accent-color: var(--blue)
}
input[type=color] {
  padding: 2px;
  height: 42px
}
input[type=file] {
  padding: .48rem;
  font-size: .85rem
}
textarea {
  min-height: 92px;
  resize: vertical
}
.skip {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 20;
  background: #fff;
  padding: 12px
}
.skip:focus {
  top: 12px
}
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px
}
.boot {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: .4rem;
  min-height: 100vh
}
.brand-mark {
  display: block;
  flex: none;
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  text-decoration: none
}
.brand strong {
  display: block;
  font-size: 1.32rem;
  letter-spacing: .05em;
  line-height: 1.25
}
.brand small,.section-id,.eyebrow,.num,.mono {
  font-family: "Arial",sans-serif
}
.brand small {
  display: block;
  letter-spacing: .13em;
  font-weight: 700;
  font-size: .66rem;
  color: var(--muted)
}
.auth-shell {
  max-width: 1080px;
  padding: clamp(22px,4vw,58px);
  margin: auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column
}
.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px
}
.auth-grid {
  display: grid;
  grid-template-columns: 1fr minmax(290px,365px);
  gap: 9%;
  align-items: center;
  flex: 1;
  padding: 65px 0
}
.auth-copy {
  border-top: 3px solid var(--ink);
  padding-top: 22px
}
.eyebrow,.section-id {
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue)
}
.auth-copy h1 {
  font-size: clamp(2.6rem,6vw,5.3rem);
  line-height: 1.12;
  letter-spacing: -.07em;
  margin: .32em 0
}
.auth-copy p,.subtle,.help {
  color: var(--muted)
}
.auth-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(22px,3vw,34px);
  box-shadow: 0 8px 35px #202d4120
}
.auth-card h2 {
  font-size: 1.5rem
}
.auth-card p {
  font-size: .9rem;
  margin: 7px 0 22px
}
.auth-card label,.form-grid label,.form-grid .field {
  display: grid;
  gap: 6px;
  font-weight: 650;
  font-size: .9rem;
  align-content: start
}
.auth-card label+label {
  margin-top: 15px
}
.auth-card .btn {
  width: 100%;
  margin-top: 20px
}
.auth-foot {
  border-top: 1px solid var(--line);
  padding: 13px 0;
  color: var(--muted);
  font-size: .8rem
}
.btn,.icon-btn,.nav-btn,.link-btn {
  border: 0;
  background: transparent
}
.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-height: 39px;
  padding: 7px 15px;
  border: 1px solid #c8cfce;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: .91rem;
  font-weight: 680;
  text-decoration: none
}
.btn:hover {
  background: #f2f4f5
}
.btn.primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}
.btn.primary:hover {
  background: var(--blue-d)
}
.btn.danger,.link-btn.danger {
  color: var(--red)
}
.link-btn {
  font-weight: 650;
  padding: 5px 6px;
  color: var(--blue);
  text-underline-offset: 3px
}
.link-btn:hover {
  text-decoration: underline
}
.icon-btn {
  font: 500 25px/1 Arial,sans-serif;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--muted)
}
.icon-btn:hover {
  background: #eef0ef
}
.shell {
  display: grid;
  grid-template-columns: 220px minmax(0,1fr);
  min-height: 100svh
}
.side {
  background: #f0f1eb;
  border-right: 1px solid var(--line);
  padding: 26px 16px;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: auto;
  display: flex;
  flex-direction: column
}
.side .brand {
  padding: 2px 10px 25px
}
.side nav {
  display: grid;
  gap: 3px
}
.nav-label {
  display: block;
  font-size: .67rem;
  font-weight: 750;
  color: var(--muted);
  letter-spacing: .12em;
  margin: 15px 10px 4px
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  font-weight: 620;
  color: #4a5562;
  border-radius: 7px;
  padding: 10px 11px
}
.nav-btn svg {
  width: 18px;
  height: 18px;
  flex: none
}
.nav-btn:hover {
  background: #e4e7e1
}
.nav-btn.active {
  background: var(--ink);
  color: white
}
.side-bottom {
  margin-top: auto;
  padding: 27px 6px 0;
  display: grid;
  gap: 5px
}
.side-bottom a,.side-bottom button {
  display: block;
  padding: 8px;
  text-align: left;
  font-size: .87rem
}
.side-bottom small {
  color: var(--muted);
  padding: 7px
}
.stage {
  min-width: 0
}
.mobilebar {
  display: none
}
.main {
  padding: clamp(22px,4vw,60px);
  max-width: 1500px;
  margin: auto
}
.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 20px;
  margin-bottom: 24px
}
.page-head h1 {
  font-size: clamp(2rem,3.5vw,3.25rem);
  letter-spacing: -.045em;
  line-height: 1.18;
  margin: .13em 0
}
.page-head p {
  color: var(--muted);
  font-size: .94rem
}
.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(145px,1fr));
  gap: 12px
}
.stat-card {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 20px;
  text-align: left;
  display: grid;
  position: relative;
  align-content: space-between;
  min-height: 125px
}
.stat-card:hover {
  border-color: var(--blue)
}
.stat-card span {
  font-size: .88rem;
  font-weight: 680
}
.stat-card strong {
  font-size: 2.4rem;
  line-height: 1.2;
  font-family: Arial,sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em
}
.stat-card b {
  position: absolute;
  right: 11px;
  bottom: 10px;
  color: var(--blue);
  font-weight: 400
}
.overview-cols {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 24px
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden
}
.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--line)
}
.panel-title h2,.settings h2 {
  font-size: 1.13rem
}
.overview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line)
}
.overview-row:last-child {
  border: 0
}
.overview-row strong,.item-name {
  display: block;
  font-weight: 730;
  word-break: break-word
}
.data-sub {
  font: 400 .78rem/1.5 inherit;
  color: var(--muted);
  display: block;
  font-size: .8rem
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 2px 9px;
  border-radius: 20px;
  background: #edf0f1;
  font-size: .76rem;
  font-weight: 700;
  color: #4c5962
}
.chip.on {
  background: #e4f2e9;
  color: var(--green)
}
.chip.wait {
  background: #fff2db;
  color: #754a12
}
.chip.off {
  background: #eceeef;
  color: #4b5760
}
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px
}
.toolbar input {
  max-width: 300px
}
.toolbar select {
  width: auto;
  max-width: 100%
}
.count {
  margin-left: auto;
  color: var(--muted);
  font-size: .82rem
}
.table-wrap {
  overflow-x: auto
}
table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: .89rem
}
th {
  font-size: .77rem;
  font-weight: 680;
  letter-spacing: .035em;
  color: var(--muted);
  background: #f6f8f7;
  white-space: nowrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line)
}
td {
  border-bottom: 1px solid #e8ebe7;
  padding: 12px 14px;
  vertical-align: middle
}
tr:last-child td {
  border-bottom: 0
}
.item-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 155px
}
.thumb {
  width: 45px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  background: #f2f0e9;
  flex: none
}
.thumb.empty {
  display: grid;
  place-items: center;
  font: 700 15px/1 Arial,sans-serif;
  color: var(--muted)
}
.row-actions {
  display: flex;
  justify-content: flex-end;
  white-space: nowrap;
  gap: 3px
}
.nowrap,.num {
  white-space: nowrap
}
.num {
  font-variant-numeric: tabular-nums
}
.empty-state {
  padding: 35px 20px;
  text-align: center;
  color: var(--muted);
  font-size: .95rem
}
.settings {
  display: grid;
  gap: 17px;
  max-width: 940px
}
.settings-card {
  border: 1px solid var(--line);
  background: var(--panel);
  padding: clamp(17px,2vw,28px);
  border-radius: 13px
}
.settings-card>p {
  font-size: .9rem;
  color: var(--muted);
  margin: 2px 0 18px
}
.switch-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 15px 0;
  cursor: pointer
}
.switch-row input {
  margin-top: .28em;
  flex: none;
  appearance: none;
  width: 37px;
  height: 22px;
  border: 1px solid #acb6b6;
  border-radius: 20px;
  position: relative;
  background: #c1c9c8;
  padding: 0;
  cursor: pointer
}
.switch-row input:checked {
  background: var(--blue);
  border-color: var(--blue)
}
.switch-row input:after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  background: white;
  width: 16px;
  height: 16px;
  border-radius: 50%
}
.switch-row input:checked:after {
  left: 17px
}
.switch-row input:disabled {
  cursor: not-allowed;
  opacity: .5
}
.switch-row small,.field-tip {
  display: block;
  font-weight: 450;
  color: var(--muted);
  font-size: .82rem
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 15px
}
.form-grid .full,.form-grid .wide {
  grid-column: 1/-1
}
.help {
  font-size: .83rem
}
.field-tip {
  margin-top: 3px
}
.inline-check {
  display: flex!important;
  align-items: center;
  flex-direction: row;
  gap: 7px
}
.inline-check input {
  margin: 0
}
.notice {
  border-left: 3px solid var(--blue);
  background: var(--tint);
  padding: 10px 13px;
  border-radius: 0 7px 7px 0;
  font-size: .86rem;
  margin: 13px 0;
  color: #243856
}
.form-err {
  color: var(--red);
  font-size: .88rem;
  display: block;
  margin-top: 8px
}
.settings-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  background: var(--paper);
  padding: 13px 0
}
.muted {
  color: var(--muted)
}
dialog {
  border: 1px solid var(--line);
  border-radius: 15px;
  color: var(--ink);
  background: white;
  width: min(680px,calc(100vw - 24px));
  padding: 0;
  max-height: calc(100dvh - 36px);
  box-shadow: 0 24px 100px #101a3550
}
dialog::backdrop {
  background: #16233075
}
#editor-form {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 40px)
}
.dlg-head,.dlg-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 22px;
  flex: none
}
.dlg-head {
  border-bottom: 1px solid var(--line)
}
.dlg-head small {
  color: var(--blue);
  font: bold .67rem/1 Arial,sans-serif;
  letter-spacing: .14em
}
.dlg-head h2 {
  font-size: 1.38rem
}
.dlg-foot {
  border-top: 1px solid var(--line);
  justify-content: flex-end;
  flex-wrap: wrap
}
.dlg-foot span {
  margin-right: auto;
  max-width: 100%;
  color: var(--red);
  font-size: .84rem
}
#dialog-content {
  padding: 21px 22px;
  overflow-y: auto
}
.details {
  display: grid;
  grid-template-columns: 95px minmax(0,1fr);
  gap: 6px 12px;
  font-size: .9rem;
  margin: 0 0 17px
}
.details dt {
  color: var(--muted)
}
.details dd {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line
}
.note-block {
  white-space: pre-wrap;
  overflow-wrap: anywhere
}
.line-list {
  border: 1px solid var(--line);
  border-radius: 9px;
  margin: 10px 0 16px;
  overflow: hidden
}
.line-row {
  padding: 10px 13px;
  border-top: 1px solid var(--line)
}
.line-row:first-child {
  border: 0
}
.line-row p {
  margin-top: 3px
}
.line-row small {
  color: var(--muted)
}
.proof {
  max-width: 130px;
  max-height: 120px;
  display: block;
  object-fit: contain
}
.upload-status {
  font-size: .8rem;
  color: var(--muted);
  font-weight: 400
}
.catalog-preview {
  width: 85px;
  height: 85px;
  object-fit: cover;
  border-radius: 7px;
  background: var(--paper)
}
#toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  max-width: min(420px,calc(100vw - 40px));
  background: var(--ink);
  color: #fff;
  padding: 10px 17px;
  z-index: 9999;
  border-radius: 8px;
  box-shadow: 0 4px 18px #0002
}
#toast.error {
  background: #84372d
}
[hidden] {
  display: none!important
}
@media(max-width:1050px) {
  .shell {
    grid-template-columns: 185px minmax(0,1fr)
  }
  .side {
    padding: 18px 12px
  }
  .main {
    padding: 25px
  }
  .stat-grid {
    gap: 8px
  }
  .stat-card {
    padding: 14px
  }
  .overview-cols {
    grid-template-columns: 1fr
  }
}
@media(max-width:760px) {
  .shell {
    display: block
  }
  .mobilebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--panel)
  }
  .mobilebar .brand-mark {
    width: 34px;
    height: 34px
  }
  .mobilebar .brand strong {
    font-size: 1.03rem
  }
  .mobilebar .brand small {
    font-size: .59rem
  }
  .mobilebar .btn {
    min-height: 34px;
    padding: 5px 10px
  }
  .side {
    display: none;
    position: static;
    height: auto;
    padding: 15px 16px;
    border: 0;
    border-bottom: 1px solid var(--line)
  }
  .side.open {
    display: flex
  }
  .side .brand {
    display: none
  }
  .side nav {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 3px
  }
  .nav-label {
    grid-column: 1/-1
  }
  .side-bottom {
    padding: 12px 4px 0;
    display: flex;
    align-items: center;
    gap: 12px
  }
  .side-bottom small {
    display: none
  }
  .main {
    padding: 22px 15px
  }
  .page-head {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 17px
  }
  .page-head h1 {
    font-size: 2rem
  }
  .stat-grid {
    grid-template-columns: repeat(2,minmax(0,1fr))
  }
  .stat-card {
    min-height: 102px
  }
  .stat-card strong {
    font-size: 2rem
  }
  .toolbar input {
    max-width: 100%;
    flex: 1 1 160px
  }
  .auth-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 34px 0
  }
  .auth-copy h1 {
    font-size: 2.7rem
  }
  .auth-copy {
    padding-top: 15px
  }
  .auth-card {
    max-width: 100%
  }
  .auth-shell {
    padding: 20px
  }
}
@media(max-width:480px) {
  .form-grid {
    grid-template-columns: 1fr
  }
  .dlg-head,.dlg-foot,#dialog-content {
    padding: 15px
  }
  .toolbar .count {
    width: 100%
  }
  .settings-actions {
    flex-wrap: wrap
  }
  .settings-actions .btn {
    margin-left: auto
  }
  td,th {
    padding: 9px
  }
  .auth-top .btn {
    font-size: .8rem
  }
  .page-head .actions .btn {
    font-size: .82rem
  }
  .details {
    grid-template-columns: 74px 1fr
  }
}
.account-panel {
  margin-top: 18px;
  max-width: 940px
}
.account-panel .btn,.fulfill .btn {
  margin-top: 12px
}
.fulfill,.inquiry-form {
  margin-top: 18px
}
.fulfill {
  border-top: 1px solid var(--line);
  padding-top: 15px
}
.fulfill h3 {
  margin-bottom: 10px
}
.design-data {
  background: var(--paper);
  border-radius: 6px;
  margin-top: 8px;
  padding: 7px 10px
}
.design-data summary {
  cursor: pointer;
  font-size: .88rem;
  font-weight: 650
}
.proof-side {
  margin-top: 10px
}
.proof-side .details {
  margin: 5px 0 8px
}
.design-previews {
  display: flex;
  gap: 9px;
  margin: 9px 0
}
.design-previews figure {
  margin: 0;
  padding: 7px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-align: center;
  width: 135px
}
.design-previews svg {
  width: 100%;
  height: 126px;
  display: block
}
.design-previews figcaption {
  font-size: .76rem;
  color: var(--muted)
}

.gateway-box {margin:17px 0;padding:4px 13px 12px;background:#f4f6f5;border:1px solid var(--line);border-radius:8px}
.gateway-box .switch-row {margin:10px 0}
.gateway-note {margin-top:14px}
.gateway-states {display:flex;gap:8px;flex-wrap:wrap}
.team-heading,.team-box{margin:0 0 15px;padding:clamp(15px,2vw,25px);background:#fff;border:1px solid var(--line);border-radius:12px}
.team-heading h2{font-size:clamp(1.55rem,3vw,2.15rem);margin:.15em 0}.team-heading .actions{margin-top:13px}
.team-box h3{font-size:1.07rem;margin:0 0 12px}.team-box .details{margin:12px 0}.team-box .help{margin-bottom:8px}.team-box .form-grid{margin:12px 0}
.team-box .btn{margin:4px 5px 4px 0}.version-box{border:1px solid var(--line);padding:10px 12px;border-radius:8px}.version-box summary,.account-panel summary{cursor:pointer;font-weight:700}.version-box .form-grid,.version-box>.team-box{margin-top:12px}
.input-table{min-width:450px}.input-table th,.input-table td{padding:5px}.input-table td input,.input-table td select{min-width:64px;font-size:.87rem;padding:6px;border-radius:5px}
.live-total{font-size:1.04rem;font-weight:700;color:var(--blue)}.factory-print a{overflow-wrap:anywhere}.factory-print .details{margin:12px 0}
#editor:has(#quote-roster),#editor:has(.factory-print){width:min(900px,calc(100vw - 24px))}
@media print{
  body.factory-printing{background:white;color:#111;font-size:10pt}
  body.factory-printing #app,body.factory-printing .skip,body.factory-printing .no-print,body.factory-printing .dlg-head,body.factory-printing .dlg-foot,body.factory-printing #toast{display:none!important}
  body.factory-printing dialog::backdrop{background:white}
  body.factory-printing #editor,body.factory-printing #editor-form,body.factory-printing #dialog-content{display:block;position:static;max-height:none!important;height:auto;width:100%;max-width:none;border:0;outline:0;box-shadow:none;padding:0;margin:0;overflow:visible}
  .factory-print .team-box{padding:8px 0;border:0;border-top:1px solid #aaa;box-shadow:none}.factory-print h2,.factory-print h3{break-after:avoid}.factory-print tr,.factory-print .details{break-inside:avoid}.factory-print .table-wrap{overflow:visible}
  .factory-print thead{display:table-header-group}.factory-print a{color:#111}.factory-print .form-grid{display:block}
}

.case-log {margin:12px 0 20px;padding-inline-start:1.6rem}
.case-log li {padding:6px 0;border-bottom:1px solid var(--line,#d6d9d8)}
.case-log p {margin:3px 0;white-space:pre-line}
#dialog-content input[type=number] {max-width:100%}
#dialog-content .table-wrap td input[type=number] {min-width:4.5em}

.studio-letterhead{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid #aeb9c4;break-inside:avoid;break-after:avoid}
.studio-letterhead img{display:block;object-fit:contain;flex:none}
.studio-letterhead strong,.studio-letterhead small{display:block}
.studio-letterhead strong{font-size:16px;font-weight:700;letter-spacing:.05em}
.studio-letterhead small{font-size:11px;color:#465566}