/* Dashboard, history, administration, and retained public subpages. */
.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.stat-card { display: flex; flex-direction: column; position: relative; color: var(--text); min-height: 190px; transition: border-color .16s; }
.stat-card:hover { text-decoration: none; border-color: #817499; }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stat-icon { font-size: 11px; color: var(--muted); font-weight: 650; }
.stat-number { font-size: clamp(24px,2.7vw,38px); font-weight: 600; letter-spacing: -.05em; line-height: 1.4; padding-block: 12px; }
.stat-number small { font-size: 16px; padding-left: 4px; }
.stat-number.uptime { font-size: 26px; padding-block: 18px; }
.metric-visual { margin-top: auto; }
.progress,.mini-progress { height: 5px; background: #ffffff12; border-radius: 5px; overflow: hidden; }
.progress i,.mini-progress i { display: block; width: 0; height: 100%; background: var(--accent); border-radius: inherit; transition: width .4s; }
.progress i.warn,.mini-progress i.warn { background: var(--warn); }
.progress i.danger,.mini-progress i.danger { background: var(--danger); }
.stat-foot { font-size: 11px; color: var(--muted); margin-top: 12px; }
.stat-history-hint { margin-top: 12px; font-size: 9px; letter-spacing: .1em; color: var(--accent); }
.uptime-dots { display: flex; gap: 5px; }
.uptime-dots i { height: 5px; flex: 1; background: var(--ok); border-radius: 3px; }
.container-grid { display: grid; gap: 24px; align-items: start; }
.container-group-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: start; }
.container-group-heading { margin-bottom: 16px; }
.container-group-heading { grid-column: 1/-1; display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.container-group-heading strong { font-size: 14px; }
.container-group-heading span { font-size: 11px; color: var(--muted); }
.container-card { padding: 20px; color: var(--text); }
.container-players-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 10px; color: var(--muted); }
.container-players-top strong { color: var(--text); }
.container-player-chip { padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 10px; }
.mini-bar { height: 4px; background: #ffffff12; border-radius: 4px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.mini-bar i.warn { background: var(--warn); } .mini-bar i.danger { background: var(--danger); }
.container-head { display: flex; align-items: center; gap: 12px; }
.container-logo,.game-admin-icon,.layout-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #ffffff08; border: 1px solid var(--line); }
.container-logo img,.game-admin-icon img,.layout-icon img { width: 24px; height: 24px; }
.container-title { min-width: 0; flex: 1; }
.container-title strong { font-size: 14px; overflow-wrap: anywhere; }
.container-title small { display: block; font-size: 10px; }
.container-state { font-size: 8px; padding: 4px 6px; }
.container-values { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.container-value>span,.container-value>small { display: block; font-size: 10px; color: var(--muted); }
.container-value strong { display: block; font-size: 20px; font-weight: 550; margin-bottom: 8px; }
.container-foot,.container-action { display: flex; justify-content: space-between; gap: 10px; margin-top: 20px; color: var(--muted); font-size: 10px; }
.container-action { padding-top: 14px; border-top: 1px solid var(--line); align-items: center; flex-wrap: wrap; }
.container-action-context { font-size: 8px; letter-spacing: .08em; }
.container-action-links { display: flex; gap: 16px; flex-wrap: wrap; }
.container-action-links a { display: inline-flex; align-items: center; min-height: 32px; font-size: 9px; }
.container-hint { font-size: 11px; margin-top: 16px; }
.container-minimal-uptime { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; font-size: 11px; color: var(--muted); }
.service-card--compact .container-values { margin-top: 16px; }
.service-card--compact .container-value strong { font-size: 17px; }
.service-card--featured { border-color: #625872; background: linear-gradient(140deg,#342e4380,#1b202cf5); }
.container-players { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; }
.container-players-head,.container-players-summary { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.container-player-list,.player-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.link-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.link-card { display: flex; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); color: var(--text); }
.link-card>span:nth-child(2) { flex: 1; } .link-card small { display: block; }
.link-icon { font-size: 26px; color: var(--accent); }
.history-panel { margin-bottom: 20px; }
.filter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.custom-range { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.app-picker-wrap { margin-top: 20px; } .filter-label { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.app-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.app-chip { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 9px; }
.app-chip span { margin: 0; }
.app-chip:has(:checked) { border-color: var(--accent); background: #c6b7ff12; color: var(--text); }
.chart-wrap { position: relative; min-width: 0; }
.history-chart { width: 100%; display: block; min-height: 180px; }
.history-chart .grid { stroke: #3c4356; stroke-dasharray: 3 5; }
.history-chart .axis-label { fill: var(--muted); font-size: 12px; }
.history-chart .series-line { fill: none; stroke-width: 2.5px; stroke-linecap: round; stroke-linejoin: round; }
.history-chart .crosshair { stroke: var(--accent); stroke-dasharray: 4; }
.history-chart .hitbox { fill: transparent; }
.chart-tooltip { position: absolute; z-index: 3; width: 260px; max-width: calc(100% - 16px); border: 1px solid var(--line); border-radius: 10px; padding: 12px; background: #161a26f5; box-shadow: var(--shadow); pointer-events: none; font-size: 11px; }
.chart-tooltip strong { display: block; margin-bottom: 6px; }
.chart-tooltip span { display: flex; justify-content: space-between; gap: 8px; } .chart-tooltip em { font-style: normal; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: 12px; color: var(--muted); }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--legend-color); margin-right: 6px; }
.single-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; }
.single-stats article { display: flex; flex-direction: column; gap: 8px; } .single-stats span { font-size: 12px; color: var(--muted); }
.single-stats strong { font-size: 26px; letter-spacing: -.03em; }
.comparison-wrap { overflow-x: auto; }
.auth-pending .admin-shell { visibility: hidden; }
.admin-hero { margin-top: 24px; }
.admin-primary-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-bottom: 24px; }
.admin-primary-nav a { display: flex; gap: 16px; align-items: center; background: var(--glass); border: 1px solid var(--line); padding: 20px; border-radius: 16px; color: var(--muted); }
.admin-primary-nav a.active { border-color: var(--accent); color: var(--text); background: #c6b7ff12; }
.admin-primary-nav small { display: block; }
.game-tabs,.game-tabs-dynamic { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.game-tabs-dynamic { margin: 0; } .game-tabs img { width: 18px; height: 18px; margin-right: 8px; }
.admin-screen,.admin-view-server { margin-bottom: 24px; }
.admin-session-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; } .secure { font-size: 12px; color: var(--ok); }
.server-state { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; }
.server-state small,.server-state strong { display: block; } #state-dot { width: 7px; height: 7px; background: var(--subtle); border-radius: 50%; } #state-dot.online { background: var(--ok); }
.settings-head,.players-head,.logs-head,.layout-manager-head,.access-manager-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.layout-manager-head p,.access-manager-head p,.logs-head p { max-width: 70ch; font-size: 13px; }
.control-card { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.control-card p { margin: 0; font-size: 12px; }
.fields,.settings-group-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.settings-group,.field.full { grid-column: 1/-1; }
.settings-group+.settings-group { border-top: 1px solid var(--line); padding-top: 20px; }
.settings-group-title h3 { color: var(--accent); }
.field label { display: block; margin-bottom: 8px; } .field small { display: block; margin-top: 6px; }
.field.toggle { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding-block: 10px; }
.field.toggle span { margin: 0; } .field.toggle small { flex-basis: 100%; }
.actions { margin-top: 24px; justify-content: flex-end; border-top: 1px solid var(--line); padding-top: 20px; }
.players-summary { text-align: right; } .players-summary strong { display: block; font-size: 24px; } .players-summary span { color: var(--muted); font-size: 11px; }
.player-row { display: flex; align-items: center; width: 100%; gap: 12px; border: 1px solid var(--line); padding: 12px; border-radius: 12px; margin-bottom: 8px; background: #ffffff04; text-align: left; }
.player-row { color: var(--text); } .player-row .player-dot { color: var(--ok); } .player-row.offline .player-dot { color: var(--subtle); }
.player-main { flex: 1; } .player-main small { display: block; }
.player-badges { display: flex; flex-wrap: wrap; gap: 6px; } .player-badge { padding: 3px 6px; background: #ffffff08; border-radius: 5px; font-size: 9px; color: var(--accent); }
.player-actions { border: 1px solid #756788; background: #292333; padding: 20px; border-radius: 12px; margin-block: 16px; }
.player-action-head { display: flex; justify-content: space-between; gap: 16px; } .player-action-head p { font-size: 12px; overflow-wrap: anywhere; }
.player-action-note { display: block; margin-top: 16px; }
.players-foot,.logs-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 11px; color: var(--muted); }
.logs-toolbar,.logs-tools { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.logs-toolbar { justify-content: space-between; margin-bottom: 16px; }
.log-counts { display: flex; flex-wrap: wrap; gap: 8px; } .log-count { font-size: 10px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 7px; }
.logs-list { max-height: 480px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 12px; background: #131722; }
.log-row { display: grid; grid-template-columns: 120px 90px minmax(0,1fr); padding: 12px 16px; gap: 12px; border-bottom: 1px solid #ffffff09; font-size: 12px; }
.log-time { color: var(--subtle); font-size: 10px; } .log-label { color: var(--accent); font-size: 10px; } .log-message { overflow-wrap: anywhere; }
.log-row.raw { font-family: ui-monospace,monospace; }
.game-admin-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.game-admin-card { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--glass); color: var(--text); }
.game-admin-copy { flex: 1; } .game-admin-copy small { display: block; }
.layout-list,.access-list { display: grid; gap: 12px; }
.layout-row { display: grid; grid-template-columns: minmax(180px,1.4fr) minmax(240px,1.5fr) 80px 110px; align-items: center; gap: 20px; border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: #ffffff03; }
.layout-row.changed { border-color: var(--warn); }
.layout-service { display: flex; gap: 12px; align-items: center; min-width: 0; } .layout-title-line { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.layout-service-copy small { display: block; font-size: 10px; overflow-wrap: anywhere; } .layout-manage,.layout-display-only { display: block; font-size: 10px; margin-top: 6px; }
.layout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.layout-order,.layout-visible { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.layout-order button { padding: 8px 12px; } .layout-visible span { margin: 0; }
.layout-actions,.access-actions { justify-content: space-between; margin-top: 24px; }
.layout-summary,.access-owner { font-size: 12px; color: var(--muted); }
.access-user { display: grid; grid-template-columns: 150px 180px 1fr; align-items: center; gap: 20px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: #ffffff03; }
.access-identity small { display: block; } .access-toggle,.access-server { display: flex; gap: 8px; align-items: center; }
.access-servers { display: flex; flex-wrap: wrap; gap: 12px; } .access-server img { width: 18px; height: 18px; } .access-server span,.access-toggle span { margin: 0; }
.login-page-shell { width: calc(100% - 48px); max-width: 1440px; margin: auto; }
.admin-login-backbar { padding-block: 24px; } .admin-login-backlink { color: var(--muted); font-size: 13px; }
.login-shell { max-width: 460px; margin: 8vh auto; }
.login-brand { display: flex; align-items: center; gap: 14px; color: var(--text); margin: 0 8px 28px; }
.login-brand small { display: block; } .login-card { padding: 36px; background: linear-gradient(140deg,#393346b3,#1b202cf5); }
.login-head p { font-size: 13px; } .login-form { display: grid; gap: 20px; } .login-submit { width: 100%; }
.login-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 20px 8px; font-size: 10px; color: var(--muted); }
/* Retained portfolio, friends and legal pages share the same content vocabulary. */
.portfolio-page .hero,.friends-hero { display: grid; grid-template-columns: minmax(0,1fr) 280px; padding-block: 32px; }
.profile-card { overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: var(--surface); }
.profile-photo { display: block; width: 100%; height: 310px; object-fit: cover; object-position: center 25%; }
.profile-meta { padding: 20px; } .profile-meta span { display: block; color: var(--muted); font-size: 12px; margin-top: 8px; }
.highlight-grid,.qualification-grid,.project-grid,.skills-grid,.friends-grid,.favorite-v5-grid,.setup-v5-grid,.rules-highlight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin-top: 24px; }
.qualification-grid,.project-grid,.friends-grid,.setup-v5-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.highlight strong,.highlight span { display: block; } .highlight span { font-size: 12px; color: var(--muted); margin-top: 8px; }
.spec-list,.meta-list { padding-left: 18px; color: var(--muted); font-size: 13px; }
.favorite-game-mark,.game-logo { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: #ffffff0a; }
.favorite-game-mark img,.game-logo img { width: 28px; height: 28px; }
.game-head { display: flex; gap: 16px; align-items: center; } .game-head h3 { margin: 0; } .game-subtitle { color: var(--muted); font-size: 12px; }
.legal-hero { margin-block: 32px; max-width: 80ch; } .legal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.legal-column { display: grid; align-content: start; gap: 24px; } .legal-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 20px; }
.legal-label { display: block; color: var(--accent); font-size: 11px; margin-top: 16px; } .legal-value { overflow-wrap: anywhere; }
.legal-list,.legal-plain-list,.legal-link-list { color: var(--muted); padding-left: 20px; } .legal-note { font-size: 12px; border-left: 2px solid var(--accent); padding-left: 16px; }
@media (max-width:1399px) { .container-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .layout-row { grid-template-columns: 1fr 1fr; } }
@media (max-width:767px) {
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .stat-card { min-height: 170px; padding: 18px; }
  .container-group-grid,.link-grid,.game-admin-grid,.legal-grid,.portfolio-page .hero,.friends-hero { grid-template-columns: minmax(0,1fr); }
  .filter-grid,.fields,.settings-group-fields { grid-template-columns: minmax(0,1fr); }
  .single-stats { grid-template-columns: 1fr 1fr; } .single-stats strong { font-size: 22px; }
  .settings-head,.players-head,.logs-head,.layout-manager-head,.access-manager-head { flex-wrap: wrap; }
  .layout-row,.access-user { grid-template-columns: minmax(0,1fr); gap: 16px; }
  .layout-order { justify-content: flex-end; } .layout-visible { min-height: 44px; }
  .admin-primary-nav { grid-template-columns: minmax(0,1fr); gap: 10px; } .admin-primary-nav a { padding: 16px; }
  .log-row { grid-template-columns: 110px 1fr; gap: 4px 12px; } .log-message { grid-column: 1/-1; }
  .highlight-grid,.qualification-grid,.project-grid,.skills-grid,.friends-grid,.favorite-v5-grid,.setup-v5-grid,.rules-highlight-grid { grid-template-columns: minmax(0,1fr); }
  .profile-card { max-width: 360px; } .login-card { padding: 24px; }
}
@media (max-width:359px) { .stats-grid { gap: 10px; } .stat-card { padding: 14px; } .stat-top { align-items: flex-start; flex-direction: column; } .stat-number { font-size: 26px; } .stat-number.uptime { font-size: 20px; } .container-head { flex-wrap: wrap; } .container-state { margin-left: auto; } .custom-range { grid-template-columns: 1fr; } }