:root { font-family: system-ui, "Noto Sans TC", "Microsoft JhengHei", sans-serif; color: #17212b; background: #f5f7f8; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { max-width: 720px; margin: auto; padding: 16px 14px 54px; }
.page-head { padding: 12px 4px 18px; }
.eyebrow { margin: 0 0 4px; color: #356a60; font-weight: 700; }
h1 { font-size: 1.8rem; line-height: 1.25; margin: 6px 0 10px; }
h2 { font-size: 1.3rem; margin: 0 0 16px; }
h3 { font-size: 1.1rem; margin: 0; }
p { line-height: 1.55; }
.card { background: white; border: 1px solid #d8e0e4; border-radius: 16px; padding: 18px; margin-bottom: 18px; box-shadow: 0 2px 10px #192b3810; }
.demo { background: #fff1d7; border: 1px solid #e6b65f; border-radius: 10px; padding: 10px 12px; font-weight: 700; }
label { display: block; font-size: 1.04rem; font-weight: 650; margin: 14px 0; }
input, textarea { width: 100%; margin-top: 7px; min-height: 48px; border: 1px solid #8797a1; border-radius: 9px; padding: 10px 12px; font: inherit; font-size: 1.08rem; background: white; color: #17212b; }
textarea { resize: vertical; line-height: 1.5; }
/* iPhone 的日期欄有內建最小寬度，會撐出卡片外 */
input[type="date"] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; text-align: left; }
input[type="date"]::-webkit-date-and-time-value { text-align: left; }
input:focus, textarea:focus, button:focus, a:focus { outline: 3px solid #87c9b7; outline-offset: 2px; }
.count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-wrap { overflow-x: auto; margin: 12px -4px; border: 1px solid #8797a1; border-radius: 10px; -webkit-overflow-scrolling: touch; }
.people-grid { border-collapse: collapse; width: 100%; font-size: 1rem; }
.people-grid th, .people-grid td { border: 1px solid #c3ced3; padding: 0; text-align: center; height: 44px; min-width: 40px; }
.people-grid thead th { background: #eef3f1; font-size: .9rem; font-weight: 700; padding: 4px 2px; height: auto; }
.people-grid tfoot th, .people-grid tfoot td { background: #f3f6f7; font-weight: 700; font-size: .92rem; }
.people-grid .group-start { border-left: 3px solid #4d5d66; }
.people-grid .name-col { position: sticky; left: 0; z-index: 1; background: white; min-width: 9.2rem; text-align: left; padding: 0 4px; box-shadow: 2px 0 0 #8797a1; }
.people-grid thead .name-col, .people-grid tfoot .name-col { background: #eef3f1; text-align: center; }
.row-no { display: inline-block; width: 2.3em; white-space: nowrap; font-size: .8rem; color: #52616a; font-weight: 600; }
.people-grid .name-col input { width: calc(100% - 2.5em); min-height: 36px; margin: 0; padding: 4px 4px; font-size: 1rem; border-radius: 6px; }
.people-grid input[type="number"] { width: 3rem; min-height: 40px; margin: 0; padding: 4px 2px; text-align: center; border: 0; border-radius: 0; font-size: 1.05rem; background: transparent; -moz-appearance: textfield; }
.people-grid input[type="number"]::-webkit-inner-spin-button, .people-grid input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.people-grid select { width: 2.8rem; min-height: 40px; border: 0; background: transparent; font: inherit; font-size: 1.1rem; text-align: center; color: #17212b; -webkit-appearance: none; appearance: none; }
.mark { width: 100%; min-width: 40px; height: 44px; min-height: 0; margin: 0; padding: 0; border-radius: 0; background: transparent; color: #17212b; font-size: 1.25rem; font-weight: 700; }
.mark[aria-pressed="true"] { background: #e3f2ec; color: #0f5c46; }
.people-grid button.remove { min-width: 36px; min-height: 36px; margin: 0 2px; padding: 0; font-size: 1rem; }
.hint-list { margin: 0 0 8px; padding-left: 1.3em; line-height: 1.6; }
.hint-list li { margin: 2px 0; }
.icon { width: 22px; height: 22px; flex: 0 0 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-hint { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; color: #135641; font-weight: 700; font-size: .95rem; }
.scroll-hint[hidden] { display: none; }
.grid-frame { position: relative; }
.scroll-cue { position: absolute; top: 1px; right: -3px; bottom: 1px; width: 34px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; padding-right: 4px; color: #135641; pointer-events: none; border-radius: 0 10px 10px 0; background: linear-gradient(to right, #ffffff00, #ffffffee 60%); }
.grid-frame.at-end .scroll-cue { display: none; }
.actions { display: grid; gap: 10px; margin: 6px 0 14px; }
.actions .action { display: flex; align-items: center; justify-content: flex-start; gap: 12px; text-align: left; margin: 0; padding-inline: 18px; }
.shell { position: relative; }
.gear { position: absolute; top: 18px; right: 14px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: #135641; background: #e8f1ee; }
.gear .icon { width: 24px; height: 24px; }
.district { margin: 18px 0 6px; color: #35584f; }
.group-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #e3e9ec; }
.group-row button { width: auto; min-height: 40px; padding: 6px 12px; font-size: .95rem; margin: 0; }
.group-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.group-info .hint { margin: 0; font-size: .9rem; }
.group-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.group-actions form { margin: 0; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 42px; min-width: 42px; height: 42px; min-height: 42px; padding: 0; margin: 0; border-radius: 10px; background: #e8f1ee; color: #135641; }
.group-row .icon-button { width: 42px; min-height: 42px; padding: 0; }
.icon-button:disabled { opacity: .3; cursor: default; }
.icon-button.danger { background: #fbe5e2; color: #9d3027; }
.add-group { margin-top: 6px; }
.footer-link { text-align: center; margin: 22px 0 8px; font-size: .92rem; }
.footer-link a { color: #52616a; }
.member-inputs { display: grid; gap: 8px; margin-bottom: 8px; }
.member-input { display: flex; align-items: center; gap: 8px; }
.member-input input { margin: 0; }
.share-label textarea { font-size: .95rem; background: #f5f7f8; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hint { color: #52616a; font-size: .95rem; }
button, .button { display: inline-block; width: 100%; text-align: center; border: 0; border-radius: 10px; background: #17765c; color: white; padding: 13px 18px; min-height: 50px; font: inherit; font-size: 1.08rem; font-weight: 750; text-decoration: none; cursor: pointer; margin: 4px 0; }
button.secondary, .button.secondary { background: #e8f1ee; color: #135641; }
button.remove { width: auto; min-height: 38px; font-size: .92rem; padding: 7px 10px; background: #fbe5e2; color: #9d3027; }
button:disabled { opacity: .6; cursor: wait; }
.submit-bar { position: sticky; bottom: 0; z-index: 5; background: #f5f7f8f5; padding: 8px 0; }
.error { color: #a72922; font-weight: 700; }
.success { border-color: #75b89c; }
@media (max-width: 430px) { .shell { padding-inline: 10px; } .card { padding: 15px; } .count-grid { gap: 6px; } .count-grid input { padding-inline: 7px; } }