/* complaints-v2.css — Frenzy96 player Complaints & Feedback. 2026-06-08. Portaled to : use literal colors (no wrapper-scoped CSS vars). */ #modal-complaints.modal-backdrop { align-items: flex-end !important; padding: 0 !important; } @media (min-width: 720px) { #modal-complaints.modal-backdrop { align-items: center !important; } } #modal-complaints .modal.cmp-root { width: 100%; max-width: 480px; max-height: 88vh; display: flex; flex-direction: column; background: #12161d; color: #e7eaf0; border: 1px solid #232a35; border-radius: 18px 18px 0 0; padding: 0; overflow: hidden; } @media (min-width: 720px) { #modal-complaints .modal.cmp-root { border-radius: 16px; } } .cmp-hd { display: flex; align-items: center; gap: 8px; padding: 14px 14px 12px; border-bottom: 1px solid #1e242e; flex: 0 0 auto; } .cmp-back { width: 34px; height: 34px; flex: 0 0 auto; border: none; background: #1c222c; color: #c8cedb; border-radius: 9px; display: flex; align-items: center; justify-content: center; cursor: pointer; } .cmp-back svg { width: 18px; height: 18px; } .cmp-title { flex: 1; font-size: 16px; font-weight: 800; text-align: center; } .cmp-new-btn { flex: 0 0 auto; border: none; background: #e8a124; color: #1a1205; font-weight: 800; font-size: 12px; padding: 7px 12px; border-radius: 9px; cursor: pointer; } .cmp-body { padding: 12px 14px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .cmp-loading { text-align: center; color: #8b93a1; padding: 40px 0; } .cmp-empty { text-align: center; padding: 38px 16px; } .cmp-empty .ic { font-size: 40px; } .cmp-empty .t { font-weight: 800; margin-top: 8px; } .cmp-empty .s { color: #8b93a1; font-size: 13px; margin: 6px auto 16px; max-width: 280px; line-height: 1.5; } .cmp-cta, .cmp-submit, .cmp-send { border: none; cursor: pointer; font-weight: 800; } .cmp-cta { background: #e8a124; color: #1a1205; padding: 11px 20px; border-radius: 11px; } .cmp-item { display: flex; align-items: center; gap: 11px; padding: 12px; background: #161c25; border: 1px solid #212834; border-radius: 12px; margin-bottom: 9px; cursor: pointer; transition: background .15s; } .cmp-item:active { background: #1b222d; } .cmp-it-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 10px; background: #1f2733; display: flex; align-items: center; justify-content: center; font-size: 19px; } .cmp-it-mid { flex: 1; min-width: 0; } .cmp-it-sub { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-it-meta { color: #828b99; font-size: 11.5px; margin-top: 2px; } .cmp-it-right { flex: 0 0 auto; } .cmp-bdg { font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: 20px; border: 1px solid; white-space: nowrap; } .cmp-form .cmp-lb { display: block; font-size: 12px; font-weight: 700; color: #aab2c0; margin: 14px 2px 6px; } .cmp-form .cmp-lb:first-child { margin-top: 2px; } .cmp-cats { display: flex; flex-wrap: wrap; gap: 7px; } .cmp-cat { border: 1px solid #2a323e; background: #161c25; color: #c2c9d6; font-size: 12.5px; font-weight: 600; padding: 8px 11px; border-radius: 9px; cursor: pointer; } .cmp-cat.on { background: #e8a12422; border-color: #e8a124; color: #f3c970; } .cmp-in, .cmp-ta { width: 100%; box-sizing: border-box; background: #0f141b; border: 1px solid #2a323e; color: #e7eaf0; border-radius: 10px; padding: 11px 12px; font-size: 14px; font-family: inherit; outline: none; } .cmp-in:focus, .cmp-ta:focus { border-color: #e8a124; } .cmp-ta { min-height: 120px; resize: vertical; line-height: 1.5; } .cmp-ta.sm { min-height: 54px; } .cmp-note { font-size: 11.5px; color: #8b93a1; line-height: 1.5; margin: 12px 2px; background: #141a22; border: 1px solid #1f2630; border-radius: 9px; padding: 9px 11px; } .cmp-submit { width: 100%; background: #e8a124; color: #1a1205; padding: 13px; border-radius: 12px; font-size: 15px; margin-top: 14px; } .cmp-submit:disabled, .cmp-send:disabled { opacity: .6; cursor: default; } .cmp-d-head { padding: 2px 2px 12px; border-bottom: 1px solid #1e242e; margin-bottom: 12px; } .cmp-d-sub { font-weight: 800; font-size: 15px; } .cmp-d-meta { color: #828b99; font-size: 12px; margin-top: 3px; } .cmp-thread { display: flex; flex-direction: column; gap: 10px; } .cmp-bub { max-width: 86%; padding: 9px 12px; border-radius: 13px; } .cmp-bub.me { align-self: flex-end; background: #1f3247; border: 1px solid #29455f; border-bottom-right-radius: 4px; } .cmp-bub.staff { align-self: flex-start; background: #18241c; border: 1px solid #244a30; border-bottom-left-radius: 4px; } .cmp-bub-who { font-size: 11px; font-weight: 800; color: #9aa3b1; margin-bottom: 3px; } .cmp-bub-tx { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; } .cmp-bub-dt { font-size: 10.5px; color: #7a818d; margin-top: 4px; text-align: right; } .cmp-resolved { background: #16241b; border: 1px solid #244a30; color: #5fd99a; font-size: 12.5px; font-weight: 600; padding: 9px 12px; border-radius: 10px; margin-top: 4px; } .cmp-reply { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid #1e242e; } .cmp-reply .cmp-ta { flex: 1; } .cmp-send { background: #e8a124; color: #1a1205; padding: 11px 16px; border-radius: 10px; flex: 0 0 auto; } .cmp-toast { position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px); background: #1c222c; color: #f0f2f6; border: 1px solid #2a323e; padding: 11px 18px; border-radius: 11px; font-size: 13.5px; font-weight: 600; z-index: 99999; opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; max-width: 90vw; text-align: center; } .cmp-toast.on { opacity: 1; transform: translate(-50%, 0); } /* guided form (2026-07-11): category card hover lift + cyan accent */ .cmp-catcard:hover { transform: translateY(-2px); border-color: rgba(41,182,232,0.4) !important; } /* ══════════ Full-page form — Mz spec v2 (2026-07-11, >=980) ══════════ Account recipe: transparent backdrop under the 64px chrome header, ocean shows through, backdrop owns the scroll, home hidden + body locked. The inline dialog skin on .cmp-root (460px card) is neutralized into a 620px content column; <980 keeps the centered dialog. */ @media (min-width: 980px) { html body #modal-complaints.modal-backdrop { position: fixed !important; inset: 64px 0 0 0 !important; background: transparent !important; padding: 0 !important; align-items: initial !important; justify-content: initial !important; } html body #modal-complaints.modal-backdrop.show { display: block !important; z-index: 200 !important; overflow-y: auto !important; overflow-x: hidden !important; } body:has(#modal-complaints.modal-backdrop.show) { overflow: hidden !important; } body:has(#modal-complaints.modal-backdrop.show) #apk-banner, body:has(#modal-complaints.modal-backdrop.show) .bs-container { visibility: hidden !important; } html body #modal-complaints .modal.cmp-root { max-width: 620px !important; width: 100% !important; margin: 0 auto !important; min-height: 100% !important; height: auto !important; max-height: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 24px 16px !important; animation: none !important; display: block !important; overflow: visible !important; } }