:root { color-scheme:dark; --cf-bg:#070914; --cf-panel:#101426; --cf-panel-soft:#171b31; --cf-line:rgba(255,255,255,.12); --cf-text:#f7f7ff; --cf-muted:#a8aec5; --cf-accent:#8b5cf6; --cf-cyan:#42dbf5; }
* { box-sizing:border-box; }
.community-form-page { min-height:100dvh; margin:0; color:var(--cf-text); background:radial-gradient(circle at 15% 10%,rgba(139,92,246,.18),transparent 32rem),radial-gradient(circle at 90% 90%,rgba(66,219,245,.12),transparent 28rem),var(--cf-bg); font-family:Outfit,system-ui,sans-serif; }
.community-form-page__main { width:min(780px,calc(100% - 28px)); margin:0 auto; padding:clamp(28px,7vw,72px) 0; }
.community-form-brand { display:inline-flex; gap:6px; margin:0 0 22px; color:#fff; font-weight:900; text-decoration:none; text-transform:uppercase; }
.community-form-brand span { color:var(--cf-cyan); }
.community-form-shell { --form-accent:var(--cf-accent); overflow:hidden; border:1px solid color-mix(in srgb,var(--form-accent) 38%,transparent); border-radius:26px; background:rgba(16,20,38,.96); box-shadow:0 30px 90px rgba(0,0,0,.45); }
.community-form-header { padding:clamp(24px,5vw,44px); border-bottom:1px solid var(--cf-line); background:linear-gradient(135deg,color-mix(in srgb,var(--form-accent) 17%,transparent),transparent 68%); }
.community-form-header small { color:var(--form-accent); font-size:.72rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
.community-form-header h1 { margin:10px 0 8px; font-size:clamp(1.8rem,5vw,3.2rem); line-height:1; }
.community-form-header p { max-width:62ch; margin:0; color:var(--cf-muted); line-height:1.6; }
.community-form { display:grid; gap:20px; padding:clamp(24px,5vw,44px); }
.community-form-content { min-width:0; }
.community-form-content--heading h2 { margin:8px 0 0; color:#fff; font-size:clamp(1.15rem,3vw,1.55rem); }
.community-form-content--heading small { display:block; margin-top:6px; color:var(--cf-muted); line-height:1.45; }
.community-form-content--paragraph { margin:0; color:var(--cf-muted); line-height:1.65; white-space:pre-wrap; }
.community-form-content--divider { width:100%; margin:4px 0; border:0; border-top:1px solid var(--cf-line); }
.community-form-field { display:grid; gap:8px; min-width:0; }
.community-form-field > span,.community-form-field legend { color:#f7f8ff; font-size:.85rem; font-weight:800; }
.community-form-field em { color:#ff76b8; font-style:normal; }
.community-form-field small { color:var(--cf-muted); line-height:1.4; }
.community-form-field input:not([type=radio]):not([type=checkbox]),.community-form-field textarea,.community-form-field select { width:100%; min-height:50px; padding:12px 14px; border:1px solid var(--cf-line); border-radius:12px; outline:0; color:#fff; background:#090d1c; font:inherit; }
.community-form-field textarea { min-height:130px; resize:vertical; }
.community-form-field :is(input,textarea,select):focus-visible { border-color:var(--form-accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--form-accent) 22%,transparent); }
.community-form-options { display:grid; gap:8px; margin:0; padding:0; border:0; }
.community-form-option,.community-form-consent { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border:1px solid var(--cf-line); border-radius:11px; background:rgba(255,255,255,.025); cursor:pointer; }
.community-form-option input,.community-form-consent input { width:18px; height:18px; margin:1px 0 0; accent-color:var(--form-accent); }
.community-form-rating { display:flex; flex-wrap:wrap; gap:8px; }
.community-form-rating label { display:grid; width:48px; height:44px; place-items:center; border:1px solid var(--cf-line); border-radius:10px; cursor:pointer; }
.community-form-rating input { position:absolute; opacity:0; pointer-events:none; }
.community-form-rating label:has(input:checked) { border-color:var(--form-accent); color:#fff; background:color-mix(in srgb,var(--form-accent) 30%,transparent); }
.community-form-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.community-form-submit { min-height:54px; border:0; border-radius:13px; color:#fff; background:linear-gradient(110deg,#ef208c,var(--form-accent)); font:900 .92rem Outfit,sans-serif; cursor:pointer; box-shadow:0 14px 34px color-mix(in srgb,var(--form-accent) 23%,transparent); }
.community-form-submit:disabled { opacity:.65; cursor:wait; }
.community-form-feedback { min-height:22px; margin:0; color:var(--cf-muted); font-size:.82rem; }
.community-form-feedback.is-error { color:#ff8dab; }
.community-form-success { display:grid; min-height:310px; padding:46px; place-items:center; text-align:center; }
.community-form-success span { display:grid; width:64px; height:64px; margin:0 auto 18px; place-items:center; border-radius:20px; color:#071016; background:#4ee7b2; font-size:2rem; font-weight:900; }
.community-form-loading,.community-form-error { padding:50px 24px; color:var(--cf-muted); text-align:center; }
.community-form-popup[hidden] { display:none!important; }
.community-form-popup { position:fixed; z-index:2500; inset:0; display:grid; padding:clamp(10px,3vw,30px); place-items:center; }
.community-form-popup__backdrop { position:absolute; inset:0; border:0; background:rgba(2,4,12,.82); backdrop-filter:blur(12px); }
.community-form-popup__dialog { position:relative; z-index:1; width:min(680px,100%); max-height:calc(100dvh - 20px); overflow:auto; border-radius:26px; }
.community-form-popup__close { position:absolute; z-index:4; top:15px; right:15px; display:grid; width:42px; height:42px; padding:0; place-items:center; border:1px solid var(--cf-line); border-radius:12px; color:#fff; background:#0b0f1d; font-size:1.35rem; cursor:pointer; }
body.has-community-form-popup { overflow:hidden; }
@media (max-width:620px) { .community-form-page__main { width:min(100% - 18px,780px); padding:18px 0 90px; } .community-form-shell,.community-form-popup__dialog { border-radius:18px; } .community-form-popup { align-items:end; padding:0; } .community-form-popup__dialog { width:100%; max-height:92dvh; border-radius:20px 20px 0 0; } .community-form-header,.community-form { padding:24px 20px; } .community-form-header h1 { padding-right:34px; } }
@media (prefers-reduced-motion:no-preference) { .community-form-popup__dialog { animation:community-form-in .24s ease-out both; } @keyframes community-form-in { from { opacity:0; transform:translateY(18px) scale(.985); } } }