:root { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #f4f6fb; background: #0c0f15; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% 0, #172c4a 0, transparent 32%), #0c0f15; }
button, input, select, textarea { font: inherit; }
.shell { width: min(calc(100% - 32px), 1160px); max-width: none; margin: 0 auto; padding: 28px 20px 110px; }
header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
h1, h2, p { margin-top: 0; } h1 { margin-bottom: 0; font-size: 30px; } h2 { margin-bottom: 9px; }
.eyebrow { color: #7e9fca; letter-spacing: .13em; font-size: 11px; font-weight: 800; margin-bottom: 6px; }
.member { color: #7ce2a2; background: #183326; padding: 8px 11px; border-radius: 999px; font-size: 12px; }
.hero, .partner-card { background: linear-gradient(135deg, #1d3f6d, #142338 65%, #172017); border: 1px solid #31537d; border-radius: 22px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 20px; margin-bottom: 28px; overflow: hidden; }
.hero p:not(.eyebrow), .partner-card p:not(.eyebrow) { color: #bdc9da; line-height: 1.5; max-width: 560px; }
.score { width: 120px; height: 120px; border: 1px solid #5477a4; border-radius: 50%; display: grid; place-content: center; text-align: center; background: #12243b; }
.score strong { font-size: 38px; }.score span { font-size: 11px; color: #a8b8cb; }
.platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 28px; }
.platform-card { border: 1px solid #2d3441; color: white; border-radius: 17px; padding: 17px; background: #151921; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; text-align: left; gap: 11px; cursor: pointer; }
.platform-card:hover { border-color: #5a779b; transform: translateY(-1px); }.platform-card strong, .platform-card small { display: block; }.platform-card small { color: #9099a8; margin-top: 3px; }
.platform-icon { width: 42px; height: 42px; display: grid; place-content: center; border-radius: 12px; background: #313846; font-weight: 900; }
.steam .platform-icon, .platform-icon.steam { background: #17375d; }.playstation .platform-icon, .platform-icon.playstation { background: #164b9d; }.xbox .platform-icon, .platform-icon.xbox { background: #1d6b35; }
.arrow { color: #7699c7; font-size: 22px; }.ok { color: #6ce697; }.partner-card { position: relative; grid-template-columns: 1fr auto; align-items: center; background: linear-gradient(135deg, #262118, #181b22); border-color: #55482c; }
.primary { background: #3977d2; color: white; border: 0; border-radius: 12px; padding: 12px 17px; text-decoration: none; font-weight: 700; display: inline-block; cursor: pointer; }.full { width: 100%; margin-top: 14px; }
.chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }.chips span { background: #292a29; color: #d7c79f; border: 1px solid #494331; padding: 7px 10px; border-radius: 999px; font-size: 12px; }
nav { position: fixed; z-index: 4; bottom: 0; left: 50%; transform: translateX(-50%); width: min(1160px, 100%); padding: 10px 20px max(12px, env(safe-area-inset-bottom)); background: rgba(13,16,22,.95); backdrop-filter: blur(18px); border-top: 1px solid #2b303a; display: grid; grid-template-columns: repeat(5, 1fr); }
nav button { background: transparent; border: 0; color: #7f8998; display: grid; gap: 4px; place-items: center; font-size: 18px; }nav button span { font-size: 11px; }nav .active { color: #609cf2; }
.gate { min-height: 100vh; display: grid; place-content: center; justify-items: center; text-align: center; padding: 28px; }.gate p { color: #9ca5b3; max-width: 430px; line-height: 1.5; }.lock { font-size: 42px; }.loader { width: 34px; height: 34px; border: 3px solid #263246; border-top-color: #4c8ce8; border-radius: 50%; animation: spin .8s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.overlay { position: fixed; z-index: 10; inset: 0; background: rgba(0,0,0,.72); display: grid; align-items: end; }.modal { position: relative; background: #181c24; border: 1px solid #323946; border-radius: 24px 24px 0 0; padding: 28px 22px max(28px, env(safe-area-inset-bottom)); max-width: 560px; width: 100%; margin: 0 auto; }.modal p { color: #9da6b4; line-height: 1.5; }.modal input { width: 100%; padding: 14px; border-radius: 12px; color: white; background: #10131a; border: 1px solid #343c49; }.close { position: absolute; right: 18px; top: 15px; border: 0; background: transparent; color: #99a1ae; font-size: 28px; }.message { display: block; color: #e9b45f; margin-top: 9px; }
@media (max-width: 650px) { .shell { padding: 20px 14px 100px; }.platform-grid { grid-template-columns: 1fr; }.hero { grid-template-columns: 1fr; }.score { width: auto; height: auto; border-radius: 14px; padding: 14px; display: flex; gap: 8px; align-items: baseline; }.partner-card { grid-template-columns: 1fr; }.member { display: none; } }

.inline-loader { min-height: 45vh; display: grid; place-content: center; }
.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 30px; }
.action-card { color: white; background: #151a23; border: 1px solid #303846; border-radius: 16px; padding: 17px; text-align: left; text-decoration: none; display: grid; gap: 5px; cursor: pointer; }
.action-card strong { margin-top: 5px; }.action-card span { color: #929dac; font-size: 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; }.text-button { color: #72a8f1; background: none; border: 0; cursor: pointer; }
.list-card { background: #151921; border: 1px solid #2d3441; border-radius: 16px; padding: 0 16px; margin-bottom: 28px; }
.request-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid #292f39; }.request-row:last-child { border: 0; }.request-row span { color: #929dac; font-size: 13px; }
.posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.post-card { color: white; text-decoration: none; background: #151921; border: 1px solid #2d3441; border-radius: 15px; overflow: hidden; }.post-card img { width: 100%; height: 110px; object-fit: cover; }.post-card div { padding: 13px; font-size: 13px; line-height: 1.4; }
.page-head { margin-bottom: 24px; }.page-head p:not(.eyebrow) { color: #aeb9c8; max-width: 620px; line-height: 1.5; }
.empty { min-height: 280px; background: #141820; border: 1px dashed #343c49; border-radius: 20px; display: grid; place-content: center; justify-items: center; text-align: center; padding: 30px; color: #9da7b5; }.empty span { font-size: 34px; }.empty.compact { min-height: 90px; }
.achievement-list, .request-list { display: grid; gap: 12px; }.achievement-card, .request-card { background: #151921; border: 1px solid #2d3441; border-radius: 16px; padding: 16px; }.achievement-card { display: grid; grid-template-columns: 58px 1fr; gap: 14px; }.achievement-card img, .achievement-icon { width: 58px; height: 58px; object-fit: cover; border-radius: 12px; display: grid; place-content: center; background: #222936; }.achievement-card strong, .achievement-card small { display: block; }.achievement-card small { color: #8290a4; margin-bottom: 4px; }.achievement-card p { color: #9ca6b5; margin: 7px 0 0; }
.request-card h3 { margin: 10px 0 4px; }.request-card p { color: #a7b0bd; }.request-card footer { display: flex; gap: 16px; color: #8e9bad; font-size: 12px; }.platform-pill { color: #8ebaff; background: #1b2d47; padding: 5px 8px; border-radius: 999px; font-size: 11px; text-transform: uppercase; }
.modal label { display: grid; gap: 6px; color: #aeb7c4; margin-top: 13px; font-size: 13px; }.modal input, .modal select, .modal textarea { width: 100%; padding: 13px; border-radius: 11px; color: white; background: #10131a; border: 1px solid #343c49; }.modal textarea { min-height: 80px; resize: vertical; }.modal label.check { grid-template-columns: auto 1fr; align-items: center; }.modal label.check input { width: auto; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; }.secondary { color: #a9c9f8; background: #17263b; border: 1px solid #31547d; border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.chat-card, .media-submit { background: linear-gradient(135deg, #182940, #141a23); border: 1px solid #315070; border-radius: 20px; padding: 22px; margin-bottom: 28px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px; }.chat-card p:not(.eyebrow), .media-submit p { color: #aeb9c8; line-height: 1.5; }
.screen-tabs { display: flex; gap: 7px; margin: 18px 0; }.screen-tabs button { background: #151a23; color: #8f9baa; border: 1px solid #303846; border-radius: 10px; padding: 9px 13px; cursor: pointer; }.screen-tabs button.active { color: white; background: #285fae; border-color: #3978d4; }
.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.game-card { padding: 0; overflow: hidden; color: white; text-align: left; background: #151921; border: 1px solid #2d3441; border-radius: 17px; cursor: pointer; }.game-card img, .game-cover { width: 100%; height: 112px; object-fit: cover; background: #202633; display: grid; place-content: center; font-size: 34px; }.game-body { padding: 14px; }.game-body h3 { margin: 4px 0 12px; }.game-body small, .game-body span { color: #8f9cab; }.progress { height: 6px; overflow: hidden; background: #29313c; border-radius: 99px; margin-bottom: 8px; }.progress i { display: block; height: 100%; background: #5d9cf0; border-radius: inherit; }
.game-detail-head { display: grid; grid-template-columns: 180px 1fr; align-items: center; gap: 18px; margin: 16px 0 22px; }.game-detail-head img { width: 180px; border-radius: 12px; }.game-detail-head h2 { margin: 4px 0; }.game-detail-head p, .game-detail-head small { color: #91a0b3; }.help-button { margin-top: 10px; color: #a8c9f5; background: #1a2b43; border: 1px solid #31547d; padding: 7px 10px; border-radius: 9px; cursor: pointer; }.achievement-card.locked { opacity: .78; }.achievement-card.unlocked { border-color: #31513c; }
.modal-scroll { max-height: 92vh; overflow-y: auto; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }.request-card footer a { color: #78aaf0; }.media-submit { background: linear-gradient(135deg, #30203e, #171a22); border-color: #563769; }
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.choice-group button { color: #aeb9c8; background: #111720; border: 1px solid #354154; border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.choice-group button.selected { color: white; background: #285fae; border-color: #5594ed; box-shadow: 0 0 0 1px #5594ed inset; }
.auto-genre { color: #78aaf0; margin-top: 5px; }
@media (max-width: 650px) { .quick-grid, .posts-grid { grid-template-columns: 1fr; }.request-row { display: grid; } }
@media (max-width: 650px) { nav { padding-left: 4px; padding-right: 4px; } nav button { font-size: 15px; }.games-grid { grid-template-columns: 1fr; }.chat-card, .media-submit { grid-template-columns: 1fr; }.game-detail-head { grid-template-columns: 1fr; }.game-detail-head img { width: 100%; }.form-grid { grid-template-columns: 1fr; } }