/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: PKGAME dark paper · enrichment: none · nav: N3 side rail · footer: none */
/* Hallmark · post-build audit: 320/375/414/768 no root overflow · controls labeled · reduced-motion respected · token-only color system */
@font-face { font-family: "Geist"; src: url("https://pkgame365.com/assets/Geist-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("https://pkgame365.com/assets/Inter.ttc") format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("https://pkgame365.com/assets/JetBrainsMono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --color-paper: oklch(26.5% 0.006 210);
  --color-paper-2: oklch(29.5% 0.007 210);
  --color-paper-3: oklch(32.5% 0.008 210);
  --color-ink: oklch(95% 0.006 210);
  --color-ink-2: oklch(84% 0.007 210);
  --color-muted: oklch(72% 0.007 210);
  --color-placeholder: oklch(61% 0.007 210);
  --color-rule: oklch(40% 0.009 210);
  --color-rule-2: oklch(53% 0.01 210);
  --color-accent: oklch(73.76% 0.1257 209.5);
  --color-accent-hover: oklch(82% 0.132 209.5);
  --color-accent-ink: oklch(24% 0.035 210);
  --color-positive: oklch(77% 0.16 160);
  --color-warning: oklch(81% 0.15 75);
  --color-error: oklch(74% 0.16 15);
  --color-focus: oklch(90% 0.08 210);
  --color-overlay: oklch(10% 0.01 210 / 0.82);
  --color-shadow: oklch(8% 0.01 210 / 0.42);
  --font-display: "Geist", "Inter", ui-sans-serif, sans-serif;
  --font-body: "Inter", ui-sans-serif, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --control-height: 2.75rem;
  --topbar-height: 4.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --z-base: 1;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-width: 20rem; min-height: 100%; overflow-x: clip; background: var(--color-paper); color: var(--color-ink); }
body { font-family: var(--font-body); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body:has(dialog[open]) { overflow: clip; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { min-width: 0; overflow-wrap: anywhere; font-family: var(--font-display); font-style: normal; font-weight: 600; letter-spacing: -0.03em; }
button { color: inherit; }
[hidden] { display: none !important; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: fixed; z-index: var(--z-toast); inset: var(--space-sm) auto auto var(--space-sm); min-height: var(--control-height); padding: var(--space-sm) var(--space-md); transform: translateY(-160%); background: var(--color-accent); color: var(--color-accent-ink); border-radius: var(--radius-xs); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.topbar { position: sticky; top: 0; z-index: var(--z-sticky-nav); min-height: var(--topbar-height); padding-inline: var(--space-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); background: var(--color-paper); color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.brand { min-width: 0; min-height: 2.75rem; display: inline-flex; align-items: center; gap: var(--space-sm); white-space: nowrap; }
.brand img { width: 8.2rem; height: 2rem; }
.brand span { display: none; padding-inline-start: var(--space-sm); border-inline-start: 1px solid var(--color-rule); color: var(--color-muted); font-size: 0.85rem; }
.topbar__actions { display: flex; align-items: center; gap: var(--space-xs); }
.topbar__actions .button:first-child { display: none; }

.button, .icon-button, .row-action { min-height: var(--control-height); border: 1px solid var(--color-rule-2); outline: 2px solid transparent; outline-offset: 1px; background: transparent; color: var(--color-ink-2); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.button { padding: var(--space-sm) var(--space-md); font-size: 0.84rem; font-weight: 700; }
.button--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.button:active, .icon-button:active, .row-action:active { transform: translateY(1px); }
.button:disabled, .icon-button:disabled, .row-action:disabled { opacity: 0.55; cursor: not-allowed; }
.button[aria-disabled="true"], .row-action[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.icon-button { min-width: var(--control-height); padding: var(--space-sm); font-size: 0.78rem; font-weight: 700; }

.auth-screen { min-height: calc(100dvh - var(--topbar-height)); padding: var(--space-2xl) var(--space-md) var(--space-3xl); }
.auth-panel { width: min(100%, 31rem); margin-inline: auto; }
.plain-label { color: var(--color-accent); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.auth-panel h1 { margin-block-start: var(--space-sm); font-size: clamp(2.35rem, 8vw, 4.5rem); line-height: 1.02; }
.auth-panel > p:not(.plain-label) { margin-block-start: var(--space-lg); color: var(--color-muted); font-size: 1.05rem; }
.stack-form { margin-block-start: var(--space-xl); display: grid; gap: var(--space-md); }

label { display: grid; gap: var(--space-xs); color: var(--color-ink-2); font-size: 0.8rem; font-weight: 650; }
input, select, textarea { width: 100%; min-height: var(--control-height); padding: var(--space-sm); border: 1px solid var(--color-rule-2); outline: 2px solid transparent; outline-offset: 1px; border-radius: var(--radius-xs); background: var(--color-paper-2); color: var(--color-ink); }
textarea { min-height: 6rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-placeholder); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-color: var(--color-focus); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; color: var(--color-placeholder); }
label small { min-height: 1lh; color: var(--color-muted); font-size: 0.72rem; font-weight: 400; }
.form-message { min-height: 1.5rem; color: var(--color-error); font-size: 0.82rem; }
.form-message[data-state="success"] { color: var(--color-positive); }

.admin-shell { min-height: calc(100dvh - var(--topbar-height)); }
.admin-rail { position: sticky; top: var(--topbar-height); z-index: var(--z-sticky); padding: var(--space-sm) var(--space-md); overflow-x: auto; background: var(--color-paper); color: var(--color-ink); border-bottom: 1px solid var(--color-rule); }
.admin-rail__label, .admin-rail__note { display: none; }
.admin-nav { display: flex; align-items: center; gap: var(--space-xs); }
.admin-nav button { min-height: var(--control-height); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule); outline: 2px solid transparent; outline-offset: 1px; background: transparent; color: var(--color-muted); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.8rem; white-space: nowrap; }
.admin-nav button[aria-current="page"] { border-color: var(--color-accent); color: var(--color-accent); }
.admin-nav button:active { transform: translateY(1px); }
.admin-main { min-width: 0; padding: var(--space-xl) var(--space-md) var(--space-3xl); }
.admin-view { width: min(100%, 86rem); margin-inline: auto; }

.view-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
.view-head > div { max-width: 65ch; }
.view-head h1 { margin-block-start: var(--space-xs); font-size: clamp(2.25rem, 9vw, 4.75rem); line-height: 1.02; }
.view-head p:not(.plain-label) { margin-block-start: var(--space-sm); max-width: 65ch; color: var(--color-muted); font-size: 1rem; }

.metrics { margin-block-start: var(--space-xl); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--color-rule); }
.metrics div { min-height: 7rem; padding: var(--space-md); display: flex; flex-direction: column; justify-content: space-between; border-inline-end: 1px solid var(--color-rule); }
.metrics div:nth-child(2n) { border-inline-end: 0; }
.metrics div:nth-child(n+3) { border-block-start: 1px solid var(--color-rule); }
.metrics strong { font-family: var(--font-display); font-size: clamp(2rem, 9vw, 3.4rem); font-variant-numeric: tabular-nums; line-height: 1; }
.metrics span { color: var(--color-muted); font-size: 0.78rem; }

.overview-index { margin-block-start: var(--space-2xl); }
.overview-index > header h2 { font-size: clamp(1.8rem, 6vw, 2.7rem); }
.overview-index > header p { margin-block-start: var(--space-xs); color: var(--color-muted); font-size: 0.84rem; }
.overview-module-rows { margin-block-start: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.overview-module-row { width: 100%; min-height: 5rem; padding-block: var(--space-md); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); border: 0; border-bottom: 1px solid var(--color-rule); outline: 2px solid transparent; outline-offset: -2px; background: transparent; color: var(--color-ink); cursor: pointer; text-align: start; }
.overview-module-row strong { display: block; font-family: var(--font-display); font-size: 1.15rem; }
.overview-module-row span { display: block; margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: 0.78rem; }
.overview-module-row em { color: var(--color-accent); font-family: var(--font-mono); font-size: 0.8rem; font-style: normal; }

.policy-strip { margin-block-start: var(--space-xl); padding-block: var(--space-lg); display: grid; gap: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.policy-strip h2 { font-size: 1rem; }
.policy-strip p { margin-block-start: var(--space-2xs); max-width: 65ch; color: var(--color-muted); font-size: 0.83rem; }
.policy-strip__legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); color: var(--color-muted); font-size: 0.72rem; }
.policy-strip__legend span, .health-label { display: inline-flex; align-items: center; gap: var(--space-xs); }
.signal { width: var(--space-xs); height: var(--space-xs); display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--color-rule-2); }
.signal--healthy { background: var(--color-positive); }
.signal--degraded { background: var(--color-warning); }
.signal--down { background: var(--color-error); }
.signal--unknown { background: var(--color-rule-2); }

.directory-admin, .content-table, .updates-table, .subscribers-table { margin-block-start: var(--space-2xl); }
.section-head { display: flex; flex-direction: column; gap: var(--space-lg); }
.section-head h2 { font-size: clamp(1.8rem, 6vw, 2.7rem); }
.section-head p { margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: 0.8rem; }
.filters { width: 100%; display: flex; flex-direction: column; gap: var(--space-sm); }
.filters input, .filters select { background: transparent; font-size: 0.8rem; }

.content-summary { margin-block-start: var(--space-xl); padding-block: var(--space-lg); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); border-block: 1px solid var(--color-rule); }
.content-summary div { display: grid; gap: var(--space-xs); }
.content-summary strong { font-family: var(--font-display); font-size: 2.4rem; font-variant-numeric: tabular-nums; line-height: 1; }
.content-summary span, .content-summary p { color: var(--color-muted); font-size: 0.78rem; }
.content-summary p { grid-column: 1 / -1; max-width: 65ch; }
.email-service-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }
.service-state { padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); color: var(--color-warning); font-size: 0.78rem; white-space: nowrap; }
.service-state[data-state="active"] { border-color: var(--color-positive); color: var(--color-positive); }
.service-state[data-state="critical"] { border-color: var(--color-error); color: var(--color-error); }
.integration-card { margin-block-start: var(--space-xl); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-md); background: var(--color-paper-2); }
.integration-card > header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-md); }
.integration-card h2 { margin-block-start: var(--space-2xs); font-size: 1.35rem; }
.integration-card header p:not(.plain-label) { margin-block-start: var(--space-xs); max-width: 60ch; color: var(--color-muted); font-size: 0.8rem; }
.integration-form { margin-block-start: var(--space-lg); display: grid; gap: var(--space-md); }
.integration-form label { max-width: 50rem; }
.integration-form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); }

