:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif; color: #173b34; background: #f4f7f4; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
.page { max-width: 640px; margin: auto; padding: 24px 16px 40px; }
.eyebrow { color: #48695c; font-size: .85rem; letter-spacing: .1em; margin: 0 0 6px; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: 0 0 12px; overflow-wrap: anywhere; }
p { margin: 8px 0; }
.muted, .hint, .item-meta { color: #546960; font-size: .9rem; }
.notice { padding: 14px; border: 1px solid #a9c5b7; border-radius: 12px; background: #edf6f0; margin: 20px 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.notice:empty { display: none; }
.notice.error { border-color: #b83737; background: #fff2f0; color: #942828; }
.notice.warning { border-color: #b78218; background: #fff8df; color: #70520c; }
.notice ul { padding-left: 22px; margin: 8px 0 0; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-size: 1.1rem; font-weight: 700; padding: 0; }
.items { display: grid; gap: 12px; margin: 14px 0 20px; }
.item { padding: 14px; background: white; border: 1px solid #d6e1da; border-radius: 12px; display: grid; grid-template-columns: minmax(0, 1fr) 106px; gap: 6px 12px; align-items: center; }
.item-name { font-weight: 650; overflow-wrap: anywhere; }
.item-meta { grid-column: 1; margin: 4px 0 0; }
.quantity { grid-column: 2; grid-row: 1 / span 2; width: 100%; min-height: 48px; font: inherit; font-size: 1.15rem; text-align: right; border: 1px solid #8a9f94; border-radius: 8px; padding: 8px 10px; color: #173b34; background: #fff; }
.feedback { grid-column: 1 / -1; margin: 0; font-size: .875rem; }
.item.invalid { border: 2px solid #b83737; }
.item.invalid .quantity { border-color: #b83737; }
.item.invalid .feedback { color: #942828; }
.item.warn { border-color: #b78218; background: #fffcf0; }
.item.warn .feedback { color: #70520c; }
summary { cursor: pointer; min-height: 48px; padding: 12px 8px; border-radius: 8px; background: #e5ede7; font-weight: 600; }
.actions { display: grid; gap: 10px; margin-top: 20px; }
button { width: 100%; min-height: 50px; padding: 12px 16px; border: 1px solid #23634c; border-radius: 10px; background: #23634c; color: white; font: inherit; font-weight: 650; cursor: pointer; touch-action: manipulation; }
button.secondary { background: white; color: #23634c; }
button:disabled { opacity: .55; cursor: default; }
input:disabled { background: #edf0ed; color: #59645e; opacity: 1; }
:focus-visible { outline: 3px solid #daaa28; outline-offset: 3px; }
@media (max-width: 360px) { .page { padding: 20px 12px; } .item { grid-template-columns: minmax(0, 1fr) 92px; padding: 12px; } }