:root {
  --social-panel: rgba(15, 17, 18, .94);
  --social-card: rgba(20, 22, 23, .92);
  --social-line: rgba(255,255,255,.10);
  --social-muted: #9fa6aa;
  --social-accent: #d76b29;
  --social-accent-2: #f49a4a;
  --social-green: #4bbf73;
}
* { box-sizing: border-box; }
.social-page { min-height: 100vh; background: #08090a url('/recruit-board-bg.png') center/cover fixed; color: #f7f4ef; }
.social-page::before { content:""; position:fixed; inset:0; background:rgba(4,5,6,.88); backdrop-filter: blur(4px); pointer-events:none; }
.social-topbar { position:sticky; top:0; z-index:40; height:72px; padding:0 max(20px, calc((100vw - 1440px)/2)); display:flex; align-items:center; gap:26px; background:rgba(7,8,9,.96); border-bottom:1px solid var(--social-line); }
.social-topbar .brand { flex:0 0 auto; }
.social-topnav { display:flex; gap:4px; margin:auto; }
.social-topnav a { color:#c6c9cb; text-transform:uppercase; font-size:12px; letter-spacing:.08em; font-weight:800; padding:16px 14px; text-decoration:none; border-bottom:2px solid transparent; }
.social-topnav a:hover { color:#fff; border-color:var(--social-accent); }
.social-top-actions { display:flex; align-items:center; gap:10px; }
.social-icon-button { position:relative; width:42px; height:42px; border:1px solid var(--social-line); background:#101213; color:#fff; cursor:pointer; }
.social-icon-button b, .social-nav b { min-width:18px; height:18px; padding:0 5px; border-radius:20px; display:inline-grid; place-items:center; background:#d6532d; color:#fff; font-size:10px; }
.social-icon-button b { position:absolute; right:-5px; top:-5px; }
.social-main { position:relative; z-index:1; max-width:1440px; margin:0 auto; padding:24px 20px 60px; }
.social-auth { min-height:calc(100vh - 120px); display:grid; place-items:center; }
.social-auth-card { width:min(560px, 100%); padding:46px; background:var(--social-panel); border:1px solid var(--social-line); box-shadow:0 30px 90px #000; }
.social-auth-card h1 { font-size:clamp(38px, 7vw, 72px); line-height:.92; margin:12px 0 18px; text-transform:uppercase; }
.social-auth-card p { color:var(--social-muted); font-size:18px; margin-bottom:28px; }
.social-shell { display:grid; grid-template-columns:250px minmax(0,1fr); min-height:calc(100vh - 120px); border:1px solid var(--social-line); background:rgba(8,9,10,.86); }
.social-sidebar { position:sticky; top:96px; align-self:start; min-height:calc(100vh - 120px); padding:18px 14px; border-right:1px solid var(--social-line); background:rgba(9,10,11,.94); }
.social-user-card { display:flex; align-items:center; gap:12px; width:100%; padding:12px; background:transparent; border:0; color:#fff; text-align:left; cursor:pointer; border-bottom:1px solid var(--social-line); }
.social-user-card img { width:48px; height:48px; border-radius:50%; object-fit:cover; border:1px solid rgba(255,255,255,.2); }
.social-user-card span { display:grid; min-width:0; }
.social-user-card strong { overflow:hidden; text-overflow:ellipsis; }
.social-user-card small { color:var(--social-muted); overflow:hidden; text-overflow:ellipsis; }
.social-nav { display:grid; gap:5px; padding:18px 0; }
.social-nav button, .social-nav a { display:flex; align-items:center; gap:11px; width:100%; padding:13px 14px; border:1px solid transparent; background:transparent; color:#aeb4b8; text-align:left; font-size:14px; cursor:pointer; }
.social-nav button span, .social-nav a span { width:20px; text-align:center; color:#717a80; }
.social-nav button:hover, .social-nav button.is-active, .social-nav a:hover { color:#fff; border-color:#69411e; background:linear-gradient(90deg, rgba(104,57,25,.5), rgba(104,57,25,.08)); }
.social-nav button b { margin-left:auto; }
.social-nav-divider { margin:9px 14px 2px; color:#636a6e; font-size:9px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.social-side-status { margin-top:22px; padding:14px; border:1px solid var(--social-line); background:#111314; display:grid; gap:6px; }
.social-side-status span, .social-side-status small { color:var(--social-muted); font-size:11px; }
.social-side-status strong { font-size:13px; }
.social-side-status i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--social-green); box-shadow:0 0 12px var(--social-green); }
.social-content { min-width:0; padding:30px; }
.social-panel { display:none; }
.social-panel.is-active { display:block; animation:socialFade .18s ease; }
@keyframes socialFade { from{opacity:.5; transform:translateY(5px)} to{opacity:1; transform:none} }
.social-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:24px; }
.social-heading h1 { margin:5px 0 0; font-size:clamp(34px, 5vw, 60px); line-height:.95; text-transform:uppercase; letter-spacing:-.04em; }
.feed-filter-row, .social-subnav { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px; }
.feed-filter-row button, .social-subnav button { border:1px solid var(--social-line); background:#111314; color:#9da3a7; padding:10px 15px; cursor:pointer; font-weight:800; text-transform:uppercase; font-size:11px; }
.feed-filter-row button.is-active, .social-subnav button.is-active { color:#fff; border-color:#b75e26; background:#6f3518; }
.social-feed { display:grid; gap:16px; }
.feed-card { background:var(--social-card); border:1px solid var(--social-line); overflow:hidden; }
.feed-card-head { display:flex; gap:12px; align-items:center; padding:16px 18px 12px; }
.feed-card-head img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.feed-card-head div { display:grid; min-width:0; }
.feed-card-head small { color:var(--social-muted); }
.feed-card-body { padding:0 18px 18px; }
.feed-card-body p { white-space:pre-line; line-height:1.55; }
.feed-card-media { display:block; width:100%; max-height:620px; object-fit:cover; background:#050607; }
.feed-card-actions { display:flex; flex-wrap:wrap; gap:8px; padding:12px 18px 16px; border-top:1px solid var(--social-line); }
.feed-action { border:1px solid var(--social-line); background:#111314; color:#c8ccce; padding:8px 12px; cursor:pointer; }
.feed-action.is-active { border-color:var(--social-accent); color:#fff; background:#5b2e18; }
.feed-meta-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid rgba(215,107,41,.55); color:#e8a16e; padding:5px 8px; font-size:11px; text-transform:uppercase; font-weight:900; }
.compatibility { margin-left:auto; font-size:12px; color:#8be3a9; font-weight:900; }
.passport-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:18px; }
.social-form, .reputation-card, .loadout-card, .collapsible-form { background:var(--social-card); border:1px solid var(--social-line); padding:22px; }
.social-form { display:grid; gap:15px; }
.social-form label { display:grid; gap:7px; color:#b5babd; font-size:12px; }
.social-form input, .social-form textarea, .social-form select, .loadout-card input, .admin-search-row input, .comment-form textarea { width:100%; border:1px solid rgba(255,255,255,.14); background:#090a0b; color:#fff; padding:13px 14px; outline:none; }
.social-form input:focus, .social-form textarea:focus, .social-form select:focus, .loadout-card input:focus { border-color:var(--social-accent); }
.social-form-grid { display:grid; gap:14px; }
.social-form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.social-form-grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.social-form-grid.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.check-row { display:flex!important; align-items:center; gap:10px!important; }
.check-row input { width:auto!important; }
.passport-side { display:grid; align-content:start; gap:18px; }
.reputation-card, .loadout-card { display:grid; gap:12px; }
.reputation-card > strong { font-size:64px; line-height:.9; color:#fff; }
.reputation-card > small { color:var(--social-muted); }
.reputation-row { display:grid; grid-template-columns:100px 1fr 28px; gap:8px; align-items:center; font-size:11px; }
.reputation-track { height:6px; background:#292d2f; }
.reputation-track i { display:block; height:100%; background:linear-gradient(90deg,#8c421e,#f29b4c); }
#loadoutList { display:grid; gap:8px; }
.loadout-item { display:flex; gap:8px; justify-content:space-between; align-items:center; padding:9px; border:1px solid var(--social-line); }
.social-subpanel { display:none; }
.social-subpanel.is-active { display:block; }
.social-card-grid, .server-grid, .wanted-grid, .task-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.match-card, .server-card, .wanted-card, .task-card, .chronicle-card { border:1px solid var(--social-line); background:var(--social-card); padding:18px; display:grid; gap:12px; }
.match-card-user { display:flex; align-items:center; gap:10px; }
.match-card-user img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
.match-card h3, .server-card h3, .wanted-card h3, .task-card h3, .chronicle-card h3 { margin:0; }
.match-tags { display:flex; flex-wrap:wrap; gap:6px; }
.match-tags span { padding:5px 8px; border:1px solid var(--social-line); color:#bcc1c4; font-size:11px; }
.match-score { font-size:36px; color:#79d797; font-weight:900; }
.creation-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.collapsible-form { margin-bottom:18px; }
.server-card-top { display:flex; justify-content:space-between; gap:10px; }
.server-status { color:#75d994; font-size:11px; text-transform:uppercase; font-weight:900; }
.server-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.server-details span { padding:8px; background:#101213; border:1px solid var(--social-line); color:#bfc4c7; font-size:12px; }
.chronicle-list { display:grid; gap:16px; margin-top:20px; }
.chronicle-event { display:grid; grid-template-columns:70px minmax(0,1fr); gap:12px; padding:14px 0; border-top:1px solid var(--social-line); }
.chronicle-event time { color:#e68b4a; font-size:11px; }
.chronicle-event img { max-width:280px; max-height:240px; object-fit:cover; display:block; margin-top:10px; }
.task-card.is-done { opacity:.62; }
.task-reward { font-size:28px; color:#f2a05c; font-weight:900; }
.notification-list, .admin-list { display:grid; gap:10px; }
.notification-item, .admin-item { display:flex; justify-content:space-between; gap:16px; padding:16px; background:var(--social-card); border:1px solid var(--social-line); }
.notification-item.is-unread { border-left:3px solid var(--social-accent); }
.notification-item p, .admin-item p { margin:5px 0 0; color:var(--social-muted); }
.notification-item time, .admin-item time { color:#81898e; font-size:11px; white-space:nowrap; }
.admin-search-row { display:flex; gap:8px; margin-bottom:14px; }
.admin-search-row input { flex:1; }
.admin-actions { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.social-dialog { width:min(680px, calc(100vw - 28px)); max-height:85vh; overflow:auto; border:1px solid var(--social-line); background:#101213; color:#fff; padding:26px; box-shadow:0 30px 100px #000; }
.social-dialog::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(6px); }
.dialog-close { float:right; width:36px; height:36px; border:1px solid var(--social-line); color:#fff; background:#151718; cursor:pointer; font-size:22px; }
.comments-list { display:grid; gap:10px; margin:18px 0; max-height:45vh; overflow:auto; }
.comment-item { display:grid; grid-template-columns:38px 1fr; gap:10px; padding:11px; border:1px solid var(--social-line); }
.comment-item img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.comment-item p { margin:4px 0; white-space:pre-line; }
.comment-item small { color:var(--social-muted); }
.comment-form { display:grid; gap:10px; }
.user-dialog-profile { display:grid; gap:16px; }
.user-dialog-head { display:flex; gap:15px; align-items:center; }
.user-dialog-head img { width:86px; height:86px; border-radius:50%; object-fit:cover; }
.user-dialog-head h2 { margin:0; font-size:32px; }
.user-dialog-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.user-dialog-stats div { padding:12px; border:1px solid var(--social-line); text-align:center; }
.user-dialog-stats strong { display:block; font-size:24px; }
.review-form { display:grid; gap:10px; border-top:1px solid var(--social-line); padding-top:16px; }
.review-scores { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.toast-region { position:fixed; right:18px; bottom:18px; z-index:100; display:grid; gap:8px; }
.toast-item { padding:13px 16px; background:#181b1d; border:1px solid var(--social-line); color:#fff; min-width:240px; box-shadow:0 15px 40px #000; }
.toast-item.error { border-color:#a34a42; }
.toast-item.success { border-color:#3c9f61; }

@media (max-width:1100px) {
  .social-shell { grid-template-columns:210px minmax(0,1fr); }
  .social-card-grid, .server-grid, .wanted-grid, .task-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .passport-layout { grid-template-columns:1fr; }
  .social-form-grid.three, .social-form-grid.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .social-topbar { height:auto; min-height:64px; padding:8px 12px; flex-wrap:wrap; }
  .social-topnav { order:3; width:100%; overflow:auto; margin:0; }
  .social-topnav a { padding:10px; white-space:nowrap; }
  .social-main { padding:12px 8px 40px; }
  .social-shell { display:block; border:0; }
  .social-sidebar { position:static; min-height:0; border:1px solid var(--social-line); margin-bottom:10px; }
  .social-nav { display:flex; overflow:auto; padding:10px 0 0; }
  .social-nav button, .social-nav a { flex:0 0 auto; width:auto; white-space:nowrap; }
  .social-nav-divider { display:none; }
  .social-side-status { display:none; }
  .social-content { padding:16px 8px; }
  .social-heading { align-items:flex-end; }
  .social-heading h1 { font-size:38px; }
  .social-card-grid, .server-grid, .wanted-grid, .task-grid, .creation-columns { grid-template-columns:1fr; }
  .social-form-grid.two, .social-form-grid.three, .social-form-grid.four { grid-template-columns:1fr; }
  .feed-card-actions { overflow:auto; flex-wrap:nowrap; }
  .feed-action { white-space:nowrap; }
  .user-dialog-stats { grid-template-columns:repeat(2,1fr); }
}

.online-dot { width:9px; height:9px; border-radius:50%; background:#52d777; box-shadow:0 0 0 3px rgba(82,215,119,.15),0 0 12px rgba(82,215,119,.65); flex:0 0 auto; }

/* V17 player recruitment and Steam verification */
.steam-hours-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--social-line);background:#101315}.steam-hours-card>div{display:grid;gap:4px}.steam-hours-card span,.role-field>span,.filter-role-block>span{color:#aeb4b8;font-size:12px}.steam-hours-card strong{font-size:24px}.steam-hours-card small{color:var(--social-muted)}.steam-hours-card.is-verified{border-color:rgba(80,190,115,.55);background:rgba(44,112,68,.12)}.role-field,.filter-role-block{display:grid;gap:9px}.passport-role-grid label:has(input:checked),.filter-role-grid label:has(input:checked){border-color:var(--social-accent);background:rgba(199,95,35,.13);color:#fff}.player-search-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.player-search-toolbar h2{margin:4px 0 0}.filter-toggle span{margin-left:7px}.player-filter-panel{display:grid;gap:14px;padding:18px;margin-bottom:16px;border:1px solid var(--social-line);background:var(--social-card)}.player-filter-panel[hidden]{display:none}.player-search-meta,.player-primary-stats{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.steam-verified-badge{font-size:11px;color:#aeb3b7;padding:5px 8px;border:1px solid var(--social-line)}.steam-verified-badge.is-verified{color:#81dda0;border-color:rgba(80,190,115,.5)}.player-primary-stats strong,.player-primary-stats span{padding:7px 9px;background:#101213;border:1px solid var(--social-line);font-size:12px}.social-subnav b{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:#b75e26;color:#fff;font-size:10px}@media(max-width:760px){.steam-hours-card,.player-search-toolbar{align-items:stretch;flex-direction:column}.role-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.role-helper { display:block; margin-top:8px; color:#7f898f; font-size:11px; line-height:1.45; }
.form-note { display:grid; gap:5px; padding:13px 14px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.025); }
.form-note strong { font-size:12px; }
.form-note span { color:#8f989d; font-size:11px; line-height:1.45; }