.table-shell { margin-block-start: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
table, tbody, tr, td { display: block; width: 100%; }
thead { display: none; }
tr { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
td { padding-block: var(--space-xs); vertical-align: middle; }
td:not(:first-child)::before { content: attr(data-label); width: 7rem; display: inline-block; color: var(--color-muted); font-size: 0.68rem; text-transform: uppercase; vertical-align: top; }
td:not(:first-child) > * { max-width: calc(100% - 7.5rem); vertical-align: top; }
.route-name strong, .entry-name strong, .update-name strong, .subscriber-name strong { display: block; font-size: 0.92rem; }
.route-name code, .entry-name small, .update-name small, .subscriber-name small { display: block; margin-block-start: var(--space-2xs); overflow: hidden; color: var(--color-muted); font-family: var(--font-mono); font-size: 0.7rem; text-overflow: ellipsis; white-space: nowrap; }
.role-label, .publish-label, .health-label, .check-time, .entry-meta, .entry-channel, .update-meta, .subscriber-meta { color: var(--color-ink-2); font-size: 0.76rem; }
.publish-label small, .health-label small, .check-time small, .entry-meta small, .entry-channel small, .update-meta small, .subscriber-meta small { display: block; margin-block-start: var(--space-2xs); color: var(--color-muted); font-size: 0.68rem; }
.row-actions { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-xs); }
.row-action { min-height: 2.25rem; padding: var(--space-xs) var(--space-sm); border-color: var(--color-rule); border-radius: var(--radius-xs); font-size: 0.7rem; }
.row-action--danger { color: var(--color-error); }
.empty-state { padding-block: var(--space-xl); display: grid; gap: var(--space-xs); color: var(--color-muted); }
.empty-state strong { color: var(--color-ink-2); font-family: var(--font-display); font-size: 1rem; }
.empty-state span { font-size: 0.8rem; }

.dialog { position: fixed; inset: 0; width: min(calc(100% - 2rem), 52rem); height: fit-content; max-height: min(88dvh, 54rem); margin: auto; padding: 0; border: 1px solid var(--color-rule-2); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 var(--space-lg) var(--space-3xl) var(--color-shadow); }
.dialog--wide { width: min(calc(100% - 2rem), 68rem); }
.dialog::backdrop { background: var(--color-overlay); }
.dialog-panel { padding: var(--space-lg); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); }
.dialog-head h2 { margin-block-start: var(--space-2xs); font-size: 2rem; }
.form-grid { margin-block-start: var(--space-xl); display: grid; gap: var(--space-md); }
.check-group { display: grid; align-content: end; gap: var(--space-sm); }
.check-field { min-height: var(--control-height); display: flex; align-items: center; gap: var(--space-sm); }
.check-field input { width: 1rem; min-height: 1rem; padding: 0; accent-color: var(--color-accent); }
.dialog-actions { margin-block-start: var(--space-lg); display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-sm); }
.history-list { margin-block-start: var(--space-lg); }
.history-item { display: grid; gap: var(--space-xs); padding-block: var(--space-md); border-top: 1px solid var(--color-rule); font-size: 0.75rem; }
.history-item strong { font-weight: 650; }
.history-item span, .history-item code { color: var(--color-muted); }
.history-item code { overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.68rem; }
.toast { position: fixed; inset: auto var(--space-md) var(--space-md) auto; z-index: var(--z-toast); max-width: min(28rem, calc(100% - 2rem)); padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-error); border-radius: var(--radius-sm); background: var(--color-paper-3); color: var(--color-ink-2); font-size: 0.82rem; }
.toast[data-state="success"] { border-color: var(--color-positive); }

