body { font-family: system-ui, sans-serif; background: #f5f7fa; color: #172033; margin: 0; }
main { max-width: 1000px; margin: 2rem auto; padding: 2rem; background: white; border-radius: .5rem; box-shadow: 0 1px 8px #0002; }
label, textarea, input { display: block; margin: .5rem 0; width: 100%; box-sizing: border-box; }
textarea { min-height: 13rem; } button { padding: .5rem .8rem; } form { margin: 1.5rem 0; } .meta { color: #536078; font-size: .9rem; } .notice { padding: .65rem; border-radius: .25rem; } .success { background: #e4f6e8; } .error { background: #fde7e7; } pre { white-space: pre-wrap; word-break: break-word; }
.storage-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .storage-columns section + section { border-left: 1px solid #dce1ea; padding-left: 2rem; } .file-list { padding: 0; list-style: none; } .file-list li { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .5rem 0; border-bottom: 1px solid #edf0f5; } .file-list form { margin: 0; } .danger { color: #8d1111; border-color: #d89b9b; background: #fff5f5; } @media (max-width: 700px) { .storage-columns { grid-template-columns: 1fr; } .storage-columns section + section { border-left: 0; border-top: 1px solid #dce1ea; padding-left: 0; padding-top: 1rem; } }
.limit { color: #536078; font-size: .9rem; margin: -.5rem 0 .75rem; }