:root {
  color-scheme: light;
  font-family: "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  color: #2c2823;
  background: #f7f3ec;
}
[hidden] { display: none !important; }

* { box-sizing: border-box; }
body { margin: 0; }
button, label { font: inherit; }

.page-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 72px; }
.hero { max-width: 720px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: #9a5c2a; font-weight: 700; letter-spacing: .08em; }
h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.25; }
h2 { margin: 0 0 8px; font-size: 1.1rem; }
.intro, .upload-card p, .tip-card li, .file-name, .folder-name { color: #6e655c; line-height: 1.65; }
.intro { margin: 14px 0 0; }
.page-link a { color: #8e5227; font-weight: 700; }
.account-row { display: flex; align-items: center; gap: 14px; margin: 24px 0 0; font-weight: 700; }
.account-row input { flex: 1; min-width: 0; padding: 12px; border: 1px solid #c9b9a9; border-radius: 10px; background: #fffdf9; font: inherit; }
.card { background: #fffdf9; border: 1px solid #e5ddd2; border-radius: 18px; padding: 22px; box-shadow: 0 8px 24px rgba(86, 61, 32, .06); }
.upload-card { display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.upload-actions { display: flex; gap: 10px; }
.upload-card p { margin: 0; }
.primary-button, .secondary-button, .replace-button { border: 0; border-radius: 10px; cursor: pointer; font-weight: 700; text-align: center; white-space: nowrap; }
.primary-button { padding: 12px 18px; background: #a96431; color: #fff; }
.primary-button:hover { background: #8e5227; }
.primary-button:disabled { cursor: not-allowed; background: #c9b9a9; }
.secondary-button { padding: 11px 17px; color: #65442b; background: transparent; border: 1px solid #c9b9a9; }
.status-row { min-height: 28px; display: flex; justify-content: space-between; gap: 16px; margin: 24px 0 14px; font-weight: 700; }
#status-message { color: #a6472b; font-weight: 500; }
.photo-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0 22px; }
.photo-summary div { padding: 14px; border: 1px solid #e1d9cf; border-radius: 12px; background: #fffdf9; }
.photo-summary span, .photo-summary small { display: block; color: #6e655c; }
.photo-summary strong { display: block; margin: 4px 0; font-size: 1.5rem; }
.drop-zone { margin: 16px 0 24px; padding: 18px; border: 2px dashed #c9b9a9; border-radius: 14px; color: #704820; text-align: center; font-weight: 700; }
.drop-zone.drag-active { color: #8e5227; border-color: #a96431; background: #f8ede1; }
.section-title { margin: 26px 0 12px; font-size: 1rem; }
.section-title span { color: #6e655c; font-size: .9rem; font-weight: 400; }
.photo-grid { display: grid; grid-template-columns: repeat(var(--grid-columns, 4), minmax(0, 1fr)); gap: 16px; min-height: 230px; }
.photo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 20px 0; color: #6e655c; }
.photo-controls label { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.photo-controls select { padding: 7px; border: 1px solid #c9b9a9; border-radius: 7px; background: #fffdf9; font: inherit; }
.photo-controls input { accent-color: #a96431; }
#photo-grid, #candidate-grid { display: block; min-height: 0; }
.folder-group + .folder-group { margin-top: 22px; }
.folder-group-title { margin: 0 0 10px; color: #704820; font-size: .9rem; }
.group-grid { min-height: 0; }
.folder-add { display: grid; place-items: center; min-height: 110px; padding: 12px; border: 2px dashed #c9b9a9; border-radius: 12px; color: #704820; text-align: center; font-weight: 700; }
.folder-add.drag-active { border-color: #a96431; background: #f8ede1; }
.folder-add label { cursor: pointer; text-decoration: underline; }
.photo-card { position: relative; overflow: hidden; border: 1px solid #e1d9cf; border-radius: 15px; background: #fffdf9; box-shadow: 0 4px 14px rgba(86, 61, 32, .06); cursor: grab; }
.photo-card.dragging { opacity: .45; }
.photo-card.drag-over { outline: 3px solid #c77a3f; outline-offset: 2px; }
.slot-label { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 5px 8px; border-radius: 7px; color: #fff; background: rgba(43, 34, 25, .82); font-size: .78rem; font-weight: 700; }
.photo-frame { aspect-ratio: 4 / 3; background: #eee7dd; }
.photo-frame img { width: 100%; height: 100%; display: block; object-fit: contain; }
.photo-frame img { cursor: zoom-in; }
.preview-unavailable .photo-frame { display: grid; place-items: center; padding: 16px; background: #edf4f7; }
.preview-unavailable .photo-frame::after { content: "此格式無法在目前瀏覽器預覽\A仍會正常上傳"; white-space: pre-line; color: #497184; text-align: center; font-size: .85rem; line-height: 1.5; }
.preview-unavailable .photo-frame img { display: none; }
.photo-viewer { width: min(92vw, 1000px); padding: 18px; border: 0; border-radius: 14px; background: #fffdf9; }
.photo-viewer::backdrop { background: rgba(35, 27, 20, .72); }
.photo-viewer img { display: block; max-width: 100%; max-height: 72vh; margin: 12px auto; }
.photo-viewer button { float: right; padding: 8px 12px; border: 0; border-radius: 8px; background: #f1e7db; color: #704820; cursor: pointer; font-weight: 700; }
.upload-confirmation { width: min(92vw, 480px); padding: 26px; border: 0; border-radius: 16px; background: #fffdf9; }
.upload-confirmation::backdrop { background: rgba(35, 27, 20, .6); }
.upload-confirmation p { color: #6e655c; line-height: 1.6; }
.upload-confirmation .actions { margin-top: 22px; }
.order-form-card { margin-top: 28px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-grid label { display: grid; gap: 6px; font-weight: 700; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; padding: 10px; border: 1px solid #c9b9a9; border-radius: 8px; background: #fff; font: inherit; }
.form-grid .wide { grid-column: 1 / -1; }
.product-fields { margin: 20px 0; padding: 18px; border: 1px solid #e5ddd2; border-radius: 12px; background: #fdf8f1; }
.product-fields h2 { color: #704820; }
.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.product-row label { display: grid; gap: 6px; font-weight: 700; }
.product-row input, .product-row select { width: 100%; padding: 10px; border: 1px solid #c9b9a9; border-radius: 8px; background: #fff; font: inherit; }
.product-row label { align-content: start; }
.product-row input, .product-row select { min-height: 42px; }
.success-message { text-align: center; padding: 34px 12px; }
.completion-card { max-width: 650px; margin: 90px auto; text-align: center; }
.completion-card h1 { margin-bottom: 16px; }
.order-number { margin: 22px 0; color: #704820; font-size: 1.2rem; font-weight: 700; }
.confirmation-note { margin: 28px 0; padding: 18px; border-radius: 12px; background: #f8ede1; text-align: left; }
.confirmation-note p { margin-bottom: 0; color: #6e655c; }
.photo-details { padding: 12px 12px 8px; display: grid; gap: 3px; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.folder-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .76rem; }
.resolution-warning { margin-top: 2px; color: #a6472b; font-size: .76rem; font-weight: 700; }
.duplicate-warning { margin-top: 2px; color: #a6472b; font-size: .76rem; font-weight: 700; }
.card-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; margin: 0 8px 8px; }
.replace-button { display: block; margin: 0; padding: 8px 4px; background: #f1e7db; color: #704820; font-size: .88rem; }
.delete-button { padding: 8px 4px; border: 0; border-radius: 10px; background: #f8e4de; color: #9a3c2a; cursor: pointer; font-weight: 700; font-size: .88rem; }
.tip-card { margin-top: 28px; }
.tip-card ol { margin: 10px 0 0; padding-left: 22px; }
.actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 22px; }
#clear-button { margin-right: auto; }
.admin-panel { margin-top: 42px; border-top: 1px solid #ddd3c7; padding-top: 24px; }
.admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-heading .eyebrow { margin-bottom: 4px; font-size: .8rem; }
.record-list { display: grid; gap: 12px; margin-top: 16px; }
.record { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 16px; border: 1px solid #e1d9cf; border-radius: 12px; background: #fffdf9; }
.record p { margin: 0; color: #6e655c; }
.record time { color: #6e655c; font-size: .88rem; }
.record-content { grid-column: 1 / -1; font-size: .9rem; }
.empty-records { margin: 0; color: #6e655c; }
.admin-table-wrap { overflow-x: auto; }
.receipt-photo-scroll { overflow-x: auto; }
.receipt-photo-grid { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 12px; }
.receipt-photo-grid figure { min-width: 0; margin: 0; }
.receipt-photo-open { display: block; width: 100%; padding: 0; border: 0; cursor: pointer; background: #e9f2f5; border-radius: 6px; }
.receipt-photo-open img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 6px; }
.receipt-photo-grid figcaption { overflow-wrap: anywhere; margin-top: 6px; }
#receipt-viewer-image { object-fit: contain; }
#photo-issue-list li { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; overflow-wrap: anywhere; }
.photo-card:focus { outline: 4px solid #299fc0; outline-offset: 4px; }
.admin-toolbar select { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #b9d0dc; border-radius: 10px; background: #fffdf9; font: inherit; }
.admin-table { width: 100%; border-collapse: collapse; background: #fffdf9; }
.admin-table th, .admin-table td { padding: 14px; border-bottom: 1px solid #e8dfd4; text-align: left; vertical-align: top; }
.admin-table th { color: #704820; white-space: nowrap; }
.admin-table td { color: #4f4941; }
.admin-table summary { cursor: pointer; color: #704820; font-weight: 700; }
.admin-table details p { max-width: 400px; margin: 10px 0 0; color: #6e655c; line-height: 1.65; word-break: break-word; }
.admin-photos { display: grid; grid-template-columns: repeat(4, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.admin-photos figure { margin: 0; }
.admin-photos img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.admin-photos figcaption { margin-top: 3px; color: #704820; font-size: .78rem; font-weight: 700; }
.admin-folder { margin-top: 18px; }
.admin-folder h3 { margin: 0 0 8px; color: #704820; font-size: .9rem; }
.admin-settings { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin: 24px 0; }
.admin-settings h2, .admin-settings p { width: 100%; }
.admin-settings p { margin: 0; color: #6e655c; }
.admin-settings label { display: grid; gap: 5px; font-weight: 700; }
.admin-settings input { width: 140px; padding: 9px; border: 1px solid #c9b9a9; border-radius: 8px; font: inherit; }
.price-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; width: 100%; }
.switch-setting { width: 100%; display: flex !important; align-items: center; gap: 8px; }
.switch-setting input { width: auto; }
.price-matrix { display: grid; grid-template-columns: 1.2fr repeat(5, minmax(92px, 1fr)); gap: 1px; width: 100%; overflow-x: auto; margin: 16px 0; border: 1px solid #e1d9cf; background: #e1d9cf; }
.price-matrix > div, .price-matrix > label { min-width: 92px; padding: 10px; background: #fffdf9; font-weight: 700; }
.price-matrix > div:nth-child(-n+6) { background: #f1e7db; color: #704820; }
.price-matrix input { width: 100%; min-width: 0; padding: 8px; border: 1px solid #c9b9a9; border-radius: 7px; font: inherit; }
.price-matrix.seasonal-only { grid-template-columns: 1.2fr repeat(4, minmax(92px, 1fr)); }
.price-matrix.seasonal-only > div:nth-child(-n+5) { background: #f1e7db; color: #704820; }
.period-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; margin: 14px 0; }
.period-settings label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px; border: 1px solid #e1d9cf; border-radius: 10px; background: #fdf8f1; }
.period-settings strong { width: 100%; color: #704820; }
.period-settings input { min-width: 0; padding: 7px; border: 1px solid #c9b9a9; border-radius: 7px; font: inherit; }
.text-warning { margin: 20px 0 0; padding: 16px; border: 1px solid #dfb36c; border-radius: 12px; background: #fff6df; color: #704820; }
.text-warning p { margin: 7px 0 12px; line-height: 1.6; }
.text-warning label { font-weight: 700; }
.other-info { margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5ddd2; }
.other-info summary { cursor: pointer; color: #704820; font-weight: 700; }
.other-info .form-grid { margin-top: 16px; }
.price-quote { display: grid; gap: 5px; margin: 18px 0; padding: 16px; border-radius: 12px; background: #f8ede1; color: #704820; }
.price-quote span { color: #6e655c; }
.price-quote b { margin-top: 4px; color: #a6472b; font-size: 1.1rem; }
.style-managers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.style-manager { padding: 14px; border: 1px solid #e1d9cf; border-radius: 12px; background: #fdf8f1; }
.style-manager h3 { margin: 0 0 10px; color: #704820; font-size: 1rem; }
.style-list { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.style-list span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 7px; background: #fffdf9; font-size: .86rem; }
.style-list button, .style-add button { border: 0; border-radius: 6px; background: #ead9cb; color: #704820; cursor: pointer; font: inherit; font-weight: 700; }
.style-list button { padding: 2px 5px; font-size: .75rem; }
.style-add { display: flex; gap: 6px; margin-top: 10px; }
.style-add input { min-width: 0; flex: 1; padding: 8px; border: 1px solid #c9b9a9; border-radius: 7px; font: inherit; }
.style-add button { padding: 8px; white-space: nowrap; }
.settings-save { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #e5ddd2; }
.admin-nav { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.nav-current { padding: 11px 17px; color: #fff; background: #a96431; border-radius: 10px; font-weight: 700; }
.admin-table td small, .admin-table time { display: block; margin-top: 4px; color: #6e655c; font-size: .8rem; }
.table-action { display: inline-block; padding: 8px 12px; border: 1px solid #c9b9a9; border-radius: 8px; color: #704820; font-weight: 700; text-decoration: none; }
.pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 18px 0; }
.pagination button { padding: 8px 12px; border: 1px solid #c9b9a9; border-radius: 8px; background: #fffdf9; color: #704820; cursor: pointer; font: inherit; font-weight: 700; }
.pagination button:disabled { color: #a79e94; cursor: not-allowed; }
.back-link { display: inline-block; margin-bottom: 28px; color: #8e5227; font-weight: 700; text-decoration: none; }
.detail-hero { margin-bottom: 24px; }
.detail-info { margin-bottom: 20px; }
.detail-card p { display: grid; grid-template-columns: 110px 1fr; gap: 14px; margin: 10px 0; }
.detail-card p span { color: #6e655c; }
.admin-orders { display: grid; gap: 18px; }
.order-card { padding: 20px; border: 1px solid #e1d9cf; border-radius: 14px; background: #fffdf9; }
.order-card .order-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.order-card .order-header .eyebrow { margin: 0 0 4px; font-size: .8rem; }
.order-card .order-header h2 { margin: 0; }
.order-card details { margin-top: 16px; border-top: 1px solid #e8dfd4; padding-top: 14px; }
.order-card summary { cursor: pointer; color: #704820; font-weight: 700; }
.excel-link { display: inline-block; margin-top: 14px; color: #8e5227; font-weight: 700; }
.order-card details > p { color: #6e655c; line-height: 1.65; word-break: break-word; }
.admin-link { margin: 16px 0 0; font-weight: 700; }
.admin-link a { color: #8e5227; }
.admin-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px 0; }
.summary-item { padding: 18px; border: 1px solid #e1d9cf; border-radius: 14px; background: #fffdf9; }
.summary-item span { display: block; color: #6e655c; font-size: .9rem; }
.summary-item strong { display: block; margin-top: 8px; font-size: 1.4rem; }
.admin-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.admin-toolbar label { flex: 1; font-weight: 700; }
.admin-toolbar input { display: block; width: 100%; margin-top: 6px; padding: 12px; border: 1px solid #c9b9a9; border-radius: 10px; background: #fffdf9; font: inherit; }
.admin-orders { display: grid; gap: 14px; }
.order-card { padding: 20px; border: 1px solid #e1d9cf; border-radius: 14px; background: #fffdf9; }
.order-header, .order-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.order-header .eyebrow { margin: 0 0 4px; font-size: .78rem; }
.order-header h2 { margin: 0; }
.order-status { padding: 6px 10px; border-radius: 8px; background: #e8f0e3; color: #426134; font-weight: 700; font-size: .85rem; }
.order-meta { margin: 16px 0; color: #6e655c; font-size: .9rem; }
.order-card details { border-top: 1px solid #e8dfd4; padding-top: 14px; }
.order-card summary { cursor: pointer; color: #704820; font-weight: 700; }
.order-card details p { color: #6e655c; line-height: 1.7; word-break: break-word; }
.member-order-card { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 22px; padding: 22px 24px; }
.member-order-main h2 { margin: 5px 0; color: #1e3641; font-size: 1.25rem; }
.member-order-time, .member-order-id { margin: 0; color: #60717a; font-size: .88rem; }
.member-order-id { font-family: ui-monospace, "Cascadia Code", monospace; }
.member-order-summary { display: grid; min-width: 140px; gap: 8px; color: #60717a; font-size: .92rem; text-align: right; }
.member-order-summary .order-status { justify-self: end; }
.member-order-summary strong { color: #286b91; font-size: 1rem; }
.member-order-action { min-width: 110px; text-align: right; }
.order-view-button { display: inline-block; white-space: nowrap; text-decoration: none; }
.order-processing { color: #7a8c94; font-size: .88rem; white-space: nowrap; }

@media (max-width: 780px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .page-shell { width: min(100% - 24px, 1120px); padding-top: 30px; } .account-row, .upload-card, .admin-toolbar { align-items: stretch; flex-direction: column; } .upload-actions { flex-direction: column; } .primary-button, .secondary-button { width: 100%; } .status-row, .order-header, .order-meta { align-items: flex-start; flex-direction: column; gap: 4px; } .record { grid-template-columns: 1fr; } .admin-summary, .form-grid, .product-row, .photo-summary { grid-template-columns: 1fr; } }

/* 公司官網視覺：白底、青藍分隔與深灰文字 */
:root { color: #252d32; background: #f4fbfd; }
body { background: #fffdf0; }
.company-header { background: #fff; box-shadow: 0 1px 0 rgba(44, 58, 64, .14); }
.company-contact { width: min(1120px, calc(100% - 32px)); height: 35px; margin: 0 auto; display: flex; align-items: center; gap: 7px; color: #66727a; font-size: .78rem; }
.company-contact span { color: #3675b7; font-size: .65rem; }
.company-navigation { width: min(1120px, calc(100% - 32px)); min-height: 88px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.company-brand { display: inline-flex; align-items: center; gap: 2px; color: #367ad1; font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: .08em; text-decoration: none; text-shadow: 1px 1px 0 #d7e6f4; }
.company-brand b { color: #4f80c6; }
.brand-spark { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 5px; border-radius: 65% 35% 65% 35%; background: linear-gradient(135deg, #ffdf60, #f2b71d); color: #fff; font-size: 1rem; transform: rotate(-18deg); box-shadow: 0 2px 3px rgba(103, 86, 16, .18); }
.company-navigation nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 31px); color: #5d5d5d; font-size: .9rem; white-space: nowrap; }
.company-navigation nav span { cursor: default; }
.company-navigation nav a { color: #2a6ab3; font-weight: 700; text-decoration: none; }
.company-accent { height: 4px; background: #28bed7; box-shadow: 0 2px 0 #263038; }
.page-shell { width: min(1180px, calc(100% - 32px)); padding-top: 36px; }
.hero { max-width: none; margin-bottom: 24px; padding: 27px 30px; border: 1px solid rgba(255,255,255,.9); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(32, 113, 137, .11); }
.eyebrow { color: #2583a4; }
h1 { color: #1f2c34; }
h2 { color: #1e3641; }
.intro, .upload-card p, .tip-card li, .file-name, .folder-name { color: #60717a; }
.card { border-color: #d7e3e8; border-radius: 14px; background: #fff; box-shadow: 0 8px 25px rgba(30, 73, 87, .07); }
.primary-button { background: linear-gradient(180deg, #3388d5, #236db5); box-shadow: inset 0 1px rgba(255,255,255,.26), 0 2px 3px rgba(34, 91, 147, .2); }
.primary-button:hover { background: linear-gradient(180deg, #2f7dc3, #1e5e9f); }
.primary-button:disabled { background: #aab9c1; }
.secondary-button { color: #2869ae; border-color: #adc8df; background: #fff; }
.secondary-button:hover { border-color: #3b8bd1; background: #eff8fd; }
.drop-zone, .folder-add { border-color: #82cde0; color: #28739b; background: #f7fdff; }
.drop-zone.drag-active, .folder-add.drag-active { border-color: #2d96bd; background: #e4f8fc; color: #166889; }
.photo-summary div, .photo-card, .record, .order-card, .summary-item { border-color: #d7e3e8; background: #fff; }
.photo-summary span, .photo-summary small, .status-row, .photo-controls, .admin-table td, .record p, .record time { color: #60717a; }
#status-message, .resolution-warning, .duplicate-warning { color: #c35d2c; }
.photo-controls input { accent-color: #2d8bcb; }
.photo-controls select, .form-grid input, .form-grid select, .form-grid textarea, .product-row input, .product-row select, .admin-toolbar input { border-color: #b9d0dc; }
.folder-group-title, .product-fields h2, .order-number, .admin-table th, .admin-table summary, .admin-folder h3, .order-card summary, .back-link { color: #2876a5; }
.photo-card { box-shadow: 0 4px 14px rgba(31, 84, 104, .08); }
.photo-card.drag-over { outline-color: #32a7cc; }
.photo-frame { background: #e9f2f5; }
.slot-label { background: rgba(31, 55, 65, .88); }
.replace-button { color: #266ba5; background: #eaf5fb; }
.delete-button { color: #bd4e3d; background: #fff0ed; }
.product-fields, .style-manager, .period-settings label { border-color: #d6e5ea; background: #f5fbfd; }
.price-quote { border-left: 4px solid #29b8d2; background: #edfaff; color: #246a91; }
.price-quote b { color: #276caf; }
.text-warning { border-color: #f0c66a; background: #fff9e9; color: #7b5a16; }
.nav-current { background: #2f80c8; }
.admin-nav { padding: 10px 0; border-bottom: 1px solid #dce8ec; }
.admin-table { background: #fff; }
.admin-table th { background: #e9f7fb; }
.table-action, .pagination button { color: #2869ae; border-color: #adc8df; background: #fff; }
.member-list { display: grid; gap: 10px; }
.member-record { border: 1px solid #d3e1e7; border-radius: 12px; background: #fff; overflow: hidden; box-shadow: 0 3px 10px rgba(31,84,104,.05); }
.member-record summary { display: grid; grid-template-columns: 170px minmax(220px, 1fr) 100px 94px 88px; align-items: center; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; }
.member-record summary::-webkit-details-marker { display: none; }
.member-record summary:hover { background: #f5fbfd; }
.member-record-account { display: grid; gap: 4px; color: #286b91; }
.member-record-account strong { font-family: ui-monospace, "Cascadia Code", monospace; font-size: 1rem; }
.member-record-account span, .member-record-hint { color: #60717a; font-size: .82rem; }
.member-record-organization { color: #1d4356; font-weight: 800; }
.member-record-orders { color: #286b91; font-weight: 700; }
.member-record-status { justify-self: start; padding: 5px 9px; border-radius: 999px; background: #e4f4e2; color: #327340; font-size: .84rem; font-weight: 700; }
.member-record-status.is-disabled { background: #fce9e5; color: #ad4c2c; }
.member-record-hint { text-align: right; }
.member-record-detail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 18px; border-top: 1px solid #dce8ec; background: #f8fcfd; }
.member-record-detail > div { min-width: 0; display: grid; gap: 5px; }
.member-record-detail span { color: #60717a; font-size: .82rem; }
.member-record-detail strong { color: #284856; overflow-wrap: anywhere; }
.member-record-actions { grid-column: 1 / -1; display: flex !important; flex-direction: row; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.member-delete { color: #b14430; border-color: #e9b6ad; }
.order-status { background: #e4f4e2; color: #327340; }
.completion-card { border-top: 5px solid #28bed7; }
.confirmation-note { background: #edfaff; }
.excel-link, .admin-link a, .page-link a { color: #2874b5; }
.admin-corner-link { position: fixed; z-index: 10; top: 16px; right: 18px; padding: 10px 14px; border: 1px solid #adc8df; border-radius: 9px; background: #fff; color: #2869ae; box-shadow: 0 3px 12px rgba(30, 73, 87, .12); font-weight: 700; text-decoration: none; }
.admin-corner-link:hover { background: #eff8fd; }
.admin-logout { position: fixed; z-index: 10; top: 16px; right: 18px; padding: 10px 14px; border: 1px solid #adc8df; border-radius: 9px; background: #fff; color: #2869ae; box-shadow: 0 3px 12px rgba(30, 73, 87, .12); cursor: pointer; font: inherit; font-weight: 700; }
.admin-settings:has(#create-member) { display: block; padding: 16px 20px; }
.template-form-card { margin-top: 22px; }
.template-file-field small { color: #60717a; font-weight: 400; }
.template-file-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.template-file-pair label { display: grid; gap: 6px; font-weight: 700; }
.template-file-pair small { color: #60717a; font-weight: 400; }
.template-list-section { margin-top: 28px; }
.template-list { display: grid; gap: 14px; }
.template-category { display: grid; gap: 14px; }
.template-category + .template-category { margin-top: 22px; }
.template-category > h2 { margin: 0; padding-bottom: 8px; border-bottom: 2px solid #b9dfe9; color: #28739b; font-size: 1.15rem; }
.template-record { display: grid; grid-template-columns: minmax(190px, .8fr) minmax(0, 2fr); gap: 18px; align-items: center; padding: 18px; }
.template-record h3 { margin: 4px 0 8px; color: #1e3641; }
.template-record p { margin: 0; color: #60717a; }
.template-delete { margin-top: 14px; }
.template-edit { display: inline-block; margin-top: 14px; margin-right: 8px; padding: 8px 10px; font-size: .9rem; text-decoration: none; }
.template-editor-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 410px); align-items: start; gap: 20px; margin-top: 18px; }
.editor-actions { position: sticky; z-index: 3; top: 14px; display: grid; gap: 14px; max-height: calc(100vh - 28px); overflow-y: auto; margin: 0; padding: 14px; border: 1px solid #d7e3e8; border-radius: 12px; background: rgba(255,255,255,.97); box-shadow: 0 4px 14px rgba(31,84,104,.08); }
.editor-setting-group { padding: 16px; border: 1px solid #cfe0e7; border-radius: 10px; background: #f7fcfe; }
.editor-setting-group h2 { margin: 0 0 12px; color: #286b91; font-size: 1.05rem; }
.editor-safe-area { padding: 12px 16px; border: 1px solid #efd6a4; border-radius: 10px; background: #fffaf0; }
.editor-safe-area summary { cursor: pointer; color: #8a5b12; font-weight: 800; }
.editor-safe-area p { margin: 10px 0; color: #866c43; font-size: .88rem; line-height: 1.5; }
.current-page-note { margin: -4px 0 12px; padding: 8px 10px; border-left: 4px solid #2d8bcb; border-radius: 5px; background: #eaf7fc; color: #176e99; font-weight: 700; font-size: .9rem; }
.safe-area-box { position: absolute; z-index: 1; pointer-events: none; border: 2px dashed #d89a2b; box-sizing: border-box; background: rgba(255, 222, 153, .08); }
.text-setting-group { background: #fbfdf8; border-color: #d8e9d8; }
.text-setting-group h2 { color: #347a4d; }
.editor-advanced { padding: 12px 14px; border: 1px dashed #b9d0dc; border-radius: 9px; background: #fbfcfa; }
.editor-advanced summary { cursor: pointer; color: #426274; font-weight: 700; }
.editor-advanced[open] summary { margin-bottom: 12px; }
.editor-setting-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
.editor-save-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; }
.editor-save-row .primary-button { min-width: 0; }
#editor-message { grid-column: 1 / -1; }
.editor-size-controls label { display: grid; min-width: 0; gap: 6px; color: #286b91; font-weight: 700; font-size: .9rem; }
.editor-size-controls input, .editor-size-controls select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid #adc8df; border-radius: 7px; background: #fff; font: inherit; color: #1e3641; }
.editor-size-controls button { min-height: 44px; width: 100%; }
#editor-message { color: #28739b; font-weight: 700; }
.page-editors { display: grid; gap: 24px; }
.template-page-editor { padding: 20px; }
.template-page-editor.is-selected { border: 3px solid #2d8bcb; box-shadow: 0 0 0 4px rgba(45, 139, 203, .13), 0 8px 22px rgba(31,84,104,.13); }
.template-page-editor h2 { margin-bottom: 5px; }
.template-page-editor p { margin: 0 0 14px; color: #60717a; }
.template-canvas { position: relative; display: inline-block; width: min(100%, 920px); line-height: 0; cursor: crosshair; user-select: none; touch-action: none; }
.template-canvas img { display: block; width: 100%; height: auto; border: 1px solid #d7e3e8; }
.photo-position-box { position: absolute; z-index: 1; border: 4px solid #1685d1; background: rgba(37, 159, 223, .15); box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset; cursor: move; }
.ad-text-position-box { position: absolute; z-index: 2; display: grid; place-items: center; box-sizing: border-box; min-height: 0; overflow: hidden; white-space: nowrap; border: 3px solid #35a86b; background: rgba(71, 190, 113, .2); color: #136137; font-weight: 700; font-size: clamp(.65rem, 1.4vw, .9rem); cursor: move; user-select: none; }
.text-bold-option { display: flex !important; align-items: center; gap: 8px; padding-top: 22px; }
.text-bold-option input { width: auto !important; min-height: auto !important; }
.font-preview-box { grid-column: 1 / -1; display: grid; gap: 7px; padding-top: 4px; }
.font-preview-box label { color: #426274; font-weight: 700; font-size: .9rem; }
.font-preview-box small { color: #60717a; font-size: .82rem; }
.font-preview { min-height: 54px; margin: 0; padding: 12px; overflow-wrap: anywhere; border: 1px solid #b9d0dc; border-radius: 8px; background: #fff; line-height: 1.55; }
@media (max-width: 680px) { .editor-save-row { align-items: stretch; flex-direction: column; } .editor-save-row .primary-button { width: 100%; } }
.frame-size-note { min-height: 1.5em; margin-top: 10px !important; color: #28739b !important; font-weight: 700; font-size: .9rem; }
.template-page-editor .secondary-button { display: block; margin-top: 12px; }
.proof-list { display: block; margin: 24px 0; }
.proof-group + .proof-group { margin-top: 30px; }
.proof-group > h2 { margin: 0 0 10px; color: #28739b; font-size: 1.1rem; }
.proof-group .proof-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; margin: 0; }
.proof-card { overflow: hidden; padding: 0; }
.proof-card figcaption { min-height: 62px; padding: 12px; color: #28739b; font-weight: 700; }
.proof-preview { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.proof-preview img { display: block; width: 100%; height: auto; }
.photo-viewer { max-width: min(94vw, 1200px); }
.viewer-toolbar { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.photo-viewer > img { display: block; max-width: 100%; max-height: 78vh; margin: 0 auto; }
.viewer-tip { color: #60717a; text-align: center; font-size: .88rem; }
.proof-card { margin: 0; padding: 12px; }
.proof-card img { display: block; width: 100%; height: auto; }
.proof-card figcaption { padding: 10px 4px 2px; color: #28739b; font-weight: 700; }
.proof-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.proof-all-groups { margin-top: 18px; }
.proof-all-groups .proof-card figcaption { align-items: flex-start; flex-direction: column; gap: 3px; }
.proof-download-button { flex: 0 0 auto; }
.proof-group .proof-calendar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.proof-group .proof-overview-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; margin-inline: 0; }
.proof-overview-viewer { width: min(98vw, 1800px); max-width: none; height: 96vh; overflow: auto; box-sizing: border-box; }
.proof-overview-viewer > img { display: block; width: min(100%, 1500px); max-width: none; max-height: none; height: auto; margin: 12px auto; }
.proof-overview-viewer .viewer-toolbar { display: flex; align-items: center; justify-content: center; gap: 10px; }
.proof-overview-viewer .viewer-toolbar button { float: none; }
.proof-actions { margin-top: 24px; }
.upload-status { display: inline-block; margin: 0 0 10px; padding: 6px 10px; border-radius: 999px; background: #e0f5fb; color: #176e99; font-weight: 700; }
.proof-completed { border-color: #83c9a0; background: #f3fff7; }
.proof-completed .upload-status { background: #dff5e6; color: #267145; }
.generation-card { max-width: 660px; text-align: center; }
.generation-steps { display: grid; gap: 10px; margin: 28px auto; padding: 0; list-style: none; text-align: left; }
.generation-steps li { padding: 12px 14px; border-radius: 9px; background: #edf4f7; color: #63757e; }
.generation-steps li.active { background: #e0f5fb; color: #176e99; font-weight: 700; box-shadow: inset 4px 0 #27abd0; }
.order-feedback { min-height: 1.4em; margin: 18px 0 0; color: #b65429; font-weight: 700; }
.template-thumbs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.template-thumbs figure { min-width: 0; margin: 0; }
.template-record-calendar .template-thumbs { grid-template-columns: repeat(auto-fill, minmax(100px, 160px)); }
.template-record-calendar .template-thumbs img { display: block; height: auto; aspect-ratio: auto; object-fit: contain; }
.template-thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid #d7e3e8; border-radius: 6px; background: #e9f2f5; }
.template-thumbs figcaption { margin-top: 3px; color: #56707d; font-size: .76rem; text-align: center; white-space: nowrap; }
.template-variant-previews { display: grid; gap: 12px; min-width: 0; }
.template-variant-previews > div { display: grid; gap: 5px; }
.template-variant-previews strong { color: #28739b; font-size: .9rem; }
.admin-settings:has(#create-member) h2 { margin-bottom: 12px; }
#create-member { grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 10px 14px; }
#create-member .wide { grid-column: auto; }
#create-member .actions { grid-column: auto; align-self: end; margin: 0; }
#create-member .primary-button { padding: 10px 14px; }
@media (max-width: 780px) { #create-member { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .template-record { grid-template-columns: 1fr; } .template-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .template-file-pair { grid-template-columns: 1fr; } }
@media (max-width: 980px) { .template-editor-workspace { grid-template-columns: 1fr; } .editor-actions { position: static; max-height: none; } }
@media (max-width: 780px) { .editor-setting-fields, .editor-save-row { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .proof-group .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 780px) { .company-navigation { min-height: 72px; } .company-navigation nav { display: none; } }
@media (max-width: 540px) { .company-contact, .company-navigation { width: min(100% - 24px, 1120px); } .company-contact { height: 29px; } .company-brand { font-size: 1.55rem; } .brand-spark { width: 29px; height: 29px; } .hero { padding: 22px 20px; } }
@media (max-width: 780px) { .member-order-card { grid-template-columns: 1fr; gap: 12px; } .member-order-summary, .member-order-action { text-align: left; } .member-order-summary .order-status { justify-self: start; } }
@media (max-width: 780px) { .member-record summary { grid-template-columns: 1fr auto; gap: 8px 14px; } .member-record-organization { grid-column: 1 / -1; } .member-record-orders { grid-column: 1; } .member-record-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); } .member-record-hint { grid-column: 2; grid-row: 1; } }
@media (max-width: 540px) { .member-record-detail { grid-template-columns: 1fr; } }
.font-upload-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}.font-upload-controls label{display:inline-flex;cursor:pointer}#font-upload-status{color:#28739b;font-weight:700}.font-list{margin-top:14px}.font-select-control{display:flex;align-items:center;gap:10px;max-width:820px}.font-select-control label{display:block;flex:0 0 auto;white-space:nowrap;font-weight:700}.font-select-control select{flex:1;min-width:240px;width:auto}.font-remove-button{flex:0 0 auto;padding:8px 11px;font-size:.9rem}.font-manager #font-list.font-list .font-select-control{display:flex!important;flex-direction:row!important;align-items:center!important;width:min(100%,820px)!important}.font-manager #font-list.font-list .font-select-control>label{display:inline-block!important;flex:0 0 auto!important;width:auto!important;min-width:max-content!important;max-width:none!important;margin:0!important;white-space:nowrap!important;word-break:keep-all!important;overflow-wrap:normal!important;writing-mode:horizontal-tb!important;font-weight:700!important}.font-manager #font-list.font-list .font-select-control>select{display:block!important;flex:1 1 360px!important;width:auto!important;min-width:240px!important}@media (max-width:540px){.font-manager #font-list.font-list .font-select-control{align-items:stretch!important;flex-direction:column!important}.font-manager #font-list.font-list .font-select-control>select{width:100%!important;min-width:0!important}.font-remove-button{width:100%}}

@supports (content-visibility: auto) { .folder-group { content-visibility: auto; contain-intrinsic-size: auto 600px; } }

.photo-card.insert-before, .photo-card.insert-after { overflow: visible; }
.photo-card.insert-before::before, .photo-card.insert-after::after { content: ''; position: absolute; z-index: 5; top: -4px; bottom: -4px; width: 4px; border-radius: 3px; background: #1684c5; box-shadow: 0 0 0 2px white; pointer-events: none; }
.photo-card.insert-before::before { left: -7px; }
.photo-card.insert-after::after { right: -7px; }

/* Fit the complete proof to the screen without changing generated print files. */
.proof-overview-viewer { width:96vw; max-width:1600px; height:94vh; height:94dvh; overflow:hidden; }
.proof-overview-viewer[open] { display:flex; flex-direction:column; }
.proof-overview-viewer > img { flex:1 1 auto; min-height:0; width:100%; height:auto; max-width:100%; max-height:calc(94vh - 160px); max-height:calc(94dvh - 160px); object-fit:contain; margin:8px auto; }
.proof-overview-viewer .viewer-toolbar,.proof-overview-viewer > p { flex:0 0 auto; }
.proof-overview-viewer > p { margin:4px 0; }
.member-order-name { color:#28739b; overflow-wrap:anywhere; }

.member-order-card > .member-order-id { grid-column:1 / -1; justify-self:end; text-align:right; font-size:.72rem; color:#7b8991; overflow-wrap:anywhere; }
.inline-production-status { display:grid; gap:6px; min-width:110px; }
.inline-production-status label { display:grid; gap:3px; font-size:.78rem; }
.inline-production-status select { width:100%; padding:6px; }
.inline-production-status button { justify-self:start; }

.cart-product,.checkout-record { margin:18px 0; }
.cart-item { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:18px; padding:16px 0; border-bottom:1px solid #dce5e9; }
.cart-item h3 { margin:0; overflow-wrap:anywhere; }.cart-item p { color:#60717a; }
.cart-group-total { display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding-top:18px; }
.cart-total { margin:22px 0; font-size:1.15rem; color:#236b98; }.cart-total p { display:flex; justify-content:space-between; }
.checkout-record > summary { cursor:pointer; display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.checkout-record > .member-order-card { margin-top:16px; border:1px solid #dce5e9; }
@media(max-width:600px){.cart-item{grid-template-columns:minmax(0,1fr) auto}.cart-item button{grid-column:2}.cart-item>div{grid-row:span 2}}