@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root { --forest:#073e33; --forest-deep:#032b24; --mint:#65e1b3; --mint-dark:#16aa77; --paper:#f4f7f5; --surface:#fff; --ink:#10221d; --muted:#687a73; --line:#e2eae6; --shadow:0 16px 40px rgba(15,53,43,.08); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:400 14px/1.5 'DM Sans',Arial,sans-serif; } a { -webkit-tap-highlight-color:transparent; }
.community-nav { min-height:76px; padding:0 max(24px,calc((100% - 1220px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(3,43,36,.96); color:#effbf6; box-shadow:0 1px 0 rgba(255,255,255,.08); }.community-brand { display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; font:800 18px 'Manrope',sans-serif; letter-spacing:-.04em; white-space:nowrap; }.community-brand b { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg,#7bf0c3,#1ca676); color:#04362a; box-shadow:inset 0 1px rgba(255,255,255,.42); font:800 10px 'Manrope',sans-serif; letter-spacing:.03em; }.community-nav a { color:inherit; text-decoration:none; }.community-nav nav { display:flex; align-items:center; gap:20px; font-weight:600; white-space:nowrap; }.community-nav nav > a:not(.nav-button) { opacity:.78; transition:opacity .18s,color .18s; }.community-nav nav > a:not(.nav-button):hover { opacity:1; color:var(--mint); }
.nav-button,.button { appearance:none; border:0; border-radius:10px; padding:11px 16px; background:linear-gradient(135deg,#21a979,#12845f); color:#fff!important; box-shadow:0 7px 15px rgba(14,125,87,.20); font:700 13px 'DM Sans',sans-serif; cursor:pointer; text-decoration:none; transition:transform .18s,box-shadow .18s; display:inline-flex; align-items:center; justify-content:center; }.nav-button { background:var(--mint); color:#073e33!important; box-shadow:none; }.button:hover,.nav-button:hover { transform:translateY(-1px); box-shadow:0 9px 20px rgba(8,83,59,.23); }.community-shell { width:min(1220px,100%); margin:auto; padding:38px 24px 64px; }
.hero { position:relative; isolation:isolate; overflow:hidden; min-height:270px; padding:42px; border-radius:22px; background:linear-gradient(118deg,#05382f 0%,#075443 58%,#08715a 100%); color:#fff; display:flex; justify-content:space-between; gap:30px; align-items:flex-end; box-shadow:0 20px 35px rgba(3,53,42,.18); }.hero::before,.hero::after { content:''; position:absolute; z-index:-1; border-radius:999px; pointer-events:none; }.hero::before { width:340px; height:340px; right:-88px; top:-160px; border:42px solid rgba(113,237,190,.16); }.hero::after { width:180px; height:180px; right:20%; bottom:-125px; background:rgba(126,244,198,.1); }.eyebrow,.meta { color:var(--muted); font-size:12px; line-height:1.45; }.hero .eyebrow { color:#9aebc8; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }.hero h1 { max-width:600px; margin:8px 0; font:800 clamp(31px,4vw,47px)/1.08 'Manrope',sans-serif; letter-spacing:-.055em; }.hero p { max-width:550px; margin:0; color:#d0f1e3; font-size:16px; }.stats { display:flex; gap:10px; flex-wrap:wrap; }.stats > div { min-width:90px; padding:13px 16px; border:1px solid rgba(206,255,234,.16); border-radius:12px; background:rgba(0,34,27,.18); backdrop-filter:blur(8px); }.stats strong { display:block; font:800 23px 'Manrope',sans-serif; letter-spacing:-.04em; }.stats span { display:block; margin-top:1px; color:#b9e9d6; font-size:11px; }
.search { display:grid; grid-template-columns:minmax(220px,1.45fr) repeat(3,minmax(110px,.52fr)) auto; gap:9px; margin:22px 0; padding:10px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.82); box-shadow:0 8px 24px rgba(16,54,43,.04); }.search input,.search select,.field input,.field textarea,.field select { width:100%; border:1px solid #dce6e1; outline:none; border-radius:9px; padding:11px 12px; background:#fff; color:var(--ink); font:inherit; transition:border-color .18s,box-shadow .18s; }.search input { background:#f8faf9; }.search input:focus,.search select:focus,.field input:focus,.field textarea:focus,.field select:focus { border-color:var(--mint-dark); box-shadow:0 0 0 3px rgba(33,169,121,.13); }.search .button { padding-inline:18px; }.grid { display:grid; grid-template-columns:minmax(0,1.9fr) minmax(260px,.9fr); gap:22px; margin-top:24px; align-items:start; }.card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); }.section-head { display:flex; justify-content:space-between; gap:16px; align-items:center; margin-bottom:8px; }.section-head h2,.reply-form h2 { margin:0; color:#15332a; font:800 19px 'Manrope',sans-serif; letter-spacing:-.035em; }
.discussion { position:relative; display:block; padding:18px 2px 18px 14px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:background .18s,padding .18s; }.discussion::before { content:''; position:absolute; left:0; top:18px; bottom:18px; width:3px; border-radius:4px; background:transparent; transition:background .18s; }.discussion:last-child,.category:last-child { border-bottom:0; }.discussion:hover { padding-left:18px; background:linear-gradient(90deg,#f2fbf7,transparent 75%); }.discussion:hover::before { background:var(--mint-dark); }.discussion h3 { margin:5px 0 7px; font:700 15px/1.35 'Manrope',sans-serif; letter-spacing:-.015em; }.discussion:hover h3 { color:#087352; }.category { display:flex; gap:12px; align-items:flex-start; padding:15px 0; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; transition:transform .18s; }.category:hover { transform:translateX(3px); }.category i { display:grid; flex:0 0 36px; place-items:center; width:36px; height:36px; border-radius:10px; background:#eff9f4; font-style:normal; font-size:18px; }.category b { display:block; margin:1px 0 3px; font:700 14px 'Manrope',sans-serif; }.badge { display:inline-flex; align-items:center; margin-left:3px; padding:3px 7px; border-radius:20px; background:#e7f7ef; color:#087252; font-size:10px; font-weight:800; letter-spacing:.025em; vertical-align:middle; }.official { background:#fff3d6; color:#9a6900; }.solved { background:#dff7e8; color:#087046; }
.field { display:block; margin:17px 0; color:#26443a; font-weight:700; }.field input,.field textarea,.field select { display:block; margin-top:7px; font-weight:400; }.field textarea { min-height:180px; resize:vertical; line-height:1.6; }.field small { display:block; margin:4px 0; font-weight:400; }.notice { padding:12px 14px; border-radius:10px; background:#e7f7ef; color:#075e43; margin:0 0 16px; }.notice.error { background:#fff0ee; color:#9a3428; }.thread-head { max-width:900px; margin:4px auto 22px; }.thread-head h1 { margin:6px 0 8px; color:#143329; font:800 clamp(26px,3.5vw,38px)/1.15 'Manrope',sans-serif; letter-spacing:-.05em; }.post { max-width:900px; margin:15px auto; padding:23px; background:#fff; border:1px solid var(--line); border-radius:15px; box-shadow:0 8px 24px rgba(15,53,43,.045); }.post.official-post { border-left:4px solid #deaa29; }.post-head { display:flex; justify-content:space-between; gap:12px; margin-bottom:15px; }.author { font:800 14px 'Manrope',sans-serif; }.post-body { white-space:pre-wrap; color:#28433a; font-size:14px; line-height:1.75; }.post-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:19px; }.post-actions form { margin:0; }.quiet-button { border:1px solid #dbe7e1; border-radius:8px; padding:8px 10px; background:#fbfdfc; color:#426158; font:700 12px 'DM Sans',sans-serif; cursor:pointer; transition:background .18s,border-color .18s; }.quiet-button:hover { border-color:#a8d8c4; background:#effaf4; color:#087252; }.reply-form { max-width:900px; margin:24px auto 0; }.reply-form h2 { margin-bottom:4px; }.community-shell > details.card { max-width:900px; margin:16px auto; }.community-shell > details summary { cursor:pointer; color:var(--muted); font-weight:700; }.community-footer { padding:28px 24px; border-top:1px solid var(--line); background:#fff; color:var(--muted); text-align:center; font-size:12px; }.pager { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }.pager a { min-width:34px; padding:7px 10px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#087252; font-weight:700; text-align:center; text-decoration:none; }.pager a:hover { background:#effaf4; }
@media(max-width:900px) { .search { grid-template-columns:minmax(0,1fr) repeat(2,minmax(120px,.6fr)); }.community-nav { padding-inline:20px; }.community-nav nav { gap:13px; font-size:13px; }.community-whatsapp { display:none; } } @media(max-width:680px) { .community-nav { min-height:64px; padding:10px 15px; align-items:center; }.community-brand { font-size:16px; }.community-brand b { width:30px; height:30px; }.community-nav nav { gap:12px; font-size:12px; }.community-nav nav a[href="/community/"],.community-nav nav a[href="/community/new.php"] { display:none; }.nav-button { padding:8px 10px; }.community-shell { padding:20px 14px 45px; }.hero { min-height:0; padding:27px 23px 22px; border-radius:17px; display:block; }.hero h1 { font-size:32px; }.hero p { font-size:14px; }.stats { margin-top:23px; }.stats > div { flex:1; min-width:0; padding:11px 9px; }.stats strong { font-size:19px; }.search { grid-template-columns:1fr 1fr; gap:8px; padding:8px; border-radius:12px; }.search input,.search .button { grid-column:1 / -1; }.grid { grid-template-columns:1fr; gap:16px; margin-top:16px; }.card { padding:17px; border-radius:13px; }.section-head { align-items:flex-start; }.section-head .button { padding:9px 11px; font-size:12px; }.discussion { padding-top:16px; padding-bottom:16px; }.post { margin:12px auto; padding:17px; border-radius:13px; }.post-head { display:block; }.post-head time { display:block; margin-top:5px; }.thread-head { margin-bottom:17px; }.thread-head h1 { font-size:28px; }.field textarea { min-height:145px; } } @media(max-width:390px) { .community-nav nav a[href="/player/dashboard.php"] { display:none; }.community-nav nav { gap:9px; }.hero h1 { font-size:29px; }.stats span { font-size:10px; } }