:root {
  --ink-0: #050409;
  --ink-1: #0a0810;
  --ink-2: #100d17;
  --ink-3: #17121f;
  --panel: rgba(16, 13, 23, 0.9);
  --panel-solid: #110e18;
  --line: rgba(255, 255, 255, 0.09);
  --line-bright: rgba(232, 64, 255, 0.28);
  --text: #f6f1f8;
  --text-soft: #b9aebd;
  --muted: #786f7d;
  --pink: #f044ff;
  --pink-hot: #ff2ec4;
  --violet: #8c5cff;
  --blue: #4ab9ff;
  --amber: #ffad49;
  --green: #5df0ac;
  --font-display: "Arial Narrow", "Arial Black", Impact, sans-serif;
  --font-script: "Brush Script MT", "Segoe Script", cursive;
  --font-body: Inter, "Segoe UI", Arial, sans-serif;
  --page: 1500px;
  --radius: 4px;
  --shadow-neon: 0 0 30px rgba(240, 68, 255, 0.11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ink-0); color: var(--text); font-family: var(--font-body); font-size: 17px; font-weight: 500; line-height: 1.45; }
body.no-scroll { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.site-shell { min-height: 100vh; overflow-x: clip; position: relative; background: radial-gradient(circle at 14% 6%, rgba(104, 38, 126, 0.17), transparent 28rem), linear-gradient(180deg, #08060c 0, #050409 100%); }
.site-shell::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .23; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 68%); }
.ambient { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; opacity: .16; }
.ambient-one { width: 460px; height: 460px; background: var(--pink); top: 640px; left: -330px; }
.ambient-two { width: 520px; height: 520px; background: #5327a8; top: 1330px; right: -390px; }
.page-width, .header-inner, .utility-inner { width: min(calc(100% - 48px), var(--page)); margin-inline: auto; }

.utility-bar { height: 31px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(2,2,4,.93); color: #847a88; font: 600 10px/31px var(--font-display); letter-spacing: .18em; }
.utility-inner { display: flex; justify-content: space-between; }
.utility-status { display: flex; align-items: center; gap: 8px; }
.utility-status strong { color: var(--green); font-size: 9px; }
.status-dot, .live-pulse { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 12px var(--green); }

.site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--line); background: rgba(7,5,10,.91); backdrop-filter: blur(18px); }
.header-inner { height: 90px; display: flex; align-items: center; gap: 34px; }
.brand-frame { height: 72px; min-width: 168px; padding: 3px 18px 3px 8px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(240,68,255,.28); position: relative; background: linear-gradient(110deg, rgba(240,68,255,.08), rgba(255,255,255,.015)); box-shadow: inset 0 0 24px rgba(240,68,255,.04), 0 0 20px rgba(240,68,255,.06); clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%); }
.brand-frame::after { content: ""; position: absolute; right: -1px; top: 14px; width: 16px; height: 1px; background: var(--pink); transform: rotate(45deg); transform-origin: right; box-shadow: 0 0 8px var(--pink); }
.brand-mark { width: 48px; height: 48px; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.12); position: relative; display: grid; place-items: center; background: #09070d; box-shadow: inset 0 0 15px rgba(240,68,255,.13); transform: rotate(45deg); }
.brand-mark::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--pink); box-shadow: 0 0 11px rgba(240,68,255,.52); }
.brand-mark-r, .brand-mark-l { position: absolute; font: 800 15px var(--font-display); transform: rotate(-45deg); }
.brand-mark-r { color: white; margin: -8px 0 0 -8px; }.brand-mark-l { color: var(--pink); margin: 9px 0 0 10px; }
.brand-copy { display: flex; flex-direction: column; min-width: 0; }
.brand-name { font: 800 20px/1 var(--font-display); letter-spacing: .08em; white-space: nowrap; }
.brand-name em, .footer-brand em { color: var(--pink); font-style: normal; text-shadow: 0 0 14px rgba(240,68,255,.55); }
.brand-slogan { margin-top: 7px; color: #ccb9d0; font: 400 14px/1 var(--font-script); transform: rotate(-1deg); }
.site-logo,.footer-logo { display: block; flex: 0 0 auto; background: url('/ruhrpott-life-logo.png') center/contain no-repeat; }
.site-logo { width: 122px; height: 68px; filter: drop-shadow(0 0 11px rgba(240,68,255,.22)); }
.desktop-nav { display: flex; align-self: stretch; align-items: center; gap: 4px; }
.nav-link { height: 100%; display: grid; place-items: center; padding: 0 14px; color: #aaa0ae; font: 700 11px var(--font-display); letter-spacing: .08em; position: relative; }
.nav-link::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--pink); transform: scaleX(0); transition: transform .2s ease; box-shadow: 0 0 12px var(--pink); }
.nav-link:hover, .nav-link.active { color: white; }.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.member-pill { min-width: 146px; min-height: 42px; padding: 5px 10px 5px 6px; display: grid; grid-template-columns: 31px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; border: 1px solid rgba(93,240,172,.2); background: rgba(93,240,172,.035); }
.member-pill > span { grid-row: 1/-1; width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; color: var(--green); border: 1px solid rgba(93,240,172,.3); background-color: #100c15; background-position: center; background-size: cover; font: 700 6px var(--font-display); }.member-pill small { align-self: end; color: var(--green); font: 700 5px var(--font-display); letter-spacing: .08em; }.member-pill strong { align-self: start; max-width: 115px; overflow: hidden; color: #d9d1dc; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.button { min-height: 42px; padding: 0 19px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 2px; font: 700 10px var(--font-display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(135deg, var(--pink), #a645ff); color: white; box-shadow: 0 8px 24px rgba(240,68,255,.2), inset 0 1px rgba(255,255,255,.25); }
.button-primary:hover { box-shadow: 0 10px 32px rgba(240,68,255,.34); }
.button-ghost { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.13); color: #ded6e0; }
.button-dark { border-color: rgba(255,255,255,.14); color: white; background: rgba(5,4,8,.66); backdrop-filter: blur(10px); }
.button-large { min-height: 51px; padding-inline: 24px; font-size: 11px; }
.icon-button, .menu-button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.11); background: rgba(255,255,255,.03); color: white; cursor: pointer; display: grid; place-items: center; }
.search-glyph { width: 14px; height: 14px; border: 2px solid #aaa0ae; border-radius: 50%; position: relative; }
.search-glyph::after { content: ""; position: absolute; width: 6px; height: 2px; background: #aaa0ae; right: -5px; bottom: -2px; transform: rotate(45deg); }
.menu-button { display: none; padding: 10px; gap: 4px; align-content: center; }.menu-button span { display: block; width: 19px; height: 1px; background: white; }
.search-strip { height: 0; overflow: hidden; display: flex; align-items: center; gap: 16px; width: min(calc(100% - 48px), var(--page)); margin: auto; transition: height .24s ease; }
.search-strip.is-open { height: 68px; }
.search-strip label { color: var(--muted); font: 700 10px var(--font-display); letter-spacing: .1em; }
.search-strip input { flex: 1; min-width: 100px; height: 39px; padding: 0 14px; border: 1px solid rgba(255,255,255,.11); background: #09070d; color: white; outline: none; }
.search-strip input:focus { border-color: var(--pink); box-shadow: 0 0 18px rgba(240,68,255,.12); }
.search-strip button { border: 0; color: var(--pink); background: none; font: 700 10px var(--font-display); cursor: pointer; }

.hero { min-height: 590px; position: relative; isolation: isolate; display: flex; align-items: center; border-bottom: 1px solid rgba(240,68,255,.2); overflow: hidden; }
.hero-backdrop { position: absolute; inset: 0; z-index: -3; background-image: linear-gradient(90deg, rgba(5,4,9,.98) 0%, rgba(7,5,11,.9) 38%, rgba(7,5,11,.36) 70%, rgba(5,4,9,.48) 100%), radial-gradient(circle at 75% 48%, rgba(240,68,255,.17), transparent 28%), url("/ruhrpott-forum-hero.png"); background-size: cover; background-position: center; }
.hero-backdrop::before { content: ""; position: absolute; inset: 0; opacity: .42; background: repeating-linear-gradient(115deg, transparent 0 60px, rgba(255,255,255,.03) 61px, transparent 63px), linear-gradient(0deg, rgba(0,0,0,.7), transparent 55%); }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(4,3,7,.82), transparent 34%, rgba(4,3,7,.12)); }
.hero-lines { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, transparent 68%, rgba(240,68,255,.28) 68.1%, transparent 68.3%), linear-gradient(180deg, transparent 78%, rgba(240,68,255,.2) 78.2%, transparent 78.4%); opacity: .4; }
.hero-content { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; padding-block: 78px; }
.hero-copy { max-width: 760px; }
.eyebrow, .small-kicker { margin: 0 0 16px; color: var(--pink); font: 700 10px var(--font-display); letter-spacing: .2em; }
.eyebrow { display: flex; align-items: center; gap: 12px; }.eyebrow span { display: block; width: 38px; height: 1px; background: var(--pink); box-shadow: 0 0 9px var(--pink); }
.hero h1 { margin: 0; font: 800 clamp(48px, 6vw, 84px)/.98 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; text-shadow: 0 10px 34px rgba(0,0,0,.65); }
.hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--pink); text-shadow: 0 0 24px rgba(240,68,255,.28); }
.hero-lead { max-width: 650px; margin: 24px 0 30px; color: #c5bac8; font-size: 19px; line-height: 1.65; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-status-card { width: 340px; flex: 0 0 auto; background: rgba(7,5,11,.78); border: 1px solid rgba(255,255,255,.11); border-top-color: rgba(240,68,255,.56); box-shadow: 0 18px 45px rgba(0,0,0,.46), 0 0 24px rgba(240,68,255,.08); backdrop-filter: blur(14px); }
.hero-status-top { display: flex; align-items: center; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.hero-status-top div { display: flex; flex-direction: column; }.hero-status-top div span, .hero-status-foot span { color: var(--muted); font: 700 8px var(--font-display); letter-spacing: .14em; }.hero-status-top div strong { font: 700 11px var(--font-display); letter-spacing: .08em; }
.hero-status-top b { margin-left: auto; color: var(--green); font: 700 9px var(--font-display); }
.hero-stats { display: grid; grid-template-columns: repeat(3,1fr); padding: 19px 12px; }
.hero-stats div { text-align: center; border-right: 1px solid var(--line); }.hero-stats div:last-child { border: 0; }.hero-stats strong { display: block; font: 700 18px var(--font-display); }.hero-stats span { color: var(--muted); font: 700 7px var(--font-display); letter-spacing: .1em; }
.hero-status-foot { display: flex; justify-content: space-between; padding: 11px 18px; background: rgba(255,255,255,.025); }.hero-status-foot strong { font: 600 9px var(--font-display); color: #c8bdcb; }
.hero-edge { position: absolute; bottom: -1px; left: 0; width: 43%; height: 16px; background: var(--ink-0); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 100%, 0 100%); }

.main-grid { display: grid; grid-template-columns: 260px minmax(0,1fr) 300px; gap: 22px; align-items: start; padding-block: 54px 76px; position: relative; }
.panel { background: linear-gradient(145deg, rgba(18,14,25,.96), rgba(10,8,14,.96)); border: 1px solid var(--line); box-shadow: var(--shadow-neon); }
.panel-heading { min-height: 48px; padding: 0 15px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: #d8cedb; font: 700 8px var(--font-display); letter-spacing: .11em; }
.panel-heading > div { display: flex; align-items: center; gap: 8px; }.heading-line { width: 17px; height: 1px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.panel-count { color: #665e6b; font-size: 7px; }
.sidebar-panel, .stream-panel, .calendar-panel { margin-bottom: 18px; }
.category-nav { padding: 6px; }
.category-link { min-height: 67px; padding: 10px 9px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border: 1px solid transparent; position: relative; transition: background .18s ease, border-color .18s ease; }
.category-link:hover, .category-link.active { background: rgba(240,68,255,.055); border-color: rgba(240,68,255,.14); }.category-link.active::before { content: ""; position: absolute; left: -7px; top: 16px; bottom: 16px; width: 2px; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.category-code { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,.11); display: grid; place-items: center; color: var(--pink); font: 700 7px var(--font-display); }
.category-copy { min-width: 0; display: flex; flex-direction: column; }.category-copy strong { font-size: 14px; line-height: 1.2; }.category-copy small { margin-top: 4px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }.category-count { color: #645c67; font: 600 9px var(--font-display); }
.start-panel { padding: 22px 19px; position: relative; overflow: hidden; }.start-panel::after { content: "RPL"; position: absolute; right: -10px; bottom: -22px; color: rgba(255,255,255,.025); font: 800 62px var(--font-display); }
.start-panel h2 { margin: 0 0 20px; font: 700 19px var(--font-display); line-height: 1.25; }.start-steps { list-style: none; padding: 0; margin: 0 0 18px; position: relative; }.start-steps::before { content: ""; position: absolute; left: 13px; top: 20px; bottom: 22px; width: 1px; background: linear-gradient(var(--pink), rgba(240,68,255,.1)); }
.start-steps li { display: flex; gap: 11px; align-items: center; margin: 14px 0; position: relative; }.start-steps li > span { width: 27px; height: 27px; display: grid; place-items: center; background: #0d0a12; border: 1px solid rgba(240,68,255,.25); color: var(--pink); font: 700 7px var(--font-display); z-index: 1; }.start-steps div { display: flex; flex-direction: column; }.start-steps strong { font-size: 12px; }.start-steps small { color: var(--muted); font-size: 10px; }
.text-link { color: var(--pink); font: 700 9px var(--font-display); letter-spacing: .08em; position: relative; z-index: 2; }

.content-column { min-width: 0; }
.section-heading { min-height: 61px; margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; }.section-heading .small-kicker { margin-bottom: 5px; }.section-heading h2 { margin: 0; font: 700 clamp(22px,2vw,29px) var(--font-display); letter-spacing: -.02em; }.section-heading > a { color: #9c919f; font: 700 8px var(--font-display); letter-spacing: .1em; padding-bottom: 4px; }.section-heading > a span { color: var(--pink); margin-left: 5px; }
.thread-list { display: grid; gap: 10px; }
.thread-card { min-height: 150px; display: grid; grid-template-columns: 54px 1fr 116px; background: linear-gradient(100deg, rgba(20,16,27,.95), rgba(10,8,14,.96)); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease, background .2s ease; overflow: hidden; }
.thread-card:hover { transform: translateX(3px); border-color: rgba(240,68,255,.23); background: linear-gradient(100deg, rgba(26,18,34,.98), rgba(10,8,14,.98)); }
.thread-index { position: relative; display: grid; place-items: center; border-right: 1px solid var(--line); overflow: hidden; }.thread-index::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: .045; }.thread-index span { writing-mode: vertical-rl; transform: rotate(180deg); color: currentColor; font: 700 10px var(--font-display); letter-spacing: .12em; }
.accent-pink { color: var(--pink)!important; }.accent-violet { color: var(--violet)!important; }.accent-amber { color: var(--amber)!important; }.accent-blue { color: var(--blue)!important; }
.thread-main { padding: 18px 21px; min-width: 0; }.thread-meta { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 10px; }.thread-label { font: 700 7px var(--font-display); letter-spacing: .1em; }.thread-main h3 { margin: 7px 0 6px; font: 700 clamp(16px,1.4vw,19px) var(--font-display); line-height: 1.3; }.thread-main h3 a:hover { color: var(--pink); }.thread-main > p { margin: 0; color: #a89eac; font-size: 13px; line-height: 1.45; }.thread-author { display: flex; align-items: center; gap: 7px; margin-top: 11px; color: #7f7582; font-size: 10px; }.thread-author strong { color: #beb4c1; }.mini-avatar { width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(240,68,255,.22); color: var(--pink); font: 700 6px var(--font-display); background: rgba(240,68,255,.06); }
.thread-numbers { border-left: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; align-content: center; text-align: center; gap: 12px 0; padding: 15px 10px; }.thread-numbers strong { display: block; font: 600 12px var(--font-display); }.thread-numbers span { display: block; margin-top: 4px; color: #68606b; font: 700 6px var(--font-display); letter-spacing: .08em; }.thread-numbers a { grid-column: 1/-1; color: var(--pink); font-size: 18px; }
.empty-state { min-height: 170px; display: grid; place-content: center; text-align: center; border: 1px solid var(--line); background: var(--panel); }.empty-state strong { font: 700 16px var(--font-display); }.empty-state span { color: var(--muted); margin-top: 6px; }
.project-section { margin-top: 55px; }.section-heading-project > p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.project-tile { min-height: 215px; padding: 25px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); background: linear-gradient(140deg, rgba(21,17,29,.98), rgba(9,7,13,.98)); transition: border-color .2s ease, transform .2s ease; }.project-tile::before { content: ""; position: absolute; width: 160px; height: 160px; right: -85px; top: -92px; border-radius: 50%; background: currentColor; filter: blur(45px); opacity: .16; }.project-tile:hover { transform: translateY(-3px); border-color: currentColor; }.project-number { position: absolute; right: 19px; bottom: 7px; color: rgba(255,255,255,.035); font: 800 62px var(--font-display); }.project-kicker { color: currentColor; font: 700 8px var(--font-display); letter-spacing: .14em; }.project-tile > strong { margin-top: 18px; color: white; font: 700 18px var(--font-display); }.project-tile p { max-width: 270px; margin: 8px 0 20px; color: #958b99; font-size: 13px; }.project-action { margin-top: auto; color: #dcd3df; font: 700 8px var(--font-display); letter-spacing: .08em; }.project-action b { color: currentColor; margin-left: 5px; }.project-pink { color: var(--pink); }.project-violet { color: var(--violet); }.project-amber { color: var(--amber); }.project-blue { color: var(--blue); }

.stream-list { padding: 5px; }.stream-card { min-height: 58px; padding: 8px; display: grid; grid-template-columns: 37px 1fr auto; align-items: center; gap: 9px; position: relative; overflow: hidden; border: 1px solid rgba(150,143,154,.34); background: rgba(255,255,255,.012); transition: background .18s ease,border-color .18s ease,transform .18s ease; }.stream-card::before { content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none; opacity: 0; background: linear-gradient(90deg,var(--pink),var(--violet),var(--pink-hot),var(--violet),var(--pink)); background-size: 280% 100%; -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }.stream-card:hover { transform: translateX(2px); border-color: rgba(194,187,199,.58); background: rgba(255,255,255,.032); }.stream-card.is-live { border-color: transparent; background: rgba(240,68,255,.045); box-shadow: inset 0 0 20px rgba(240,68,255,.035); }.stream-card.is-live::before { opacity: 1; animation: stream-border-run 9s linear infinite; }.stream-card.is-live:hover { border-color: transparent; background: rgba(240,68,255,.075); }.stream-card.is-placeholder { cursor: default; opacity: .46; border-style: dashed; filter: grayscale(.75); }.stream-card.is-placeholder:hover { transform: none; border-color: rgba(150,143,154,.34); background: rgba(255,255,255,.012); }.stream-card.is-placeholder .stream-avatar { color: #827b85; background: #0d0b10; }.stream-card.is-placeholder .stream-copy strong { color: #aaa2ac; }.stream-avatar { width: 36px; height: 36px; display: grid; place-items: center; position: relative; z-index: 1; border: 1px solid rgba(255,255,255,.11); background: linear-gradient(140deg,#24162a,#0b0910); color: #d6cbd9; font: 700 8px var(--font-display); }.stream-avatar i { position: absolute; width: 8px; height: 8px; right: -3px; bottom: -3px; border-radius: 50%; background: var(--pink-hot); border: 2px solid #100d17; box-shadow: 0 0 9px var(--pink-hot); }.stream-copy { min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; }.stream-card.is-live .stream-copy { padding-right: 37px; }.stream-copy strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; }.stream-copy small { color: var(--muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.live-badge { min-height: 17px; padding: 0 6px; position: absolute; z-index: 2; top: 5px; right: 5px; display: grid; place-items: center; color: white; background: linear-gradient(110deg,var(--pink-hot),var(--violet)); box-shadow: 0 0 11px rgba(240,68,255,.42); font: 800 5px var(--font-display); letter-spacing: .1em; }.viewer-count { position: relative; z-index: 1; margin-top: 18px; color: var(--pink); font: 700 8px var(--font-display); }.viewer-count::before { content: "●"; margin-right: 4px; }.offline-dot { width: 5px; height: 5px; border-radius: 50%; background: #777079; box-shadow: 0 0 0 3px rgba(155,146,160,.06); }.panel-footer-link { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border: 0; border-top: 1px solid var(--line); background: transparent; color: #8d8390; font: 700 7px var(--font-display); letter-spacing: .08em; cursor: pointer; text-transform: uppercase; }.panel-footer-link:hover { color: white; background: rgba(240,68,255,.035); }.panel-footer-link span { color: var(--pink); }
@keyframes stream-border-run { to { background-position: -280% 0; } }
.live-label { color: var(--pink); }.calendar-panel { padding-bottom: 12px; }.calendar-title { height: 57px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid var(--line); }.calendar-title > div:first-child { display: flex; align-items: baseline; gap: 7px; }.calendar-title span { color: var(--pink); font: 700 10px var(--font-display); }.calendar-title strong { font: 600 17px var(--font-display); }.calendar-arrows { display: flex; gap: 4px; }.calendar-arrows button { width: 24px; height: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: #948a98; cursor: pointer; }.calendar-weekdays, .calendar-grid { padding-inline: 12px; display: grid; grid-template-columns: repeat(7,1fr); text-align: center; }.calendar-weekdays { padding-top: 13px; color: #625b65; font: 700 6px var(--font-display); }.calendar-grid { margin-top: 8px; gap: 3px 0; }.calendar-grid span { width: 26px; height: 25px; margin: auto; display: grid; place-items: center; color: #9a909d; font: 600 9px var(--font-display); border: 1px solid transparent; }.calendar-grid .today { background: var(--pink); color: white; box-shadow: 0 0 13px rgba(240,68,255,.45); }.calendar-grid .event-day { border-color: var(--violet); color: white; }.calendar-grid .empty-day { visibility: hidden; }.calendar-event { margin: 11px 12px 0; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(140,92,255,.2); background: rgba(140,92,255,.05); }.calendar-event > span { width: 28px; height: 28px; display: grid; place-items: center; background: var(--violet); font: 700 9px var(--font-display); }.calendar-event div { display: flex; flex-direction: column; }.calendar-event strong { font-size: 11px; }.calendar-event small { color: var(--muted); font-size: 9px; }
.calendar-empty { margin: 11px 12px 0; padding: 13px 10px; border: 1px solid var(--line); color: var(--muted); text-align: center; font: 700 7px var(--font-display); letter-spacing: .08em; }
.online-panel { padding-bottom: 17px; }.online-count { color: var(--green); }.avatar-stack { display: flex; padding: 17px 16px 8px; }.avatar-stack span { width: 35px; height: 35px; margin-left: -7px; border: 2px solid var(--panel-solid); display: grid; place-items: center; background: linear-gradient(140deg,#321839,#0d0a12); color: #e2d5e5; font: 700 7px var(--font-display); }.avatar-stack span:first-child { margin-left: 0; }.avatar-stack .more-avatar { background: #23172a; color: var(--pink); }.online-panel p { margin: 5px 16px 0; color: var(--muted); font-size: 10px; }

.join-banner { position: relative; border-block: 1px solid rgba(240,68,255,.18); background: linear-gradient(100deg,rgba(240,68,255,.07),rgba(20,14,26,.93) 38%,rgba(93,40,122,.12)); overflow: hidden; }.join-banner::before { content: "RUHRPOTT"; position: absolute; right: 4%; top: -24px; color: rgba(255,255,255,.024); font: 800 112px var(--font-display); }.join-inner { min-height: 205px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; }.join-inner h2 { margin: 0; font: 700 clamp(26px,3vw,39px) var(--font-display); }.join-inner p:not(.small-kicker) { margin: 8px 0 0; color: #a89dab; }
.site-footer { padding: 44px 0 20px; background: #040306; }.footer-top { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 35px; }.footer-brand { display: flex; flex-direction: column; }.footer-logo { width: 132px; height: 92px; margin: -23px 0 -14px; filter: drop-shadow(0 0 13px rgba(240,68,255,.18)); }.footer-brand > span:last-child { margin-top: 7px; color: #8a7e8d; font: 400 13px var(--font-script); }.footer-links { display: flex; gap: 23px; color: #756c79; font: 700 8px var(--font-display); letter-spacing: .07em; }.footer-links a:hover { color: var(--pink); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); color: #544e57; font-size: 10px; }.footer-status { display: flex; align-items: center; gap: 7px; }.footer-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }

.side-sheet-trigger { position: fixed; right: 0; top: 50%; z-index: 24; width: 42px; height: 94px; padding: 0; border: 1px solid rgba(240,68,255,.35); border-right: 0; background: rgba(12,9,16,.92); color: white; cursor: pointer; box-shadow: 0 0 20px rgba(240,68,255,.1); transform: translateY(-50%); }.side-sheet-trigger span { writing-mode: vertical-rl; transform: rotate(180deg); color: var(--pink); font: 700 8px var(--font-display); letter-spacing: .2em; }.side-sheet-trigger b { position: absolute; left: 5px; bottom: 6px; font-size: 12px; }
.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(2,1,4,.76); backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: opacity .25s ease; }.overlay.visible { opacity: 1; pointer-events: auto; }
.quick-sheet { position: fixed; z-index: 90; right: 0; top: 0; bottom: 0; width: min(390px,90vw); padding: 25px; background: linear-gradient(150deg,#171020,#08060c 75%); border-left: 1px solid rgba(240,68,255,.32); box-shadow: -25px 0 70px rgba(0,0,0,.5); transform: translateX(105%); transition: transform .28s ease; }.quick-sheet.open { transform: translateX(0); }.sheet-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--line); }.sheet-head > div { display: flex; align-items: center; gap: 11px; }.sheet-head > div span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--pink); border: 1px solid var(--pink); font: 700 8px var(--font-display); }.sheet-head strong { font: 700 13px var(--font-display); }.sheet-head button, .modal-close { width: 36px; height: 36px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: white; font-size: 24px; cursor: pointer; }.quick-sheet nav { margin: 25px 0; }.quick-sheet nav a { min-height: 60px; display: grid; grid-template-columns: 35px 1fr auto; align-items: center; border-bottom: 1px solid var(--line); }.quick-sheet nav span { color: var(--pink); font: 700 8px var(--font-display); }.quick-sheet nav strong { font: 600 14px var(--font-display); }.quick-sheet nav b { color: var(--pink); }.sheet-server { margin: 25px 0; padding: 17px; border: 1px solid var(--line); display: flex; align-items: center; gap: 12px; }.sheet-server div { display: flex; flex-direction: column; }.sheet-server small { color: var(--muted); font: 700 7px var(--font-display); }.sheet-server strong { font-size: 13px; }.sheet-login { width: 100%; margin-bottom: 8px; }.quick-sheet > .button-primary { width: 100%; }
.sheet-member { margin: 0 0 10px; padding: 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(93,240,172,.18); background: rgba(93,240,172,.035); }.sheet-member > span { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; color: var(--green); border: 1px solid rgba(93,240,172,.3); background-color: #100c15; background-position: center; background-size: cover; font: 700 7px var(--font-display); }.sheet-member > div { display: flex; flex-direction: column; }.sheet-member small { color: var(--green); font: 700 6px var(--font-display); }.sheet-member strong { margin-top: 3px; font-size: 11px; }
.streamer-sheet { width: min(470px,94vw); overflow-y: auto; }.streamer-sheet-intro { margin: 20px 0 12px; color: #8f8593; font-size: 12px; line-height: 1.55; }.streamer-sheet-list { display: grid; gap: 5px; }.streamer-sheet-list .stream-card { min-height: 70px; grid-template-columns: 27px 42px 1fr auto; }.stream-rank { position: relative; z-index: 1; color: #756e78; font: 700 7px var(--font-display); }.stream-status-offline { position: relative; z-index: 1; color: #8a828d; font: 700 6px var(--font-display); letter-spacing: .08em; }
.login-modal { position: fixed; z-index: 91; left: 50%; top: 50%; width: min(470px,calc(100% - 32px)); padding: 34px; background: linear-gradient(145deg,#181020,#09070d); border: 1px solid rgba(240,68,255,.34); box-shadow: 0 30px 90px rgba(0,0,0,.68),0 0 38px rgba(240,68,255,.12); opacity: 0; pointer-events: none; transform: translate(-50%,-46%) scale(.97); transition: opacity .22s ease, transform .22s ease; }.login-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) scale(1); }.modal-close { position: absolute; top: 18px; right: 18px; }.login-modal h2 { margin: 0; font: 700 30px var(--font-display); }.modal-intro { margin: 8px 0 25px; color: var(--text-soft); }.login-modal form { display: flex; flex-direction: column; }.login-modal form > label { margin: 13px 0 7px; color: #a79ca9; font: 700 8px var(--font-display); letter-spacing: .08em; }.login-modal input:not([type="checkbox"]) { height: 48px; border: 1px solid rgba(255,255,255,.12); background: #08060b; color: white; padding: 0 13px; }.login-modal input:focus { border-color: var(--pink); }.form-row { display: flex; justify-content: space-between; align-items: center; margin: 15px 0 20px; font-size: 11px; color: #8b808e; }.check-label { display: flex; align-items: center; gap: 5px; }.check-label input { accent-color: var(--pink); }.form-row a, .register-hint a { color: var(--pink); }.modal-submit { width: 100%; }.login-notice { margin: 12px 0 0; padding: 10px; color: #bcebd4; border: 1px solid rgba(93,240,172,.18); background: rgba(93,240,172,.05); font-size: 11px; }.register-hint { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); text-align: center; color: #807583; font-size: 12px; }
.login-role-preview { margin: 0 0 20px; padding: 14px; display: grid; grid-template-columns: 40px 1fr; gap: 12px; border: 1px solid rgba(140,92,255,.22); background: rgba(140,92,255,.045); }.login-role-preview > span { width: 39px; height: 39px; display: grid; place-items: center; color: var(--violet); border: 1px solid rgba(140,92,255,.35); font: 700 7px var(--font-display); }.login-role-preview div { display: flex; flex-direction: column; }.login-role-preview small { color: var(--violet); font: 700 6px var(--font-display); letter-spacing: .08em; }.login-role-preview strong { margin-top: 3px; font: 700 11px var(--font-display); }.login-role-preview p { margin: 4px 0 0; color: #847b88; font-size: 10px; }

@media (max-width: 1240px) {
  .brand-frame { min-width: 148px; }.desktop-nav .nav-link { padding-inline: 9px; font-size: 9px; }.main-grid { grid-template-columns: 230px minmax(0,1fr); }.right-sidebar { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column: 1/-1; gap: 18px; }.right-sidebar .panel { margin: 0; }.online-panel { min-height: fit-content; }
}

@media (max-width: 980px) {
  .header-inner { height: 78px; }.brand-frame { min-width: 148px; height: 64px; }.site-logo { height: 60px; }.desktop-nav { display: none; }.menu-button { display: grid; }.main-grid { grid-template-columns: 1fr; }.left-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.left-sidebar .panel { margin: 0; }.right-sidebar { grid-template-columns: 1fr 1fr; }.online-panel { display: none; }.hero-content { align-items: flex-start; flex-direction: column; }.hero-status-card { width: min(100%,430px); }.hero-copy { max-width: 700px; }
}

@media (max-width: 700px) {
  .page-width, .header-inner, .utility-inner { width: min(calc(100% - 28px), var(--page)); }.utility-bar { display: none; }.site-header { top: 0; }.header-inner { height: 72px; gap: 8px; }.brand-frame { min-width: 0; flex: 1; height: 58px; padding: 2px 10px; }.site-logo { width: 104px; height: 55px; }.header-actions { margin-left: 0; }.header-actions .button, .search-button { display: none; }.menu-button { width: 40px; height: 40px; }.search-strip { width: calc(100% - 28px); }.hero { min-height: 610px; }.hero-content { padding-block: 62px 55px; gap: 44px; }.hero h1 { font-size: clamp(43px,15vw,64px); }.hero-lead { font-size: 16px; }.hero-actions { display: grid; width: 100%; }.hero-actions .button { width: 100%; }.hero-status-card { width: 100%; }.hero-stats strong { font-size: 15px; }.main-grid { padding-block: 34px 55px; }.left-sidebar { grid-template-columns: 1fr; }.start-panel { display: none; }.thread-card { grid-template-columns: 42px 1fr; }.thread-main { padding: 16px; }.thread-numbers { grid-column: 1/-1; grid-template-columns: 1fr 1fr auto; border-left: 0; border-top: 1px solid var(--line); padding: 10px 16px; align-items: center; text-align: left; }.thread-numbers a { grid-column: auto; grid-row: 1; }.project-grid, .right-sidebar { grid-template-columns: 1fr; }.right-sidebar .stream-panel { display: none; }.section-heading-project { align-items: flex-start; flex-direction: column; }.section-heading-project > p { margin-top: 7px; }.project-tile { min-height: 190px; }.join-inner { padding-block: 44px; align-items: flex-start; flex-direction: column; }.join-inner .button { width: 100%; }.join-banner::before { font-size: 60px; }.footer-top { flex-direction: column; gap: 28px; }.footer-links { display: grid; grid-template-columns: repeat(2,1fr); width: 100%; gap: 15px; }.footer-bottom { flex-direction: column; gap: 10px; }.side-sheet-trigger { display: none; }.login-modal { padding: 28px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}

@media (prefers-contrast: more) {
  :root { --line: rgba(255,255,255,.25); --text-soft: #e1d8e3; --muted: #a89eac; }
  .panel, .thread-card, .project-tile { background: #0c0910; }
}

/* Secondary pages share the mainpage design tokens without changing its layout. */
.secondary-shell { min-height: 100vh; }
.secondary-shell .site-footer { margin-top: 0; }
.subpage-hero { min-height: 430px; position: relative; isolation: isolate; display: flex; align-items: center; border-bottom: 1px solid rgba(240,68,255,.2); overflow: hidden; }
.subpage-hero-art { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(90deg,rgba(5,4,9,.98),rgba(7,5,11,.86) 48%,rgba(7,5,11,.42)),url("/ruhrpott-forum-hero.png"); background-size: cover; background-position: center; opacity: .72; }
.subpage-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg,var(--ink-0),transparent 32%),repeating-linear-gradient(115deg,transparent 0 80px,rgba(255,255,255,.018) 81px,transparent 83px); }
.subpage-hero-content { display: flex; align-items: flex-end; justify-content: space-between; gap: 70px; padding-block: 76px; }
.subpage-hero-content > div:first-child { max-width: 850px; }
.subpage-hero h1 { margin: 0; font: 800 clamp(42px,5vw,70px)/1.02 var(--font-display); letter-spacing: -.045em; text-transform: uppercase; }
.subpage-hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--pink); text-shadow: 0 0 20px rgba(240,68,255,.26); }
.subpage-hero-content > div:first-child > p:last-child { max-width: 690px; margin: 22px 0 0; color: #c2b7c5; font-size: 18px; line-height: 1.6; }
.subpage-stat-grid { width: 360px; flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.1); background: rgba(7,5,11,.76); backdrop-filter: blur(14px); }
.subpage-stat-grid div { min-height: 92px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.05); }
.subpage-stat-grid strong { font: 700 22px var(--font-display); }
.subpage-stat-grid span { margin-top: 6px; color: var(--muted); font: 700 7px var(--font-display); letter-spacing: .12em; }
.subpage-content { padding-block: 48px 80px; position: relative; }
.system-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 38px; }
.system-principles article { min-height: 130px; padding: 21px; display: grid; grid-template-columns: 42px 1fr; gap: 15px; background: linear-gradient(140deg,rgba(20,16,27,.96),rgba(9,7,13,.96)); border: 1px solid var(--line); }
.system-principles article > span { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(240,68,255,.28); color: var(--pink); font: 700 8px var(--font-display); }
.system-principles strong { font: 700 13px var(--font-display); }
.system-principles p { margin: 7px 0 0; color: #938998; font-size: 12px; line-height: 1.5; }
.system-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.system-tabs button { min-height: 48px; padding: 0 21px; position: relative; border: 0; background: transparent; color: #887e8c; font: 700 9px var(--font-display); letter-spacing: .08em; cursor: pointer; }
.system-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pink); box-shadow: 0 0 10px var(--pink); transform: scaleX(0); }
.system-tabs button:hover,.system-tabs button.active { color: white; background: rgba(255,255,255,.025); }
.system-tabs button.active::after { transform: scaleX(1); }
.group-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.group-card { --tone: var(--pink); min-height: 270px; padding: 23px; position: relative; overflow: hidden; background: linear-gradient(140deg,rgba(20,16,27,.98),rgba(9,7,13,.98)); border: 1px solid var(--line); }
.group-card::before { content: ""; position: absolute; width: 170px; height: 170px; right: -90px; top: -90px; border-radius: 50%; background: var(--tone); filter: blur(45px); opacity: .14; }
.tone-pink { --tone: var(--pink); }.tone-violet { --tone: var(--violet); }.tone-blue { --tone: var(--blue); }.tone-amber { --tone: var(--amber); }.tone-green { --tone: var(--green); }.tone-slate { --tone: #9b92a0; }
.group-card-top { display: flex; align-items: center; gap: 9px; }
.group-code { width: 37px; height: 37px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--tone) 45%,transparent); color: var(--tone); font: 700 7px var(--font-display); }
.group-type { color: var(--tone); font: 700 7px var(--font-display); letter-spacing: .09em; }
.group-card-top > strong { margin-left: auto; color: #766d7a; font-size: 10px; }
.group-card h2 { margin: 23px 0 7px; font: 700 18px var(--font-display); }
.group-card > p { min-height: 54px; margin: 0; color: #9b919f; font-size: 13px; line-height: 1.5; }
.automatic-rule { margin-top: 18px; padding: 10px 0; border-block: 1px solid var(--line); display: flex; flex-direction: column; }
.automatic-rule span { color: var(--tone); font: 700 6px var(--font-display); letter-spacing: .12em; }
.automatic-rule strong { margin-top: 4px; color: #bbb1be; font-size: 10px; }
.badge-row { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 15px; }
.badge-row span { padding: 5px 7px; border: 1px solid color-mix(in srgb,var(--tone) 23%,transparent); background: color-mix(in srgb,var(--tone) 6%,transparent); color: #b7adb9; font: 600 7px var(--font-display); }
.roles-panel { display: grid; grid-template-columns: 330px 1fr; gap: 18px; }
.roles-explainer { padding: 29px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(22,16,28,.98),rgba(9,7,13,.98)); }
.roles-explainer h2 { margin: 0; font: 700 24px/1.25 var(--font-display); }
.roles-explainer > p:last-child { color: #9d929f; font-size: 14px; line-height: 1.6; }
.role-list { display: grid; gap: 7px; }
.role-row { --tone: var(--pink); min-height: 78px; display: grid; grid-template-columns: 48px 12px 1fr 130px 80px; align-items: center; gap: 13px; padding: 12px 18px; border: 1px solid var(--line); background: rgba(15,12,20,.92); }
.role-rank { color: #5f5862; font: 700 8px var(--font-display); }
.role-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 11px var(--tone); }
.role-copy strong { color: var(--tone); font: 700 12px var(--font-display); }
.role-copy p { margin: 4px 0 0; color: #827986; font-size: 10px; }
.role-scope { color: #a297a5; font: 700 8px var(--font-display); }
.role-permissions { text-align: right; color: white; font: 700 12px var(--font-display); }.role-permissions small { color: #69616d; font-size: 6px; }
.permissions-panel { border: 1px solid var(--line); background: rgba(13,10,18,.94); }
.permissions-head { padding: 24px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line); }
.permissions-head h2 { margin: 0; font: 700 23px var(--font-display); }.permissions-head > div .small-kicker { margin-bottom: 5px; }.permissions-head > p { max-width: 420px; margin: 0; color: #8e8491; font-size: 12px; }
.permission-scroll { overflow-x: auto; }
.permissions-panel table { width: 100%; border-collapse: collapse; min-width: 760px; }
.permissions-panel th,.permissions-panel td { height: 57px; padding: 0 15px; border-bottom: 1px solid var(--line); text-align: center; }
.permissions-panel thead th { height: 45px; color: #6e6672; font: 700 7px var(--font-display); letter-spacing: .08em; }
.permissions-panel th:first-child { text-align: left; }.permissions-panel tbody th { color: #c3b9c6; font-size: 12px; font-weight: 600; }
.permission-mark { min-width: 44px; padding: 5px 6px; display: inline-block; font: 700 6px var(--font-display); letter-spacing: .08em; border: 1px solid; }.permission-mark.allow { color: var(--green); border-color: rgba(93,240,172,.25); background: rgba(93,240,172,.05); }.permission-mark.deny { color: #ff6880; border-color: rgba(255,104,128,.23); background: rgba(255,104,128,.04); }
.permission-legend { min-height: 52px; padding: 0 18px; display: flex; align-items: center; gap: 22px; color: #776f7a; font-size: 9px; }.permission-legend span { display: flex; align-items: center; gap: 6px; }.permission-legend span:last-child { margin-left: auto; }.permission-legend i { width: 6px; height: 6px; border-radius: 50%; }.permission-legend i.allow { background: var(--green); }.permission-legend i.deny { background: #ff6880; }
.feature-system-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; }
.feature-system-grid article { min-height: 220px; padding: 23px; position: relative; background: linear-gradient(145deg,rgba(19,15,26,.97),rgba(9,7,13,.97)); border: 1px solid var(--line); }
.feature-system-grid article > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(240,68,255,.25); color: var(--pink); font: 700 7px var(--font-display); }
.feature-system-grid article > small { position: absolute; top: 19px; right: 20px; color: #3f3942; font: 700 10px var(--font-display); }
.feature-system-grid h2 { margin: 25px 0 9px; font: 700 14px var(--font-display); }.feature-system-grid p { margin: 0; color: #918694; font-size: 12px; line-height: 1.5; }.feature-system-grid b { position: absolute; left: 23px; bottom: 19px; color: #615969; font: 700 6px var(--font-display); letter-spacing: .11em; }
.community-callout { min-height: 180px; margin-top: 42px; padding: 34px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(240,68,255,.19); background: linear-gradient(100deg,rgba(240,68,255,.06),rgba(16,12,22,.96)); }
.community-callout h2 { margin: 0; font: 700 27px var(--font-display); }.community-callout p:not(.small-kicker) { margin: 8px 0 0; color: #9d929f; }

@media (max-width: 1240px) {
  .secondary-shell .desktop-nav .nav-link { padding-inline: 8px; font-size: 8px; }
  .secondary-home-link { display: none; }
  .group-grid { grid-template-columns: 1fr 1fr; }
  .feature-system-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 980px) {
  .subpage-hero-content { flex-direction: column; align-items: flex-start; }
  .subpage-stat-grid { width: min(100%,500px); }
  .system-principles { grid-template-columns: 1fr; }
  .roles-panel { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .subpage-hero { min-height: 520px; }.subpage-hero-content { padding-block: 58px; gap: 38px; }.subpage-hero h1 { font-size: clamp(36px,11vw,49px); }.subpage-hero-content > div:first-child > p:last-child { font-size: 15px; }
  .subpage-stat-grid { grid-template-columns: 1fr 1fr; }.subpage-stat-grid div { min-height: 75px; }
  .subpage-content { padding-block: 30px 55px; }.system-tabs { overflow-x: auto; }.system-tabs button { min-width: max-content; padding-inline: 15px; }
  .group-grid,.feature-system-grid { grid-template-columns: 1fr; }.group-card { min-height: 250px; }
  .role-row { grid-template-columns: 38px 10px 1fr auto; }.role-scope { display: none; }.role-permissions { font-size: 10px; }
  .permissions-head { align-items: flex-start; flex-direction: column; }.permission-legend { align-items: flex-start; flex-direction: column; padding-block: 15px; gap: 8px; }.permission-legend span:last-child { margin-left: 0; }
  .community-callout { align-items: flex-start; flex-direction: column; padding: 25px; }.community-callout .button { width: 100%; }
}

.gallery-rule-card { width: 330px; min-height: 128px; flex: 0 0 auto; padding: 22px; display: flex; align-items: center; gap: 17px; border: 1px solid rgba(240,68,255,.26); background: rgba(7,5,11,.78); backdrop-filter: blur(14px); }
.gallery-rule-icon { width: 50px; height: 50px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--pink); color: var(--pink); font: 700 12px var(--font-display); box-shadow: inset 0 0 17px rgba(240,68,255,.08); }
.gallery-rule-card div { display: flex; flex-direction: column; }.gallery-rule-card small { color: var(--pink); font: 700 7px var(--font-display); letter-spacing: .12em; }.gallery-rule-card strong { font: 700 13px/1.6 var(--font-display); }
.gallery-content { padding-block: 42px 80px; }
.gallery-toolbar { min-height: 64px; display: flex; align-items: center; gap: 12px; margin-bottom: 44px; padding: 9px; border: 1px solid var(--line); background: rgba(13,10,18,.9); }
.gallery-filter { display: flex; gap: 4px; }.gallery-filter button { min-height: 42px; padding: 0 15px; border: 1px solid transparent; background: transparent; color: #817786; font: 700 8px var(--font-display); cursor: pointer; }.gallery-filter button:hover,.gallery-filter button.active { color: white; border-color: rgba(240,68,255,.22); background: rgba(240,68,255,.055); }
.gallery-search { height: 42px; min-width: 220px; margin-left: auto; padding: 0 13px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: #08060b; }.gallery-search .search-glyph { width: 12px; height: 12px; flex: 0 0 auto; }.gallery-search input { width: 100%; border: 0; outline: 0; background: transparent; color: white; font-size: 12px; }.gallery-search input::placeholder { color: #625a66; }
.gallery-overview-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 17px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.gallery-overview-head .small-kicker { margin-bottom: 5px; }.gallery-overview-head h2 { margin: 0; font: 700 27px var(--font-display); }.gallery-overview-head > span { color: #6d6571; font: 700 7px var(--font-display); letter-spacing: .1em; }
.album-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.album-card { min-height: 420px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(18,14,25,.98),rgba(9,7,13,.98)); transition: transform .2s ease,border-color .2s ease; }.album-card:hover { transform: translateY(-4px); border-color: rgba(240,68,255,.3); }
.album-cover { min-height: 235px; position: relative; display: block; background-size: cover; transition: transform .35s ease; }.album-card:hover .album-cover { transform: scale(1.015); }
.album-visibility,.album-photo-count { position: absolute; top: 14px; min-height: 26px; padding: 0 9px; display: grid; place-items: center; backdrop-filter: blur(9px); font: 700 7px var(--font-display); letter-spacing: .08em; }.album-visibility { left: 14px; background: rgba(8,6,11,.76); border: 1px solid rgba(255,255,255,.12); }.album-photo-count { right: 14px; color: var(--pink); background: rgba(17,8,20,.82); border: 1px solid rgba(240,68,255,.22); }
.album-body { flex: 1; padding: 20px 22px; display: flex; flex-direction: column; }.album-category { color: var(--pink); font: 700 7px var(--font-display); letter-spacing: .12em; }.album-body > strong { margin-top: 8px; font: 700 19px var(--font-display); }.album-body > p { margin: 7px 0 15px; color: #938998; font-size: 12px; line-height: 1.5; }
.album-owner { margin-top: auto; display: flex; align-items: center; gap: 10px; }.album-owner > i { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(240,68,255,.24); color: var(--pink); background: rgba(240,68,255,.05); font: normal 700 7px var(--font-display); }.album-owner > span { display: flex; flex-direction: column; color: #807683; font-size: 9px; }.album-owner b { color: #c7bdca; }.album-owner small { color: #615967; }.album-owner > em { margin-left: auto; color: #756d79; font: normal 700 7px var(--font-display); }
.gallery-empty { margin-top: 10px; }
.album-detail-hero { min-height: 430px; display: flex; align-items: flex-end; position: relative; background-size: cover; border-bottom: 1px solid rgba(240,68,255,.2); }.album-detail-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,var(--ink-0),transparent 45%); pointer-events: none; }.album-detail-head { position: relative; z-index: 1; padding-block: 65px 45px; }.album-detail-head > a { color: #928797; font: 700 8px var(--font-display); letter-spacing: .09em; }.album-detail-head > .small-kicker { margin: 28px 0 8px; }.album-detail-head h1 { margin: 0; font: 800 clamp(38px,5vw,65px) var(--font-display); text-transform: uppercase; }.album-detail-head > p:not(.small-kicker) { max-width: 680px; margin: 12px 0 22px; color: #bdb2c0; font-size: 16px; }.album-detail-owner { max-width: 690px; display: flex; align-items: center; gap: 12px; }.album-detail-owner > span { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--pink); color: var(--pink); font: 700 8px var(--font-display); }.album-detail-owner div { display: flex; flex-direction: column; }.album-detail-owner small { color: #766c79; font: 700 6px var(--font-display); }.album-detail-owner strong { font-size: 12px; }.album-detail-owner > b { margin-left: 15px; color: #9c929f; font: 700 7px var(--font-display); }.album-detail-owner > b:first-of-type { margin-left: auto; }
.album-detail-content { padding-block: 38px 80px; }.no-comments-banner { min-height: 90px; margin-bottom: 20px; padding: 18px 21px; display: flex; align-items: center; gap: 15px; border: 1px solid rgba(240,68,255,.2); background: rgba(240,68,255,.04); }.no-comments-banner > span { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--pink); color: var(--pink); font: 700 8px var(--font-display); }.no-comments-banner strong { font: 700 11px var(--font-display); }.no-comments-banner p { margin: 4px 0 0; color: #8d8390; font-size: 11px; }
.photo-grid-basic { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }.photo-grid-basic article { min-height: 380px; border: 1px solid var(--line); background: rgba(14,11,19,.95); }.photo-basic-image { min-height: 275px; background-size: cover; }.photo-grid-basic article > div:last-child { padding: 17px 19px; }.photo-grid-basic strong { font: 700 13px var(--font-display); }.photo-grid-basic p { margin: 5px 0 12px; color: #8d8391; font-size: 11px; }.photo-grid-basic article > div:last-child > span { color: #655e69; font: 700 6px var(--font-display); letter-spacing: .1em; }
.photo-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.photo-grid article { min-width: 0; border: 1px solid var(--line); background: rgba(14,11,19,.95); }
.photo-open { width: 100%; min-height: 315px; padding: 0; display: block; position: relative; overflow: hidden; border: 0; background: #09070d; cursor: zoom-in; }
.photo-image { position: absolute; inset: 0; display: block; background-size: cover; transition: transform .35s ease,filter .35s ease; }.photo-open:hover .photo-image { transform: scale(1.035); filter: brightness(.78); }
.photo-expand { position: absolute; left: 50%; top: 50%; min-height: 35px; padding: 0 13px; display: grid; place-items: center; color: white; border: 1px solid rgba(255,255,255,.35); background: rgba(6,4,9,.65); backdrop-filter: blur(8px); font: 700 7px var(--font-display); letter-spacing: .12em; opacity: 0; transform: translate(-50%,-42%); transition: opacity .2s ease,transform .2s ease; }.photo-open:hover .photo-expand { opacity: 1; transform: translate(-50%,-50%); }
.photo-info { padding: 17px 18px 18px; }.photo-info > div:first-child { margin-bottom: 14px; }.photo-info strong { font: 700 13px var(--font-display); }.photo-info p { margin: 5px 0 0; color: #8d8391; font-size: 11px; }
.reaction-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.reaction-bar button { min-height: 38px; padding: 0 10px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.025); color: #aaa0ad; cursor: pointer; transition: border-color .18s ease,background .18s ease,color .18s ease; }
.reaction-bar button:hover:not(:disabled),.reaction-bar button.active { border-color: rgba(240,68,255,.38); background: rgba(240,68,255,.075); color: white; }.reaction-bar button:disabled { cursor: default; opacity: .72; }
.reaction-bar button > span { min-width: 17px; color: var(--pink); font: 700 9px var(--font-display); }.reaction-bar button > strong { font: 700 9px var(--font-display); }.reaction-bar button > small { grid-column: 1/-1; display: none; }
.reaction-bar.compact button { min-height: 32px; padding-inline: 8px; }.reaction-bar.compact button > span,.reaction-bar.compact button > strong { font-size: 7px; }
.reaction-unavailable { color: #655d68; font: 700 6px var(--font-display); letter-spacing: .09em; }
.lightbox-overlay { position: fixed; inset: 0; z-index: 110; padding: 35px 80px; display: grid; grid-template-columns: 50px minmax(0,1300px) 50px; align-items: center; justify-content: center; gap: 22px; background: rgba(2,1,4,.93); backdrop-filter: blur(14px); }
.lightbox-card { width: 100%; max-height: calc(100vh - 70px); margin: 0; display: grid; grid-template-rows: minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(255,255,255,.13); background: #09070d; box-shadow: 0 35px 100px rgba(0,0,0,.72); }
.lightbox-card img { width: 100%; min-height: 0; max-height: calc(100vh - 220px); object-fit: cover; display: block; background: #050409; }
.lightbox-card figcaption { min-height: 122px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }.lightbox-card figcaption > div:first-child { max-width: 620px; }.lightbox-card figcaption span { color: var(--pink); font: 700 7px var(--font-display); letter-spacing: .1em; }.lightbox-card figcaption strong { display: block; margin-top: 5px; font: 700 16px var(--font-display); }.lightbox-card figcaption p { margin: 4px 0 0; color: #8f8593; font-size: 11px; }
.lightbox-close,.lightbox-nav { border: 1px solid rgba(255,255,255,.16); background: rgba(13,10,18,.9); color: white; cursor: pointer; }.lightbox-close { position: fixed; right: 25px; top: 24px; width: 43px; height: 43px; font-size: 25px; }.lightbox-nav { width: 50px; height: 68px; font-size: 30px; }.lightbox-nav:hover,.lightbox-close:hover { border-color: var(--pink); color: var(--pink); }

@media (max-width: 980px) {
  .gallery-toolbar { align-items: stretch; flex-wrap: wrap; }.gallery-filter { width: 100%; overflow-x: auto; }.gallery-search { flex: 1; margin-left: 0; }
}
@media (max-width: 700px) {
  .gallery-rule-card { width: 100%; }.gallery-content { padding-block: 30px 55px; }.gallery-toolbar { flex-direction: column; }.gallery-filter { padding-bottom: 3px; }.gallery-filter button { min-width: max-content; }.gallery-search,.gallery-toolbar .button { width: 100%; }.album-grid,.photo-grid-basic,.photo-grid { grid-template-columns: 1fr; }.album-card { min-height: 390px; }.album-cover { min-height: 210px; }.album-detail-hero { min-height: 510px; }.album-detail-owner { flex-wrap: wrap; }.album-detail-owner > b:first-of-type { margin-left: 0; }.photo-grid-basic article { min-height: 330px; }.photo-basic-image { min-height: 225px; }.photo-open { min-height: 235px; }.photo-expand { opacity: 1; top: auto; bottom: 12px; transform: translateX(-50%); }.lightbox-overlay { padding: 64px 14px 14px; grid-template-columns: 38px minmax(0,1fr) 38px; gap: 6px; }.lightbox-nav { width: 38px; height: 58px; }.lightbox-close { top: 10px; right: 12px; }.lightbox-card { max-height: calc(100vh - 78px); }.lightbox-card img { max-height: calc(100vh - 300px); min-height: 260px; }.lightbox-card figcaption { align-items: flex-start; flex-direction: column; padding: 16px; }.lightbox-card .reaction-bar { gap: 4px; }
}

/* Forum topic and scoped visibility preview. */
.forum-topic-hero { min-height: 500px; }
.forum-topic-hero .subpage-hero-art { background-position: 66% center; opacity: .68; }
.forum-topic-hero-content { align-items: flex-end; }
.forum-breadcrumb { display: inline-block; margin-bottom: 28px; color: #958a99; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.forum-breadcrumb:hover { color: var(--pink); }
.forum-topic-hero .eyebrow { margin-bottom: 12px; }
.topic-access-card { width: 350px; min-height: 142px; flex: 0 0 auto; padding: 22px; display: flex; align-items: center; gap: 17px; border: 1px solid rgba(83,165,255,.3); background: rgba(7,5,11,.8); backdrop-filter: blur(14px); }
.topic-access-icon { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--blue); color: var(--blue); background: rgba(83,165,255,.055); font: 700 8px var(--font-display); box-shadow: inset 0 0 20px rgba(83,165,255,.08); }
.topic-access-card > div { display: flex; flex-direction: column; }
.topic-access-card small { color: var(--blue); font: 700 7px var(--font-display); letter-spacing: .11em; }
.topic-access-card strong { margin-top: 5px; font: 700 14px var(--font-display); }
.topic-access-card p { margin: 7px 0 0; color: #8f8593; font-size: 11px; line-height: 1.4; }
.forum-topic-content { padding-block: 42px 80px; }
.forum-rule-strip { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-bottom: 38px; }
.forum-rule-strip article { min-height: 128px; padding: 20px; display: grid; grid-template-columns: 40px 1fr; gap: 14px; border: 1px solid var(--line); background: linear-gradient(140deg,rgba(19,15,25,.97),rgba(9,7,13,.97)); }
.forum-rule-strip article > span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(83,165,255,.3); color: var(--blue); font: 700 7px var(--font-display); }
.forum-rule-strip strong { font: 700 12px var(--font-display); }
.forum-rule-strip p { margin: 7px 0 0; color: #8e8491; font-size: 11px; line-height: 1.5; }
.forum-access-workspace { min-width: 0; }
.access-preview-bar { min-height: 112px; margin-bottom: 14px; padding: 21px 23px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border: 1px solid rgba(240,68,255,.2); background: linear-gradient(100deg,rgba(240,68,255,.06),rgba(13,10,18,.96)); }
.access-preview-copy .small-kicker { margin-bottom: 4px; }
.access-preview-copy h2 { margin: 0; font: 700 20px var(--font-display); }
.access-preview-copy > p:last-child { margin: 6px 0 0; color: #8f8593; font-size: 11px; }
.viewer-switch { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.viewer-switch button { min-height: 39px; padding: 0 13px; border: 1px solid rgba(255,255,255,.1); background: rgba(6,4,9,.65); color: #8f8593; font: 700 7px var(--font-display); letter-spacing: .06em; cursor: pointer; }
.viewer-switch button:hover,.viewer-switch button.active { color: white; border-color: rgba(240,68,255,.4); background: rgba(240,68,255,.095); box-shadow: inset 0 -2px 0 var(--pink); }
.forum-access-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 14px; align-items: start; }
.forum-entry-column { min-width: 0; }
.forum-entry-head { min-height: 118px; margin-bottom: 9px; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid var(--line); background: rgba(13,10,18,.94); }
.viewer-role-label { color: var(--blue); font: 700 7px var(--font-display); letter-spacing: .1em; }
.forum-entry-head h2 { margin: 6px 0 0; font: 700 22px var(--font-display); }
.forum-entry-head p { margin: 5px 0 0; color: #877d8a; font-size: 11px; }
.entry-result-count { display: flex; align-items: center; gap: 10px; padding-left: 20px; border-left: 1px solid var(--line); }
.entry-result-count strong { color: var(--pink); font: 700 30px var(--font-display); }
.entry-result-count span { color: #6f6772; font: 700 6px/1.5 var(--font-display); letter-spacing: .08em; }
.forum-entry-list { display: grid; gap: 8px; }
.forum-entry-card { --entry-tone: var(--pink); min-height: 156px; display: grid; grid-template-columns: 48px minmax(0,1fr) 112px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(100deg,rgba(19,15,25,.97),rgba(9,7,13,.98)); transition: transform .18s ease,border-color .18s ease; }
.forum-entry-card:hover:not(.forum-entry-locked) { transform: translateX(3px); border-color: color-mix(in srgb,var(--entry-tone) 35%,transparent); }
.forum-entry-card.visibility-public { --entry-tone: var(--green); }
.forum-entry-card.visibility-members { --entry-tone: var(--violet); }
.forum-entry-card.visibility-police { --entry-tone: var(--blue); }
.forum-entry-card.visibility-lead { --entry-tone: var(--amber); }
.forum-entry-card.visibility-internal { --entry-tone: #c48cff; }
.forum-entry-index { position: relative; display: grid; place-items: center; overflow: hidden; border-right: 1px solid var(--line); }
.forum-entry-index::before { content: ""; position: absolute; inset: 0; background: var(--entry-tone); opacity: .045; }
.forum-entry-index span { color: var(--entry-tone); font: 700 8px var(--font-display); writing-mode: vertical-rl; transform: rotate(180deg); }
.forum-entry-main { min-width: 0; padding: 18px 20px; }
.forum-entry-meta { min-height: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #6f6673; font-size: 9px; }
.pin-label,.visibility-label { min-height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border: 1px solid; font: 700 6px var(--font-display); letter-spacing: .08em; }
.pin-label { color: var(--pink); border-color: rgba(240,68,255,.25); background: rgba(240,68,255,.05); }
.visibility-label.visibility-public { color: var(--green); border-color: rgba(93,240,172,.25); background: rgba(93,240,172,.04); }
.visibility-label.visibility-members { color: var(--violet); border-color: rgba(155,103,255,.28); background: rgba(155,103,255,.05); }
.visibility-label.visibility-police { color: var(--blue); border-color: rgba(83,165,255,.28); background: rgba(83,165,255,.05); }
.visibility-label.visibility-lead { color: var(--amber); border-color: rgba(255,181,71,.28); background: rgba(255,181,71,.05); }
.visibility-label.visibility-internal { color: #c48cff; border-color: rgba(196,140,255,.28); background: rgba(196,140,255,.05); }
.forum-entry-main h3 { margin: 7px 0 5px; font: 700 clamp(15px,1.35vw,18px) var(--font-display); }
.forum-entry-main h3 a:hover { color: var(--entry-tone); }
.forum-entry-main > p { margin: 0; color: #978d9a; font-size: 12px; line-height: 1.45; }
.forum-entry-author { margin-top: 10px; display: flex; align-items: center; gap: 7px; }
.forum-entry-author > span { width: 21px; height: 21px; display: grid; place-items: center; color: var(--entry-tone); border: 1px solid color-mix(in srgb,var(--entry-tone) 30%,transparent); font: 700 6px var(--font-display); }
.forum-entry-author small { color: #746b77; font-size: 9px; }.forum-entry-author strong { color: #bbb1be; }
.forum-entry-actions { margin-top: 11px; padding-top: 9px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; border-top: 1px solid rgba(255,255,255,.055); }
.forum-entry-actions small { margin-right: 3px; color: #5e5662; font: 700 6px var(--font-display); letter-spacing: .09em; }
.forum-entry-actions span { min-height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid; font: 700 5px var(--font-display); letter-spacing: .06em; }
.forum-entry-actions span.allowed { color: var(--green); border-color: rgba(93,240,172,.24); background: rgba(93,240,172,.04); }
.forum-entry-actions span.denied { color: #665e69; border-color: rgba(255,255,255,.07); background: rgba(255,255,255,.018); }
.forum-entry-stats { padding: 14px 10px; display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 11px 0; border-left: 1px solid var(--line); text-align: center; }
.forum-entry-stats strong { display: block; font: 700 11px var(--font-display); }.forum-entry-stats span { display: block; margin-top: 3px; color: #625a66; font: 700 6px var(--font-display); }.forum-entry-stats a { grid-column: 1/-1; color: var(--entry-tone); font-size: 18px; }
.forum-entry-locked { --entry-tone: #514a55; min-height: 104px; grid-template-columns: 48px minmax(0,1fr) auto; background: repeating-linear-gradient(115deg,rgba(16,13,21,.84) 0 22px,rgba(18,15,23,.84) 23px 44px); }
.forum-entry-locked:hover { border-color: rgba(255,255,255,.1); }
.locked-entry-copy { min-width: 0; padding: 18px 20px; display: flex; align-items: center; gap: 13px; }
.lock-glyph { width: 28px; height: 23px; flex: 0 0 auto; position: relative; border: 1px solid #615a65; }
.lock-glyph::before { content: ""; position: absolute; width: 12px; height: 10px; left: 6px; top: -9px; border: 1px solid #615a65; border-bottom: 0; border-radius: 9px 9px 0 0; }
.locked-entry-copy strong { color: #8c838f; font: 700 11px var(--font-display); }.locked-entry-copy p { margin: 4px 0 0; color: #625a66; font-size: 10px; }
.locked-requirement { align-self: center; margin-right: 18px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.08); color: #6c646f; font: 700 6px var(--font-display); letter-spacing: .07em; }
.forum-rights-sidebar { display: grid; gap: 10px; }
.viewer-rights-card,.delegation-card,.access-priority-card { border: 1px solid var(--line); background: linear-gradient(145deg,rgba(18,14,24,.98),rgba(9,7,13,.98)); }
.viewer-rights-card { padding: 20px; }
.viewer-rights-head { padding-bottom: 16px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--line); }
.viewer-rights-head > span { width: 39px; height: 39px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--pink); color: var(--pink); background-color: #100c15; background-position: center; background-size: cover; font: 700 7px var(--font-display); }
.viewer-rights-head div { display: flex; flex-direction: column; }.viewer-rights-head small { color: #6d6470; font: 700 6px var(--font-display); letter-spacing: .1em; }.viewer-rights-head strong { margin-top: 4px; font: 700 11px var(--font-display); }
.viewer-rights-card ul { margin: 14px 0 17px; padding: 0; list-style: none; display: grid; gap: 8px; }
.viewer-rights-card li { min-height: 32px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 8px; }
.viewer-rights-card li > span { min-height: 23px; display: grid; place-items: center; border: 1px solid; font: 700 6px var(--font-display); }.viewer-rights-card li.allowed > span { color: var(--green); border-color: rgba(93,240,172,.25); }.viewer-rights-card li.denied > span { color: #ff6880; border-color: rgba(255,104,128,.22); }
.viewer-rights-card li p { margin: 0; color: #968c99; font-size: 10px; }.viewer-rights-card .button { width: 100%; }.viewer-rights-card .button:disabled { opacity: .36; cursor: not-allowed; filter: grayscale(.8); }
.delegation-card { padding: 22px; }.delegation-card h2 { margin: 0; font: 700 17px/1.3 var(--font-display); }.delegation-card > p:not(.small-kicker) { margin: 9px 0 17px; color: #8f8593; font-size: 11px; line-height: 1.55; }
.delegation-flow { display: flex; align-items: center; justify-content: space-between; gap: 5px; }.delegation-flow span { min-height: 31px; padding: 0 8px; display: grid; place-items: center; border: 1px solid rgba(83,165,255,.22); color: var(--blue); background: rgba(83,165,255,.04); font: 700 6px var(--font-display); }.delegation-flow b { color: #4e4852; font-weight: 400; }
.access-priority-card { padding: 19px 21px; border-color: rgba(255,181,71,.21); background: rgba(255,181,71,.035); }.access-priority-card strong { color: var(--amber); font: 700 7px var(--font-display); letter-spacing: .1em; }.access-priority-card p { margin: 7px 0 0; color: #918794; font-size: 10px; line-height: 1.5; }

@media (max-width: 1100px) {
  .forum-access-grid { grid-template-columns: 1fr; }
  .forum-rights-sidebar { grid-template-columns: repeat(2,1fr); }
  .access-priority-card { grid-column: 1/-1; }
}
@media (max-width: 980px) {
  .forum-topic-hero-content { align-items: flex-start; }
  .topic-access-card { width: min(100%,500px); }
  .forum-rule-strip { grid-template-columns: 1fr; }
  .access-preview-bar { align-items: flex-start; flex-direction: column; }
  .viewer-switch { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .forum-topic-hero { min-height: 600px; }
  .forum-topic-content { padding-block: 30px 55px; }
  .topic-access-card { width: 100%; }
  .forum-rule-strip { margin-bottom: 27px; }
  .access-preview-bar { padding: 19px; }
  .viewer-switch { width: 100%; display: grid; grid-template-columns: repeat(2,1fr); }
  .viewer-switch button:last-child { grid-column: auto; }
  .forum-entry-head { align-items: flex-start; flex-direction: column; }
  .entry-result-count { width: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .forum-entry-card { grid-template-columns: 39px minmax(0,1fr); }
  .forum-entry-main { padding: 16px; }
  .forum-entry-stats { grid-column: 1/-1; grid-template-columns: 1fr 1fr auto; padding: 10px 15px; border-left: 0; border-top: 1px solid var(--line); align-items: center; text-align: left; }
  .forum-entry-stats a { grid-column: auto; grid-row: 1; }
  .forum-entry-locked { grid-template-columns: 39px minmax(0,1fr); }
  .locked-requirement { grid-column: 2; justify-self: start; margin: 0 0 15px 16px; }
  .locked-entry-copy { padding: 18px 16px 10px; }
  .forum-rights-sidebar { grid-template-columns: 1fr; }
  .access-priority-card { grid-column: auto; }
}

/* Landing page: permission-aware recent contribution feed. */
.accent-green { color: var(--green)!important; }
.accent-slate { color: #aaa0ad!important; }
.landing-access-panel { overflow: hidden; }
.landing-access-current { padding: 18px 16px 12px; display: flex; align-items: center; gap: 11px; }
.landing-access-current > span { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--pink); color: var(--pink); background-color: rgba(240,68,255,.05); background-position: center; background-size: cover; font: 700 7px var(--font-display); }
.landing-access-current > div { min-width: 0; display: flex; flex-direction: column; }.landing-access-current small { color: #68606c; font: 700 6px var(--font-display); letter-spacing: .1em; }.landing-access-current strong { margin-top: 4px; overflow: hidden; color: #d9cfdd; font: 700 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.landing-access-description { min-height: 58px; margin: 0; padding: 0 16px 14px; color: #8f8593; font-size: 11px; line-height: 1.5; }
.role-progress-list { padding: 6px; display: grid; gap: 3px; border-top: 1px solid var(--line); }
.role-progress-list > div { min-height: 40px; padding: 0 9px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; border: 1px solid transparent; color: #5f5863; }.role-progress-list > div > span { font: 700 6px var(--font-display); }.role-progress-list > div > strong { color: #77707b; font: 700 8px var(--font-display); }.role-progress-list > div > b { font: 700 5px var(--font-display); letter-spacing: .07em; }
.role-progress-list > div.reached { background: rgba(93,240,172,.018); }.role-progress-list > div.reached > span,.role-progress-list > div.reached > strong { color: #738f80; }.role-progress-list > div.current { border-color: rgba(240,68,255,.22); background: rgba(240,68,255,.055); }.role-progress-list > div.current > span,.role-progress-list > div.current > b { color: var(--pink); }.role-progress-list > div.current > strong { color: white; }
.landing-viewer-list { padding: 6px; display: grid; gap: 3px; border-top: 1px solid var(--line); }
.landing-viewer-list button { min-height: 47px; padding: 0 9px; display: grid; grid-template-columns: 31px 1fr auto; align-items: center; gap: 8px; border: 1px solid transparent; background: transparent; color: #807685; text-align: left; cursor: pointer; }
.landing-viewer-list button > span { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); color: #968c99; font: 700 6px var(--font-display); }.landing-viewer-list button > strong { color: #aaa0ad; font: 700 9px var(--font-display); }.landing-viewer-list button > b { color: #59525c; font: 700 5px var(--font-display); letter-spacing: .08em; }
.landing-viewer-list button:hover,.landing-viewer-list button.active { border-color: rgba(240,68,255,.18); background: rgba(240,68,255,.055); }.landing-viewer-list button.active > span { border-color: rgba(240,68,255,.4); color: var(--pink); }.landing-viewer-list button.active > strong,.landing-viewer-list button.active > b { color: white; }
.landing-access-note { margin: 7px 12px 13px; padding: 12px; border: 1px solid rgba(83,165,255,.16); background: rgba(83,165,255,.035); }.landing-access-note strong { color: var(--blue); font: 700 6px var(--font-display); letter-spacing: .1em; }.landing-access-note p { margin: 5px 0 0; color: #78707b; font-size: 9px; line-height: 1.45; }
.landing-feed-summary { min-height: 68px; margin-bottom: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(93,240,172,.16); background: rgba(93,240,172,.03); }
.feed-live-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }.landing-feed-summary > div { display: flex; flex-direction: column; }.landing-feed-summary strong { color: #c7f1dc; font: 700 8px var(--font-display); letter-spacing: .08em; }.landing-feed-summary p { margin: 4px 0 0; color: #7f8e87; font-size: 10px; }.landing-feed-summary > small { margin-left: auto; color: #625b66; font: 700 6px var(--font-display); letter-spacing: .1em; }
.landing-thread-card .thread-meta { flex-wrap: wrap; }.landing-thread-card .thread-label { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landing-visibility { min-height: 20px; padding: 0 7px; display: inline-grid; place-items: center; border: 1px solid; font: 700 6px var(--font-display); letter-spacing: .06em; }
.landing-visibility.visibility-public { color: var(--green); border-color: rgba(93,240,172,.22); background: rgba(93,240,172,.04); }.landing-visibility.visibility-members { color: var(--violet); border-color: rgba(140,92,255,.25); background: rgba(140,92,255,.05); }.landing-visibility.visibility-police { color: var(--blue); border-color: rgba(74,185,255,.25); background: rgba(74,185,255,.05); }.landing-visibility.visibility-lead { color: var(--amber); border-color: rgba(255,173,73,.25); background: rgba(255,173,73,.05); }.landing-visibility.visibility-internal { color: #c48cff; border-color: rgba(196,140,255,.25); background: rgba(196,140,255,.05); }

/* Citizen-only launcher area. */
.downloads-hero { min-height: 500px; }.download-access-card { width: min(390px,100%); padding: 20px; display: flex; align-items: center; gap: 14px; border: 1px solid rgba(93,240,172,.25); background: linear-gradient(135deg,rgba(93,240,172,.075),rgba(10,8,14,.94)); }.download-access-card > span { width: 55px; height: 55px; display: grid; place-items: center; overflow: hidden; color: var(--green); border: 1px solid rgba(93,240,172,.4); background-color: #100c15; background-position: center; background-size: cover; font: 700 9px var(--font-display); }.download-access-card div { display: flex; flex-direction: column; }.download-access-card small { color: var(--green); font: 700 6px var(--font-display); letter-spacing: .1em; }.download-access-card strong { margin-top: 5px; font: 700 13px var(--font-display); }.download-access-card p { margin: 4px 0 0; color: #817986; font-size: 10px; }
.downloads-content { padding-block: 52px 80px; }.launcher-download-card { min-height: 270px; padding: 30px; display: grid; grid-template-columns: 145px minmax(0,1fr) auto; align-items: center; gap: 31px; border: 1px solid rgba(74,185,255,.25); background: linear-gradient(115deg,rgba(74,185,255,.065),rgba(15,11,21,.98) 42%,rgba(7,6,10,.98)); }.launcher-mark { width: 145px; height: 145px; display: grid; place-items: center; align-content: center; border: 1px solid rgba(74,185,255,.35); background: radial-gradient(circle,rgba(74,185,255,.11),transparent 70%); box-shadow: inset 0 0 35px rgba(74,185,255,.06); }.launcher-mark span { color: var(--blue); font: 800 30px var(--font-display); letter-spacing: .08em; }.launcher-mark b { margin-top: 8px; color: #797280; font: 700 7px var(--font-display); letter-spacing: .18em; }.launcher-download-copy h2 { margin: 0; font: 700 25px var(--font-display); }.launcher-download-copy > p:not(.small-kicker) { max-width: 680px; margin: 10px 0 0; color: #998f9c; font-size: 13px; line-height: 1.55; }.launcher-meta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; }.launcher-meta span { min-height: 27px; padding: 0 9px; display: inline-grid; place-items: center; color: #8b9daa; border: 1px solid rgba(74,185,255,.16); background: rgba(74,185,255,.03); font: 700 6px var(--font-display); letter-spacing: .07em; }.launcher-download-card .button:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.download-rule-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.download-rule-grid article { min-height: 170px; padding: 22px; border: 1px solid var(--line); background: rgba(13,10,18,.94); }.download-rule-grid article > span { color: var(--blue); font: 700 8px var(--font-display); }.download-rule-grid strong { display: block; margin-top: 20px; font: 700 12px var(--font-display); }.download-rule-grid p { margin: 8px 0 0; color: #887f8c; font-size: 11px; line-height: 1.55; }

@media (max-width: 980px) {
  .launcher-download-card { grid-template-columns: 115px 1fr; }.launcher-mark { width: 115px; height: 115px; }.launcher-download-card > .button { grid-column: 1/-1; width: 100%; }
}
@media (max-width: 700px) {
  .member-pill { display: none; }.downloads-hero { min-height: 600px; }.download-access-card { width: 100%; }.downloads-content { padding-block: 32px 55px; }.launcher-download-card { padding: 22px; grid-template-columns: 1fr; }.launcher-mark { width: 100%; height: 110px; }.download-rule-grid { grid-template-columns: 1fr; }
}

/* Dedicated forum index reached from the Forum navigation item. */
.forum-index-hero { min-height: 460px; }
.forum-index-content { padding-block: 45px 80px; }
.forum-index-intro { min-height: 94px; margin-bottom: 16px; padding-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; border-bottom: 1px solid var(--line); }
.forum-index-intro h2 { margin: 0; font: 700 28px var(--font-display); }.forum-index-intro .small-kicker { margin-bottom: 5px; }.forum-index-intro > p { max-width: 610px; margin: 0; color: #908693; font-size: 13px; line-height: 1.55; }
.forum-overview-access { min-height: 92px; margin-bottom: 13px; padding: 16px 18px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border: 1px solid rgba(240,68,255,.2); background: linear-gradient(100deg,rgba(240,68,255,.06),rgba(13,10,18,.96)); }
.forum-overview-access > div:first-child { display: flex; flex-direction: column; }.forum-overview-access > div:first-child > span { color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .11em; }.forum-overview-access > div:first-child > strong { margin-top: 4px; font: 700 13px var(--font-display); }.forum-overview-access > div:first-child > p { margin: 4px 0 0; color: #827986; font-size: 10px; }
.forum-topic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.forum-topic-card { --tone: var(--pink); min-height: 330px; padding: 23px; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(19,15,26,.98),rgba(9,7,13,.98)); transition: transform .2s ease,border-color .2s ease; }
.forum-topic-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -105px; top: -105px; border-radius: 50%; background: var(--tone); filter: blur(48px); opacity: .14; }.forum-topic-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--tone) 34%,transparent); }
.forum-topic-card-top { display: flex; align-items: center; gap: 9px; position: relative; }.forum-topic-card-top > span { width: 39px; height: 39px; display: grid; place-items: center; color: var(--tone); border: 1px solid color-mix(in srgb,var(--tone) 40%,transparent); font: 700 7px var(--font-display); }.forum-topic-card-top > b { color: var(--tone); font: 700 7px var(--font-display); letter-spacing: .08em; }.forum-topic-card-top > small { margin-left: auto; color: #665f69; font: 700 6px var(--font-display); }
.forum-topic-card h2 { margin: 22px 0 8px; font: 700 20px var(--font-display); }.forum-topic-card > p { min-height: 45px; margin: 0; color: #958b98; font-size: 12px; line-height: 1.5; }
.forum-topic-latest { margin-top: 19px; padding: 13px 0; display: flex; flex-direction: column; border-block: 1px solid var(--line); }.forum-topic-latest > span { color: var(--tone); font: 700 6px var(--font-display); letter-spacing: .09em; }.forum-topic-latest > strong { margin-top: 6px; color: #cbc1ce; font: 700 11px var(--font-display); }.forum-topic-latest > small { margin-top: 4px; color: #716975; font-size: 9px; }
.forum-topic-card-foot { margin-top: auto; padding-top: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.forum-topic-card-foot > span { max-width: 60%; overflow: hidden; color: #675f6b; font: 700 6px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }.forum-topic-card-foot a { color: #c7bdca; font: 700 7px var(--font-display); letter-spacing: .07em; }.forum-topic-card-foot a b { color: var(--tone); margin-left: 5px; }

@media (max-width: 1240px) {
  .secondary-shell .desktop-nav .nav-link { padding-inline: 6px; }
}
@media (max-width: 980px) {
  .forum-index-intro,.forum-overview-access { align-items: flex-start; flex-direction: column; }
  .forum-overview-access .viewer-switch { justify-content: flex-start; }
}
@media (max-width: 700px) {
  .landing-feed-summary { align-items: flex-start; flex-wrap: wrap; }.landing-feed-summary > small { width: 100%; margin-left: 19px; }
  .landing-thread-card .thread-label { max-width: 100%; }
  .forum-index-content { padding-block: 30px 55px; }.forum-index-intro { align-items: flex-start; flex-direction: column; }.forum-topic-grid { grid-template-columns: 1fr; }.forum-overview-access .viewer-switch { width: 100%; }.forum-topic-card { min-height: 315px; }
}

/* Live role badge and topic actions. */
.active-role-stamp { min-width: 220px; padding: 10px 13px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(93,240,172,.22); background: rgba(93,240,172,.04); }.active-role-stamp > .member-avatar-image { width: 38px; height: 38px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; color: var(--green); border: 1px solid rgba(93,240,172,.3); background-color: #100c15; background-position: center; background-size: cover; font: 700 7px var(--font-display); }.active-role-stamp > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.active-role-stamp small { color: var(--green); font: 700 6px var(--font-display); letter-spacing: .11em; }.active-role-stamp strong { max-width: 145px; margin-top: 4px; overflow: hidden; font: 700 9px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.topic-primary-actions { min-height: 82px; margin-bottom: 12px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid rgba(93,240,172,.18); background: linear-gradient(100deg,rgba(93,240,172,.045),rgba(12,9,17,.97)); }
.topic-primary-actions > div { display: flex; flex-direction: column; }.topic-primary-actions > div span { color: var(--green); font: 700 6px var(--font-display); letter-spacing: .11em; }.topic-primary-actions > div strong { margin-top: 5px; font: 700 12px var(--font-display); }

/* Contribution editor. */
.compact-editor-hero { min-height: 390px; }.compact-editor-hero .subpage-hero-content { align-items: flex-start; }
.editor-page-content { padding-block: 44px 80px; }.contribution-editor { width: min(100%,1020px); margin-inline: auto; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(240,68,255,.2); background: linear-gradient(145deg,rgba(20,15,27,.98),rgba(8,6,12,.98)); box-shadow: 0 22px 70px rgba(0,0,0,.24); }
.editor-head { margin-bottom: 7px; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; border-bottom: 1px solid var(--line); }.editor-head .small-kicker { margin-bottom: 6px; }.editor-head h2 { margin: 0; font: 700 22px var(--font-display); }.editor-head > span { padding: 8px 10px; color: var(--amber); border: 1px solid rgba(255,173,73,.25); background: rgba(255,173,73,.04); font: 700 6px var(--font-display); letter-spacing: .1em; }
.contribution-editor > label,.contribution-manage-modal form > label,.reply-editor > label { margin: 17px 0 7px; color: #b8adb9; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.contribution-editor input,.contribution-editor textarea,.contribution-editor select,.contribution-manage-modal input,.contribution-manage-modal textarea,.contribution-manage-modal select,.reply-editor textarea,.admin-console input,.admin-console textarea,.admin-console select { width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: 0; outline: 0; background: #08060c; color: white; }
.contribution-editor input,.contribution-manage-modal input,.admin-console input,.admin-console select { height: 48px; padding: 0 14px; }.contribution-editor textarea,.contribution-manage-modal textarea,.reply-editor textarea,.admin-console textarea { padding: 13px 14px; resize: vertical; line-height: 1.55; }
.contribution-editor input:focus,.contribution-editor textarea:focus,.contribution-editor select:focus,.contribution-manage-modal input:focus,.contribution-manage-modal textarea:focus,.contribution-manage-modal select:focus,.reply-editor textarea:focus,.admin-console input:focus,.admin-console textarea:focus,.admin-console select:focus { border-color: rgba(240,68,255,.65); box-shadow: 0 0 20px rgba(240,68,255,.08); }
.editor-options { margin-top: 19px; padding: 17px; display: grid; grid-template-columns: minmax(240px,360px) 1fr; align-items: end; gap: 25px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.editor-options label { display: flex; flex-direction: column; gap: 7px; color: #b8adb9; font: 700 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }.editor-options select,.contribution-manage-modal select { height: 48px; padding: 0 14px; }.editor-options p { margin: 0; color: #837a87; font-size: 11px; line-height: 1.5; }
.form-error { margin: 16px 0 0; padding: 11px 13px; color: #ff9aaa; border: 1px solid rgba(255,104,128,.25); background: rgba(255,104,128,.05); font-size: 11px; }.editor-actions { margin-top: 23px; display: flex; justify-content: flex-end; gap: 9px; }

/* Contribution detail, replies and edit sheet. */
.contribution-hero { min-height: 390px; position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid rgba(240,68,255,.2); background: radial-gradient(circle at 80% 30%,rgba(140,92,255,.16),transparent 28rem),linear-gradient(120deg,#0f0b16,#050409 72%); }
.contribution-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .25; background: repeating-linear-gradient(115deg,transparent 0 75px,rgba(255,255,255,.025) 76px,transparent 78px); }.contribution-hero-inner { padding-block: 62px; display: flex; align-items: flex-end; justify-content: space-between; gap: 55px; }.contribution-hero-inner > div:first-child { max-width: 980px; }.contribution-hero .eyebrow { margin-bottom: 11px; }.contribution-hero h1 { max-width: 1000px; margin: 0; font: 800 clamp(34px,4.5vw,62px)/1.08 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }.contribution-hero-inner > div:first-child > p:last-child { max-width: 780px; margin: 18px 0 0; color: #b9aebd; font-size: 17px; }
.contribution-author-card { width: min(340px,100%); flex: 0 0 auto; padding: 19px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(74,185,255,.24); background: rgba(8,6,12,.75); }.contribution-author-card > span { width: 50px; height: 50px; display: grid; place-items: center; color: var(--blue); border: 1px solid rgba(74,185,255,.4); font: 700 8px var(--font-display); }.contribution-author-card > div { display: flex; flex-direction: column; }.contribution-author-card small { color: var(--blue); font: 700 6px var(--font-display); letter-spacing: .1em; }.contribution-author-card strong { margin-top: 4px; font: 700 11px var(--font-display); }.contribution-author-card p { margin: 4px 0 0; color: #79717d; font-size: 10px; }
.contribution-content { padding-block: 35px 80px; }.contribution-toolbar { min-height: 64px; margin-bottom: 10px; padding: 10px 12px 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--line); background: rgba(13,10,18,.94); }.contribution-toolbar > div { display: flex; flex-wrap: wrap; gap: 7px; }.contribution-toolbar > div span { min-height: 27px; padding: 0 9px; display: inline-grid; place-items: center; color: #827986; border: 1px solid rgba(255,255,255,.08); font: 700 6px var(--font-display); letter-spacing: .08em; }
.contribution-original,.reply-card { display: grid; grid-template-columns: 180px minmax(0,1fr); border: 1px solid var(--line); background: linear-gradient(120deg,rgba(18,14,25,.98),rgba(9,7,13,.98)); }.contribution-original > aside,.reply-card > aside { padding: 24px 18px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid var(--line); background: rgba(255,255,255,.012); }.contribution-original > aside > span,.reply-card > aside > span { width: 54px; height: 54px; display: grid; place-items: center; color: var(--pink); border: 1px solid rgba(240,68,255,.36); background: rgba(240,68,255,.04); font: 700 9px var(--font-display); }.contribution-original > aside strong,.reply-card > aside strong { max-width: 100%; margin-top: 12px; overflow: hidden; font: 700 10px var(--font-display); text-overflow: ellipsis; }.contribution-original > aside small,.reply-card > aside small { margin-top: 5px; color: #665e69; font: 700 6px var(--font-display); letter-spacing: .09em; }.contribution-original > div,.reply-card > div { min-width: 0; padding: 27px 30px; }.post-marker,.reply-date { margin: 0 0 17px; color: var(--pink); font: 700 7px var(--font-display); letter-spacing: .1em; }.post-content p,.reply-card > div > p:not(.reply-date) { margin: 0 0 14px; color: #c3b9c6; font-size: 15px; line-height: 1.68; }.post-edit-note { display: inline-block; margin-top: 10px; color: #6f6773; font-size: 10px; }
.reply-section { margin-top: 42px; }.reply-section .section-heading > span { color: var(--pink); font: 700 10px var(--font-display); }.reply-list { display: grid; gap: 8px; }.reply-card > aside > span { color: var(--violet); border-color: rgba(140,92,255,.35); }.reply-card > div { padding-block: 23px; }.reply-date { color: #716977; }
.reply-editor,.reply-login { margin-top: 12px; padding: 23px; border: 1px solid rgba(93,240,172,.18); background: rgba(93,240,172,.025); }.reply-editor { display: flex; flex-direction: column; align-items: flex-start; }.reply-editor > label { margin-top: 0; }.reply-editor textarea { min-height: 145px; }.reply-editor .button { margin-top: 17px; align-self: flex-end; }.reply-login { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }.reply-login p { margin: 0; color: #968c99; }
.contribution-manage-modal { position: fixed; z-index: 92; top: 0; right: 0; bottom: 0; width: min(610px,96vw); padding: 34px; overflow-y: auto; border-left: 1px solid rgba(240,68,255,.34); background: linear-gradient(150deg,#171020,#08060c 75%); box-shadow: -25px 0 70px rgba(0,0,0,.58); transform: translateX(105%); transition: transform .28s ease; }.contribution-manage-modal.open { transform: translateX(0); }.contribution-manage-modal h2 { margin: 0 0 18px; font: 700 28px var(--font-display); }.contribution-manage-modal form { display: flex; flex-direction: column; }.contribution-manage-modal .button { margin-top: 22px; }.contribution-manage-modal .modal-close { position: absolute; top: 20px; right: 20px; }

/* Permission-aware team panel. */
.admin-hero { min-height: 455px; }.admin-content { padding-block: 40px 80px; }.admin-console { min-width: 0; }.admin-tabs { min-height: 59px; padding: 5px; display: flex; gap: 4px; border: 1px solid var(--line); background: rgba(13,10,18,.95); }.admin-tabs button { min-width: 130px; padding: 0 18px; position: relative; border: 1px solid transparent; background: transparent; color: #837987; font: 700 8px var(--font-display); letter-spacing: .08em; cursor: pointer; }.admin-tabs button:hover,.admin-tabs button.active { color: white; border-color: rgba(240,68,255,.19); background: rgba(240,68,255,.055); }.admin-tabs button.active::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: -6px; height: 2px; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.admin-notice { margin: 11px 0 0; padding: 12px 14px; color: #ff9aaa; border: 1px solid rgba(255,104,128,.25); background: rgba(255,104,128,.05); }.admin-overview-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }.admin-overview-grid article { min-height: 190px; padding: 23px; display: flex; flex-direction: column; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(19,15,26,.97),rgba(9,7,13,.97)); }.admin-overview-grid article > span { color: var(--pink); font: 700 7px var(--font-display); letter-spacing: .11em; }.admin-overview-grid article > strong { margin-top: 28px; font: 700 clamp(21px,2vw,31px) var(--font-display); }.admin-overview-grid article > p { margin: auto 0 0; color: #817985; font-size: 11px; line-height: 1.45; }
.admin-section-head { padding: 28px 0 18px; }.admin-section-head .small-kicker { margin-bottom: 5px; }.admin-section-head h2 { margin: 0; font: 700 25px var(--font-display); }.admin-section-head > p:last-child { margin: 7px 0 0; color: #8c8290; }
.admin-topic-list > form { min-height: 142px; margin-bottom: 8px; padding: 17px; display: grid; grid-template-columns: 54px minmax(170px,.8fr) minmax(280px,1.6fr) 86px auto; align-items: end; gap: 13px; border: 1px solid var(--line); background: rgba(14,11,19,.95); }.admin-topic-code { width: 50px; height: 50px; align-self: center; display: grid; place-items: center; color: var(--tone); border: 1px solid color-mix(in srgb,var(--tone) 40%,transparent); font: 700 7px var(--font-display); }.admin-topic-list label { min-width: 0; display: flex; flex-direction: column; gap: 7px; color: #8f8593; font: 700 6px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }.admin-sort-field input { text-align: center; }
.admin-member-list { display: grid; gap: 7px; }.admin-member-list .admin-section-head { margin-bottom: -7px; }.admin-member-list > article { min-height: 104px; padding: 14px 15px; display: grid; grid-template-columns: 45px minmax(190px,1fr) minmax(420px,auto); align-items: center; gap: 14px; border: 1px solid var(--line); background: rgba(14,11,19,.95); }.admin-member-avatar { width: 43px; height: 43px; display: grid; place-items: center; color: var(--green); border: 1px solid rgba(93,240,172,.28); font: 700 7px var(--font-display); }.admin-member-identity { min-width: 0; display: flex; flex-direction: column; }.admin-member-identity strong { font: 700 11px var(--font-display); }.admin-member-identity small { margin-top: 4px; overflow: hidden; color: #716975; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.admin-member-identity em { margin-top: 7px; color: var(--violet); font: 700 6px var(--font-display); font-style: normal; letter-spacing: .08em; }.admin-member-controls { display: flex; align-items: end; justify-content: flex-end; gap: 8px; }.admin-member-list form { display: flex; align-items: end; gap: 7px; }.admin-member-list form label { display: flex; flex-direction: column; gap: 5px; color: #756d79; font: 700 6px var(--font-display); letter-spacing: .08em; }.admin-member-list select { min-width: 160px; }.admin-fixed-permission { min-height: 42px; padding: 0 12px; display: inline-flex; align-items: center; color: #847b88; border: 1px solid var(--line); background: rgba(255,255,255,.018); font: 700 6px var(--font-display); letter-spacing: .08em; }
.admin-log-list { display: grid; gap: 7px; }.admin-log-list .admin-section-head { margin-bottom: -7px; }.admin-log-list > article { min-height: 78px; padding: 14px 17px; display: grid; grid-template-columns: 190px 1fr auto; align-items: center; gap: 18px; border: 1px solid var(--line); background: rgba(14,11,19,.95); }.admin-log-list > article > span { color: var(--amber); font: 700 7px var(--font-display); letter-spacing: .08em; }.admin-log-list > article > strong { overflow: hidden; color: #bbb1be; font: 700 9px var(--font-display); text-overflow: ellipsis; }.admin-log-list > article > small { color: #716975; font-size: 9px; text-align: right; }

@media (max-width: 1100px) {
  .admin-overview-grid { grid-template-columns: repeat(2,1fr); }.admin-topic-list > form { grid-template-columns: 54px 1fr 86px auto; }.admin-topic-list > form label:nth-of-type(2) { grid-column: 2/-1; }.admin-member-list > article { grid-template-columns: 45px 1fr; }.admin-member-controls { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }.contribution-hero-inner { align-items: flex-start; flex-direction: column; }.contribution-author-card { width: min(100%,500px); }
}
@media (max-width: 700px) {
  .active-role-stamp { width: 100%; }.topic-primary-actions { align-items: flex-start; flex-direction: column; }.topic-primary-actions .button { width: 100%; }.editor-page-content,.admin-content { padding-block: 28px 55px; }.contribution-editor { padding: 21px 17px; }.editor-options { grid-template-columns: 1fr; }.editor-actions { display: grid; }.editor-actions .button { width: 100%; }.contribution-hero { min-height: 500px; }.contribution-hero-inner { padding-block: 50px; gap: 30px; }.contribution-hero h1 { font-size: clamp(31px,10vw,44px); }.contribution-content { padding-block: 25px 55px; }.contribution-toolbar { align-items: flex-start; flex-direction: column; }.contribution-toolbar .button { width: 100%; }.contribution-original,.reply-card { grid-template-columns: 1fr; }.contribution-original > aside,.reply-card > aside { align-items: flex-start; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }.contribution-original > aside > span,.reply-card > aside > span { width: 42px; height: 42px; }.contribution-original > div,.reply-card > div { padding: 20px 17px; }.reply-login { align-items: flex-start; flex-direction: column; }.reply-login .button { width: 100%; }.contribution-manage-modal { width: 100%; padding: 28px 19px; }.admin-tabs { overflow-x: auto; }.admin-tabs button { min-width: 112px; }.admin-overview-grid { grid-template-columns: 1fr; }.admin-topic-list > form { grid-template-columns: 45px 1fr; align-items: start; }.admin-topic-code { width: 43px; height: 43px; }.admin-topic-list > form label,.admin-topic-list > form label:nth-of-type(2),.admin-topic-list > form .button { grid-column: 1/-1; }.admin-sort-field { width: 110px; }.admin-member-list > article { grid-template-columns: 43px 1fr; }.admin-member-controls { grid-column: 1/-1; align-items: stretch; flex-direction: column; }.admin-member-list form { width: 100%; align-items: stretch; flex-direction: column; }.admin-member-list select { min-width: 0; }.admin-member-list .button,.admin-fixed-permission { width: 100%; }.admin-log-list > article { grid-template-columns: 1fr; gap: 6px; }.admin-log-list > article > small { text-align: left; }
}

/* Dedicated project and rulebook pages. */
.project-page-hero .subpage-hero-art { background-position: center 62%; }.project-page-content,.rules-page-content { padding-block: 48px 80px; }
.project-intro-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 11px; }.project-story-card,.project-values { border: 1px solid var(--line); background: linear-gradient(140deg,rgba(20,16,27,.98),rgba(9,7,13,.98)); }.project-story-card { min-height: 315px; padding: 38px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; }.project-story-card::after { content: "RPL"; position: absolute; right: -12px; bottom: -34px; color: rgba(255,255,255,.025); font: 800 118px var(--font-display); }.project-story-card h2 { max-width: 620px; margin: 0; font: 700 clamp(27px,3vw,42px)/1.16 var(--font-display); }.project-story-card > p:last-child { max-width: 730px; margin: 17px 0 0; color: #a99fac; font-size: 15px; line-height: 1.66; }
.project-values { display: grid; padding: 8px; }.project-values article { min-height: 96px; padding: 17px; display: grid; grid-template-columns: 39px 1fr; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); }.project-values article:last-child { border-bottom: 0; }.project-values article > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--pink); border: 1px solid rgba(240,68,255,.29); font: 700 7px var(--font-display); }.project-values article > div { display: flex; flex-direction: column; }.project-values strong { font: 700 12px var(--font-display); }.project-values p { margin: 5px 0 0; color: #817985; font-size: 10px; line-height: 1.4; }
.project-systems { margin-top: 48px; }.project-concept-label { color: var(--pink); font: 700 7px var(--font-display); letter-spacing: .11em; }.project-feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.project-feature-grid article { min-height: 235px; padding: 23px; position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(19,15,26,.98),rgba(8,6,12,.98)); }.project-feature-grid article::after { content: ""; position: absolute; width: 130px; height: 130px; right: -90px; bottom: -90px; border-radius: 50%; background: var(--violet); filter: blur(40px); opacity: .15; }.project-feature-grid article > div { display: flex; align-items: center; justify-content: space-between; }.project-feature-grid article > div span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--pink); border: 1px solid rgba(240,68,255,.3); font: 700 7px var(--font-display); }.project-feature-grid article > div small { color: #48414c; font: 700 10px var(--font-display); }.project-feature-grid h3 { margin: 29px 0 9px; font: 700 16px var(--font-display); }.project-feature-grid p { margin: 0; color: #938995; font-size: 12px; line-height: 1.58; }
.project-unique-band { min-height: 205px; margin-top: 42px; padding: 32px; display: grid; grid-template-columns: .8fr 1.25fr auto; align-items: center; gap: 38px; border: 1px solid rgba(240,68,255,.2); background: linear-gradient(105deg,rgba(240,68,255,.065),rgba(16,12,22,.98) 48%,rgba(140,92,255,.06)); }.project-unique-band h2 { margin: 0; font: 700 25px/1.25 var(--font-display); }.project-unique-band > p { margin: 0; color: #a79daa; font-size: 13px; line-height: 1.65; }
.rules-page-hero .subpage-hero-art { filter: saturate(.45); opacity: .56; }.rules-principles { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }.rules-principles article { min-height: 180px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(19,15,26,.98),rgba(8,6,12,.98)); }.rules-principles article > span { color: var(--pink); font: 700 8px var(--font-display); letter-spacing: .1em; }.rules-principles strong { margin-top: 28px; font: 700 14px var(--font-display); }.rules-principles p { margin: 9px 0 0; color: #918794; font-size: 12px; line-height: 1.55; }
.rules-placeholder-card { min-height: 250px; margin-top: 11px; padding: 35px; display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: 27px; border: 1px solid rgba(140,92,255,.24); background: linear-gradient(115deg,rgba(140,92,255,.07),rgba(13,10,18,.98) 42%); }.rules-lock-mark { width: 76px; height: 76px; display: grid; place-items: center; color: var(--violet); border: 1px solid rgba(140,92,255,.4); font: 800 12px var(--font-display); letter-spacing: .08em; }.rules-placeholder-card h2 { margin: 0; font: 700 28px var(--font-display); }.rules-placeholder-card div > p:last-child { max-width: 740px; margin: 9px 0 0; color: #9a909d; font-size: 13px; line-height: 1.55; }.rules-status { padding: 9px 11px; color: var(--amber); border: 1px solid rgba(255,173,73,.25); background: rgba(255,173,73,.045); font: 700 6px var(--font-display); letter-spacing: .11em; }
.rules-access-note { min-height: 112px; margin-top: 11px; padding: 23px 27px; display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 35px; border: 1px solid rgba(93,240,172,.18); background: rgba(93,240,172,.025); }.rules-access-note > div { display: flex; flex-direction: column; }.rules-access-note span { color: var(--green); font: 700 7px var(--font-display); letter-spacing: .11em; }.rules-access-note strong { margin-top: 6px; font: 700 13px var(--font-display); }.rules-access-note p { margin: 0; color: #968c99; font-size: 12px; line-height: 1.55; }

@media (max-width: 980px) {
  .project-intro-grid,.project-unique-band,.rules-access-note { grid-template-columns: 1fr; }.project-feature-grid { grid-template-columns: repeat(2,1fr); }.project-unique-band { align-items: flex-start; gap: 21px; }.project-unique-band .button { width: fit-content; }.rules-placeholder-card { grid-template-columns: 80px 1fr; }.rules-status { grid-column: 2; width: fit-content; }
}
@media (max-width: 700px) {
  .project-page-content,.rules-page-content { padding-block: 30px 55px; }.project-story-card { min-height: 300px; padding: 27px 22px; }.project-feature-grid,.rules-principles { grid-template-columns: 1fr; }.project-feature-grid article { min-height: 210px; }.project-unique-band { padding: 25px 21px; }.project-unique-band .button { width: 100%; }.rules-placeholder-card { padding: 25px 20px; grid-template-columns: 1fr; }.rules-status { grid-column: 1; }.rules-access-note { padding: 22px 20px; gap: 18px; }
}

/* Member quick access, character switcher and private-message indicator. */
.quick-sheet { overflow-y: auto; }
.menu-button { position: relative; }
.quick-unread-badge { position: absolute; z-index: 3; min-width: 19px; height: 19px; padding: 0 5px; display: grid; place-items: center; border: 2px solid #0b0810; border-radius: 999px; background: linear-gradient(135deg,var(--pink),var(--violet)); color: #fff; font: 800 7px var(--font-display); letter-spacing: 0; line-height: 1; box-shadow: 0 0 15px rgba(240,68,255,.48); }
.menu-button .quick-unread-badge { top: -8px; right: -8px; }
.side-sheet-trigger .quick-unread-badge { top: -9px; left: -9px; writing-mode: initial; transform: none; }
.quick-member-tools { margin: 24px 0 8px; padding-top: 23px; border-top: 1px solid var(--line); }
.quick-member-links { display: grid; gap: 6px; }
.quick-member-links > a { min-height: 66px; padding: 10px 11px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.018); transition: border-color .2s ease,background .2s ease,transform .2s ease; }
.quick-member-links > a:hover { transform: translateX(-2px); border-color: rgba(240,68,255,.32); background: rgba(240,68,255,.045); }
.quick-member-links > a > span { width: 36px; height: 36px; display: grid; place-items: center; color: var(--pink); border: 1px solid rgba(240,68,255,.3); font: 800 6px var(--font-display); letter-spacing: .06em; }
.quick-member-links > a > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.quick-member-links strong { font: 700 10px var(--font-display); }
.quick-member-links small { overflow: hidden; color: #776f7c; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.quick-member-links > a > b { color: var(--pink); font-size: 13px; }
.quick-member-links > a > em { min-width: 23px; height: 23px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--pink); color: #fff; font: 800 7px var(--font-display); font-style: normal; box-shadow: 0 0 13px rgba(240,68,255,.35); }
.quick-character-switcher { margin-top: 17px; padding: 15px; border: 1px solid rgba(140,92,255,.23); background: rgba(140,92,255,.025); }
.quick-character-switcher > header { margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quick-character-switcher > header span { color: var(--violet); font: 700 7px var(--font-display); letter-spacing: .1em; }
.quick-character-switcher > header small { color: #5f5864; font: 700 6px var(--font-display); letter-spacing: .08em; }
.quick-character-switcher > div { display: grid; gap: 5px; }
.quick-character-switcher button { width: 100%; min-height: 53px; padding: 7px 9px; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; border: 1px solid transparent; background: rgba(255,255,255,.018); color: #fff; text-align: left; cursor: pointer; }
.quick-character-switcher button:hover:not(:disabled) { border-color: rgba(140,92,255,.34); background: rgba(140,92,255,.055); }
.quick-character-switcher button.active { border-color: rgba(93,240,172,.21); background: rgba(93,240,172,.035); cursor: default; }
.quick-character-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background-color: #15101c; background-position: center; background-size: cover; color: var(--pink); font: 700 7px var(--font-display); }
.quick-character-switcher button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.quick-character-switcher button strong { overflow: hidden; font: 700 9px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.quick-character-switcher button small { color: #6f6774; font-size: 8px; }
.quick-character-switcher button > b { min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--pink); font: 800 6px var(--font-display); }
.quick-account-switch { min-height: 38px; margin-top: 10px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; color: #7f7683; border-top: 1px solid var(--line); font: 700 7px var(--font-display); letter-spacing: .08em; }
.quick-account-switch:hover { color: #fff; }

/* WoltLab-inspired profile workspace. */
.profile-page { min-height: 70vh; }
.profile-cover { min-height: 390px; position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid rgba(240,68,255,.22); background: #08060c; }
.profile-cover::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(6,4,10,.97) 0%,rgba(8,5,12,.76) 48%,rgba(6,4,10,.48)),linear-gradient(0deg,#07050a 0%,transparent 55%); }
.profile-cover-art { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 75% 24%,rgba(240,68,255,.19),transparent 24rem),radial-gradient(circle at 68% 72%,rgba(74,185,255,.1),transparent 20rem),url('/ruhrpott-forum-hero.png') center 61%/cover no-repeat; filter: saturate(.72) contrast(1.08); opacity: .58; }
.profile-cover-inner { padding-block: 74px 43px; display: grid; grid-template-columns: 148px minmax(0,1fr) auto; align-items: end; gap: 25px; }
.profile-avatar { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(240,68,255,.4); background-color: #15101c; background-position: center; background-size: cover; color: var(--pink); font: 800 10px var(--font-display); box-shadow: 0 0 23px rgba(240,68,255,.09); }
.profile-avatar-large { width: 148px; height: 148px; border-width: 2px; box-shadow: 0 20px 45px rgba(0,0,0,.5),0 0 28px rgba(240,68,255,.16); }
.profile-identity { min-width: 0; }
.profile-identity .small-kicker { margin-bottom: 7px; }
.profile-identity h1 { margin: 0; font: 800 clamp(35px,4vw,58px)/1.04 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
.profile-identity > div { margin-top: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.profile-identity > div span { min-height: 25px; padding: 0 9px; display: inline-grid; place-items: center; color: #8b818e; border: 1px solid rgba(255,255,255,.1); background: rgba(4,3,7,.45); font: 700 6px var(--font-display); letter-spacing: .08em; }
.profile-identity > p:last-child { margin: 14px 0 0; color: #a69baa; font-size: 13px; }
.profile-cover-actions { display: grid; gap: 7px; }
.profile-cover-actions .button { min-width: 190px; }
.profile-content { padding-bottom: 82px; }
.profile-tabs { min-height: 64px; margin-bottom: 12px; padding: 5px; display: flex; gap: 4px; overflow-x: auto; border: 1px solid var(--line); border-top: 0; background: rgba(12,9,17,.98); }
.profile-tabs button { min-width: 150px; padding: 0 18px; position: relative; border: 1px solid transparent; background: transparent; color: #817784; font: 700 8px var(--font-display); letter-spacing: .07em; cursor: pointer; }
.profile-tabs button:hover,.profile-tabs button.active { color: #fff; border-color: rgba(240,68,255,.18); background: rgba(240,68,255,.045); }
.profile-tabs button.active::after { content: ""; position: absolute; right: 15px; bottom: -6px; left: 15px; height: 2px; background: var(--pink); box-shadow: 0 0 11px var(--pink); }
.profile-tabs button span { min-width: 18px; height: 18px; margin-left: 5px; display: inline-grid; place-items: center; border-radius: 99px; background: rgba(140,92,255,.15); color: #bba3ff; font-size: 6px; }
.profile-notice,.message-notice { margin: 0 0 12px; padding: 12px 14px; color: var(--green); border: 1px solid rgba(93,240,172,.22); background: rgba(93,240,172,.035); font-size: 11px; }
.profile-overview-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(330px,.65fr); gap: 10px; }
.profile-about-card,.profile-character-card,.profile-form,.character-list-panel,.new-character-card { border: 1px solid var(--line); background: linear-gradient(145deg,rgba(19,15,26,.98),rgba(8,6,12,.98)); }
.profile-about-card { min-height: 375px; padding: 37px; }
.profile-about-card h2 { margin: 8px 0 18px; font: 700 28px var(--font-display); }
.profile-about-card > p:not(.small-kicker) { max-width: 760px; margin: 0; color: #a69ca9; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.profile-contact-grid { margin-top: 32px; padding-top: 25px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; border-top: 1px solid var(--line); }
.profile-contact-grid > span { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.profile-contact-grid small { color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .1em; }
.profile-contact-grid strong { overflow-wrap: anywhere; color: #c0b6c3; font-size: 12px; font-weight: 500; }
.profile-character-card { padding: 25px; }
.profile-character-card-head { padding-bottom: 19px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid var(--line); }
.profile-character-card-head > div { display: flex; flex-direction: column; gap: 5px; }
.profile-character-card-head small { color: var(--violet); font: 700 6px var(--font-display); letter-spacing: .1em; }
.profile-character-card-head strong { font: 700 13px var(--font-display); }
.profile-character-card dl { margin: 20px 0; display: grid; gap: 10px; }
.profile-character-card dl div { display: grid; grid-template-columns: 105px 1fr; gap: 12px; }
.profile-character-card dt { color: #6d6570; font-size: 10px; }
.profile-character-card dd { margin: 0; color: #bbb1be; font-size: 10px; text-align: right; }
.profile-character-card > p { margin: 0; color: #918794; font-size: 11px; line-height: 1.58; white-space: pre-wrap; }
.profile-stats-row { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.profile-stats-row article { min-height: 118px; padding: 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid var(--line); background: rgba(14,11,19,.95); }
.profile-stats-row strong { color: #fff; font: 800 29px var(--font-display); }
.profile-stats-row span { margin-top: 8px; color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .1em; }
.profile-form-grid,.character-management { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: start; }
.profile-form,.new-character-card { padding: 29px; display: flex; flex-direction: column; }
.profile-form-head,.profile-section-head { margin-bottom: 21px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.new-character-preview { margin-bottom: 4px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.profile-form-head h2,.profile-section-head h2,.new-character-card h2 { margin: 5px 0 0; font: 700 23px var(--font-display); }
.account-mark,.privacy-mark { width: 51px; height: 51px; display: grid; place-items: center; color: var(--pink); border: 1px solid rgba(240,68,255,.34); font: 800 12px var(--font-display); }
.profile-form label,.new-character-card label,.message-compose label,.message-reply label { margin-top: 14px; display: flex; flex-direction: column; gap: 7px; color: #978d9a; font: 700 7px var(--font-display); letter-spacing: .07em; text-transform: uppercase; }
.profile-form input,.profile-form select,.profile-form textarea,.new-character-card input,.new-character-card select,.message-compose input,.message-compose select,.message-compose textarea,.message-reply textarea { width: 100%; border: 1px solid rgba(255,255,255,.1); outline: 0; background: rgba(255,255,255,.025); color: #f5eff7; font: 400 12px var(--font-body); text-transform: none; transition: border-color .2s ease,box-shadow .2s ease; }
.profile-form input,.profile-form select,.new-character-card input,.new-character-card select,.message-compose input,.message-compose select { height: 46px; padding: 0 13px; }
.profile-form textarea,.message-compose textarea,.message-reply textarea { padding: 12px 13px; resize: vertical; line-height: 1.55; }
.profile-form input:focus,.profile-form select:focus,.profile-form textarea:focus,.new-character-card input:focus,.new-character-card select:focus,.message-compose input:focus,.message-compose select:focus,.message-compose textarea:focus,.message-reply textarea:focus { border-color: rgba(240,68,255,.56); box-shadow: 0 0 18px rgba(240,68,255,.07); }
.profile-form .button,.new-character-card .button { margin-top: 22px; align-self: flex-end; }
.profile-field-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.avatar-auto-note { margin: 10px 0 0; padding: 11px 12px; color: #887e8c; border-left: 2px solid var(--violet); background: rgba(140,92,255,.035); font-size: 10px; line-height: 1.5; }
.character-list-panel { padding: 28px; }
.profile-section-head > span { padding: 9px 11px; color: var(--violet); border: 1px solid rgba(140,92,255,.26); font: 700 7px var(--font-display); letter-spacing: .08em; }
.character-card-grid { display: grid; gap: 7px; }
.character-card-grid article { min-height: 78px; padding: 10px 12px; display: grid; grid-template-columns: 55px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.character-card-grid article.active { border-color: rgba(93,240,172,.24); background: rgba(93,240,172,.025); }
.character-card-grid article > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.character-card-grid article small { color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .1em; }
.character-card-grid article strong { overflow: hidden; font: 700 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.character-card-grid article span { color: #6f6672; font-size: 9px; }
.character-card-grid article > b { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--pink); font: 800 6px var(--font-display); }
.character-card-grid article > button { min-height: 33px; padding: 0 10px; border: 1px solid rgba(140,92,255,.28); background: rgba(140,92,255,.05); color: #c9b9f7; font: 700 6px var(--font-display); letter-spacing: .07em; cursor: pointer; }
.character-card-grid article > button:hover { border-color: var(--violet); }
.new-character-card > p:not(.small-kicker) { color: #8d838f; font-size: 11px; line-height: 1.58; }
.privacy-form { max-width: 760px; }
.profile-check { min-height: 74px; padding: 14px; display: grid!important; grid-template-columns: 20px 1fr; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.015); cursor: pointer; }
.profile-check input { width: 17px; height: 17px; accent-color: var(--pink); }
.profile-check > span { display: flex; flex-direction: column; gap: 5px; }
.profile-check strong { color: #eee7f0; font: 700 9px var(--font-display); }
.profile-check small { color: #736b76; font-size: 9px; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Per-character private messages. */
.messages-page { padding-block: 48px 82px; }
.messages-page-head { margin-bottom: 23px; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.messages-page-head h1 { margin: 7px 0 10px; font: 800 clamp(34px,4vw,55px)/1.05 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
.messages-page-head > div:first-child > p:last-child { max-width: 760px; margin: 0; color: #928895; font-size: 13px; }
.messages-page-head > div:first-child > p:last-child strong { color: #fff; }
.messages-head-actions { display: flex; gap: 8px; }
.messages-workspace { min-height: 670px; display: grid; grid-template-columns: 360px minmax(0,1fr); border: 1px solid var(--line); background: #0b0810; }
.conversation-sidebar { min-width: 0; border-right: 1px solid var(--line); background: linear-gradient(165deg,rgba(20,15,27,.98),rgba(9,7,13,.98)); }
.conversation-sidebar-head { min-height: 82px; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.conversation-sidebar-head > div { min-width: 0; display: flex; align-items: center; gap: 11px; }
.conversation-sidebar-head > div > span { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.conversation-sidebar-head small { color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .1em; }
.conversation-sidebar-head strong { overflow: hidden; font: 700 10px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.conversation-sidebar-head > b { min-width: 26px; height: 26px; padding: 0 7px; display: grid; place-items: center; border-radius: 99px; background: rgba(240,68,255,.14); color: var(--pink); font: 800 7px var(--font-display); }
.message-avatar { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(140,92,255,.34); background-color: #15101c; background-position: center; background-size: cover; color: var(--violet); font: 800 7px var(--font-display); }
.message-avatar.small { width: 39px; height: 39px; }
.conversation-list { max-height: 587px; overflow-y: auto; }
.conversation-list > button { width: 100%; min-height: 91px; padding: 12px 13px; position: relative; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #fff; text-align: left; cursor: pointer; }
.conversation-list > button:hover,.conversation-list > button.active { background: rgba(240,68,255,.045); }
.conversation-list > button.active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2px; background: var(--pink); box-shadow: 0 0 9px var(--pink); }
.conversation-list > button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.conversation-list > button small { color: var(--violet); font: 700 6px var(--font-display); letter-spacing: .07em; }
.conversation-list > button strong,.conversation-list > button p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list > button strong { font: 700 9px var(--font-display); }
.conversation-list > button p { margin: 0; color: #716975; font-size: 9px; }
.conversation-list > button time { align-self: start; margin-top: 3px; color: #57505a; font-size: 7px; white-space: nowrap; }
.conversation-list > button > b { position: absolute; right: 12px; bottom: 11px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--pink); font: 800 6px var(--font-display); }
.conversation-empty { padding: 38px 25px; text-align: center; }
.conversation-empty strong { font: 700 11px var(--font-display); }
.conversation-empty p { color: #716975; font-size: 10px; line-height: 1.5; }
.message-detail-panel { min-width: 0; position: relative; display: flex; flex-direction: column; background: radial-gradient(circle at 80% 15%,rgba(140,92,255,.06),transparent 24rem),rgba(9,7,13,.98); }
.message-thread-head { min-height: 83px; padding: 15px 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--line); }
.message-thread-head h2 { margin: 5px 0 0; font: 700 17px var(--font-display); }
.message-thread-head > span { color: #6e6672; font: 700 6px var(--font-display); letter-spacing: .08em; }
.message-thread { min-height: 360px; max-height: 440px; padding: 25px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.message-thread article { width: min(74%,680px); display: grid; grid-template-columns: 40px minmax(0,1fr); align-items: end; gap: 10px; }
.message-thread article.own { align-self: flex-end; grid-template-columns: minmax(0,1fr) 40px; }
.message-thread article.own .message-avatar { grid-column: 2; }
.message-thread article.own > div { grid-column: 1; grid-row: 1; background: rgba(240,68,255,.075); border-color: rgba(240,68,255,.2); }
.message-thread article > div { padding: 13px 15px; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.message-thread article header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.message-thread article header strong { font: 700 8px var(--font-display); }
.message-thread article header time { color: #5f5863; font-size: 7px; }
.message-thread article p { margin: 9px 0 0; color: #b5abb8; font-size: 12px; line-height: 1.58; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-reply { margin-top: auto; padding: 18px 22px 21px; display: flex; flex-direction: column; border-top: 1px solid var(--line); background: rgba(255,255,255,.012); }
.message-reply label { margin-top: 0; }
.message-reply textarea { min-height: 105px; }
.message-reply .button { margin-top: 11px; align-self: flex-end; }
.message-compose { width: min(680px,calc(100% - 46px)); margin: auto; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(240,68,255,.19); background: rgba(18,14,25,.93); }
.message-compose h2 { margin: 6px 0 8px; font: 700 24px var(--font-display); }
.message-compose > div:last-child { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
.message-no-recipient { padding: 28px 0 5px; text-align: center; }
.message-no-recipient p { color: #817784; font-size: 11px; }
.message-no-recipient .button { margin-top: 12px; }
.message-welcome { max-width: 520px; margin: auto; padding: 40px; text-align: center; }
.message-welcome > span { width: 72px; height: 72px; margin: 0 auto 24px; display: grid; place-items: center; color: var(--pink); border: 1px solid rgba(240,68,255,.35); font: 800 11px var(--font-display); box-shadow: 0 0 35px rgba(240,68,255,.08); }
.message-welcome h2 { margin: 7px 0 11px; font: 700 24px var(--font-display); }
.message-welcome > p:not(.small-kicker) { color: #837987; font-size: 11px; line-height: 1.55; }
.message-welcome .button { margin-top: 14px; }
.message-loading { position: absolute; right: 14px; bottom: 12px; color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .09em; }

/* Read-only member profile with enforced visibility. */
.public-profile-hero { min-height: 410px; position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; border-bottom: 1px solid rgba(140,92,255,.25); background: #07050a; }
.public-profile-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(6,4,10,.97),rgba(8,5,12,.73) 52%,rgba(6,4,10,.5)),linear-gradient(0deg,#07050a,transparent 58%); }
.public-profile-hero-inner { padding-block: 76px 45px; display: grid; grid-template-columns: 148px minmax(0,1fr) auto; align-items: end; gap: 25px; }
.public-profile-hero-inner h1 { margin: 7px 0 0; font: 800 clamp(35px,4vw,58px)/1.04 var(--font-display); letter-spacing: -.04em; text-transform: uppercase; }
.public-profile-hero-inner > div > p:last-child { max-width: 760px; margin: 15px 0 0; color: #a59aa8; font-size: 13px; line-height: 1.55; }
.public-profile-badges { margin-top: 13px; display: flex; flex-wrap: wrap; gap: 7px; }
.public-profile-badges span { min-height: 25px; padding: 0 9px; display: inline-grid; place-items: center; color: #8b818e; border: 1px solid rgba(255,255,255,.1); background: rgba(4,3,7,.45); font: 700 6px var(--font-display); letter-spacing: .08em; }
.public-profile-content { padding-block: 38px 82px; display: grid; grid-template-columns: minmax(0,1fr) 255px; align-items: start; gap: 11px; }
.public-profile-main { min-width: 0; display: grid; gap: 11px; }
.public-profile-info,.public-active-character,.public-profile-side { padding: 29px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(19,15,26,.98),rgba(8,6,12,.98)); }
.public-profile-info h2 { margin: 6px 0 22px; font: 700 24px var(--font-display); }
.public-profile-info dl { margin: 0; display: grid; gap: 0; }
.public-profile-info dl div { min-height: 48px; padding: 9px 0; display: grid; grid-template-columns: 135px minmax(0,1fr); align-items: center; gap: 15px; border-bottom: 1px solid var(--line); }
.public-profile-info dt { color: #736a77; font-size: 10px; }
.public-profile-info dd { margin: 0; color: #bcb2bf; font-size: 11px; overflow-wrap: anywhere; }
.public-profile-info dd a { color: var(--blue); }
.public-profile-info blockquote { margin: 25px 0 0; padding: 16px 18px; color: #9a909d; border-left: 2px solid var(--violet); background: rgba(140,92,255,.035); font-size: 11px; font-style: italic; line-height: 1.6; white-space: pre-wrap; }
.public-active-character { min-height: 116px; display: flex; align-items: center; gap: 18px; }
.public-active-character > .profile-avatar { width: 74px; height: 74px; }
.public-active-character > div { min-width: 0; }
.public-active-character .small-kicker { margin-bottom: 5px; }
.public-active-character h2 { margin: 0; font: 700 19px var(--font-display); }
.public-active-character > div > p:last-child { margin: 8px 0 0; color: #877e8a; font-size: 11px; line-height: 1.5; }
.public-character-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.public-character-grid article { min-height: 94px; padding: 13px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.016); }
.public-character-grid article > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.public-character-grid small { color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .09em; }
.public-character-grid strong { overflow: hidden; font: 700 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.public-character-grid p { margin: 0; overflow: hidden; color: #746c78; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.public-profile-side { display: grid; gap: 7px; }
.public-profile-side > p { margin-bottom: 8px; }
.public-profile-side > div { min-height: 82px; padding: 15px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.public-profile-side strong { font: 800 23px var(--font-display); }
.public-profile-side span { margin-top: 6px; color: var(--pink); font: 700 6px var(--font-display); letter-spacing: .09em; }
.restricted-profile { min-height: 620px; padding-block: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.restricted-profile > span { width: 88px; height: 88px; margin-bottom: 25px; display: grid; place-items: center; color: var(--violet); border: 1px solid rgba(140,92,255,.37); font: 800 11px var(--font-display); box-shadow: 0 0 40px rgba(140,92,255,.08); }
.restricted-profile h1 { margin: 7px 0 10px; font: 800 clamp(31px,4vw,48px) var(--font-display); text-transform: uppercase; }
.restricted-profile > p:not(.small-kicker) { margin: 0 0 24px; color: #8e8491; }
.restricted-profile .button { min-width: 210px; margin-top: 7px; }

@media (max-width: 980px) {
  .profile-cover-inner { grid-template-columns: 120px 1fr; }.profile-avatar-large { width: 120px; height: 120px; }.profile-cover-actions { grid-column: 2; width: fit-content; grid-template-columns: repeat(2,auto); }.profile-cover-actions .button { min-width: 0; }.profile-overview-grid,.profile-form-grid,.character-management { grid-template-columns: 1fr; }.messages-page-head { align-items: flex-start; flex-direction: column; }.messages-workspace { grid-template-columns: 310px minmax(0,1fr); }.public-profile-hero-inner { grid-template-columns: 120px 1fr; }.public-profile-hero-inner > .button { grid-column: 2; width: fit-content; }.public-profile-content { grid-template-columns: 1fr; }.public-profile-side { grid-template-columns: repeat(3,1fr); }.public-profile-side > p { grid-column: 1/-1; }
}
@media (max-width: 760px) {
  .profile-cover { min-height: 500px; }.profile-cover-inner { padding-block: 60px 34px; grid-template-columns: 85px 1fr; gap: 17px; }.profile-avatar-large { width: 85px; height: 85px; }.profile-identity h1 { font-size: clamp(29px,9vw,42px); }.profile-identity > div span:last-child { display: none; }.profile-cover-actions { grid-column: 1/-1; width: 100%; grid-template-columns: 1fr; }.profile-cover-actions .button { width: 100%; }.profile-tabs { margin-inline: -14px; padding-inline: 14px; border-inline: 0; }.profile-tabs button { min-width: 132px; }.profile-about-card,.profile-character-card,.profile-form,.character-list-panel,.new-character-card { padding: 22px 18px; }.profile-contact-grid,.profile-field-row { grid-template-columns: 1fr; }.profile-stats-row { grid-template-columns: 1fr; }.profile-stats-row article { min-height: 95px; }.messages-page { padding-block: 31px 55px; }.messages-page-head { gap: 20px; }.messages-head-actions { width: 100%; display: grid; }.messages-head-actions .button { width: 100%; }.messages-workspace { min-height: 760px; grid-template-columns: 1fr; }.conversation-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }.conversation-list { max-height: 280px; }.message-detail-panel { min-height: 480px; }.message-thread { padding: 18px 13px; }.message-thread article { width: 92%; }.message-reply { padding: 15px 13px; }.message-compose { width: calc(100% - 26px); padding: 22px 17px; }.message-compose > div:last-child { display: grid; }.message-thread-head { padding-inline: 15px; }.message-thread-head > span { display: none; }.public-profile-hero { min-height: 500px; }.public-profile-hero-inner { padding-block: 62px 34px; grid-template-columns: 85px 1fr; gap: 17px; }.public-profile-hero-inner h1 { font-size: clamp(29px,9vw,42px); }.public-profile-hero-inner > .button { grid-column: 1/-1; width: 100%; }.public-profile-content { padding-block: 27px 55px; }.public-profile-info,.public-active-character,.public-profile-side { padding: 22px 18px; }.public-profile-side { grid-template-columns: 1fr; }.public-profile-side > p { grid-column: 1; }.public-profile-info dl div { grid-template-columns: 1fr; gap: 5px; }.restricted-profile { min-height: 540px; padding-block: 70px; }
}

/* STRATO PHP application */
.brand-frame > img { width: 126px; height: 70px; object-fit: contain; filter: drop-shadow(0 0 11px rgba(240,68,255,.22)); }
.utility-status i,.footer-bottom i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.utility-status { line-height: 31px; }
.member-pill { grid-template-columns: 32px minmax(0,1fr); grid-template-rows: 1fr; }
.member-pill > .member-avatar { grid-row: 1; width: 30px; height: 30px; border: 1px solid rgba(93,240,172,.3); background-position: center; background-size: cover; }
.member-pill > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.member-pill > span:last-child small { color: var(--green); font: 700 7px var(--font-display); }
.member-pill > span:last-child strong { max-width: 118px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.icon-button { font-size: 24px; line-height: 1; }
.flash-stack { position: relative; z-index: 25; }
.flash-stack .alert { margin-top: 12px; }
.alert { padding: 13px 16px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--text-soft); }
.alert-success { border-color: rgba(93,240,172,.3); color: var(--green); background: rgba(93,240,172,.055); }
.alert-error { border-color: rgba(255,91,110,.34); color: #ff8c9a; background: rgba(255,91,110,.055); }
.alert-warning { border-color: rgba(255,173,73,.3); color: var(--amber); background: rgba(255,173,73,.055); }
.page-hero { min-height: 390px; position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid rgba(240,68,255,.2); }
.page-hero .hero-backdrop { inset: 0; background-image: linear-gradient(90deg,rgba(5,4,9,.98),rgba(7,5,11,.78) 55%,rgba(7,5,11,.35)),url('../images/ruhrpott-forum-hero.png'); background-position: center; background-size: cover; }
.page-hero-inner { padding-block: 70px; }
.page-hero-inner > div { max-width: 900px; }
.page-hero h1 { margin: 0; font: 800 clamp(39px,5.4vw,72px)/1 var(--font-display); letter-spacing: -.035em; text-transform: uppercase; }
.page-hero h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--pink); }
.page-hero-inner > div > p:last-child { max-width: 780px; margin: 22px 0 0; color: #c1b6c5; font-size: 18px; line-height: 1.65; }
.content-wrap { padding-block: 48px 82px; }
.content-grid { display: grid; grid-template-columns: minmax(0,1fr) 310px; gap: 22px; align-items: start; }
.stack { display: grid; gap: 13px; }
.surface { border: 1px solid var(--line); background: linear-gradient(145deg,rgba(18,14,25,.97),rgba(9,7,13,.97)); box-shadow: var(--shadow-neon); }
.surface-pad { padding: 25px; }
.section-head { margin-bottom: 20px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.section-head h2 { margin: 0; font: 800 clamp(24px,3vw,34px) var(--font-display); text-transform: uppercase; }
.section-head p { margin: 7px 0 0; color: var(--muted); }
.section-head > span { color: var(--pink); font: 700 9px var(--font-display); letter-spacing: .12em; }
.eyebrow span { flex: 0 0 auto; }
.role-badge,.visibility-badge,.status-badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border: 1px solid color-mix(in srgb,var(--badge,var(--pink)) 45%,transparent); color: var(--badge,var(--pink)); background: color-mix(in srgb,var(--badge,var(--pink)) 7%,transparent); font: 800 8px var(--font-display); letter-spacing: .09em; text-transform: uppercase; }
.visibility-badge { --badge: var(--blue); }.visibility-badge.restricted { --badge: var(--amber); }.visibility-badge.public { --badge: var(--green); }
.status-badge { --badge: #9b92a0; }.status-badge.active,.status-badge.approved,.status-badge.open { --badge: var(--green); }.status-badge.pending,.status-badge.submitted,.status-badge.reviewing { --badge: var(--amber); }.status-badge.banned,.status-badge.rejected,.status-badge.hidden { --badge: #ff5b6e; }
.avatar,.mini-avatar,.post-avatar { display: inline-block; flex: 0 0 auto; background-color: #100c15; background-position: center; background-size: cover; border: 1px solid rgba(240,68,255,.28); }
.avatar { width: 52px; height: 52px; }.mini-avatar { width: 37px; height: 37px; }.post-avatar { width: 72px; height: 72px; }
.mini-avatar.initials { display: grid; place-items: center; color: var(--pink); font: 800 8px var(--font-display); }
.quick-sheet > header { min-height: 83px; padding: 12px 17px; display: grid; grid-template-columns: 76px 1fr 38px; align-items: center; border-bottom: 1px solid var(--line); }
.quick-sheet > header img { width: 72px; height: 58px; object-fit: contain; }.quick-sheet > header strong { font: 800 12px var(--font-display); text-transform: uppercase; }.quick-sheet > header button { width: 36px; height: 36px; border: 1px solid var(--line); color: white; background: transparent; font-size: 22px; cursor: pointer; }
.quick-account { margin: 14px; padding: 12px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(93,240,172,.2); background: rgba(93,240,172,.035); }.quick-account div { display: flex; flex-direction: column; }.quick-account small { color: var(--green); font: 800 7px var(--font-display); text-transform: uppercase; }.quick-account strong { font-size: 13px; }
.quick-links { margin: 0 14px; display: grid; }.quick-links a,.quick-manage-link { min-height: 43px; padding: 0 11px; display: flex; align-items: center; border-bottom: 1px solid var(--line); color: #b9aebd; font-size: 12px; }.quick-links a b,.quick-links a em { margin-left: auto; }.quick-links a em,.quick-unread { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; color: white; background: var(--pink-hot); font: 800 8px var(--font-display); font-style: normal; }
.quick-switcher { margin: 18px 14px 0; }.quick-switcher > small { color: var(--muted); font: 800 7px var(--font-display); letter-spacing: .13em; }.quick-switcher form { margin-top: 6px; }.quick-switcher button { width: 100%; min-height: 55px; padding: 8px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); color: white; background: rgba(255,255,255,.015); cursor: pointer; text-align: left; }.quick-switcher button.active { border-color: rgba(93,240,172,.3); background: rgba(93,240,172,.035); }.quick-switcher button > span:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; }.quick-switcher button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }.quick-switcher button small { color: var(--muted); font-size: 9px; }.quick-switcher button b { margin-left: auto; color: var(--pink); }
.quick-manage-link { margin: 12px 14px; color: var(--pink); }.quick-login { margin: 18px; }
.site-footer { border-top: 1px solid var(--line); background: #050408; }.footer-top { min-height: 145px; display: flex; align-items: center; justify-content: space-between; gap: 25px; }.footer-brand { display: flex; align-items: center; gap: 15px; }.footer-brand img { width: 105px; height: 80px; object-fit: contain; }.footer-brand span { color: #a88eac; font-family: var(--font-script); }.footer-top nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }.footer-top nav a { color: var(--muted); font-size: 12px; }.footer-top nav a:hover { color: var(--pink); }.footer-bottom { min-height: 46px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #5f5763; font-size: 10px; }.footer-bottom span:last-child { display: flex; align-items: center; gap: 8px; color: var(--green); }
.card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.info-card { min-height: 190px; padding: 22px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.info-card > span { color: var(--pink); font: 800 9px var(--font-display); letter-spacing: .12em; }.info-card h3 { margin: 16px 0 9px; font: 800 18px var(--font-display); text-transform: uppercase; }.info-card p { margin: 0; color: #918795; line-height: 1.6; }
.thread-cards { display: grid; gap: 8px; }.thread-row { min-height: 138px; padding: 18px; display: grid; grid-template-columns: 48px minmax(0,1fr) 155px; gap: 15px; align-items: center; border: 1px solid var(--line); color: inherit; text-decoration: none; cursor: pointer; background: rgba(255,255,255,.014); }.thread-row:hover { border-color: rgba(240,68,255,.25); background: rgba(240,68,255,.025); }.thread-row:hover h3 { color: var(--pink); }.thread-row:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }.thread-code { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--tone,var(--pink)) 45%,transparent); color: var(--tone,var(--pink)); font: 800 9px var(--font-display); }.thread-copy { min-width: 0; }.thread-meta { margin-bottom: 7px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--muted); font-size: 10px; }.thread-copy h3 { margin: 0; font: 800 16px/1.3 var(--font-display); }.thread-copy > p { margin: 7px 0 10px; color: #918795; font-size: 13px; }.thread-author { display: flex; align-items: center; gap: 8px; color: #827986; font-size: 10px; }.thread-stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }.thread-stats span { min-height: 56px; display: grid; place-items: center; align-content: center; border-left: 1px solid var(--line); }.thread-stats strong { font: 800 16px var(--font-display); }.thread-stats small { margin-top: 5px; color: var(--muted); font: 700 7px var(--font-display); letter-spacing: .1em; }
.topic-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.topic-card { min-height: 265px; padding: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); color: inherit; text-decoration: none; cursor: pointer; background: linear-gradient(145deg,color-mix(in srgb,var(--tone,var(--pink)) 5%,transparent),rgba(9,7,13,.98)); }.topic-card:hover { border-color: color-mix(in srgb,var(--tone,var(--pink)) 42%,transparent); transform: translateY(-2px); }.topic-card:focus-visible { outline: 2px solid var(--tone,var(--pink)); outline-offset: 3px; }.topic-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--tone,var(--pink)); box-shadow: 0 0 16px var(--tone,var(--pink)); }.topic-card-top { display: flex; justify-content: space-between; align-items: center; }.topic-card-code { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--tone,var(--pink)) 45%,transparent); color: var(--tone,var(--pink)); font: 800 9px var(--font-display); }.topic-card h2 { margin: 20px 0 10px; font: 800 25px var(--font-display); text-transform: uppercase; }.topic-card > p { margin: 0; min-height: 62px; color: #918795; line-height: 1.55; }.topic-card-foot { margin-top: auto; padding-top: 15px; display: flex; justify-content: space-between; gap: 15px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }.topic-card-foot strong { color: var(--pink); font: 800 9px var(--font-display); text-transform: uppercase; }
.sidebar-card { padding: 20px; border: 1px solid var(--line); background: rgba(15,12,20,.95); }.sidebar-card h3 { margin: 0 0 13px; font: 800 14px var(--font-display); text-transform: uppercase; }.sidebar-card p { color: var(--muted); font-size: 12px; line-height: 1.55; }.sidebar-card + .sidebar-card { margin-top: 12px; }
.streamer-row { min-height: 63px; padding: 9px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(150,143,154,.34); background: rgba(255,255,255,.012); }.streamer-row.live { border-color: var(--pink); box-shadow: inset 0 0 18px rgba(240,68,255,.08),0 0 12px rgba(240,68,255,.08); }.streamer-row div { min-width: 0; flex: 1; display: flex; flex-direction: column; }.streamer-row strong { font-size: 12px; }.streamer-row small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }.streamer-row b { color: var(--pink); font: 800 7px var(--font-display); }
form label { display: grid; gap: 7px; color: #aca2b0; font-size: 12px; }
input,textarea,select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 0; outline: 0; color: white; background: #08060b; }
textarea { resize: vertical; line-height: 1.55; }.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.form-stack { display: grid; gap: 14px; }.form-actions { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }.form-help { margin: 0; color: var(--muted); font-size: 11px; }.checkbox { display: flex; grid-template-columns: 20px 1fr; align-items: flex-start; gap: 10px; }.checkbox input { width: 18px; min-height: 18px; margin-top: 2px; }.checkbox span { display: flex; flex-direction: column; }.checkbox small { color: var(--muted); }
.auth-page { min-height: calc(100vh - 300px); padding: 65px 24px 90px; display: grid; place-items: center; }.auth-card { width: min(100%,760px); padding: 34px; border: 1px solid rgba(240,68,255,.25); background: linear-gradient(145deg,rgba(18,14,25,.98),rgba(8,6,12,.98)); box-shadow: 0 22px 70px rgba(0,0,0,.45); }.auth-card.narrow { max-width: 520px; }.auth-card > img { width: 140px; height: 94px; object-fit: contain; }.auth-card h1 { margin: 2px 0 10px; font: 800 32px var(--font-display); text-transform: uppercase; }.auth-card > p { color: var(--muted); }.auth-links { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; color: var(--pink); font-size: 12px; }
.profile-header { min-height: 310px; padding-block: 55px; display: flex; align-items: center; background: linear-gradient(90deg,rgba(5,4,9,.96),rgba(5,4,9,.58)),url('../images/ruhrpott-forum-hero.png') center/cover; border-bottom: 1px solid rgba(240,68,255,.24); }.profile-header-inner { display: grid; grid-template-columns: 150px minmax(0,1fr) auto; gap: 25px; align-items: center; }.profile-header .profile-avatar-large { width: 150px; height: 150px; }.profile-header h1 { margin: 4px 0 10px; font: 800 clamp(32px,4.6vw,58px) var(--font-display); text-transform: uppercase; }.profile-header p { color: #b3a9b7; }.profile-actions { display: grid; gap: 8px; }
.tabs { margin-bottom: 18px; display: flex; overflow-x: auto; border: 1px solid var(--line); background: #09070d; }.tabs a,.tabs button { min-height: 48px; padding: 0 17px; display: grid; place-items: center; border: 0; border-right: 1px solid var(--line); color: var(--muted); background: transparent; white-space: nowrap; cursor: pointer; }.tabs .active,.tabs a:hover,.tabs button:hover { color: white; background: rgba(240,68,255,.055); box-shadow: inset 0 -2px var(--pink); }
.character-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.character-card { padding: 15px; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 13px; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.016); }.character-card.active { border-color: rgba(93,240,172,.3); }.character-card .avatar { width: 62px; height: 62px; }.character-card div { display: flex; flex-direction: column; }.character-card small { color: var(--pink); font: 800 7px var(--font-display); }.character-card strong { margin-top: 5px; }.character-card span { color: var(--muted); font-size: 10px; }
.post-original,.reply-card { padding: 23px; display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 23px; border: 1px solid var(--line); background: rgba(255,255,255,.014); }.post-author { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }.post-author strong { font-size: 12px; }.post-author small { color: var(--muted); font-size: 8px; }.post-body { min-width: 0; }.post-body p { color: #c1b7c5; line-height: 1.75; white-space: pre-wrap; }.post-meta { margin-bottom: 13px; color: var(--muted); font-size: 10px; }.reply-list { display: grid; gap: 9px; }.reply-form { margin-top: 15px; padding: 22px; border: 1px solid rgba(140,92,255,.2); background: rgba(140,92,255,.035); }
.gallery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }.album-card-php { min-height: 330px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.014); }.album-cover-php { height: 185px; display: block; background: linear-gradient(0deg,rgba(5,4,9,.9),transparent),url('../images/ruhrpott-forum-hero.png') center/cover; }.album-card-php > div { padding: 17px; }.album-card-php h3 { margin: 8px 0; font: 800 17px var(--font-display); }.album-card-php p { margin: 0; color: var(--muted); font-size: 12px; }.album-meta { margin-top: 14px; display: flex; justify-content: space-between; color: #817784; font-size: 9px; }
.photo-grid-php { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }.photo-card { overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.014); }.photo-card > button { width: 100%; aspect-ratio: 4/3; padding: 0; border: 0; cursor: zoom-in; background: #0d0a12; }.photo-card > button img { width: 100%; height: 100%; object-fit: cover; }.photo-card-info { padding: 13px; }.photo-card-info strong { font-size: 12px; }.photo-card-info p { margin: 5px 0; color: var(--muted); font-size: 10px; }.reaction-row { display: flex; flex-wrap: wrap; gap: 5px; }.reaction-row form { display: inline-flex; }.reaction-row button { min-height: 28px; padding: 0 8px; border: 1px solid var(--line); color: #aaa0ae; background: rgba(255,255,255,.02); cursor: pointer; }.reaction-row button:hover { border-color: var(--pink); color: white; }
.lightbox { position: fixed; z-index: 100; inset: 0; padding: 30px; display: grid; place-items: center; background: rgba(2,2,4,.94); }.lightbox[hidden] { display: none; }.lightbox figure { max-width: 1200px; max-height: 90vh; margin: 0; }.lightbox img { max-width: 100%; max-height: 80vh; object-fit: contain; }.lightbox figcaption { padding: 11px; display: flex; justify-content: space-between; color: white; }.lightbox > button { position: fixed; top: 20px; right: 20px; width: 45px; height: 45px; border: 1px solid var(--line); color: white; background: #100d17; font-size: 25px; cursor: pointer; }
.message-layout { min-height: 620px; display: grid; grid-template-columns: 340px minmax(0,1fr); border: 1px solid var(--line); background: rgba(10,8,14,.96); }.conversation-list-php { border-right: 1px solid var(--line); }.conversation-list-php > header { padding: 17px; border-bottom: 1px solid var(--line); }.conversation-list-php a { min-height: 92px; padding: 13px; display: grid; grid-template-columns: 45px minmax(0,1fr); gap: 10px; border-bottom: 1px solid var(--line); }.conversation-list-php a:hover,.conversation-list-php a.active { background: rgba(240,68,255,.04); }.conversation-list-php a div { min-width: 0; }.conversation-list-php strong,.conversation-list-php small,.conversation-list-php p { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.conversation-list-php small { color: var(--pink); }.conversation-list-php p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }.message-panel { min-width: 0; display: flex; flex-direction: column; }.message-panel > header { padding: 20px; border-bottom: 1px solid var(--line); }.message-thread-php { max-height: 620px; padding: 20px; display: grid; gap: 10px; overflow-y: auto; }.message-bubble { width: min(78%,680px); padding: 13px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.02); }.message-bubble.own { margin-left: auto; border-color: rgba(140,92,255,.22); background: rgba(140,92,255,.045); }.message-bubble header { display: flex; justify-content: space-between; gap: 10px; }.message-bubble p { margin: 6px 0 0; color: #c2b8c6; white-space: pre-wrap; }.message-compose-php { margin-top: auto; padding: 17px; border-top: 1px solid var(--line); }
.admin-layout { display: grid; grid-template-columns: 230px minmax(0,1fr); gap: 18px; }.admin-nav { position: sticky; top: 110px; padding: 8px; }.admin-nav a { min-height: 45px; padding: 0 12px; display: flex; align-items: center; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }.admin-nav a.active,.admin-nav a:hover { color: white; background: rgba(240,68,255,.045); }.admin-panel { min-width: 0; }.data-table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; }.data-table th,.data-table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }.data-table th { color: var(--muted); font: 800 8px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }.data-table td { color: #c2b8c6; font-size: 12px; }.inline-form { display: flex; flex-wrap: wrap; gap: 7px; }.inline-form input,.inline-form select { width: auto; min-width: 110px; }.admin-metric-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }.admin-metric { min-height: 145px; padding: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }.admin-metric small { color: var(--pink); font: 800 8px var(--font-display); }.admin-metric strong { margin: 13px 0 6px; display: block; font: 800 30px var(--font-display); }.admin-metric p { margin: 0; color: var(--muted); font-size: 11px; }
.prose { max-width: 980px; }.prose h2 { margin: 42px 0 13px; font: 800 25px var(--font-display); text-transform: uppercase; }.prose h3 { margin: 30px 0 10px; font: 800 18px var(--font-display); }.prose p,.prose li { color: #b6abb9; line-height: 1.75; }.prose blockquote { margin: 20px 0; padding: 16px 19px; border-left: 2px solid var(--pink); background: rgba(240,68,255,.035); }
.timeline { display: grid; gap: 8px; }.timeline article { padding: 20px; display: grid; grid-template-columns: 105px minmax(0,1fr); gap: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.014); }.timeline article > span { color: var(--pink); font: 800 12px var(--font-display); }.timeline h3 { margin: 0 0 7px; font: 800 17px var(--font-display); }.timeline p { margin: 0; color: var(--muted); line-height: 1.6; }
.team-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }.team-card { padding: 23px; display: grid; grid-template-columns: 80px minmax(0,1fr); gap: 17px; border: 1px solid var(--line); background: rgba(255,255,255,.014); }.team-card .avatar { width: 78px; height: 78px; }.team-card h3 { margin: 3px 0 7px; font: 800 18px var(--font-display); }.team-card p { margin: 0; color: var(--muted); }
.install-body { min-height: 100vh; padding: 45px 20px; display: grid; place-items: center; background: radial-gradient(circle at top,rgba(140,92,255,.2),transparent 40%),#050409; color: white; }.install-shell { width: min(100%,900px); padding: 34px; border: 1px solid rgba(240,68,255,.28); background: #0c0911; }.install-shell > img { width: 150px; height: 100px; object-fit: contain; }.install-shell h1 { margin: 4px 0 10px; font: 800 36px var(--font-display); text-transform: uppercase; }.install-shell > p { color: var(--muted); }.install-checks { margin: 24px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }.install-checks div { min-height: 42px; padding: 8px 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); }.install-checks strong { font: 800 8px var(--font-display); }.install-checks .ok strong { color: var(--green); }.install-checks .fail strong { color: #ff5b6e; }.install-form { display: grid; gap: 17px; }.install-form fieldset { margin: 0; padding: 18px; display: grid; gap: 12px; border: 1px solid var(--line); }.install-form legend { padding: 0 9px; color: var(--pink); font: 800 10px var(--font-display); text-transform: uppercase; }
.empty-state { min-height: 160px; padding: 30px; display: grid; place-items: center; align-content: center; gap: 7px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }.empty-state strong { color: white; font: 800 17px var(--font-display); }
.pagination { margin-top: 18px; display: flex; justify-content: center; gap: 6px; }.pagination a { min-width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); }.pagination a.active,.pagination a:hover { border-color: var(--pink); color: var(--pink); }
.legal-warning { padding: 18px; border: 1px solid rgba(255,173,73,.35); background: rgba(255,173,73,.055); color: #ffc37e; }

@media (max-width: 1180px) {
  .desktop-nav { gap: 0; }.nav-link { padding-inline: 9px; font-size: 9px; }.content-grid { grid-template-columns: 1fr; }.content-grid > aside { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }.sidebar-card + .sidebar-card { margin-top: 0; }.card-grid,.gallery-grid,.photo-grid-php { grid-template-columns: repeat(2,minmax(0,1fr)); }.admin-metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .desktop-nav,.desktop-only { display: none!important; }.menu-button { display: grid; }.header-inner { height: 78px; }.brand-frame { height: 61px; min-width: 130px; }.brand-frame > img { width: 104px; height: 58px; }.profile-header-inner { grid-template-columns: 100px minmax(0,1fr); }.profile-header .profile-avatar-large { width: 100px; height: 100px; }.profile-actions { grid-column: 1/-1; grid-template-columns: repeat(2,1fr); }.admin-layout { grid-template-columns: 1fr; }.admin-nav { position: static; display: flex; overflow-x: auto; }.admin-nav a { min-width: 135px; border-right: 1px solid var(--line); }
}
@media (max-width: 680px) {
  .page-width,.header-inner,.utility-inner { width: min(calc(100% - 28px),var(--page)); }.utility-inner > span:first-child { display: none; }.header-actions .member-pill { display: none; }.page-hero { min-height: 360px; }.page-hero-inner { padding-block: 55px; }.content-wrap { padding-block: 30px 55px; }.surface-pad,.auth-card,.install-shell { padding: 20px 16px; }.form-grid,.topic-grid,.card-grid,.gallery-grid,.photo-grid-php,.character-grid,.team-grid,.install-checks,.content-grid > aside { grid-template-columns: 1fr; }.thread-row { grid-template-columns: 42px minmax(0,1fr); }.thread-stats { grid-column: 2; }.thread-stats span { border-left: 0; border-top: 1px solid var(--line); }.post-original,.reply-card { grid-template-columns: 1fr; }.post-author { flex-direction: row; text-align: left; }.post-avatar { width: 52px; height: 52px; }.message-layout { grid-template-columns: 1fr; }.conversation-list-php { max-height: 310px; overflow-y: auto; border-right: 0; border-bottom: 1px solid var(--line); }.message-bubble { width: 94%; }.admin-metric-grid { grid-template-columns: 1fr; }.inline-form { display: grid; }.inline-form input,.inline-form select { width: 100%; }.profile-header { min-height: 380px; }.profile-header-inner { grid-template-columns: 80px minmax(0,1fr); }.profile-header .profile-avatar-large { width: 80px; height: 80px; }.profile-actions { grid-template-columns: 1fr; }.timeline article { grid-template-columns: 1fr; }.footer-top { padding-block: 30px; align-items: flex-start; flex-direction: column; }.footer-top nav { justify-content: flex-start; }.footer-bottom { padding-block: 12px; flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Pfadsichere STRATO-Assets und bewusst ruhiger Live-Rahmen. */
.hero > .hero-backdrop { background-image: linear-gradient(90deg,rgba(5,4,9,.98) 0%,rgba(7,5,11,.9) 38%,rgba(7,5,11,.36) 70%,rgba(5,4,9,.48) 100%),radial-gradient(circle at 75% 48%,rgba(240,68,255,.17),transparent 28%),url('../images/ruhrpott-forum-hero.png'); }

/* 0.1.8: compact landing links, read state and official group voices. */
.landing-project-sidebar-php { margin-top: 18px; border: 1px solid var(--line); background: linear-gradient(145deg,rgba(19,14,25,.98),rgba(8,6,12,.98)); }.landing-project-sidebar-php > header { padding: 19px 17px; border-bottom: 1px solid var(--line); }.landing-project-sidebar-php h2 { margin: 0; font: 800 18px/1.25 var(--font-display); }.landing-project-stack { display: grid; gap: 6px; padding: 6px; }.landing-project-stack > a { min-height: 145px; padding: 17px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line); background: rgba(255,255,255,.014); }.landing-project-stack > a:hover { border-color: rgba(240,68,255,.3); }.landing-project-stack small { color: var(--pink); font: 800 7px var(--font-display); letter-spacing: .1em; }.landing-project-stack strong { margin-top: 13px; font: 800 15px var(--font-display); }.landing-project-stack p { margin: 7px 0 15px; color: #8d8390; font-size: 11px; line-height: 1.45; }.landing-project-stack b { margin-top: auto; color: var(--pink); font: 800 7px var(--font-display); }.landing-rank-legend { padding: 7px; display: grid; gap: 4px; border-top: 1px solid var(--line); }.landing-rank-legend > strong { padding: 8px; color: #8d8390; font: 800 7px var(--font-display); letter-spacing: .1em; }.landing-rank-legend > span { --rank-color: var(--pink); min-height: 36px; padding: 0 9px; display: grid; grid-template-columns: 25px 1fr; align-items: center; border: 1px solid color-mix(in srgb,var(--rank-color) 16%,var(--line)); color: #756d79; }.landing-rank-legend > span.active { border-color: color-mix(in srgb,var(--rank-color) 50%,transparent); box-shadow: inset 2px 0 var(--rank-color); color: white; }.landing-rank-legend i { color: var(--rank-color); font: 800 6px var(--font-display); font-style: normal; }.landing-rank-legend b { font: 800 7px var(--font-display); }
.landing-feed-summary { min-height: 64px; margin-bottom: 8px; padding: 12px 15px; display: flex; align-items: center; gap: 11px; border: 1px solid rgba(93,240,172,.17); background: rgba(93,240,172,.03); }.landing-feed-summary > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }.landing-feed-summary > div { display: flex; flex-direction: column; }.landing-feed-summary strong { color: #c7f1dc; font: 800 8px var(--font-display); letter-spacing: .08em; }.landing-feed-summary p { margin: 4px 0 0; color: #7f8e87; font-size: 10px; }.landing-feed-summary.is-hot { border-color: rgba(240,68,255,.2); background: rgba(240,68,255,.035); }.landing-feed-summary.is-hot > i { background: var(--pink); box-shadow: 0 0 11px var(--pink); }.landing-feed-summary.is-hot strong { color: #f3b8f5; }.show-all-new-row { width: 100%; min-height: 61px; margin-top: 8px; padding: 0 18px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; border: 1px solid rgba(240,68,255,.22); background: rgba(240,68,255,.045); color: var(--pink); text-align: left; cursor: pointer; }.show-all-new-row span { font: 800 8px var(--font-display); letter-spacing: .11em; }.show-all-new-row small { color: #776e7a; font: 800 6px var(--font-display); }.show-all-new-row b { font-size: 17px; }
.forum-read-toolbar { margin: -18px 0 24px auto; display: flex; justify-content: flex-end; gap: 7px; }.forum-read-toolbar form { margin: 0; }.forum-read-toolbar .active { border-color: rgba(240,68,255,.48); color: white; background: rgba(240,68,255,.08); }.forum-unread-block { margin-bottom: 38px; padding: 18px; border: 1px solid rgba(240,68,255,.18); background: rgba(240,68,255,.025); }
.thread-author.is-official-group strong { color: var(--official-color,var(--blue)); }.official-initials { display: grid!important; place-items: center; color: var(--official-color,var(--blue))!important; border: 1px solid color-mix(in srgb,var(--official-color,var(--blue)) 40%,transparent)!important; background-image: none!important; background-color: color-mix(in srgb,var(--official-color,var(--blue)) 5%,transparent)!important; font: 800 7px var(--font-display); }.thread-group-logo { object-fit: contain; padding: 2px; border-color: color-mix(in srgb,var(--official-color,var(--blue)) 40%,transparent); background: #08060d; }.official-group-logo { object-fit: contain; padding: 7px; border-color: color-mix(in srgb,var(--official-color,var(--blue)) 40%,transparent); background: #08060d; }.posting-identity-picker-php { margin-top: 18px; padding: 17px; display: grid; grid-template-columns: minmax(280px,420px) 1fr; align-items: center; gap: 22px; border: 1px solid rgba(55,214,255,.22); background: rgba(55,214,255,.035); }.posting-identity-picker-php label { display: flex; flex-direction: column; gap: 7px; }.posting-identity-picker-php select { height: 46px; }.posting-identity-picker-php strong { color: var(--blue); font: 800 7px var(--font-display); letter-spacing: .09em; }.posting-identity-picker-php p { margin: 6px 0; color: #817986; font-size: 11px; }.posting-identity-picker-php a { color: var(--blue); font: 800 7px var(--font-display); }.post-original.is-official-group { border-color: color-mix(in srgb,var(--official-color,var(--blue)) 22%,transparent); }.post-original.is-official-group .post-author { box-shadow: inset 3px 0 var(--official-color,var(--blue)); }
.group-identity-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; }.group-identity-list article { --group-color: var(--pink); min-height: 60px; padding: 9px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; border: 1px solid color-mix(in srgb,var(--group-color) 24%,transparent); background: color-mix(in srgb,var(--group-color) 4%,transparent); }.group-identity-list article > span { width: 38px; height: 38px; display: grid; place-items: center; color: var(--group-color); border: 1px solid color-mix(in srgb,var(--group-color) 46%,transparent); font: 800 6px var(--font-display); }.group-identity-list article > div { display: flex; flex-direction: column; }.group-identity-list article strong { font: 800 10px var(--font-display); }.group-identity-list article small { margin-top: 4px; color: #776f7a; font-size: 9px; }.managed-group-card-php { --group-color: var(--blue); border-color: color-mix(in srgb,var(--group-color) 25%,var(--line)); }.managed-group-card-php > .section-head .small-kicker { color: var(--group-color); }.group-threshold-note-php { margin: 16px 0; padding: 12px; color: #8d8390; border: 1px solid color-mix(in srgb,var(--group-color) 20%,transparent); background: color-mix(in srgb,var(--group-color) 3%,transparent); font-size: 11px; }

@media (max-width: 700px) {
  .forum-read-toolbar { margin-top: 0; align-items: stretch; flex-direction: column; }.forum-read-toolbar .button { width: 100%; }.posting-identity-picker-php,.group-identity-list { grid-template-columns: 1fr; }
}
.stream-card.is-live::before { animation-duration: 14s; }
.avatar.initials { display: grid; place-items: center; color: var(--pink); font: 800 12px var(--font-display); }
.streamer-sheet-list { display: grid; gap: 7px; }
.streamer-sheet-entry { display: grid; grid-template-columns: 27px minmax(0,1fr); align-items: center; }
.streamer-sheet-entry .stream-card { width: 100%; min-height: 70px; }

/* Öffentliche Community: ausschließlich freigegebene Charakterkarten. */
.community-character-grid-php { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.community-character-card-php { min-width: 0; overflow: hidden; border: 1px solid var(--line); color: inherit; text-decoration: none; cursor: pointer; background: linear-gradient(155deg,rgba(21,16,28,.98),rgba(8,6,12,.98)); box-shadow: 0 18px 40px rgba(0,0,0,.22); transition: transform .2s ease,border-color .2s ease; }.community-character-card-php:hover { transform: translateY(-3px); border-color: rgba(240,68,255,.3); }.community-character-card-php:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.community-character-picture { min-height: 176px; padding: 15px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 42%,rgba(240,68,255,.16),transparent 48%),linear-gradient(145deg,#100c16,#08060c); border-bottom: 1px solid var(--line); }
.community-character-picture::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; pointer-events: none; background: linear-gradient(transparent,rgba(6,4,9,.75)); }
.community-character-picture > span:last-child { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 5px 7px; border: 1px solid color-mix(in srgb,var(--character-role) 62%,transparent); color: var(--character-role); background: rgba(8,6,12,.86); box-shadow: 0 0 18px color-mix(in srgb,var(--character-role) 18%,transparent); font: 800 6px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.community-character-avatar { width: 120px; height: 120px; display: block; position: relative; z-index: 1; border: 1px solid rgba(240,68,255,.36); border-radius: 50%; background-color: #0e0b13; background-position: center; background-size: cover; box-shadow: 0 0 0 6px rgba(240,68,255,.035),0 14px 32px rgba(0,0,0,.45); }
.community-character-body { padding: 15px; }
.community-character-body > small { color: var(--pink); font: 800 6px var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.community-character-body h2 { margin: 5px 0 7px; overflow: hidden; font: 800 16px var(--font-display); text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.community-character-body > p { min-height: 35px; margin: 0; color: #a99fac; font-size: 9px; line-height: 1.5; }
.community-character-body dl { margin: 12px 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.community-character-body dl div { min-width: 0; padding: 7px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.community-character-body dt { color: var(--muted); font: 800 6px var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.community-character-body dd { margin: 4px 0 0; overflow: hidden; color: #d8cedb; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.community-character-body > .text-link { font-size: 7px; }

/* Interne Charakterakte – wird serverseitig nur ab Bürgerrat ausgeliefert. */
.internal-warning-card { display: grid; grid-template-columns: 58px minmax(150px,.6fr) minmax(240px,1.5fr) auto; gap: 15px; align-items: center; border-left: 2px solid var(--amber); }
.internal-warning-card .avatar { width: 56px; height: 56px; }
.internal-warning-card div { min-width: 0; }
.internal-warning-card div > small { color: var(--amber); font: 800 7px var(--font-display); letter-spacing: .09em; }
.internal-warning-card h3 { margin: 5px 0 2px; font: 800 16px var(--font-display); }
.internal-warning-card div > span,.internal-warning-card time,.internal-warning-card time small { color: var(--muted); font-size: 10px; }
.internal-warning-card > p { margin: 0; color: #c8becb; line-height: 1.55; }
.internal-warning-card time { text-align: right; white-space: nowrap; }

@media (max-width: 1050px) {
  .community-character-grid-php { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .internal-warning-card { grid-template-columns: 58px minmax(0,1fr) auto; }
  .internal-warning-card > p { grid-column: 2/-1; }
}
@media (max-width: 680px) {
  .community-character-grid-php { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .internal-warning-card { grid-template-columns: 52px minmax(0,1fr); }
  .internal-warning-card .avatar { width: 50px; height: 50px; }
  .internal-warning-card > p,.internal-warning-card time { grid-column: 1/-1; text-align: left; white-space: normal; }
}
@media (max-width: 480px) {
  .community-character-grid-php { grid-template-columns: 1fr; }
}

/* STRATO 0.1.9: direct cards, community search, reactions and RockPott */
.topic-card > *,.thread-row > * { pointer-events: none; }
.community-search-php { margin-bottom: 25px; padding: 18px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.community-search-php > label { display: block; margin-bottom: 8px; color: var(--muted); font: 800 8px var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.community-search-php > div { display: flex; gap: 8px; }.community-search-php input { flex: 1; min-width: 0; }
.rockpott-spotify-card { min-height: 104px; padding: 17px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(29,185,84,.34); color: white; text-decoration: none; background: radial-gradient(circle at 0 50%,rgba(29,185,84,.18),transparent 42%),#0b0a0e; transition: border-color .18s ease,transform .18s ease; }
.rockpott-spotify-card:hover { border-color: #1db954; transform: translateY(-2px); }.spotify-mark { width: 45px; height: 45px; flex: 0 0 45px; display: grid; place-items: center; border-radius: 50%; color: #050807; background: #1db954; font-size: 23px; }
.rockpott-spotify-card > span:last-child { display: grid; gap: 4px; }.rockpott-spotify-card small { color: #8f9991; font: 800 6px var(--font-display); letter-spacing: .12em; }.rockpott-spotify-card strong { font: 800 12px var(--font-display); }.rockpott-spotify-card b { color: #1db954; font: 800 7px var(--font-display); }
.member-manage-form { display: grid; gap: 8px; }.member-manage-form label { min-width: 135px; }.button-danger { border-color: rgba(255,91,110,.45); color: #ff7b8b; background: rgba(255,91,110,.07); }
.reaction-row button.active { border-color: var(--pink); color: white; background: rgba(240,68,255,.09); }.reaction-picker { position: relative; }.reaction-picker summary { width: 31px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--pink); cursor: pointer; list-style: none; }.reaction-picker summary::-webkit-details-marker { display:none; }
.reaction-picker > div { width: 230px; padding: 8px; position: absolute; z-index: 12; right: 0; bottom: 35px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; border: 1px solid rgba(240,68,255,.3); background: #0c0910; box-shadow: 0 18px 45px rgba(0,0,0,.65); }.reaction-picker > div form { display: block; }.reaction-picker > div button { width: 100%; height: 44px; padding: 2px; display: grid; place-items: center; font-size: 18px; }.reaction-picker > div button span { display: none; }
@media (max-width: 640px) { .community-search-php > div { flex-direction: column; }.reaction-picker > div { right: auto; left: 0; } }

/* STRATO 0.1.10: rank groups, usable calendar, footer legend and profile fixes */
.member-pill > span:last-child { width: auto; height: auto; overflow: visible; border: 0; background: none; }
.profile-header-inner > div { min-width: 0; }.profile-header h1 { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }.profile-header-inner { overflow: hidden; }
.community-rank-section { margin-top: 32px; }.community-rank-section > header { margin-bottom: 14px; display: grid; grid-template-columns: 34px auto auto 1fr; align-items: center; gap: 11px; color: var(--rank-color); }.community-rank-section > header span { height: 2px; background: var(--rank-color); box-shadow: 0 0 12px var(--rank-color); }.community-rank-section > header h2 { margin: 0; font: 800 17px var(--font-display); text-transform: uppercase; }.community-rank-section > header b { color: #746b78; font: 800 7px var(--font-display); }.community-rank-section > header i { height: 1px; background: linear-gradient(90deg,color-mix(in srgb,var(--rank-color) 55%,transparent),transparent); }
.realtime-clock { padding: 16px 14px 12px; display: flex; align-items: end; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }.realtime-clock strong { color: white; font: 800 25px var(--font-display); letter-spacing: .05em; }.realtime-clock span { padding-bottom: 3px; color: var(--pink); font: 700 7px var(--font-display); text-align: right; }
.calendar-grid button { width: 26px; height: 25px; margin: auto; padding: 0; display: grid; place-items: center; border: 1px solid transparent; color: #9a909d; background: transparent; font: 600 9px var(--font-display); cursor: default; }.calendar-grid button.today { color: white; background: var(--pink); box-shadow: 0 0 13px rgba(240,68,255,.45); }.calendar-grid button.event-day { border-color: var(--violet); color: white; cursor: pointer; }
.new-arrival-card { min-height: 78px; margin-top: 18px; padding: 13px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(140,92,255,.24); color: white; text-decoration: none; background: rgba(140,92,255,.035); }.new-arrival-card:hover { border-color: rgba(240,68,255,.38); }.new-arrival-card .avatar { width: 48px; height: 48px; flex: 0 0 48px; }.new-arrival-card > span { min-width: 0; display: grid; gap: 3px; }.new-arrival-card small { color: var(--pink); font: 800 6px var(--font-display); letter-spacing: .1em; }.new-arrival-card strong { overflow: hidden; font: 800 11px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }.new-arrival-card b { color: #776e7b; font-size: 8px; font-weight: 500; }
.footer-rank-legend { padding: 28px 0 20px; border-bottom: 1px solid var(--line); }.footer-rank-legend > strong { display: block; margin-bottom: 11px; color: #8d8390; font: 800 7px var(--font-display); letter-spacing: .12em; }.footer-rank-legend > div { display: flex; flex-wrap: wrap; gap: 6px; }.footer-rank-legend span { min-height: 29px; padding: 0 9px; display: flex; align-items: center; gap: 7px; border: 1px solid color-mix(in srgb,var(--rank-color) 25%,var(--line)); color: #7d7480; }.footer-rank-legend span.active { color: white; border-color: var(--rank-color); }.footer-rank-legend i { width: 6px; height: 6px; border-radius: 50%; background: var(--rank-color); box-shadow: 0 0 7px var(--rank-color); }.footer-rank-legend b { font: 800 7px var(--font-display); }
.first-character-card { max-width: 760px; margin-inline: auto; }.first-character-card > h2 { font: 800 28px var(--font-display); text-transform: uppercase; }
@media (max-width: 640px) { .community-rank-section > header { grid-template-columns: 24px 1fr auto; }.community-rank-section > header i { display:none; }.realtime-clock { align-items: flex-start; flex-direction: column; }.footer-rank-legend > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* STRATO 0.1.11: avatar proportions, member label and community groups */
.profile-header { --profile-avatar-size: 150px; }
.profile-header .profile-avatar-large {
  width: var(--profile-avatar-size) !important;
  height: var(--profile-avatar-size) !important;
  min-width: var(--profile-avatar-size);
  max-width: var(--profile-avatar-size);
  min-height: var(--profile-avatar-size);
  max-height: var(--profile-avatar-size);
  aspect-ratio: 1 / 1;
  flex: 0 0 var(--profile-avatar-size);
  overflow: hidden;
  background-position: center,center !important;
  background-repeat: no-repeat,no-repeat !important;
  background-size: cover,cover !important;
}
.member-pill { position: relative; padding-top: 14px; }
.member-pill > span:last-child { align-items: center; justify-content: center; text-align: center; }
.member-pill > span:last-child small {
  position: absolute;
  top: 3px;
  right: 7px;
  left: 43px;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-pill > span:last-child strong { width: 100%; max-width: none; text-align: center; }
.community-character-badges { position: absolute; z-index: 3; top: 10px; right: 10px; max-width: calc(100% - 20px); display: flex; align-items: flex-end; flex-direction: column; gap: 5px; }
.community-character-badges > span { max-width: 100%; overflow: hidden; padding: 5px 7px; border: 1px solid color-mix(in srgb,var(--group-color) 58%,transparent); color: var(--group-color); background: rgba(8,6,12,.88); font: 800 6px var(--font-display); letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.community-character-badges > .community-role-badge { --group-color: var(--character-role); border-color: color-mix(in srgb,var(--character-role) 62%,transparent); color: var(--character-role); box-shadow: 0 0 18px color-mix(in srgb,var(--character-role) 18%,transparent); }
.community-character-badges > span:not(.community-role-badge) { display: inline-flex; align-items: center; gap: 6px; }
.community-character-badges > span b { overflow: hidden; font: inherit; text-overflow: ellipsis; }
.community-group-logo { width: 18px; height: 18px; flex: 0 0 18px; object-fit: contain; filter: drop-shadow(0 0 5px color-mix(in srgb,var(--group-color) 32%,transparent)); }
.group-role-badge { gap: 6px; padding-left: 5px; }
.profile-group-logo { width: 18px; height: 18px; object-fit: contain; }
.admin-group-identity { min-width: 230px; display: flex; align-items: center; gap: 12px; }
.admin-group-identity > div { display: flex; flex-direction: column; gap: 4px; }
.admin-group-logo { width: 58px; height: 58px; flex: 0 0 58px; padding: 5px; border: 1px solid color-mix(in srgb,currentColor 20%,var(--line)); background: #08060c; object-fit: contain; }
.group-logo-upload { margin-top: 10px; display: flex; align-items: end; gap: 8px; }
.group-logo-upload label { min-width: 150px; color: var(--muted); font-size: 9px; }
.group-logo-upload input { max-width: 220px; padding: 6px; }

@media (max-width: 760px) {
  .group-logo-upload { align-items: stretch; flex-direction: column; }
  .group-logo-upload .button { width: 100%; }
}
@media (max-width: 900px) { .profile-header { --profile-avatar-size: 100px; } }
@media (max-width: 640px) { .profile-header { --profile-avatar-size: 80px; } }

/* STRATO 0.1.12: online overview and warning management */
.online-overview { margin-top: 18px; }
.online-overview-list { padding: 8px 13px 13px; display: grid; gap: 2px; }
.online-overview-list > span { min-height: 36px; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid rgba(255,255,255,.045); }
.online-overview-list > span:last-child { border-bottom: 0; }
.online-overview-list i { width: 7px; height: 7px; border-radius: 50%; background: #726a76; box-shadow: 0 0 8px rgba(114,106,118,.35); }
.online-overview-list i.entrant { background: var(--violet); box-shadow: 0 0 8px rgba(140,92,255,.5); }
.online-overview-list i.citizen { background: var(--green); box-shadow: 0 0 8px rgba(93,240,172,.5); }
.online-overview-list i.team { background: var(--pink); box-shadow: 0 0 8px rgba(240,68,255,.55); }
.online-overview-list b { color: #a79daa; font-size: 9px; font-weight: 600; }
.online-overview-list strong { color: white; font: 800 12px var(--font-display); }
.warning-meta-actions { display: grid; justify-items: end; gap: 9px; }
.warning-meta-actions time { display: grid; gap: 2px; }
.warning-meta-actions .button { min-width: 88px; min-height: 30px; padding: 6px 10px; }
@media (max-width: 680px) { .warning-meta-actions { grid-column: 1/-1; justify-items: start; }.warning-meta-actions time { text-align: left; } }

/* STRATO 0.1.14.2: exact alignment for profile badges and header identity. */
.profile-header h1 + div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.profile-header h1 + div > .role-badge {
  height: 28px;
  min-height: 28px;
  margin: 0;
  vertical-align: middle;
}
.profile-header h1 + div .profile-group-logo {
  display: block;
}
.member-pill {
  min-height: 46px;
  padding: 6px 10px 6px 6px;
  grid-template-columns: 31px minmax(0,1fr);
  grid-template-rows: 1fr;
  align-items: center;
}
.member-pill > .member-avatar {
  grid-row: 1;
}
.member-pill > span:last-child {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  transform: translateY(1px);
}
.member-pill > span:last-child small {
  position: static;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.member-pill > span:last-child strong {
  width: 100%;
  max-width: none;
  line-height: 1.1;
  text-align: center;
}

/* STRATO 0.1.15: editable group hierarchy and motorway project roadmap. */
.admin-group-editor-list { margin-top: 14px; }
.admin-group-editor { border-color: color-mix(in srgb,var(--group-color) 25%,var(--line)); }
.admin-group-editor > .section-head { padding-bottom: 15px; border-bottom: 1px solid color-mix(in srgb,var(--group-color) 18%,var(--line)); }
.admin-group-editor .admin-group-identity h2 { margin: 0; }
.admin-group-editor .admin-group-identity .small-kicker { margin-bottom: 4px; color: var(--group-color); }
.group-rank-editor { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.group-rank-editor h3,.group-member-assign h3 { margin: 0; font: 800 17px var(--font-display); text-transform: uppercase; }
.group-rank-row { padding: 9px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.014); }
.group-rank-row > .inline-form { display: grid; grid-template-columns: minmax(170px,1fr) 100px minmax(145px,auto) auto; align-items: center; }
.group-rank-new { margin-top: 10px; padding: 13px; border: 1px dashed color-mix(in srgb,var(--group-color) 35%,var(--line)); background: color-mix(in srgb,var(--group-color) 3%,transparent); }
.group-member-assign { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.roadmap-admin-card { border-left: 3px solid var(--pink); }

.project-roadmap-section { margin-block: 22px 10px; }
.motorway-roadmap { width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--pink) #0a0810; border: 1px solid rgba(240,68,255,.16); background: radial-gradient(circle at 50% 50%,rgba(140,92,255,.08),transparent 45%),linear-gradient(180deg,#09070d,#050409); box-shadow: inset 0 0 70px rgba(0,0,0,.58); }
.motorway-track { min-width: max(100%,calc(var(--roadmap-count) * 285px)); height: 590px; padding-inline: 36px; position: relative; display: grid; grid-template-columns: repeat(var(--roadmap-count),minmax(250px,1fr)); grid-template-rows: 235px 120px 235px; gap: 0 20px; }
.motorway-asphalt { grid-column: 1/-1; grid-row: 2; align-self: center; height: 92px; position: relative; overflow: hidden; border-block: 3px solid rgba(255,255,255,.72); background: linear-gradient(180deg,#24232a,#111116 48%,#29282e); box-shadow: 0 14px 35px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.08); }
.motorway-asphalt::before,.motorway-asphalt::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg,rgba(255,255,255,.88) 0 56px,transparent 56px 102px); }
.motorway-asphalt::before { top: 26px; }.motorway-asphalt::after { bottom: 26px; }
.motorway-asphalt > span { position: absolute; z-index: 2; inset: 0; background: linear-gradient(90deg,transparent 0 97%,var(--pink) 100%); opacity: .42; }
.motorway-asphalt > b { position: absolute; z-index: 3; right: 18px; top: 50%; color: rgba(255,255,255,.6); font: 800 8px var(--font-display); letter-spacing: .16em; transform: translateY(-50%); }
.roadmap-exit { min-width: 0; position: relative; grid-column: var(--road-column); display: flex; justify-content: center; }
.roadmap-exit.is-top { grid-row: 1; align-items: flex-end; padding-bottom: 28px; }.roadmap-exit.is-bottom { grid-row: 3; align-items: flex-start; padding-top: 28px; }
.roadmap-ramp { width: 5px; height: 66px; position: absolute; left: 50%; background: #6d6a72; box-shadow: 0 0 0 1px #17151a,0 0 17px rgba(255,255,255,.08); transform: translateX(-50%); }
.is-top .roadmap-ramp { bottom: -38px; }.is-bottom .roadmap-ramp { top: -38px; }
.roadmap-ramp::after { content: ""; width: 22px; height: 5px; position: absolute; left: 50%; background: #8c8990; transform: translateX(-50%); }.is-top .roadmap-ramp::after { bottom: 0; }.is-bottom .roadmap-ramp::after { top: 0; }
.roadmap-sign { width: min(100%,270px); min-height: 174px; padding: 18px; position: relative; z-index: 2; border: 3px solid #edf5ff; outline: 2px solid #075e9f; outline-offset: -7px; color: white; background: linear-gradient(145deg,#0874bd,#044d82); box-shadow: 0 16px 35px rgba(0,0,0,.42),0 0 22px rgba(74,185,255,.12); }
.roadmap-sign small { color: #cdeaff; font: 800 7px var(--font-display); letter-spacing: .12em; }.roadmap-sign h3 { margin: 12px 0 7px; font: 800 16px/1.2 var(--font-display); text-transform: uppercase; }.roadmap-sign p { margin: 0 0 35px; color: #d0e4f2; font-size: 10px; line-height: 1.45; }.roadmap-sign strong { position: absolute; right: 15px; bottom: 13px; left: 15px; min-height: 24px; display: flex; align-items: center; justify-content: center; border: 1px solid currentColor; font: 800 7px var(--font-display); letter-spacing: .08em; }
.roadmap-exit.is-blocked .roadmap-sign { filter: saturate(.58); }.roadmap-exit.is-blocked .roadmap-sign strong { color: #ffb25f; background: rgba(75,25,5,.52); box-shadow: 0 0 14px rgba(255,173,73,.15); }.roadmap-exit.is-blocked .roadmap-ramp::before { content: ""; width: 54px; height: 12px; position: absolute; z-index: 4; left: 50%; top: 50%; border: 2px solid #17110b; background: repeating-linear-gradient(135deg,#ffad49 0 9px,#1a130d 9px 18px); box-shadow: 0 0 12px rgba(255,173,73,.35); transform: translate(-50%,-50%); }
.roadmap-exit.is-released .roadmap-sign { border-color: #dffff0; outline-color: #178a5a; background: linear-gradient(145deg,#137b50,#095238); box-shadow: 0 16px 35px rgba(0,0,0,.42),0 0 25px rgba(93,240,172,.14); }.roadmap-exit.is-released .roadmap-sign strong { color: var(--green); background: rgba(5,60,38,.55); }

@media (max-width: 900px) {
  .group-rank-row > .inline-form { grid-template-columns: 1fr 90px; }.group-rank-row > .inline-form label,.group-rank-row > .inline-form button { grid-column: 1/-1; }
  .motorway-track { min-width: calc(var(--roadmap-count) * 245px); height: 540px; padding-inline: 24px; grid-template-columns: repeat(var(--roadmap-count),minmax(215px,1fr)); grid-template-rows: 215px 110px 215px; gap-inline: 16px; }
  .roadmap-sign { min-height: 164px; padding: 16px; }.roadmap-sign h3 { font-size: 14px; }
}
@media (max-width: 640px) {
  .group-rank-row { grid-template-columns: 1fr; }.group-rank-row > form:last-child .button { width: 100%; }
  .motorway-roadmap { margin-inline: -14px; width: calc(100% + 28px); }
}

/* STRATO 0.1.15: natürliche Groß-/Kleinschreibung und geschützte Gruppenleitung. */
h1,h2,h3,
.hero h1,.subpage-hero h1,.page-hero h1,.album-detail-head h1,.contribution-hero h1,
.profile-identity h1,.profile-header h1,.public-profile-hero-inner h1,.messages-page-head h1,
.restricted-profile h1,.section-head h2,.info-card h3,.topic-card h2,.sidebar-card h3,
.prose h2,.community-character-body h2,.community-rank-section > header h2,
.first-character-card > h2,.group-rank-editor h3,.group-member-assign h3,.roadmap-sign h3,
.auth-card h1,.install-shell h1 { text-transform: none; }
.button,.role-badge,.visibility-badge,.status-badge,.community-character-badges > span,
.panel-footer-link,.topic-card-foot strong,.quick-sheet > header strong { text-transform: none; letter-spacing: .035em; }
.community-character-body dl div:last-child { grid-column: 1/-1; }
.birth-date-field { display: grid; gap: 8px; }
.birth-date-field > label:first-child { display: grid; gap: 7px; }
.birth-date-field .checkbox.compact { min-height: 34px; margin: 0; padding: 7px 9px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.protected-group-rank { min-height: 42px; padding: 8px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(255,173,73,.24); background: rgba(255,173,73,.035); }
.protected-group-rank strong { color: white; }.protected-group-rank span { color: var(--amber); font-size: 9px; }
@media (max-width: 640px) { .protected-group-rank { align-items: flex-start; flex-direction: column; } }

/* 0.1.15.2: kompakte Gruppenverwaltung und verständliches Teamprotokoll. */
.admin-group-editor-list,.managed-group-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-items: start; }
.admin-group-disclosure,.managed-group-disclosure { min-width: 0; padding: 0!important; overflow: hidden; border-color: color-mix(in srgb,var(--group-color) 24%,var(--line)); background: linear-gradient(145deg,rgba(18,14,24,.98),rgba(8,6,12,.98)); }
.admin-group-disclosure[open],.managed-group-disclosure[open] { grid-column: 1/-1; border-color: color-mix(in srgb,var(--group-color) 48%,var(--line)); box-shadow: 0 20px 45px rgba(0,0,0,.28); }
.admin-group-summary,.managed-group-summary { min-height: 88px; padding: 12px 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 14px; list-style: none; cursor: pointer; background: linear-gradient(110deg,color-mix(in srgb,var(--group-color) 6%,transparent),transparent 48%); transition: background .2s ease,border-color .2s ease; }
.admin-group-summary::-webkit-details-marker,.managed-group-summary::-webkit-details-marker { display: none; }
.admin-group-summary:hover,.managed-group-summary:hover { background: linear-gradient(110deg,color-mix(in srgb,var(--group-color) 11%,transparent),rgba(255,255,255,.012) 55%); }
.admin-group-disclosure[open] > .admin-group-summary,.managed-group-disclosure[open] > .managed-group-summary { border-bottom: 1px solid color-mix(in srgb,var(--group-color) 22%,var(--line)); }
.admin-group-summary .admin-group-identity { min-width: 0; }
.admin-group-summary .admin-group-logo,.managed-group-summary-logo,.managed-group-summary > span:first-child { width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; display: grid; place-items: center; padding: 3px; color: var(--group-color); border: 1px solid color-mix(in srgb,var(--group-color) 36%,transparent); background: rgba(6,5,9,.62); font: 800 7px var(--font-display); }
.admin-group-summary h2,.managed-group-summary h2 { margin: 2px 0 4px; overflow: hidden; font: 800 17px var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.admin-group-summary .small-kicker,.managed-group-summary .small-kicker,.managed-group-summary small { margin: 0; color: var(--group-color); text-transform: none; }
.admin-group-summary small,.managed-group-summary p { margin: 0; overflow: hidden; color: #837a87; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.managed-group-summary { grid-template-columns: 58px minmax(0,1fr) auto; }
.managed-group-summary > div { min-width: 0; }
.group-disclosure-toggle,.managed-group-summary > span:last-child { display: flex; align-items: center; gap: 10px; color: #8d8491; }
.group-disclosure-toggle b,.managed-group-summary > span:last-child b { font: 800 7px var(--font-display); letter-spacing: .04em; }
.group-disclosure-toggle i,.managed-group-summary > span:last-child i { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid color-mix(in srgb,var(--group-color) 28%,var(--line)); color: var(--group-color); font-style: normal; transition: transform .2s ease,background .2s ease; }
.admin-group-disclosure[open] .group-disclosure-toggle i,.managed-group-disclosure[open] .managed-group-summary > span:last-child i { background: color-mix(in srgb,var(--group-color) 8%,transparent); transform: rotate(45deg); }
.admin-group-editor-body,.managed-group-disclosure-body { padding: 20px; animation: group-disclosure-open .2s ease both; }
@keyframes group-disclosure-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

.audit-feed { display: grid; gap: 8px; }
.audit-entry { --audit-tone: var(--pink); min-width: 0; padding: 14px; display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: start; gap: 13px; border-left: 2px solid var(--audit-tone); background: linear-gradient(105deg,color-mix(in srgb,var(--audit-tone) 5%,transparent),rgba(11,8,15,.98) 34%); }
.audit-tone-green { --audit-tone: var(--green); }.audit-tone-blue { --audit-tone: var(--blue); }.audit-tone-violet { --audit-tone: var(--violet); }.audit-tone-amber { --audit-tone: var(--amber); }.audit-tone-red { --audit-tone: var(--red); }.audit-tone-muted { --audit-tone: #766d7a; }
.audit-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--audit-tone); border: 1px solid color-mix(in srgb,var(--audit-tone) 42%,transparent); background: color-mix(in srgb,var(--audit-tone) 5%,transparent); font: 800 8px var(--font-display); }
.audit-entry-main { min-width: 0; }
.audit-entry-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.audit-entry-head > div { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.audit-entry-head strong { color: #f2eaf4; font: 800 13px var(--font-display); }
.audit-entry-head span { color: var(--audit-tone); font-size: 10px; }
.audit-entry-head time { color: #716975; font-size: 9px; white-space: nowrap; }
.audit-entry-main > p { margin: 8px 0 0; color: #8f8693; font-size: 10px; }.audit-entry-main > p b { color: #c8becb; }
.audit-detail-chips { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 5px; }.audit-detail-chips span { min-height: 25px; padding: 0 8px; display: inline-flex; align-items: center; color: #b3a9b7; border: 1px solid color-mix(in srgb,var(--audit-tone) 18%,var(--line)); background: color-mix(in srgb,var(--audit-tone) 3%,transparent); font-size: 9px; }
.audit-technical { margin-top: 9px; }.audit-technical summary { width: max-content; color: #655e69; font-size: 8px; cursor: pointer; }.audit-technical code { margin-top: 7px; padding: 7px 9px; display: block; overflow-wrap: anywhere; color: #766d7a; border: 1px dashed var(--line); background: #070509; font-size: 8px; }

@media (max-width: 800px) {
  .admin-group-editor-list,.managed-group-list { grid-template-columns: 1fr; }
  .admin-group-disclosure[open],.managed-group-disclosure[open] { grid-column: 1; }
}
@media (max-width: 560px) {
  .admin-group-summary,.managed-group-summary { min-height: 78px; padding: 10px; gap: 10px; }
  .admin-group-summary .admin-group-logo,.managed-group-summary-logo,.managed-group-summary > span:first-child { width: 48px; height: 48px; flex-basis: 48px; }
  .managed-group-summary { grid-template-columns: 48px minmax(0,1fr) auto; }
  .group-disclosure-toggle b,.managed-group-summary > span:last-child b { display: none; }
  .admin-group-editor-body,.managed-group-disclosure-body { padding: 13px; }
  .audit-entry { grid-template-columns: 36px minmax(0,1fr); padding: 11px; gap: 10px; }.audit-icon { width: 34px; height: 34px; }.audit-entry-head { flex-direction: column; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) { .admin-group-editor-body,.managed-group-disclosure-body { animation: none; } }

/* STRATO 0.1.15.4: bessere Lesbarkeit, ruhigere Charakterkarten und stabile Forum-Avatare. */
body { font-size: 18px; line-height: 1.55; }
.small-kicker,.eyebrow { font-size: 11px; }
.nav-link { font-size: 12px; }
.button { font-size: 11px; }
.member-pill { min-width: 176px; }
.member-pill > span:last-child small { font-size: 8px; }
.member-pill > span:last-child strong { font-size: 12px; }
.panel-heading { font-size: 10px; }
.panel-count { font-size: 9px; }
.category-copy small,.stream-copy small,.new-arrival-card b,.online-overview-list b { font-size: 11px; }
.category-copy strong,.stream-copy strong,.new-arrival-card strong { font-size: 13px; }
.calendar-weekdays { font-size: 9px; }
.calendar-grid span,.calendar-grid button { font-size: 11px; }
.calendar-empty,.realtime-clock span,.rockpott-spotify-card small,.new-arrival-card small { font-size: 9px; }
.calendar-event strong { font-size: 13px; }
.calendar-event small { font-size: 10px; }
.online-overview-list strong { font-size: 14px; }
.footer-rank-legend > strong,.footer-rank-legend b { font-size: 9px; }
.role-badge,.visibility-badge,.status-badge { font-size: 9px; }
.form-stack label,.profile-form label,.new-character-card label { font-size: 10px; }
input,textarea,select { font-size: 14px; }
.form-help,.post-meta { font-size: 12px; }
.post-author strong { font-size: 14px; }
.post-author small { font-size: 10px; }
.post-body p { font-size: 16px; }
.data-table th { font-size: 10px; }
.data-table td { font-size: 13px; }
.admin-group-summary small,.managed-group-summary p { font-size: 12px; }
.group-disclosure-toggle b,.managed-group-summary > span:last-child b { font-size: 9px; }
.audit-entry-head span,.audit-entry-main > p { font-size: 12px; }
.audit-entry-head time,.audit-detail-chips span { font-size: 10px; }

.post-avatar {
  display: block;
  object-fit: cover;
  object-position: center;
  background: #100c15;
}

.community-character-badges {
  inset: 0;
  max-width: none;
  display: block;
  pointer-events: none;
}
.community-character-badges > .community-role-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  max-width: calc(100% - 20px);
  padding: 6px 8px;
  font-size: 8px;
}
.community-group-badge-list {
  position: absolute;
  right: 10px;
  bottom: 10px;
  max-width: min(72%,210px);
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 5px;
}
.community-group-badge-list > span {
  max-width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--group-color) 58%,transparent);
  color: var(--group-color);
  background: rgba(8,6,12,.9);
  box-shadow: 0 0 15px color-mix(in srgb,var(--group-color) 12%,transparent);
  font: 800 9px var(--font-display);
}
.community-group-badge-list > span b {
  min-width: 0;
  overflow: hidden;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.community-group-badge-list .community-group-logo { width: 20px; height: 20px; flex: 0 0 20px; }
.community-character-body > small { font-size: 9px; }
.community-character-body h2 { font-size: 19px; }
.community-character-body > p { min-height: 42px; font-size: 12px; }
.community-character-body dl { grid-template-columns: 1fr; gap: 6px; }
.community-character-body dl div,
.community-character-body dl div:last-child {
  grid-column: auto;
  min-height: 47px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 78px minmax(0,1fr);
  align-items: center;
  gap: 10px;
}
.community-character-body dt { font-size: 8px; }
.community-character-body dd {
  margin: 0;
  overflow: visible;
  font-size: 11px;
  text-align: left;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .nav-link { font-size: 10px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .community-group-badge-list { max-width: 78%; }
  .community-character-body dl div,
  .community-character-body dl div:last-child { grid-template-columns: 72px minmax(0,1fr); }
}

/* STRATO 0.1.16.2: zweite, ausgewogene Lesbarkeitsstufe. */
body { font-size: 19px; line-height: 1.58; }

.small-kicker,.eyebrow { font-size: 12px; }
.nav-link { font-size: 13px; }
.button,.button-large { font-size: 12px; }
.member-pill > span:last-child small { font-size: 9px; }
.member-pill > span:last-child strong { font-size: 13px; }

.panel-heading { font-size: 11px; }
.panel-count { font-size: 10px; }
.category-copy small,.stream-copy small,.new-arrival-card b,.online-overview-list b { font-size: 12px; }
.category-copy strong,.stream-copy strong,.new-arrival-card strong { font-size: 14px; }
.thread-meta { font-size: 12px; }
.thread-label { font-size: 9px; }
.thread-main > p { font-size: 14px; }
.thread-author { font-size: 11px; }
.thread-numbers span { font-size: 8px; }

.calendar-weekdays { font-size: 10px; }
.calendar-grid span,.calendar-grid button { font-size: 12px; }
.calendar-empty,.realtime-clock span,.rockpott-spotify-card small,.new-arrival-card small { font-size: 10px; }
.calendar-event strong { font-size: 14px; }
.calendar-event small { font-size: 11px; }
.online-overview-list strong { font-size: 15px; }
.footer-rank-legend > strong,.footer-rank-legend b,.footer-links { font-size: 10px; }
.footer-bottom { font-size: 11px; }

.role-badge,.visibility-badge,.status-badge { font-size: 10px; }
.form-stack label,.profile-form label,.new-character-card label,.login-modal form > label { font-size: 11px; }
input,textarea,select { font-size: 16px; }
.form-help,.post-meta { font-size: 13px; }
.login-notice,.register-hint,.form-row { font-size: 13px; }

.post-author strong { font-size: 15px; }
.post-author small { font-size: 11px; }
.post-body p,.post-content p,.reply-card > div > p:not(.reply-date) { font-size: 18px; line-height: 1.72; }
.post-marker,.reply-date { font-size: 10px; }
.post-edit-note { font-size: 11px; }

.data-table th { font-size: 11px; }
.data-table td { font-size: 14px; }
.admin-group-summary small,.managed-group-summary p { font-size: 13px; }
.group-disclosure-toggle b,.managed-group-summary > span:last-child b { font-size: 10px; }
.audit-entry-head span,.audit-entry-main > p { font-size: 13px; }
.audit-entry-head time,.audit-detail-chips span { font-size: 11px; }
.audit-technical summary,.audit-technical code { font-size: 10px; }

.profile-identity > p:last-child,.messages-page-head > div:first-child > p:last-child { font-size: 14px; }
.profile-about-card > p:not(.small-kicker) { font-size: 16px; }
.profile-contact-grid strong { font-size: 14px; }
.profile-character-card dt,.profile-character-card dd { font-size: 12px; }
.profile-character-card > p { font-size: 13px; }
.profile-notice,.message-notice { font-size: 13px; }
.avatar-auto-note { font-size: 12px; }
.character-card-grid article span { font-size: 11px; }
.new-character-card > p:not(.small-kicker) { font-size: 13px; }
.profile-check small { font-size: 11px; }
.conversation-list > button p { font-size: 11px; }

.community-character-badges > .community-role-badge { font-size: 9px; }
.community-group-badge-list > span { font-size: 10px; }
.community-character-body > small { font-size: 10px; }
.community-character-body h2 { font-size: 20px; }
.community-character-body > p { font-size: 14px; }
.community-character-body dt { font-size: 10px; }
.community-character-body dd { font-size: 12px; }

@media (max-width: 1100px) {
  .nav-link { font-size: 11px; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  input,textarea,select { font-size: 16px; }
  .post-body p,.post-content p,.reply-card > div > p:not(.reply-date) { font-size: 17px; }
}

/* STRATO 0.1.17: Community-Einstieg, Bürgerbewerbung und NDA-geschütztes Team-Onboarding. */
.quick-links .quick-community-link {
  min-height: 55px;
  margin-bottom: 5px;
  border: 1px solid rgba(240,68,255,.32);
  background: linear-gradient(110deg,rgba(240,68,255,.12),rgba(140,92,255,.05));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
}
.quick-links .quick-community-link b { color: var(--pink); }
.landing-project-stack > .community-entry-card {
  border-color: rgba(240,68,255,.42);
  background: linear-gradient(145deg,rgba(240,68,255,.12),rgba(140,92,255,.055) 64%,rgba(255,255,255,.012));
  box-shadow: inset 3px 0 var(--pink),0 0 24px rgba(240,68,255,.08);
}
.community-join-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 330px;
  gap: 22px;
  align-items: start;
}
.community-application-stack,.community-join-sidebar { display: grid; gap: 18px; }
.application-section { position: relative; overflow: hidden; }
.application-section::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(var(--pink),var(--violet));
  box-shadow: 0 0 18px rgba(240,68,255,.5);
}
.application-section-head { margin-bottom: 24px; display: flex; align-items: center; gap: 15px; }
.application-section-head > span {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240,68,255,.42);
  color: var(--pink);
  background: rgba(240,68,255,.06);
  font: 800 12px var(--font-display);
}
.application-section-head h2 { margin: 2px 0 0; font: 800 24px/1.2 var(--font-display); }
.community-application-disclosure { --group-color: var(--pink); }
.community-application-summary { min-height: 106px; padding: 22px 24px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 18px; list-style: none; cursor: pointer; background: linear-gradient(110deg,rgba(240,68,255,.055),transparent 52%); transition: background .2s ease; }
.community-application-summary::-webkit-details-marker { display: none; }
.community-application-summary:hover { background: linear-gradient(110deg,rgba(240,68,255,.1),rgba(255,255,255,.012) 58%); }
.community-application-summary:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }
.community-application-summary .application-section-head { min-width: 0; margin: 0; }
.community-application-summary .application-section-head > div { min-width: 0; }
.community-application-summary .application-section-head small { display: block; margin-top: 7px; color: #8f8593; font-size: 13px; }
.community-application-summary .group-disclosure-toggle b { font-size: 10px; }
.community-application-disclosure[open] > .community-application-summary { border-bottom: 1px solid rgba(240,68,255,.18); }
.community-application-disclosure[open] > .community-application-summary .group-disclosure-toggle i { background: rgba(240,68,255,.08); transform: rotate(45deg); }
.community-application-body { padding: 24px; animation: group-disclosure-open .2s ease both; }
.community-application-body > :first-child { margin-top: 0; }
.application-character-line { padding: 13px; display: flex; align-items: center; gap: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.015); }
.application-character-line .avatar { width: 54px; height: 54px; flex: 0 0 54px; }
.application-character-line div { display: flex; flex-direction: column; }
.application-character-line small { color: var(--pink); font: 800 9px var(--font-display); letter-spacing: .1em; }
.application-character-line strong { margin-top: 4px; font: 800 16px var(--font-display); }
.community-application-form { margin-top: 21px; }
.community-application-form textarea { min-height: 120px; }
.community-application-form > .button { justify-self: start; min-width: 240px; margin-top: 5px; }
.application-status-card {
  padding: 18px;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  gap: 14px;
  align-items: start;
  border: 1px solid rgba(255,181,69,.32);
  background: rgba(255,181,69,.045);
}
.application-status-card > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid currentColor; color: var(--amber); font: 800 11px var(--font-display); }
.application-status-card > div { min-width: 0; }
.application-status-card strong { font: 800 16px var(--font-display); }
.application-status-card p { margin: 6px 0; color: #aaa0ae; font-size: 14px; }
.application-status-card small { color: #756d79; font-size: 11px; }
.application-status-card.is-complete { border-color: rgba(71,221,157,.35); background: rgba(71,221,157,.05); }
.application-status-card.is-complete > span { color: var(--green); }
.applicant-message,.internal-note,.nda-notice,.application-private-warning { margin-top: 15px; padding: 15px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }
.applicant-message { border-color: rgba(140,92,255,.35); background: rgba(140,92,255,.055); }
.applicant-message small,.internal-note small { color: var(--violet); font: 800 9px var(--font-display); letter-spacing: .1em; }
.applicant-message p,.internal-note p,.nda-notice p { margin: 7px 0 0; color: #b7adba; font-size: 14px; line-height: 1.6; }
.nda-notice { border-color: rgba(255,181,69,.4); background: rgba(255,181,69,.055); }
.nda-notice strong { color: var(--amber); font: 800 14px var(--font-display); }
.nda-checkbox { padding: 15px; border: 1px solid rgba(255,181,69,.35); background: rgba(255,181,69,.045); }
.application-steps { margin: 18px 0 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.application-steps li { min-height: 77px; padding: 12px 0; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; border-bottom: 1px solid var(--line); }
.application-steps li:last-child { border-bottom: 0; }
.application-steps li > b { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(240,68,255,.34); color: var(--pink); font: 800 9px var(--font-display); }
.application-steps li > span { display: flex; flex-direction: column; }
.application-steps strong { font: 800 12px var(--font-display); }
.application-steps small { margin-top: 5px; color: #8f8593; font-size: 12px; line-height: 1.45; }
.status-badge.discord_invited { --badge: #8c5cff; }
.status-badge.conversation_done { --badge: #61b8ff; }
.status-badge.nda_pending { --badge: #ffb545; }
.application-admin-list { gap: 16px; }
.application-admin-card { min-width: 0; overflow: hidden; }
.application-admin-card .section-head { min-width: 0; margin-bottom: 18px; }
.application-answers { min-width: 0; max-width: 100%; padding: 18px; overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.012); }
.application-answers p,.application-answers li,.application-answers code { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.application-answers h3 { margin: 22px 0 8px; color: var(--pink); font: 800 12px var(--font-display); text-transform: uppercase; }
.application-answers h3:first-child { margin-top: 0; }
.application-answers p { font-size: 15px; }
.application-decision-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.application-private-warning { margin: 0 0 15px; border-color: rgba(255,181,69,.3); color: var(--amber); font-size: 12px; }
.team-area-badge { max-width: 270px; padding: 8px 11px; border: 1px solid rgba(140,92,255,.38); color: #c8b9ff; background: rgba(140,92,255,.07); font: 800 9px var(--font-display); text-align: right; overflow-wrap: anywhere; }
.team-process-meta { margin-top: 15px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.team-process-meta > span { min-height: 70px; padding: 12px; display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(255,255,255,.014); }
.team-process-meta small { color: #756d79; font: 800 8px var(--font-display); }
.team-process-meta strong { margin-top: 7px; font-size: 12px; }

@media (max-width: 980px) {
  .community-join-layout { grid-template-columns: 1fr; }
  .community-join-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .community-join-sidebar .sidebar-card:first-child { grid-column: 1/-1; }
}
@media (max-width: 640px) {
  .community-join-sidebar,.team-process-meta { grid-template-columns: 1fr; }
  .community-join-sidebar .sidebar-card:first-child { grid-column: auto; }
  .application-section-head { align-items: flex-start; }
  .application-section-head h2 { font-size: 20px; }
  .community-application-summary { min-height: 88px; padding: 15px; gap: 10px; }
  .community-application-summary .application-section-head { align-items: center; }
  .community-application-summary .application-section-head > span { width: 40px; height: 40px; flex-basis: 40px; }
  .community-application-summary .group-disclosure-toggle b { display: none; }
  .community-application-body { padding: 16px 15px 18px; }
  .community-application-form > .button { width: 100%; min-width: 0; }
  .application-status-card { grid-template-columns: 38px minmax(0,1fr); padding: 14px; }
  .application-status-card > span { width: 34px; height: 34px; }
  .team-application-admin-card .section-head { align-items: flex-start; flex-direction: column; }
  .team-area-badge { max-width: 100%; text-align: left; }
}

/* STRATO 0.1.18: geschützte elektronische NDA-Unterzeichnung. */
.nda-signing-card {
  margin-top: 18px;
  padding: 20px;
  border: 1px solid rgba(240,68,255,.34);
  background: linear-gradient(145deg,rgba(240,68,255,.055),rgba(140,92,255,.025) 58%,rgba(255,255,255,.012));
  box-shadow: inset 3px 0 var(--pink);
}
.nda-signing-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.nda-signing-head h3 { margin: 3px 0 8px; font: 800 22px/1.2 var(--font-display); }
.nda-signing-head p:last-child { max-width: 720px; margin: 0; color: #aaa0ae; font-size: 14px; line-height: 1.6; }
.nda-signing-head > span { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid rgba(240,68,255,.42); color: var(--pink); font: 800 11px var(--font-display); }
.nda-document-frame { margin-top: 18px; padding: 10px; border: 1px solid var(--line); background: rgba(0,0,0,.25); }
.nda-document-frame iframe { display: block; width: 100%; min-height: 620px; border: 0; background: #fff; }
.nda-document-frame .button { margin-top: 10px; }
.nda-signing-form { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.signature-field { display: grid; gap: 10px; }
.signature-field > div:first-child { display: flex; flex-direction: column; }
.signature-field > div:first-child strong { font: 800 12px var(--font-display); }
.signature-field > div:first-child small { margin-top: 4px; color: #8f8593; font-size: 12px; }
.signature-field canvas { width: 100%; height: 190px; display: block; border: 2px dashed #786f7c; border-radius: 2px; background: #fff; cursor: crosshair; touch-action: none; }
.signature-field canvas:focus { outline: 3px solid rgba(240,68,255,.25); border-color: var(--pink); }
.signature-field canvas.has-signature { border-style: solid; border-color: rgba(71,221,157,.7); }
.signature-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signature-actions span { color: #8f8593; font-size: 12px; }
.signature-field canvas.has-signature + .signature-actions span { color: var(--green); }
.nda-signed-card { margin-top: 16px; padding: 18px; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 14px; border: 1px solid rgba(71,221,157,.4); background: rgba(71,221,157,.055); }
.nda-signed-card > span { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--green); color: var(--green); font: 800 13px var(--font-display); }
.nda-signed-card strong { font: 800 15px var(--font-display); }
.nda-signed-card p { margin: 6px 0 13px; color: #aaa0ae; font-size: 14px; line-height: 1.55; }
.nda-signed-card .button { justify-self: start; }
.nda-signed-card.is-waiting { border-color: rgba(255,181,69,.38); background: rgba(255,181,69,.05); }
.nda-signed-card.is-waiting > span { border-color: var(--amber); color: var(--amber); }
.nda-notice .button { margin-top: 10px; }
.nda-page-layout { display: grid; grid-template-columns: minmax(0,1fr) 286px; gap: 22px; align-items: start; }
.nda-page-layout > main { min-width: 0; }
.nda-document-panel .section-head { margin-bottom: 0; }
.nda-progress-grid { margin: 20px 0 4px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.nda-signer-status { min-height: 108px; padding: 14px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.014); }
.nda-signer-status > span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #655d69; color: #8f8593; font: 800 10px var(--font-display); }
.nda-signer-status div { min-width: 0; display: flex; flex-direction: column; }
.nda-signer-status small { color: #756d79; font: 800 8px var(--font-display); }
.nda-signer-status strong { margin-top: 5px; font: 800 11px var(--font-display); overflow-wrap: anywhere; }
.nda-signer-status p { margin: 7px 0 0; color: #8f8593; font-size: 11px; line-height: 1.4; }
.nda-signer-status.is-signed { border-color: rgba(71,221,157,.38); background: rgba(71,221,157,.045); }
.nda-signer-status.is-signed > span { border-color: var(--green); color: var(--green); }
.nda-signer-status.is-open:not(.is-signed) { border-color: rgba(255,181,69,.32); }
.nda-signer-status.is-locked { opacity: .64; }
.nda-applicant-private { margin-top: 18px; padding: 15px; display: flex; flex-direction: column; border: 1px solid rgba(255,181,69,.3); background: rgba(255,181,69,.04); }
.nda-applicant-private small { color: var(--amber); font: 800 9px var(--font-display); }
.nda-applicant-private strong { margin-top: 7px; font: 800 14px var(--font-display); }
.nda-applicant-private p { margin: 7px 0 0; color: #aaa0ae; font-size: 13px; line-height: 1.55; }
.nda-admin-signal { margin-top: 14px; padding: 15px; display: flex; justify-content: space-between; align-items: center; gap: 14px; border: 1px solid rgba(71,221,157,.38); background: rgba(71,221,157,.05); }
.nda-admin-signal > div { display: flex; flex-direction: column; gap: 4px; }
.nda-admin-signal strong { color: var(--green); font: 800 12px var(--font-display); }
.nda-admin-signal small { color: #8f8593; font-size: 11px; }
.nda-admin-signal.is-waiting { border-color: rgba(255,181,69,.36); background: rgba(255,181,69,.045); }
.nda-admin-signal.is-waiting strong { color: var(--amber); }

@media (max-width: 980px) {
  .nda-page-layout { grid-template-columns: 1fr; }
  .nda-page-layout > .community-join-sidebar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .nda-page-layout > .community-join-sidebar .sidebar-card:first-child { grid-column: 1/-1; }
}

@media (max-width: 640px) {
  .nda-signing-card { padding: 15px; }
  .nda-signing-head h3 { font-size: 19px; }
  .nda-document-frame iframe { min-height: 480px; }
  .signature-field canvas { height: 150px; }
  .signature-actions,.nda-admin-signal { align-items: stretch; flex-direction: column; }
  .signature-actions .button,.nda-admin-signal .button { width: 100%; }
  .nda-signed-card { grid-template-columns: 36px minmax(0,1fr); padding: 14px; }
  .nda-signed-card > span { width: 34px; height: 34px; }
  .nda-progress-grid { grid-template-columns: 1fr; }
  .nda-page-layout > .community-join-sidebar { grid-template-columns: 1fr; }
  .nda-page-layout > .community-join-sidebar .sidebar-card:first-child { grid-column: auto; }
}