:root {
  --ink: #10252c; --ink-soft: #526970; --paper: #f7f5ed; --surface: #fffdf7;
  --surface-2: #eef3eb; --line: rgba(16, 37, 44, .12); --teal: #087f7a;
  --teal-dark: #075b5a; --mint: #9ddfca; --gold: #f5b83d; --coral: #ef775d;
  --sky: #6bcad3; --danger: #c94d48; --success: #168267; --shadow: 0 20px 50px rgba(21, 57, 57, .12);
  --radius-sm: 12px; --radius: 20px; --radius-lg: 32px; --sidebar: 272px;
  --font-display: "Fredoka", system-ui, sans-serif; --font-body: "DM Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--font-body); min-width: 320px; }
button, input, select, textarea { font: inherit; }
button, a, select { touch-action: manipulation; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; background: #fff; color: #10252c; padding: 12px 16px; transform: translateY(-150%); border-radius: 10px; }
.skip-link:focus { transform: none; }
.shell { width: min(1360px, calc(100% - 64px)); margin: 0 auto; }
.eyebrow { margin: 0 0 12px; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: 12px; }
.brand { color: #fff; display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; font-size: 18px; }
.brand-orb { width: 32px; height: 32px; display: inline-block; border: 3px solid currentColor; border-radius: 50%; position: relative; background: linear-gradient(150deg, transparent 46%, currentColor 48% 53%, transparent 55%); }
.brand-orb::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); top: 9px; left: 9px; box-shadow: 0 0 0 3px rgba(255,255,255,.2); }
.brand-dark { color: var(--ink); }
.button { min-height: 48px; border: 0; border-radius: 999px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.98); }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.button svg { width: 18px; height: 18px; }
.button-primary { color: #fff; background: var(--teal); box-shadow: 0 10px 28px rgba(8,127,122,.28); }
.button-primary:hover { background: var(--teal-dark); box-shadow: 0 14px 32px rgba(8,127,122,.34); }
.button-ghost { color: inherit; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.32); }
.app .button-ghost, .dialog .button-ghost { background: var(--surface-2); border-color: var(--line); }
.button-glass { color: #fff; background: rgba(4,24,31,.26); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(14px); }
.button-danger { color: #fff; background: var(--danger); }
.button-compact { min-height: 42px; padding: 0 18px; font-size: 14px; }
.button-full { width: 100%; margin-top: 12px; }
.icon-button { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: inherit; display: inline-grid; place-items: center; transition: background .2s ease, transform .2s ease; }
.icon-button:hover { background: rgba(255,255,255,.24); transform: rotate(3deg); }
.icon-button svg { width: 20px; height: 20px; }
.live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(157,223,202,.18); margin-right: 8px; }
.live-dot.offline { background: var(--coral); box-shadow: 0 0 0 5px rgba(239,119,93,.18); }

/* Landing */
.landing { color: #fff; min-height: 100dvh; height: max(780px, 100dvh); position: relative; isolation: isolate; overflow: hidden; background: #061a24; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img, .hero-media iframe { position: absolute; width: 100%; height: 100%; object-fit: cover; border: 0; }
.hero-media iframe { width: 177.78vh; min-width: 100%; height: 56.25vw; min-height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.16); opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.hero-media iframe.loaded { opacity: .88; }
.hero-media img { animation: cinematic 18s ease-in-out infinite alternate; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,20,28,.88) 0%, rgba(3,20,28,.46) 48%, rgba(3,20,28,.12) 75%), linear-gradient(0deg, rgba(3,20,28,.85) 0%, transparent 42%), radial-gradient(circle at 75% 20%, rgba(76,201,189,.1), transparent 36%); }
.landing::after { content: ""; position: absolute; inset: auto 0 0; height: 130px; background: linear-gradient(transparent, rgba(2,18,25,.65)); pointer-events: none; }
.landing-nav { height: 96px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 3; }
.landing-actions { display: flex; align-items: center; gap: 12px; }
.hero-content { padding-top: clamp(100px, 15vh, 190px); position: relative; z-index: 2; }
.hero-content .eyebrow { color: #d8fff4; }
.hero-content h1 { font: 600 clamp(60px, 8vw, 126px)/.86 var(--font-display); letter-spacing: -.05em; margin: 0; max-width: 1000px; text-shadow: 0 8px 40px rgba(0,0,0,.35); }
.hero-content h1 em { color: #fff2b5; font-style: normal; }
.hero-copy { font-size: clamp(18px, 2vw, 23px); line-height: 1.5; max-width: 590px; margin: 30px 0; color: rgba(255,255,255,.86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-content .button-primary { background: var(--gold); color: #263d42; box-shadow: 0 16px 38px rgba(245,184,61,.25); }
.hero-content .button-primary:hover { background: #ffd064; }
.hero-readout { position: absolute; top: clamp(420px, 54vh, 590px); right: 0; width: 380px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid rgba(255,255,255,.18); border-radius: 22px; overflow: hidden; backdrop-filter: blur(18px); background: rgba(4,26,34,.24); }
.hero-readout div { padding: 18px 20px; background: rgba(255,255,255,.05); }
.hero-readout div:first-child { grid-column: 1/-1; }
.hero-readout span { display: block; font-size: 10px; letter-spacing: .18em; opacity: .65; margin-bottom: 6px; }
.hero-readout strong { font-size: 15px; }
.status-online { color: #aaf1da; }
.hero-scroll { position: absolute; z-index: 3; left: 50%; bottom: 22px; transform: translateX(-50%); font-size: 10px; text-transform: uppercase; letter-spacing: .2em; opacity: .8; display: flex; align-items: center; flex-direction: column; gap: 10px; }
.hero-scroll i { height: 38px; width: 1px; background: rgba(255,255,255,.5); position: relative; overflow: hidden; }
.hero-scroll i::after { content: ""; width: 1px; height: 14px; position: absolute; top: -14px; background: #fff; animation: scrollLine 1.8s ease-in-out infinite; }
@keyframes cinematic { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1.2%, -.7%, 0); } }
@keyframes scrollLine { to { transform: translateY(54px); } }

/* App shell */
.app { min-height: 100dvh; background: var(--paper); display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar); z-index: 40; background: #f0efe7; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 22px 18px; overflow-y: auto; }
.sidebar-top { padding: 0 10px 18px; display: flex; align-items: center; justify-content: space-between; }
.sidebar-close { display: none; }
.world-card { margin: 6px 0 18px; height: 150px; border-radius: 18px; overflow: hidden; position: relative; color: #fff; box-shadow: 0 12px 30px rgba(18,54,58,.16); }
.world-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3,30,36,.92), rgba(3,30,36,.08) 75%); }
.world-card img { width: 100%; height: 100%; object-fit: cover; }
.world-card div { position: absolute; z-index: 2; inset: auto 15px 14px; }
.world-card p { display: inline; margin: 0; font-size: 9px; letter-spacing: .15em; opacity: .8; }
.world-card strong { display: block; margin-top: 4px; font-size: 15px; }
.sidebar nav { display: flex; flex-direction: column; gap: 4px; }
.nav-label { color: #8b989a; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin: 14px 12px 5px; }
.sidebar nav a { color: #506167; min-height: 46px; border-radius: 13px; padding: 0 13px; display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 600; font-size: 14px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.sidebar nav a:hover { color: var(--ink); background: rgba(255,255,255,.5); transform: translateX(2px); }
.sidebar nav a.active { color: #fff; background: var(--teal); box-shadow: 0 9px 20px rgba(8,127,122,.2); }
.sidebar nav svg { width: 19px; height: 19px; }
.sidebar nav b { margin-left: auto; min-width: 23px; height: 21px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: rgba(16,37,44,.08); font-size: 11px; }
.sidebar nav a.active b { background: rgba(255,255,255,.16); }
.sidebar nav i { margin-left: auto; width: 7px; height: 7px; background: var(--gold); border-radius: 50%; opacity: 0; }
.sidebar nav i.visible { opacity: 1; }
.sidebar-footer { margin-top: auto; padding-top: 20px; }
.profile-button { border: 0; border-top: 1px solid var(--line); background: transparent; width: 100%; padding: 18px 6px 0; display: grid; grid-template-columns: 38px 1fr 20px; align-items: center; text-align: left; gap: 10px; color: inherit; }
.profile-button svg { width: 16px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #f9d98f; color: #5c4a1c; font-weight: 800; }
.profile-button strong, .profile-button small { display: block; }
.profile-button strong { font-size: 13px; }.profile-button small { font-size: 10px; color: var(--ink-soft); margin-top: 2px; }
.app-main { grid-column: 2; min-width: 0; }
.topbar { height: 76px; padding: 0 clamp(20px, 3vw, 48px); display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 30; background: rgba(247,245,237,.88); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(16,37,44,.07); }
.breadcrumbs { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); }.breadcrumbs i { opacity: .35; }.breadcrumbs strong { color: var(--ink); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar .icon-button { color: var(--ink); background: var(--surface); border: 1px solid var(--line); }
.menu-button { display: none; }
.connection-pill { height: 38px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); padding: 0 14px; color: var(--ink); font-size: 12px; font-weight: 700; }
.connection-pill .live-dot { width: 7px; height: 7px; box-shadow: none; }
main { padding: clamp(26px, 4vw, 52px); max-width: 1600px; margin: 0 auto; }
.page { animation: pageIn .35s ease-out; }
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.page-head h1 { font: 600 clamp(34px, 4vw, 56px)/1 var(--font-display); letter-spacing: -.035em; margin: 0 0 8px; }
.page-head p { margin: 0; color: var(--ink-soft); max-width: 620px; line-height: 1.6; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 30px rgba(22,55,55,.05); }
.card-head { padding: 22px 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-head h2, .card-head h3 { margin: 0; font: 600 20px var(--font-display); }
.card-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.card-body { padding: 22px 24px 24px; }
.overview-grid { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.status-hero { grid-column: span 8; min-height: 330px; padding: 30px; color: #fff; position: relative; overflow: hidden; background: #0a5f60; border: 0; }
.status-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,66,67,.95) 0%, rgba(6,80,79,.65) 58%, rgba(6,80,79,.1)), url('/assets/palworld-overview.jpg') center/cover; }
.status-hero > * { position: relative; z-index: 1; }
.status-hero .eyebrow { color: #b8ffeb; }
.status-hero h2 { font: 600 clamp(35px, 4vw, 58px)/1 var(--font-display); letter-spacing: -.04em; max-width: 480px; margin: 12px 0 20px; }
.server-meta { display: flex; flex-wrap: wrap; gap: 8px; }.server-meta span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); padding: 8px 12px; border-radius: 99px; font-size: 11px; backdrop-filter: blur(8px); }
.server-controls { position: absolute; bottom: 28px; left: 30px; display: flex; gap: 8px; }.server-controls .icon-button { border: 1px solid rgba(255,255,255,.22); }
.quick-card { grid-column: span 4; padding: 24px; display: flex; flex-direction: column; }
.quick-card h3 { font: 600 21px var(--font-display); margin: 0; }.quick-card p { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.quick-card textarea { flex: 1; min-height: 108px; resize: vertical; }
.quick-card .button { align-self: flex-start; margin-top: 12px; }
.metric-card { grid-column: span 3; padding: 20px; min-height: 142px; position: relative; overflow: hidden; }
.metric-card .metric-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: var(--surface-2); color: var(--teal); }.metric-icon svg { width: 20px; }
.metric-card p { margin: 16px 0 5px; color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.metric-card strong { font: 600 28px var(--font-display); font-variant-numeric: tabular-nums; }
.metric-card small { color: var(--ink-soft); margin-left: 5px; }
.metric-card .sparkline { position: absolute; right: 14px; bottom: 12px; width: 76px; height: 38px; opacity: .5; }
.activity-card { grid-column: span 8; }.command-card { grid-column: span 4; }
.update-card { grid-column: span 4; padding: 22px; }
.update-card .update-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.update-card .update-row:last-of-type { border-bottom: none; }
.update-card .update-note { margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); }
.update-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.update-head-actions .button { white-space: nowrap; }
.update-check-row { display: flex; margin-top: 14px; }
.chart-wrap { height: 190px; position: relative; display: flex; align-items: end; gap: 4px; padding-top: 18px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(0deg, transparent 0 44px, rgba(16,37,44,.05) 45px); }
.chart-bar { flex: 1; min-width: 4px; max-width: 18px; background: linear-gradient(var(--mint), var(--teal)); border-radius: 6px 6px 0 0; transition: height .35s ease; }
.chart-labels { display: flex; justify-content: space-between; color: var(--ink-soft); font-size: 10px; margin-top: 9px; }
.quick-actions { display: grid; gap: 8px; }.quick-action { min-height: 52px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); padding: 0 14px; display: flex; align-items: center; gap: 11px; color: var(--ink); text-align: left; font-weight: 700; }.quick-action svg { width: 19px; color: var(--teal); }.quick-action span:last-child { margin-left: auto; opacity: .4; }

/* Tables, forms, tools */
.filterbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 220px; }.search svg { position: absolute; width: 18px; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }.search input { padding-left: 44px; }
input, select, textarea { width: 100%; min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px; background: #fff; color: var(--ink); transition: border .2s ease, box-shadow .2s ease; }
textarea { line-height: 1.5; }
input:focus, select:focus, textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(8,127,122,.12); outline: 0; }
label { font-size: 12px; font-weight: 700; color: var(--ink-soft); display: block; margin: 14px 0 7px; }
.table-wrap { overflow-x: auto; }.data-table { width: 100%; border-collapse: collapse; min-width: 680px; }.data-table th { color: var(--ink-soft); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }.data-table td { padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }.data-table tr:last-child td { border-bottom: 0; }.data-table tbody tr:hover { background: rgba(157,223,202,.09); }
.player-cell { display: flex; align-items: center; gap: 11px; }.player-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg,#a6e5d4,#f8d781); font-weight: 800; }.player-cell strong,.player-cell small { display:block; }.player-cell small { color: var(--ink-soft); margin-top: 2px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 6px 9px; background: var(--surface-2); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.badge.online { color: var(--success); background: rgba(22,130,103,.1); }.badge.warn { color: #916711; background: rgba(245,184,61,.15); }
.badge.error { color: var(--danger); background: rgba(190,55,55,.1); }
.row-actions { display: flex; gap: 5px; justify-content: flex-end; }.row-actions .icon-button { background: var(--surface-2); color: var(--ink); width: 38px; height: 38px; flex-basis: 38px; }.row-actions .danger { color: var(--danger); }
.empty { min-height: 260px; display: grid; place-items: center; text-align: center; padding: 50px; }.empty-mark { width: 70px; height: 70px; display: grid; place-items: center; border-radius: 24px; background: var(--surface-2); color: var(--teal); margin: 0 auto 18px; }.empty-mark svg { width: 30px; }.empty h3 { font: 600 22px var(--font-display); margin: 0 0 8px; }.empty p { color: var(--ink-soft); margin: 0; max-width: 420px; }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 18px; align-items: start; }.settings-nav { position: sticky; top: 94px; padding: 10px; }.settings-nav button { border: 0; width: 100%; min-height: 42px; background: transparent; border-radius: 10px; text-align: left; padding: 0 12px; color: var(--ink-soft); font-weight: 700; }.settings-nav button.active { color: #fff; background: var(--teal); }.settings-panel { padding: 24px; }.settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 20px; }.setting-field { padding-bottom: 16px; border-bottom: 1px solid var(--line); }.setting-field label { color: var(--ink); margin-top: 0; font-size: 13px; }.setting-field small { display: block; color: var(--ink-soft); line-height: 1.45; margin-top: 6px; }.toggle-row { min-height: 46px; display: flex; align-items: center; justify-content: space-between; }.toggle { width: 48px; height: 28px; position: relative; display: inline-block; }.toggle input { opacity: 0; width: 1px; height: 1px; position: absolute; }.toggle span { position: absolute; inset: 0; background: #cfd7d4; border-radius: 99px; transition: background .2s; }.toggle span::after { content:""; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background:#fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }.toggle input:checked + span { background:var(--teal); }.toggle input:checked + span::after { transform:translateX(20px); }.sticky-save { position: sticky; bottom: 16px; margin-top: 20px; padding: 14px; display: flex; align-items: center; gap: 12px; box-shadow: var(--shadow); }.sticky-save p { margin: 0; flex: 1; font-size: 13px; color: var(--ink-soft); }
.setting-wide { grid-column: 1 / -1; }
.setting-label-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.setting-label-row label { margin: 0; }
.range-value { display: flex; align-items: center; gap: 8px; }
.range-value input { min-width: 0; }
.setting-label-row .range-value input { width: 96px; min-height: 38px; padding: 6px 10px; text-align: right; font-variant-numeric: tabular-nums; }
.range-value > span { color: var(--ink-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.pretty-range { width: 100%; height: 22px; min-height: 22px; padding: 0; border: 0; border-radius: 999px; background: transparent; box-shadow: none; appearance: none; }
.pretty-range:focus { box-shadow: none; }
.pretty-range::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--mint)); box-shadow: inset 0 0 0 1px rgba(8,127,122,.12); }
.pretty-range::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -7px; border: 4px solid var(--surface); border-radius: 50%; background: var(--teal); box-shadow: 0 3px 10px rgba(8,127,122,.32); appearance: none; }
.pretty-range::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--mint)); }
.pretty-range::-moz-range-thumb { width: 16px; height: 16px; border: 4px solid var(--surface); border-radius: 50%; background: var(--teal); box-shadow: 0 3px 10px rgba(8,127,122,.32); }
.range-scale { display: flex; justify-content: space-between; color: #879598; font-size: 10px; font-variant-numeric: tabular-nums; margin-top: 3px; }
.option-check-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.check-card { min-height: 46px; margin: 0; position: relative; cursor: pointer; }
.check-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check-card span { min-height: 46px; display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink-soft); transition: .2s ease; }
.check-card input:checked + span { border-color: var(--teal); background: rgba(8,127,122,.1); color: var(--teal-dark); box-shadow: inset 0 0 0 1px var(--teal); }
.check-card input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.setting-field fieldset, fieldset.setting-field { border: 0; margin: 0; min-width: 0; }
.setting-field legend { color: var(--ink); font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.access-settings { margin: 0 0 26px; padding: 20px; border: 1px solid rgba(8,127,122,.2); border-radius: 16px; background: rgba(157,223,202,.1); }
.access-settings-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.access-settings-head .dialog-mark { flex: 0 0 48px; margin: 0; }
.access-settings-head h3 { margin: 0 0 3px; font: 600 18px var(--font-display); }
.access-settings-head p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.access-settings .setting-field { border-bottom: 0; padding-bottom: 0; }
.runtime-warning { color: #916711 !important; font-weight: 700; }
.toggle input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }
.backup-grid, .tool-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }.backup-card { padding: 20px; }.backup-card svg { width: 25px; color: var(--teal); }.backup-card h3 { font: 600 18px var(--font-display); margin: 18px 0 5px; }.backup-card p { color: var(--ink-soft); margin: 0; font-size: 12px; }
.tool-grid { grid-template-columns: repeat(12,minmax(0,1fr)); }.tool-card { grid-column: span 4; min-height: 240px; padding: 24px; position: relative; overflow:hidden; transition: transform .2s ease, box-shadow .2s ease; }.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }.tool-card.featured { grid-column: span 8; color:#fff; background:linear-gradient(120deg,#075c5c,#0d9188); border:0; }.tool-card h3 { font: 600 24px var(--font-display); margin: 16px 0 8px; }.tool-card p { color: var(--ink-soft); line-height:1.55; margin:0; }.tool-card.featured p { color:rgba(255,255,255,.72); max-width:440px; }.tool-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:var(--surface-2);color:var(--teal); }.tool-card.featured .tool-icon { background:rgba(255,255,255,.12);color:#fff; }.tool-icon svg { width:24px; }.tool-link { position:absolute;bottom:22px;left:24px;color:var(--teal);font-weight:800;font-size:13px;border:0;background:transparent;padding:0; }.featured .tool-link { color:#fff; }.tool-card.featured::after { content:"";position:absolute;width:300px;height:300px;border:60px solid rgba(255,255,255,.07);border-radius:50%;right:-70px;bottom:-130px; }
.breeding-lab { margin-top:16px; padding:24px; }.breeding-row { display:grid;grid-template-columns:1fr 50px 1fr 50px 1fr;gap:10px;align-items:end; }.formula-symbol { height:46px;display:grid;place-items:center;font:600 24px var(--font-display);color:var(--ink-soft); }.pal-result { min-height:46px;border:1px dashed var(--teal);border-radius:12px;display:flex;align-items:center;padding:0 13px;font-weight:700;color:var(--teal);background:rgba(157,223,202,.12); }
.api-layout { display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.85fr);gap:16px; }.api-builder,.api-response { padding:24px; }.endpoint-row { display:grid;grid-template-columns:115px 1fr;gap:8px; }.code-area { font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;min-height:210px;background:#0b242b;color:#ccefe7;border-color:#1f4448; }.response-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:12px; }.response-meta { display:flex;gap:8px; }.endpoint-chips { display:flex;flex-wrap:wrap;gap:7px;margin-top:16px; }.endpoint-chips button { min-height:34px;border:1px solid var(--line);border-radius:99px;background:var(--surface-2);padding:0 11px;color:var(--ink);font-size:11px;font-weight:700; }

/* Dialog and feedback */
.dialog { width:min(470px,calc(100% - 28px));border:0;border-radius:28px;padding:0;color:var(--ink);background:var(--surface);box-shadow:0 30px 100px rgba(3,20,28,.35); }.dialog::backdrop { background:rgba(2,20,26,.68);backdrop-filter:blur(6px); }.dialog form { padding:34px;position:relative; }.dialog-close { position:absolute;right:18px;top:18px;background:var(--surface-2); }.dialog-mark { width:52px;height:52px;display:grid;place-items:center;border-radius:17px;background:rgba(8,127,122,.12);color:var(--teal);margin-bottom:20px; }.dialog-mark.danger { color:var(--danger);background:rgba(201,77,72,.1); }.dialog-mark svg { width:25px; }.dialog h2 { font:600 30px var(--font-display);margin:0 0 10px; }.dialog p { color:var(--ink-soft);font-size:14px;line-height:1.55; }.password-field { position:relative; }.password-field button { position:absolute;right:4px;top:4px;width:38px;height:38px;border:0;background:transparent;color:var(--ink-soft); }.password-field svg { width:18px; }.form-error { min-height:20px;color:var(--danger)!important;margin:8px 0 0!important; }.dialog-actions { display:flex;justify-content:flex-end;gap:8px;margin-top:24px; }.toast-region { position:fixed;right:22px;bottom:22px;z-index:100;display:grid;gap:8px;width:min(360px,calc(100% - 44px)); }.toast { color:#fff;background:#12353b;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;box-shadow:0 14px 40px rgba(2,20,26,.25);display:flex;align-items:flex-start;gap:10px;animation:toastIn .25s ease; }.toast.error { background:#7e3432; }.toast svg { width:18px;flex:0 0 auto;margin-top:1px; }.toast strong { display:block;font-size:13px; }.toast p { margin:3px 0 0;font-size:11px;opacity:.8;line-height:1.4; }
@keyframes toastIn { from { opacity:0;transform:translateY(12px); } }
.skeleton { background:linear-gradient(90deg,#e6ebe5 25%,#f3f5f0 45%,#e6ebe5 65%);background-size:200% 100%;animation:shimmer 1.3s infinite;border-radius:10px;color:transparent!important; }.skeleton-block { height:160px; }.loading-spin svg { animation:spin .8s linear infinite; }.empty-state-inline { padding:34px;text-align:center;color:var(--ink-soft); }
@keyframes shimmer { to { background-position:-200% 0; } } @keyframes spin { to { transform:rotate(360deg); } }
#ambient { pointer-events:none;position:fixed;inset:0;z-index:80;overflow:hidden;mix-blend-mode:multiply;opacity:0;transition:opacity .5s; } body.app-open #ambient { opacity:.4; }.app-open #ambient span { position:absolute;width:4px;height:4px;background:var(--teal);border-radius:50%;animation:float 11s linear infinite; }.app-open #ambient span:nth-child(1){left:18%;animation-delay:-4s}.app-open #ambient span:nth-child(2){left:64%;animation-delay:-8s}.app-open #ambient span:nth-child(3){left:90%;animation-delay:-2s}@keyframes float{from{transform:translateY(105vh);opacity:0}20%{opacity:.25}to{transform:translateY(-10vh) translateX(50px);opacity:0}}

@media (max-width: 1100px) {
  .hero-readout { display:none; }.status-hero { grid-column:span 12; }.quick-card { grid-column:span 12;min-height:240px }.metric-card { grid-column:span 6 }.activity-card,.command-card { grid-column:span 12 }.tool-card,.tool-card.featured { grid-column:span 6 }.backup-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width: 860px) {
  :root { --sidebar: 286px; }.shell { width:min(100% - 36px,1360px) }.app { display:block }.sidebar { transform:translateX(-105%);transition:transform .28s ease;box-shadow:20px 0 60px rgba(3,20,28,.16) }.sidebar.open { transform:none }.sidebar-close,.menu-button { display:grid }.app-main { grid-column:auto }.topbar { padding:0 18px }.connection-pill span:last-child,.breadcrumbs span,.breadcrumbs i { display:none }.settings-layout { grid-template-columns:1fr }.settings-nav { position:static;display:flex;overflow-x:auto;gap:5px }.settings-nav button { width:auto;white-space:nowrap;padding:0 15px }.api-layout { grid-template-columns:1fr }.hero-content { padding-top:110px }.landing { height:max(720px,100dvh) }
}
@media (max-width: 620px) {
  .landing-nav { height:76px }.landing-actions .button { display:none }.hero-content { padding-top:120px }.hero-content h1 { font-size:clamp(49px,15vw,72px) }.hero-copy { font-size:17px;margin:22px 0 }.hero-actions { flex-direction:column;align-items:stretch }.hero-readout,.hero-scroll { display:none }.hero-media iframe { display:none }.topbar .button-compact { width:44px;padding:0;font-size:0 }.topbar .button-compact svg { width:18px }.breadcrumbs { display:none }main { padding:24px 16px }.page-head { align-items:flex-start;flex-direction:column }.page-head h1 { font-size:40px }.overview-grid { gap:12px }.status-hero,.quick-card,.metric-card,.activity-card,.command-card { grid-column:span 12 }.status-hero { min-height:350px;padding:24px }.server-controls { left:24px;bottom:24px }.metric-card { min-height:126px }.settings-grid { grid-template-columns:1fr }.settings-panel { padding:18px }.sticky-save { align-items:stretch;flex-direction:column }.backup-grid { grid-template-columns:1fr }.tool-card,.tool-card.featured { grid-column:span 12 }.breeding-row { grid-template-columns:1fr 34px 1fr; }.breeding-row .formula-symbol:nth-of-type(2),.breeding-row .pal-result { grid-column:auto }.breeding-row .pal-result { grid-column:1/-1 }.endpoint-row { grid-template-columns:1fr }.dialog form { padding:28px 22px }.toast-region { right:14px;bottom:14px;width:calc(100% - 28px) }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important }.hero-media iframe { display:none }
}

.settings-panel { padding-bottom: 104px; }
@media (max-width: 620px) { .option-check-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .settings-panel { padding-bottom: 132px; } }

.settings-searchbar { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 12px; }
.settings-search-input { position: relative; flex: 1; }
.settings-search-input > svg { position: absolute; left: 15px; top: 50%; width: 20px; color: var(--teal); transform: translateY(-50%); pointer-events: none; }
.settings-search-input input { min-height: 50px; padding-left: 46px; padding-right: 52px; font-size: 15px; background: var(--surface-2); }
.settings-search-input .icon-button { position: absolute; right: 5px; top: 50%; width: 40px; height: 40px; color: var(--ink-soft); background: transparent; transform: translateY(-50%); }
.settings-search-count { flex: 0 0 auto; padding-right: 8px; color: var(--ink-soft); font-size: 12px; font-weight: 700; white-space: nowrap; }
.settings-empty { grid-column: 1 / -1; padding: 54px 20px; text-align: center; }
.settings-empty .empty-mark { width: 58px; height: 58px; border-radius: 18px; }
.settings-empty h3 { margin: 0 0 7px; font: 600 20px var(--font-display); }
.settings-empty p { margin: 0 auto; max-width: 460px; color: var(--ink-soft); line-height: 1.55; }
.settings-empty code { padding: 2px 6px; border-radius: 6px; color: var(--teal-dark); background: rgba(8,127,122,.1); }
@media (max-width: 600px) {
  .settings-searchbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .settings-search-count { padding: 0 4px; }
}
.pal-select-control { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 9px; }
.pal-select-control select { min-width: 0; min-height: 54px; }
.pal-select-icon { width: 58px; height: 58px; object-fit: contain; border: 1px solid rgba(8,127,122,.18); border-radius: 16px; background: radial-gradient(circle at 50% 38%,#fff 0,#edf8f4 72%); }
.pal-result { min-height: 64px; gap: 9px; padding: 3px 10px 3px 4px; }
.pal-result-icon { width: 58px; height: 58px; flex: 0 0 58px; object-fit: contain; border-radius: 14px; background: rgba(255,255,255,.7); }
.pal-result span,.pal-result strong,.pal-result small { display: block; }
.pal-result strong { color: var(--ink); font-size: 14px; }
.pal-result small { margin-top: 2px; color: var(--ink-soft); font-size: 10px; }
.pal-avatar { width: 58px; height: 58px; flex: 0 0 58px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(8,127,122,.15); border-radius: 17px; background: radial-gradient(circle at 50% 38%,#fff 0,#edf8f4 72%); }
.pal-character-icon { width: 100%; height: 100%; object-fit: contain; }
.pal-table td { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 620px) {
  .breeding-row { grid-template-columns: 1fr; align-items: stretch; }
  .breeding-row .formula-symbol,.breeding-row .formula-symbol:nth-of-type(2),.breeding-row .pal-result { grid-column: 1; }
  .breeding-row .formula-symbol { height: 26px; }
}
/* DoubTech SSO operator dialog */
.auth-dialog { overflow: hidden; }
.auth-dialog::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,#087f7a,#79d5c7,#e5b85e); }
.auth-mark { box-shadow:0 0 0 8px rgba(8,127,122,.055),0 12px 28px rgba(8,127,122,.12); }
.auth-trust { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:22px 0 12px; }
.auth-trust span { display:flex; align-items:center; gap:7px; min-height:42px; padding:9px 11px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink-soft); font-size:11px; font-weight:700; }
.auth-trust i { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:rgba(8,127,122,.12); color:var(--teal); }
.auth-trust svg { width:12px; }
.sso-button { margin-top:4px; box-shadow:0 12px 28px rgba(8,127,122,.22); }
.auth-dialog .button-full + .button-full { margin-top:9px; }
.auth-footnote { display:block; margin-top:14px; color:var(--ink-soft); text-align:center; font-size:11px; line-height:1.45; }
@media (max-width:480px) { .auth-trust { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce) { .auth-mark,.sso-button { transition:none; } }

/* Role-aware access control */
.access-loading { min-height:180px; display:grid; place-items:center; align-content:center; gap:12px; color:var(--ink-soft); }
.access-loading svg { width:28px; }
.access-intro { display:flex; align-items:center; gap:18px; padding:22px; margin-bottom:16px; background:linear-gradient(135deg,var(--surface),rgba(8,127,122,.07)); }
.access-intro h2 { margin:0 0 5px; font:600 22px var(--font-display); }
.access-intro p { margin:0; color:var(--ink-soft); line-height:1.55; }
.access-icon { display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; border-radius:17px; color:var(--teal); background:rgba(8,127,122,.12); box-shadow:0 10px 24px rgba(8,127,122,.12); }
.access-icon svg { width:24px; }
.access-list { overflow:hidden; }
.access-user { display:grid; grid-template-columns:minmax(240px,1fr) auto minmax(190px,auto); align-items:center; gap:18px; padding:16px 18px; border-bottom:1px solid var(--line); }
.access-user:last-child { border-bottom:0; }
.access-identity { min-width:0; display:flex; align-items:center; gap:12px; }
.access-identity .avatar { flex:0 0 42px; width:42px; height:42px; }
.access-identity strong,.access-identity small { display:block; }
.access-identity strong { font-size:14px; }
.access-identity small { max-width:42vw; margin-top:3px; overflow:hidden; color:var(--ink-soft); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.role-control { min-height:46px; min-width:190px; padding:6px 10px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--ink-soft); display:flex; align-items:center; gap:10px; cursor:pointer; transition:border-color .2s,background .2s,color .2s; }
.role-control:hover:not(:disabled) { border-color:rgba(8,127,122,.42); color:var(--ink); }
.role-control:focus-visible { outline:3px solid rgba(8,127,122,.25); outline-offset:2px; }
.role-control>span { position:relative; width:38px; height:22px; flex:0 0 38px; border-radius:99px; background:#9aa8aa; transition:background .2s; }
.role-control>span::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .2s; }
.role-control.active>span { background:var(--teal); }
.role-control.active>span::after { transform:translateX(16px); }
.role-control strong { font-size:11px; text-align:left; }
.role-control:disabled { cursor:not-allowed; opacity:.62; }
@media (max-width:760px) {
  .access-user { grid-template-columns:1fr auto; gap:12px; }
  .access-user>.badge { justify-self:end; }
  .role-control { grid-column:1/-1; width:100%; min-width:0; }
}
@media (max-width:480px) {
  .access-intro { align-items:flex-start; }
  .access-user { grid-template-columns:1fr; }
  .access-user>.badge { justify-self:start; }
  .access-identity small { max-width:70vw; }
}
@media (prefers-reduced-motion:reduce) {
  .role-control,.role-control>span,.role-control>span::after { transition:none; }
}

/* Live administrator chat */
.chat-layout { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.7fr); gap:16px; align-items:start; }
.chat-stage { overflow:hidden; min-width:0; }
.chat-toolbar { min-height:72px; display:grid; grid-template-columns:minmax(220px,1fr) auto 44px; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); background:linear-gradient(135deg,var(--surface),rgba(8,127,122,.045)); }
.chat-toolbar .search { margin:0; }
.chat-toolbar .icon-button { width:44px; height:44px; }
.chat-feed { height:min(64vh,680px); min-height:430px; overflow-y:auto; padding:18px; scroll-behavior:smooth; background:linear-gradient(180deg,#f7fbf9 0,#f2f7f5 100%); scrollbar-color:rgba(8,127,122,.35) transparent; }
.chat-message { display:grid; grid-template-columns:42px minmax(0,1fr); gap:11px; max-width:780px; margin:0 0 14px; animation:chat-arrive .2s ease-out both; }
.chat-avatar { width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(8,127,122,.2); border-radius:14px; color:#fff; background:linear-gradient(145deg,var(--teal),#175d64); box-shadow:0 6px 14px rgba(8,73,78,.15); font-size:11px; font-weight:900; letter-spacing:.04em; }
.chat-message>div { min-width:0; padding:10px 13px 11px; border:1px solid rgba(8,77,79,.1); border-radius:4px 16px 16px 16px; background:#fff; box-shadow:0 7px 22px rgba(15,61,63,.055); }
.chat-message-head { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.chat-message-head strong { color:var(--teal-dark); font-size:12px; }
.chat-message-head time { flex:0 0 auto; color:var(--ink-soft); font-size:10px; font-variant-numeric:tabular-nums; }
.chat-message p { margin:4px 0 0; color:var(--ink); font-size:14px; line-height:1.55; overflow-wrap:anywhere; white-space:pre-wrap; }
.chat-loading,.chat-empty { min-height:360px; display:grid; place-items:center; align-content:center; gap:9px; color:var(--ink-soft); text-align:center; }
.chat-loading svg { width:24px; }
.chat-empty>span { width:58px; height:58px; display:grid; place-items:center; border-radius:18px; color:var(--teal); background:rgba(8,127,122,.1); }
.chat-empty svg { width:27px; }
.chat-empty h3 { margin:5px 0 0; font:600 21px var(--font-display); color:var(--ink); }
.chat-empty p { margin:0; font-size:13px; }
.chat-compose { position:sticky; top:92px; padding:24px; overflow:hidden; }
.chat-compose::before { content:""; position:absolute; inset:0 0 auto; height:4px; background:linear-gradient(90deg,var(--teal),var(--mint),#e5b85e); }
.chat-compose-mark { width:52px; height:52px; display:grid; place-items:center; margin-bottom:20px; border-radius:17px; color:#fff; background:linear-gradient(145deg,var(--teal),#17606a); box-shadow:0 10px 24px rgba(8,127,122,.2); }
.chat-compose-mark svg { width:23px; }
.chat-compose h2 { margin:3px 0 8px; font:600 25px var(--font-display); }
.chat-compose>p:not(.eyebrow) { margin:0 0 22px; color:var(--ink-soft); font-size:13px; line-height:1.6; }
.chat-compose form { display:grid; gap:8px; }
.chat-compose label { color:var(--ink); font-size:12px; font-weight:800; }
.chat-compose textarea { min-height:128px; resize:vertical; line-height:1.5; }
.chat-compose-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:4px; }
.chat-compose-foot small { color:var(--ink-soft); font-size:10px; }
.chat-compose kbd { padding:2px 5px; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; background:var(--surface-2); font:700 9px var(--body); }
.chat-compose-foot .button { min-height:44px; }
.chat-source-note { display:flex; align-items:flex-start; gap:8px; margin-top:20px; padding:12px; border-radius:12px; color:var(--ink-soft); background:var(--surface-2); font-size:10px; line-height:1.5; }
.chat-source-note svg { width:16px; flex:0 0 16px; color:var(--teal); }
@keyframes chat-arrive { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@media(max-width:980px) {
  .chat-layout { grid-template-columns:1fr; }
  .chat-compose { position:static; }
  .chat-feed { height:58vh; }
}
@media(max-width:620px) {
  .chat-toolbar { grid-template-columns:minmax(0,1fr) 44px; }
  .chat-toolbar>.badge { grid-row:2; grid-column:1/-1; justify-self:start; }
  .chat-feed { min-height:390px; height:58vh; padding:14px 10px; }
  .chat-message { grid-template-columns:36px minmax(0,1fr); gap:8px; }
  .chat-avatar { width:36px; height:36px; border-radius:12px; }
  .chat-message>div { padding:9px 11px; }
  .chat-compose { padding:22px 18px; }
  .chat-compose-foot { align-items:stretch; flex-direction:column; }
  .chat-compose-foot .button { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .chat-feed { scroll-behavior:auto; }
  .chat-message { animation:none; }
}
/* Community approvals and linked player identities */
.access-directory { display:grid; gap:12px; }
.access-directory .access-user { display:grid; grid-template-columns:minmax(240px,1fr) auto; gap:14px 18px; padding:18px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 8px 24px rgba(11,54,58,.055); }
.access-directory .access-user:last-child { border-bottom:1px solid var(--line); }
.access-directory .access-user.is-pending { border-color:rgba(204,143,38,.34); background:linear-gradient(135deg,var(--surface),rgba(229,184,94,.07)); }
.access-avatar-image { width:42px; height:42px; flex:0 0 42px; border:2px solid #fff; border-radius:50%; object-fit:cover; box-shadow:0 0 0 1px rgba(8,127,122,.22),0 6px 14px rgba(13,68,70,.13); }
.access-controls { grid-column:1/-1; display:grid; grid-template-columns:minmax(190px,.75fr) minmax(190px,.85fr) minmax(240px,1.3fr); gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.approval-control { min-height:48px; display:flex; align-items:center; gap:9px; padding:7px 11px; border:1px solid rgba(194,137,37,.3); border-radius:14px; color:#815d1e; background:rgba(229,184,94,.1); cursor:pointer; transition:border-color .2s,background .2s,color .2s; }
.approval-control>span { width:28px; height:28px; display:grid; place-items:center; flex:0 0 28px; border-radius:9px; color:#a16e18; background:rgba(229,184,94,.2); }
.approval-control svg { width:15px; }
.approval-control strong { font-size:11px; text-align:left; }
.approval-control.active { border-color:rgba(8,127,122,.26); color:var(--teal-dark); background:rgba(8,127,122,.075); }
.approval-control.active>span { color:var(--teal); background:rgba(8,127,122,.13); }
.approval-control:hover:not(:disabled) { border-color:currentColor; }
.approval-control:focus-visible,.player-link-control select:focus-visible { outline:3px solid rgba(8,127,122,.24); outline-offset:2px; }
.approval-control:disabled { opacity:.62; cursor:not-allowed; }
.player-link-control { min-width:0; min-height:48px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:10px; padding:5px 6px 5px 11px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.player-link-control>span { display:flex; align-items:center; gap:7px; color:var(--ink-soft); white-space:nowrap; }
.player-link-control svg { width:16px; color:var(--teal); }
.player-link-control b { font-size:10px; }
.player-link-control select { min-width:0; height:38px; border:0; border-radius:10px; background:var(--surface); font-size:11px; }
.chat-avatar:is(img) { object-fit:cover; background:#fff; }
.chat-message.is-linked .chat-avatar { border:2px solid #fff; box-shadow:0 0 0 2px var(--mint),0 7px 16px rgba(8,73,78,.18); }
.chat-message-head>span { min-width:0; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.chat-linked { color:var(--teal); font-size:9px; font-weight:800; letter-spacing:.02em; }
.chat-member-card .chat-compose-mark { background:linear-gradient(145deg,var(--teal),#3ca879); }
@media(max-width:920px) {
  .access-controls { grid-template-columns:1fr 1fr; }
  .player-link-control { grid-column:1/-1; }
}
@media(max-width:620px) {
  .access-directory .access-user { grid-template-columns:1fr; }
  .access-directory .access-user>.badge { justify-self:start; }
  .access-controls { grid-template-columns:1fr; }
  .player-link-control { grid-column:auto; grid-template-columns:1fr; align-items:stretch; }
  .player-link-control select { width:100%; height:44px; }
  .approval-control,.access-controls .role-control { width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .approval-control { transition:none; }
}
/* Signed-in top bar profile menu */
.topbar-account { position:relative; margin-left:2px; }
.topbar-profile-button { width:48px; height:48px; display:grid; place-items:center; padding:4px; border:1px solid var(--line); border-radius:50%; color:var(--ink); background:rgba(255,255,255,.82); box-shadow:0 5px 16px rgba(13,56,60,.07); cursor:pointer; touch-action:manipulation; transition:border-color .2s,background .2s,box-shadow .2s; }
.topbar-profile-button:hover,.topbar-profile-button[aria-expanded="true"] { border-color:rgba(8,127,122,.38); background:#fff; box-shadow:0 8px 22px rgba(13,56,60,.12); }
.topbar-profile-button:focus-visible,.topbar-profile-menu button:focus-visible { outline:3px solid rgba(8,127,122,.26); outline-offset:2px; }
.topbar-avatar,.profile-menu-avatar { position:relative; display:grid; place-items:center; overflow:hidden; border-radius:50%; color:#405347; background:linear-gradient(145deg,#f9d98f,#a6e5d4); font-weight:900; }
.topbar-avatar { width:38px; height:38px; }
.topbar-avatar img,.profile-menu-avatar img { width:100%; height:100%; object-fit:cover; }
.topbar-account-copy { display:none; min-width:0; text-align:left; }
.topbar-account-copy strong,.topbar-account-copy small { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-account-copy strong { font-size:11px; }
.topbar-account-copy small { margin-top:2px; color:var(--ink-soft); font-size:9px; }
.topbar-account-chevron { display:none; color:var(--ink-soft); transition:transform .2s; }
.topbar-account-chevron svg { width:14px; }
.topbar-profile-button[aria-expanded="true"] .topbar-account-chevron { transform:rotate(90deg); }
.topbar-profile-menu { position:absolute; z-index:80; top:calc(100% + 10px); right:0; width:min(310px,calc(100vw - 28px)); overflow:hidden; border:1px solid rgba(11,75,77,.13); border-radius:18px; background:rgba(255,255,255,.97); box-shadow:0 22px 60px rgba(6,39,43,.2); backdrop-filter:blur(18px); animation:profile-menu-in .18s ease-out both; }
.profile-menu-identity { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:11px; padding:16px 16px 10px; }
.profile-menu-avatar { width:48px; height:48px; box-shadow:0 0 0 3px rgba(8,127,122,.1); }
.profile-menu-identity>span:last-child { display:grid; min-width:0; }
.profile-menu-identity strong,.profile-menu-identity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-menu-identity strong { font-size:13px; }
.profile-menu-identity small { margin-top:3px; color:var(--ink-soft); font-size:10px; }
.profile-menu-role,.profile-menu-player { display:inline-flex; align-items:center; min-height:25px; margin:0 16px 8px; padding:4px 8px; border-radius:8px; color:var(--teal-dark); background:rgba(8,127,122,.09); font-size:9px; font-weight:800; }
.profile-menu-player { color:#74551f; background:rgba(229,184,94,.14); }
.profile-menu-actions { display:grid; gap:2px; padding:8px; border-top:1px solid var(--line); background:var(--surface-2); }
.profile-menu-actions button { min-height:44px; display:flex; align-items:center; gap:10px; padding:0 11px; border:0; border-radius:11px; color:var(--ink); background:transparent; font:700 12px var(--body); text-align:left; cursor:pointer; }
.profile-menu-actions button:hover { background:#fff; }
.profile-menu-actions svg { width:17px; color:var(--teal); }
.profile-menu-actions .profile-menu-logout { color:#a43d35; }
.profile-menu-actions .profile-menu-logout svg { color:#bd4c42; }
@keyframes profile-menu-in { from { opacity:0; transform:translateY(-5px) scale(.98); } to { opacity:1; transform:none; } }
@media(max-width:1100px) { .topbar-profile-button { width:48px; height:48px; } }
@media(max-width:620px) {
  .topbar-actions { gap:5px; }
  .topbar-profile-button { width:44px; height:44px; padding:3px; border-radius:50%; }
  .topbar-avatar { width:36px; height:36px; }
  .topbar-account-chevron { display:none; }
  .topbar-profile-menu { position:fixed; top:68px; right:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .topbar-profile-button,.topbar-account-chevron { transition:none; }
  .topbar-profile-menu { animation:none; }
}