:root { --black: #050605; --black-2: #090b08; --black-3: #0d100c; --surface: rgba(17, 21, 15, 0.96); --surface-2: rgba(23, 28, 20, 0.92); --surface-3: rgba(255, 255, 255, 0.035); --line: rgba(224, 230, 208, 0.11); --line-strong: rgba(224, 230, 208, 0.18); --text: #f0f2e9; --muted: #9ca292; --dim: #687060; --moss: #9eb23b; --moss-bright: #b8cf4b; --moss-dark: #344012; --amber: #cf8f38; --rust: #b95f42; --danger: #db6955; --blue: #5e93a0; --violet: #8d79ad; --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --workspace-max: 1780px; color-scheme: dark; } * { box-sizing: border-box; } html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; } body { min-height: 100%; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 78% 3%, rgba(116, 134, 46, 0.08), transparent 27rem), linear-gradient(180deg, #070906 0%, #090b08 52%, #060706 100%); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; } body.overlay-open { overflow: hidden; } /* The route bootstrap runs synchronously in , before the first paint. Keep the public Home shell out of that paint while a full-page workspace boots. */ html[data-app-route="shop"]:not([data-app-ready]) .player-shell, html[data-app-route="quests"]:not([data-app-ready]) .player-shell, html[data-app-route="ranking"]:not([data-app-ready]) .player-shell, html[data-app-route="tickets"]:not([data-app-ready]) .player-shell, html[data-app-route="mods"]:not([data-app-ready]) .player-shell, html[data-app-route="admin"]:not([data-app-ready]) .player-shell, html[data-app-route="privacy"]:not([data-app-ready]) .player-shell, html[data-app-route="terms"]:not([data-app-ready]) .player-shell { visibility: hidden; } html[data-app-route="shop"]:not([data-app-ready]) body::before, html[data-app-route="quests"]:not([data-app-ready]) body::before, html[data-app-route="ranking"]:not([data-app-ready]) body::before, html[data-app-route="tickets"]:not([data-app-ready]) body::before, html[data-app-route="mods"]:not([data-app-ready]) body::before, html[data-app-route="admin"]:not([data-app-ready]) body::before, html[data-app-route="privacy"]:not([data-app-ready]) body::before, html[data-app-route="terms"]:not([data-app-ready]) body::before { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 44%, rgba(158, 178, 59, .12), transparent 22rem), #070907; color: #d8df8a; content: "PROJECT ZOMBOID"; font: 700 clamp(22px, 3vw, 38px)/1 "Oswald", "Arial Narrow", sans-serif; letter-spacing: .08em; } button, input { color: inherit; font: inherit; } button { -webkit-tap-highlight-color: transparent; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, dl, dd { margin: 0; } [hidden] { display: none !important; } .topbar { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(260px, 1fr); align-items: center; min-height: 72px; padding: 0 24px; border-bottom: 1px solid #272b25; background: rgba(5, 6, 5, 0.94); backdrop-filter: blur(18px); } .brand, .admin-brand { display: flex; align-items: center; min-width: 0; } .brand-mark { display: block; width: 42px; height: 42px; flex: 0 0 42px; } .brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; } .brand-rule { width: 1px; height: 30px; margin: 0 15px; background: #383d34; } .brand-copy { display: flex; flex-direction: column; gap: 2px; line-height: 1; } .brand-copy strong { font-size: 13px; font-weight: 850; letter-spacing: 0.04em; } .brand-copy small { color: var(--moss-bright); font: 800 9px/1 var(--mono); letter-spacing: 0.08em; } .stream-readout { display: flex; align-items: center; gap: 14px; min-width: 0; } .link-state { display: inline-flex; align-items: center; gap: 8px; color: #b2b7aa; font: 800 10px var(--mono); white-space: nowrap; } .link-state i { width: 8px; height: 8px; border: 1px solid #6c7167; border-radius: 50%; background: #52574f; } .link-state[data-state="live"] { color: var(--moss-bright); } .link-state[data-state="live"] i { border-color: var(--moss-bright); background: var(--moss-bright); box-shadow: 0 0 0 3px rgba(184, 207, 75, 0.14); animation: live-pulse 1.8s ease-in-out infinite; } .link-state[data-state="fault"] { color: #ef8d7c; } .link-state[data-state="fault"] i { border-color: var(--danger); background: var(--danger); } @keyframes live-pulse { 50% { box-shadow: 0 0 0 7px rgba(184, 207, 75, 0); } } .last-updated { overflow: hidden; max-width: 250px; color: #6d7368; font: 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; } .topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .public-state { display: inline-flex; align-items: center; gap: 7px; color: #7e8578; font: 800 9px var(--mono); } .public-state i { width: 5px; height: 5px; background: var(--moss); } .admin-trigger, .language-toggle, .admin-header-actions button, .login-close { display: inline-flex; min-height: 38px; align-items: center; gap: 9px; padding: 0 13px; border: 1px solid #383d35; border-radius: 4px; background: #10130e; color: #bdc2b5; cursor: pointer; font: 800 9px var(--mono); letter-spacing: 0.03em; } .language-toggle { min-width: 40px; justify-content: center; padding: 0 10px; color: var(--moss-bright); } .language-toggle:hover { border-color: #697454; background: #151a11; color: var(--text); } .admin-trigger > i { width: 6px; height: 6px; background: #676e61; } .admin-trigger:hover, .admin-trigger[data-state="active"] { border-color: #697454; color: var(--text); } .admin-trigger[data-state="active"] > i { background: var(--moss-bright); box-shadow: 0 0 9px rgba(184, 207, 75, 0.4); } main { width: min(1840px, 100%); margin: 0 auto; padding: 20px 22px 34px; } .sector-line { display: grid; min-height: 28px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin-bottom: 12px; color: #737a6e; font: 10px var(--mono); } .sector-line nav { display: flex; gap: 22px; } .sector-line nav a { color: #80877b; font-weight: 800; } .sector-line nav a:hover { color: var(--moss-bright); } .sector-line > strong { justify-self: end; color: #9aa090; font: 800 10px var(--mono); } .sector-line > strong[data-state="good"] { color: var(--moss-bright); } .sector-line > strong[data-state="partial"] { color: #e9ac5a; } .sector-line > strong[data-state="fault"] { color: #ef8d7c; } .server-card, .panel { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 8px; background: linear-gradient(155deg, rgba(27, 32, 23, 0.97), rgba(8, 10, 7, 0.99)); box-shadow: 0 28px 70px -44px rgba(0, 0, 0, 0.98); } .server-hero { display: grid; grid-template-columns: minmax(380px, 42%) 1fr; min-height: 312px; border-bottom: 1px solid var(--line-strong); background: var(--black-2); } .server-identity { position: relative; z-index: 2; display: flex; min-width: 0; padding: clamp(30px, 4vw, 64px); flex-direction: column; justify-content: center; border-right: 1px solid #343b2e; background: linear-gradient(135deg, #10140e, #090b08); } .server-identity::after { position: absolute; top: 0; right: -1px; width: 3px; height: 74px; background: var(--moss); content: ""; } .server-identity > p:first-child { color: #7d8574; font: 800 10px var(--mono); letter-spacing: 0.04em; } .server-identity > p:first-child span { color: var(--moss-bright); } .server-identity > p:first-child b { font: inherit; } .server-identity h1 { max-width: 760px; margin: 18px 0 14px; font-size: clamp(38px, 4.1vw, 72px); font-weight: 850; line-height: 0.92; letter-spacing: -0.045em; text-transform: uppercase; } .server-description { max-width: 640px; color: var(--muted); font-size: 13px; line-height: 1.6; } .hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; } .status-chip, .version-chip { display: inline-flex; min-height: 27px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #475329; border-radius: 3px; background: #1a220c; color: var(--moss-bright); font: 800 9px var(--mono); } .status-chip i { width: 5px; height: 5px; background: currentColor; } .status-chip[data-state="starting"] { border-color: #694f28; background: #241a0d; color: #e9ac5a; } .status-chip[data-state="offline"], .status-chip[data-state="failed"] { border-color: #66392f; background: #281511; color: #ef8d7c; } .version-chip { border-color: #3b4137; background: #121510; color: #949b8d; } .server-visual { position: relative; min-width: 0; overflow: hidden; background: #11150f url("/assets/knox-safehouse.png") 62% center / cover no-repeat; } .visual-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 5, 0.58), transparent 30%, transparent 76%, rgba(5, 6, 5, 0.18)), linear-gradient(0deg, rgba(5, 6, 5, 0.88), transparent 45%); } .visual-meta { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255, 255, 255, 0.14); background: rgba(5, 7, 5, 0.78); backdrop-filter: blur(10px); } .visual-meta > div { min-width: 0; padding: 13px 16px; border-right: 1px solid rgba(255, 255, 255, 0.11); } .visual-meta > div:last-child { border-right: 0; } .visual-meta dt, .visual-meta dd { display: block; overflow: hidden; font-family: var(--mono); text-overflow: ellipsis; white-space: nowrap; } .visual-meta dt { margin-bottom: 5px; color: #737b6e; font-size: 8px; font-weight: 800; } .visual-meta dd { color: #cbd0c3; font-size: 10px; font-weight: 700; } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); background: #0d110c; } .metric { position: relative; min-width: 0; min-height: 156px; padding: 20px 19px 17px; border-right: 1px solid var(--line); background: linear-gradient(155deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.01)), #151a13; } .metric:last-child { border-right: 0; } .metric-label { display: block; min-height: 24px; color: var(--muted); font: 800 9px var(--mono); } .metric-value { display: flex; align-items: flex-start; gap: 5px; min-width: 0; } .metric-value strong { font: 600 44px/1 var(--mono); letter-spacing: -0.05em; } .metric-value span { margin-top: 5px; color: var(--dim); font: 800 10px var(--mono); } .metric-value.compact strong { overflow: hidden; max-width: 100%; font-size: clamp(25px, 2.4vw, 40px); text-overflow: ellipsis; white-space: nowrap; } .metric p { overflow: hidden; margin-top: 10px; color: var(--dim); font: 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; } .meter { height: 3px; margin-top: 14px; overflow: hidden; background: rgba(255, 255, 255, 0.09); } .meter i { display: block; width: 0; height: 100%; background: var(--moss); transition: width 550ms ease; } .metric[data-metric="cpu"] .meter i { background: var(--blue); } .metric[data-metric="memory"] .meter i { background: var(--violet); } .metric[data-metric="players"] .meter i { background: var(--moss); } .metric[data-metric="uptime"] .meter i { background: var(--amber); } .overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.75fr); border-bottom: 1px solid var(--line); } .trend-panel, .readiness-panel { min-width: 0; padding: 19px; background: rgba(10, 14, 9, 0.86); } .readiness-panel { border-left: 1px solid var(--line); background: rgba(13, 17, 12, 0.92); } .section-head, .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; margin-bottom: 15px; } .section-head > div:first-child, .panel-head > div:first-child { min-width: 0; } .section-head span, .panel-head span { color: var(--dim); font: 800 9px var(--mono); } .section-head h2, .panel-head h2 { margin-top: 4px; font-size: 13px; font-weight: 850; letter-spacing: 0.015em; } .trend-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; } .trend-legend span { display: inline-grid; grid-template-columns: 12px auto auto; align-items: center; gap: 6px; color: var(--muted); font-size: 8px; white-space: nowrap; } .trend-legend i { width: 12px; height: 3px; background: currentColor; image-rendering: pixelated; } .trend-legend b { font: inherit; color: inherit; } .trend-legend em { padding-left: 1px; color: #d4d9cd; font: 800 8px var(--mono); font-style: normal; } .trend-legend .cpu { color: var(--blue); } .trend-legend .process { color: var(--moss-bright); } .trend-legend .memory { color: var(--violet); } .chart-shell { position: relative; height: 190px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 4px; outline: 0; background: radial-gradient(circle at 73% 12%, rgba(126,148,69,.055), transparent 38%), #080b08; cursor: crosshair; isolation: isolate; } .chart-shell:focus-visible { border-color: rgba(184,207,75,.55); box-shadow: 0 0 0 2px rgba(184,207,75,.12); } .trend-grid, .trend-overlay, .trend-dither, .trend-bloom, .trend-glitter { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; } .trend-grid { z-index: 0; } .trend-grid-lines { fill: none; stroke: rgba(224,230,208,.075); stroke-width: 1; vector-effect: non-scaling-stroke; } .trend-bloom { z-index: 1; filter: blur(15px) brightness(2.9) saturate(3); mix-blend-mode: plus-lighter; opacity: .12; } .trend-dither { z-index: 2; opacity: 1; } .trend-glitter { z-index: 3; mix-blend-mode: plus-lighter; opacity: 1; } .trend-dither, .trend-glitter { image-rendering: pixelated; } .trend-overlay { z-index: 4; overflow: visible; } .trend-axis text { fill: #545c50; font: 800 8px var(--mono); } .trend-cursor { stroke: rgba(231,236,222,.35); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; opacity: 0; } .trend-cursor[data-visible="true"] { opacity: 1; } .trend-point { stroke: #080b08; stroke-width: 2; vector-effect: non-scaling-stroke; opacity: 0; } .trend-point[data-visible="true"] { opacity: 1; } .trend-point.cpu { fill: var(--blue); }.trend-point.process { fill: var(--moss-bright); }.trend-point.memory { fill: var(--violet); } .chart-tooltip { position: absolute; top: 10px; z-index: 6; display: grid; min-width: 154px; gap: 6px; padding: 9px 10px; border: 1px solid rgba(224,230,208,.18); border-radius: 3px; transform: translateX(10px); background: rgba(7,10,7,.94); box-shadow: 0 12px 28px rgba(0,0,0,.38); backdrop-filter: blur(9px); pointer-events: none; } .chart-tooltip[data-side="left"] { transform: translateX(calc(-100% - 10px)); } .chart-tooltip time { padding-bottom: 6px; border-bottom: 1px solid var(--line); color: #737b6e; font: 800 8px var(--mono); } .chart-tooltip span { display: grid; grid-template-columns: 7px 1fr auto; align-items: center; gap: 7px; color: #8b9285; font: 800 8px var(--mono); } .chart-tooltip span > i { width: 5px; height: 5px; background: currentColor; } .chart-tooltip span.cpu { color: var(--blue); }.chart-tooltip span.process { color: var(--moss-bright); }.chart-tooltip span.memory { color: var(--violet); } .chart-tooltip b { color: inherit; font: inherit; } .chart-tooltip strong { color: #e2e6dc; font: 800 9px var(--mono); } .chart-empty { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; background: rgba(8,11,8,.72); color: #5e6559; font: 800 9px var(--mono); } .mini-state { color: #8d9486; font: 800 9px var(--mono); } .mini-state.good { color: var(--moss-bright); } .mini-state.warn { color: #e9ac5a; } .signal-list { display: grid; border-top: 1px solid var(--line); } .signal-list > div { display: grid; min-height: 37px; grid-template-columns: 1fr auto 8px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); } .signal-list span { color: #858c7e; font: 800 9px var(--mono); } .signal-list strong { color: #bdc2b6; font: 700 9px var(--mono); } .signal-list i, .admin-nav-button > i { width: 7px; height: 7px; border: 1px solid #565d51; background: #333830; } .signal-list i[data-state="good"] { border-color: var(--moss-bright); background: var(--moss-bright); box-shadow: 0 0 8px rgba(184, 207, 75, 0.35); } .signal-list i[data-state="warn"] { border-color: var(--amber); background: var(--amber); } .signal-list i[data-state="bad"] { border-color: var(--danger); background: var(--danger); } .server-flags { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; border: 1px solid var(--line); } .server-flags > div { min-width: 0; padding: 11px; border-right: 1px solid var(--line); } .server-flags > div:last-child { border-right: 0; } .server-flags dt { margin-bottom: 5px; color: var(--dim); font: 800 8px var(--mono); } .server-flags dd { overflow: hidden; color: #c0c5b8; font: 800 9px var(--mono); text-overflow: ellipsis; white-space: nowrap; } .node-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(5, 7, 5, 0.98); } .node-meta > div { min-width: 0; padding: 13px 15px; border-right: 1px solid #2e332b; } .node-meta > div:last-child { border-right: 0; } .node-meta span, .node-meta strong { display: block; overflow: hidden; font-family: var(--mono); text-overflow: ellipsis; white-space: nowrap; } .node-meta span { margin-bottom: 4px; color: #6e7569; font-size: 8px; font-weight: 800; } .node-meta strong { color: #c4c9bc; font-size: 9px; font-weight: 700; } .public-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; } .panel { min-width: 0; background: linear-gradient(155deg, rgba(22, 27, 19, 0.96), rgba(9, 11, 8, 0.98)); } .panel-head { min-height: 72px; align-items: center; margin: 0; padding: 17px 19px; border-bottom: 1px solid var(--line); background: rgba(9, 12, 8, 0.72); } .panel-head > strong { color: var(--moss-bright); font: 800 10px var(--mono); } .roster { display: grid; min-height: 180px; align-content: start; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 8px; } .player-row { display: grid; min-width: 0; min-height: 54px; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.022); } .player-index { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #47522c; background: #151c0d; color: var(--moss-bright); font: 800 9px var(--mono); } .player-row strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .player-row span:last-child { color: var(--moss-bright); font: 800 8px var(--mono); } .empty-copy { grid-column: 1 / -1; align-self: center; padding: 28px 10px; color: #747b6e; font: 9px/1.6 var(--mono); } .panel > footer { display: flex; min-height: 38px; align-items: center; justify-content: space-between; gap: 14px; padding: 0 18px; border-top: 1px solid var(--line); color: #62695d; font: 8px var(--mono); } .profile-grid { display: grid; min-height: 142px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .profile-grid > div { min-width: 0; padding: 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .profile-grid > div:nth-child(3n) { border-right: 0; } .profile-grid dt { margin-bottom: 8px; color: var(--dim); font: 800 8px var(--mono); } .profile-grid dd { overflow: hidden; color: #cbd0c4; font: 800 11px var(--mono); text-overflow: ellipsis; white-space: nowrap; } .profile-note { min-height: 76px; padding: 17px 18px; color: #7d8577; font: 10px/1.65 var(--mono); } .mods-panel { margin-top: 18px; } .mods-head { min-height: 82px; } .mod-summary { display: flex; gap: 18px; } .mod-summary span { color: #70786c; white-space: nowrap; } .mod-summary strong { color: #c8cdc1; font: 800 11px var(--mono); } .mods-table { display: grid; } .mod-row { display: grid; min-height: 66px; grid-template-columns: 44px minmax(230px, 1.6fr) minmax(150px, 0.75fr) minmax(130px, 0.65fr) 110px; align-items: center; gap: 14px; padding: 10px 18px; border-bottom: 1px solid var(--line); } .mod-row:last-child { border-bottom: 0; } .mod-index { color: var(--moss); font: 800 9px var(--mono); } .mod-title { min-width: 0; } .mod-title a { display: block; overflow: hidden; color: #d8dcd2; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .mod-title a:hover { color: var(--moss-bright); } .mod-title span, .mod-ids, .mod-size { display: block; overflow: hidden; margin-top: 5px; color: #687064; font: 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; } .mod-state { display: flex; flex-wrap: wrap; gap: 5px; } .tag { display: inline-flex; min-height: 22px; align-items: center; padding: 0 7px; border: 1px solid #41483b; border-radius: 2px; color: #92998c; font: 800 8px var(--mono); } .tag.good { border-color: #465728; background: rgba(158, 178, 59, 0.07); color: var(--moss-bright); } .tag.warn { border-color: #6d4f26; background: rgba(207, 143, 56, 0.07); color: #e7a957; } .tag.bad { border-color: #64372e; background: rgba(185, 95, 66, 0.08); color: #e98875; } .data-foot { display: flex; min-height: 46px; align-items: center; justify-content: space-between; color: #555c51; font: 8px var(--mono); } .admin-workspace { position: fixed; inset: 0; z-index: 90; display: grid; grid-template-rows: 82px minmax(0, 1fr); overflow: hidden; background: #070907; color: var(--text); } .admin-workspace::before { position: absolute; inset: 82px 0 auto; height: min(48vh, 560px); background: linear-gradient(180deg, rgba(7,9,7,.52), #070907), url("/assets/knox-safehouse.png") center 35% / cover; content: ""; opacity: .12; pointer-events: none; } .admin-header { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(330px, 1fr) auto minmax(330px, 1fr); align-items: center; padding: 0 clamp(18px, 2.2vw, 38px); border-bottom: 1px solid #2a3026; background: rgba(5, 7, 5, 0.97); } .admin-brand > span:nth-child(2) { width: 1px; height: 34px; margin: 0 18px; background: #3d4438; } .admin-brand p, .admin-session span, .admin-stage-head p, .admin-fleet span { color: var(--dim); font: 800 9px var(--mono); } .admin-brand h2 { margin-top: 4px; font-size: 18px; } .admin-session { display: flex; align-items: center; gap: 12px; } .admin-session strong { color: var(--moss-bright); font: 800 10px var(--mono); } .admin-header-actions { display: flex; justify-self: end; gap: 8px; } .admin-header-actions button:hover, .login-close:hover { border-color: #667154; color: var(--text); } .admin-layout { position: relative; z-index: 1; display: grid; width: min(1800px, 100%); min-height: 0; margin: 0 auto; grid-template-columns: minmax(300px, 0.34fr) minmax(0, 1fr); border-right: 1px solid var(--line); border-left: 1px solid var(--line); } .admin-nav { min-height: 0; overflow-y: auto; border-right: 1px solid var(--line); background: rgba(7, 10, 7, 0.95); } .admin-fleet { display: flex; min-height: 86px; align-items: center; justify-content: space-between; padding: 18px 21px; border-bottom: 1px solid var(--line); } .admin-fleet strong { display: block; margin-top: 5px; font: 800 10px var(--mono); } .admin-fleet > i { width: 9px; height: 9px; background: var(--moss-bright); box-shadow: 0 0 11px rgba(184, 207, 75, .35); } .admin-nav-button { position: relative; display: grid; width: 100%; min-height: 91px; grid-template-columns: 28px minmax(0,1fr) 10px; align-items: center; gap: 12px; padding: 16px 20px; border: 0; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.01); color: var(--text); text-align: left; cursor: pointer; } .admin-nav-button::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: transparent; content: ""; } .admin-nav-button:hover { background: rgba(255,255,255,.03); } .admin-nav-button.active { background: rgba(158,178,59,.07); } .admin-nav-button.active::before { background: var(--moss-bright); } .admin-nav-button > span { align-self: start; padding-top: 3px; color: var(--moss); font: 800 9px var(--mono); } .admin-nav-button > .admin-nav-copy { align-self: center; min-width: 0; padding-top: 0; color: inherit; font: inherit; } .admin-nav-button small { display: block; color: var(--dim); font: 800 8px var(--mono); } .admin-nav-button strong { display: block; margin-top: 7px; font-size: 13px; } .admin-nav-button.active > i { border-color: var(--moss-bright); background: var(--moss-bright); } .admin-stage { min-width: 0; min-height: 0; overflow-y: auto; background: rgba(10, 13, 9, .88); } .admin-stage-head { position: sticky; top: 0; z-index: 3; display: flex; min-height: 116px; align-items: center; justify-content: space-between; gap: 20px; padding: 24px clamp(24px,4vw,58px); border-bottom: 1px solid var(--line); background: rgba(9,12,8,.92); backdrop-filter: blur(16px); } .admin-stage-head p { color: var(--moss); } .admin-stage-head h3 { margin-top: 7px; font-size: clamp(26px,3vw,46px); line-height: 1; } .admin-stage-head > span { color: #7f8779; font: 800 9px var(--mono); } .admin-view { display: none; padding: 22px clamp(20px,3vw,48px) 50px; } .admin-view.active { display: block; } .admin-content { display: grid; gap: 14px; } .admin-toolbar { display: grid; grid-template-columns: auto minmax(240px,560px); align-items: center; gap: 14px; margin-bottom: 16px; } .admin-toolbar label { color: var(--dim); font: 800 9px var(--mono); } .admin-toolbar input { height: 42px; padding: 0 13px; border: 1px solid #3a4136; border-radius: 3px; outline: 0; background: #0e120d; color: var(--text); font-size: 12px; } .admin-toolbar input:focus { border-color: var(--moss); } .admin-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 5px; background: rgba(17,21,15,.94); } .admin-card-head { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 15px; padding: 0 16px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.018); } .admin-card-head h4 { margin: 0; font-size: 12px; } .admin-card-head span { color: var(--dim); font: 800 8px var(--mono); } .admin-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .admin-table th, .admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table th { color: var(--dim); font: 800 8px var(--mono); } .admin-table td { overflow-wrap: anywhere; color: #bec4b7; font: 9px/1.5 var(--mono); } .admin-table td strong { color: var(--text); } .admin-table tr.online td:first-child strong { color: var(--moss-bright); } .settings-list { display: grid; } .setting-row { display: grid; min-height: 52px; grid-template-columns: minmax(150px,.55fr) minmax(210px,1fr) minmax(200px,1fr); align-items: center; gap: 14px; padding: 10px 15px; border-bottom: 1px solid var(--line); } .setting-row:last-child { border-bottom: 0; } .setting-row span, .setting-row code { overflow-wrap: anywhere; } .setting-row span { color: var(--dim); font: 800 8px var(--mono); } .setting-row code { color: #d4d8ce; font: 9px/1.45 var(--mono); } .operation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; } .operation-stat { min-height: 104px; padding: 16px; border: 1px solid var(--line); background: rgba(255,255,255,.018); } .operation-stat span { color: var(--dim); font: 800 8px var(--mono); } .operation-stat strong { display: block; margin-top: 12px; color: var(--moss-bright); font: 800 15px var(--mono); } .operation-stat p { margin-top: 7px; color: #777f72; font: 8px/1.5 var(--mono); } .event-list, .log-list, .backup-list { display: grid; } .event-row, .log-row, .backup-row { display: grid; min-height: 58px; grid-template-columns: 130px 90px minmax(0,1fr); align-items: start; gap: 14px; padding: 12px 15px; border-bottom: 1px solid var(--line); } .event-row:last-child, .log-row:last-child, .backup-row:last-child { border-bottom: 0; } .event-row time, .log-row > span, .backup-row > span { color: var(--dim); font: 8px/1.5 var(--mono); } .event-row > span, .log-level { font: 800 8px/1.5 var(--mono); text-transform: uppercase; } .event-row > div strong, .backup-row strong { display: block; font-size: 11px; } .event-row > div p, .log-message, .backup-row p { margin-top: 5px; color: #899184; font: 9px/1.55 var(--mono); overflow-wrap: anywhere; } .severity-success { color: var(--moss-bright); }.severity-warning { color: #e9ac5a; }.severity-error { color: #ef8d7c; }.severity-info { color: #8e9eaa; } .log-row { grid-template-columns: 110px minmax(0,1fr); }.log-level.error { color: #ef8d7c; }.log-level.warning { color: #e9ac5a; } .backup-row { grid-template-columns: minmax(180px,1fr) 130px 150px; }.backup-row p { margin: 0; } .login-layer { --login-ink: #211f17; --login-ink-soft: #625c4d; --login-paper: #e9dec7; --login-line: rgba(51, 47, 35, .24); --login-olive: #77831f; --login-olive-bright: #a8ba38; --login-rust: #9f4e2e; --login-display: "Oswald", "Arial Narrow", Impact, sans-serif; --login-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; position: fixed; inset: 0; z-index: 110; display: grid; min-height: 100dvh; grid-template-rows: 82px minmax(0, 1fr); overflow: hidden; background: radial-gradient(circle at 72% 0%, rgba(126, 142, 47, .1), transparent 34rem), #090a08; color: #f2eee2; font-family: var(--login-body); } .login-header { position: relative; z-index: 2; display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(24px, 4vw, 64px); border-bottom: 1px solid rgba(231, 220, 197, .16); background: rgba(7, 8, 6, .97); backdrop-filter: blur(18px); } .login-brand { display: inline-flex; min-width: 0; align-items: center; gap: 16px; } .login-brand img { width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain; } .login-brand strong { overflow: hidden; color: #f2eee2; font: 700 clamp(27px, 2.2vw, 38px)/1 var(--login-display); letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; } .login-header-actions { display: flex; align-items: center; gap: 10px; } .login-header-actions .language-toggle, .login-header-actions .login-close { position: static; min-height: 50px; justify-content: center; gap: 9px; padding: 0 16px; border-color: rgba(231, 220, 197, .24); border-radius: 7px; background: rgba(22, 23, 17, .88); color: #eee8da; font: 700 15px var(--login-body); } .login-header-actions .language-toggle { min-width: 58px; color: var(--login-olive-bright); } .login-header-actions button:hover { border-color: var(--login-olive-bright); background: #1d2015; color: #fffdf5; } .login-stage { min-height: 0; overflow-y: auto; padding: clamp(18px, 3vw, 42px); } .login-dialog { display: grid; width: min(1240px, 100%); min-height: min(650px, calc(100dvh - 130px)); margin: 0 auto; grid-template-columns: minmax(360px, .92fr) minmax(460px, 1.08fr); overflow: hidden; border: 1px solid rgba(231, 220, 197, .2); border-radius: 18px; background: #11120e; box-shadow: 0 30px 90px rgba(0, 0, 0, .48); } .login-visual { position: relative; min-height: 100%; overflow: hidden; background: url("/assets/knox-safehouse.png?v=20260805-1") 58% center / cover no-repeat; } .login-visual::before { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 8, 6, .18), rgba(7, 8, 6, .58)), linear-gradient(90deg, transparent 52%, rgba(7, 8, 6, .3)); content: ""; } .login-visual::after { position: absolute; inset: 0 0 0 auto; width: 4px; background: var(--login-olive-bright); content: ""; } .login-visual-mark { position: absolute; bottom: 34px; left: 34px; z-index: 1; display: grid; width: 72px; height: 72px; place-items: center; border: 1px solid rgba(231, 220, 197, .28); border-radius: 50%; background: rgba(7, 8, 6, .74); color: var(--login-olive-bright); font-size: 30px; backdrop-filter: blur(12px); } .login-panel { position: relative; display: flex; min-width: 0; padding: clamp(38px, 5vw, 76px); flex-direction: column; justify-content: center; background: var(--login-paper) url("/assets/parchment-texture.png?v=20260805-1") center / 720px auto repeat; color: var(--login-ink); } .login-lock-mark { display: grid; width: 58px; height: 58px; margin-bottom: 24px; place-items: center; border-radius: 50%; background: rgba(119, 131, 31, .13); color: var(--login-olive); font-size: 25px; } .login-copy { margin-bottom: 32px; } .login-copy > p { margin-bottom: 12px; color: var(--login-rust); font-size: 12px; font-weight: 800; letter-spacing: .06em; } .login-copy h2 { max-width: 620px; color: var(--login-ink); font: 700 clamp(42px, 4vw, 60px)/.98 var(--login-display); letter-spacing: -.025em; text-wrap: balance; } .login-copy > span { display: block; max-width: 610px; margin-top: 18px; color: var(--login-ink-soft); font-size: 16px; line-height: 1.6; } .login-panel form { width: min(560px, 100%); } .login-panel label { display: block; margin-bottom: 10px; color: var(--login-rust); font-size: 12px; font-weight: 800; letter-spacing: .045em; } .password-field { display: grid; height: 60px; grid-template-columns: minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--login-line); border-radius: 7px; background: rgba(255, 252, 245, .52); transition: border-color .18s ease, box-shadow .18s ease; } .password-field:focus-within { border-color: var(--login-olive); box-shadow: 0 0 0 3px rgba(119, 131, 31, .13); } .password-field input { min-width: 0; padding: 0 17px; border: 0; outline: 0; background: transparent; color: var(--login-ink); font-size: 16px; } .password-field input::placeholder { color: #817966; } .password-field button { min-width: 82px; padding: 0 15px; border: 0; border-left: 1px solid var(--login-line); background: rgba(255, 255, 255, .16); color: var(--login-olive); cursor: pointer; font-size: 11px; font-weight: 800; } .password-field button:hover { background: rgba(119, 131, 31, .1); color: #566014; } .login-error { min-height: 38px; padding-top: 9px; color: #a8422f; font-size: 12px; font-weight: 700; line-height: 1.45; } .login-submit { position: relative; display: flex; width: 100%; height: 58px; align-items: center; justify-content: space-between; padding: 0 19px; overflow: hidden; border: 1px solid var(--login-olive); border-radius: 7px; background: var(--login-olive); color: #fffdf5; cursor: pointer; font-size: 14px; font-weight: 800; } .login-submit::after { font-family: "bootstrap-icons"; font-size: 18px; content: "\f138"; } .login-submit:hover { border-color: #69751b; background: #69751b; } .login-submit i { position: absolute; inset: auto 0 0; width: 0; height: 3px; background: var(--login-olive-bright); } .login-submit.loading i { width: 100%; transition: width 900ms ease; } .login-submit:disabled { cursor: wait; opacity: .7; } .login-foot { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--login-line); color: var(--login-ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .025em; } .login-foot i { color: var(--login-olive); font-size: 17px; } .toast { position: fixed; right: 24px; bottom: 24px; z-index: 140; display: grid; width: min(520px,calc(100vw - 48px)); min-height: 88px; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 15px; padding: 18px 21px; transform: translateY(22px) scale(.98); border: 1px solid rgba(167,186,50,.52); border-left: 5px solid #a7ba32; border-radius: 10px; background: linear-gradient(135deg,rgba(29,34,20,.98),rgba(10,13,9,.98)); box-shadow: 0 22px 58px rgba(0,0,0,.58),inset 0 1px rgba(255,255,255,.04); color: #f1f2e8; font: 700 clamp(15px,1.25vw,18px)/1.45 var(--guide-body); opacity: 0; pointer-events: none; transition: opacity .18s ease,transform .18s ease; } .toast.show { transform: translateY(0); opacity: 1; } .toast-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(190,207,83,.34); border-radius: 50%; background: rgba(167,186,50,.1); color: #bdcf50; font-size: 22px; } .toast-message { min-width: 0; overflow-wrap: anywhere; } .toast.error { border-color: rgba(190,85,65,.5); border-left-color: #c65d48; background: linear-gradient(135deg,rgba(46,24,20,.98),rgba(13,10,9,.98)); color: #ffd9d2; } .toast.error .toast-icon { border-color: rgba(224,112,91,.36); background: rgba(198,93,72,.12); color: #ef8b78; } .toast.welcome { width: min(570px,calc(100vw - 48px)); min-height: 96px; padding: 20px 23px; border-color: rgba(184,207,75,.55); border-left-color: #a8ba38; background: linear-gradient(135deg,rgba(38,45,24,.98),rgba(12,15,10,.98)); color: #f2f5dd; font-size: clamp(17px,1.3vw,20px); box-shadow: 0 18px 52px rgba(0,0,0,.58),inset 4px 0 #a8ba38; } @media (max-width: 560px) { .toast { right: 14px; bottom: 14px; left: 14px; width: auto; min-height: 82px; grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 15px 17px; font-size: 15px; } .toast-icon { width: 38px; height: 38px; font-size: 20px; } .toast.welcome { width: auto; } } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--moss-bright); outline-offset: 2px; } @media (max-height: 820px) and (min-width: 821px) { .login-stage { padding-top: 18px; padding-bottom: 18px; } .login-dialog { min-height: calc(100dvh - 118px); } .login-panel { padding-top: 28px; padding-bottom: 28px; } .login-lock-mark { width: 48px; height: 48px; margin-bottom: 16px; font-size: 21px; } .login-copy { margin-bottom: 22px; } .login-copy h2 { font-size: clamp(38px, 3.6vw, 52px); } .login-copy > span { margin-top: 13px; font-size: 15px; } .password-field { height: 54px; } .login-error { min-height: 32px; padding-top: 7px; } .login-submit { height: 54px; } .login-foot { margin-top: 15px; padding-top: 13px; } } @media (max-width: 1120px) { .topbar { grid-template-columns: 1fr auto; } .stream-readout { display: none; } .sector-line { grid-template-columns: 1fr auto; } .sector-line nav { display: none; } .server-hero { grid-template-columns: minmax(320px, 46%) 1fr; } .overview-grid { grid-template-columns: 1fr; } .readiness-panel { border-top: 1px solid var(--line); border-left: 0; } .admin-header { grid-template-columns: minmax(280px,1fr) auto; } .admin-session { display: none; } .admin-layout { grid-template-columns: 270px minmax(0,1fr); } } @media (max-width: 820px) { .public-state { display: none; } main { padding: 14px 12px 26px; } .server-hero { grid-template-columns: 1fr; } .server-identity { min-height: 270px; border-right: 0; border-bottom: 1px solid var(--line); } .server-identity::after { right: auto; left: 0; } .server-visual { min-height: 240px; } .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .metric:nth-child(2) { border-right: 0; } .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .public-grid { grid-template-columns: 1fr; } .mod-row { grid-template-columns: 38px minmax(0,1fr) 100px; } .mod-ids, .mod-size { display: none; } .login-layer { grid-template-rows: 72px minmax(0, 1fr); } .login-header { min-height: 72px; padding: 0 16px; } .login-brand img { width: 46px; height: 46px; flex-basis: 46px; } .login-brand strong { font-size: 27px; } .login-stage { padding: 12px; } .login-dialog { min-height: 0; grid-template-columns: 1fr; } .login-visual { min-height: 190px; background-position: center 40%; } .login-visual::after { inset: auto 0 0; width: auto; height: 4px; } .login-visual-mark { right: 22px; bottom: 18px; left: auto; width: 58px; height: 58px; font-size: 24px; } .login-panel { padding: 38px clamp(28px, 7vw, 58px) 34px; } .admin-workspace { grid-template-rows: 76px minmax(0,1fr); } .admin-header { grid-template-columns: 1fr auto; padding: 0 14px; } .admin-brand > span:nth-child(2), .admin-brand p, #adminLogout { display: none; } .admin-layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); } .admin-nav { display: grid; grid-template-columns: repeat(5,minmax(120px,1fr)); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); } .admin-fleet { display: none; } .admin-nav-button { min-height: 68px; grid-template-columns: 22px 1fr; padding: 11px 13px; border-right: 1px solid var(--line); border-bottom: 0; } .admin-nav-button > i { display: none; } .admin-nav-button strong { font-size: 10px; } .admin-stage-head { min-height: 92px; padding: 18px 20px; } .admin-stage-head h3 { font-size: 25px; } .operation-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .topbar { min-height: 64px; padding: 0 12px; } .brand-rule, .brand-copy small { display: none; } .brand-copy { margin-left: 10px; } .admin-trigger { padding: 0 10px; } .sector-line { font-size: 8px; } .server-identity { padding: 28px 22px; } .server-identity h1 { font-size: 38px; } .visual-meta { grid-template-columns: 1fr 1fr; } .visual-meta > div:nth-child(3) { display: none; } .metric { min-height: 142px; padding: 17px 14px; } .metric-value strong { font-size: 36px; } .trend-legend { display: none; } .chart-shell { height: 160px; } .node-meta { grid-template-columns: repeat(2,minmax(0,1fr)); } .node-meta > div:nth-child(2) { border-right: 0; } .node-meta > div:nth-child(-n+2) { border-bottom: 1px solid #2e332b; } .roster { grid-template-columns: 1fr; } .profile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .profile-grid > div:nth-child(3n) { border-right: 1px solid var(--line); } .profile-grid > div:nth-child(2n) { border-right: 0; } .mod-summary span:nth-child(2) { display: none; } .mod-row { grid-template-columns: 30px minmax(0,1fr); gap: 9px; } .mod-state { grid-column: 2; } .panel > footer { font-size: 7px; } .login-header { gap: 10px; padding: 0 11px; } .login-brand { gap: 9px; } .login-brand img { width: 42px; height: 42px; flex-basis: 42px; } .login-brand strong { font-size: 21px; } .login-header-actions { gap: 7px; } .login-header-actions .language-toggle, .login-header-actions .login-close { min-width: 44px; min-height: 44px; padding: 0 10px; } .login-close span { display: none; } .login-dialog { border-radius: 14px; } .login-visual { min-height: 145px; } .login-visual-mark { width: 48px; height: 48px; font-size: 21px; } .login-panel { padding: 28px 21px 25px; } .login-lock-mark { width: 50px; height: 50px; margin-bottom: 18px; font-size: 22px; } .login-copy { margin-bottom: 26px; } .login-copy h2 { font-size: 37px; } .login-copy > span { margin-top: 15px; font-size: 14px; } .password-field { height: 56px; } .login-submit { height: 54px; } .login-foot { margin-top: 18px; padding-top: 15px; font-size: 10px; } .admin-brand .brand-mark { display: none; } .admin-brand h2 { font-size: 13px; } .admin-view { padding: 15px 12px 34px; } .admin-toolbar { grid-template-columns: 1fr; } .admin-table { min-width: 680px; } .admin-card { overflow-x: auto; } .setting-row { grid-template-columns: 110px minmax(180px,1fr); } .setting-row code:last-child { grid-column: 1/-1; } .event-row, .backup-row { grid-template-columns: 1fr; gap: 5px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* Player-facing field guide */ .player-shell { --guide-ink: #211f17; --guide-ink-soft: #5f5949; --guide-paper: #e9dec7; --guide-paper-line: rgba(51, 47, 35, 0.22); --guide-olive: #7f8b22; --guide-olive-bright: #a8ba38; --guide-rust: #9f4e2e; --guide-display: "Oswald", "Arial Narrow", Impact, sans-serif; --guide-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; position: relative; z-index: 1; min-height: 100vh; background: #090a08; font-family: var(--guide-body); } .player-header { position: sticky; top: 0; z-index: 50; display: grid; min-height: 82px; grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr); align-items: center; gap: 32px; padding: 0 clamp(24px, 4vw, 64px); border-bottom: 1px solid rgba(231, 220, 197, 0.16); background: rgba(7, 8, 6, 0.97); backdrop-filter: blur(18px); } .player-brand { display: inline-flex; min-width: 0; align-items: center; gap: 16px; } .player-brand img { width: 54px; height: 54px; flex: 0 0 54px; object-fit: contain; } .player-brand strong { overflow: hidden; color: #f2eee2; font: 700 clamp(27px, 2.2vw, 38px)/1 var(--guide-display); letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; } .player-nav { display: flex; align-self: stretch; align-items: center; gap: clamp(20px, 2.5vw, 40px); } .player-nav a { position: relative; display: grid; height: 100%; place-items: center; color: #d4cdbc; font-size: 18px; font-weight: 600; } .player-nav a::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: transparent; content: ""; } .player-nav a:hover, .player-nav a.active { color: #f7f2e7; } .player-nav a.active::after { background: var(--guide-olive-bright); } .player-mobile-nav { display: none; } .player-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .player-header-actions .language-toggle, .player-header-actions .admin-trigger { min-height: 50px; border-color: rgba(231, 220, 197, 0.24); border-radius: 7px; background: rgba(22, 23, 17, 0.88); color: #eee8da; font: 700 16px var(--guide-body); } .player-header-actions .language-toggle { min-width: 58px; color: var(--guide-olive-bright); } .player-header-actions .admin-trigger i { width: auto; height: auto; background: transparent; color: #918a79; font-size: 17px; } .player-header-actions .admin-trigger[data-state="active"] i { background: transparent; color: var(--guide-olive-bright); box-shadow: none; } .field-guide { width: min(var(--workspace-max), 100%); margin: 0 auto; padding: 14px clamp(14px, 1.6vw, 26px) 40px; } .guide-frame { overflow: hidden; border: 1px solid rgba(231, 220, 197, 0.2); border-radius: 18px; background: #11120e; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42); } .status-section { scroll-margin-top: 102px; } .hero-stage { position: relative; display: flex; min-height: 340px; align-items: stretch; overflow: hidden; background-color: #11130f; background-image: url("/assets/knox-safehouse.png?v=20260805-1"); background-position: center; background-size: cover; } .hero-copy { display: grid; width: 100%; padding: clamp(28px, 3vw, 44px) clamp(30px, 3.4vw, 52px); grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-content: center; column-gap: 28px; background: rgba(7, 8, 6, 0.56); } .hero-copy h1 { display: flex; max-width: 780px; grid-column: 1 / -1; flex-direction: column; color: #f4efe4; font: 700 clamp(56px, 5.2vw, 80px)/1.04 var(--guide-display); letter-spacing: -0.035em; text-transform: uppercase; } .hero-copy h1 strong { margin-top: clamp(8px, 0.7vw, 12px); color: var(--guide-olive-bright); font: inherit; } .hero-copy h1 strong[data-state="offline"], .hero-copy h1 strong[data-state="failed"] { color: #d36d50; } .hero-copy h1 strong[data-state="starting"] { color: #d69a49; } .hero-facts { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin-top: 22px; color: #eee8da; font-size: clamp(21px, 2vw, 30px); font-weight: 700; } .hero-player-count { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; } .hero-player-count i { align-self: center; margin-right: 4px; font-size: 30px; } .hero-player-count > span:last-child { margin-left: 3px; color: #d3cdbc; font-size: 18px; font-weight: 600; } .hero-fact-divider { width: 2px; height: 42px; background: var(--guide-olive); } .hero-version { color: var(--guide-olive-bright); font: 600 clamp(22px, 2vw, 30px) var(--guide-display); white-space: nowrap; } .hero-server-address { display: grid; width: min(100%, 520px); min-height: 68px; flex-basis: 100%; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 10px 13px; border: 1px solid rgba(184, 207, 75, .42); border-radius: 8px; background: linear-gradient(120deg, rgba(12, 15, 10, .92), rgba(29, 34, 20, .78)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 12px 28px rgba(0, 0, 0, .2); color: #f4efe4; cursor: pointer; text-align: left; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .hero-server-address:hover { border-color: var(--guide-olive-bright); background: linear-gradient(120deg, rgba(16, 20, 11, .96), rgba(43, 50, 24, .86)); transform: translateY(-1px); } .hero-server-address:focus-visible { outline: 3px solid rgba(184, 207, 75, .28); outline-offset: 3px; } .hero-server-address[data-copied="true"] { border-color: var(--guide-olive-bright); background: rgba(57, 68, 26, .88); } .hero-server-address-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid rgba(184, 207, 75, .25); border-radius: 7px; background: rgba(184, 207, 75, .1); color: var(--guide-olive-bright); } .hero-server-address-icon i { font-size: 20px; } .hero-server-address-text { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .hero-server-address-text > span { color: #b8b3a5; font: 800 10px/1.1 var(--guide-body); letter-spacing: .09em; text-transform: uppercase; } .hero-server-address-text strong { overflow-wrap: anywhere; color: #f7f2e8; font: 700 clamp(19px, 1.7vw, 24px)/1.15 var(--guide-body); letter-spacing: -.015em; text-transform: lowercase; } .hero-server-address-action { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding-left: 13px; border-left: 1px solid rgba(231, 220, 197, .18); color: var(--guide-olive-bright); font: 800 10px var(--guide-body); letter-spacing: .05em; text-transform: uppercase; } .hero-server-address-action i { font-size: 16px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; justify-self: end; } .guide-button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 12px; padding: 0 28px; border: 1px solid rgba(231, 220, 197, 0.34); border-radius: 7px; cursor: pointer; font-family: var(--guide-display); font-size: 20px; font-weight: 600; letter-spacing: 0.01em; } .guide-button.primary { border-color: #9ead34; background: #8d992d; color: #101208; } .guide-button.primary:hover { background: var(--guide-olive-bright); } .guide-button.secondary { border-color: #f5eee1; background: #e9e1d2; color: #171811; } .guide-button.secondary:hover { border-color: var(--guide-olive-bright); background: #f5efe3; color: #101208; } .guide-button i { font-size: 24px; } .welcome-strip { display: flex; min-height: 66px; align-items: center; justify-content: space-between; gap: 28px; padding: 18px clamp(28px, 4vw, 62px); border-bottom: 1px solid var(--guide-paper-line); background: var(--guide-paper) url("/assets/parchment-texture.png?v=20260805-1") center / 720px auto repeat; color: var(--guide-ink); } .welcome-strip > p { font-size: clamp(20px, 1.7vw, 25px); } .welcome-strip > p strong { color: var(--guide-rust); font-family: var(--guide-display); font-weight: 700; } .public-freshness { display: flex; align-items: center; gap: 14px; color: var(--guide-ink-soft); font-size: 16px; font-weight: 600; white-space: nowrap; } .public-freshness .link-state { color: #626a22; font: 800 16px var(--guide-body); } .public-freshness .link-state i { width: 10px; height: 10px; } .public-freshness .link-state[data-state="fault"] { color: #a44d35; } .paper-content { background: var(--guide-paper) url("/assets/parchment-texture.png?v=20260805-1") center top / 720px auto repeat; color: var(--guide-ink); } .player-world-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(360px, 0.85fr); padding: clamp(32px, 3.4vw, 52px) clamp(30px, 4vw, 62px) 34px; border-bottom: 1px solid var(--guide-paper-line); } .players-section, .world-section, .mods-section { scroll-margin-top: 102px; } .players-section { display: flex; min-width: 0; padding-right: clamp(32px, 4vw, 64px); flex-direction: column; } .world-section { min-width: 0; padding-left: clamp(32px, 4vw, 64px); border-left: 1px solid var(--guide-paper-line); } .guide-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 20px; } .guide-heading > div { display: flex; min-width: 0; align-items: center; gap: 16px; } .guide-heading i { color: #68751d; font-size: clamp(34px, 3.2vw, 50px); } .guide-heading h2 { color: var(--guide-ink); font: 700 clamp(34px, 3.3vw, 50px)/1 var(--guide-display); letter-spacing: -0.02em; text-transform: uppercase; } .guide-heading > strong { color: #68751d; font-size: 22px; } .public-roster { display: grid; min-height: 290px; align-content: center; margin-top: 18px; } .player-empty { position: relative; top: 18px; display: flex; align-items: center; flex-direction: column; text-align: center; } .player-empty img { display: block; width: min(390px, 74%); max-height: 190px; object-fit: cover; object-position: center 55%; mix-blend-mode: multiply; } .player-empty strong { margin-top: 4px; font: 700 clamp(25px, 2.5vw, 36px)/1.12 var(--guide-display); text-transform: uppercase; } .player-empty p { margin-top: 10px; color: var(--guide-ink-soft); font-size: clamp(18px, 1.55vw, 22px); } .public-player-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; align-self: stretch; } .public-player-row { display: grid; min-height: 74px; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--guide-paper-line); } .public-player-avatar { position: relative; display: grid; width: 46px; height: 46px; place-items: center; overflow: hidden; border: 2px solid rgba(104, 117, 29, .52); border-radius: 50%; background: rgba(104, 117, 29, .09); box-shadow: 0 3px 0 rgba(74, 45, 33, .11); } .public-player-avatar img { width: 100%; height: 100%; object-fit: cover; } .public-player-avatar i { display: none; color: #68751d; font-size: 34px; } .public-player-avatar.is-fallback { border-color: transparent; background: transparent; box-shadow: none; } .public-player-avatar.is-fallback img { display: none; } .public-player-avatar.is-fallback i { display: block; } .public-player-row strong { overflow: hidden; font-size: 21px; text-overflow: ellipsis; white-space: nowrap; } .public-player-row span { color: #68751d; font-size: 16px; font-weight: 800; } .section-freshness { margin-top: 18px; color: var(--guide-ink-soft); font-size: 16px; font-weight: 600; } .players-section .section-freshness { margin-top: auto; padding: 28px 0 8px; } .world-rules { margin-top: 26px; } .world-rules article { display: grid; min-height: 118px; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 20px; border-bottom: 1px solid var(--guide-paper-line); } .world-rules article:last-child { border-bottom: 0; } .world-rules > article > i { color: #68751d; font-size: 46px; text-align: center; } .world-rules article > div { min-width: 0; padding: 16px 0; } .world-rules article[data-state="enabled"] > i { color: var(--guide-rust); } .world-rules strong { display: block; max-width: 24ch; font: 700 clamp(23px, 2vw, 29px)/1.12 var(--guide-display); text-transform: uppercase; text-wrap: balance; } .world-rules p { max-width: 31ch; margin-top: 8px; color: var(--guide-ink-soft); font-size: 18px; line-height: 1.48; text-wrap: pretty; } .mods-section { display: grid; grid-template-columns: minmax(250px, 0.72fr) minmax(0, 2fr); align-items: center; gap: clamp(28px, 3.8vw, 58px); padding: 34px clamp(30px, 4vw, 62px) 46px; } .mods-intro { min-width: 0; } .mods-intro > p { margin-top: 13px; color: var(--guide-ink-soft); font-size: 20px; font-weight: 600; line-height: 1.4; } .mods-library-link, .player-footer button { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 0; border: 0; border-bottom: 2px solid #77851f; background: transparent; color: #5e6917; cursor: pointer; font-size: 17px; font-weight: 800; } .mod-preview { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .mod-preview-card { position: relative; display: block; min-width: 0; aspect-ratio: 1.75; overflow: hidden; border: 1px solid rgba(41, 39, 29, 0.28); border-radius: 8px; background: #24251d; box-shadow: 0 10px 22px rgba(48, 39, 22, 0.14); } .mod-preview-card img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 220ms ease; } .mod-preview-fallback, .mod-library-fallback { display: grid; width: 100%; height: 100%; place-items: center; background: #24251d; color: #93a337; font-size: 46px; } .mod-preview-card:hover img { transform: scale(1.035); } .mod-preview-card span { position: absolute; right: 0; bottom: 0; left: 0; overflow: hidden; padding: 24px 14px 12px; background: rgba(10, 10, 8, 0.86); color: #f5efe2; font: 600 19px/1.05 var(--guide-display); text-overflow: ellipsis; white-space: nowrap; } .mods-section > .section-freshness { display: none; } .paper-empty { grid-column: 1 / -1; color: var(--guide-ink-soft); font-size: 18px; } .player-footer { display: flex; min-height: 64px; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 8px 0; color: #928b7a; font-size: 16px; font-weight: 600; } .player-footer button { margin-top: 0; color: #b2c43d; } .mod-library { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: #090a08; color: #f2eee3; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .mod-library-header { display: flex; min-height: 116px; align-items: center; justify-content: space-between; gap: 24px; padding: 22px clamp(24px, 4vw, 64px); border-bottom: 1px solid rgba(231, 220, 197, 0.15); background: #0c0e0b; } .mod-library-header p { color: #94a62f; font-size: 16px; font-weight: 700; } .mod-library-header h2 { margin-top: 4px; font: 700 clamp(36px, 3.2vw, 52px)/1 "Oswald", sans-serif; } .mod-library-actions { display: flex; gap: 10px; } .mod-library-actions button { display: inline-flex; min-height: 50px; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid rgba(231, 220, 197, 0.22); border-radius: 6px; background: #141711; color: #ece6d8; cursor: pointer; font-size: 16px; font-weight: 700; } .mod-library-body { width: min(1440px, 100%); min-height: 0; margin: 0 auto; padding: 30px clamp(22px, 4vw, 60px) 48px; overflow-y: auto; } .mod-library-toolbar { display: grid; grid-template-columns: auto minmax(260px, 620px) 1fr; align-items: center; gap: 18px; } .mod-library-toolbar label { font-size: 17px; font-weight: 800; } .mod-library-toolbar > div { display: grid; min-height: 54px; grid-template-columns: 48px minmax(0, 1fr); align-items: center; border: 1px solid rgba(231, 220, 197, 0.22); border-radius: 7px; background: #121510; } .mod-library-toolbar > div i { color: #8f9c32; font-size: 20px; text-align: center; } .mod-library-toolbar input { height: 52px; min-width: 0; padding: 0 16px 0 0; border: 0; outline: 0; background: transparent; font-size: 18px; } .mod-library-toolbar > strong { justify-self: end; color: #a9ba3c; font-size: 18px; } .mod-library-note { margin: 16px 0 24px; color: #918b7d; font-size: 16px; } .mod-library-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .mod-library-card { display: grid; min-width: 0; min-height: 112px; grid-template-columns: 160px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 10px; border: 1px solid rgba(231, 220, 197, 0.13); border-radius: 8px; background: #11130f; } .mod-library-card img { display: block; width: 160px; height: 90px; border-radius: 5px; object-fit: cover; background: #22251d; } .mod-library-fallback { width: 160px; height: 90px; border-radius: 5px; } .mod-library-card h3 { overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; } .mod-library-card p { margin-top: 8px; color: #898f80; font-size: 16px; } .mod-library-card > i { padding: 0 10px; color: #9eae39; font-size: 22px; } .mod-library .empty-copy { font-size: 17px; } @media (max-width: 1180px) { .player-header { grid-template-columns: minmax(260px, 1fr) auto; } .player-nav { display: none; } .hero-copy { width: 100%; } .player-world-grid { grid-template-columns: minmax(0, 1.25fr) minmax(330px, 0.85fr); } .mods-section { grid-template-columns: 1fr; } .mod-preview { width: 100%; } } @media (max-width: 820px) { html { scroll-padding-top: 142px; } .player-header { min-height: 78px; padding: 0 16px; } .player-brand img { width: 48px; height: 48px; flex-basis: 48px; } .player-brand strong { font-size: 27px; } .player-header-actions .admin-trigger span { display: none; } .player-header-actions .admin-trigger { min-width: 50px; padding: 0; justify-content: center; } .player-mobile-nav { position: sticky; z-index: 49; top: var(--app-header-height, 82px); display: grid; min-height: 58px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; padding: 7px 10px; border-bottom: 1px solid rgba(231, 220, 197, .16); background: rgba(9, 11, 8, .97); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); backdrop-filter: blur(18px); } .player-mobile-nav a { display: inline-flex; min-width: 0; min-height: 44px; align-items: center; justify-content: center; gap: 8px; padding: 0 10px; border: 1px solid rgba(231, 220, 197, .16); border-radius: 7px; background: #151812; color: #d6d0c2; font-size: 12px; font-weight: 800; letter-spacing: .025em; } .player-mobile-nav a > i { color: #979d86; font-size: 17px; } .player-mobile-nav a:hover { border-color: rgba(184, 207, 75, .5); color: #fff; } .player-mobile-nav .mobile-shop-link { border-color: #a8ba38; background: #899627; color: #111307; box-shadow: 0 8px 22px rgba(117, 131, 31, .22); } .player-mobile-nav .mobile-shop-link > i { color: #111307; } .player-mobile-nav .mobile-shop-link:hover { background: #a8ba38; color: #111307; } .player-mobile-nav .mobile-tickets-link { border-color: rgba(168, 186, 56, .55); } .player-mobile-nav .mobile-tickets-link > i { color: #b8ca4a; } .player-mobile-nav .mobile-ranking-link { border-color: rgba(207, 183, 74, .52); } .player-mobile-nav .mobile-ranking-link > i { color: #d1c85b; } .field-guide { padding: 12px 10px 30px; } .guide-frame { border-radius: 16px; } .hero-stage { min-height: 620px; align-items: flex-end; background-position: 62% center; } .hero-copy { display: flex; width: 100%; padding: 42px 28px; flex-direction: column; background: rgba(7, 8, 6, 0.86); } .hero-copy h1 { font-size: clamp(56px, 14vw, 78px); line-height: 1.06; } .hero-facts { flex-wrap: wrap; font-size: 25px; } .hero-actions { display: grid; width: 100%; grid-template-columns: 1fr; } .guide-button { width: 100%; font-size: 20px; } .welcome-strip { align-items: flex-start; flex-direction: column; } .public-freshness { align-items: flex-start; flex-direction: column; white-space: normal; } .player-world-grid { grid-template-columns: 1fr; padding: 38px 24px 20px; } .players-section { padding-right: 0; } .world-section { margin-top: 32px; padding: 34px 0 0; border-top: 1px solid var(--guide-paper-line); border-left: 0; } .public-player-list { grid-template-columns: 1fr; } .mods-section { padding: 32px 24px 38px; } .mod-preview { grid-template-columns: 1fr; } .mod-preview-card { aspect-ratio: 2.25; } .player-footer { align-items: flex-start; padding: 18px 8px 0; flex-direction: column; } .mod-library-header { min-height: 92px; padding: 16px; } .mod-library-header p { display: none; } .mod-library-actions #modLibraryClose span { display: none; } .mod-library-toolbar { grid-template-columns: 1fr auto; } .mod-library-toolbar label { grid-column: 1 / -1; } .mod-library-toolbar > strong { align-self: end; } .mod-library-list { grid-template-columns: 1fr; } } @media (max-width: 560px) { html { scroll-padding-top: 132px; } .player-header { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .player-brand { gap: 9px; } .player-brand img { width: 42px; height: 42px; flex-basis: 42px; } .player-brand strong { font-size: 23px; } .player-header-actions { gap: 7px; } .player-header-actions .language-toggle, .player-header-actions .admin-trigger { min-width: 44px; min-height: 44px; padding: 0; } .player-mobile-nav { min-height: 56px; padding: 6px 9px; } .player-mobile-nav a { min-height: 44px; gap: 7px; padding: 0 8px; font-size: 11px; } .hero-stage { min-height: 570px; } .hero-copy { padding: 34px 20px; } .hero-copy h1 { font-size: clamp(52px, 16vw, 68px); line-height: 1.07; } .hero-copy h1 strong { margin-top: 10px; } .hero-facts { gap: 13px; } .hero-fact-divider { display: none; } .hero-version { width: 100%; } .hero-server-address { width: 100%; min-height: 72px; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 11px; padding: 10px 12px; } .hero-server-address-icon { width: 40px; height: 40px; } .hero-server-address-text strong { font-size: clamp(17px, 5.2vw, 20px); } .hero-server-address-action { padding-left: 11px; } .hero-server-address-action span { display: none; } .welcome-strip { padding: 22px; } .welcome-strip > p { font-size: 21px; } .guide-heading { align-items: flex-start; } .guide-heading > div { align-items: flex-start; } .guide-heading h2 { font-size: 36px; } .guide-heading i { font-size: 36px; } .player-empty { top: 12px; } .player-empty img { width: 94%; } .player-empty strong { font-size: 28px; } .world-rules article { min-height: 132px; grid-template-columns: 48px minmax(0, 1fr); gap: 15px; } .world-rules > article > i { font-size: 38px; } .world-rules strong { font-size: 24px; } .mod-library-header h2 { font-size: 34px; } .mod-library-body { padding: 24px 14px 38px; } .mod-library-toolbar { grid-template-columns: 1fr; } .mod-library-toolbar > strong { justify-self: start; } .mod-library-card { min-height: 94px; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } .mod-library-card img { width: 92px; height: 70px; } .mod-library-fallback { width: 92px; height: 70px; } .mod-library-card > i { display: none; } .mod-library-card h3 { font-size: 17px; } .mod-library-card p { font-size: 15px; } } /* Protected field-guide workspace */ .admin-workspace { --admin-ink: #211f17; --admin-ink-soft: #625c4d; --admin-paper: #e9dec7; --admin-line: rgba(51, 47, 35, 0.22); --admin-olive: #77831f; --admin-olive-bright: #a8ba38; --admin-rust: #9f4e2e; position: fixed; inset: 0; z-index: 90; display: grid; min-height: 100dvh; grid-template-rows: 82px minmax(0, 1fr); overflow: hidden; background: #090a08; color: #f2eee2; font-family: var(--guide-body, "Inter", sans-serif); } .admin-workspace::before { inset: 82px 0 0; height: auto; background: radial-gradient(circle at 72% 0%, rgba(126, 142, 47, 0.1), transparent 34rem); opacity: 1; } .admin-header { position: relative; z-index: 3; display: grid; min-height: 82px; grid-template-columns: minmax(300px, 1fr) auto minmax(300px, 1fr); align-items: center; gap: 30px; padding: 0 clamp(24px, 4vw, 64px); border-bottom: 1px solid rgba(231, 220, 197, 0.16); background: rgba(7, 8, 6, 0.97); backdrop-filter: blur(18px); } .admin-brand { display: inline-flex; min-width: 0; align-items: center; gap: 16px; } .admin-brand .brand-mark { width: 54px; height: 54px; flex: 0 0 54px; } .admin-brand > div { min-width: 0; } .admin-brand h2 { overflow: hidden; margin: 0; color: #f2eee2; font: 700 clamp(27px, 2.2vw, 38px)/1 var(--guide-display, "Oswald", sans-serif); letter-spacing: -0.02em; text-overflow: ellipsis; white-space: nowrap; } .admin-brand p { margin-top: 5px; color: var(--admin-olive-bright); font: 700 11px var(--guide-body, "Inter", sans-serif); letter-spacing: .06em; } .admin-session { display: inline-flex; min-height: 48px; align-items: center; gap: 10px; padding: 0 18px; border: 1px solid rgba(231, 220, 197, .18); border-radius: 7px; background: rgba(22, 23, 17, .78); } .admin-session > i { color: var(--admin-olive-bright); font-size: 18px; } .admin-session span { color: #a9a393; font: 700 12px var(--guide-body, "Inter", sans-serif); } .admin-session strong { color: #e9e3d5; font: 700 12px var(--guide-body, "Inter", sans-serif); } .admin-header-actions { display: flex; align-items: center; justify-self: end; gap: 10px; } .admin-header-actions button { min-height: 50px; justify-content: center; gap: 9px; padding: 0 16px; border-color: rgba(231, 220, 197, .24); border-radius: 7px; background: rgba(22, 23, 17, .88); color: #eee8da; font: 700 15px var(--guide-body, "Inter", sans-serif); } .admin-header-actions button:hover { border-color: var(--admin-olive-bright); background: #1d2015; } .admin-header-actions .language-toggle { min-width: 58px; color: var(--admin-olive-bright); } .admin-layout { position: relative; z-index: 1; display: grid; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; grid-template-columns: clamp(270px, 18vw, 330px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); max-width: 100vw; border: 0; overflow: hidden; } .admin-nav { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow-x: hidden; overflow-y: auto; border: 0; border-right: 1px solid rgba(231, 220, 197, .2); border-radius: 0; background: linear-gradient(180deg, rgba(168, 186, 56, .045), transparent 28%), #11130e; scrollbar-color: var(--admin-olive) #10110d; } .admin-nav-button { position: relative; display: grid; width: 100%; min-height: 94px; flex: 0 0 auto; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 17px clamp(17px, 1.45vw, 24px); border: 0; border-right: 0; border-bottom: 1px solid rgba(231, 220, 197, .11); background: transparent; color: #eee8da; text-align: left; cursor: pointer; } .admin-nav-button:last-child { border-right: 0; } .admin-nav-button::before { inset: 13px auto 13px 0; width: 4px; height: auto; border-radius: 0 999px 999px 0; background: transparent; } .admin-nav-button:hover { background: rgba(255, 255, 255, .035); } .admin-nav-button.active { background: rgba(168, 186, 56, .1); } .admin-nav-button.active::before { background: var(--admin-olive-bright); } .admin-nav-button > i { display: block; width: auto; height: auto; border: 0; background: transparent; color: #8e8a78; font-size: 27px; } .admin-nav-button.active > i { border: 0; background: transparent; color: var(--admin-olive-bright); } .admin-nav-button small { display: block; overflow: hidden; color: #898576; font: 700 10px var(--guide-body, "Inter", sans-serif); text-overflow: ellipsis; white-space: nowrap; } .admin-nav-button strong { display: block; overflow: hidden; margin-top: 5px; color: #f3eee2; font: 600 19px var(--guide-display, "Oswald", sans-serif); letter-spacing: .015em; text-overflow: ellipsis; white-space: nowrap; } .admin-nav-badge { display: grid; min-width: 25px; height: 25px; place-items: center; align-self: center !important; padding: 0 7px !important; border: 1px solid rgba(168, 186, 56, .38); border-radius: 999px; background: rgba(168, 186, 56, .13); color: var(--admin-olive-bright) !important; font: 800 11px var(--guide-body, "Inter", sans-serif) !important; } .admin-stage { min-width: 0; min-height: 0; max-width: 100%; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 0; background: var(--admin-paper) url("/assets/parchment-texture.png?v=20260805-1") center / 720px auto repeat; color: var(--admin-ink); scrollbar-color: var(--admin-olive) #cfc4ad; } .admin-stage-head { position: relative; top: auto; z-index: 2; display: flex; min-height: 190px; align-items: end; justify-content: space-between; gap: 24px; padding: 34px clamp(28px, 4vw, 60px); border-bottom: 1px solid var(--admin-line); background: linear-gradient(90deg, rgba(7, 8, 6, .9) 0%, rgba(7, 8, 6, .64) 58%, rgba(7, 8, 6, .8) 100%), url("/assets/knox-safehouse.png?v=20260805-1") center 46% / cover; backdrop-filter: none; } .admin-stage-head p { color: var(--admin-olive-bright); font: 700 13px var(--guide-body, "Inter", sans-serif); letter-spacing: .06em; } .admin-stage-head h3 { margin-top: 7px; color: #f4efe4; font: 700 clamp(44px, 4.6vw, 68px)/.96 var(--guide-display, "Oswald", sans-serif); letter-spacing: -.025em; } .admin-stage-head > span { display: inline-flex; min-height: 42px; align-items: center; padding: 0 14px; border: 1px solid rgba(231, 220, 197, .3); border-radius: 6px; background: rgba(7, 8, 6, .76); color: #e6e0d2; font: 700 12px var(--guide-body, "Inter", sans-serif); white-space: nowrap; } .admin-view { display: none; padding: clamp(26px, 3vw, 46px) clamp(24px, 4vw, 60px) 56px; } .admin-view.active { display: block; } .admin-content { display: grid; gap: 24px; } .admin-content > .empty-copy { color: var(--admin-ink-soft); } .admin-overview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .admin-overview-summary article { min-width: 0; min-height: 166px; padding: 20px; border: 1px solid var(--admin-line); border-radius: 11px; background: rgba(255, 251, 241, .38); box-shadow: 0 7px 20px rgba(59, 51, 35, .055); } .admin-overview-summary article > div { display: flex; align-items: center; gap: 9px; color: var(--admin-olive); } .admin-overview-summary article > div i { font-size: 22px; } .admin-overview-summary article > div span { font-size: 13px; font-weight: 800; } .admin-overview-summary article > strong { display: block; overflow: hidden; margin-top: 18px; color: var(--admin-ink); font: 700 clamp(28px, 2.6vw, 40px)/1 var(--guide-display, "Oswald", sans-serif); text-overflow: ellipsis; white-space: nowrap; } .admin-overview-summary article > strong[data-state="online"] { color: var(--admin-olive); } .admin-overview-summary article > strong[data-state="starting"] { color: #a86a27; } .admin-overview-summary article > strong[data-state="offline"], .admin-overview-summary article > strong[data-state="failed"] { color: var(--admin-rust); } .admin-overview-summary article > p { margin-top: 11px; color: var(--admin-ink-soft); font-size: 14px; line-height: 1.45; } .admin-overview-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(340px, .75fr); gap: 18px; align-items: stretch; } .admin-card { overflow: hidden; border: 1px solid var(--admin-line); border-radius: 11px; background: rgba(255, 251, 241, .34); color: var(--admin-ink); box-shadow: 0 7px 22px rgba(59, 51, 35, .05); } .admin-card-head { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 20px; border-bottom: 1px solid var(--admin-line); background: rgba(255, 252, 245, .25); } .admin-card-head > div > span { color: var(--admin-rust); font-size: 11px; font-weight: 800; letter-spacing: .06em; } .admin-card-head h4 { margin: 4px 0 0; color: var(--admin-ink); font: 700 25px var(--guide-display, "Oswald", sans-serif); letter-spacing: .01em; } .admin-card-head > span { color: var(--admin-ink-soft); font: 700 12px var(--guide-body, "Inter", sans-serif); } .admin-utilization-card { min-width: 0; background: #11130f; color: #f2eee2; } .admin-utilization-card .admin-card-head { border-color: rgba(231, 220, 197, .13); background: #171a13; } .admin-utilization-card .admin-card-head h4 { color: #f2eee2; } .admin-utilization-card .admin-card-head > div > span { color: var(--admin-olive-bright); } .admin-utilization-card .admin-card-head > span { color: #999382; } .admin-chart-legend { display: flex; min-height: 64px; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 12px 20px; border-bottom: 1px solid rgba(231, 220, 197, .1); } .admin-chart-legend > button { display: inline-grid; min-height: 38px; grid-template-columns: 16px auto auto; align-items: center; gap: 8px; padding: 0 9px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #a6a293; cursor: pointer; font-size: 12px; transition: border-color .18s ease, background .18s ease, opacity .18s ease; } .admin-chart-legend > button:hover, .admin-chart-legend > button:focus-visible, .admin-chart-legend > button.active { border-color: rgba(231, 220, 197, .16); background: rgba(255, 255, 255, .045); } .admin-chart-legend > button[aria-pressed="true"] { border-color: currentColor; background: rgba(255, 255, 255, .07); } .admin-chart-legend i { width: 16px; height: 5px; background: currentColor; image-rendering: pixelated; } .admin-chart-legend b { font-size: 11px; } .admin-chart-legend strong { color: #f4efe4; font: 700 16px var(--guide-display, "Oswald", sans-serif); } .admin-chart-legend .memory strong { font-size: 14px; white-space: nowrap; } .admin-chart-legend .cpu { color: #6fc1e1; } .admin-chart-legend .process { color: var(--admin-olive-bright); } .admin-chart-legend .memory { color: #aa8bdd; } .admin-chart-shell { height: 310px; margin: 18px; border-color: rgba(231, 220, 197, .14); border-radius: 8px; cursor: crosshair; } .admin-chart-shell .trend-grid-lines { stroke: rgba(231, 220, 197, .1); } .admin-chart-axis { position: absolute; inset: 12px auto 12px 8px; z-index: 5; display: flex; flex-direction: column; justify-content: space-between; color: #716d62; font: 700 10px var(--guide-body, "Inter", sans-serif); pointer-events: none; } .admin-chart-times { position: absolute; right: 18px; bottom: 8px; left: 48px; z-index: 5; display: flex; justify-content: space-between; color: #777266; font: 700 10px var(--guide-body, "Inter", sans-serif); pointer-events: none; } .admin-chart-cursor { position: absolute; top: 12px; bottom: 12px; z-index: 4; width: 1px; border-left: 1px dashed rgba(244, 239, 228, .45); pointer-events: none; } .admin-chart-tooltip { top: 15px; min-width: 300px; gap: 8px; padding: 12px 13px; border-radius: 6px; } .admin-chart-tooltip time { color: #989283; font: 700 11px var(--guide-body, "Inter", sans-serif); } .admin-chart-tooltip span { grid-template-columns: 8px 1fr auto; color: #a9a394; font: 700 11px var(--guide-body, "Inter", sans-serif); } .admin-chart-tooltip strong { color: #f3eee2; font: 700 12px var(--guide-body, "Inter", sans-serif); } .admin-chart-shell .chart-empty { background: rgba(8, 11, 8, .78); color: #aaa493; font: 700 14px var(--guide-body, "Inter", sans-serif); } .admin-health-card { display: grid; grid-template-rows: auto 1fr; } .admin-health-card .admin-card-head > span[data-state="good"] { color: var(--admin-olive); } .admin-health-card .admin-card-head > span[data-state="warn"] { color: var(--admin-rust); } .admin-health-list { display: grid; } .admin-health-list article { display: grid; min-height: 104px; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; padding: 17px 20px; border-bottom: 1px solid var(--admin-line); } .admin-health-list article:last-child { border-bottom: 0; } .admin-health-list article > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(119, 131, 31, .12); color: var(--admin-olive); font-size: 21px; } .admin-health-list span { color: var(--admin-rust); font-size: 11px; font-weight: 800; letter-spacing: .04em; } .admin-health-list strong { display: block; margin-top: 4px; color: var(--admin-ink); font: 700 21px var(--guide-display, "Oswald", sans-serif); } .admin-health-list p { margin-top: 4px; color: var(--admin-ink-soft); font-size: 13px; line-height: 1.4; } .admin-toolbar { display: grid; grid-template-columns: auto minmax(260px, 620px); align-items: center; gap: 18px; margin-bottom: 20px; } .admin-toolbar label { color: var(--admin-rust); font: 800 13px var(--guide-body, "Inter", sans-serif); } .admin-toolbar input { height: 52px; padding: 0 16px; border: 1px solid var(--admin-line); border-radius: 7px; outline: 0; background: rgba(255, 252, 245, .5); color: var(--admin-ink); font-size: 16px; } .admin-toolbar input:focus { border-color: var(--admin-olive); box-shadow: 0 0 0 3px rgba(119, 131, 31, .12); } .admin-toolbar input::placeholder { color: #847d6d; } .admin-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .admin-table th, .admin-table td { padding: 16px 17px; border-bottom: 1px solid var(--admin-line); text-align: left; vertical-align: top; } .admin-table tr:last-child td { border-bottom: 0; } .admin-table th { color: var(--admin-rust); font: 800 11px var(--guide-body, "Inter", sans-serif); letter-spacing: .035em; } .admin-table td { overflow-wrap: anywhere; color: var(--admin-ink-soft); font: 500 13px/1.5 var(--guide-body, "Inter", sans-serif); } .admin-table td strong { color: var(--admin-ink); font-size: 14px; } .admin-table tr.online td:first-child strong { color: var(--admin-olive); } .accounts-table { min-width: 1080px; } .accounts-table th:nth-child(1) { width: 12%; } .accounts-table th:nth-child(2) { width: 12%; } .accounts-table th:nth-child(3) { width: 13%; } .accounts-table th:nth-child(4) { width: 9%; } .accounts-table th:nth-child(5) { width: 10%; } .accounts-table th:nth-child(6) { width: 14%; } .accounts-table th:nth-child(7) { width: 18%; } .accounts-table th:nth-child(8) { width: 12%; } .accounts-table th:nth-child(7), .accounts-table td:nth-child(7), .accounts-table th:nth-child(8), .accounts-table td:nth-child(8) { white-space: nowrap; } .account-balance { display: inline-flex; min-width: 82px; align-items: center; gap: 5px; padding: 6px 9px; border: 1px solid rgba(159, 78, 46, .24); border-radius: 999px; background: rgba(159, 78, 46, .08); color: var(--admin-rust); white-space: nowrap; } .account-balance i { font-size: 15px; } .account-balance strong { color: var(--admin-ink); font-size: 14px; } .account-balance small { color: var(--admin-rust); font-size: 10px; font-weight: 800; } .account-balance-edit { position: relative; display: inline-grid; padding: 0; border: 0; border-radius: 999px; outline: 0; background: transparent; cursor: pointer; vertical-align: top; } .account-balance-edit > span { grid-area: 1 / 1; } .account-balance-edit .account-balance { transition: opacity .18s ease, transform .18s ease; } .account-balance-pencil { position: relative; z-index: 1; display: grid; min-width: 82px; min-height: 34px; place-items: center; border: 1px solid var(--admin-olive); border-radius: 999px; background: var(--admin-olive); color: #fffdf5; box-shadow: 0 8px 20px rgba(68, 75, 20, .24); opacity: 0; transform: scale(.88); transition: opacity .18s ease, transform .18s ease; } .account-balance-pencil i { font-size: 14px; } .account-balance-edit:hover .account-balance, .account-balance-edit:focus-visible .account-balance { opacity: .08; transform: scale(.92); } .account-balance-edit:hover .account-balance-pencil, .account-balance-edit:focus-visible .account-balance-pencil { opacity: 1; transform: scale(1); } .account-balance-edit:focus-visible { box-shadow: 0 0 0 4px rgba(119, 131, 31, .2); } .account-balance-unavailable { opacity: .55; } .account-economy-cell { display: grid; justify-items: start; gap: 7px; } .account-survivor-rank { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; color: var(--admin-olive); font-size: 9px; font-weight: 800; line-height: 1.2; white-space: nowrap; } .account-survivor-rank > i { color: var(--admin-rust); font-size: 12px; } .account-survivor-rank > strong { overflow: hidden; font-size: 9px !important; text-overflow: ellipsis; } .account-survivor-rank > small { color: var(--admin-ink-soft); font-size: 8px; } .balance-dialog { --admin-ink: #211f17; --admin-ink-soft: #625c4d; --admin-paper: #e9dec7; --admin-line: rgba(51, 47, 35, .22); --admin-olive: #77831f; --admin-olive-bright: #a8ba38; --admin-rust: #9f4e2e; width: min(650px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid #514c3f; border-radius: 16px; background: var(--admin-paper) url("/assets/parchment-texture.png?v=20260805-1") center / 720px auto repeat; box-shadow: 0 34px 110px rgba(0, 0, 0, .7); color: var(--admin-ink); color-scheme: light; } .balance-dialog::backdrop { background: rgba(5, 7, 5, .82); backdrop-filter: blur(7px); } .balance-dialog form { position: relative; padding: clamp(28px, 4vw, 46px); } .balance-dialog-close { position: absolute; top: 20px; right: 20px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--admin-line); border-radius: 50%; background: rgba(255, 252, 244, .56); color: var(--admin-ink-soft); cursor: pointer; } .balance-dialog-close:hover:not(:disabled), .balance-dialog-close:focus-visible { border-color: var(--admin-rust); color: var(--admin-rust); } .balance-dialog-icon { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 22px; border-radius: 50%; background: rgba(159, 78, 46, .12); color: var(--admin-rust); font-size: 27px; } .balance-dialog form > p:first-of-type { color: var(--admin-rust); font-size: 11px; font-weight: 800; letter-spacing: .07em; } .balance-dialog h2 { max-width: 520px; margin-top: 7px; font: 700 clamp(34px, 4vw, 46px)/1.02 var(--guide-display, "Oswald", sans-serif); letter-spacing: -.015em; } .balance-dialog-description { max-width: 555px; margin-top: 14px; color: var(--admin-ink-soft); font-size: 14px; line-height: 1.6; } .balance-account-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; margin-top: 26px; padding: 18px 20px; border: 1px solid var(--admin-line); border-radius: 10px; background: rgba(255, 251, 241, .46); } .balance-account-card > span { display: flex; align-items: center; gap: 8px; color: var(--admin-rust); font-size: 10px; font-weight: 800; letter-spacing: .05em; } .balance-account-card > span i { color: var(--admin-olive); font-size: 16px; } .balance-account-card > strong { grid-column: 1; color: var(--admin-ink); font: 700 24px var(--guide-display, "Oswald", sans-serif); overflow-wrap: anywhere; } .balance-account-card > small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--admin-ink-soft); font-size: 10px; font-weight: 800; text-align: right; } .balance-account-card > small b { display: block; margin-top: 5px; color: var(--admin-rust); font: 700 19px var(--guide-display, "Oswald", sans-serif); } .balance-input-label { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 25px; color: var(--admin-ink); font-size: 12px; font-weight: 800; } .balance-input-label small { color: var(--admin-ink-soft); font-size: 9px; letter-spacing: .035em; } .balance-input-shell { display: grid; min-height: 70px; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 9px; padding: 0 20px; border: 1px solid var(--admin-line); border-radius: 9px; background: rgba(255, 253, 248, .7); transition: border-color .18s ease, box-shadow .18s ease; } .balance-input-shell:focus-within { border-color: var(--admin-olive); box-shadow: 0 0 0 4px rgba(119, 131, 31, .13); } .balance-input-shell > i { color: var(--admin-rust); font-size: 22px; } .balance-input-shell input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--admin-ink); font: 700 32px var(--guide-display, "Oswald", sans-serif); } .balance-input-shell > span { color: var(--admin-rust); font-size: 12px; font-weight: 800; } .balance-change-preview { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; padding: 0 15px; border-radius: 7px; background: rgba(93, 113, 128, .08); color: #5d7180; } .balance-change-preview > span { font-size: 10px; font-weight: 800; letter-spacing: .045em; } .balance-change-preview > strong { font-size: 12px; font-weight: 800; text-align: right; } .balance-change-preview[data-tone="credit"] { background: rgba(119, 131, 31, .12); color: var(--admin-olive); } .balance-change-preview[data-tone="debit"], .balance-change-preview[data-tone="invalid"] { background: rgba(165, 63, 45, .1); color: #a53f2d; } .balance-dialog-error { min-height: 22px; margin-top: 10px; color: #a53f2d; font-size: 12px; font-weight: 700; } .balance-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .balance-dialog-actions button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid var(--admin-line); border-radius: 8px; background: transparent; color: var(--admin-ink); cursor: pointer; font-size: 12px; font-weight: 800; } .balance-dialog-actions button:last-child { min-width: 170px; border-color: var(--admin-olive); background: var(--admin-olive); color: #fffdf5; } .balance-dialog-actions button:hover:not(:disabled), .balance-dialog-actions button:focus-visible { transform: translateY(-1px); border-color: var(--admin-rust); } .balance-dialog-actions button:last-child:hover:not(:disabled), .balance-dialog-actions button:last-child:focus-visible { border-color: #566014; background: #68721b; } .balance-dialog button:disabled { cursor: wait; opacity: .48; } .settings-list { display: grid; } .setting-row { display: grid; min-height: 66px; grid-template-columns: minmax(160px, .55fr) minmax(220px, 1fr) minmax(220px, 1fr); align-items: center; gap: 18px; padding: 13px 18px; border-bottom: 1px solid var(--admin-line); } .setting-row:last-child { border-bottom: 0; } .setting-row span { color: var(--admin-rust); font: 800 11px var(--guide-body, "Inter", sans-serif); } .setting-row code { color: var(--admin-ink); font: 600 13px/1.5 var(--mono); } .operation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .operation-stat { min-height: 150px; padding: 20px; border: 1px solid var(--admin-line); border-radius: 10px; background: rgba(255, 251, 241, .36); } .operation-stat span { color: var(--admin-rust); font: 800 11px var(--guide-body, "Inter", sans-serif); } .operation-stat strong { display: block; margin-top: 16px; color: var(--admin-olive); font: 700 28px var(--guide-display, "Oswald", sans-serif); } .operation-stat p { margin-top: 9px; color: var(--admin-ink-soft); font: 500 13px/1.5 var(--guide-body, "Inter", sans-serif); } .control-console { overflow: hidden; } .control-service-state { display: inline-flex; align-items: center; gap: 8px; } .control-service-state i { color: var(--admin-rust); font-size: 9px; } .control-service-state[data-active="true"] i { color: var(--admin-olive); box-shadow: 0 0 0 5px rgba(119, 131, 31, .1); } .control-console-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .65fr); align-items: stretch; } .control-form { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(220px, .65fr); gap: 20px; padding: 26px; } .control-intro { grid-column: 1 / -1; max-width: 820px; } .control-intro strong { color: var(--admin-ink); font: 700 24px/1.18 var(--guide-display, "Oswald", sans-serif); } .control-intro p { margin-top: 7px; color: var(--admin-ink-soft); font-size: 14px; line-height: 1.55; } .control-field { display: grid; align-content: start; gap: 8px; } .control-field > span { color: var(--admin-rust); font-size: 12px; font-weight: 800; letter-spacing: .045em; } .control-field textarea, .control-field input, .control-field select { width: 100%; border: 1px solid var(--admin-line); border-radius: 8px; outline: 0; background: rgba(255, 253, 247, .72); color: var(--admin-ink); font: 600 15px/1.5 var(--guide-body, "Inter", sans-serif); } .control-field textarea { min-height: 112px; resize: vertical; padding: 13px 15px; } .control-field input { height: 54px; padding: 0 15px; } .control-field select { height: 54px; padding: 0 14px; } .control-field textarea:focus, .control-field input:focus, .control-field select:focus { border-color: var(--admin-olive); box-shadow: 0 0 0 3px rgba(119, 131, 31, .12); } .control-field textarea::placeholder, .control-field input::placeholder { color: #8b8374; font-weight: 500; } .control-field small { display: flex; justify-content: space-between; gap: 10px; color: var(--admin-ink-soft); font-size: 11px; line-height: 1.45; } .control-reason-field small > span { flex: none; color: var(--admin-rust); font-weight: 800; } .control-form-error { min-height: 20px; grid-column: 1 / -1; margin: -8px 0 -5px; color: #a53f2d; font-size: 13px; font-weight: 700; } .control-actions { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .control-action { display: grid; min-height: 92px; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--admin-line); border-radius: 9px; background: rgba(255, 252, 244, .5); color: var(--admin-ink); cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease, opacity .16s ease; } .control-action > i { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: rgba(93, 113, 128, .11); color: #5d7180; font-size: 21px; } .control-action span { min-width: 0; } .control-action strong { display: block; font: 700 18px/1.15 var(--guide-display, "Oswald", sans-serif); } .control-action small { display: block; margin-top: 5px; color: var(--admin-ink-soft); font-size: 11px; line-height: 1.35; } .control-action.start > i { background: rgba(119, 131, 31, .13); color: var(--admin-olive); } .control-action.restart > i { background: rgba(156, 100, 30, .12); color: #9c641e; } .control-action.stop > i { background: rgba(165, 63, 45, .12); color: #a53f2d; } .control-action:hover:not(:disabled), .control-action:focus-visible { transform: translateY(-2px); border-color: var(--admin-olive); background: rgba(255, 253, 247, .82); } .control-action.stop:hover:not(:disabled), .control-action.stop:focus-visible { border-color: #a53f2d; } .control-action:disabled { cursor: not-allowed; opacity: .42; } .control-safety { display: flex; grid-column: 1 / -1; align-items: center; gap: 9px; color: var(--admin-ink-soft); font-size: 12px; font-weight: 650; } .control-safety i { color: var(--admin-olive); font-size: 18px; } .control-status-card { display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; padding: 30px; border-left: 1px solid rgba(231, 220, 197, .13); background: #151811; color: #f4efe4; } .control-status-card > i { display: grid; width: 50px; height: 50px; place-items: center; margin-bottom: 22px; border-radius: 50%; background: rgba(107, 140, 157, .15); color: #87adbf; font-size: 23px; } .control-status-card[data-tone="warning"] > i { background: rgba(212, 154, 53, .14); color: #dfaa50; } .control-status-card[data-tone="success"] > i { background: rgba(159, 173, 54, .14); color: var(--admin-olive-bright); } .control-status-card[data-tone="error"] > i { background: rgba(183, 69, 48, .16); color: #db725e; } .control-status-card > span { color: #9b9483; font-size: 11px; font-weight: 800; letter-spacing: .055em; } .control-status-card > strong { margin-top: 9px; color: #f4efe4; font: 700 27px/1.12 var(--guide-display, "Oswald", sans-serif); text-wrap: balance; } .control-status-card > p { margin-top: 13px; color: #aaa493; font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; } .control-status-card > small { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(231, 220, 197, .12); color: #d0c9b8; font-size: 11px; line-height: 1.5; } .control-dialog { width: min(560px, calc(100vw - 32px)); padding: 30px; border: 1px solid #4e4a3e; border-radius: 12px; background: #f4efe4; color: var(--admin-ink); box-shadow: 0 28px 90px rgba(0, 0, 0, .62); } .control-dialog::backdrop { background: rgba(5, 7, 5, .78); backdrop-filter: blur(5px); } .control-dialog-icon { display: grid; width: 54px; height: 54px; place-items: center; margin-bottom: 20px; border-radius: 50%; background: rgba(156, 100, 30, .12); color: #9c641e; font-size: 25px; } .control-dialog[data-tone="start"] .control-dialog-icon { background: rgba(119, 131, 31, .13); color: var(--admin-olive); } .control-dialog[data-tone="stop"] .control-dialog-icon { background: rgba(165, 63, 45, .12); color: #a53f2d; } .control-dialog > p:first-of-type { color: var(--admin-rust); font-size: 11px; font-weight: 800; letter-spacing: .06em; } .control-dialog h4 { margin-top: 6px; font: 700 32px/1.1 var(--guide-display, "Oswald", sans-serif); } .control-dialog dl { display: grid; gap: 0; margin-top: 24px; border: 1px solid var(--admin-line); border-radius: 8px; } .control-dialog dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; padding: 13px 15px; border-bottom: 1px solid var(--admin-line); } .control-dialog dl > div:last-child { border-bottom: 0; } .control-dialog dt { color: var(--admin-rust); font-size: 11px; font-weight: 800; } .control-dialog dd { margin: 0; color: var(--admin-ink); font-size: 13px; font-weight: 650; overflow-wrap: anywhere; } .control-dialog-warning { margin-top: 18px; color: var(--admin-ink-soft); font-size: 13px; line-height: 1.5; } .control-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } .control-dialog-actions button { min-height: 46px; padding: 0 18px; border: 1px solid var(--admin-line); border-radius: 7px; background: transparent; color: var(--admin-ink); cursor: pointer; font-size: 12px; font-weight: 800; } .control-dialog-actions button:last-child { border-color: var(--admin-olive); background: var(--admin-olive); color: #fffdf5; } .control-dialog[data-tone="stop"] .control-dialog-actions button:last-child { border-color: #a53f2d; background: #a53f2d; } .event-list, .log-list, .backup-list { display: grid; } .event-row, .log-row, .backup-row { display: grid; min-height: 74px; grid-template-columns: 150px 110px minmax(0, 1fr); align-items: start; gap: 18px; padding: 16px 18px; border-bottom: 1px solid var(--admin-line); } .event-row:last-child, .log-row:last-child, .backup-row:last-child { border-bottom: 0; } .event-row time, .log-row > span, .backup-row > span { color: var(--admin-ink-soft); font: 600 12px/1.5 var(--guide-body, "Inter", sans-serif); } .event-row > span, .log-level { font: 800 11px/1.5 var(--guide-body, "Inter", sans-serif); text-transform: uppercase; } .event-row > div strong, .backup-row strong { display: block; color: var(--admin-ink); font-size: 15px; } .event-row > div p, .log-message, .backup-row p { margin-top: 6px; color: var(--admin-ink-soft); font: 500 13px/1.55 var(--guide-body, "Inter", sans-serif); overflow-wrap: anywhere; } .severity-success { color: var(--admin-olive); } .severity-warning { color: #9c641e; } .severity-error { color: #a53f2d; } .severity-info { color: #5d7180; } .log-row { grid-template-columns: 120px minmax(0, 1fr); } .log-level.error { color: #a53f2d; } .log-level.warning { color: #9c641e; } .backup-row { grid-template-columns: minmax(200px, 1fr) 140px 170px; } .backup-row p { margin: 0; } .backup-create-card { overflow: hidden; } .backup-create-state { display: inline-flex; align-items: center; gap: 8px; } .backup-create-state i { color: var(--admin-rust); font-size: 9px; } .backup-create-state[data-ready="true"] { color: var(--admin-olive); } .backup-create-state[data-ready="true"] i { color: var(--admin-olive); box-shadow: 0 0 0 5px rgba(119, 131, 31, .1); } .backup-create-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .65fr); align-items: stretch; } .backup-create-form { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(280px, 1.2fr); gap: 20px; padding: 28px; } .backup-create-intro { grid-column: 1 / -1; max-width: 850px; } .backup-create-intro strong { color: var(--admin-ink); font: 700 25px/1.2 var(--guide-display, "Oswald", sans-serif); } .backup-create-intro p { margin-top: 7px; color: var(--admin-ink-soft); font-size: 14px; line-height: 1.58; } .backup-create-form .control-form-error, .backup-create-submit { grid-column: 1 / -1; } .backup-create-submit { display: grid; min-height: 76px; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 13px; padding: 13px 18px; border: 1px solid var(--admin-olive); border-radius: 9px; background: var(--admin-olive); color: #fffdf5; cursor: pointer; text-align: left; transition: transform .16s ease, background .16s ease, opacity .16s ease; } .backup-create-submit > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.13); font-size: 22px; } .backup-create-submit strong { display: block; font: 700 19px/1.15 var(--guide-display, "Oswald", sans-serif); } .backup-create-submit small { display: block; margin-top: 5px; color: rgba(255,255,255,.76); font-size: 11px; font-weight: 650; } .backup-create-submit:hover:not(:disabled), .backup-create-submit:focus-visible { transform: translateY(-2px); background: #68721b; } .backup-create-submit:disabled { cursor: not-allowed; opacity: .42; } .backup-procedure { display: flex; min-height: 100%; flex-direction: column; padding: 28px; border-left: 1px solid rgba(231,220,197,.13); background: #151811; color: #f4efe4; } .backup-procedure > span { color: var(--admin-olive-bright); font-size: 11px; font-weight: 850; letter-spacing: .065em; } .backup-procedure ol { display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; } .backup-procedure li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-bottom: 1px solid rgba(231,220,197,.12); } .backup-procedure li:first-child { padding-top: 5px; } .backup-procedure li > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: rgba(159,173,54,.12); color: var(--admin-olive-bright); font-size: 18px; } .backup-procedure strong { color: #f4efe4; font: 700 17px var(--guide-display, "Oswald", sans-serif); } .backup-procedure li p { margin-top: 4px; color: #aaa493; font-size: 12px; line-height: 1.48; } .backup-procedure > p { display: flex; align-items: center; gap: 9px; margin-top: auto; padding-top: 18px; color: #c8c1b1; font-size: 12px; font-weight: 650; line-height: 1.45; } .backup-procedure > p i { color: var(--admin-olive-bright); font-size: 18px; } .backup-confirm-dialog .control-dialog-icon { background: rgba(123,100,163,.13); color: #7b64a3; } .admin-card .empty-copy { color: var(--admin-ink-soft); font: 500 14px/1.6 var(--guide-body, "Inter", sans-serif); } .log-subtabs { display: grid; width: 100%; grid-template-columns: 1.288fr repeat(3, 1fr) 1.024fr; overflow: hidden; border: 1px solid var(--admin-line); border-radius: 10px; background: rgba(255, 251, 241, .3); } .log-subtabs button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 6px; min-width: 0; padding: 0 clamp(8px, .85vw, 14px); border: 0; border-right: 1px solid var(--admin-line); background: transparent; color: var(--admin-ink-soft); cursor: pointer; font: 800 12px var(--guide-body, "Inter", sans-serif); letter-spacing: 0; white-space: nowrap; } .log-subtabs button:last-child { border-right: 0; } .log-subtabs button i { font-size: 18px; } .log-subtabs button:hover { background: rgba(119, 131, 31, .08); color: var(--admin-ink); } .log-subtabs button.active { background: var(--admin-olive); color: #fffdf5; } .log-subtabs button:focus-visible { position: relative; z-index: 1; outline-color: var(--admin-rust); outline-offset: -3px; } .log-subpanel { display: grid; min-width: 0; gap: 24px; } .shop-log-list { display: grid; } .shop-log-row { display: grid; min-height: 104px; grid-template-columns: 145px 170px minmax(230px, 1fr) 120px 118px; align-items: center; gap: 18px; padding: 17px 20px; border-bottom: 1px solid var(--admin-line); } .shop-log-row:last-child { border-bottom: 0; } .shop-log-row time { color: var(--admin-ink-soft); font-size: 12px; font-weight: 650; line-height: 1.45; } .shop-log-buyer, .shop-log-item, .shop-log-total { display: grid; min-width: 0; gap: 5px; } .shop-log-buyer > span, .shop-log-item > span, .shop-log-total > span { color: var(--admin-rust); font-size: 10px; font-weight: 800; letter-spacing: .05em; } .shop-log-buyer strong, .shop-log-item strong, .shop-log-total strong { color: var(--admin-ink); font-size: 14px; overflow-wrap: anywhere; } .shop-log-buyer strong, .shop-log-total strong { display: inline-flex; align-items: center; gap: 7px; } .shop-log-buyer strong i { color: var(--admin-olive); } .shop-log-total strong i { color: var(--admin-rust); } .shop-log-item small { overflow: hidden; color: var(--admin-ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; } .shop-log-status { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid rgba(119, 131, 31, .28); border-radius: 999px; background: rgba(119, 131, 31, .09); color: var(--admin-olive); font-size: 10px; font-weight: 800; } .shop-log-status.failed { border-color: rgba(165, 63, 45, .28); background: rgba(165, 63, 45, .08); color: #a53f2d; } .restart-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .restart-summary-card { display: grid; min-height: 154px; grid-template-columns: 48px minmax(0, 1fr); align-items: start; gap: 16px; padding: 22px; border: 1px solid var(--admin-line); border-radius: 10px; background: rgba(255, 251, 241, .38); } .restart-summary-card > i { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 50%; background: rgba(119, 131, 31, .13); color: var(--admin-olive); font-size: 22px; } .restart-summary-card span { color: var(--admin-rust); font-size: 11px; font-weight: 800; letter-spacing: .05em; } .restart-summary-card strong { display: block; margin-top: 8px; color: var(--admin-ink); font: 700 23px/1.16 var(--guide-display, "Oswald", sans-serif); text-wrap: balance; } .restart-summary-card p { margin-top: 9px; color: var(--admin-ink-soft); font-size: 13px; line-height: 1.45; } .update-event-list { display: grid; } .update-event-row { display: grid; min-height: 94px; grid-template-columns: 165px 46px minmax(0, 1fr); align-items: center; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--admin-line); } .update-event-row:last-child { border-bottom: 0; } .update-event-row > time { color: var(--admin-ink-soft); font-size: 12px; font-weight: 700; line-height: 1.45; } .update-event-row > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(93, 113, 128, .12); color: #5d7180; font-size: 19px; } .update-event-row[data-tone="success"] > i { background: rgba(119, 131, 31, .13); color: var(--admin-olive); } .update-event-row[data-tone="warning"] > i { background: rgba(156, 100, 30, .12); color: #9c641e; } .update-event-row[data-tone="error"] > i { background: rgba(165, 63, 45, .12); color: #a53f2d; } .update-event-row > div { min-width: 0; } .update-event-heading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .update-event-heading strong { color: var(--admin-ink); font-size: 15px; } .update-event-heading span { padding: 4px 7px; border-radius: 999px; background: rgba(119, 131, 31, .11); color: var(--admin-olive); font-size: 10px; font-weight: 800; letter-spacing: .025em; } .update-event-row p { margin-top: 6px; color: var(--admin-ink-soft); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; } /* Audited account moderation and editable configuration */ .account-subtabs { display: inline-grid; width: fit-content; max-width: 100%; grid-template-columns: repeat(2, minmax(170px, 1fr)); margin-bottom: 18px; overflow: hidden; border: 1px solid var(--admin-line); border-radius: 10px; background: rgba(255, 251, 241, .3); } .account-subtabs button { display: grid; min-height: 54px; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 0 17px; border: 0; border-right: 1px solid var(--admin-line); background: transparent; color: var(--admin-ink-soft); cursor: pointer; font-size: 12px; font-weight: 800; text-align: left; } .account-subtabs button:last-child { border-right: 0; } .account-subtabs button > i { color: var(--admin-rust); font-size: 18px; } .account-subtabs button > strong { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 999px; background: rgba(33, 31, 23, .08); font-size: 10px; } .account-subtabs button:hover { background: rgba(119, 131, 31, .08); color: var(--admin-ink); } .account-subtabs button.active { background: var(--admin-olive); color: #fffdf5; } .account-subtabs button.active > i { color: #f1f4d8; } .account-subtabs button.active > strong { background: rgba(255, 255, 255, .15); color: #fff; } .account-directory-card { overflow: hidden; } .account-table-scroll { max-width: 100%; overflow-x: auto; } .accounts-table { min-width: 1160px; } .accounts-table th:nth-child(1) { width: 23%; } .accounts-table th:nth-child(2) { width: 20%; } .accounts-table th:nth-child(3) { width: 10%; } .accounts-table th:nth-child(4) { width: 15%; } .accounts-table th:nth-child(5) { width: 12%; } .accounts-table th:nth-child(6) { width: 20%; } .accounts-table tr.banned { background: rgba(165, 63, 45, .045); } .account-identity, .account-access { display: grid; gap: 4px; } .account-identity > strong { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .account-identity > strong > span { padding: 3px 6px; border-radius: 999px; background: rgba(119, 131, 31, .11); color: var(--admin-olive); font-size: 8px; font-weight: 900; letter-spacing: .035em; } .account-identity > small, .account-access > small { overflow: hidden; color: var(--admin-ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .account-access > strong { text-transform: uppercase; } .account-state { display: inline-flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 850; text-transform: uppercase; white-space: nowrap; } .account-state i { font-size: 10px; } .account-state.online { color: var(--admin-olive); } .account-state.offline { color: #5d7180; } .account-state.banned { color: #a53f2d; } .account-row-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .account-row-actions button { display: inline-flex; min-height: 37px; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(93, 113, 128, .3); border-radius: 7px; background: rgba(93, 113, 128, .07); color: #526a78; cursor: pointer; font-size: 9px; font-weight: 900; } .account-row-actions button.danger { border-color: rgba(165, 63, 45, .3); background: rgba(165, 63, 45, .07); color: #a53f2d; } .account-row-actions button.unban { border-color: rgba(119, 131, 31, .34); background: rgba(119, 131, 31, .09); color: var(--admin-olive); } .account-row-actions button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--admin-olive); background: rgba(119, 131, 31, .12); color: var(--admin-olive); } .account-row-actions button.danger:hover:not(:disabled) { border-color: #a53f2d; background: rgba(165, 63, 45, .13); color: #8f2f20; } .account-row-actions button:disabled { cursor: not-allowed; opacity: .35; } .banned-table { min-width: 1100px; } .banned-table th:nth-child(1) { width: 21%; } .banned-table th:nth-child(2) { width: 25%; } .banned-table th:nth-child(3) { width: 12%; } .banned-table th:nth-child(4) { width: 15%; } .banned-table th:nth-child(5) { width: 13%; } .banned-table th:nth-child(6) { width: 14%; } .ban-reason { margin: 0; color: var(--admin-ink); line-height: 1.5; } .ban-scope { display: inline-flex; align-items: center; gap: 7px; color: #a53f2d; font-size: 10px; font-weight: 800; } .accounts-empty-state { display: grid; min-height: 260px; place-items: center; align-content: center; gap: 10px; padding: 30px; color: var(--admin-ink-soft); text-align: center; } .accounts-empty-state > i { color: var(--admin-olive); font-size: 44px; } .accounts-empty-state > strong { color: var(--admin-ink); font: 700 24px var(--guide-display, "Oswald", sans-serif); } .accounts-empty-state > p { max-width: 560px; font-size: 13px; line-height: 1.55; } .settings-edit-note { display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--admin-line); background: rgba(119, 131, 31, .06); } .settings-edit-note > i { margin-top: 2px; color: var(--admin-olive); font-size: 20px; } .settings-edit-note p { margin: 0; } .settings-edit-note strong, .settings-edit-note span { display: block; } .settings-edit-note strong { color: var(--admin-ink); font-size: 12px; } .settings-edit-note span { margin-top: 3px; color: var(--admin-ink-soft); font-size: 11px; line-height: 1.45; } .setting-row { grid-template-columns: minmax(145px, .45fr) minmax(220px, .9fr) minmax(220px, 1fr) 112px; } .setting-row.editable:hover { background: rgba(119, 131, 31, .035); } .setting-row.locked { background: rgba(33, 31, 23, .015); } .setting-edit-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(119, 131, 31, .32); border-radius: 7px; background: rgba(119, 131, 31, .08); color: var(--admin-olive); cursor: pointer; font-size: 9px; font-weight: 900; } .setting-edit-button:hover { border-color: var(--admin-olive); background: var(--admin-olive); color: #fffdf5; } .setting-lock { display: grid; width: 38px; height: 38px; place-items: center; justify-self: end; border-radius: 50%; background: rgba(33, 31, 23, .05); color: #8f8879 !important; } .admin-action-dialog { --admin-ink: #211f17; --admin-ink-soft: #625c4d; --admin-paper: #e9dec7; --admin-line: rgba(51, 47, 35, .22); --admin-olive: #77831f; --admin-rust: #9f4e2e; width: min(700px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; overflow: auto; border: 1px solid #514c3f; border-radius: 16px; background: var(--admin-paper) url("/assets/parchment-texture.png?v=20260805-1") center / 720px auto repeat; box-shadow: 0 34px 110px rgba(0, 0, 0, .7); color: var(--admin-ink); color-scheme: light; } .admin-action-dialog::backdrop { background: rgba(5, 7, 5, .84); backdrop-filter: blur(8px); } .admin-action-dialog form { position: relative; padding: clamp(28px, 4vw, 44px); } .admin-action-dialog-close { position: absolute; top: 20px; right: 20px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--admin-line); border-radius: 50%; background: rgba(255, 252, 244, .56); color: var(--admin-ink-soft); cursor: pointer; } .admin-action-dialog-close:hover:not(:disabled) { border-color: var(--admin-rust); color: var(--admin-rust); } .admin-action-dialog-icon { display: grid; width: 58px; height: 58px; place-items: center; margin-bottom: 20px; border-radius: 50%; background: rgba(159, 78, 46, .12); color: var(--admin-rust); font-size: 27px; } .admin-action-dialog-icon.config { background: rgba(119, 131, 31, .13); color: var(--admin-olive); } .admin-action-dialog form > p:first-of-type { color: var(--admin-rust); font-size: 10px; font-weight: 850; letter-spacing: .07em; } .admin-action-dialog h2 { max-width: 570px; margin-top: 7px; font: 700 clamp(34px, 4vw, 46px)/1.02 var(--guide-display, "Oswald", sans-serif); } .admin-action-dialog-description { max-width: 600px; margin-top: 13px; color: var(--admin-ink-soft); font-size: 14px; line-height: 1.55; } .admin-action-target-card, .config-setting-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; margin-top: 23px; padding: 17px 19px; border: 1px solid var(--admin-line); border-radius: 9px; background: rgba(255, 251, 241, .45); } .admin-action-target-card > span, .config-setting-card > span { display: flex; align-items: center; gap: 8px; color: var(--admin-rust); font-size: 9px; font-weight: 850; letter-spacing: .05em; } .admin-action-target-card > strong, .config-setting-card > code { grid-column: 1; color: var(--admin-ink); font: 700 24px var(--guide-display, "Oswald", sans-serif); overflow-wrap: anywhere; } .admin-action-target-card > small, .config-setting-card > small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--admin-rust); font-size: 10px; font-weight: 850; text-align: right; } .config-setting-card > code { font-family: var(--mono); font-size: 16px; } .config-setting-card > small b { display: block; margin-top: 5px; color: var(--admin-ink); font-size: 12px; overflow-wrap: anywhere; } .admin-action-field { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-top: 22px; color: var(--admin-ink); font-size: 11px; font-weight: 850; letter-spacing: .035em; } .admin-action-field small { color: var(--admin-ink-soft); font-size: 9px; } .admin-action-textarea, .admin-action-input { width: 100%; margin-top: 8px; border: 1px solid var(--admin-line); border-radius: 8px; outline: 0; background: rgba(255, 253, 248, .7); color: var(--admin-ink); font: 600 15px/1.5 var(--guide-body, "Inter", sans-serif); } .admin-action-textarea { min-height: 100px; padding: 13px 15px; resize: vertical; } .admin-action-input { height: 58px; padding: 0 15px; } .admin-action-textarea:focus, .admin-action-input:focus { border-color: var(--admin-olive); box-shadow: 0 0 0 4px rgba(119, 131, 31, .12); } .admin-action-help, .config-restart-warning { display: flex; align-items: flex-start; gap: 9px; margin-top: 11px; padding: 11px 13px; border-radius: 7px; background: rgba(93, 113, 128, .08); color: var(--admin-ink-soft); font-size: 11px; line-height: 1.45; } .admin-action-help i { color: #5d7180; font-size: 16px; } .config-restart-warning { background: rgba(156, 100, 30, .09); color: #735020; } .config-restart-warning i { color: #9c641e; font-size: 17px; } .admin-action-error { min-height: 22px; margin-top: 10px; color: #a53f2d; font-size: 12px; font-weight: 750; } .admin-action-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 7px; } .admin-action-dialog-actions button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 0 20px; border: 1px solid var(--admin-line); border-radius: 8px; background: transparent; color: var(--admin-ink); cursor: pointer; font-size: 11px; font-weight: 850; } .admin-action-dialog-actions button:last-child { min-width: 180px; border-color: var(--admin-olive); background: var(--admin-olive); color: #fffdf5; } .moderation-dialog[data-action="ban"] .admin-action-dialog-actions button:last-child { border-color: #a53f2d; background: #a53f2d; } .admin-action-dialog button:disabled { cursor: not-allowed; opacity: .42; } .admin-audit-list { display: grid; } .admin-audit-row { display: grid; min-height: 118px; grid-template-columns: 145px 155px 190px minmax(260px, 1fr); align-items: center; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--admin-line); } .admin-audit-row:last-child { border-bottom: 0; } .admin-audit-row[data-tone="failed"], .admin-audit-row[data-tone="rejected"] { background: rgba(165, 63, 45, .035); } .admin-audit-row > time { color: var(--admin-ink-soft); font-size: 11px; font-weight: 700; } .admin-audit-actor, .admin-audit-action { display: grid; min-width: 0; gap: 5px; } .admin-audit-actor > span { color: var(--admin-rust); font-size: 9px; font-weight: 850; letter-spacing: .05em; } .admin-audit-actor > strong { display: flex; align-items: center; gap: 7px; overflow: hidden; color: var(--admin-ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; } .admin-audit-actor i { color: var(--admin-olive); } .admin-audit-action > strong { color: var(--admin-ink); font-size: 13px; } .admin-audit-action > small { overflow: hidden; color: var(--admin-ink-soft); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .admin-audit-outcome { width: fit-content; padding: 3px 7px; border-radius: 999px; background: rgba(93, 113, 128, .09); color: #5d7180; font-size: 8px; font-weight: 900; } .admin-audit-row[data-tone="completed"] .admin-audit-outcome { background: rgba(119, 131, 31, .1); color: var(--admin-olive); } .admin-audit-row[data-tone="failed"] .admin-audit-outcome, .admin-audit-row[data-tone="rejected"] .admin-audit-outcome { background: rgba(165, 63, 45, .1); color: #a53f2d; } .admin-audit-detail { min-width: 0; } .admin-audit-detail p { margin: 0; color: var(--admin-ink); font-size: 13px; line-height: 1.45; } .admin-audit-detail small { display: block; margin-top: 5px; color: var(--admin-ink-soft); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere; } .admin-audit-detail code { display: inline-block; max-width: 100%; margin-top: 8px; padding: 4px 7px; overflow: hidden; border-radius: 4px; background: rgba(119, 131, 31, .08); color: var(--admin-olive); font: 700 10px var(--mono); text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1220px) { .admin-layout { grid-template-columns: 250px minmax(0, 1fr); } .admin-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-overview-grid { grid-template-columns: 1fr; } .admin-health-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .admin-health-list article:nth-child(odd) { border-right: 1px solid var(--admin-line); } .control-console-grid { grid-template-columns: 1fr; } .control-status-card { min-height: 220px; border-top: 1px solid rgba(231, 220, 197, .13); border-left: 0; } .admin-audit-row { grid-template-columns: 120px 140px 170px minmax(220px, 1fr); gap: 14px; } .log-subtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .log-subtabs button { border-bottom: 1px solid var(--admin-line); } .log-subtabs button:nth-child(even) { border-right: 0; } .log-subtabs button:last-child { grid-column: 1 / -1; border-bottom: 0; } } @media (max-width: 1000px) { .admin-header { grid-template-columns: minmax(260px, 1fr) auto; } .admin-session { display: none; } .admin-layout { grid-template-columns: 220px minmax(0, 1fr); } .admin-nav-button { min-height: 88px; padding-right: 16px; padding-left: 16px; } .admin-nav-button strong { font-size: 17px; } .restart-summary-grid { grid-template-columns: 1fr; } .backup-create-layout { grid-template-columns: 1fr; } .backup-procedure { min-height: 280px; border-top: 1px solid rgba(231,220,197,.13); border-left: 0; } } @media (max-width: 820px) { .admin-workspace { grid-template-rows: 78px minmax(0, 1fr); } .admin-header { min-height: 78px; padding: 0 16px; } .admin-brand .brand-mark { display: block; width: 48px; height: 48px; flex-basis: 48px; } .admin-brand p { display: none; } .admin-brand h2 { font-size: 27px; } .admin-header-actions button { min-height: 46px; } #adminLogout { display: none; } .admin-layout { grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding: 0; } .admin-nav { display: flex; min-height: 0; overflow-x: hidden; overflow-y: auto; border-right: 1px solid rgba(231, 220, 197, .2); border-bottom: 0; } .admin-nav-button { min-height: 82px; grid-template-columns: 1fr; justify-items: center; gap: 5px; padding: 11px 7px; border-right: 0; border-bottom: 1px solid rgba(231, 220, 197, .11); text-align: center; } .admin-nav-button::before { inset: 9px auto 9px 0; width: 3px; height: auto; } .admin-nav-button > i { display: block; font-size: 23px; } .admin-nav-button small { display: none; } .admin-nav-button strong { margin-top: 0; font-size: 11px; line-height: 1.12; text-overflow: clip; white-space: normal; } .admin-nav-badge { position: absolute; top: 7px; right: 7px; min-width: 20px; height: 20px; padding: 0 5px !important; font-size: 9px !important; } .admin-stage-head { min-height: 154px; padding: 28px 24px; } .admin-stage-head h3 { font-size: 46px; } .admin-view { padding: 26px 22px 44px; } .operation-grid { grid-template-columns: 1fr; } .control-form { grid-template-columns: 1fr; } .control-intro, .control-form-error, .control-actions, .control-safety { grid-column: 1; } .account-subtabs { width: 100%; } .admin-audit-card { overflow: hidden; } .admin-audit-row { grid-template-columns: 130px minmax(130px, .7fr) minmax(160px, .8fr) minmax(240px, 1.4fr); } .admin-audit-list { min-width: 760px; overflow-x: auto; } } @media (max-width: 620px) { .admin-header { gap: 8px; } .admin-brand { gap: 9px; } .admin-brand .brand-mark { width: 42px; height: 42px; flex-basis: 42px; } .admin-brand h2 { font-size: 22px; } .admin-header-actions { gap: 7px; } .admin-header-actions .language-toggle, #adminClose { min-width: 44px; min-height: 44px; padding: 0; } #adminClose span { display: none; } .admin-layout { grid-template-columns: 82px minmax(0, 1fr); } .admin-nav-button { min-height: 78px; } .admin-nav-button > i { font-size: 21px; } .admin-nav-button strong { font-size: 10px; } .admin-stage-head { align-items: flex-start; min-height: 160px; padding: 26px 20px; flex-direction: column; } .admin-stage-head h3 { font-size: 40px; } .admin-stage-head > span { min-height: 36px; } .admin-view { padding: 22px 14px 38px; } .admin-overview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .admin-overview-summary article { min-height: 152px; padding: 16px; } .admin-overview-summary article > div span { font-size: 11px; } .admin-overview-summary article > strong { font-size: 29px; } .admin-overview-summary article[data-tone="status"] > strong { overflow: visible; font-size: 22px; text-overflow: clip; white-space: normal; } .admin-overview-summary article > p { font-size: 12px; } .admin-chart-legend { gap: 10px 16px; } .admin-chart-legend > button { grid-template-columns: 12px auto; } .admin-chart-legend strong { grid-column: 2; } .admin-chart-shell { height: 240px; margin: 12px; } .admin-health-list { grid-template-columns: 1fr; } .admin-health-list article:nth-child(odd) { border-right: 0; } .admin-toolbar { grid-template-columns: 1fr; } .admin-table { min-width: 900px; } .admin-card { overflow-x: auto; } .admin-utilization-card, .admin-health-card { overflow: hidden; } .setting-row { grid-template-columns: 1fr; gap: 7px; padding: 16px; } .setting-edit-button { width: 100%; margin-top: 5px; } .setting-lock { justify-self: start; } .event-row, .backup-row { grid-template-columns: 1fr; gap: 6px; } .control-form { gap: 18px; padding: 20px 16px; } .backup-create-form { grid-template-columns: 1fr; gap: 18px; padding: 20px 16px; } .backup-create-intro, .backup-create-form .control-form-error, .backup-create-submit { grid-column: 1; } .backup-procedure { min-height: 0; padding: 24px 18px; } .control-intro strong { font-size: 22px; } .control-actions { grid-template-columns: 1fr; } .control-action { min-height: 80px; } .control-status-card { min-height: 230px; padding: 26px 20px; } .control-dialog { padding: 24px 18px; } .control-dialog dl > div { grid-template-columns: 1fr; gap: 5px; } .control-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; } .log-subtabs button { min-width: 0; padding: 0 8px; font-size: 9px; } .restart-summary-card { min-height: 0; grid-template-columns: 42px minmax(0, 1fr); padding: 18px; } .restart-summary-card > i { width: 40px; height: 40px; font-size: 19px; } .restart-summary-card strong { font-size: 21px; } .update-event-row { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 16px; } .update-event-row > time { grid-column: 2; grid-row: 1; align-self: end; } .update-event-row > i { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; } .update-event-row > div { grid-column: 2; grid-row: 2; } .shop-log-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; padding: 17px 16px; } .shop-log-row time { grid-column: 1; } .shop-log-buyer { grid-column: 1; } .shop-log-item { grid-column: 1 / -1; } .shop-log-total { grid-column: 1; } .shop-log-status { grid-column: 2; grid-row: 1; } .balance-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; } .balance-dialog form { padding: 28px 18px 22px; } .balance-dialog-close { top: 14px; right: 14px; } .balance-dialog-icon { width: 50px; height: 50px; margin-bottom: 18px; font-size: 23px; } .balance-dialog h2 { max-width: calc(100% - 42px); font-size: 34px; } .balance-account-card { grid-template-columns: 1fr; } .balance-account-card > small { grid-column: 1; grid-row: auto; text-align: left; } .balance-account-card > small b { display: inline; margin-left: 5px; } .balance-input-label { align-items: flex-start; flex-direction: column; gap: 5px; } .balance-input-shell { min-height: 64px; padding: 0 15px; } .balance-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; } .balance-dialog-actions button, .balance-dialog-actions button:last-child { min-width: 0; padding: 0 12px; } .account-subtabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-subtabs button { min-width: 0; padding: 0 12px; } .account-subtabs button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .admin-action-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); border-radius: 12px; } .admin-action-dialog form { padding: 28px 18px 22px; } .admin-action-dialog-close { top: 14px; right: 14px; } .admin-action-dialog-icon { width: 50px; height: 50px; margin-bottom: 18px; font-size: 23px; } .admin-action-dialog h2 { max-width: calc(100% - 42px); font-size: 34px; } .admin-action-target-card, .config-setting-card { grid-template-columns: 1fr; } .admin-action-target-card > small, .config-setting-card > small { grid-column: 1; grid-row: auto; text-align: left; } .admin-action-field { align-items: flex-start; flex-direction: column; gap: 5px; } .admin-action-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; } .admin-action-dialog-actions button, .admin-action-dialog-actions button:last-child { min-width: 0; padding: 0 10px; } .admin-audit-list { min-width: 0; } .admin-audit-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 14px; padding: 16px; } .admin-audit-row > time { grid-column: 1; } .admin-audit-actor { grid-column: 2; grid-row: 1; text-align: right; } .admin-audit-action { grid-column: 1 / -1; } .admin-audit-detail { grid-column: 1 / -1; } .account-table-scroll { overflow: visible; } .accounts-table, .banned-table { display: block; min-width: 0; border: 0; background: transparent; } .accounts-table thead, .banned-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .accounts-table tbody, .banned-table tbody { display: grid; gap: 12px; padding: 12px; } .accounts-table tr, .banned-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--admin-line); border-radius: 9px; background: rgba(255, 252, 245, .38); } .accounts-table td, .banned-table td { display: grid; min-width: 0; align-content: start; gap: 8px; padding: 13px; border: 0; border-bottom: 1px solid var(--admin-line); color: var(--admin-ink); } .accounts-table td::before, .banned-table td::before { content: attr(data-label); color: var(--admin-rust); font-size: 8px; font-weight: 900; letter-spacing: .045em; text-transform: uppercase; } .accounts-table td:first-child, .banned-table td:first-child { grid-column: 1 / -1; } .accounts-table td:nth-child(2), .accounts-table td:nth-child(4), .banned-table td:nth-child(2), .banned-table td:nth-child(4) { border-right: 1px solid var(--admin-line); } .accounts-table td:nth-last-child(-n+2), .banned-table td:nth-last-child(-n+2) { border-bottom: 0; } .accounts-table td:last-child, .banned-table td:last-child { grid-column: 1 / -1; border-top: 1px solid var(--admin-line); } .account-identity > small, .account-access > small { white-space: normal; overflow-wrap: anywhere; } .account-row-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .account-row-actions button { width: 100%; min-height: 42px; } .banned-table .account-row-actions { grid-template-columns: 1fr; } } /* Survivor economy and in-game delivery shop */ .player-header-actions .shop-account-trigger { display: inline-flex; min-width: 50px; min-height: 50px; max-width: 50px; align-items: center; justify-content: center; gap: 9px; padding: 0; overflow: hidden; border: 1px solid rgba(184, 207, 75, .35); border-radius: 7px; background: #141711; color: #f0eadc; cursor: pointer; font: 700 15px var(--guide-body); } .player-header-actions .shop-account-trigger:hover { border-color: var(--guide-olive-bright); background: #30391d; } .player-header-actions .shop-account-trigger i { flex: 0 0 auto; color: var(--guide-olive-bright); font-size: 20px; } .player-header-actions .shop-account-trigger span { display: none; } .guide-button.shop { border-color: #c9a85c; background: #a78338; color: #161207; } .guide-button.shop:hover { border-color: #e0bd67; background: #bf9947; } .shop-library { --guide-ink: #211f17; --guide-ink-soft: #5f5949; --guide-paper: #e9dec7; --guide-paper-line: rgba(51, 47, 35, .22); --guide-olive: #7f8b22; --guide-olive-bright: #a8ba38; --guide-rust: #9f4e2e; --guide-display: "Oswald", "Arial Narrow", Impact, sans-serif; --guide-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; position: fixed; inset: 0; z-index: 105; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; background: radial-gradient(circle at 88% 8%, rgba(168, 186, 56, .11), transparent 34rem), #090a08; color: #eee8da; font-family: var(--guide-body); } .shop-library-header { display: flex; min-height: 94px; align-items: center; justify-content: space-between; gap: 24px; padding: 17px clamp(22px, 4vw, 64px); border-bottom: 1px solid rgba(231, 220, 197, .15); background: rgba(9, 10, 8, .97); box-shadow: 0 14px 40px rgba(0, 0, 0, .24); } .shop-library-brand { display: flex; min-width: 0; align-items: center; gap: 15px; } .shop-library-brand img { width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; } .shop-library-brand div { min-width: 0; } .shop-library-brand span, .shop-library-brand strong { display: block; } .shop-library-brand span { color: #98a62e; font-size: 11px; font-weight: 800; letter-spacing: .08em; } .shop-library-brand strong { margin-top: 3px; overflow: hidden; color: #f2eee2; font: 700 clamp(26px, 2.4vw, 38px)/1 var(--guide-display); text-overflow: ellipsis; white-space: nowrap; } .shop-library-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; } .shop-header-tier { display: grid; min-height: 50px; grid-template-columns: 34px minmax(0, auto) auto; align-items: center; gap: 10px; padding: 6px 13px 6px 8px; border: 1px solid rgba(184, 207, 75, .42); border-radius: 7px; background: linear-gradient(115deg, rgba(168, 186, 56, .18), rgba(20, 23, 17, .94)); box-shadow: inset 0 1px rgba(255, 255, 255, .035); } .shop-header-tier-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 6px; background: #a8ba38; color: #111307; font-size: 17px; } .shop-header-tier-copy { min-width: 0; } .shop-header-tier-copy small, .shop-header-tier-copy strong { display: block; white-space: nowrap; } .shop-header-tier-copy small { color: #9b978a; font-size: 8px; font-weight: 900; letter-spacing: .07em; } .shop-header-tier-copy strong { margin-top: 2px; color: #f2eee2; font: 700 16px/1 var(--guide-display); } .shop-header-tier > b { align-self: stretch; display: flex; align-items: center; padding-left: 11px; border-left: 1px solid rgba(231, 220, 197, .13); color: #c9dc64; font-size: 10px; white-space: nowrap; } .shop-library-actions .language-toggle, .shop-library-close { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; border: 1px solid rgba(231, 220, 197, .22); border-radius: 7px; background: #141711; color: #eee8da; cursor: pointer; font: 700 14px var(--guide-body); } .shop-library-actions .language-toggle { min-width: 58px; padding: 0 12px; color: #b8c947; } .shop-library-close:hover { border-color: #a8ba38; background: #20251a; } .shop-library-body { min-height: 0; padding: clamp(14px, 2.2vw, 34px); overflow-y: auto; overscroll-behavior: contain; } .shop-library-frame { width: min(1640px, 100%); margin: 0 auto; overflow: hidden; border: 1px solid rgba(231, 220, 197, .14); border-radius: 15px; background: #11130e; box-shadow: 0 28px 90px rgba(0, 0, 0, .35); } .shop-section { padding: clamp(38px, 4.2vw, 68px) clamp(30px, 4vw, 62px) clamp(46px, 5vw, 76px); background: radial-gradient(circle at 92% 5%, rgba(168, 186, 56, .16), transparent 28rem), linear-gradient(145deg, #1d2014 0%, #10120d 58%, #17190f 100%); color: #eee8da; } .shop-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(520px, .9fr); align-items: end; gap: clamp(34px, 5vw, 76px); } .shop-kicker { display: block; margin-bottom: 12px; color: #bda35f; font-size: 13px; font-weight: 800; letter-spacing: .08em; } .shop-title-block .guide-heading h2 { color: #f4eee2; font-size: clamp(44px, 4.2vw, 66px); } .shop-title-block .guide-heading i { color: var(--guide-olive-bright); } .shop-title-block > p { max-width: 760px; margin-top: 19px; color: #bcb7aa; font-size: clamp(18px, 1.45vw, 22px); line-height: 1.55; } .shop-economy-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border: 1px solid rgba(231, 220, 197, .16); border-radius: 10px; background: rgba(6, 8, 5, .42); } .shop-economy-rules article { display: grid; min-height: 118px; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 20px 17px; border-right: 1px solid rgba(231, 220, 197, .13); } .shop-economy-rules article:last-child { border-right: 0; } .shop-economy-rules i { color: #bda35f; font-size: 29px; } .shop-economy-rules strong, .shop-economy-rules span { display: block; } .shop-economy-rules strong { color: #f3eddf; font: 700 26px/1 var(--guide-display); } .shop-economy-rules span { margin-top: 7px; color: #969184; font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .045em; } .shop-rank-system { margin-top: 28px; padding: 24px; overflow: hidden; border: 1px solid rgba(184, 207, 75, .24); border-radius: 12px; background: linear-gradient(105deg, rgba(168, 186, 56, .08), transparent 46%), rgba(6, 8, 5, .58); } .shop-rank-system > header { display: flex; align-items: end; justify-content: space-between; gap: 34px; } .shop-rank-system > header span { color: #bda35f; font-size: 10px; font-weight: 800; letter-spacing: .075em; } .shop-rank-system > header h3 { margin-top: 6px; color: #f2ecdf; font: 700 clamp(25px, 2.3vw, 36px)/1.05 var(--guide-display); } .shop-rank-system > header p { width: min(470px, 44%); color: #aaa597; font-size: 13px; line-height: 1.55; } .shop-rank-track { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 22px; } .shop-rank-loading { grid-column: 1 / -1; padding: 20px; color: #aaa597; text-align: center; } .shop-rank-card { position: relative; min-width: 0; min-height: 150px; padding: 15px; overflow: hidden; border: 1px solid rgba(231, 220, 197, .13); border-radius: 9px; background: rgba(255, 255, 255, .025); } .shop-rank-card::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: #5d5c51; content: ""; } .shop-rank-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .shop-rank-card > div span { color: #858174; font-size: 9px; font-weight: 900; letter-spacing: .065em; } .shop-rank-card > div i { color: #777467; font-size: 21px; } .shop-rank-card > strong { display: block; margin-top: 17px; overflow: hidden; color: #d9d3c6; font: 700 20px/1 var(--guide-display); text-overflow: ellipsis; white-space: nowrap; } .shop-rank-card > p { margin-top: 7px; color: #777468; font-size: 10px; font-weight: 800; } .shop-rank-card > b { display: block; margin-top: 12px; color: #a49e8f; font-size: 11px; } .shop-rank-card > small { display: block; margin-top: 9px; color: #8f8a7d; font-size: 10px; font-weight: 800; line-height: 1.35; } .shop-rank-card[data-state="unlocked"] { border-color: rgba(189, 163, 95, .34); background: rgba(189, 163, 95, .055); } .shop-rank-card[data-state="unlocked"]::after { background: #bda35f; } .shop-rank-card[data-state="unlocked"] > div i, .shop-rank-card[data-state="unlocked"] > b { color: #bda35f; } .shop-rank-card[data-state="current"] { border-color: rgba(184, 207, 75, .62); background: linear-gradient(145deg, rgba(168, 186, 56, .2), rgba(168, 186, 56, .07)); box-shadow: 0 12px 34px rgba(0, 0, 0, .2); } .shop-rank-card[data-state="current"]::after { height: 4px; background: #b8cf4b; } .shop-rank-card[data-state="current"] > div span, .shop-rank-card[data-state="current"] > div i, .shop-rank-card[data-state="current"] > b { color: #cadf63; } .shop-rank-card[data-state="current"] > strong { color: #f4f1df; } .shop-rank-card[data-state="locked"] { opacity: .48; } .shop-rank-progress { margin-top: 16px; padding: 15px 17px; border: 1px solid rgba(231, 220, 197, .12); border-radius: 8px; background: rgba(0, 0, 0, .18); } .shop-rank-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; } .shop-rank-progress > div span { color: #c9dc64; font-size: 11px; font-weight: 900; letter-spacing: .04em; } .shop-rank-progress > div strong { color: #efe9dc; font: 700 15px var(--guide-display); } .shop-rank-progress progress { display: block; width: 100%; height: 8px; margin-top: 11px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; background: #282a22; } .shop-rank-progress progress::-webkit-progress-bar { border-radius: 999px; background: #282a22; } .shop-rank-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #8e992c, #cadf63); } .shop-rank-progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #8e992c, #cadf63); } .shop-rank-progress > p { margin-top: 9px; color: #918d80; font-size: 10px; font-weight: 800; } .shop-rank-rewards { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; margin-top: 14px; } .shop-rank-rewards > section { min-width: 0; padding: 18px; border: 1px solid rgba(231, 220, 197, .14); border-radius: 9px; background: rgba(0, 0, 0, .2); } .shop-rank-rewards section > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; } .shop-reward-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(202, 223, 99, .4); border-radius: 8px; background: rgba(168, 186, 56, .16); color: #cadf63; font-size: 19px; } .shop-rank-rewards header small { display: block; color: #bda35f; font-size: 10px; font-weight: 900; letter-spacing: .07em; } .shop-rank-rewards header h4 { margin-top: 3px; color: #f2ecdf; font: 700 19px/1.05 var(--guide-display); } .shop-rank-rewards header > strong { color: #cadf63; font: 700 18px/1 var(--guide-display); white-space: nowrap; } .shop-rank-rewards section > p { margin-top: 12px; color: #aaa597; font-size: 12px; line-height: 1.5; } .shop-daily-reward-ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 14px; } .shop-daily-reward-ladder > span { display: grid; min-width: 0; justify-items: center; gap: 5px; padding: 10px 4px; border: 1px solid rgba(231, 220, 197, .1); border-radius: 7px; background: rgba(255, 255, 255, .02); text-align: center; } .shop-daily-reward-ladder i { color: #807c70; font-size: 17px; } .shop-daily-reward-ladder small { overflow: hidden; width: 100%; color: #8d897d; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .shop-daily-reward-ladder strong { color: #d8d1c4; font-size: 11px; } .shop-daily-reward-ladder > span[data-state="current"] { border-color: rgba(202, 223, 99, .5); background: rgba(168, 186, 56, .12); } .shop-daily-reward-ladder > span[data-state="current"] i, .shop-daily-reward-ladder > span[data-state="current"] strong { color: #cadf63; } .shop-promotion-reward-list { display: grid; gap: 6px; margin-top: 14px; } .shop-promotion-reward-list article { display: grid; min-height: 48px; grid-template-columns: 32px minmax(0, 1fr) auto 76px; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid rgba(231, 220, 197, .1); border-radius: 7px; background: rgba(255, 255, 255, .018); } .shop-promotion-reward-list article > i { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .05); color: #777467; } .shop-promotion-reward-list article strong, .shop-promotion-reward-list article small { display: block; } .shop-promotion-reward-list article strong { color: #e7e0d3; font-size: 12px; } .shop-promotion-reward-list article small { margin-top: 2px; color: #858174; font-size: 9px; font-weight: 800; } .shop-promotion-reward-list article > b { color: #d7c37f; font-size: 13px; white-space: nowrap; } .shop-promotion-reward-list article > span { color: #858174; font-size: 9px; font-weight: 900; text-align: right; } .shop-promotion-reward-list article[data-state="received"] { border-color: rgba(184, 207, 75, .3); background: rgba(168, 186, 56, .07); } .shop-promotion-reward-list article[data-state="received"] > i { background: #a8ba38; color: #111307; } .shop-promotion-reward-list article[data-state="received"] > span { color: #cadf63; } .shop-promotion-reward-list article[data-state="locked"] { opacity: .48; } .shop-account-card { display: grid; min-height: 154px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(22px, 3vw, 46px); margin-top: 34px; padding: 26px clamp(24px, 3vw, 42px); border: 1px solid rgba(201, 168, 92, .34); border-radius: 12px; background: linear-gradient(112deg, rgba(61, 57, 34, .8), rgba(28, 31, 18, .86)); box-shadow: inset 0 1px rgba(255, 255, 255, .04); } .shop-account-card[data-authenticated="true"] { grid-template-columns: minmax(260px, 1fr) minmax(330px, .82fr) auto auto; gap: 24px; } .shop-account-copy { min-width: 0; } .shop-account-copy > span { color: #bda35f; font-size: 12px; font-weight: 800; letter-spacing: .075em; } .shop-account-copy h3 { margin-top: 7px; color: #f2ecdf; font: 700 clamp(25px, 2.15vw, 34px)/1.12 var(--guide-display); } .shop-account-copy p { max-width: 760px; margin-top: 8px; color: #aaa597; font-size: 15px; line-height: 1.5; } .shop-personal-tier { min-width: 0; padding: 16px; border: 1px solid rgba(184, 207, 75, .46); border-radius: 9px; background: linear-gradient(120deg, rgba(168, 186, 56, .16), transparent 72%), rgba(7, 9, 6, .48); box-shadow: inset 0 1px rgba(255, 255, 255, .035); } .shop-personal-tier-heading { display: flex; align-items: center; gap: 13px; } .shop-personal-tier-emblem { display: grid; width: 48px; height: 48px; flex: 0 0 48px; place-items: center; border: 1px solid rgba(205, 222, 99, .45); border-radius: 8px; background: #a8ba38; color: #121407; font-size: 23px; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); } .shop-personal-tier-heading > div { min-width: 0; } .shop-personal-tier-heading span, .shop-personal-tier-heading strong, .shop-personal-tier-heading small { display: block; } .shop-personal-tier-heading > div > span { color: #bda35f; font-size: 8px; font-weight: 900; letter-spacing: .075em; } .shop-personal-tier-heading strong { margin-top: 3px; overflow: hidden; color: #f4f1df; font: 700 25px/1 var(--guide-display); text-overflow: ellipsis; white-space: nowrap; } .shop-personal-tier-heading small { margin-top: 5px; color: #9a9587; font-size: 9px; font-weight: 800; } .shop-personal-tier-progress { margin-top: 14px; } .shop-personal-tier-progress > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .shop-personal-tier-progress > div span { color: #aaa597; font-size: 9px; font-weight: 800; } .shop-personal-tier-progress > div strong { color: #d9e77e; font-size: 10px; } .shop-personal-tier-progress progress { display: block; width: 100%; height: 7px; margin-top: 9px; overflow: hidden; border: 0; border-radius: 999px; appearance: none; background: #292b22; } .shop-personal-tier-progress progress::-webkit-progress-bar { border-radius: 999px; background: #292b22; } .shop-personal-tier-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, #8e992c, #cadf63); } .shop-personal-tier-progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, #8e992c, #cadf63); } .shop-personal-tier-progress > small { display: block; margin-top: 7px; overflow: hidden; color: #8f8b7e; font-size: 8px; font-weight: 800; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; } .shop-wallet { min-width: 190px; padding: 8px 28px; border-right: 1px solid rgba(231, 220, 197, .14); border-left: 1px solid rgba(231, 220, 197, .14); text-align: center; } .shop-wallet > span { display: block; color: #aaa494; font-size: 10px; font-weight: 800; letter-spacing: .06em; } .shop-wallet > strong { display: flex; align-items: baseline; justify-content: center; gap: 7px; margin-top: 5px; color: #e4c873; font: 700 38px/1 var(--guide-display); } .shop-wallet > strong i { font-size: 26px; } .shop-wallet > strong small { font: 700 15px var(--guide-body); } .shop-wallet p { margin-top: 7px; color: #8d887b; font-size: 10px; font-weight: 700; } .shop-login-button, .shop-logout-button, .shop-switch-button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 11px; padding: 0 22px; border: 1px solid #aebb3e; border-radius: 7px; background: #8e992c; color: #111307; cursor: pointer; font-size: 14px; font-weight: 800; white-space: nowrap; } .shop-login-button:hover { background: #a8ba38; } .shop-logout-button, .shop-switch-button { border-color: rgba(231, 220, 197, .24); background: rgba(13, 15, 10, .6); color: #d2ccbf; } .shop-logout-button:hover, .shop-switch-button:hover { border-color: #bda35f; color: #fff9ed; } .shop-switch-button { border-color: rgba(102, 173, 221, .35); color: #bcd8ea; } .shop-account-actions { display: flex; min-width: 174px; flex-direction: column; gap: 8px; } .shop-account-actions > button { width: 100%; } .shop-workspace { margin-top: 22px; overflow: hidden; border: 1px solid rgba(231, 220, 197, .16); border-radius: 12px; background: rgba(7, 9, 6, .55); } .shop-toolbar { display: flex; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 18px; border-bottom: 1px solid rgba(231, 220, 197, .14); background: rgba(5, 7, 5, .55); } .shop-tabs { display: flex; align-self: stretch; align-items: center; gap: 5px; } .shop-tabs button { display: inline-flex; min-height: 48px; align-items: center; gap: 9px; padding: 0 16px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #9e998c; cursor: pointer; font-size: 13px; font-weight: 800; } .shop-tabs button:hover { background: rgba(255, 255, 255, .04); color: #e9e3d6; } .shop-tabs button.active { border-color: rgba(184, 207, 75, .25); background: rgba(184, 207, 75, .1); color: #dfeaa4; } .shop-tabs button > strong { display: grid; min-width: 22px; height: 22px; place-items: center; border-radius: 11px; background: rgba(0, 0, 0, .25); color: #d9e584; font-size: 10px; } .shop-presence { display: inline-flex; align-items: center; gap: 9px; color: #aaa598; font-size: 11px; font-weight: 800; letter-spacing: .035em; } .shop-presence > i { width: 9px; height: 9px; border-radius: 50%; background: #6d6b62; } .shop-presence[data-state="online"] { color: #cbdc67; } .shop-presence[data-state="online"] > i { background: #a8ba38; box-shadow: 0 0 0 5px rgba(168, 186, 56, .1); } .shop-presence[data-state="offline"] { color: #d49a65; } .shop-presence[data-state="offline"] > i { background: #bc754e; } .shop-content { min-height: 390px; padding: 22px; } .shop-loading { padding: 80px 20px; color: #8e897d; text-align: center; } .shop-catalog-note, .shop-inventory-note { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 18px; padding: 15px 17px; border: 1px solid rgba(189, 163, 95, .2); border-radius: 7px; background: rgba(189, 163, 95, .07); color: #b8b1a2; font-size: 14px; line-height: 1.5; } .shop-catalog-note i, .shop-inventory-note i { margin-top: 2px; color: #c1a55d; } .shop-catalog-note.vehicle-note { border-color: rgba(158, 181, 56, .28); background: rgba(119, 139, 34, .1); } .shop-catalog-note.vehicle-note i { color: #b8cc51; } .shop-catalog-note.taxi-note { border-color: rgba(215, 174, 74, .3); background: rgba(181, 128, 35, .1); } .shop-catalog-note.taxi-note i { color: #e3bd5f; } .shop-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .shop-catalog.vehicle-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .shop-catalog.taxi-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .shop-item-card { display: flex; min-width: 0; min-height: 360px; overflow: hidden; border: 1px solid rgba(231, 220, 197, .14); border-radius: 9px; background: linear-gradient(155deg, rgba(38, 42, 27, .92), rgba(14, 17, 11, .96)); flex-direction: column; } .shop-item-card[data-tier="welcome"] { border-color: rgba(220, 190, 87, .58); box-shadow: inset 0 1px rgba(244, 218, 110, .12), 0 12px 34px rgba(0, 0, 0, .14); } .shop-item-card[data-tier="rare"] { border-color: rgba(189, 163, 95, .38); } .shop-item-card[data-tier="exclusive"] { border-color: rgba(184, 207, 75, .45); box-shadow: inset 0 1px rgba(184, 207, 75, .1); } .shop-item-card[data-tier="road"] { border-color: rgba(119, 139, 34, .36); } .shop-item-card[data-tier="utility"] { border-color: rgba(178, 143, 72, .4); } .shop-item-card[data-tier="rugged"] { border-color: rgba(164, 104, 64, .5); } .shop-item-card[data-tier="elite"] { border-color: rgba(196, 181, 72, .58); box-shadow: inset 0 1px rgba(225, 207, 80, .12); } .shop-item-card[data-tier="taxi_local"] { border-color: rgba(205, 169, 70, .38); } .shop-item-card[data-tier="taxi_regional"] { border-color: rgba(205, 137, 63, .48); } .shop-item-card[data-tier="taxi_longhaul"] { border-color: rgba(168, 186, 56, .5); box-shadow: inset 0 1px rgba(168, 186, 56, .09); } .shop-item-card.vehicle-card { min-height: 430px; background: linear-gradient(145deg, rgba(31, 36, 23, .96), rgba(12, 15, 10, .98)); } .shop-item-card.taxi-card { min-height: 390px; background: linear-gradient(150deg, rgba(45, 37, 18, .95), rgba(14, 16, 10, .98)); } .shop-item-card.bundle-card { min-height: 500px; background: linear-gradient(150deg, rgba(48, 43, 23, .96), rgba(16, 18, 11, .98)); } .shop-item-icon { position: relative; display: grid; min-height: 160px; place-items: center; overflow: hidden; border-bottom: 1px solid rgba(231, 220, 197, .1); background: radial-gradient(circle at 50% 22%, rgba(184, 207, 75, .16), transparent 62%), #11140d; isolation: isolate; } .shop-item-icon::before { position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 4, .02) 28%, rgba(5, 7, 4, .78) 100%); content: ""; pointer-events: none; } .shop-item-icon::after { position: absolute; z-index: 4; inset: auto 0 0; height: 2px; background: #77831f; content: ""; } .shop-item-card[data-tier="welcome"] .shop-item-icon::after { height: 3px; background: #ddbf57; box-shadow: 0 0 16px rgba(221, 191, 87, .55); } .shop-item-card[data-tier="rare"] .shop-item-icon::after { background: #b4944d; } .shop-item-card[data-tier="exclusive"] .shop-item-icon::after { background: #a8ba38; } .shop-item-card[data-tier="road"] .shop-item-icon::after { background: #87972f; } .shop-item-card[data-tier="utility"] .shop-item-icon::after { background: #b28f48; } .shop-item-card[data-tier="rugged"] .shop-item-icon::after { background: #a46840; } .shop-item-card[data-tier="elite"] .shop-item-icon::after { background: #c4b548; } .shop-item-card[data-tier="taxi_local"] .shop-item-icon::after { background: #c7a446; } .shop-item-card[data-tier="taxi_regional"] .shop-item-icon::after { background: #cb803e; } .shop-item-card[data-tier="taxi_longhaul"] .shop-item-icon::after { background: #99aa35; } .shop-item-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.06) brightness(.9); transform: scale(1.015); transition: filter .28s ease, transform .45s ease; } .shop-item-card:hover .shop-item-art { filter: saturate(.98) contrast(1.08) brightness(.98); transform: scale(1.055); } .shop-item-icon > i { z-index: 2; color: #c7d969; font-size: 50px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .35)); } .shop-item-badges { position: absolute; z-index: 3; right: 12px; bottom: 12px; left: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none; } .shop-item-tier, .shop-mod-badge { display: inline-flex; min-height: 24px; align-items: center; padding: 0 9px; border: 1px solid rgba(231, 220, 197, .15); border-radius: 999px; background: rgba(6, 8, 5, .78); box-shadow: 0 5px 18px rgba(0, 0, 0, .28); color: #d0cbbb; font-size: 9px; font-weight: 900; letter-spacing: .07em; backdrop-filter: blur(7px); } .shop-mod-badge { gap: 5px; border-color: rgba(184, 207, 75, .38); background: rgba(81, 94, 24, .86); color: #eff7bb; } .shop-mod-badge i { color: #d8e67e; font-size: 10px; } .shop-item-copy { display: flex; min-height: 0; padding: 20px 18px 16px; flex: 1; flex-direction: column; } .shop-item-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .shop-item-title h3 { color: #f0eadf; font: 700 25px/1.08 var(--guide-display); } .shop-item-title > strong { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #e2c36c; font-size: 14px; white-space: nowrap; } .shop-item-copy > p { margin-top: 11px; color: #9f9a8e; font-size: 14px; line-height: 1.48; } .vehicle-card .shop-item-icon { min-height: 190px; background: radial-gradient(ellipse at 50% 35%, rgba(184, 207, 75, .2), transparent 52%), linear-gradient(180deg, #181d12 0%, #0c0f0a 100%); } .vehicle-card .shop-item-icon > i { font-size: 68px; } .vehicle-card .shop-item-copy > p { max-width: 580px; } .vehicle-guarantees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; } .vehicle-guarantees span { display: flex; min-height: 37px; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid rgba(231, 220, 197, .11); border-radius: 5px; background: rgba(0, 0, 0, .16); color: #aaa99b; font-size: 9px; font-weight: 800; letter-spacing: .035em; } .vehicle-guarantees i { flex: 0 0 auto; color: #b7c951; font-size: 13px; } .taxi-card .shop-item-icon { min-height: 126px; background: radial-gradient(ellipse at 50% 34%, rgba(224, 179, 69, .2), transparent 54%), linear-gradient(180deg, #211c0f 0%, #0e100a 100%); } .taxi-card .shop-item-icon::before { background: radial-gradient(ellipse at 50% 35%, rgba(224, 179, 69, .16), transparent 55%), linear-gradient(180deg, transparent 35%, rgba(8, 8, 4, .7)); } .taxi-card .shop-item-icon > i { color: #e1bd61; font-size: 58px; } .taxi-guarantees { display: grid; gap: 7px; margin-top: 16px; } .taxi-guarantees span { display: flex; min-height: 34px; align-items: center; gap: 8px; padding: 6px 9px; border: 1px solid rgba(231, 220, 197, .1); border-radius: 5px; background: rgba(0, 0, 0, .16); color: #aaa394; font-size: 9px; font-weight: 800; letter-spacing: .035em; } .taxi-guarantees i { flex: 0 0 auto; color: #dfb857; font-size: 13px; } .welcome-package-contents { margin-top: 17px; padding: 13px 14px; border: 1px solid rgba(221, 191, 87, .2); border-radius: 6px; background: rgba(221, 191, 87, .055); } .welcome-package-contents > strong { display: flex; align-items: center; gap: 8px; color: #d9bd68; font-size: 10px; font-weight: 900; letter-spacing: .075em; } .welcome-package-contents > strong i { color: #e3ca77; font-size: 14px; } .welcome-package-contents ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; margin-top: 11px; padding: 0; list-style: none; } .welcome-package-contents li { display: flex; min-width: 0; align-items: flex-start; gap: 6px; color: #aaa496; font-size: 10px; font-weight: 700; line-height: 1.35; } .welcome-package-contents li i { flex: 0 0 auto; margin-top: 1px; color: #adbe4d; font-size: 12px; } .shop-item-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; color: #77756c; font-size: 9px; font-weight: 800; letter-spacing: .04em; } .shop-buy-button { display: flex; min-height: 56px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 18px; border: 0; border-top: 1px solid rgba(231, 220, 197, .12); background: #7f8b22; color: #101207; cursor: pointer; font-size: 12px; font-weight: 900; letter-spacing: .025em; } .shop-buy-button:hover:not(:disabled) { background: #a8ba38; } .shop-buy-button.login { background: #9a813f; color: #151106; } .shop-buy-button:disabled { cursor: not-allowed; } .shop-buy-button.owned { background: rgba(184, 207, 75, .12); color: #bdca7d; } .shop-buy-button.offline, .shop-buy-button.funds { background: rgba(255, 255, 255, .035); color: #77756d; } .shop-empty { display: grid; min-height: 340px; place-items: center; align-content: center; gap: 17px; padding: 30px; color: #9e998c; text-align: center; } .shop-empty > i { color: #879426; font-size: 58px; } .shop-empty p { max-width: 640px; font-size: 17px; line-height: 1.55; } .shop-empty button { min-height: 48px; padding: 0 20px; border: 1px solid #8f9b2e; border-radius: 6px; background: #7f8b22; color: #101207; cursor: pointer; font-weight: 800; } .shop-inventory-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .shop-inventory-item { min-width: 0; min-height: 250px; padding: 18px; border: 1px solid rgba(231, 220, 197, .14); border-radius: 9px; background: rgba(255, 255, 255, .025); } .shop-inventory-item > div { display: grid; width: 86px; height: 64px; place-items: center; overflow: hidden; border-radius: 8px; background: rgba(184, 207, 75, .1); color: #c3d25f; font-size: 28px; } .shop-inventory-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.84) contrast(1.05); } .shop-inventory-item > span { display: block; margin-top: 18px; color: #9d8d5e; font-size: 9px; font-weight: 800; letter-spacing: .07em; } .shop-inventory-item h3 { margin-top: 7px; color: #eee8dc; font: 700 24px/1.1 var(--guide-display); } .shop-inventory-item > strong { display: block; margin-top: 17px; color: #c8d66f; font-size: 12px; } .shop-inventory-item > p { margin-top: 6px; color: #77746b; font-size: 11px; } .shop-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 6px 4px 20px; } .shop-activity-head h3 { font: 700 30px var(--guide-display); } .shop-activity-head strong { color: #d8be70; font-size: 15px; } .shop-activity-list { border: 1px solid rgba(231, 220, 197, .12); border-radius: 8px; } .shop-activity-list article { display: grid; min-height: 78px; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid rgba(231, 220, 197, .1); } .shop-activity-list article:last-child { border-bottom: 0; } .shop-activity-mark { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; background: rgba(168, 186, 56, .1); color: #bdcd65; } .shop-activity-mark.debit { background: rgba(189, 163, 95, .1); color: #c7a85c; } .shop-activity-list article > div:nth-child(2) strong { color: #e5dfd3; font-size: 14px; } .shop-activity-list article > div:nth-child(2) p { margin-top: 5px; color: #77746c; font-size: 11px; } .shop-activity-list article > span { color: #baca63; font-size: 15px; font-weight: 800; text-align: right; } .shop-activity-list article > span.debit { color: #d3ad62; } .shop-activity-list article > span small { display: block; margin-top: 5px; color: #747169; font-size: 9px; } .player-username-field { display: grid; height: 60px; grid-template-columns: 50px minmax(0, 1fr); align-items: center; margin-bottom: 20px; overflow: hidden; border: 1px solid var(--login-line); border-radius: 7px; background: rgba(255, 252, 245, .52); } .player-username-field:focus-within { border-color: var(--login-olive); box-shadow: 0 0 0 3px rgba(119, 131, 31, .13); } .player-username-field i { color: var(--login-olive); font-size: 19px; text-align: center; } .player-username-field input { height: 58px; min-width: 0; padding: 0 16px 0 0; border: 0; outline: 0; background: transparent; color: var(--login-ink); font-size: 16px; } .shop-login-visual { background-position: 70% center; filter: saturate(.78); } .player-login-layer .login-visual-mark { color: #e0bd67; } .shop-login-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: #817966; font-size: 10px; font-weight: 900; letter-spacing: .08em; } .shop-login-divider::before, .shop-login-divider::after { height: 1px; background: var(--login-line); content: ""; flex: 1; } .steam-login-button { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: center; gap: 12px; border: 1px solid #1e252d; border-radius: 7px; background: linear-gradient(135deg, #27384d, #171d25); box-shadow: inset 0 1px rgba(255, 255, 255, .08); color: #fff; font-size: 14px; font-weight: 800; } .steam-login-button:hover { border-color: #66c0f4; background: linear-gradient(135deg, #31577a, #1b2838); } .steam-login-button i { color: #66c0f4; font-size: 22px; } .steam-login-button[hidden], .steam-login-note[hidden] { display: none; } .steam-login-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 11px; color: #6c6659; font-size: 11px; line-height: 1.45; } .steam-login-note i { flex: 0 0 auto; color: #397aa7; font-size: 16px; } .steam-account-selector { width: min(610px, 100%); } .steam-account-selector[hidden] { display: none; } .steam-selector-mark { background: rgba(42, 92, 126, .13); color: #2878aa; } .steam-selector-copy { margin-bottom: 20px; } .steam-selector-copy h2 { font-size: clamp(39px, 3.7vw, 56px); } .steam-profile-summary { display: flex; min-height: 64px; align-items: center; gap: 13px; margin-bottom: 15px; padding: 10px 13px; border: 1px solid rgba(42, 92, 126, .2); border-radius: 8px; background: rgba(54, 113, 150, .07); } .steam-profile-summary img { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 5px; object-fit: cover; } .steam-profile-summary span, .steam-profile-summary strong { display: block; } .steam-profile-summary span { color: #67717a; font-size: 9px; font-weight: 900; letter-spacing: .07em; } .steam-profile-summary strong { margin-top: 4px; color: #263947; font-size: 15px; } .steam-account-choices { display: grid; max-height: min(310px, 35dvh); gap: 9px; overflow-y: auto; padding-right: 4px; } .steam-account-choice { display: grid; min-height: 76px; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 11px 13px; border: 1px solid var(--login-line); border-radius: 8px; background: rgba(255, 252, 245, .48); color: var(--login-ink); cursor: pointer; text-align: left; } .steam-account-choice:hover { border-color: #397aa7; background: rgba(75, 142, 183, .09); } .steam-account-choice:disabled { cursor: wait; opacity: .68; } .steam-account-choice > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: rgba(57, 122, 167, .12); color: #2878aa; font-size: 18px; } .steam-account-choice strong, .steam-account-choice span, .steam-account-choice small { display: block; } .steam-account-choice strong { font-size: 15px; } .steam-account-choice span { margin-top: 4px; color: #6b6456; font-size: 11px; } .steam-account-choice small { color: #397aa7; font-size: 9px; font-weight: 900; letter-spacing: .055em; } .steam-password-fallback { display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--login-line); border-radius: 7px; background: rgba(255, 252, 245, .4); color: #655e50; cursor: pointer; font-size: 11px; font-weight: 800; } .steam-password-fallback:hover { border-color: var(--login-olive); color: #4d5712; } .steam-selector-foot { margin-top: 14px; } .purchase-layer { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 20px; background: rgba(4, 5, 3, .82); backdrop-filter: blur(12px); } .purchase-dialog { width: min(620px, 100%); padding: clamp(28px, 4vw, 48px); border: 1px solid rgba(231, 220, 197, .22); border-radius: 15px; background: var(--guide-paper) url("/assets/parchment-texture.png?v=20260805-1") center / 720px auto repeat; box-shadow: 0 35px 100px rgba(0, 0, 0, .58); color: var(--guide-ink); } .purchase-icon { display: grid; width: 72px; height: 72px; place-items: center; border-radius: 50%; background: rgba(119, 131, 31, .14); color: #69751d; font-size: 32px; } .purchase-dialog > p:first-of-type { margin-top: 23px; color: var(--guide-rust); font-size: 11px; font-weight: 800; letter-spacing: .07em; } .purchase-dialog h2 { margin-top: 7px; font: 700 clamp(36px, 4vw, 50px)/1.02 var(--guide-display); } .purchase-summary { display: grid; margin-top: 24px; border: 1px solid var(--guide-paper-line); border-radius: 8px; } .purchase-summary > div { display: grid; min-height: 56px; grid-template-columns: 160px minmax(0, 1fr); align-items: center; gap: 16px; padding: 10px 15px; border-bottom: 1px solid var(--guide-paper-line); } .purchase-summary > div:last-child { border-bottom: 0; } .purchase-summary span { color: var(--guide-ink-soft); font-size: 10px; font-weight: 800; letter-spacing: .05em; } .purchase-summary strong { font-size: 15px; text-align: right; } .purchase-note { margin-top: 19px; color: var(--guide-ink-soft); font-size: 14px; line-height: 1.55; } .purchase-dialog .login-error { min-height: 32px; } .purchase-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; } .purchase-actions button { min-height: 54px; border: 1px solid var(--guide-paper-line); border-radius: 7px; background: rgba(255, 255, 255, .26); color: var(--guide-ink); cursor: pointer; font-size: 12px; font-weight: 800; } .purchase-actions button:last-child { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-color: #77831f; background: #77831f; color: #fffdf5; } .purchase-actions button:last-child:hover { background: #69751b; } .purchase-actions button:disabled { cursor: wait; opacity: .7; } @media (max-width: 1380px) { .shop-intro { grid-template-columns: 1fr; } .shop-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-catalog.taxi-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1180px) { .player-header-actions .shop-account-trigger { max-width: 210px; } .shop-account-card { grid-template-columns: minmax(0, 1fr) auto; } .shop-account-card[data-authenticated="true"] { grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); } .shop-personal-tier { grid-column: 2; grid-row: 1 / span 2; } .shop-wallet { grid-column: 1; grid-row: 2; width: fit-content; padding: 12px 0 0; border: 0; text-align: left; } .shop-wallet > strong { justify-content: flex-start; } .shop-account-actions { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; } .shop-account-actions > button { width: auto; } .shop-rank-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { .player-header-actions .shop-account-trigger { min-width: 50px; max-width: 50px; justify-content: center; padding: 0; } .player-header-actions .shop-account-trigger span { display: none; } .shop-library-header { min-height: 82px; padding: 12px 16px; } .shop-library-brand img { width: 48px; height: 48px; flex-basis: 48px; } .shop-library-brand span { display: none; } .shop-library-brand strong { font-size: 27px; } .shop-header-tier > b { display: none; } .shop-library-body { padding: 12px; } .shop-section { padding: 38px 22px 48px; } .shop-economy-rules { grid-template-columns: 1fr; } .shop-economy-rules article { min-height: 88px; border-right: 0; border-bottom: 1px solid rgba(231, 220, 197, .13); } .shop-economy-rules article:last-child { border-bottom: 0; } .shop-rank-system { padding: 20px; } .shop-rank-system > header { align-items: start; flex-direction: column; gap: 10px; } .shop-rank-system > header p { width: 100%; } .shop-rank-track { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: 7px; scroll-snap-type: x proximity; } .shop-rank-card { scroll-snap-align: start; } .shop-account-card, .shop-account-card[data-authenticated="true"] { grid-template-columns: 1fr; } .shop-personal-tier, .shop-wallet, .shop-account-actions { grid-column: 1; grid-row: auto; } .shop-account-actions { flex-direction: column; } .shop-account-actions > button { width: 100%; } .shop-toolbar { align-items: stretch; flex-direction: column; padding: 10px; } .shop-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop-tabs button { justify-content: center; padding: 0 8px; } .shop-presence { padding: 4px 8px 9px; } .shop-content { padding: 14px; } .shop-catalog { grid-template-columns: 1fr; } .shop-catalog.vehicle-catalog { grid-template-columns: 1fr; } .shop-catalog.taxi-catalog { grid-template-columns: 1fr; } .shop-item-card { min-height: 330px; } .shop-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .shop-library-header { gap: 10px; padding: 10px 12px; } .shop-library-brand { gap: 8px; } .shop-library-brand img { width: 42px; height: 42px; flex-basis: 42px; } .shop-library-brand strong { font-size: 22px; } .shop-library-actions { gap: 6px; } .shop-header-tier { min-height: 44px; grid-template-columns: 28px minmax(0, auto); gap: 7px; padding: 4px 9px 4px 5px; } .shop-header-tier-icon { width: 28px; height: 28px; font-size: 14px; } .shop-header-tier-copy small { display: none; } .shop-header-tier-copy strong { margin-top: 0; font-size: 13px; } .shop-library-actions .language-toggle, .shop-library-close { min-height: 44px; min-width: 44px; padding: 0 12px; } .shop-library-close span { display: none; } .shop-library-body { padding: 0; } .shop-library-frame { border-width: 0; border-radius: 0; } .shop-section { padding: 34px 16px 42px; } .shop-kicker { font-size: 10px; line-height: 1.4; } .shop-title-block .guide-heading h2 { font-size: 38px; } .shop-title-block > p { font-size: 17px; } .shop-rank-system { margin-right: -4px; margin-left: -4px; padding: 18px 14px; } .shop-rank-system > header h3 { font-size: 27px; } .shop-rank-progress > div { align-items: flex-start; flex-direction: column; gap: 5px; } .shop-account-card { padding: 22px 18px; } .shop-account-copy h3 { font-size: 28px; } .shop-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-tabs button { min-height: 44px; justify-content: flex-start; } .shop-catalog-note, .shop-inventory-note { font-size: 12px; } .shop-item-title { align-items: flex-start; flex-direction: column; } .welcome-package-contents ul { grid-template-columns: 1fr; } .vehicle-guarantees { grid-template-columns: 1fr; } .shop-inventory-grid { grid-template-columns: 1fr; } .shop-activity-head { align-items: flex-start; flex-direction: column; } .shop-activity-list article { grid-template-columns: 40px minmax(0, 1fr); } .shop-activity-list article > span { grid-column: 2; text-align: left; } .player-username-field { height: 56px; } .player-username-field input { height: 54px; } .purchase-dialog { padding: 28px 20px; } .purchase-summary > div { grid-template-columns: 1fr; gap: 5px; } .purchase-summary strong { text-align: left; } .purchase-actions { grid-template-columns: 1fr; } } /* Option 2 — County General Store */ :root { --app-header-height: 94px; --app-header-gutter: clamp(24px, 4vw, 64px); --app-header-control-height: 50px; --app-brand-icon-size: 58px; } .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .app-header { width: 100%; height: var(--app-header-height); min-height: var(--app-header-height); max-height: var(--app-header-height); padding-top: 0; padding-right: var(--app-header-gutter); padding-bottom: 0; padding-left: var(--app-header-gutter); } .app-brand { gap: 16px; } .app-header .player-brand > img, .app-header .shop-library-brand > img, .app-header .login-brand > img, .app-header .admin-brand .brand-mark { width: var(--app-brand-icon-size); height: var(--app-brand-icon-size); flex: 0 0 var(--app-brand-icon-size); } .app-header-actions > button, .app-header-actions .language-toggle, .app-header-actions .admin-trigger, .app-header-actions .shop-account-trigger, .app-header-actions .shop-header-tier { height: var(--app-header-control-height); min-height: var(--app-header-control-height); max-height: var(--app-header-control-height); } .admin-workspace, .login-layer, .shop-library { grid-template-rows: var(--app-header-height) minmax(0, 1fr); } .admin-workspace::before { inset: var(--app-header-height) 0 0; } .shop-library { background: #090a08; } .shop-library-header { display: flex; justify-content: space-between; gap: 20px; border-bottom-color: rgba(231, 220, 197, .14); background: rgba(8, 9, 7, .985); box-shadow: 0 12px 34px rgba(0, 0, 0, .28); } .shop-library-brand strong { max-width: min(34vw, 360px); margin: 0; font-size: clamp(22px, 1.75vw, 29px); } .shop-library-brand span { margin-top: 3px; color: #a9b83d; font-size: 9px; } .shop-header-nav { display: flex; height: 100%; align-items: stretch; gap: clamp(16px, 2vw, 30px); margin-right: auto; margin-left: auto; } .shop-header-nav a, .shop-header-nav button { position: relative; display: grid; min-width: 0; place-items: center; padding: 0; border: 0; background: transparent; color: #c0baae; cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: .035em; } .shop-header-nav a::after, .shop-header-nav button::after { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; background: transparent; content: ""; } .shop-header-nav a:hover, .shop-header-nav button:hover, .shop-header-nav button.active { color: #f3ede1; } .shop-header-nav button.active::after { background: #a8ba38; } .shop-library-actions { min-width: 0; } .shop-header-tier { display: inline-grid; width: auto; min-width: 0; grid-template-columns: 30px minmax(0, auto) 14px; gap: 8px; padding: 5px 10px 5px 6px; border: 1px solid rgba(184, 207, 75, .3); border-radius: 7px; background: rgba(28, 32, 19, .78); color: #eee9dd; cursor: pointer; box-shadow: none; } .shop-header-tier:hover { border-color: #a8ba38; background: #242b18; } .shop-header-tier-icon { width: 30px; height: 30px; border-radius: 5px; background: #a8ba38; font-size: 14px; } .shop-header-tier-copy strong { margin: 0; font: 700 15px/1 var(--guide-display); text-align: left; } .shop-header-tier-copy small { margin-top: 3px; color: #aeb76d; font-size: 8px; line-height: 1; text-align: left; } .shop-header-tier-chevron { color: #7f8763; font-size: 11px; } .shop-library-actions .language-toggle, .shop-library-close { height: var(--app-header-control-height); min-height: var(--app-header-control-height); } .shop-library-body { padding: clamp(14px, 1.6vw, 26px); background: radial-gradient(circle at 78% 0%, rgba(146, 162, 45, .09), transparent 35rem), #090a08; } .shop-library-frame { width: min(var(--workspace-max), 100%); border-color: rgba(231, 220, 197, .16); border-radius: 16px; background: #12140f; } .shop-section { padding: 0; background: #11130e; } .shop-account-card, .shop-account-card[data-authenticated="true"] { display: grid; min-height: 64px; grid-template-columns: minmax(210px, 1fr) auto auto minmax(440px, 1.5fr); align-items: center; gap: 18px; margin: 0; padding: 8px clamp(20px, 2.5vw, 38px); border: 0; border-bottom: 1px solid rgba(231, 220, 197, .13); border-radius: 0; background: #171912; box-shadow: none; } .shop-account-copy { grid-column: 1; } .shop-account-actions { grid-column: 2; } .shop-wallet { grid-column: 3; } .shop-account-card .shop-economy-rules { grid-column: 4; } .shop-account-copy > span { color: #b9a260; font-size: 9px; } .shop-account-copy h3 { margin-top: 4px; overflow: hidden; color: #eee8dc; font: 700 15px/1.1 var(--guide-display); text-overflow: ellipsis; white-space: nowrap; } .shop-account-copy p { display: none; } .shop-presence { display: none; min-height: 36px; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(231, 220, 197, .12); border-radius: 999px; background: rgba(0, 0, 0, .18); color: #9d998d; font-size: 9px; font-weight: 900; letter-spacing: .035em; white-space: nowrap; } .shop-presence > i { width: 7px; height: 7px; border-radius: 50%; background: #77786e; } .shop-presence[data-state="online"] { border-color: rgba(184, 207, 75, .3); color: #c8d776; } .shop-presence[data-state="online"] > i { background: #b8cf4b; box-shadow: 0 0 0 4px rgba(184, 207, 75, .1); } .shop-presence[data-state="offline"] { color: #c5a160; } .shop-presence[data-state="offline"] > i { background: #c59248; } .shop-wallet { min-width: 142px; padding: 0 18px; border-right: 1px solid rgba(231, 220, 197, .12); border-left: 1px solid rgba(231, 220, 197, .12); text-align: right; } .shop-wallet > span { font-size: 8px; } .shop-wallet > strong { justify-content: flex-end; margin-top: 3px; font-size: 26px; } .shop-wallet > strong i { font-size: 18px; } .shop-wallet > strong small { font-size: 11px; } .shop-wallet p { display: none; } .shop-account-actions { min-width: 0; flex-direction: row; gap: 7px; } .shop-account-actions > button { width: auto; min-height: 40px; padding: 0 14px; font-size: 11px; } .shop-account-actions .shop-logout-button, .shop-account-actions .shop-switch-button { width: 44px; padding: 0; } .shop-account-actions .shop-logout-button span, .shop-account-actions .shop-switch-button span { display: none; } .shop-account-card .shop-economy-rules { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; backdrop-filter: none; } .shop-account-card .shop-economy-rules article { min-height: 48px; grid-template-columns: 23px minmax(0, 1fr); gap: 8px; padding: 5px 13px; } .shop-account-card .shop-economy-rules i { font-size: 17px; } .shop-account-card .shop-economy-rules strong { font-size: 17px; } .shop-account-card .shop-economy-rules span { margin-top: 3px; font-size: 7px; } .shop-store-hero { position: relative; display: grid; min-height: 340px; grid-template-columns: minmax(350px, .74fr) minmax(590px, 1.26fr); gap: clamp(28px, 3vw, 50px); padding: clamp(24px, 2.3vw, 38px) clamp(30px, 3vw, 48px); overflow: hidden; isolation: isolate; background: linear-gradient(90deg, rgba(10, 12, 8, .96) 0%, rgba(13, 16, 9, .88) 42%, rgba(10, 12, 7, .73) 100%), url("/assets/knox-safehouse.png?v=20260805-2") center / cover no-repeat; } .shop-store-hero::before { position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 78% 44%, rgba(174, 189, 55, .12), transparent 32rem), linear-gradient(180deg, transparent 55%, rgba(6, 7, 5, .55)); content: ""; } .shop-hero-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; } .shop-kicker { margin: 0; color: #c7aa5c; font-size: 11px; font-weight: 900; letter-spacing: .11em; } .shop-hero-copy h2 { max-width: 350px; margin-top: 12px; color: #f4eee2; font: 700 clamp(43px, 4.1vw, 61px)/.93 var(--guide-display); letter-spacing: -.035em; text-wrap: balance; } .shop-hero-copy > p { max-width: 620px; margin-top: 13px; color: #c0baae; font-size: clamp(13px, 1.05vw, 16px); line-height: 1.52; } .shop-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .shop-hero-actions button { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid rgba(231, 220, 197, .24); border-radius: 6px; background: rgba(12, 14, 9, .72); color: #e8e2d6; cursor: pointer; font-size: 11px; font-weight: 900; letter-spacing: .035em; } .shop-hero-actions .shop-hero-primary { border-color: #9da930; background: #879326; color: #111307; } .shop-hero-actions .shop-hero-primary:hover { background: #a8ba38; } .shop-tier-preview:hover { border-color: #bda35f; background: rgba(59, 53, 31, .86); } .shop-economy-rules { width: min(650px, 100%); margin-top: 0; border-color: rgba(231, 220, 197, .13); border-radius: 7px; background: rgba(7, 8, 5, .5); backdrop-filter: blur(8px); } .shop-economy-rules article { min-height: 72px; grid-template-columns: 28px minmax(0, 1fr); gap: 9px; padding: 13px 12px; } .shop-economy-rules i { font-size: 20px; } .shop-economy-rules strong { font-size: 19px; } .shop-economy-rules span { margin-top: 5px; font-size: 8px; } .shop-featured { align-self: center; min-width: 0; } .shop-featured-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 11px; } .shop-featured-heading span { color: #c6ad65; font-size: 9px; font-weight: 900; letter-spacing: .09em; } .shop-featured-heading h3 { color: #f2ecdf; font: 700 25px/1 var(--guide-display); } .shop-featured-grid { display: grid; height: 250px; min-height: 0; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .85fr); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; } .shop-feature-card[data-size="side"] .shop-feature-copy p { display: none; } .shop-feature-card[data-size="side"] .shop-feature-art { min-height: 48px; } .shop-feature-card[data-size="side"] .shop-feature-copy h4 { font-size: 15px; } .shop-feature-card[data-size="side"] .shop-feature-copy > span { display: none; } .shop-feature-card { display: grid; min-width: 0; min-height: 0; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto auto; overflow: hidden; border: 1px solid rgba(232, 220, 195, .2); border-radius: 9px; background: rgba(20, 23, 15, .94); box-shadow: 0 18px 45px rgba(0, 0, 0, .25); } .shop-feature-card[data-size="lead"] { grid-row: 1 / span 2; } .shop-feature-art { position: relative; min-height: 88px; overflow: hidden; background: #1d2116; } .shop-feature-card[data-size="lead"] .shop-feature-art { min-height: 90px; } .shop-feature-art::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(7, 9, 5, .77)); content: ""; } .shop-feature-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08); transition: transform .5s ease, filter .3s ease; } .shop-feature-card:hover .shop-feature-art img { filter: saturate(.98) contrast(1.05); transform: scale(1.045); } .shop-feature-art > i { display: grid; height: 100%; min-height: 110px; place-items: center; color: #b8c951; font-size: 46px; } .shop-feature-art > span { position: absolute; z-index: 2; top: 10px; left: 10px; padding: 6px 8px; border-radius: 4px; background: #b89b4e; color: #171307; font-size: 8px; font-weight: 900; letter-spacing: .055em; } .shop-feature-copy { min-width: 0; padding: 10px 12px 5px; } .shop-feature-copy > span { color: #b9a35f; font-size: 8px; font-weight: 900; letter-spacing: .07em; } .shop-feature-copy h4 { margin: 4px 0 0; color: #f1ebdf; font: 700 18px/1.04 var(--guide-display); } .shop-feature-card[data-size="lead"] .shop-feature-copy h4 { font-size: 25px; } .shop-feature-copy p { display: -webkit-box; margin-top: 7px; overflow: hidden; color: #9e998e; font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .shop-feature-price { display: grid; min-height: 36px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 7px 7px 11px; } .shop-feature-price > strong { color: #e1c269; font-size: 13px; white-space: nowrap; } .shop-feature-price > strong i { margin-right: 5px; } .shop-feature-price button { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: space-between; gap: 7px; padding: 0 11px; overflow: hidden; border: 0; border-radius: 5px; background: #879326; color: #111307; cursor: pointer; font-size: 9px; font-weight: 900; } .shop-feature-price button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-feature-price button:hover:not(:disabled) { background: #a8ba38; } .shop-feature-price button.login { background: #a2843e; } .shop-feature-price button:disabled { cursor: not-allowed; opacity: .55; } .shop-workspace { margin: 0; overflow: hidden; border: 0; border-radius: 0; background: #e5dbc4 url("/assets/parchment-texture.png?v=20260805-1") center / 720px auto repeat; color: #211f17; } .shop-stock-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 24px clamp(24px, 3vw, 46px) 12px; border-top: 1px solid rgba(255, 255, 255, .04); } .shop-stock-header > div:first-child > span { color: #8b492d; font-size: 9px; font-weight: 900; letter-spacing: .09em; } .shop-stock-header h3 { margin-top: 5px; color: #27231a; font: 700 clamp(34px, 3vw, 48px)/1 var(--guide-display); } .shop-stock-header p { margin-top: 6px; color: #6a6353; font-size: 13px; } .shop-stock-tools { display: flex; align-items: center; gap: 8px; } .shop-stock-tools label { position: relative; display: grid; min-height: 48px; align-items: center; border: 1px solid rgba(53, 48, 35, .28); border-radius: 6px; background: rgba(255, 252, 244, .54); color: #69614f; } .shop-search { width: min(300px, 31vw); grid-template-columns: 38px minmax(0, 1fr); } .shop-filter { width: min(190px, 22vw); grid-template-columns: 38px minmax(0, 1fr); } .shop-stock-tools label > i { text-align: center; } .shop-stock-tools input, .shop-stock-tools select { width: 100%; height: 46px; min-width: 0; padding: 0 12px 0 0; border: 0; outline: 0; background: transparent; color: #29251c; font-size: 12px; font-weight: 700; } .shop-stock-tools select { cursor: pointer; } .shop-stock-tools label:focus-within { border-color: #77831f; box-shadow: 0 0 0 3px rgba(119, 131, 31, .12); } .shop-toolbar { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 20px; padding: 7px clamp(24px, 3vw, 46px); border: 0; background: #171912; } .shop-tabs { display: flex; width: auto; min-width: 0; flex: 1; gap: 5px; overflow-x: auto; border-bottom: 0; } .shop-tabs button { position: relative; min-height: 46px; flex: 0 0 auto; gap: 8px; padding: 0 15px; border: 0; border-radius: 6px 6px 0 0; background: transparent; color: #b3ada0; font-size: 10px; font-weight: 900; } .shop-tabs button::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 3px; background: transparent; content: ""; } .shop-tabs button.active { background: #ded4bd; color: #29251b; } .shop-tabs button.active::after { display: none; } .shop-tabs button strong { min-width: 20px; min-height: 20px; padding: 0 5px; border-radius: 999px; background: rgba(53, 48, 35, .12); line-height: 20px; } .shop-toolbar .shop-stock-tools { flex: 0 1 430px; } .shop-toolbar .shop-stock-tools label { border-color: rgba(231, 220, 197, .14); background: rgba(8, 9, 6, .38); color: #9b9689; } .shop-toolbar .shop-stock-tools input, .shop-toolbar .shop-stock-tools select { color: #e2dccf; } .shop-toolbar .shop-stock-tools select option { background: #171912; color: #eee8dc; } .shop-content { min-height: 420px; padding: 18px clamp(24px, 3vw, 46px) 48px; color: #211f17; } .shop-catalog-note, .shop-inventory-note { display: grid; min-height: 46px; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 13px; border: 1px solid rgba(78, 79, 30, .2); border-radius: 6px; background: rgba(119, 131, 31, .08); color: #655f4f; font-size: 11px; } .shop-catalog-note > i { color: #6f7b1c; font-size: 16px; } .shop-catalog-note > strong { color: #7d765f; font-size: 9px; letter-spacing: .04em; white-space: nowrap; } .shop-catalog-note.taxi-note, .shop-catalog-note.vehicle-note { border-color: rgba(141, 105, 47, .2); background: rgba(162, 116, 42, .07); } .shop-catalog-note.taxi-note i, .shop-catalog-note.vehicle-note i { color: #965c27; } .shop-catalog { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .shop-catalog.vehicle-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .shop-catalog.taxi-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .shop-item-card, .shop-item-card.vehicle-card, .shop-item-card.taxi-card, .shop-item-card.bundle-card { display: flex; min-height: 390px; border: 1px solid rgba(55, 50, 38, .22); border-radius: 8px; background: rgba(250, 247, 237, .66); box-shadow: 0 7px 20px rgba(55, 48, 31, .08); color: #211f17; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .shop-item-card:hover { border-color: rgba(105, 117, 25, .55); box-shadow: 0 12px 26px rgba(55, 48, 31, .14); transform: translateY(-2px); } .shop-item-card[data-tier="welcome"], .shop-item-card[data-tier="rare"], .shop-item-card[data-tier="exclusive"], .shop-item-card[data-tier="road"], .shop-item-card[data-tier="utility"], .shop-item-card[data-tier="rugged"], .shop-item-card[data-tier="elite"] { border-color: rgba(82, 75, 52, .28); box-shadow: 0 7px 20px rgba(55, 48, 31, .08); } .shop-item-icon, .vehicle-card .shop-item-icon, .taxi-card .shop-item-icon { min-height: 142px; max-height: 142px; border-bottom-color: rgba(55, 50, 38, .2); background: #d1c7af; } .shop-item-icon::before { background: linear-gradient(180deg, transparent 32%, rgba(27, 25, 18, .42)); } .shop-item-icon::after { height: 3px; background: #7b8725; } .shop-item-card[data-tier="welcome"] .shop-item-icon::after { height: 3px; background: #b39342; box-shadow: none; } .shop-item-art { filter: saturate(.72) contrast(1.06) brightness(.93); } .shop-item-card:hover .shop-item-art { filter: saturate(.92) contrast(1.05) brightness(.98); } .shop-item-icon > i { color: #68731f; } .shop-item-badges { right: 9px; bottom: 9px; left: 9px; } .shop-item-tier, .shop-mod-badge { min-height: 22px; padding: 0 7px; border-color: rgba(243, 237, 222, .18); background: rgba(23, 23, 17, .78); color: #eee6d5; font-size: 7px; } .shop-mod-badge { background: rgba(80, 91, 27, .9); } .shop-item-copy { padding: 14px 13px 11px; } .shop-item-title h3 { color: #29251c; font-size: 20px; line-height: 1.05; } .shop-item-title > strong { display: none; } .shop-item-copy > p { display: -webkit-box; margin-top: 8px; overflow: hidden; color: #6c6556; font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .shop-item-assurance { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; padding: 8px; border: 1px solid rgba(119, 131, 31, .2); border-radius: 5px; background: rgba(119, 131, 31, .07); color: #626044; font-size: 9px; font-weight: 700; line-height: 1.35; } .shop-item-assurance i { flex: 0 0 auto; color: #6e781e; } .welcome-package-contents { margin-top: 10px; padding: 0; border: 1px solid rgba(142, 111, 43, .2); border-radius: 5px; background: rgba(178, 139, 49, .06); } .welcome-package-contents summary { display: flex; min-height: 34px; align-items: center; gap: 7px; padding: 0 9px; color: #795f26; cursor: pointer; font-size: 8px; font-weight: 900; letter-spacing: .055em; list-style: none; } .welcome-package-contents summary::-webkit-details-marker { display: none; } .welcome-package-contents summary i:last-child { margin-left: auto; transition: transform .2s ease; } .welcome-package-contents[open] summary i:last-child { transform: rotate(180deg); } .welcome-package-contents ul { grid-template-columns: 1fr; gap: 5px; margin: 0; padding: 0 9px 9px; } .welcome-package-contents li { color: #6c6555; font-size: 9px; } .shop-item-meta { align-items: center; padding-top: 12px; color: #847c69; font-size: 7px; } .shop-buy-button { display: grid; min-height: 48px; grid-template-columns: minmax(0, 1fr) auto 14px; gap: 7px; padding: 0 12px; border-top-color: rgba(55, 50, 38, .18); background: #78841f; color: #121307; font-size: 9px; text-align: left; } .shop-buy-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-buy-button > strong { font-size: 10px; white-space: nowrap; } .shop-buy-button:hover:not(:disabled) { background: #93a12a; } .shop-buy-button.login { background: #aa8a43; } .shop-buy-button.owned { background: #d1d5ad; color: #526016; } .shop-buy-button.offline, .shop-buy-button.funds { background: #d2cabb; color: #716a5b; } .shop-empty { color: #6b6454; } .shop-empty > i { color: #77831f; } .shop-no-results { min-height: 300px; } .shop-inventory-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .shop-inventory-item { background: rgba(250, 247, 237, .58); color: #211f17; } .shop-inventory-item h3 { color: #2b271e; } .shop-activity-list { border-color: rgba(53, 48, 35, .2); background: rgba(250, 247, 237, .4); } .shop-activity-list article { border-bottom-color: rgba(53, 48, 35, .14); } .shop-activity-list article > div:nth-child(2) strong { color: #2b271e; } .shop-activity-head h3 { color: #2b271e; } .shop-tier-dialog { width: min(1180px, calc(100vw - 30px)); max-width: none; max-height: calc(100dvh - 30px); padding: 0; overflow: visible; border: 1px solid rgba(231, 220, 197, .2); border-radius: 14px; background: #11140d; color: #eee8dc; box-shadow: 0 35px 100px rgba(0, 0, 0, .65); font-family: var(--guide-body, "Inter", sans-serif); } .shop-tier-dialog::backdrop { background: rgba(4, 5, 3, .82); backdrop-filter: blur(10px); } .shop-tier-dialog .shop-rank-system { position: relative; max-height: calc(100dvh - 32px); margin: 0; padding: clamp(24px, 3vw, 40px); overflow-y: auto; border: 0; border-radius: 14px; background: radial-gradient(circle at 82% 0%, rgba(168, 186, 56, .13), transparent 25rem), #12150f; } .shop-tier-dialog-close { position: absolute; z-index: 3; top: 16px; right: 16px; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(231, 220, 197, .2); border-radius: 7px; background: #1a1e14; color: #ddd6c9; cursor: pointer; } .shop-tier-dialog-close:hover { border-color: #a8ba38; color: #fff; } .shop-tier-dialog .shop-rank-system > header { padding-right: 52px; } @media (max-width: 1440px) { .shop-store-hero { grid-template-columns: minmax(330px, .74fr) minmax(540px, 1.26fr); padding: 28px 38px; } .shop-catalog { grid-template-columns: repeat(6, minmax(0, 1fr)); } .shop-inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1180px) { .shop-account-card, .shop-account-card[data-authenticated="true"] { grid-template-columns: minmax(220px, 1fr) auto auto; } .shop-account-card .shop-economy-rules { grid-column: 1 / -1; } .shop-presence { display: none; } .shop-store-hero { grid-template-columns: 1fr; } .shop-featured-grid { min-height: 390px; } .shop-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } .shop-catalog.vehicle-catalog, .shop-catalog.taxi-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop-inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 820px) { :root { --app-header-height: 82px; --app-header-gutter: 16px; --app-header-control-height: 46px; --app-brand-icon-size: 48px; } .app-header { padding-top: 0; padding-right: var(--app-header-gutter); padding-bottom: 0; padding-left: var(--app-header-gutter); } .shop-header-nav { display: none; } .shop-library-brand span { display: none; } .shop-library-brand strong { max-width: 34vw; font-size: 24px; } .shop-header-tier-copy small { display: none; } .shop-header-tier-copy strong { font-size: 13px; } .shop-library-body { padding: 10px; } .shop-account-card, .shop-account-card[data-authenticated="true"] { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 12px 16px; } .shop-wallet { min-width: 110px; padding: 0 0 0 14px; border-right: 0; } .shop-account-actions { grid-column: 1 / -1; } .shop-account-actions > button { flex: 1; } .shop-account-actions .shop-logout-button, .shop-account-actions .shop-switch-button { flex: 0 0 44px; } .shop-store-hero { min-height: 0; padding: 36px 22px; } .shop-featured-grid { min-height: 360px; } .shop-stock-header { align-items: stretch; flex-direction: column; gap: 18px; padding: 30px 20px 18px; } .shop-stock-tools { width: 100%; } .shop-search, .shop-filter { width: auto; flex: 1; } .shop-toolbar { align-items: stretch; flex-direction: column; gap: 8px; padding: 10px 20px; } .shop-toolbar .shop-stock-tools { flex-basis: auto; } .shop-tabs { width: 100%; } .shop-content { padding: 14px 20px 38px; } .shop-tabs { display: flex; } .shop-catalog, .shop-catalog.vehicle-catalog, .shop-catalog.taxi-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-item-card, .shop-item-card.vehicle-card, .shop-item-card.taxi-card, .shop-item-card.bundle-card { min-height: 380px; } .shop-inventory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .shop-tier-dialog .shop-rank-system > header { align-items: flex-start; flex-direction: column; } .shop-tier-dialog .shop-rank-system > header p { width: 100%; } .shop-rank-rewards { grid-template-columns: 1fr; } } @media (max-width: 560px) { :root { --app-header-height: 72px; --app-header-gutter: 11px; --app-header-control-height: 44px; --app-brand-icon-size: 42px; } .app-header { padding-top: 0; padding-right: var(--app-header-gutter); padding-bottom: 0; padding-left: var(--app-header-gutter); } .shop-library-brand { gap: 8px; } .shop-library-brand strong { max-width: 31vw; font-size: 19px; } .shop-header-tier { grid-template-columns: 28px 12px; padding: 4px 7px 4px 4px; } .shop-header-tier-icon { width: 28px; height: 28px; } .shop-header-tier-copy { display: none; } .shop-library-actions .language-toggle, .shop-library-close { min-width: 44px; padding: 0; } .shop-library-close span { display: none; } .shop-library-body { padding: 0; } .shop-library-frame { border: 0; border-radius: 0; } .shop-account-card, .shop-account-card[data-authenticated="true"] { grid-template-columns: 1fr; } .shop-account-copy h3 { font-size: 17px; } .shop-account-copy p { display: none; } .shop-wallet { width: 100%; padding: 10px 0 0; border: 0; border-top: 1px solid rgba(231, 220, 197, .1); text-align: left; } .shop-wallet > strong { justify-content: flex-start; } .shop-account-actions { grid-column: 1; } .shop-account-actions .shop-login-button { font-size: 10px; } .shop-account-card .shop-economy-rules { display: none; } .shop-store-hero { padding: 30px 16px; } .shop-hero-copy h2 { font-size: 46px; } .shop-hero-copy > p { font-size: 15px; } .shop-hero-actions { display: grid; grid-template-columns: 1fr; } .shop-economy-rules { grid-template-columns: 1fr; } .shop-economy-rules article { border-right: 0; } .shop-featured-grid { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto; } .shop-feature-card[data-size="lead"] { grid-row: auto; } .shop-feature-card { min-height: 270px; } .shop-feature-card[data-size="lead"] { min-height: 340px; } .shop-stock-header { padding: 28px 14px 16px; } .shop-stock-tools { align-items: stretch; flex-direction: column; } .shop-search, .shop-filter { width: 100%; } .shop-toolbar { padding: 10px 14px; } .shop-content { padding: 12px 14px 32px; } .shop-catalog-note { grid-template-columns: 22px minmax(0, 1fr); } .shop-catalog-note > strong { display: none; } .shop-catalog, .shop-catalog.vehicle-catalog, .shop-catalog.taxi-catalog, .shop-inventory-grid { grid-template-columns: 1fr; } .shop-item-card, .shop-item-card.vehicle-card, .shop-item-card.taxi-card, .shop-item-card.bundle-card { min-height: 360px; } .shop-tier-dialog { width: calc(100vw - 16px); } .shop-tier-dialog .shop-rank-system { padding: 22px 14px; } .shop-tier-dialog .shop-rank-track { grid-template-columns: repeat(5, minmax(170px, 1fr)); } .shop-rank-rewards section > header { grid-template-columns: 38px minmax(0, 1fr); } .shop-rank-rewards header > strong { grid-column: 2; } .shop-daily-reward-ladder { grid-template-columns: repeat(5, minmax(76px, 1fr)); overflow-x: auto; } .shop-promotion-reward-list article { grid-template-columns: 30px minmax(0, 1fr) auto; } .shop-promotion-reward-list article > span { grid-column: 2 / -1; text-align: left; } } /* Shared Steam identity, consistent headers, and high-resolution storefront */ .mod-library { grid-template-rows: var(--app-header-height) minmax(0, 1fr); } .mod-library-header { height: var(--app-header-height); min-height: var(--app-header-height); max-height: var(--app-header-height); padding: 0 var(--app-header-gutter); } .mod-library-header p { font-size: 10px; letter-spacing: .08em; } .mod-library-header h2 { font-size: clamp(28px, 2.25vw, 40px); } .mod-library-actions { align-items: center; } .mod-library-actions .shop-header-tier { display: inline-grid; } .steam-connect-panel, .admin-access-denied { width: min(700px, 100%); } .player-dual-login { width: min(760px, 100%); } .player-dual-login form { width: 100%; } .player-dual-login .login-copy { margin-bottom: 25px; } .player-dual-login .shop-login-divider { margin-top: 16px; } .primary-steam-login { min-height: 68px; justify-content: space-between; padding: 0 22px; font-size: 15px; letter-spacing: .015em; } .primary-steam-login i:last-child { color: rgba(255, 255, 255, .82); font-size: 17px; } .steam-login-note { margin-top: 15px; padding: 13px 15px; border: 1px solid rgba(42, 92, 126, .16); border-radius: 7px; background: rgba(54, 113, 150, .055); font-size: 12px; } .admin-access-denied .login-lock-mark.denied { background: rgba(168, 66, 47, .12); color: #a8422f; } .admin-denied-actions { display: grid; grid-template-columns: 1.3fr 1fr; gap: 10px; } .admin-denied-actions button { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--login-line); border-radius: 7px; background: rgba(255, 252, 245, .5); color: var(--login-ink); cursor: pointer; font-size: 12px; font-weight: 800; } .admin-denied-actions button:first-child { border-color: var(--login-olive); background: var(--login-olive); color: #fffdf5; } .admin-denied-actions button:hover { border-color: #69751b; } @media (min-width: 1181px) { .shop-toolbar .shop-stock-tools { flex-basis: 500px; } .shop-search { width: 257px; } .shop-filter { width: 235px; } } @media (min-width: 1800px) and (min-height: 900px) { :root { --workspace-max: 2260px; --app-header-height: 110px; --app-header-gutter: clamp(42px, 3vw, 72px); --app-header-control-height: 56px; --app-brand-icon-size: 68px; } .shop-library-brand { gap: 19px; } .shop-library-brand strong { max-width: 430px; font-size: 32px; } .shop-library-brand span { margin-top: 5px; font-size: 11px; } .shop-header-nav { gap: 38px; } .shop-header-nav a, .shop-header-nav button { font-size: 13px; } .shop-header-tier { grid-template-columns: 36px minmax(0, auto) 16px; gap: 10px; padding: 7px 13px 7px 8px; } .shop-header-tier-icon { width: 36px; height: 36px; font-size: 17px; } .shop-header-tier-copy strong { font-size: 18px; } .shop-header-tier-copy small { margin-top: 4px; font-size: 9px; } .shop-library-actions .language-toggle, .shop-library-close { padding-right: 17px; padding-left: 17px; font-size: 11px; } .shop-library-body { padding: 36px clamp(46px, 3vw, 76px) 64px; } .shop-library-frame { border-radius: 20px; } .shop-account-card, .shop-account-card[data-authenticated="true"] { min-height: 96px; grid-template-columns: minmax(360px, 1.15fr) auto auto minmax(720px, 1.65fr); gap: 30px; padding-right: 54px; padding-left: 54px; } .shop-account-copy > span { font-size: 10px; } .shop-account-copy h3 { margin-top: 6px; font-size: 21px; } .shop-account-actions > button { min-height: 50px; padding-right: 20px; padding-left: 20px; font-size: 13px; } .shop-wallet { min-width: 176px; padding-right: 22px; padding-left: 22px; } .shop-wallet > span { font-size: 9px; } .shop-wallet > strong { margin-top: 5px; font-size: 32px; } .shop-wallet > strong i { font-size: 21px; } .shop-wallet > strong small { font-size: 13px; } .shop-account-card .shop-economy-rules article { min-height: 64px; grid-template-columns: 28px minmax(0, 1fr); gap: 11px; padding: 8px 18px; } .shop-account-card .shop-economy-rules i { font-size: 21px; } .shop-account-card .shop-economy-rules strong { font-size: 22px; } .shop-account-card .shop-economy-rules span { margin-top: 5px; font-size: 9px; } .shop-store-hero { min-height: 540px; grid-template-columns: minmax(620px, .8fr) minmax(1000px, 1.2fr); gap: 72px; padding: 56px 72px; } .shop-kicker { font-size: 14px; } .shop-hero-copy h2 { max-width: 610px; margin-top: 16px; font-size: 92px; } .shop-hero-copy > p { max-width: 760px; margin-top: 18px; font-size: 20px; } .shop-hero-actions { gap: 11px; margin-top: 30px; } .shop-hero-actions button { min-height: 58px; padding: 0 27px; font-size: 13px; } .shop-featured-heading { margin-bottom: 18px; } .shop-featured-heading span { font-size: 12px; } .shop-featured-heading h3 { font-size: 37px; } .shop-featured-grid { height: 405px; grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr); gap: 18px; } .shop-feature-copy { padding: 16px 18px 10px; } .shop-feature-copy > span { font-size: 9px; } .shop-feature-copy h4 { font-size: 22px; } .shop-feature-card[data-size="lead"] .shop-feature-copy h4 { font-size: 34px; } .shop-feature-copy p { margin-top: 9px; font-size: 14px; } .shop-feature-price { min-height: 54px; padding: 8px 11px 11px 17px; } .shop-feature-price > strong { font-size: 17px; } .shop-feature-price button { min-height: 47px; padding-right: 15px; padding-left: 15px; font-size: 11px; } .shop-toolbar { min-height: 86px; padding-right: 60px; padding-left: 60px; } .shop-toolbar .shop-stock-tools { flex-basis: 650px; } .shop-search { width: 372px; } .shop-filter { width: 270px; } .shop-stock-tools label { min-height: 54px; } .shop-stock-tools input, .shop-stock-tools select { height: 52px; font-size: 14px; } .shop-tabs { gap: 9px; } .shop-tabs button { min-height: 58px; padding: 0 22px; font-size: 13px; } .shop-stock-header { padding: 42px 64px 23px; } .shop-stock-header > div:first-child > span { font-size: 11px; } .shop-stock-header h3 { margin-top: 7px; font-size: 66px; } .shop-stock-header p { margin-top: 9px; font-size: 17px; } .shop-content { padding: 26px 64px 76px; } .shop-catalog-note, .shop-inventory-note { min-height: 54px; margin-bottom: 20px; padding: 11px 16px; font-size: 13px; } .shop-catalog-note > strong { font-size: 10px; } .shop-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .shop-catalog.vehicle-catalog, .shop-catalog.taxi-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } .shop-inventory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .shop-item-card, .shop-item-card.vehicle-card, .shop-item-card.taxi-card, .shop-item-card.bundle-card { min-height: 520px; border-radius: 11px; } .shop-item-icon, .vehicle-card .shop-item-icon, .taxi-card .shop-item-icon { min-height: 220px; max-height: 220px; } .shop-item-badges { right: 13px; bottom: 13px; left: 13px; } .shop-item-tier, .shop-mod-badge { min-height: 28px; padding: 0 10px; font-size: 9px; } .shop-item-copy { padding: 19px 18px 15px; } .shop-item-title h3 { font-size: 26px; } .shop-item-copy > p { margin-top: 11px; font-size: 14px; line-height: 1.5; } .shop-item-assurance { gap: 9px; margin-top: 13px; padding: 11px; font-size: 11px; } .welcome-package-contents { margin-top: 13px; } .welcome-package-contents summary { min-height: 42px; padding: 0 12px; font-size: 10px; } .welcome-package-contents ul { gap: 7px; padding: 0 12px 12px; } .welcome-package-contents li { font-size: 11px; } .shop-item-meta { padding-top: 15px; font-size: 9px; } .shop-buy-button { min-height: 62px; grid-template-columns: minmax(0, 1fr) auto 18px; gap: 10px; padding: 0 18px; font-size: 12px; } .shop-buy-button > strong { font-size: 13px; } .login-stage { display: grid; padding: 50px clamp(70px, 7vw, 150px); place-items: center; } .login-dialog { width: min(1920px, 100%); min-height: min(980px, calc(100dvh - 194px)); grid-template-columns: minmax(660px, .92fr) minmax(760px, 1.08fr); } .login-panel { padding: clamp(72px, 5vw, 110px); } .login-lock-mark { width: 70px; height: 70px; margin-bottom: 30px; font-size: 30px; } .login-copy { margin-bottom: 38px; } .login-copy > p { font-size: 14px; } .login-copy h2 { max-width: 760px; font-size: 72px; } .login-copy > span { max-width: 740px; font-size: 19px; } .steam-connect-panel, .admin-access-denied, .steam-account-selector { width: min(780px, 100%); } .player-login-layer .login-panel { padding-top: 48px; padding-bottom: 48px; } .player-dual-login { width: min(820px, 100%); } .player-dual-login .login-lock-mark { width: 62px; height: 62px; margin-bottom: 20px; font-size: 27px; } .player-dual-login .login-copy { margin-bottom: 24px; } .player-dual-login .login-copy h2 { font-size: 64px; } .player-dual-login .login-copy > span { margin-top: 14px; font-size: 17px; } .player-dual-login form { width: min(740px, 100%); } .player-dual-login .player-username-field, .player-dual-login .password-field { height: 64px; } .player-dual-login .player-username-field input { height: 62px; } .player-dual-login .login-submit { height: 62px; } .player-dual-login .login-foot { margin-top: 14px; padding-top: 14px; } .primary-steam-login { min-height: 78px; padding: 0 27px; font-size: 17px; } .player-dual-login .primary-steam-login { min-height: 68px; } .steam-login-note { padding: 16px 18px; font-size: 14px; } .steam-account-choice { min-height: 88px; } } @media (max-width: 820px) { .mod-library-header { padding: 0 var(--app-header-gutter); } .mod-library-header p { display: none; } .mod-library-header h2 { font-size: 30px; } .primary-steam-login { min-height: 60px; padding: 0 17px; font-size: 13px; } .admin-denied-actions { grid-template-columns: 1fr; } } /* Storefront fidelity pass — selected County General Store reference */ .shop-library { --shop-charcoal: #0b0c09; --shop-panel: #151711; --shop-panel-raised: #1b1d15; --shop-cream: #eee6d2; --shop-paper: #e7dcc3; --shop-gold: #c7a956; --shop-acid: #a9bb37; --shop-ink: #28231a; --shop-rust: #9d4f31; background: var(--shop-charcoal); } .shop-library-header { border-bottom-color: rgba(238, 230, 210, .16); background: radial-gradient(circle at 72% 0%, rgba(169, 187, 55, .055), transparent 28rem), #090a08; } .shop-library-brand strong { max-width: none; color: #f2ede2; font-size: clamp(25px, 1.7vw, 31px); letter-spacing: .008em; } .shop-library-brand span { color: #a8b936; font-size: 10px; letter-spacing: .09em; } .shop-header-nav { gap: clamp(28px, 3vw, 52px); } .shop-header-nav a, .shop-header-nav button { color: #c9c2b5; font-size: 13px; letter-spacing: .025em; } .shop-header-nav a::after, .shop-header-nav button::after { height: 2px; } .shop-library-actions { gap: 10px; } .shop-header-account { display: inline-grid; height: var(--app-header-control-height); min-height: var(--app-header-control-height); max-height: var(--app-header-control-height); min-width: 154px; grid-template-columns: 20px minmax(0, 1fr) 14px; align-items: center; gap: 10px; padding: 0 16px; overflow: hidden; border: 1px solid rgba(238, 230, 210, .22); border-radius: 7px; background: #141610; color: #eee8dc; cursor: pointer; font-size: 13px; font-weight: 800; text-align: left; } .shop-header-account:hover, .shop-header-account:focus-visible { border-color: var(--shop-acid); background: #20251a; } .shop-header-account > i:first-child { color: #d0c7b5; font-size: 18px; } .shop-header-account > i:last-child { color: #888d72; font-size: 11px; } .shop-header-account span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .shop-library-body { padding: 0 clamp(12px, 1.25vw, 22px) 34px; background: radial-gradient(circle at 77% 0%, rgba(169, 187, 55, .075), transparent 34rem), #090a08; } .shop-library-frame { width: min(var(--workspace-max), 100%); border-color: rgba(238, 230, 210, .17); border-radius: 12px; box-shadow: 0 24px 72px rgba(0, 0, 0, .34); } .shop-account-card, .shop-account-card[data-authenticated="true"] { min-height: 70px; grid-template-columns: minmax(230px, 1fr) auto minmax(150px, auto) minmax(500px, 1.35fr); gap: 20px; padding: 8px clamp(20px, 2.4vw, 38px); background: #161812; } .shop-account-copy > span { font-size: 9px; } .shop-account-copy h3 { margin-top: 5px; font-size: 17px; } .shop-account-copy, .shop-account-actions, .shop-wallet, .shop-account-card .shop-economy-rules { grid-row: 1; } .shop-account-actions > button { min-height: 42px; } .shop-wallet { min-width: 156px; } .shop-wallet > strong { font-size: 28px; } .shop-account-card .shop-economy-rules article { min-height: 52px; padding: 6px 14px; } .shop-account-card .shop-economy-rules strong { font-size: 19px; } .shop-account-card .shop-economy-rules span { font-size: 8px; } .shop-store-hero { min-height: 330px; grid-template-columns: minmax(330px, .62fr) minmax(680px, 1.38fr); gap: clamp(28px, 3vw, 54px); padding: 26px clamp(30px, 3.1vw, 52px); background: linear-gradient(90deg, rgba(7, 8, 6, .97) 0%, rgba(8, 10, 7, .84) 28%, rgba(8, 9, 6, .36) 62%, rgba(7, 8, 5, .42) 100%), url("/assets/shop/storefront-hero-20260807.jpg") center / cover no-repeat; } .shop-store-hero::before { background: linear-gradient(180deg, rgba(4, 5, 3, .08), transparent 48%, rgba(4, 5, 3, .55)), radial-gradient(circle at 78% 44%, rgba(182, 194, 74, .085), transparent 28rem); } .shop-kicker { color: #d1b35f; font-size: 12px; } .shop-hero-copy h2 { max-width: 390px; margin-top: 13px; color: #f4eee1; font-size: clamp(54px, 4.15vw, 67px); line-height: .93; text-shadow: 0 3px 18px rgba(0, 0, 0, .38); } .shop-hero-copy h2 span { display: block; } .shop-hero-copy h2 span:last-child { color: #bccb42; } .shop-hero-copy > p { max-width: 530px; margin-top: 17px; color: #d1c9bb; font-size: clamp(14px, 1.08vw, 17px); line-height: 1.48; } @media (min-width: 821px) { .shop-hero-actions { display: none; } .shop-featured-heading { display: none; } } .shop-featured-grid { height: 278px; grid-template-columns: minmax(0, 1.32fr) minmax(225px, .88fr); gap: 11px; } .shop-feature-card { border-color: rgba(203, 170, 82, .52); border-radius: 9px; background: rgba(18, 20, 14, .96); box-shadow: 0 16px 38px rgba(0, 0, 0, .32); } .shop-feature-art { min-height: 74px; } .shop-feature-card[data-size="lead"] .shop-feature-art { min-height: 132px; } .shop-feature-art::after { background: linear-gradient(180deg, transparent 37%, rgba(8, 9, 6, .72)); } .shop-feature-art img { filter: saturate(.82) contrast(1.08) brightness(.91); } .shop-feature-art > span { background: #7d8b29; color: #f5efd8; } .shop-feature-copy { padding: 9px 12px 5px; } .shop-feature-copy h4 { font-size: 17px; } .shop-feature-card[data-size="lead"] .shop-feature-copy h4 { font-size: 25px; } .shop-feature-copy p { margin-top: 5px; font-size: 11px; } .shop-feature-price { min-height: 42px; } .shop-feature-price > strong { font-size: 14px; } .shop-feature-price button { min-height: 38px; background: #6e7b1f; color: #f4f0df; } .shop-toolbar { min-height: 64px; padding: 7px clamp(22px, 2.8vw, 44px); border-top: 1px solid rgba(238, 230, 210, .08); background: #171912; } .shop-tabs { gap: 7px; } .shop-tabs button { min-height: 48px; padding: 0 18px; font-size: 11px; } .shop-tabs button.active { background: #e5dcc7; box-shadow: inset 0 -2px rgba(91, 79, 45, .14); } .shop-toolbar .shop-stock-tools { flex-basis: 500px; } .shop-toolbar .shop-stock-tools label { min-height: 46px; } .shop-stock-header { align-items: center; padding: 12px clamp(24px, 3vw, 48px) 10px; } .shop-stock-title-block { min-width: 330px; } .shop-stock-title-block > span { color: var(--shop-rust); font-size: 9px; font-weight: 900; letter-spacing: .09em; } .shop-stock-title-block > div { display: flex; align-items: center; gap: 20px; margin-top: 5px; } .shop-stock-header .shop-stock-title-block h3 { margin: 0; font-size: clamp(38px, 3vw, 49px); } .shop-stock-title-block time { display: inline-flex; min-height: 32px; align-items: center; padding: 0 11px; border: 1px solid rgba(157, 79, 49, .72); border-radius: 3px; color: var(--shop-rust); font-size: 9px; font-weight: 900; letter-spacing: .055em; transform: rotate(-1.5deg); } .shop-stock-title-block p { margin-top: 5px; font-size: 12px; } @media (min-width: 901px) { .shop-stock-title-block p { display: none; } } .shop-stock-perks { display: grid; width: min(720px, 52%); grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop-stock-perks article { display: grid; min-height: 56px; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 9px; padding: 4px 16px; border-left: 1px solid rgba(58, 51, 37, .18); } .shop-stock-perks i { color: #7c8627; font-size: 20px; } .shop-stock-perks strong, .shop-stock-perks span { display: block; } .shop-stock-perks strong { color: #342e21; font-size: 13px; } .shop-stock-perks span { margin-top: 3px; color: #706753; font-size: 9px; font-weight: 800; line-height: 1.25; } .shop-content { min-height: 410px; padding: 10px clamp(24px, 3vw, 48px) 14px; } .shop-catalog-note, .shop-inventory-note { min-height: 42px; margin-bottom: 12px; } .shop-catalog-note.daily-note { display: none; } .shop-catalog { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .shop-catalog.vehicle-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .shop-catalog.taxi-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .shop-item-card, .shop-item-card.vehicle-card, .shop-item-card.taxi-card, .shop-item-card.bundle-card { min-height: 370px; border-color: rgba(71, 61, 42, .3); border-radius: 8px; background: rgba(247, 241, 226, .77); box-shadow: 0 7px 18px rgba(50, 42, 28, .1); } .shop-item-card:hover { border-color: rgba(111, 122, 32, .72); box-shadow: 0 13px 25px rgba(50, 42, 28, .17); } .shop-item-icon, .vehicle-card .shop-item-icon, .taxi-card .shop-item-icon { min-height: 142px; max-height: 142px; } .shop-item-badges { top: 9px; right: 9px; bottom: auto; left: 9px; } .shop-item-tier, .shop-mod-badge { min-height: 21px; border-radius: 3px; font-size: 7px; } .shop-item-copy { padding: 13px 13px 10px; } .shop-item-title h3 { font-size: 20px; } .shop-item-copy > p { margin-top: 7px; font-size: 11px; line-height: 1.38; } .shop-item-assurance { margin-top: 8px; padding: 7px; font-size: 8px; } .welcome-package-contents { margin-top: 8px; } .welcome-package-contents summary { min-height: 30px; font-size: 8px; } .shop-item-meta { gap: 7px; padding-top: 9px; } .shop-item-meta span { min-height: 19px; padding: 4px 6px; border-radius: 4px; background: rgba(91, 80, 54, .09); color: #675f4d; } .shop-item-price-row { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-top: 1px solid rgba(58, 50, 36, .13); color: #2e291f; } .shop-item-price-row > strong { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; white-space: nowrap; } .shop-item-price-row > strong i { color: #756520; } .shop-item-price-row > span { overflow: hidden; color: #6c751c; font-size: 8px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .shop-item-price-row > span.funds, .shop-item-price-row > span.offline { color: #a34b2d; } .shop-item-price-row > span.owned { color: #64721c; } .shop-buy-button { min-height: 48px; grid-template-columns: minmax(0, 1fr) 42px; padding: 0 0 0 14px; background: #69751c; color: #fffcef; font-size: 10px; text-align: center; } .shop-buy-button > i { display: grid; align-self: stretch; place-items: center; border-left: 1px solid rgba(255, 255, 255, .14); font-size: 15px; } .shop-buy-button:hover:not(:disabled) { background: #7f8d22; } .shop-buy-button.login { background: #8c7234; color: #fff8e8; } .shop-buy-button.owned { background: #aeb681; color: #293010; } .shop-buy-button.offline, .shop-buy-button.funds { background: #bdb4a2; color: #615949; } .shop-store-footer { display: flex; min-height: 48px; align-items: center; justify-content: space-between; gap: 20px; padding: 8px clamp(24px, 3vw, 48px); border-top: 1px solid rgba(238, 230, 210, .12); background: #161812; color: #a9a294; font-size: 11px; } .shop-store-footer p { display: flex; align-items: center; gap: 10px; } .shop-store-footer p i { color: #c0a85e; font-size: 15px; } .shop-store-footer button { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; border: 0; background: transparent; color: #bfd044; cursor: pointer; font-size: 10px; font-weight: 900; } .shop-store-footer button:hover { color: #e2ee83; } .shop-store-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 18px; } @media (min-width: 1800px) and (min-height: 900px) { :root { --workspace-max: 2460px; --app-header-height: 96px; --app-header-gutter: clamp(36px, 2.4vw, 60px); --app-header-control-height: 54px; --app-brand-icon-size: 62px; } .shop-library-brand { gap: 17px; } .shop-library-brand strong { max-width: none; font-size: 34px; } .shop-library-brand span { margin-top: 4px; font-size: 11px; } .shop-header-nav { gap: 48px; } .shop-header-nav a, .shop-header-nav button { font-size: 14px; } .shop-library-actions .language-toggle, .shop-library-close, .shop-header-account { font-size: 13px; } .shop-header-account { min-width: 172px; } .shop-library-body { padding: 0 24px 48px; } .shop-library-frame { border-radius: 14px; } .shop-account-card, .shop-account-card[data-authenticated="true"] { min-height: 74px; grid-template-columns: minmax(310px, 1fr) auto minmax(180px, auto) minmax(760px, 1.45fr); gap: 25px; padding-right: 44px; padding-left: 44px; } .shop-account-copy h3 { font-size: 20px; } .shop-wallet > strong { font-size: 31px; } .shop-account-card .shop-economy-rules article { min-height: 58px; } .shop-account-card .shop-economy-rules strong { font-size: 22px; } .shop-account-card .shop-economy-rules span { font-size: 9px; } .shop-store-hero { min-height: 340px; grid-template-columns: minmax(540px, .64fr) minmax(1100px, 1.36fr); gap: 58px; padding: 30px 54px; } .shop-kicker { font-size: 14px; } .shop-hero-copy h2 { max-width: 560px; margin-top: 14px; font-size: 82px; } .shop-hero-copy > p { max-width: 650px; margin-top: 18px; font-size: 19px; } .shop-featured-grid { height: 288px; grid-template-columns: minmax(0, 1.34fr) minmax(350px, .86fr); gap: 14px; } .shop-feature-card[data-size="lead"] .shop-feature-art { min-height: 148px; } .shop-feature-copy { padding: 11px 15px 6px; } .shop-feature-copy h4 { font-size: 19px; } .shop-feature-card[data-size="lead"] .shop-feature-copy h4 { font-size: 29px; } .shop-feature-copy p { font-size: 12px; } .shop-feature-price { min-height: 46px; padding-right: 9px; padding-left: 14px; } .shop-feature-price > strong { font-size: 16px; } .shop-feature-price button { min-height: 40px; font-size: 10px; } .shop-toolbar { min-height: 66px; padding-right: 48px; padding-left: 48px; } .shop-tabs button { min-height: 50px; padding: 0 20px; font-size: 12px; } .shop-toolbar .shop-stock-tools { flex-basis: 620px; } .shop-search { width: 360px; } .shop-filter { width: 250px; } .shop-stock-header { padding: 11px 50px 9px; } .shop-stock-header .shop-stock-title-block h3 { font-size: 53px; } .shop-stock-title-block p { font-size: 13px; } .shop-stock-title-block time { min-height: 34px; font-size: 10px; } .shop-stock-perks { width: min(850px, 48%); } .shop-stock-perks article { padding-right: 22px; padding-left: 22px; } .shop-stock-perks strong { font-size: 15px; } .shop-stock-perks span { font-size: 10px; } .shop-content { padding: 11px 50px 14px; } .shop-catalog-note, .shop-inventory-note { min-height: 44px; margin-bottom: 13px; font-size: 12px; } .shop-catalog { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; } .shop-catalog.vehicle-catalog, .shop-catalog.taxi-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .shop-item-card, .shop-item-card.vehicle-card, .shop-item-card.taxi-card, .shop-item-card.bundle-card { min-height: 370px; border-radius: 9px; } .shop-item-icon, .vehicle-card .shop-item-icon, .taxi-card .shop-item-icon { min-height: 150px; max-height: 150px; } .shop-item-copy { padding: 14px 15px 10px; } .shop-item-title h3 { font-size: 23px; } .shop-item-copy > p { margin-top: 8px; font-size: 12px; } .shop-item-assurance { font-size: 9px; } .shop-item-meta { font-size: 8px; } .shop-item-price-row { min-height: 44px; padding-right: 14px; padding-left: 14px; } .shop-item-price-row > strong { font-size: 16px; } .shop-item-price-row > span { font-size: 9px; } .shop-buy-button { min-height: 50px; grid-template-columns: minmax(0, 1fr) 48px; font-size: 11px; } .shop-store-footer { min-height: 50px; padding-right: 50px; padding-left: 50px; font-size: 12px; } } @media (max-width: 1280px) { .shop-header-account { min-width: 48px; grid-template-columns: 18px; place-items: center; padding: 0; } .shop-header-account span, .shop-header-account > i:last-child { display: none; } .shop-account-card, .shop-account-card[data-authenticated="true"] { grid-template-columns: minmax(220px, 1fr) auto auto; } .shop-account-card .shop-economy-rules { grid-column: 1 / -1; grid-row: 2; } .shop-store-hero { grid-template-columns: minmax(290px, .7fr) minmax(560px, 1.3fr); } .shop-stock-perks { width: min(620px, 55%); } .shop-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 900px) { .shop-library-body { padding: 8px; } .shop-library-frame { border-radius: 9px; } .shop-header-nav { display: none; } .shop-store-hero { grid-template-columns: 1fr; padding: 34px 24px; } .shop-hero-copy h2 { max-width: 510px; } .shop-hero-actions { display: flex; } .shop-featured-heading { display: flex; } .shop-featured-grid { height: 360px; } .shop-stock-header { align-items: stretch; flex-direction: column; } .shop-stock-title-block p { display: block; } .shop-stock-perks { width: 100%; } .shop-stock-perks article:first-child { border-left: 0; } .shop-catalog, .shop-catalog.vehicle-catalog, .shop-catalog.taxi-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .shop-library-brand div { display: none; } .shop-library-actions { gap: 5px; } .shop-header-account { min-width: 42px; } .shop-library-actions .language-toggle, .shop-library-close { min-width: 42px; } .shop-library-body { padding: 0; } .shop-library-frame { border-radius: 0; } .shop-account-card, .shop-account-card[data-authenticated="true"] { gap: 10px; padding: 13px 15px; } .shop-account-copy, .shop-account-actions, .shop-wallet, .shop-account-card .shop-economy-rules { grid-column: 1; grid-row: auto; } .shop-account-actions { width: 100%; } .shop-account-card .shop-economy-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .shop-account-card .shop-economy-rules article { min-height: 62px; grid-template-columns: 1fr; gap: 3px; padding: 7px 5px; text-align: center; } .shop-account-card .shop-economy-rules i { font-size: 15px; } .shop-account-card .shop-economy-rules strong { font-size: 15px; } .shop-account-card .shop-economy-rules span { font-size: 6px; } .shop-store-hero { padding: 30px 15px; } .shop-hero-copy h2 { font-size: 48px; } .shop-featured-grid { height: auto; gap: 10px; } .shop-feature-card, .shop-feature-card[data-size="lead"] { min-height: 285px; } .shop-toolbar { padding: 9px 12px; } .shop-tabs { padding-bottom: 3px; } .shop-tabs button { min-height: 44px; padding: 0 13px; } .shop-stock-header { padding: 24px 14px 12px; } .shop-stock-title-block > div { align-items: flex-start; flex-direction: column; gap: 8px; } .shop-stock-perks { overflow-x: auto; } .shop-stock-perks article { min-width: 150px; } .shop-content { padding: 10px 13px 26px; } .shop-catalog, .shop-catalog.vehicle-catalog, .shop-catalog.taxi-catalog { grid-template-columns: 1fr; } .shop-item-card, .shop-item-card.vehicle-card, .shop-item-card.taxi-card, .shop-item-card.bundle-card { min-height: 390px; } .shop-item-icon, .vehicle-card .shop-item-icon, .taxi-card .shop-item-icon { min-height: 180px; max-height: 180px; } .shop-item-title h3 { font-size: 24px; } .shop-item-copy > p { font-size: 13px; } .shop-store-footer { align-items: flex-start; flex-direction: column; gap: 7px; padding: 13px 15px; } .shop-store-footer-actions { width: 100%; align-items: stretch; flex-direction: column; gap: 4px; } .shop-store-footer-actions button { width: 100%; justify-content: space-between; } } /* Shared responsive shell — one readable header system on every route. */ :root { --app-text-micro: clamp(13px, calc(11.8px + .08vw), 14px); --app-text-small: clamp(14px, calc(12.8px + .1vw), 16px); --app-text-body: clamp(16px, calc(14.5px + .12vw), 18px); --app-text-nav: clamp(14px, calc(12px + .28vw), 18px); } html { font-size: var(--app-text-body); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } button, input, select, textarea { font-family: inherit; } .app-header { box-sizing: border-box; overflow: hidden; border-bottom: 1px solid rgba(231, 220, 197, .16); background: rgba(8, 9, 7, .985); } .app-header a, .app-header button { min-height: 44px; } .player-nav a { font-size: var(--app-text-nav); } .app-header-actions > button, .app-header-actions .language-toggle, .app-header-actions .admin-trigger, .app-header-actions .shop-account-trigger { font-size: var(--app-text-small); } .shop-header-tier-copy small { font-size: var(--app-text-micro); } .command-player-row span, .command-roster-freshness, .command-world-clock time, .command-join-copy small { font-size: var(--app-text-micro); } .login-foot, .steam-login-note, .login-copy > p, .admin-nav-copy small, .admin-session span, .admin-stage-head p { font-size: var(--app-text-micro); } @media (max-width: 820px) { .app-header-actions > button, .app-header-actions .language-toggle, .app-header-actions .admin-trigger, .app-header-actions .shop-account-trigger { width: auto; min-width: var(--app-header-control-height); padding-right: 12px; padding-left: 12px; } .player-nav { display: none; } .player-mobile-nav { display: grid; } .player-mobile-nav a { font-size: var(--app-text-micro); } } @media (max-width: 560px) { .app-header-actions > button, .app-header-actions .language-toggle, .app-header-actions .admin-trigger, .app-header-actions .shop-account-trigger { padding-right: 9px; padding-left: 9px; } .login-header-actions .login-close span, .admin-header-actions button span { display: none; } .player-header:has(#playerHeaderTier:not([hidden])) .player-brand strong { max-width: 124px; font-size: 18px; } } @media (max-width: 400px) { .player-header:has(#playerHeaderTier:not([hidden])) .player-brand strong { display: none; } } @media (max-width: 680px) { .player-mobile-nav { min-height: 64px; gap: 4px; padding: 6px; } .player-mobile-nav a { min-height: 52px; flex-direction: column; gap: 3px; padding: 4px 1px; font-size: 10px; line-height: 1; letter-spacing: .01em; } .player-mobile-nav a > i { font-size: 14px; } }