:root { color-scheme:dark; --bg:#07111d; --panel:#101d2d; --panel-2:#142337; --line:#25364a; --text:#f4f8fc; --muted:#8997aa; --blue:#2395ff; --green:#35d596; --danger:#ff6b7a; }
* { box-sizing:border-box; }
html { background:#040a11; }
body { margin:0; min-height:100dvh; background:radial-gradient(circle at 10% 28%,rgba(65,58,207,.17),transparent 31%),radial-gradient(circle at 92% 2%,rgba(35,149,255,.12),transparent 28%),var(--bg); color:var(--text); font:15px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,textarea { font:inherit; }
button { color:inherit; }
.feedback-shell { width:min(100%,720px); min-height:100dvh; margin:0 auto; }
.app-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; min-height:74px; padding:max(14px,env(safe-area-inset-top)) 18px 12px; border-bottom:1px solid var(--line); background:rgba(7,17,29,.86); backdrop-filter:blur(18px); }
.app-header img { width:42px; height:42px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.15); }
.app-header strong,.app-header small { display:block; }.app-header strong { font-size:16px; }.app-header small { color:var(--muted); font-size:12px; margin-top:2px; }
.app-header i { width:9px; height:9px; margin-left:auto; border-radius:50%; background:var(--green); box-shadow:0 0 0 6px rgba(53,213,150,.1); }
.mini-tabs { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin:14px 18px 0; padding:4px; border:1px solid var(--line); border-radius:13px; background:rgba(10,22,36,.8); }
.mini-tabs a { padding:9px 12px; border-radius:9px; color:var(--muted); font-size:13px; font-weight:700; text-align:center; text-decoration:none; }
.mini-tabs a.is-active { color:#fff; background:#1a2b42; box-shadow:0 4px 16px rgba(0,0,0,.2); }
main { padding:24px 18px max(36px,env(safe-area-inset-bottom)); }
.feedback-hero { padding:14px 4px 20px; }.feedback-hero>span { color:#62b8ff; font-size:11px; font-weight:800; letter-spacing:.17em; }.feedback-hero h1 { margin:8px 0 12px; font-size:clamp(36px,10vw,61px); line-height:.98; letter-spacing:-.055em; }.feedback-hero p { max-width:560px; margin:0; color:#a9b5c4; font-size:15px; }
.identity-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:13px; margin:8px 0 22px; padding:15px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(135deg,rgba(35,149,255,.1),rgba(255,255,255,.025)); }
.identity-avatar { display:grid; width:45px; height:45px; overflow:hidden; place-items:center; border-radius:50%; background:linear-gradient(145deg,#168dff,#755cff); font-weight:800; }.identity-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.identity-card span,.identity-card strong,.identity-card small { display:block; }.identity-card span { color:#60b9ff; font-size:9px; font-weight:800; letter-spacing:.14em; }.identity-card strong { margin-top:2px; }.identity-card small { color:var(--muted); font-size:11px; }.identity-card>svg { width:23px; fill:var(--green); }
.feedback-form { display:grid; gap:18px; }.feedback-form fieldset { min-width:0; margin:0; padding:0; border:0; }.feedback-form legend,.form-field>span,.media-field>div>span { display:block; margin:0 0 9px; color:#dbe7f4; font-size:12px; font-weight:750; }
.type-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.type-picker input { position:absolute; opacity:0; pointer-events:none; }.type-picker label>span { display:flex; min-height:116px; padding:13px 11px; border:1px solid var(--line); border-radius:15px; background:rgba(16,29,45,.82); cursor:pointer; flex-direction:column; transition:.18s ease; }.type-picker svg { width:25px; height:25px; margin-bottom:auto; fill:none; stroke:#91a3b7; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }.type-picker b { margin-top:10px; font-size:13px; }.type-picker small { margin-top:3px; color:var(--muted); font-size:10px; line-height:1.3; }.type-picker input:checked+span { border-color:rgba(35,149,255,.75); background:linear-gradient(145deg,rgba(35,149,255,.2),rgba(22,42,65,.92)); box-shadow:0 0 0 1px rgba(35,149,255,.18); }.type-picker input:checked+span svg { stroke:#55b2ff; }
.form-field { position:relative; display:block; }.form-field textarea,.form-field input { width:100%; border:1px solid var(--line); outline:0; border-radius:15px; background:rgba(16,29,45,.84); color:var(--text); transition:.18s ease; }.form-field textarea { min-height:158px; padding:15px 15px 35px; resize:vertical; }.form-field input { height:52px; padding:0 15px; }.form-field textarea:focus,.form-field input:focus { border-color:#238fe9; box-shadow:0 0 0 3px rgba(35,149,255,.1); }.form-field>small { display:block; margin:7px 4px 0; color:var(--muted); font-size:10px; }.form-field textarea+small { position:absolute; right:13px; bottom:10px; margin:0; }.form-field i { color:var(--danger); font-style:normal; }
.media-field { padding:15px; border:1px solid var(--line); border-radius:17px; background:rgba(16,29,45,.7); }.media-field>div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; }.media-field>div>span { margin:0; }.media-field>div>small { color:var(--muted); font-size:10px; }.media-picker { display:flex; width:100%; align-items:center; gap:12px; margin-top:13px; padding:13px; border:1px dashed #36516e; border-radius:13px; background:#0d1928; text-align:left; cursor:pointer; }.media-picker>svg { width:27px; fill:none; stroke:#50adf8; stroke-width:1.8; stroke-linecap:round; }.media-picker span,.media-picker strong,.media-picker small { display:block; }.media-picker strong { font-size:13px; }.media-picker small { color:var(--muted); font-size:10px; }
.media-previews { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:10px; }.media-preview { position:relative; min-height:120px; overflow:hidden; border-radius:12px; background:#050b12; }.media-preview img,.media-preview video { display:block; width:100%; height:142px; object-fit:cover; }.media-preview button { position:absolute; top:7px; right:7px; display:grid; width:29px; height:29px; padding:0; place-items:center; border:0; border-radius:50%; background:rgba(5,10,17,.82); cursor:pointer; }.media-preview button svg { width:14px; fill:none; stroke:#fff; stroke-width:2; }.media-preview span { position:absolute; right:7px; bottom:7px; padding:3px 7px; border-radius:8px; background:rgba(5,10,17,.78); font-size:9px; }
.honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.form-notice { padding:12px 14px; border:1px solid rgba(255,107,122,.35); border-radius:12px; background:rgba(255,107,122,.08); color:#ffbdc4; font-size:12px; }.form-notice[data-type="success"] { border-color:rgba(53,213,150,.35); background:rgba(53,213,150,.08); color:#91eec4; }
.submit-button { display:flex; min-height:56px; align-items:center; justify-content:center; gap:10px; padding:0 20px; border:0; border-radius:15px; background:linear-gradient(135deg,#168eff,#2679eb); box-shadow:0 14px 30px rgba(24,126,235,.24); font-weight:800; cursor:pointer; }.submit-button svg { width:21px; fill:none; stroke:#fff; stroke-width:1.8; }.submit-button:disabled { opacity:.55; cursor:wait; }.privacy-note { margin:0 12px; color:#718094; font-size:10px; text-align:center; }
.success-card { margin:22px 0; padding:42px 24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(150deg,rgba(35,149,255,.1),rgba(16,29,45,.9)); text-align:center; animation:rise .25s ease both; }.success-card>span { display:grid; width:68px; height:68px; margin:0 auto 18px; place-items:center; border-radius:22px; background:rgba(53,213,150,.13); }.success-card svg { width:34px; fill:none; stroke:var(--green); stroke-width:2; }.success-card h2 { margin:0 0 8px; font-size:25px; }.success-card p { color:var(--muted); }.success-card button { margin-top:12px; padding:11px 18px; border:1px solid var(--line); border-radius:11px; background:#17263a; font-weight:700; cursor:pointer; }
[hidden] { display:none!important; } @keyframes rise { from { opacity:0; transform:translateY(8px); } }
@media(max-width:520px) { main { padding-left:14px; padding-right:14px; }.type-picker { grid-template-columns:1fr; }.type-picker label>span { min-height:76px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:12px; }.type-picker svg { grid-row:1/3; margin:auto 0; }.type-picker b { margin:0; }.media-field>div:first-child { align-items:flex-start; flex-direction:column; gap:2px; } }