:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #182d36; background: #f1f5f4; }
* { box-sizing: border-box; }
body { margin: 0; }
main { max-width: 820px; margin: 0 auto; padding: 52px 20px; }
header { margin-bottom: 30px; }
.eyebrow { color: #287160; font-size: 13px; letter-spacing: .12em; font-weight: 700; }
h1 { font-size: clamp(25px, 5vw, 36px); letter-spacing: -.03em; margin: 12px 0; }
header > p:last-child, .hint { color: #61747d; line-height: 1.65; }
.card { background: #fff; border: 1px solid #dae4e1; border-radius: 16px; padding: 28px; margin: 20px 0; }
h2 { font-size: 20px; margin: 0 0 20px; }
label { display: block; font-size: 14px; font-weight: 650; margin: 20px 0 9px; }
label span { font-size: 12px; font-weight: 400; color: #61747d; }
input { font: inherit; border: 1px solid #cbd7d3; border-radius: 8px; padding: 11px; min-width: 0; width: 100%; }
.key-row { display: flex; gap: 10px; }
.key-row input { flex: 1; }
.label-row { display: flex; align-items: center; gap: 10px; margin: 20px 0 9px; }
.label-row label { margin: 0; }
.label-row .key-tag { font-size: 12px; line-height: 1.3; padding: 4px 9px; border-radius: 99px; background: #eef6f3; }
button, .actions a { font: inherit; font-size: 14px; border: 1px solid #cbd7d3; border-radius: 8px; background: #fff; color: #245c50; padding: 11px 16px; cursor: pointer; text-decoration: none; white-space: nowrap; }
button:hover, .actions a:hover { background: #eef6f3; }
.primary { background: #226653; color: #fff; border-color: #226653; margin-top: 20px; width: 100%; font-weight: 650; }
.primary:hover { background: #174d3d; }
button:disabled { cursor: wait; opacity: .6; }
:focus-visible { outline: 3px solid #8cc8b6; outline-offset: 2px; }
progress { width: 100%; height: 16px; margin-top: 20px; accent-color: #226653; }
#status { font-size: 14px; color: #405e53; line-height: 1.7; overflow-wrap: anywhere; margin-bottom: 0; }
#file-list { list-style: none; margin: 0; padding: 0; }
#file-list > li { border-top: 1px solid #e6ece9; padding: 20px 0; }
#file-list > li:last-child { padding-bottom: 0; }
h3 { margin: 0 0 6px; font-size: 16px; overflow-wrap: anywhere; }
.hint { font-size: 13px; margin: 4px 0 16px; }
.empty { color: #61747d; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.actions .delete-file { color: #9d2929; border-color: #e5bcbc; }
.actions .delete-file:hover { background: #fff1f1; }
.download-url { font-size: 12px; background: #f8faf9; color: #48635b; }
dialog { width: min(480px, calc(100% - 28px)); max-height: calc(100dvh - 32px); padding: 28px; border: 1px solid #dae4e1; border-radius: 16px; color: #182d36; }
dialog::backdrop { background: rgb(15 37 30 / .45); }
.key-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.key-tabs button { flex: 1; }
.key-tabs button[aria-pressed="true"] { background: #e6f3ed; border-color: #226653; font-weight: 650; }
.dialog-actions { display: flex; justify-content: end; gap: 10px; margin-top: 20px; }
.dialog-actions .primary { margin: 0; width: auto; }
#key-error { color: #9d2929; font-size: 13px; line-height: 1.6; min-height: 21px; }
dialog input { max-width: 100%; }
footer { text-align: center; margin: 28px 0 0; font-size: 13px; }
footer a, header a { color: #287160; }
.admin-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.admin-filters[hidden] { display: none; }
select { width: 100%; min-width: 0; font: inherit; border: 1px solid #cbd7d3; border-radius: 8px; padding: 11px; background: #fff; }
#admin-list { list-style: none; margin: 0; padding: 0; }
#admin-list > li { border-top: 1px solid #e6ece9; padding: 20px 0; }
#admin-list > li:last-child { padding-bottom: 0; }
.account-detail, #admin-status { overflow-wrap: anywhere; }
.file-comments { margin-top: 18px; border: 1px solid #dae4e1; border-radius: 10px; padding: 14px; background: #f8faf9; }
.file-comments summary { cursor: pointer; color: #245c50; font-size: 14px; font-weight: 650; }
.comments-details > .hint { margin: 12px 0; }
.pinned-comments:not([hidden]) { margin-bottom: 14px; }
.comment.pinned-comment { background: #fffbea; border: 1px solid #e8d99f; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.pin-badge { color: #7b5b13; background: #f5e9b6; border-radius: 4px; padding: 2px 6px; font-size: 12px; }
.pin-comment { font-size: 12px; padding: 5px 9px; margin-top: 9px; }
.comment { padding: 14px 0; border-top: 1px solid #e1e9e5; }
.comment-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 14px; overflow-wrap: anywhere; }
.comment-heading time { color: #61747d; font-size: 12px; }
.comment-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.7; margin: 8px 0 0; }
.comment-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.comment-controls [hidden] { display: none; }
.comment-controls button, .comment-form button { font-size: 13px; padding: 8px 12px; }
.comment-form label { margin-top: 14px; }
.comment-form textarea { width: 100%; min-width: 0; resize: vertical; font: inherit; border: 1px solid #cbd7d3; border-radius: 8px; padding: 11px; line-height: 1.6; }
.comment-form button { margin-top: 10px; background: #226653; color: #fff; }
.comment-status { font-size: 13px; line-height: 1.6; color: #405e53; overflow-wrap: anywhere; margin: 10px 0 0; }
@media (max-width: 520px) { .admin-filters { grid-template-columns: 1fr; gap: 0; } }
@media (max-width: 520px) { main { padding: 26px 14px; } .card { padding: 20px; } .key-row { flex-wrap: wrap; } .key-row input { flex-basis: 100%; } .key-row button { width: 100%; } }