:root {
  --ol-bg: #0b0d12;
  --ol-panel: #141821;
  --ol-line: #2a3140;
  --ol-text: #e8eaef;
  --ol-muted: #9aa3b5;
  --ol-brand: #c0392b;
  --ol-fivem: #2ec4b6;
  --ol-redm: #d4a054;
}

html {
  margin: 0;
  min-height: 100%;
  scrollbar-gutter: stable;
}
body { margin: 0; min-height: 100%; }
body.ol-portal {
  display: flex;
  flex-direction: column;
  padding-top: 72px;
  background: var(--ol-bg);
  color: var(--ol-text);
  font-family: Manrope, system-ui, sans-serif;
}
body.ol-portal a { color: inherit; }
body.ol-portal .ol-zone-tab,
body.ol-portal .ol-zone,
body.ol-portal .ol-zone-bg { display: none !important; }
.ol-portal-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(160px, auto) 1fr minmax(160px, auto);
  align-items: center;
  gap: 18px;
  height: 72px;
  min-height: 72px;
  padding: 0 28px;
  background: #0b0d12;
  border-bottom: 1px solid var(--ol-line);
}
.ol-portal-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font: 700 20px Oswald, sans-serif;
  letter-spacing: .06em;
}
.ol-portal-logo img { width: 42px; height: 42px; object-fit: contain; }
.ol-portal-logo span span { color: var(--ol-brand); }
.ol-portal-nav { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ol-portal-nav > a,
.ol-portal-drop > button,
.ol-portal-drop > a {
  padding: 10px 14px;
  border: 0;
  background: none;
  color: var(--ol-muted);
  font: 600 13px Oswald, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.ol-portal-drop > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ol-portal-nav > a:hover,
.ol-portal-nav > a.is-on,
.ol-portal-drop > button:hover,
.ol-portal-drop > a:hover,
.ol-portal-drop > a.is-on { color: #fff; }
.ol-portal-nav > a.is-on,
.ol-portal-drop > a.is-on { box-shadow: inset 0 -2px 0 var(--ol-brand); }
.ol-portal-drop { position: relative; }
.ol-portal-drop > div {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  padding: 8px;
  background: #1a1f2b;
  border: 1px solid var(--ol-line);
  border-radius: 10px;
}
.ol-portal-drop:hover > div,
.ol-portal-drop:focus-within > div { display: grid; gap: 4px; }
.ol-portal-drop > div a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ol-text);
  font: 600 14px Manrope, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}
.ol-portal-drop > div a:hover { background: #242b3a; }
.ol-portal-drop > div a .fa-car { color: var(--ol-fivem); }
.ol-portal-drop > div a .fa-hat-cowboy { color: var(--ol-redm); }
.ol-portal-who { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ol-auth {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
}
.ol-auth a { color: #fff; text-decoration: none; }
.ol-auth a:hover { color: var(--ol-redm); }
.ol-account { position: relative; }
.ol-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--ol-line);
  border-radius: 999px;
  background: #161b24;
  color: #fff;
  cursor: pointer;
  font: 700 13px Manrope, sans-serif;
}
.ol-account-btn img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.ol-account-btn i { font-size: 10px; color: var(--ol-muted); }
.ol-account-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 220px;
  padding: 8px;
  background: #151a24;
  border: 1px solid var(--ol-line);
  border-radius: 12px;
  z-index: 50;
}
.ol-account.is-open .ol-account-menu { display: grid; gap: 4px; }
.ol-account-menu a {
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--ol-text);
  text-decoration: none;
  font-size: 14px;
}
.ol-account-menu a:hover { background: #242b3a; }
.ol-portal-burger { display: none; background: none; border: 0; color: #fff; font-size: 20px; }
.ol-portal-main { flex: 1; }

.ol-hero {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  min-height: min(82vh, 760px);
  border-bottom: 1px solid var(--ol-line);
}
.ol-hero-copy { padding: 72px 8vw 64px; }
.ol-kicker {
  display: inline-block;
  margin-bottom: 14px;
  color: var(--ol-brand);
  font: 700 12px Oswald, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ol-hero-copy h1 {
  margin: 0 0 16px;
  font: 400 clamp(40px, 5.4vw, 68px)/1.05 Sancreek, Rye, Oswald, serif;
  letter-spacing: .02em;
}
.ol-hero-copy h1 em { color: var(--ol-brand); font-style: normal; }
.ol-hero-copy p { max-width: 520px; margin: 0 0 28px; color: var(--ol-muted); line-height: 1.65; }
.ol-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ol-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 700;
}
.ol-btn-brand { background: var(--ol-brand); color: #fff; }
.ol-btn-ghost { border: 1px solid var(--ol-line); background: #161b24; }
.ol-hero-split { display: grid; grid-template-rows: 1fr 1fr; }
.ol-hero-split a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  text-decoration: none;
  overflow: hidden;
}
.ol-hero-split a::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 28%;
  transform: scale(1.04);
  transition: transform .5s ease;
}
.ol-hero-split a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,18,.12) 20%, rgba(11,13,18,.88) 100%);
}
.ol-hero-split a:hover::before { transform: scale(1.08); }
.ol-tile-fivem::before { background-image: url('/assets/img/olrp-hero-fivem.jpg?v=1'); }
.ol-tile-redm::before {
  background-image: url('/assets/img/olrp-hero-redm.jpg?v=4');
  background-position: center 40%;
}
.ol-tile-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.ol-hero-split a > * { position: relative; z-index: 1; }
.ol-hero-split small {
  color: #d7dde8;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  text-shadow: 0 1px 8px #000;
}
.ol-hero-split strong { display: block; margin-top: 6px; font: 700 28px Oswald, sans-serif; text-shadow: 0 2px 14px #000; }
.ol-tile-fivem strong { color: #7ef0e4; }
.ol-tile-redm strong { color: #f0c27a; }

.ol-wrap { width: min(1120px, calc(100% - 40px)); margin: 0 auto; padding: 56px 0 72px; }
.ol-wrap h2 { margin: 0 0 8px; font: 700 32px Oswald, sans-serif; }
.ol-lead { color: var(--ol-muted); margin: 0 0 28px; }

.ol-servers { display: grid; gap: 12px; }
.ol-server {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--ol-panel);
  border: 1px solid var(--ol-line);
  border-radius: 12px;
  text-decoration: none;
}
.ol-server-brand {
  position: relative;
  width: 42px;
  height: 42px;
}
.ol-server-brand img {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}
.ol-server-brand .ol-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  box-shadow: 0 0 0 2px var(--ol-panel);
}
.ol-dot { width: 10px; height: 10px; border-radius: 50%; background: #3d4658; }
.ol-dot.is-on { background: #3ecf8e; box-shadow: 0 0 10px #3ecf8e; }
.ol-server b { display: block; font: 700 18px Oswald, sans-serif; }
.ol-server span { color: var(--ol-muted); font-size: 13px; }
.ol-count { font: 700 18px Oswald, sans-serif; color: #fff; }
.ol-join {
  padding: 8px 12px;
  border-radius: 8px;
  background: #22283a;
  font-size: 13px;
  font-weight: 700;
}

.ol-games { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ol-game {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 28px;
  border-radius: 16px;
  border: 1px solid var(--ol-line);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-size: cover;
  background-position: center;
}
.ol-game::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11,13,18,.2), rgba(11,13,18,.88));
}
.ol-game > * { position: relative; z-index: 1; }
.ol-game-fivem { background-image: url('/assets/img/olrp-hero-fivem.jpg?v=1'); }
.ol-game-redm { background-image: url('/assets/img/olrp-hero-redm.jpg?v=4'); }
.ol-hub-banners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 0 0 18px;
}
.ol-hub-banners a { display: block; line-height: 0; }
.ol-hub-banners .ol-banner { margin: 0; }
.ol-banner {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 28px;
  border-radius: 14px;
  border: 1px solid var(--ol-line);
  background: #cbb58a;
}
.ol-game small { letter-spacing: .12em; text-transform: uppercase; font-size: 11px; color: #d7dde8; }
.ol-game h3 { margin: 8px 0; font: 700 28px Oswald, sans-serif; }
.ol-game p { margin: 0; color: #c5ccd8; }

.ol-prose { max-width: 740px; }
.ol-prose p { color: var(--ol-muted); line-height: 1.75; }
.ol-prose h2 { margin-top: 36px; }

.ol-portal-foot {
  padding: 28px;
  border-top: 1px solid var(--ol-line);
  color: var(--ol-muted);
  font-size: 13px;
  text-align: center;
}
.ol-portal-foot strong { display: block; color: #fff; margin-bottom: 4px; }
.ol-portal-foot nav { display: flex; justify-content: center; gap: 16px; margin: 12px 0; }
.ol-portal-foot a { text-decoration: none; }

.ol-btn-fivem { background: #16343a; color: var(--ol-fivem); border: 1px solid rgba(46, 196, 182, .35); }
.ol-btn-redm { background: #2a1c10; color: var(--ol-redm); border: 1px solid rgba(212, 160, 84, .35); }

.ol-login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 80px;
  min-height: 70vh;
}
.ol-login-card {
  width: min(460px, 100%);
  padding: 36px 32px;
  background: var(--ol-panel);
  border: 1px solid var(--ol-line);
  border-radius: 16px;
  text-align: center;
}
.ol-login-card h1 {
  margin: 8px 0 12px;
  font: 700 36px Oswald, sans-serif;
}
.ol-login-card p { color: var(--ol-muted); line-height: 1.65; margin: 0 0 28px; }
.ol-login-card .ol-btn { width: 100%; justify-content: center; }

.ol-rule {
  margin: 0 0 16px;
  padding: 16px 18px;
  background: var(--ol-panel);
  border: 1px solid var(--ol-line);
  border-radius: 12px;
}
.ol-rule strong { display: block; margin-bottom: 6px; font: 700 16px Oswald, sans-serif; letter-spacing: .04em; }
.ol-rule p { margin: 0; color: var(--ol-muted); line-height: 1.6; }
.ol-rule ul { margin: 8px 0 0; padding-left: 18px; color: var(--ol-muted); }
.ol-rule .ol-ex {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid #3ecf8e;
  background: rgba(62, 207, 142, .08);
  color: #cfe8dc;
  font-size: 14px;
}
.ol-rule .warn { color: #ff6b6b; font-weight: 700; }

.ol-doc { max-width: 820px; }
.ol-doc-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ol-line);
}
.ol-doc-row h2 {
  margin: 0;
  color: var(--ol-redm);
  font: 700 13px Oswald, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ol-doc-row p, .ol-doc-row li { margin: 0; color: var(--ol-muted); line-height: 1.7; }
.ol-doc-row ul { margin: 8px 0 0; padding-left: 18px; }
.ol-note {
  margin-top: 28px;
  padding: 16px 18px;
  border-left: 3px solid var(--ol-brand);
  background: rgba(192, 57, 43, .1);
  color: var(--ol-muted);
  line-height: 1.65;
}

.ol-steps { display: grid; gap: 14px; margin: 0 0 28px; padding: 0; list-style: none; }
.ol-step {
  padding: 20px 22px;
  background: var(--ol-panel);
  border: 1px solid var(--ol-line);
  border-radius: 12px;
}
.ol-step b { display: block; margin-bottom: 6px; color: var(--ol-redm); font: 700 12px Oswald, sans-serif; letter-spacing: .14em; }
.ol-step h3 { margin: 0 0 8px; font: 700 22px Oswald, sans-serif; }
.ol-step p { margin: 0 0 14px; color: var(--ol-muted); line-height: 1.65; }

.ol-law-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 28px; }
.ol-law {
  padding: 18px;
  background: var(--ol-panel);
  border: 1px solid var(--ol-line);
  border-radius: 12px;
}
.ol-law small { color: var(--ol-redm); letter-spacing: .1em; text-transform: uppercase; font-size: 11px; }
.ol-law h3 { margin: 8px 0; font: 700 18px Oswald, sans-serif; }
.ol-law p { margin: 0 0 12px; color: var(--ol-muted); line-height: 1.6; }
.ol-law em { display: flex; justify-content: space-between; gap: 12px; font-style: normal; color: #d7dde8; font-size: 13px; }

.ol-chapter {
  margin: 0 0 28px;
  padding: 22px;
  background: var(--ol-panel);
  border: 1px solid var(--ol-line);
  border-radius: 12px;
}
.ol-chapter h3 { margin: 0 0 10px; font: 700 24px Oswald, sans-serif; }
.ol-chapter p { margin: 0 0 12px; color: var(--ol-muted); line-height: 1.75; }
.ol-chapter p:last-child { margin-bottom: 0; }
.ol-quote {
  margin: 0;
  padding: 20px 22px;
  border-left: 3px solid var(--ol-redm);
  color: #e8eaef;
  font: 500 18px/1.5 Oswald, sans-serif;
}
.ol-quote span { display: block; margin-top: 10px; color: var(--ol-muted); font: 400 13px Manrope, sans-serif; }

@media (max-width: 860px) {
  .ol-portal-top { grid-template-columns: auto auto 1fr; }
  .ol-portal-burger { display: block; }
  .ol-portal-nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    padding: 12px;
    background: #12151c;
    flex-direction: column;
    align-items: stretch;
  }
  .ol-portal-nav.is-open { display: flex; }
  .ol-hero, .ol-games, .ol-law-grid, .ol-doc-row, .ol-hub-banners { grid-template-columns: 1fr; }
  .ol-hero-split { min-height: 280px; }
  .ol-server { grid-template-columns: 42px 1fr auto; }
  .ol-join { grid-column: 2 / -1; }
}