:root { --bg:#faf9f5; --card:#fff; --border:#e7e5de; --text:#18181b; --muted:#a8a29e; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
.wrap { max-width:820px; margin:0 auto; padding:32px 20px 48px; }
.head { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.brand { display:flex; align-items:center; gap:12px; font-size:22px; font-weight:700; }
.logo { width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,#d33,#a11);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.kook { background:#1a1a1a; color:#fff; font-size:12px; font-weight:600; letter-spacing:.06em;
  padding:11px 18px; border-radius:7px; text-decoration:none; }
.banner { border-radius:10px; padding:16px 20px; margin-bottom:28px; font-size:16px; font-weight:600;
  display:flex; align-items:center; gap:10px; }
.banner .dot { width:10px; height:10px; border-radius:50%; }
.banner.ok { background:#1e3a2b; color:#d1fae5; } .banner.ok .dot { background:#34d399; }
.banner.warn { background:#fffbeb; color:#b45309; border:1px solid #fde68a; } .banner.warn .dot { background:#f59e0b; }
.banner.down { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; } .banner.down .dot { background:#ef4444; }
.group { border:1px solid var(--border); border-radius:10px; margin-bottom:16px; background:var(--card); }
.group-head { font-size:13px; font-weight:700; color:#57534e; padding:13px 18px;
  background:var(--bg); border-bottom:1px solid var(--border); }
.comp { padding:16px 18px; border-bottom:1px solid #f0efea; }
.comp:last-child { border-bottom:none; }
.comp-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.comp-name { font-size:15px; font-weight:600; color:#292524; }
.comp-right { display:flex; align-items:center; }
.metric { font-size:13px; color:var(--muted); margin-right:14px; }
.status { font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.status .dot { width:9px; height:9px; border-radius:50%; }
.status.up { color:#15803d; } .status.up .dot { background:#16a34a; }
.status.degraded { color:#b45309; } .status.degraded .dot { background:#f59e0b; }
.status.down { color:#b91c1c; } .status.down .dot { background:#ef4444; }
.status.unknown { color:#78716c; } .status.unknown .dot { background:#a8a29e; }
.bars { display:flex; gap:2px; height:30px; }
.bar { flex:1; border-radius:2px; background:#7cb518; position:relative; }
.bar.y { background:#e8a33d; } .bar.r { background:#d64545; } .bar.m { background:#60a5fa; } .bar.empty { background:#e4e4e7; }
.bar-tip { display:none; position:absolute; left:50%; bottom:38px; transform:translateX(-50%); z-index:5;
  min-width:190px; max-width:260px; background:#27272a; color:#fafafa; border-radius:6px; padding:9px 10px; font-size:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.18); pointer-events:none; }
.bar-tip::after { content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  border-left:6px solid transparent; border-right:6px solid transparent; border-top:6px solid #27272a; }
.bar:hover .bar-tip { display:block; }
.tip-date { color:#d4d4d8; margin-bottom:3px; }
.tip-status { font-weight:700; margin-bottom:3px; }
.tip-detail { color:#e4e4e7; }
.tip-related { color:#a1a1aa; font-size:11px; text-transform:uppercase; margin-top:9px; margin-bottom:3px; }
.bars-foot { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-top:8px; }
.bars-foot .pct { color:#57534e; }
.foot { text-align:center; font-size:12px; color:var(--muted); margin-top:24px; }
.incident-active { border:1px solid #fde68a; border-left:4px solid #f59e0b; border-radius:10px; padding:14px 16px; margin-bottom:18px; background:#fff; }
.incident-active.down { border-color:#fecaca; border-left-color:#ef4444; }
.incident-head { font-size:15px; font-weight:600; color:#27272a; }
.incident-tag { font-size:11px; font-weight:600; color:#b45309; background:#fef3c7; border-radius:5px; padding:2px 7px; margin-right:6px; }
.incident-status { font-size:12px; color:#a1a1aa; }
.incident-affected { font-size:12px; color:#a1a1aa; margin-top:4px; }
.timeline { border-left:2px solid #f0efea; padding-left:12px; margin-top:10px; margin-left:2px; }
.tl { margin-bottom:8px; font-size:13px; }
.tl-stage { font-weight:600; color:#71717a; }
.tl-time { color:#a8a29e; font-size:12px; margin-left:6px; }
.tl-msg { color:#3f3f46; margin-top:2px; }
.resolved { font-size:11px; color:#16a34a; border:1px solid #bbf7d0; background:#f0fdf4; border-radius:4px; padding:1px 7px; margin-left:6px; }
details summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px; }
details summary::-webkit-details-marker { display:none; }
details summary::before { content:"+"; width:18px; height:18px; border-radius:4px; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; color:#78716c; font-size:13px; }
details[open] summary::before { content:"-"; }
.issue-type { font-size:11px; color:#57534e; border:1px solid #e7e5de; border-radius:5px; padding:2px 7px; margin-right:8px; white-space:nowrap; }
.issue-note { font-size:13px; line-height:1.6; color:#3f3f46; margin:4px 0 8px; }
.issue-meta { font-size:11px; color:#a8a29e; margin-top:8px; }
.filter-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.filter-tab { color:#57534e; border:1px solid var(--border); background:#fff; border-radius:6px; padding:7px 11px; font-size:12px; font-weight:600; text-decoration:none; }
.filter-tab.active { color:#fff; background:#1a1a1a; border-color:#1a1a1a; }
.pager { display:flex; align-items:center; justify-content:center; gap:12px; margin:18px 0 8px; font-size:12px; color:#78716c; }
.pager-link { color:#292524; border:1px solid var(--border); background:#fff; border-radius:6px; padding:7px 11px; text-decoration:none; font-weight:600; }
.pager-link.disabled { color:#c7c2ba; background:#fafafa; }
.pager-current { color:#78716c; }
input, textarea, select { border:1px solid var(--border); border-radius:6px; padding:9px 10px; font:inherit; background:#fff; color:var(--text); }
textarea { min-height:72px; resize:vertical; }
.totp-qr { width:220px; height:220px; border:1px solid var(--border); border-radius:8px; background:#fff; padding:8px; }

/* Public RIOTROCK site --------------------------------------------------- */
.site-body { --site-bg:#0b0b0c; --site-card:#141416; --site-line:#28282b; --site-text:#f5f3ee; --site-muted:#9b9994; --site-red:#d83932;
  background:var(--site-bg); color:var(--site-text); }
.site-body a { color:inherit; }
.site-shell { width:min(1180px,calc(100% - 40px)); min-height:100vh; margin:0 auto; }
.site-header { min-height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; border-bottom:1px solid var(--site-line); }
.site-brand { display:inline-flex; align-items:center; gap:11px; width:max-content; color:var(--site-text); text-decoration:none; font-size:15px; font-weight:800; letter-spacing:.13em; }
.site-logo { display:inline-grid; place-items:center; width:31px; height:31px; border-radius:7px; color:#fff; background:linear-gradient(145deg,#e64239,#941712); font-size:15px; letter-spacing:0; box-shadow:0 7px 24px rgba(216,57,50,.22); }
.site-nav { display:flex; align-items:center; gap:28px; }
.site-nav a { position:relative; padding:31px 0 28px; color:var(--site-muted); font-size:13px; font-weight:650; text-decoration:none; white-space:nowrap; }
.site-nav a:hover,.site-nav a.active { color:var(--site-text); }
.site-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--site-red); }
.site-nav-cta { justify-self:end; padding:10px 16px; border:1px solid #3a393c; border-radius:6px; color:var(--site-text); text-decoration:none; font-size:12px; font-weight:700; }
.site-nav-cta:hover { border-color:#68666b; background:#18181a; }
.eyebrow { color:#e55650; font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.fivem-hero { min-height:610px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:72px; padding:76px 0 68px; border-bottom:1px solid var(--site-line); }
.hero-copy h1,.brand-home h1 { max-width:760px; margin:20px 0 26px; font-size:clamp(46px,6.1vw,82px); line-height:1.03; letter-spacing:-.055em; }
.hero-copy h1 span,.brand-home h1 span { color:#727177; }
.hero-copy>p { max-width:620px; color:#aaa8a2; font-size:17px; line-height:1.8; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.primary-action,.secondary-action { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 22px; border-radius:6px; font-size:13px; font-weight:800; text-decoration:none; }
.primary-action { color:#fff; background:var(--site-red); box-shadow:0 12px 30px rgba(216,57,50,.18); }
.primary-action:hover { background:#e84a43; }
.secondary-action { color:var(--site-text); border:1px solid #353538; }
.secondary-action:hover { background:#151517; border-color:#535257; }
.hero-signal { position:relative; aspect-ratio:1/1; min-height:390px; overflow:hidden; border:1px solid #262629; border-radius:14px; background:radial-gradient(circle at 70% 24%,rgba(216,57,50,.25),transparent 38%),linear-gradient(145deg,#171719,#0d0d0e); }
.signal-grid { position:absolute; inset:0; opacity:.22; background-image:linear-gradient(#45454a 1px,transparent 1px),linear-gradient(90deg,#45454a 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to bottom,black,transparent 85%); }
.signal-mark { position:absolute; right:-4%; top:4%; color:#232326; font-size:clamp(150px,20vw,260px); line-height:1; font-weight:950; letter-spacing:-.12em; transform:rotate(-8deg); }
.live-card { position:absolute; left:28px; right:28px; bottom:28px; padding:20px; border:1px solid rgba(255,255,255,.11); border-radius:9px; background:rgba(10,10,11,.82); backdrop-filter:blur(12px); }
.live-label { display:flex; align-items:center; gap:8px; color:#b4b2ad; font-size:12px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#86858b; box-shadow:0 0 0 4px rgba(134,133,139,.1); }
.live-dot.up { background:#47c87a; box-shadow:0 0 0 4px rgba(71,200,122,.1); }
.live-dot.degraded,.live-dot.maintenance { background:#e6a645; box-shadow:0 0 0 4px rgba(230,166,69,.1); }
.live-dot.down { background:#ea5550; box-shadow:0 0 0 4px rgba(234,85,80,.1); }
.live-card strong { display:block; margin:11px 0 14px; font-size:22px; }
.live-card a { color:#a9a7a2; font-size:12px; text-decoration:none; }
.live-card a:hover { color:#fff; }
.feature-strip { display:grid; grid-template-columns:repeat(3,1fr); border-bottom:1px solid var(--site-line); }
.feature-strip article { padding:42px 36px 42px 0; }
.feature-strip article+article { padding-left:36px; border-left:1px solid var(--site-line); }
.feature-strip span { color:#5e5d61; font-size:11px; font-weight:800; }
.feature-strip h2 { margin:14px 0 10px; font-size:18px; }
.feature-strip p { max-width:270px; margin:0; color:var(--site-muted); font-size:13px; line-height:1.7; }
.site-section { padding:92px 0; border-bottom:1px solid var(--site-line); }
.section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; }
.section-heading h2 { margin:9px 0 0; font-size:32px; letter-spacing:-.025em; }
.section-heading>a { color:#aaa8a2; font-size:12px; text-decoration:none; }
.section-heading>a:hover { color:#fff; }
.news-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.news-grid-list { grid-template-columns:repeat(2,1fr); }
.news-card { min-width:0; overflow:hidden; border:1px solid var(--site-line); border-radius:10px; background:var(--site-card); color:var(--site-text); text-decoration:none; transition:transform .18s ease,border-color .18s ease; }
.news-card:hover { transform:translateY(-3px); border-color:#46454a; }
.news-cover { aspect-ratio:16/8.5; background-position:center; background-size:cover; border-bottom:1px solid var(--site-line); }
.news-cover-placeholder { position:relative; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle at 75% 15%,rgba(216,57,50,.34),transparent 35%),#111113; }
.news-cover-placeholder::before { content:""; position:absolute; inset:-50%; background:repeating-linear-gradient(125deg,transparent 0 28px,rgba(255,255,255,.025) 29px 30px); transform:rotate(6deg); }
.news-cover-placeholder span { position:relative; color:#343438; font-size:clamp(22px,4vw,50px); font-weight:950; letter-spacing:-.06em; }
.news-card-body { padding:21px 21px 24px; }
.news-meta { display:flex; align-items:center; gap:10px; color:#77767b; font-size:10px; font-weight:700; letter-spacing:.06em; }
.news-meta span { color:#e2605a; }
.news-card h2,.news-card h3 { margin:14px 0 9px; font-size:19px; line-height:1.35; }
.news-card p { display:-webkit-box; overflow:hidden; margin:0; color:#9c9a95; font-size:13px; line-height:1.7; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.empty-panel { grid-column:1/-1; padding:44px; border:1px dashed #343337; border-radius:10px; background:#101011; }
.empty-panel>span { color:#55545a; font-size:10px; font-weight:800; letter-spacing:.16em; }
.empty-panel h2,.empty-panel h3 { margin:13px 0 8px; font-size:20px; }
.empty-panel p { margin:0; color:var(--site-muted); font-size:13px; }
.development-section { padding-bottom:100px; }
.development-list { border-top:1px solid var(--site-line); }
.development-row { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:21px 4px; border-bottom:1px solid var(--site-line); color:var(--site-text); text-decoration:none; }
.development-row:hover { background:#0f0f10; }
.development-row.static:hover { background:transparent; }
.development-row>div { display:flex; align-items:center; gap:16px; }
.development-row h3 { margin:0; font-size:15px; }
.issue-type-dark { min-width:56px; color:#77767b; font-size:10px; font-weight:800; letter-spacing:.06em; }
.dev-state { padding:5px 9px; border:1px solid #3a393d; border-radius:99px; color:#aaa8a2; font-size:10px; font-weight:750; white-space:nowrap; }
.dev-state.up { color:#65d590; border-color:rgba(101,213,144,.3); }
.dev-state.degraded { color:#e3ac58; border-color:rgba(227,172,88,.3); }
.dev-state.down { color:#ee716c; border-color:rgba(238,113,108,.3); }
.join-panel { display:flex; align-items:center; justify-content:space-between; gap:40px; margin:90px 0; padding:48px 52px; border-radius:12px; background:var(--site-red); }
.join-panel .eyebrow { color:#ffc9c6; }
.join-panel h2 { margin:10px 0 8px; font-size:30px; }
.join-panel p { margin:0; color:#ffd6d3; font-size:13px; }
.primary-action.light { flex:none; color:#242426; background:#fff; box-shadow:none; }
.site-footer { min-height:110px; display:flex; align-items:center; justify-content:space-between; gap:30px; color:#747378; font-size:11px; letter-spacing:.04em; }
.site-footer a { color:#8c8a86; text-decoration:none; }
.site-footer>a { font-weight:800; letter-spacing:.15em; }
.site-footer>div { display:flex; gap:22px; }

/* Brand index */
.brand-shell .site-header { grid-template-columns:1fr auto; }
.brand-home { max-width:960px; padding:125px 0 135px; }
.brand-home h1 { margin-top:24px; }
.brand-intro { max-width:570px; color:#9d9b96; font-size:16px; line-height:1.8; }
.project-card { display:flex; align-items:center; justify-content:space-between; gap:30px; margin-top:70px; padding:34px 38px; border:1px solid var(--site-line); border-radius:11px; background:linear-gradient(120deg,#141416,#101011); color:var(--site-text); text-decoration:none; }
.project-card:hover { border-color:#4d4c51; }
.project-kicker { color:#db5750; font-size:10px; font-weight:800; letter-spacing:.12em; }
.project-card h2 { margin:12px 0 7px; font-size:24px; }
.project-card p { margin:0; color:var(--site-muted); font-size:13px; }
.project-arrow { color:#626166; font-size:28px; }

/* News listing and article */
.listing-main { min-height:70vh; padding:92px 0 120px; }
.listing-title { max-width:670px; margin-bottom:52px; }
.listing-title h1 { margin:14px 0 13px; font-size:50px; letter-spacing:-.045em; }
.listing-title p { color:var(--site-muted); line-height:1.7; }
.article-main { width:min(780px,100%); min-height:70vh; margin:0 auto; padding:70px 0 120px; }
.article-main.with-toc { width:min(1020px,100%); }
.article-layout { display:grid; grid-template-columns:minmax(0,1fr); }
.article-main.with-toc .article-layout { grid-template-columns:220px minmax(0,1fr); gap:48px; align-items:start; }
.article-main.with-toc article { max-width:780px; }
.article-toc { position:sticky; top:24px; padding-top:42px; }
.toc-title { margin-bottom:14px; color:#8e8c87; font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.toc-link { display:block; padding:7px 10px; border-left:2px solid #333237; color:#b7b5b0; font-size:13px; line-height:1.45; text-decoration:none; }
.toc-link:hover { border-left-color:#db5750; color:#fff; }
.toc-level-2 { padding-left:14px; }
.toc-level-3 { padding-left:26px; }
.toc-level-4 { padding-left:38px; }
.back-link { display:inline-block; margin-bottom:55px; color:#8e8c87!important; font-size:12px; text-decoration:none; }
.back-link:hover { color:#fff!important; }
.article-header { padding-bottom:38px; border-bottom:1px solid var(--site-line); }
.article-header h1 { margin:17px 0 20px; font-size:clamp(36px,6vw,58px); line-height:1.12; letter-spacing:-.045em; }
.article-header>p { margin:0; color:#aaa8a2; font-size:17px; line-height:1.75; }
.article-cover { aspect-ratio:16/8; margin:42px 0; border-radius:10px; background-position:center; background-size:cover; }
.article-body { padding-top:42px; color:#cfcdc7; font-size:16px; line-height:2; overflow-wrap:anywhere; }
.article-body p { margin:0 0 1em; }
.article-body img { max-width:100%; border-radius:6px; }
.article-body a { color:#ffd166; text-decoration:underline; }
.article-body blockquote { margin:0 0 1em; padding-left:1em; border-left:3px solid #666; color:#a1a1aa; }
.article-body pre { overflow-x:auto; padding:12px; background:#1f1f22; border-radius:6px; }

/* Shared links and news editor */
.public-links { display:flex; align-items:center; justify-content:flex-end; gap:16px; }
.public-links>a:not(.kook) { color:#78716c; font-size:12px; font-weight:600; text-decoration:none; }
.public-links>a:not(.kook):hover { color:#292524; }
.admin-wrap { max-width:940px; }
.admin-news-form { display:grid; gap:12px; }
.admin-news-form>input,.admin-news-form>textarea { width:100%; }
.admin-news-form .news-editor { min-height:260px; line-height:1.65; }
.admin-news-form .news-editor-shell .ql-toolbar { position:sticky; top:0; z-index:30; border-radius:6px 6px 0 0; background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.08); }
.admin-news-form .news-editor-shell .ql-container { min-height:360px; font-size:14px; line-height:1.7; border-radius:0 0 6px 6px; }
.admin-news-form>.kook { justify-self:start; border:0; cursor:pointer; }
.form-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.form-updated { margin-left:auto; color:#a8a29e; font-size:11px; }

@media (max-width:860px) {
  .article-main.with-toc { width:min(780px,100%); }
  .article-main.with-toc .article-layout { grid-template-columns:minmax(0,1fr); gap:0; }
  .article-toc { display:none; }
  .site-header { grid-template-columns:1fr auto; }
  .site-nav { grid-column:1/-1; grid-row:2; justify-content:flex-start; gap:22px; overflow-x:auto; border-top:1px solid var(--site-line); }
  .site-nav a { padding:17px 0 15px; }
  .site-nav-cta { grid-column:2; grid-row:1; }
  .fivem-hero { grid-template-columns:1fr; gap:48px; padding-top:64px; }
  .hero-signal { width:min(520px,100%); }
  .news-grid,.news-grid-list { grid-template-columns:repeat(2,1fr); }
  .news-grid .news-card:last-child:nth-child(odd) { grid-column:1/-1; }
  .join-panel { padding:40px; }
}

@media (max-width:620px) {
  .wrap { padding-left:14px; padding-right:14px; }
  .head { align-items:flex-start; gap:16px; }
  .public-links { flex-wrap:wrap; gap:10px 14px; }
  .site-shell { width:min(100% - 28px,1180px); }
  .site-header { min-height:72px; gap:14px; }
  .site-brand { font-size:13px; }
  .site-nav { gap:19px; }
  .site-nav-cta { padding:9px 11px; font-size:11px; }
  .fivem-hero { min-height:0; padding:55px 0; }
  .hero-copy h1,.brand-home h1 { font-size:43px; }
  .hero-copy>p { font-size:15px; }
  .hero-signal { min-height:320px; }
  .live-card { left:18px; right:18px; bottom:18px; }
  .feature-strip { grid-template-columns:1fr; padding:20px 0; }
  .feature-strip article,.feature-strip article+article { padding:24px 0; border-left:0; border-bottom:1px solid var(--site-line); }
  .feature-strip article:last-child { border-bottom:0; }
  .site-section { padding:68px 0; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .news-grid,.news-grid-list { grid-template-columns:1fr; }
  .news-grid .news-card:last-child:nth-child(odd) { grid-column:auto; }
  .development-row>div { align-items:flex-start; flex-direction:column; gap:7px; }
  .join-panel { align-items:flex-start; flex-direction:column; margin:62px 0; padding:34px 28px; }
  .site-footer { align-items:flex-start; flex-direction:column; justify-content:center; }
  .site-footer>div { flex-wrap:wrap; }
  .brand-home { padding:90px 0 100px; }
  .project-card { align-items:flex-start; margin-top:52px; padding:28px 24px; }
  .listing-main { padding:65px 0 90px; }
  .listing-title h1 { font-size:42px; }
  .article-main { padding:54px 0 90px; }
  .article-header>p { font-size:15px; }
}