.feedback-page { min-height:100dvh; }
.feedback-header { max-width:1120px; margin:auto; padding:24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.feedback-header .nav-logo img { width:48px; height:48px; }
.feedback-header > a:last-child { color:var(--cream-dim); font-size:14px; }
.feedback-main { max-width:880px; margin:auto; padding:38px 24px 60px; }
.feedback-intro h1 { font-size:clamp(30px,5vw,48px); margin:14px 0; }
.feedback-page button { cursor:pointer; font:inherit; }
.feedback-page button:disabled { cursor:default; opacity:.55; }
.feedback-page [hidden] { display:none !important; }
.feedback-card { background:var(--night-2,#142333); border:1px solid var(--hairline); border-radius:16px; padding:28px; margin-bottom:22px; }
.feedback-card h2 { font-size:25px; margin:0 0 12px; }
.feedback-card p { margin:10px 0 18px; }
.feedback-card label { display:block; margin:18px 0; font-weight:600; }
.feedback-card input:not([type=checkbox]), .feedback-card select, .feedback-card textarea { display:block; width:100%; font:inherit; color:var(--cream); background:var(--night,#0b1621); border:1px solid var(--hairline-strong); border-radius:8px; padding:12px; min-height:46px; margin:8px 0; }
.feedback-card textarea { resize:vertical; }
/* The browser field would show "no file chosen" next to attached images: the label becomes the button, the field lies invisibly on top. */
.feedback-card label[for=support-images] { position:relative; display:flex; width:fit-content; max-width:100%; align-items:center; justify-content:center; min-height:54px; padding:12px 22px; border:1.5px solid var(--hairline-strong); border-radius:6px; background:rgba(242,237,227,.03); cursor:pointer; text-align:center; text-wrap:balance; }
.feedback-card label[for=support-images]:hover:not(:has(:disabled)) { border-color:var(--cream); background:rgba(242,237,227,.08); }
.feedback-card label[for=support-images]:has(:focus-visible) { outline:2px solid var(--brass,#d7b978); outline-offset:3px; }
.feedback-card label[for=support-images]:has(:disabled) { opacity:.5; cursor:default; }
/* Browsers without :has() (Safari before 15.4) would otherwise show no keyboard focus on the invisible field. */
@supports not selector(:has(*)) { .feedback-card label[for=support-images]:focus-within { outline:2px solid var(--brass,#d7b978); outline-offset:3px; } }
.feedback-card #support-images { position:absolute; inset:0; width:100%; height:100%; min-height:0; margin:0; padding:0; opacity:0; cursor:inherit; }
.feedback-page :focus-visible { outline:2px solid var(--brass,#d7b978); outline-offset:3px; }
.feedback-card h2:focus-visible { outline:none; }
.feedback-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.feedback-error { background:#372827; border-left:3px solid #e69b8a; padding:16px; border-radius:6px; }
.feedback-privacy { color:var(--cream-dim); font-size:14px; line-height:1.7; }
.feedback-privacy a, .feedback-card a { text-decoration:underline; text-underline-offset:3px; }
.feedback-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px; }
.feedback-images { display:flex; flex-wrap:wrap; gap:14px; margin:18px 0; }
.feedback-images:empty { margin:0; }
.feedback-image { width:180px; border:1px solid var(--hairline); border-radius:8px; padding:10px; }
.feedback-image img { width:100%; height:130px; object-fit:contain; background:#fff; border-radius:4px; }
.feedback-image .btn { margin-top:8px; padding:8px; font-size:16px; min-height:40px; width:100%; -webkit-hyphens:auto; hyphens:auto; }
.feedback-image-status { color:var(--cream-dim); }
.feedback-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.feedback-dialog { color:var(--cream); background:var(--night,#0b1621); border:1px solid var(--hairline-strong); border-radius:16px; padding:24px; margin:auto; width:min(780px,calc(100vw - 16px)); max-width:none; max-height:calc(100dvh - 16px); overflow:auto; }
/* Whole image and the buttons fit on screen: only the image area and open controls shrink. */
.feedback-dialog[open] { display:flex; flex-direction:column; }
.feedback-dialog > * { flex-shrink:0; }
.feedback-dialog h2 { font-size:clamp(20px,5vw,25px); margin:0 0 8px; }
.feedback-dialog::backdrop { background:#000a; }
.redaction-stage { position:relative; width:100%; min-height:120px; flex-shrink:1; overflow:hidden; background:var(--night-2,#142333); border-radius:8px; touch-action:none; cursor:crosshair; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.redaction-stage canvas { position:absolute; left:0; top:0; display:block; max-width:none; transform-origin:0 0; }
.redaction-preview { position:absolute; background:#000; pointer-events:none; }
.redaction-controls { margin-top:8px; }
/* The image shrinks first (down to its minimum); only then do the open controls scroll. */
.redaction-controls[open] { flex-shrink:.001; min-height:0; overflow:auto; }
/* Compact exact-area fields: two per row on phones, so values, image and buttons stay visible at 320 px. */
.redaction-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:6px 16px; margin:6px 0 10px; }
.redaction-fields label { display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 8px; font-weight:600; line-height:1.3; }
.redaction-fields input { grid-column:1 / -1; width:100%; min-height:32px; margin:4px 0 0; accent-color:var(--brass); }
.redaction-fields output { grid-row:1; grid-column:2; }
.redaction-controls [data-apply] { width:100%; min-height:48px; padding:10px 8px; }
.redaction-actions { position:sticky; bottom:0; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 12px; padding-top:12px; background:var(--night,#0b1621); }
.redaction-actions .btn { min-height:48px; padding:10px 22px; }
.feedback-footer { text-align:center; padding:24px; color:var(--cream-dim); font-size:14px; }
@media(max-width:600px) { .feedback-main { padding:24px 16px 40px; } .feedback-card { padding:20px; } .feedback-grid { grid-template-columns:1fr; } .feedback-header { padding:16px; } .feedback-header .nav-logo span { font-size:14px; max-width:120px; } .feedback-image { width:calc(50% - 8px); } }
@media(max-width:520px) { .feedback-dialog { padding:16px; } .redaction-actions { display:grid; grid-template-columns:1fr 1fr; } .redaction-actions [data-save] { grid-column:1 / -1; } .redaction-actions .btn { padding:10px 8px; } }
@media(max-width:360px) { .feedback-image { width:100%; } }