body, button, input, select { font-family: 'Pixelify', 'Noto Sans TC', 'Microsoft JhengHei', 'PingFang TC', system-ui, sans-serif; }
#scr-saves { overflow-y: auto; align-items: center; padding: 28px; }
.saves-box { width: min(1120px, 100%); padding: 28px; }
.saves-box h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin: 6px 0; }
.saves-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.saves-badge { color: #ffd23f; border: 1px solid #9c7938; border-radius: 8px; padding: 8px 12px; font-size: .875rem; white-space: nowrap; }
.saves-box p { line-height: 1.65; }
#save-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.save-card { border: 1px solid #6686bd; background: #142343; border-radius: 10px; padding: 20px; display: flex; flex-direction: column; }
.save-card-head { display: flex; gap: 12px; align-items: center; }
.save-card h2 { font-size: 1.25rem; margin: 0; overflow-wrap: anywhere; }
.save-number { display: grid; place-items: center; width: 36px; height: 36px; background: #334b76; border-radius: 6px; color: #ffd23f; font-size: 1.25rem; flex-shrink: 0; }
.save-card p { min-height: 5.6em; color: #dae6ff; font-size: .9375rem; }
.save-card small { display: block; color: #b2c5df; margin-bottom: 16px; }
.save-card-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.save-card-actions .btn { font-size: .875rem; min-height: 44px; flex-grow: 1; }
#save-message { min-height: 1.65em; color: #ffd23f; }
.saves-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.saves-footer p { font-size: .8125rem; color: #b2c5df; }
#local-help { background: #101d34; color: #f8f1dc; border: 2px solid #e8b94f; border-radius: 12px; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; font-family: inherit; }
#local-help p { line-height: 1.75; }
#local-help::backdrop { background: #071022bd; }
.saves-box :focus-visible { outline: 3px solid #ffd23f; outline-offset: 3px; }
@media (max-width: 680px) { #scr-saves { align-items: flex-start; padding: 12px; } .saves-box { padding: 16px; } #save-cards { grid-template-columns: 1fr; gap: 12px; margin: 16px 0; } .saves-heading { align-items: flex-start; flex-direction: column; gap: 8px; } .save-card p { min-height: 0; } }
@media (max-height: 600px) and (min-width: 681px) { #scr-saves { align-items: flex-start; padding: 12px; } .saves-box { padding: 16px; } #save-cards { margin: 12px 0; } .save-card { padding: 12px; } }