@media (hover: hover) and (pointer: fine) {
  .button:hover, .icon-button:hover, .row-action:hover { border-color: var(--color-ink-2); color: var(--color-ink); }
  .button--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-ink); }
  .admin-nav button:hover { color: var(--color-ink); }
  .overview-module-row:hover { background: var(--color-paper-2); }
  input:hover, select:hover, textarea:hover { background: var(--color-paper-3); }
}

@media (min-width: 40rem) {
  .topbar { padding-inline: var(--space-lg); }
  .brand span, .topbar__actions .button:first-child { display: inline-flex; }
  .admin-main { padding-inline: var(--space-lg); }
  .view-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .view-head > .service-state, .view-head > .email-service-actions { align-self: flex-start; }
  .filters { flex-direction: row; }
  .integration-form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .integration-form .form-message { grid-column: 1 / -1; }
  .search-field { width: min(18rem, 42vw); }
  .select-field { width: 9rem; }
  .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .span-2 { grid-column: 1 / -1; }
  .history-item { grid-template-columns: 8rem 7rem 7rem minmax(0, 1fr); gap: var(--space-md); }
}

@media (min-width: 48rem) {
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metrics div, .metrics div:nth-child(2n) { border-inline-end: 1px solid var(--color-rule); }
  .metrics div:last-child { border-inline-end: 0; }
  .metrics div:nth-child(n+3) { border-block-start: 0; }
  .content-summary { grid-template-columns: 10rem 10rem minmax(0, 1fr); align-items: end; }
  .content-summary p { grid-column: auto; }
  .section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .filters { width: auto; }
  table { width: 100%; display: table; border-collapse: collapse; table-layout: fixed; }
  thead { display: table-header-group; }
  tbody { display: table-row-group; }
  tr { display: table-row; width: auto; padding: 0; border: 0; }
  th, td { display: table-cell; width: auto; padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-rule); text-align: start; }
  th { color: var(--color-muted); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
  th:first-child, td:first-child { width: 25%; padding-inline-start: 0; }
  th:last-child, td:last-child { width: 18%; padding-inline-end: 0; text-align: end; }
  td:not(:first-child)::before { content: none; }
  td:not(:first-child) > * { max-width: none; }
  .content-table th:first-child, .content-table td:first-child { width: 24%; }
  .content-table th:last-child, .content-table td:last-child { width: 14%; }
  .updates-table th:first-child, .updates-table td:first-child { width: 38%; }
  .subscribers-table th:first-child, .subscribers-table td:first-child { width: 34%; }
  .empty-state { border-bottom: 1px solid var(--color-rule); }
}

@media (min-width: 64rem) {
  .admin-shell { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
  .admin-rail { height: calc(100dvh - var(--topbar-height)); padding: var(--space-xl) var(--space-lg); overflow: auto; border-inline-end: 1px solid var(--color-rule); border-bottom: 0; }
  .admin-rail__label { display: block; color: var(--color-muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .admin-nav { margin-block-start: var(--space-lg); display: grid; gap: var(--space-2xs); }
  .admin-nav button { width: 100%; border-color: transparent; border-radius: 0; text-align: start; }
  .admin-nav button[aria-current="page"] { border-color: transparent; background: var(--color-paper-2); }
  .admin-rail__note { margin-block-start: var(--space-2xl); padding-block-start: var(--space-lg); display: block; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 0.72rem; }
  .admin-main { padding: var(--space-2xl) var(--space-xl) var(--space-3xl); }
  .policy-strip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}