@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #071018;
  --panel: #0c1822;
  --panel-raised: #10212d;
  --line: #1c3442;
  --muted: #90a2ad;
  --paper: #f1f7fa;
  --cyan: #12b8f2;
  --cyan-bright: #41d1ff;
  --cyan-dim: #07364a;
  --gold: #e7bf72;
  --danger: #ff827c;
  --radius: 14px;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  background: var(--ink);
  color: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--cyan-bright); outline-offset: 3px; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topline { height: 34px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 10px; background: #03090e; border-bottom: 1px solid #14222c; color: #bdd0d9; font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.topline a { margin-left: auto; color: var(--cyan-bright); letter-spacing: .03em; }
.topline-note { color: #647985; letter-spacing: .04em; font-weight: 500; }
.pulse { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 11px var(--cyan); }
.site-header { height: 82px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 32px; border-bottom: 1px solid var(--line); background: rgba(7,16,24,.94); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.brand-mark { height: 55px; width: 55px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(18,184,242,.2)); }
.brand-copy { display: grid; gap: 0; line-height: 1; }
.brand-copy strong { font: 800 28px/1 "Barlow Condensed", sans-serif; letter-spacing: .04em; }
.brand-copy small { margin-top: 5px; color: var(--muted); font-size: 8px; letter-spacing: .16em; font-weight: 700; }
.main-nav { display: flex; align-items: center; gap: 22px; height: 100%; }
.main-nav > a, .nav-dropdown > summary { height: 100%; display: flex; align-items: center; gap: 9px; color: #9badb7; font-size: 12px; font-weight: 600; position: relative; transition: color .18s ease; cursor: pointer; list-style: none; }
.main-nav > a:hover, .main-nav > a.active, .nav-dropdown > summary:hover, .nav-dropdown > summary.active { color: var(--paper); }
.main-nav > a.active::after, .nav-dropdown > summary.active::after { content: ""; position: absolute; height: 2px; left: 0; right: 0; bottom: 0; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.nav-dropdown { position: relative; height: 100%; }
.nav-dropdown > summary::-webkit-details-marker, .account-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown > summary::marker, .account-dropdown > summary::marker { content: ""; }
.nav-dropdown > summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid #8097a3; border-bottom: 1.5px solid #8097a3; transform: rotate(45deg); transition: transform .16s ease, border-color .16s ease; }
.nav-dropdown[open] > summary::after { margin-top: 3px; transform: rotate(225deg); border-color: var(--cyan-bright); }
.dropdown-panel { position: absolute; z-index: 20; top: calc(100% + 7px); left: -16px; display: none; min-width: 210px; padding: 7px; border: 1px solid #25404e; border-radius: 10px; background: linear-gradient(145deg, #10212b, #0b151d); box-shadow: 0 18px 42px #0009; }
.dropdown-panel::before { content: ""; position: absolute; left: 20px; top: -5px; width: 8px; height: 8px; border-left: 1px solid #25404e; border-top: 1px solid #25404e; background: #10212b; transform: rotate(45deg); }
.dropdown-heading { position: relative; padding: 8px 10px 7px; color: #708692; font-size: 8px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.nav-dropdown[open] .dropdown-panel, .account-dropdown[open] .dropdown-panel { display: grid; }
.dropdown-panel a { position: relative; display: flex; align-items: center; min-height: 37px; padding: 8px 10px; border-radius: 6px; color: #a9bbc4; font-size: 11px; font-weight: 500; white-space: nowrap; transition: background .14s ease, color .14s ease, padding .14s ease; }
.dropdown-panel a:hover, .dropdown-panel a.active { padding-left: 14px; background: #142b37; color: var(--cyan-bright); }
.header-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.icon-link { font-size: 27px; color: #a6bbc5; line-height: 1; }
.notification-menu { position: relative; }
.notification-menu > summary { position: relative; display: grid; width: 30px; height: 34px; place-items: center; cursor: pointer; list-style: none; color: #a6bbc5; }
.notification-menu > summary::-webkit-details-marker { display: none; }
.notification-menu > summary::marker { content: ""; }
.notification-menu > summary svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notification-menu > summary:hover, .notification-menu[open] > summary { color: var(--cyan-bright); }
.notification-count { position: absolute; top: -1px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border: 1px solid #071018; border-radius: 10px; background: #e14848; color: white; font-size: 8px; font-weight: 800; line-height: 1; }
.notification-count[hidden], .notification-menu[hidden] { display: none; }
.notifications-panel { position: absolute; z-index: 20; top: calc(100% + 12px); right: -28px; width: min(330px, calc(100vw - 24px)); max-height: 370px; overflow: auto; padding: 7px; border: 1px solid #25404e; border-radius: 10px; background: linear-gradient(145deg, #10212b, #0b151d); box-shadow: 0 18px 42px #0009; }
.notifications-panel-heading { padding: 9px 10px; color: #708692; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.notification-item { display: grid; gap: 5px; padding: 10px; border-radius: 6px; color: #a9bbc4; font-size: 10px; }
.notification-item:hover, .notification-item.unread { background: #142b37; color: var(--paper); }
.notification-item time { color: #708692; font-size: 8px; }
.notification-ge { grid-template-columns: 32px minmax(0, 1fr) 58px; align-items: center; gap: 9px; }
.notification-ge-icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid #25404e; border-radius: 6px; background: #0a1821; color: var(--cyan-bright); font-weight: 800; }
.notification-ge-icon-image { width: 26px; height: 26px; object-fit: contain; }
.notification-ge-copy { min-width: 0; display: grid; gap: 4px; }
.notification-ge-copy > strong { color: var(--cyan-bright); font-size: 9px; }
.notification-ge-copy > span { overflow-wrap: anywhere; }
.notification-ge-copy > small { color: #d1dfe5; font-size: 8px; }
.notification-ge-thumbnail { width: 58px; height: 44px; object-fit: contain; border: 1px solid #25404e; border-radius: 5px; background: #07131b; }
.account-dropdown { position: relative; }
.account-trigger { display: flex; align-items: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 5px 7px; background: transparent; color: var(--paper); cursor: pointer; font-size: 11px; font-weight: 700; max-width: 190px; transition: background .14s ease, border-color .14s ease; }
.account-trigger:hover, .account-dropdown[open] > .account-trigger { border-color: #263d49; background: #10202a; }
.account-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-trigger > img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.account-dropdown .dropdown-panel { left: auto; right: 0; min-width: 180px; }
.account-dropdown .dropdown-panel::before { left: auto; right: 17px; }
.dropdown-panel .dropdown-signout { margin-top: 5px; border-top: 1px solid #203541; border-radius: 0 0 6px 6px; padding-top: 10px; color: #b6a2a2; }
.dropdown-panel .dropdown-signout:hover { color: #ffaaa5; background: #291b20; }
.button { border: 1px solid transparent; border-radius: 6px; padding: 11px 16px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; gap: 8px; font-weight: 700; font-size: 12px; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--cyan); color: #00111a; }
.button-primary:hover { background: var(--cyan-bright); box-shadow: 0 6px 22px rgba(18,184,242,.2); }
.button-outline { border-color: #315366; color: var(--paper); background: transparent; }
.button-outline:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.button-small { padding: 9px 12px; font-size: 11px; }
.button-quiet { color: #a8bac3; padding: 8px 10px; background: transparent; border-color: transparent; }
.button-danger { color: #ffaaa5; border-color: #673b3b; background: #211619; }
.mobile-menu-button, .mobile-nav { display: none; }
main { flex: 1; width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 72px; }
.hero { min-height: 344px; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: 30px; overflow: hidden; position: relative; padding: 38px 48px; border: 1px solid #17415a; border-radius: 16px; background: radial-gradient(ellipse at 78% 48%, rgba(0,174,239,.18), transparent 42%), linear-gradient(115deg, #0b1b27 0%, #08141d 65%, #0b202c 100%); }
.hero::after { content: ""; position: absolute; inset: 0; opacity: .1; pointer-events: none; background-image: linear-gradient(135deg, transparent 46%, #6bdcff 46.2%, transparent 46.5%), linear-gradient(45deg, transparent 76%, #6bdcff 76.2%, transparent 76.5%); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent 35%, black); }
.hero-copy { z-index: 1; position: relative; max-width: 650px; }
.eyebrow { color: var(--cyan-bright); text-transform: uppercase; letter-spacing: .2em; font-size: 10px; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Barlow Condensed", "Segoe UI", sans-serif; text-transform: uppercase; }
.hero h1 { font-size: clamp(43px, 6vw, 72px); line-height: .94; letter-spacing: .015em; margin: 14px 0 16px; }
.hero h1 span { color: var(--cyan-bright); }
.hero-copy > p { max-width: 460px; color: #a5b8c2; font-size: 14px; line-height: 1.7; }
.hero-actions { display: flex; gap: 10px; margin-top: 24px; }
.hero-emblem { justify-self: center; width: min(250px, 100%); height: 260px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 8px 35px rgba(0,174,239,.25)); }
.hero-stats { display: flex; gap: 0; margin-top: 32px; border-top: 1px solid var(--line); padding-top: 19px; }
.hero-stats#home-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hero-stat { padding: 0 24px; border-left: 1px solid var(--line); }
.hero-stat:first-child { border-left: 0; padding-left: 0; }
.hero-stat strong { display: block; color: var(--paper); font: 700 23px/1 "Barlow Condensed", sans-serif; }
.hero-stat span { display: block; color: var(--muted); font-size: 9px; margin-top: 5px; text-transform: uppercase; letter-spacing: .1em; }
.clan-feed-section { margin-top: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(110deg, #0b1922, #0a141c 55%, #0b1a24); }
.clan-feed-section .section-head { margin: 0; padding: 17px 18px 13px; align-items: center; }
.clan-feed-section .section-head h2 { font-size: 24px; }
.clan-feed-caption { color: var(--muted); font-size: 10px; }
.clan-feed-track-wrap { overflow: hidden; padding: 0 0 14px; }
.clan-feed-track { display: flex; width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; cursor: grab; touch-action: pan-x; }
.clan-feed-track::-webkit-scrollbar { display: none; }
.clan-feed-track:active { cursor: grabbing; }
.clan-feed-set { display: flex; flex: 0 0 auto; gap: 9px; padding: 0 9px 0 0; }
.clan-feed-card { display: flex; align-items: center; gap: 10px; width: 265px; min-height: 66px; padding: 9px 11px; border: 1px solid #1b3542; border-radius: 8px; background: #0d1d27; transition: border-color .16s ease, background .16s ease; }
.clan-feed-card:hover { border-color: #26708c; background: #102631; }
.clan-feed-model { position: relative; display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: radial-gradient(circle, #164356, #0a171f 72%); overflow: hidden; }
.clan-feed-model img { grid-area: 1 / 1; width: 38px; height: 38px; object-fit: contain; }
.clan-feed-avatar { border-radius: 50%; object-fit: cover !important; }
.clan-feed-render { position: relative; z-index: 1; filter: drop-shadow(0 2px 2px #0009); }
.clan-feed-copy { display: grid; min-width: 0; gap: 5px; }
.clan-feed-copy strong { overflow: hidden; color: #e7f3f7; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.clan-feed-copy > span { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.game-emoji { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.2em; object-fit: contain; }
.game-currency-icon { width: 20px; height: 20px; vertical-align: -5px; object-fit: contain; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin: 36px 0 16px; }
.section-head h2 { font-size: 28px; line-height: 1; margin: 6px 0 0; letter-spacing: .03em; }
.section-head p { color: var(--muted); font-size: 12px; margin: 7px 0 0; }
.text-link { color: var(--cyan-bright); font-size: 11px; font-weight: 700; white-space: nowrap; }
.text-link:hover { color: white; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .75fr); gap: 18px; }
.stack { display: grid; gap: 16px; align-content: start; }
.panel, .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.panel { padding: 20px; }
.news-list { display: grid; gap: 10px; }
.news-card { padding: 16px 17px; border: 1px solid #193342; border-radius: 9px; background: linear-gradient(110deg, #0e202c, #0b1720); }
.news-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.news-author { color: var(--cyan-bright); font-weight: 700; }
.news-card h3 { font-size: 20px; letter-spacing: .02em; margin: 10px 0 6px; }
.news-content { font-size: 12px; color: #b5c3cb; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; max-height: 140px; overflow: hidden; }
.news-card .news-content { max-height: none; overflow: visible; }
.markdown-content strong { color: #f0f8fb; }
.markdown-content blockquote { margin: 7px 0; padding: 6px 12px; border-left: 3px solid #347994; color: #9cb2bd; background: #09151d; }
.markdown-content pre { overflow-x: auto; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: #050d12; white-space: pre; }
.markdown-content code { padding: 2px 5px; border-radius: 4px; background: #07131b; color: #a8e8ff; font-family: Consolas, monospace; }
.markdown-content pre code { padding: 0; background: transparent; }
.markdown-content a { color: var(--cyan-bright); text-decoration: underline; }
.discord-emoji { width: 1.35em; height: 1.35em; vertical-align: middle; object-fit: contain; }
.discord-spoiler { color: transparent; background: #40525d; border-radius: 3px; cursor: pointer; }
.discord-spoiler:hover { color: inherit; }
.discord-timestamp { color: #8bbbd0; }
.discord-mention { padding: 1px 4px; border-radius: 3px; background: #153346; color: #a4d8ed; }
.discord-heading { color: #e8f5fb; }
.discord-subtext { color: #8298a3; }
.news-field { display: grid; gap: 4px; margin-top: 9px; padding: 10px; border-left: 2px solid var(--cyan); background: #0a1821; font-size: 11px; }
.news-field strong { color: #dce8ed; }
.news-field span { color: #a9bbc4; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.side-card { padding: 19px; background: linear-gradient(145deg, #10232e, #0b1720 72%); }
.side-card h3 { font-size: 21px; margin: 7px 0; }
.side-card p { color: var(--muted); font-size: 11px; line-height: 1.6; margin-bottom: 14px; }
.osrs-news-card { padding: 16px; background: linear-gradient(145deg, #10232e, #0b1720 72%); }
.osrs-news-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.osrs-news-heading h3 { margin: 4px 0 0; color: var(--paper); font-size: 21px; }
.osrs-news-controls { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.osrs-news-controls button { width: 25px; height: 25px; border: 1px solid #294553; border-radius: 5px; background: #07131b; color: var(--cyan-bright); font-size: 19px; line-height: 1; cursor: pointer; }
.osrs-news-controls button:hover:not(:disabled) { border-color: var(--cyan); background: #102633; }
.osrs-news-controls button:disabled { opacity: .45; cursor: default; }
.osrs-news-slider { overflow: hidden; border: 1px solid #1b3542; border-radius: 7px; background: #09151d; }
.osrs-news-item { display: grid; gap: 8px; padding: 7px; color: var(--paper); }
.osrs-news-item:hover .osrs-news-copy strong { color: var(--cyan-bright); }
.osrs-news-image { display: block; width: 100%; aspect-ratio: 16 / 8; border-radius: 4px; background: #10212c; object-fit: cover; }
.osrs-news-image-fallback { display: grid; place-items: center; color: #91b0be; font: 700 15px "Barlow Condensed", sans-serif; }
.osrs-news-copy { display: grid; gap: 5px; padding: 0 3px 3px; }
.osrs-news-copy strong { display: -webkit-box; overflow: hidden; color: #e7f3f7; font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.osrs-news-copy small { color: var(--muted); font-size: 8px; }
.osrs-news-error { display: block; padding: 10px; font-size: 9px; line-height: 1.5; }
.side-icon { font-size: 24px; color: var(--cyan-bright); }
.side-link { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 0; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--cyan-bright); }
.event-item { padding: 13px 0; border-bottom: 1px solid var(--line); }
.event-item:last-child { border-bottom: 0; padding-bottom: 0; }
.event-item strong { display: block; font: 600 17px/1.2 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.event-item span { color: var(--muted); font-size: 10px; }
.event-item .event-completed, .completed-event { color: #6f7e85; }
.completed-event { filter: grayscale(.85); opacity: .66; }
.event-status { margin-left: 10px; color: var(--cyan-bright); font: 600 10px "DM Sans", sans-serif; letter-spacing: .08em; }
.completed-event .event-status { color: #87959b; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.feature-card { padding: 17px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(145deg, #0c1c27, #0b151d); border: 1px solid var(--line); border-radius: 10px; transition: border-color .2s, transform .2s; }
.feature-card:hover { border-color: #24708e; transform: translateY(-2px); }
.feature-card .feature-icon { color: var(--cyan); font-size: 20px; }
.feature-card strong { display: block; font: 600 19px/1 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.feature-card span { display: block; color: var(--muted); font-size: 10px; margin-top: 6px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 8px 0 24px; }
.page-heading h1 { font-size: clamp(38px, 5vw, 56px); margin: 7px 0 5px; line-height: .95; }
.page-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.search-box { display: flex; align-items: center; gap: 10px; width: min(360px, 100%); padding: 0 13px; border: 1px solid #294553; background: #0b1720; border-radius: 7px; }
.search-box span { color: var(--cyan); font-size: 20px; }
.search-box input { width: 100%; height: 42px; border: 0; outline: 0; background: transparent; color: var(--paper); font-size: 12px; }
.table-wrap { overflow: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
table { border-collapse: collapse; width: 100%; min-width: 700px; }
th { padding: 13px 16px; background: #10212c; color: #8299a5; font-size: 9px; text-transform: uppercase; letter-spacing: .12em; text-align: left; }
td { padding: 13px 16px; border-top: 1px solid #162d3a; color: #dce7ec; font-size: 12px; }
tbody tr:hover { background: #10212c; }
.rank-cell { font: 700 19px "Barlow Condensed", sans-serif; color: #99aeb8; }
.rank-top { color: var(--gold); }
.player-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.player-cell img, .avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #173344; }
.player-rsn { color: var(--cyan-bright); font-weight: 700; }
.muted { color: var(--muted); }
.badge { padding: 4px 7px; border-radius: 99px; color: var(--cyan-bright); border: 1px solid #25546a; background: #0b2735; font-size: 9px; font-weight: 700; }
.profile-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; padding: 24px; border-radius: 14px; border: 1px solid #1e516a; background: radial-gradient(ellipse at 90% 10%, #12394b, transparent 45%), #0d1a24; }
.profile-avatar { width: 90px; height: 90px; border-radius: 12px; border: 2px solid #1c7699; object-fit: cover; }
.profile-title h1 { font-size: 36px; margin: 0 0 4px; }
.profile-title p { margin: 0; font-size: 12px; color: var(--muted); }
.profile-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 16px 0; }
.stat-box { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.stat-box span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.stat-box strong { display: block; margin-top: 8px; font: 700 24px/1 "Barlow Condensed", sans-serif; }
.skills-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.skill { display: flex; justify-content: space-between; padding: 10px; background: #0d1b25; border: 1px solid #1a3441; border-radius: 6px; font-size: 10px; }
.skill span { color: #8ea3ae; }
.profile-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 15px 0; }
.profile-hero-card { min-height: 276px; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: 16px; padding: 18px 24px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 65%, rgba(18,184,242,.16), transparent 38%), radial-gradient(ellipse at 92% 0%, #12394b, transparent 43%), #0d1a24; }
.profile-identity { min-width: 0; display: flex; align-items: center; gap: 14px; }
.profile-identity .profile-avatar { flex: 0 0 auto; }
.profile-identity .profile-title { min-width: 0; }
.profile-identity .profile-title h1 { overflow-wrap: anywhere; }
.profile-identity .profile-meta { margin: 10px 0 0; }
.role-count { color: #8bdfff; }
.profile-hero-model { height: 245px; min-width: 0; position: relative; display: grid; place-items: center; align-self: center; }
.profile-model-glow { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(ellipse, rgba(22,150,194,.3), rgba(12,47,63,.1) 52%, transparent 72%); filter: blur(3px); }
.profile-hero-model img { z-index: 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; }
.profile-hero-model img.loaded { opacity: 1; transform: translateY(0); }
.profile-model-status { position: absolute; z-index: 2; bottom: 2px; left: 0; right: 0; color: #8ccce0; font-size: 8px; text-align: center; }
.profile-model-status.unavailable { color: #efb07b; }
.profile-hero-summary { display: grid; align-content: center; gap: 14px; }
.profile-quick-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.profile-quick-stats > span { min-width: 0; padding: 8px 10px; border: 1px solid #203c4a; border-radius: 7px; background: #091720b8; }
.profile-quick-stats small, .profile-quick-stats strong { display: block; }
.profile-quick-stats small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.profile-quick-stats strong { margin-top: 3px; overflow: hidden; font: 700 16px "Barlow Condensed", sans-serif; text-overflow: ellipsis; white-space: nowrap; }
.profile-hero-summary .button { justify-self: start; }
.profile-tabs { display: flex; gap: 5px; margin: 21px 0 13px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #09141d; scrollbar-width: thin; }
.profile-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #91a6b1; cursor: pointer; font-size: 10px; font-weight: 700; white-space: nowrap; }
.profile-tab span { color: #72bed7; font-size: 14px; }
.profile-tab:hover { color: var(--paper); background: #10222d; }
.profile-tab.active { border-color: #20516a; background: #102b39; color: var(--cyan-bright); }
.profile-tab-panel[hidden] { display: none; }
.profile-tab-panel { min-height: 170px; }
.role-pill { padding: 5px 8px; color: #c4d2d8; border: 1px solid #294553; border-radius: 5px; font-size: 9px; }
.profile-updated { margin: 0 0 15px; color: var(--muted); font-size: 9px; }
.profile-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.profile-skill-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 1px solid #1a3441; border-radius: 8px; background: linear-gradient(135deg, #0e1c26, #0a151d); }
.skill-emblem, .boss-emblem { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid #25576d; border-radius: 7px; background: #102b39; color: #8bdfff; font: 700 9px "Barlow Condensed", sans-serif; }
.skill-emblem img { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.profile-skill-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
.profile-skill-copy strong, .profile-boss-card strong { overflow: hidden; color: #e5eef2; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-skill-copy small, .profile-boss-card small { color: var(--muted); font-size: 8px; }
.profile-skill-card > b, .profile-boss-card > b { color: #d8e8ee; font: 700 16px "Barlow Condensed", sans-serif; }
.skill-progress, .collection-page i { height: 3px; display: block; overflow: hidden; border-radius: 5px; background: #1b303b; }
.skill-progress i, .collection-page u { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #0788b5, #51d7ff); }
.profile-boss-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-boss-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px; border: 1px solid #1a3441; border-radius: 8px; background: #0d1b25; }
.profile-boss-card > div { min-width: 0; flex: 1; display: grid; gap: 4px; }
.boss-emblem { color: #d6b56d; border-color: #5b4b2d; background: #282317; font-size: 15px; }
.boss-emblem img { width: 29px; height: 29px; object-fit: contain; image-rendering: pixelated; }
.boss-emblem > span[hidden] { display: none; }
.collection-overview-collection, .collection-summary { padding: 17px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(140deg, #0e1c26, #0b151d); }
.collection-overview-collection { margin-top: 16px; }
.collection-feed-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.collection-feed-heading > span { text-align: right; }
.collection-feed-heading > span #profile-icon-status { color: #82cbe4; font-size: 8px; }
.collection-feed-heading h3 { margin: 3px 0 0; font: 700 20px "Barlow Condensed", sans-serif; }
.collection-feed-heading > strong, .collection-feed-heading > span { color: #8bdfff; font-size: 10px; }
.profile-overview-collection > p { margin: -5px 0 12px; color: var(--muted); font-size: 10px; }
.collection-overview-items { display: flex; gap: 7px; overflow-x: auto; }
.collection-overview-item { width: 48px; height: 48px; flex: 0 0 auto; position: relative; display: grid; place-items: center; border: 1px solid #294756; border-radius: 7px; background: #10212b; }
.collection-overview-item img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.collection-overview-item > span { position: absolute; z-index: 1; max-width: 100%; overflow: hidden; padding: 2px 3px; inset: auto 0 0; background: #061018dd; color: #b8c9d1; font-size: 6px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.collection-completion { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #214554; border-radius: 8px; background: #0b202a; }
.collection-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #12394a; color: #71d9ff; font-size: 18px; }
.collection-completion > div { flex: 1; display: grid; gap: 4px; }
.collection-completion small { color: var(--muted); font-size: 8px; text-transform: uppercase; letter-spacing: .09em; }
.collection-completion strong { font: 700 21px "Barlow Condensed", sans-serif; }
.collection-completion strong span { color: var(--muted); font: 500 12px "DM Sans", sans-serif; }
.collection-completion > b { color: #8bdfff; font: 700 18px "Barlow Condensed", sans-serif; }
.collection-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 19px; }
.collection-page { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; padding: 9px; border: 1px solid #1a3441; border-radius: 6px; background: #0a151d; }
.collection-page span { overflow: hidden; color: #cad8de; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.collection-page b { color: #8fa5af; font-size: 8px; }
.collection-page i { grid-column: 1 / -1; }
.collection-page u { background: #27b9eb; }
.collection-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.collection-item { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 7px; border: 1px solid #1a3441; border-radius: 7px; background: #0a151d; }
.collection-item-icon { width: 38px; height: 38px; flex: 0 0 auto; position: relative; display: grid; place-items: center; border: 1px solid #294756; border-radius: 6px; background: #10212b; color: #8bdfff; font: 700 13px "Barlow Condensed", sans-serif; }
.collection-item-icon img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.collection-item-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.collection-item-copy strong { overflow: hidden; color: #e1ebef; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.collection-item-copy small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.collection-item > b { color: #8bdfff; font: 700 12px "Barlow Condensed", sans-serif; }
.collection-external { display: inline-flex; margin-top: 14px; font-size: 10px; }
.profile-link-notice { margin: 14px 0; }
.profile-role-list { display: flex; flex-wrap: wrap; gap: 6px; }
.profile-activity-feed { display: grid; gap: 7px; }
.profile-activity-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 11px; border: 1px solid #1a3441; border-radius: 8px; background: #0d1b25; }
.activity-emblem { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; overflow: hidden; border: 1px solid #27516a; border-radius: 7px; background: #102a38; color: #82d9f7; font-size: 14px; }
.activity-emblem img { display: block; width: 20px; height: 20px; max-width: 20px; max-height: 20px; object-fit: contain; image-rendering: pixelated; }
.activity-emblem img[hidden], .activity-emblem > span[hidden] { display: none; }
.profile-activity-copy { min-width: 0; flex: 1; display: grid; gap: 4px; }
.profile-activity-copy strong { overflow: hidden; color: #e1ebef; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.profile-activity-copy small, .profile-activity-card time { color: var(--muted); font-size: 8px; }
.profile-activity-card time { flex: 0 0 auto; }
.notice { padding: 15px 17px; border: 1px solid #675635; background: #251f14; color: #e5cf9c; border-radius: 8px; font-size: 11px; line-height: 1.6; }
.notice.info { border-color: #235167; background: #0b2633; color: #a9dcec; }
.content-list { display: grid; gap: 12px; }
.forum-card { padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.forum-card h3 { font-size: 22px; margin: 8px 0; }
.forum-card p { color: #b5c5cd; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.7; margin-bottom: 10px; }
.forum-footer { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 10px; }
.forum-footer img { width: 23px; height: 23px; border-radius: 50%; }
.tag { border: 1px solid #31576a; color: #a9d9e8; background: #102d3b; padding: 3px 7px; border-radius: 4px; }
.form-card { max-width: 720px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.field { display: grid; gap: 7px; margin: 0 0 15px; }
.field label { color: #a5b8c2; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.field input, .field select { min-width: 0; height: 42px; padding: 0 12px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.field-help { color: #80959f; font-size: 10px; line-height: 1.5; }
.action-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-message { min-height: 16px; color: var(--cyan-bright); font-size: 11px; margin-top: 10px; }
.form-message.error { color: var(--danger); }
.notification-settings { margin-top: 18px; }
.notification-preference { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 0; border-top: 1px solid var(--line); cursor: pointer; }
.notification-preference > span { display: grid; gap: 5px; }
.notification-preference strong { color: var(--paper); font-size: 12px; }
.notification-preference small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.notification-preference input { width: 18px; height: 18px; accent-color: var(--cyan); flex: 0 0 auto; }
.notification-preference input:disabled { cursor: not-allowed; opacity: .45; }
.tracker-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr auto; align-items: center; gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.tracker-row:last-child { border-bottom: 0; }
.tracker-row strong { font-size: 12px; }
.tracker-row span { color: var(--muted); font-size: 10px; }
.coffer-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.coffer-result { padding: 22px; border: 1px solid #214356; border-radius: 10px; background: radial-gradient(ellipse at 100% 0%, rgba(18,184,242,.12), transparent 45%), #091721; }
.coffer-result .profit { color: var(--cyan-bright); font: 700 36px/1 "Barlow Condensed", sans-serif; }
.coffer-result .loss { color: var(--danger); }
.coffer-item { color: var(--paper); }
.coffer-item:hover { border-color: #237597; background: #102633; }
.coffer-controls { display: grid; grid-template-columns: 1.1fr 1.3fr repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.coffer-controls .field { margin: 0; }
.coffer-controls input, .coffer-controls select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.field-label { color: #a5b8c2; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.coffer-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 15px; }
.coffer-summary .stat-box { padding: 11px 13px; }
.coffer-summary .stat-box strong { font-size: 20px; }
.coffer-table { display: grid; max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.coffer-table-head, .coffer-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; align-items: center; gap: 10px; padding: 10px; }
.coffer-table-head { position: sticky; top: 0; background: #10212c; color: #8299a5; text-transform: uppercase; font-size: 8px; letter-spacing: .08em; }
.coffer-sort-header { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-width: 0; padding: 3px; border: 0; border-radius: 4px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; text-transform: inherit; cursor: pointer; }
.coffer-sort-header:hover, .coffer-sort-header.active { color: var(--cyan-bright); background: #17313d; }
.coffer-sort-header span { flex: none; font-size: 11px; }
.coffer-row { width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); background: var(--panel); color: var(--paper); cursor: pointer; font-size: 10px; }
.coffer-row:hover { background: #102633; }
.coffer-row strong, .coffer-row small { display: block; }
.coffer-row small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.coffer-item-icon { width: 20px; height: 20px; object-fit: contain; float: left; margin: 0 7px 5px 0; }
.coffer-quantity-control { display: flex; gap: 6px; }
.coffer-quantity-control input { min-width: 0; flex: 1; }
.member-autocomplete-field { position: relative; }
.member-autocomplete-results { position: absolute; z-index: 20; top: calc(100% - 1px); left: 0; right: 0; max-height: 260px; overflow-y: auto; border: 1px solid #294553; border-radius: 0 0 7px 7px; background: #07131b; box-shadow: 0 12px 28px rgba(0, 0, 0, .35); }
.member-autocomplete-option { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 11px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--paper); text-align: left; cursor: pointer; }
.member-autocomplete-option:hover { background: #102633; }
.member-autocomplete-option small, .beta-user-row small { color: var(--muted); font-size: 9px; }
.beta-user-list { display: grid; gap: 6px; }
.beta-user-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: #09151d; }
.beta-user-row span, .beta-user-row strong, .beta-user-row small { display: block; }
.beta-user-row small { margin-top: 3px; }
.score-tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.score-tabs .active { border-color: var(--cyan); color: var(--cyan-bright); background: #0b2735; }
.application-form { max-width: 820px; }
.application-form textarea { width: 100%; min-height: 78px; resize: vertical; padding: 10px 12px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.application-form input[type="file"] { color: #a5b8c2; font-size: 11px; }
.application-example { display: block; width: min(100%, 560px); max-height: 320px; margin-top: 8px; object-fit: contain; object-position: left center; border: 1px solid var(--line); border-radius: 7px; }
.application-confirm { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; color: #a5b8c2; font-size: 11px; }
.application-confirm input { accent-color: var(--cyan); }
.coffer-note { color: var(--muted); font-size: 10px; line-height: 1.6; margin-top: 15px; }
.tracker-item-link { color: var(--paper); font-size: 12px; font-weight: 700; }
.tracker-item-link:hover { color: var(--cyan-bright); text-decoration: underline; }
.ge-search-panel { margin-bottom: 16px; }
.ge-search-panel > .field { max-width: 620px; }
.ge-search-panel input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.ge-search-results { margin-top: 15px; }
.ge-item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 9px; }
.ge-item-card { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: #09151d; transition: border-color .15s ease, background .15s ease; }
.ge-item-card:hover { border-color: #237597; background: #102633; }
.ge-item-card > span:last-child { min-width: 0; display: grid; gap: 4px; }
.ge-item-card strong { overflow: hidden; color: var(--paper); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ge-item-card small { color: var(--muted); font-size: 9px; }
.ge-item-icon { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; }
.ge-item-icon-fallback { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; color: var(--gold); }
.ge-item-overview { display: grid; grid-template-columns: 64px minmax(0, 1fr) repeat(2, minmax(140px, auto)); align-items: center; gap: 18px; margin-bottom: 15px; padding: 18px; }
.ge-item-hero-icon { width: 60px; height: 60px; object-fit: contain; }
.ge-item-overview h2, .ge-chart-heading h2 { margin: 3px 0; font: 700 24px/1.1 "Barlow Condensed", sans-serif; }
.ge-item-overview p { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.ge-live-price { display: grid; gap: 5px; }
.ge-live-price span { color: var(--muted); font-size: 9px; text-transform: uppercase; }
.ge-live-price strong { color: var(--cyan-bright); font-size: 14px; }
.ge-item-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 15px; }
.ge-item-stats .stat-box { padding: 13px; }
.ge-item-stats .stat-box strong { font-size: 17px; }
.ge-item-stats .profit { color: var(--cyan-bright); }
.ge-item-stats .loss { color: var(--danger); }
.ge-chart-panel { padding: 18px; }
.ge-chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.ge-chart-heading .field { width: 170px; margin: 0; }
.ge-chart-heading select { width: 100%; min-height: 36px; padding: 6px 9px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.ge-chart-ranges { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 5px; }
.ge-price-chart { min-height: 260px; overflow: hidden; }
.ge-chart-svg { display: block; width: 100%; min-height: 260px; }
.ge-chart-svg text { fill: #91a7b2; font: 10px "DM Sans", sans-serif; }
.ge-chart-grid { stroke: #1c3442; stroke-width: 1; }
.ge-chart-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ge-chart-high { stroke: #41d1ff; }
.ge-chart-low { stroke: #e7bf72; }
.ge-chart-legend { display: flex; gap: 18px; justify-content: center; color: var(--muted); font-size: 9px; }
.ge-chart-legend span::before { display: inline-block; width: 12px; height: 2px; margin: 0 6px 3px 0; content: ""; background: currentColor; }
.ge-chart-legend-high { color: #41d1ff; }
.ge-chart-legend-low { color: #e7bf72; }
.maintenance { min-height: 240px; display: grid; place-items: center; text-align: center; padding: 25px; }
.fun-subnav { display: flex; flex-wrap: wrap; gap: 5px; }
.fun-subnav a { padding: 7px 10px; border: 1px solid #203b49; border-radius: 5px; color: #a8bdc7; font-size: 9px; font-weight: 700; }
.fun-subnav a:hover { border-color: var(--cyan); color: var(--cyan-bright); }
.fun-subnav a span { margin-right: 4px; }
.fun-wallet { display: flex; align-items: center; gap: 14px; padding: 13px 16px; border: 1px solid #254252; border-radius: 9px; background: radial-gradient(ellipse at right, rgba(18,184,242,.13), transparent 45%), #0c1b25; }
.fun-wallet .eyebrow { margin-right: auto; }
.fun-wallet strong { font: 700 25px/1 "Barlow Condensed",sans-serif; color: var(--paper); white-space: nowrap; }
.fun-wallet strong small { font: 700 10px "DM Sans",sans-serif; color: var(--cyan-bright); }
.fun-item-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 12px; margin: 15px 0; }
.fun-item-card { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.fun-item-card .button { grid-column: 1 / -1; width: 100%; }
.fun-item-art { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid #344c58; border-radius: 9px; background: radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--item-color,#38bdf8) 27%,transparent),#0a151d 72%); }
.fun-item-art img, .fun-item-art > span { grid-area: 1 / 1; }
.fun-item-art img { z-index: 1; max-width: 64px; max-height: 64px; object-fit: contain; }
.fun-item-art > span { color: var(--item-color,var(--cyan-bright)); font: 800 30px "Barlow Condensed",sans-serif; }
.fun-item-info { min-width: 0; }
.fun-item-info h3 { margin: 5px 0; font-size: 18px; line-height: 1.05; }
.fun-item-info p { margin: 0; color: var(--gold); font-size: 11px; font-weight: 700; }
.fun-item-info small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; }
.fun-item-info .eyebrow { font-size: 8px; }
.fun-item-card button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.bank-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; }
.bank-member-select { display: grid; min-width: min(280px,50%); gap: 5px; margin: 0; }
.bank-member-select select { height: 40px; padding: 0 10px; border: 1px solid #294553; border-radius: 6px; background: #07131b; color: var(--paper); }
.bank-item-grid { grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); }
.bank-item-card { grid-template-columns: 66px minmax(0,1fr); padding: 10px; }
.bank-item-card .fun-item-art { width: 66px; height: 66px; }
.trade-compose { padding: 17px; }
.trade-offer-panes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 12px 0; }
.trade-offer-side { min-width: 0; padding: 13px; border: 1px solid #254252; border-radius: 8px; background: #091720; }
.trade-offer-side > header { display: grid; gap: 6px; min-height: 42px; padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.trade-offer-side > header strong { font-size: 11px; }
.trade-coin-field { margin: 10px 0; }
.trade-coin-field input, .trade-inventory-row input { width: 100%; min-width: 0; padding: 7px; border: 1px solid #294553; border-radius: 5px; background: #07131b; color: var(--paper); font-size: 10px; }
.trade-inventory-list { display: grid; gap: 5px; }
.trade-inventory-row { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 7px; border: 1px solid #1c3442; border-radius: 6px; background: #0c1b25; cursor: pointer; }
.trade-inventory-row > span { display: flex; align-items: center; min-width: 0; gap: 8px; font-size: 9px; font-weight: 700; }
.trade-inventory-row img { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }
.trade-inventory-row > span > span { min-width: 0; }
.trade-inventory-row small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 500; }
.trade-inventory-row input { width: 62px; }
.trade-nothing { margin: 0; color: var(--muted); font-size: 9px; }
.trade-select-prompt { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 8px; }
.trade-list-section { margin-top: 28px; }
.trade-list { display: grid; gap: 10px; }
.trade-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.trade-card-incoming { border-color: #426c7a; }
.trade-card > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trade-card h3 { margin: 4px 0 0; font-size: 18px; }
.trade-card time { color: var(--muted); font-size: 8px; }
.trade-sides { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; margin-top: 12px; padding: 10px; border: 1px solid #1c3442; border-radius: 7px; background: #09151d; }
.trade-sides > div { min-width: 0; }
.trade-sides small { display: block; margin-bottom: 6px; color: var(--muted); font-size: 8px; }
.trade-sides > div > div { display: flex; flex-wrap: wrap; gap: 5px; }
.trade-sides > div > div > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 1px solid #294553; border-radius: 4px; color: var(--paper); font-size: 9px; }
.trade-sides .trade-nothing { border: 0; padding: 0; color: var(--muted); }
.trade-arrow { color: var(--cyan-bright); font-size: 18px; }
.trade-card footer { display: flex; gap: 8px; margin-top: 10px; }
.whip-arena-layout { display: grid; grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr); gap: 16px; align-items: start; }
.whip-arena-layout .game-emoji { width: 1.45em; height: 1.45em; vertical-align: -0.3em; }
.whip-create-card { padding: 19px; }
.whip-create-card h2 { margin: 7px 0 4px; font-size: 27px; }
.whip-wallet-line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0 13px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.whip-wallet-line strong { color: var(--cyan-bright); }
.whip-create-card .form-card { padding: 15px 0 0; border: 0; background: transparent; }
.whip-house { display: grid; gap: 5px; margin-top: 16px; padding: 12px; border: 1px solid #254252; border-radius: 7px; background: #0a1821; }
.whip-house strong { font-size: 12px; }
.whip-house small { color: var(--muted); font-size: 9px; }
.whip-board .section-head { margin-top: 0; }
.whip-challenge-list { display: grid; gap: 10px; }
.whip-challenge-card { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.whip-challenge-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.whip-challenge-card > header h3 { margin: 4px 0 0; font-size: 18px; }
.whip-challenge-card > header > strong { color: var(--gold); font-size: 14px; white-space: nowrap; }
.whip-challenge-card > header > strong small { color: var(--muted); font-size: 8px; }
.whip-challenge-card footer { display: flex; gap: 8px; margin-top: 10px; }
.whip-fighters { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.whip-fighter { min-width: 0; padding: 10px; border: 1px solid #1a3441; border-radius: 7px; background: #09151d; }
.whip-fighter-head { display: flex; justify-content: space-between; gap: 8px; font-size: 9px; }
.whip-fighter-head span { color: var(--muted); white-space: nowrap; }
.whip-health { height: 7px; margin: 7px 0; overflow: hidden; border-radius: 6px; background: #3b2526; }
.whip-health i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#39c779,#b9e05e); transition: width .25s ease; }
.whip-log { height: 104px; overflow: auto; color: #a7bbc4; font-size: 8px; line-height: 1.45; }
.whip-log p { margin: 0 0 3px; }
.whip-result { margin: 11px 0 0; color: var(--cyan-bright); font-size: 11px; }
.whip-challenge-complete { border-color: #30634e; }
.whip-history { display: grid; gap: 0; padding: 0 12px; }
.whip-history > div { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 10px; }
.whip-history > div:last-child { border-bottom: 0; }
.whip-history small { color: var(--muted); text-align: right; }
.whip-outcome { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.whip-outcome.won { color: #77dfa6; }
.whip-outcome.lost { color: #d58d8d; }
.maintenance-icon { font-size: 35px; }
.maintenance h2 { font-size: 32px; margin: 12px 0 5px; }
.maintenance p { color: var(--muted); font-size: 12px; }
.donate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 760px; }
.donate-card { padding: 23px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(140deg, #10232e, #0a151d); }
.donate-card h2 { font-size: 25px; margin: 8px 0; }
.donate-card p { min-height: 34px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.empty-state, .loading-state { padding: 35px 18px; text-align: center; color: var(--muted); font-size: 12px; }
.error-state { padding: 15px; border: 1px solid #653f3f; background: #211619; color: #ffaaa5; border-radius: 8px; font-size: 11px; }
.spinner { width: 14px; height: 14px; border: 2px solid #294553; border-top-color: var(--cyan); border-radius: 50%; display: inline-block; animation: spin .8s linear infinite; vertical-align: -2px; margin-right: 8px; }
@keyframes spin { to { transform: rotate(360deg); } }
.site-footer { min-height: 68px; border-top: 1px solid var(--line); padding: 17px max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 18px; color: #718690; font-size: 10px; }
.site-footer > span { margin-left: auto; }
.site-footer a:last-child { color: #a8c9d5; }
.footer-brand { display: flex; align-items: center; gap: 7px; color: #cad8de; font-size: 9px; font-weight: 800; letter-spacing: .09em; }
.footer-brand img { width: 27px; height: 27px; object-fit: contain; }
.toast { position: fixed; right: 20px; bottom: 20px; max-width: min(420px, calc(100vw - 40px)); padding: 12px 16px; background: #102d3b; border: 1px solid #26708e; border-radius: 8px; color: #dff8ff; font-size: 11px; box-shadow: 0 15px 45px #0008; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .2s ease; z-index: 50; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #855454; background: #321d21; }

.staff-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.staff-sidebar { position: sticky; top: 98px; padding: 18px 12px 12px; }
.staff-sidebar h2 { font-size: 22px; margin: 8px 8px 18px; text-transform: capitalize; }
.staff-nav { display: grid; gap: 4px; }
.staff-nav-item { width: 100%; padding: 10px 11px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 6px; text-align: left; background: transparent; color: #9eb2bc; font-size: 11px; cursor: pointer; }
.staff-nav-item > span { width: 18px; color: #83a0ad; text-align: center; font-size: 15px; }
.staff-nav-item:hover, .staff-nav-item.active { border-color: #204356; background: #0d2532; color: #eaf7fb; }
.staff-nav-item.active > span { color: var(--cyan-bright); }
.staff-sidebar-footer { display: flex; align-items: center; gap: 8px; margin: 22px 7px 0; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.presence-dot { width: 7px; height: 7px; border-radius: 50%; background: #43d49b; box-shadow: 0 0 9px #43d49b88; }
.staff-workspace { min-width: 0; }
.staff-view { min-height: 400px; }
.staff-section-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 2px 0 18px; }
.staff-section-head h2 { margin: 6px 0 0; font-size: 30px; letter-spacing: .02em; }
.staff-section-head p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.staff-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.staff-stat-card, .staff-info-card { padding: 17px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(145deg,#10232e,#0a151d); }
.staff-stat-card > span, .staff-stat-card small { display: block; color: var(--muted); font-size: 9px; }
.staff-stat-card strong { display: block; margin: 12px 0 5px; font: 700 28px/1 "Barlow Condensed",sans-serif; }
.staff-info-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.staff-info-card h3 { margin: 8px 0 6px; font-size: 19px; text-transform: capitalize; }
.staff-info-card p { margin: 0; color: #9fb2bc; font-size: 11px; line-height: 1.6; }
.staff-toolbar { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.staff-toolbar input { flex: 1; min-width: 0; }
.staff-member-list, .staff-card-list, .staff-audit-list { display: grid; gap: 8px; margin-bottom: 12px; }
.staff-member-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: #0b1821; }
.staff-member-row > img, .staff-application-card header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.staff-member-main { flex: 1; min-width: 0; }
.staff-member-main > strong, .staff-member-main > small { display: block; }
.staff-member-main > strong { font-size: 11px; }
.staff-member-main > small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.staff-member-actions { display: flex; align-items: center; gap: 3px; }
.staff-role-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.staff-role-list span { padding: 2px 5px; border: 1px solid #294655; border-radius: 4px; color: #a9c9d6; font-size: 8px; }
.staff-application-card { padding: 15px; border: 1px solid var(--line); border-radius: 9px; background: #0b1821; }
.staff-application-card > header, .staff-application-card > header > div { display: flex; align-items: center; gap: 10px; }
.staff-application-card > header { justify-content: space-between; }
.staff-application-card > header span strong, .staff-application-card > header span small { display: block; }
.staff-application-card > header span strong { font-size: 11px; }
.staff-application-card > header span small { color: var(--muted); font-size: 9px; margin-top: 4px; }
.staff-application-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 13px 0; }
.staff-application-fields section { padding: 9px; border-radius: 5px; background: #09131a; }
.staff-application-fields section strong { color: #c8e4ee; font-size: 9px; }
.staff-application-fields section p { margin: 5px 0 0; color: #9eb1ba; font-size: 10px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.staff-reject-reason { margin-top: 12px; }
.staff-application-card footer { display: flex; gap: 8px; margin-top: 10px; }
.staff-form { display: grid; gap: 12px; max-width: 680px; }
.staff-form .field { margin: 0; }
.staff-form button { justify-self: start; }
.staff-wom-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); gap: 12px; }
.staff-wom-grid > section { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #0b1821; }
.staff-wom-grid h3 { display: flex; justify-content: space-between; gap: 8px; font-size: 17px; }
.staff-wom-grid h3 span { color: var(--muted); font: 500 9px "DM Sans",sans-serif; }
.staff-wom-list { display: grid; gap: 4px; max-height: 510px; overflow: auto; }
.staff-wom-list > div, .staff-wom-list > a { display: grid; grid-template-columns: auto minmax(80px,1fr) auto auto; align-items: center; gap: 8px; padding: 8px 6px; border-bottom: 1px solid #172a35; font-size: 9px; }
.staff-wom-list > a { grid-template-columns: 1fr; }
.staff-wom-list > div > span:last-child, .staff-wom-list > div > span:nth-last-child(2), .staff-wom-list > a > span { color: var(--muted); }
.staff-audit-row { padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #0b1821; }
.staff-audit-row > div:first-child { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
.staff-audit-row time { color: var(--muted); font-size: 9px; }
.staff-audit-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 12px; margin-top: 7px; }
.staff-audit-fields p { margin: 3px 0; color: #aebfc7; font-size: 9px; overflow-wrap: anywhere; }
.staff-audit-fields p strong { color: #d8e7ec; }

@media (max-width: 960px) {
  .site-header { gap: 18px; }
  .brand { min-width: auto; }
  .main-nav { gap: 15px; }
  .main-nav > a, .nav-dropdown > summary { font-size: 11px; }
  .hero { padding: 32px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coffer-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .topline { padding: 0 16px; }
  .topline-note, .topline > span:nth-child(2) { display: none; }
  .site-header { height: 68px; padding: 0 16px; }
  .brand-mark { height: 45px; width: 45px; }
  .brand-copy strong { font-size: 23px; }
  .main-nav, .icon-link { display: none; }
  .header-actions { gap: 9px; }
  .mobile-menu-button { display: block; border: 0; background: transparent; color: var(--paper); font-size: 20px; padding: 7px; }
  .mobile-nav { position: fixed; top: 68px; left: 0; right: 0; z-index: 9; padding: 12px 16px; background: #0a151e; border-bottom: 1px solid var(--line); gap: 5px; box-shadow: 0 14px 28px #0008; }
  .mobile-nav.open { display: grid; }
  .mobile-nav > a, .mobile-nav .nav-dropdown > summary { min-height: 40px; padding: 8px 10px; border-radius: 5px; color: #b6c7cf; font-size: 11px; }
  .mobile-nav > a.active, .mobile-nav .nav-dropdown > summary.active { color: var(--cyan-bright); background: #10232e; }
  .mobile-nav .nav-dropdown { height: auto; }
  .mobile-nav .nav-dropdown > summary { justify-content: space-between; }
  .mobile-nav .dropdown-panel { position: static; min-width: 0; margin: 0 0 5px 10px; border-radius: 7px; box-shadow: none; }
  .mobile-nav .dropdown-panel::before { display: none; }
  .mobile-nav .dropdown-panel a { min-height: 34px; padding-left: 14px; }
  .mobile-nav .dropdown-panel { display: none; }
  .mobile-nav .nav-dropdown[open] .dropdown-panel { display: grid; }
  main { width: min(100% - 32px, 560px); padding: 20px 0 48px; }
  .hero { grid-template-columns: 1fr; padding: 27px 23px; min-height: auto; }
  .hero-emblem { display: none; }
  .hero h1 { font-size: 53px; }
  .hero-stat { padding: 0 12px; }
  .hero-stat strong { font-size: 19px; }
  .hero-stat span { font-size: 8px; }
  .home-grid { grid-template-columns: 1fr; }
  .section-head { margin-top: 27px; }
  .clan-feed-section .section-head { margin-top: 0; padding: 14px 13px 11px; }
  .clan-feed-card { width: 235px; min-height: 60px; }
  .clan-feed-track-wrap { padding-bottom: 11px; }
  .whip-arena-layout { grid-template-columns: 1fr; }
  .trade-offer-panes { grid-template-columns: 1fr; }
  .trade-sides { grid-template-columns: minmax(0,1fr); }
  .trade-arrow { justify-self: center; transform: rotate(90deg); }
  .bank-toolbar { align-items: stretch; flex-direction: column; }
  .bank-member-select { min-width: 0; width: 100%; }
  .whip-fighters { grid-template-columns: 1fr; }
  .whip-history > div { grid-template-columns: 1fr 1fr; }
  .whip-history small { grid-column: 1 / -1; text-align: left; }
  .fun-wallet { flex-wrap: wrap; gap: 8px; }
  .fun-wallet .eyebrow { flex-basis: 100%; }
  .section-head h2 { font-size: 25px; }
  .page-heading { align-items: start; flex-direction: column; }
  .page-heading .search-box { width: 100%; }
  .profile-hero { grid-template-columns: auto 1fr; gap: 13px; padding: 16px; }
  .profile-hero-card { grid-template-columns: minmax(0, 1fr) minmax(105px, .7fr); gap: 8px; padding: 14px; }
  .profile-identity { grid-column: 1 / -1; align-items: flex-start; }
  .profile-avatar { height: 68px; width: 68px; }
  .profile-title h1 { font-size: 28px; }
  .profile-hero-model { grid-column: 1; grid-row: 2; height: 190px; align-self: center; }
  .profile-hero-summary { grid-column: 2; grid-row: 2; gap: 9px; }
  .profile-hero-summary .button { width: 100%; padding: 9px 7px; font-size: 9px; }
  .profile-quick-stats { grid-template-columns: 1fr; gap: 5px; }
  .profile-quick-stats > span { padding: 6px 8px; }
  .profile-quick-stats strong { font-size: 14px; }
  .profile-identity .profile-meta { gap: 4px; }
  .profile-identity .role-pill { padding: 4px 6px; }
  .profile-stats { grid-template-columns: repeat(2, 1fr); }
  .skills-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-tabs { margin-top: 15px; }
  .profile-tab { padding: 8px 10px; }
  .profile-skill-grid, .profile-boss-grid, .collection-feed, .collection-pages { grid-template-columns: 1fr; }
  .collection-summary { padding: 12px; }
  .coffer-preview { grid-template-columns: 1fr; }
  .coffer-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .coffer-table-head, .coffer-row { min-width: 680px; }
  .coffer-summary { grid-template-columns: 1fr; }
  .hero-stats#home-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .form-grid, .donate-grid { grid-template-columns: 1fr; }
  .tracker-row { grid-template-columns: 1fr auto; gap: 5px 10px; }
  .tracker-row > span:nth-child(2) { grid-row: 2; }
  .tracker-row > span:nth-child(3) { grid-row: 3; }
  .tracker-row > button { grid-column: 2; grid-row: 1 / 4; }
  .ge-item-overview { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .ge-item-hero-icon { width: 46px; height: 46px; }
  .ge-live-price { grid-column: span 1; }
  .ge-item-stats { grid-template-columns: 1fr; }
  .ge-chart-heading { align-items: start; flex-direction: column; }
  .ge-chart-heading .field { width: 100%; }
  .ge-chart-panel { padding: 12px; }
  .ge-chart-ranges .button { padding: 8px 10px; }
  .site-footer { padding: 16px; flex-wrap: wrap; gap: 10px; }
  .site-footer > span { order: 3; width: 100%; margin: 0; }
  .staff-layout { grid-template-columns: 1fr; }
  .staff-sidebar { position: static; }
  .staff-nav { display: flex; overflow-x: auto; }
  .staff-nav-item { width: auto; flex: 0 0 auto; }
  .staff-sidebar-footer { display: none; }
  .staff-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .staff-info-grid, .staff-wom-grid { grid-template-columns: 1fr; }
  .staff-application-fields, .staff-audit-fields { grid-template-columns: 1fr; }
  .staff-member-row { flex-wrap: wrap; }
  .staff-member-main { flex: 1 1 calc(100% - 60px); }
  .staff-member-actions { width: 100%; justify-content: flex-end; }
  .account-trigger { max-width: 48px; padding: 5px; }
  .account-trigger > span { display: none; }
  .account-dropdown .dropdown-panel { top: calc(100% + 7px); }
  .notifications-panel { right: -47px; }
}

@media (prefers-reduced-motion: reduce) {
  .clan-feed-track { animation: none; }
}

.staff-permission-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.staff-permission-option { display: flex; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; background: #09151d; cursor: pointer; }
.staff-permission-option input { accent-color: var(--cyan); margin-top: 2px; }
.staff-permission-option span strong, .staff-permission-option span small { display: block; }
.staff-permission-option span strong { font-size: 10px; }
.staff-permission-option span small { margin-top: 4px; color: var(--muted); font-size: 8px; }
@media (max-width: 720px) {
  .staff-permission-options { grid-template-columns: 1fr; }
}