:root { color-scheme: dark; font-family: "Microsoft YaHei", system-ui, sans-serif; color: #f7e5c5; background: #16101d; }
* { box-sizing: border-box; }
body { margin: 0; }
.feedback-page { height: 100vh; height: 100dvh; max-width: 1000px; margin: auto; display: grid; grid-template-rows: 60% 40%; padding: env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
.opinions { min-height: 0; display: flex; flex-direction: column; padding: 18px 0 10px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; }
header p { margin: 0 0 4px; color: #bea98e; font-size: 12px; }
h1 { margin: 0; font-size: 25px; }
a { color: #ffbf76; white-space: nowrap; }
.feedback-list { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; border: 1px solid #654435; border-radius: 12px; background: #211725; padding: 14px; }
.opinion { padding: 14px 4px; border-bottom: 1px solid #44313c; }
.opinion:last-child { border-bottom: 0; }
.opinion p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.opinion time { color: #c3aa91; font-size: 12px; }
.composer { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 12px; }
.composer label { color: #ffd598; font-weight: bold; }
textarea { flex: 1; min-height: 40px; width: 100%; resize: none; padding: 12px; border: 1px solid #806044; border-radius: 10px; background: #251c2b; color: #fff0dc; font: inherit; font-size: 16px; }
textarea:focus { outline: 2px solid #ee9d4e; outline-offset: 1px; }
.composer-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#charCount, #feedbackStatus { font-size: 12px; color: #cbb69f; }
#feedbackStatus { margin: 0; min-height: 17px; }
button { border: 1px solid #ffc780; border-radius: 8px; background: #e99243; color: #241521; padding: 9px 24px; font: inherit; font-weight: bold; cursor: pointer; }
button:disabled { opacity: .6; cursor: wait; }
@media (max-height: 500px) { .opinions { padding-top: 5px; } header { padding-bottom: 4px; } header p { display: none; } h1 { font-size: 19px; } .composer { gap: 4px; padding-top: 4px; padding-bottom: 4px; } button { padding: 4px 20px; } textarea { padding: 7px; } }