:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #1c2630; background: #f3f5f7; }
* { box-sizing: border-box; }
body { margin: 0; }
.shell { width: min(100%, 680px); margin: 0 auto; padding: 20px 16px max(26px, env(safe-area-inset-bottom)); background: white; min-height: 100vh; }
h1 { margin: 0; font-size: 1.65rem; line-height: 1.3; }
h2 { font-size: 1.16rem; margin: 28px 0 8px; }
.subhead { margin: 6px 0 22px; color: #4a5562; }
label { display: block; font-weight: 650; margin: 16px 0 8px; }
input:not([type=file]), textarea { display: block; width: 100%; font: inherit; border: 1.5px solid #9ca8b3; border-radius: 8px; padding: 12px; background: #fff; color: #1c2630; min-height: 46px; }
textarea { resize: vertical; min-height: 150px; }
input:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid #95c7ff; outline-offset: 1px; }
.required { color: #9b2525; font-size: .78rem; font-weight: normal; }
.optional, .hint, footer { color: #5b6671; font-size: .88rem; font-weight: normal; }
.hint { line-height: 1.45; margin: 8px 0 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
button { min-height: 48px; border-radius: 8px; border: 1px solid #275c85; padding: 10px 18px; font: inherit; font-weight: 650; cursor: pointer; touch-action: manipulation; }
button.primary { background: #1268aa; color: #fff; width: 100%; font-size: 1.06rem; }
button.secondary { background: #e9f2fa; color: #123d5d; }
button.remove { background: #fff; border-color: #ad3d3d; color: #8d2222; min-height: 40px; }
button:disabled { opacity: .55; cursor: not-allowed; }
.photo-list { display: grid; gap: 12px; }
.photo-card { padding: 12px; border: 1px solid #d7dee5; border-radius: 8px; background: #fafbfc; }
.photo-top { display: flex; gap: 12px; align-items: flex-start; }
.photo-preview { flex: none; width: 92px; height: 92px; object-fit: cover; background: #e9edf1; border-radius: 6px; }
.photo-summary { flex: 1; min-width: 0; }
.photo-name { font-size: .91rem; overflow-wrap: anywhere; margin: 0 0 5px; }
.photo-size { color: #5b6671; font-size: .83rem; margin-bottom: 8px; }
.photo-card label { font-size: .94rem; margin-top: 10px; }
.send-area { margin-top: 28px; padding-top: 20px; border-top: 1px solid #d7dee5; }
#status { margin-top: 12px; padding: 0; font-weight: 600; line-height: 1.45; }
#status.info { color: #174d75; }
#status.error { color: #9a2424; }
#status.success { color: #196431; }
footer { margin-top: 30px; border-top: 1px solid #eee; padding-top: 16px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; clip-path: inset(50%); }
@media (min-width: 700px) { .shell { margin-top: 26px; min-height: calc(100vh - 26px); border-radius: 12px 12px 0 0; box-shadow: 0 3px 20px #14202b14; padding: 28px 32px; } }