/* OSIC Studio (OSI-100). Tokens follow the design system in marketingfirstparser/saas/docs/design-system/ds.md:
   a true-black canvas, translucent white hairlines instead of shadows, white as the one bright accent (a single primary
   button per view), colour only for status. Inter for the interface, Geist Mono for identifiers and times. */

/* ?v=N: fonts are cached for a year (and by Cloudflare), so a changed font gets a new address */
@font-face { font-family: "Inter"; src: url("/studio/fonts/inter-latin-wght.woff2?v=1") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/studio/fonts/inter-cyrillic-wght.woff2?v=1") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geist Mono"; src: url("/studio/fonts/geist-mono-latin-400.woff2?v=1") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --canvas: #000000;
  --surface-card: #0a0a0c;
  --surface-elevated: #101012;
  --surface-deep: #06060a;
  --hairline: rgba(255, 255, 255, 0.06);
  --hairline-strong: rgba(255, 255, 255, 0.14);
  --ink: #fcfdff;
  --body: rgba(252, 253, 255, 0.86);
  --charcoal: rgba(252, 253, 255, 0.7);
  --mute: #a1a4a5;
  --ash: #888e90;
  --stone: #464a4d;
  --primary-pressed: #f1f7fe;
  --success: #11ff99;
  --attention: #ffc53d;
  --danger: #ff2047;
  --link: #3b9eff;
  --glow-green: rgba(34, 255, 153, 0.18);

  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 9999px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px;

  --ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100dvh; background: var(--canvas); color: var(--body);
  font: 400 14px/1.43 var(--ui); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { margin: 0; color: var(--ink); font-weight: 500; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button, input { font: inherit; color: inherit; }
a { color: var(--link); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.muted { color: var(--mute); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* buttons: one white primary per view; ghost and outline for the rest */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 36px; padding: 0 var(--s-4); border-radius: var(--r-md); border: 1px solid var(--hairline-strong);
  background: var(--canvas); color: var(--ink); font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), transform 120ms var(--ease);
}
.btn:hover { background: var(--surface-elevated); }
.btn:active { transform: scale(0.97); }
.btn:disabled { color: var(--stone); border-color: var(--hairline); background: transparent; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: #000; }
.btn-primary:hover { background: var(--primary-pressed); }
.btn-ghost { background: var(--surface-elevated); }
.btn-ghost:hover { background: #17171a; }
.btn-danger { color: var(--danger); }
.btn-sm { height: 32px; padding: 0 var(--s-3); font-size: 13px; }

/* the bar on top */
.bar { position: sticky; top: 0; z-index: 2; background: var(--canvas); border-bottom: 1px solid var(--hairline); }
/* on the page's own grid: the wordmark stands over the content's left edge, the account over its right */
.bar-inner { display: flex; align-items: center; gap: var(--s-6); max-width: 1200px; height: 56px; margin: 0 auto; padding: 0 var(--s-6); }
.wordmark { display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); font-weight: 600; letter-spacing: -0.2px; text-decoration: none; }
.wordmark span { color: var(--mute); font-weight: 400; }
.nav { display: flex; gap: var(--s-1); }
.nav a {
  display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-md);
  color: var(--charcoal); font-weight: 500; text-decoration: none; transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-elevated); }
.who { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.who .name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }

.avatar { flex: none; width: 32px; height: 32px; border-radius: var(--r-full); background: var(--surface-elevated); object-fit: cover;
  outline: 1px solid rgba(255, 255, 255, 0.1); outline-offset: -1px; }
span.avatar { display: inline-grid; place-items: center; color: var(--mute); font-size: 12px; font-weight: 500; }
.avatar-sm { width: 24px; height: 24px; }
.avatar-lg { width: 48px; height: 48px; }

.page { max-width: 1200px; margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-12); }
.page-head { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-6); }
.page-head h1 { font-size: 24px; line-height: 1.25; letter-spacing: -0.4px; }
.page-head .count { color: var(--mute); font-variant-numeric: tabular-nums; }

/* filters */
.toolbar { display: flex; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.field { display: grid; gap: 6px; }
.field label { color: var(--charcoal); font-size: 12px; }
.input {
  width: 320px; max-width: 100%; height: 36px; padding: 0 var(--s-3); border-radius: var(--r-md);
  background: var(--surface-deep); border: 1px solid var(--hairline-strong); color: var(--ink); outline: none;
  transition: border-color 150ms var(--ease);
}
.input::placeholder { color: var(--ash); }
.input:focus { border-color: var(--ink); }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-md); background: var(--surface-card); border: 1px solid var(--hairline); }
.seg button {
  height: 28px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: transparent; color: var(--charcoal);
  font-weight: 500; font-size: 13px; cursor: pointer; transition: color 150ms var(--ease), background-color 150ms var(--ease);
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--surface-elevated); color: var(--ink); box-shadow: 0 0 0 1px var(--hairline-strong); }

/* the players table */
.table { width: 100%; border-collapse: collapse; }
.table th {
  height: 36px; padding: 0 var(--s-4); text-align: left; color: var(--ash); font-weight: 500; font-size: 12px;
  border-bottom: 1px solid var(--hairline-strong);
}
.table td { height: 56px; padding: 0 var(--s-4); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.table tbody tr { cursor: pointer; transition: background-color 120ms var(--ease); }
.table tbody tr:hover { background: var(--surface-card); }
.player { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.player-open {
  padding: 0; border: 0; background: none; color: var(--ink); font-weight: 500; text-align: left; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 280px;
}
.player-open:hover { text-decoration: underline; text-decoration-color: var(--stone); text-underline-offset: 3px; }
.date { color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--r-full);
  background: var(--surface-elevated); border: 1px solid var(--hairline); color: var(--body); font-size: 12px; white-space: nowrap;
}
.pill-admin { border-color: var(--hairline-strong); color: var(--ink); }
.none { color: var(--stone); }
.more { display: flex; justify-content: center; margin-top: var(--s-6); }

/* loading, empty, error */
.skeleton { display: block; height: 12px; border-radius: var(--r-xs); background: var(--surface-elevated); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.45; } }
.empty { padding: var(--s-12) var(--s-6); border: 1px dashed var(--hairline-strong); border-radius: var(--r-lg); text-align: center; display: grid; gap: var(--s-2); justify-items: center; }
.empty h2 { font-size: 16px; }
.empty p { color: var(--mute); max-width: 52ch; }
.empty .btn { margin-top: var(--s-2); }
.alert {
  display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-4);
  border-radius: var(--r-md); border: 1px solid rgba(255, 32, 71, 0.4); background: rgba(255, 32, 71, 0.06); color: var(--ink);
}
.alert .btn { margin-left: auto; }

/* the sign-in gate */
.gate {
  min-height: 100dvh; display: grid; place-items: center; padding: var(--s-6);
  background: radial-gradient(600px 320px at 50% 0%, var(--glow-green), transparent 70%), var(--canvas);
}
.gate-card { width: 100%; max-width: 380px; display: grid; gap: var(--s-4); }
.gate-card .wordmark { font-size: 20px; }
.gate-card p { color: var(--charcoal); }
.gate-card .btn { justify-self: start; }
.gate-error { color: var(--attention); }

/* the player's side sheet and confirmations: native dialogs */
dialog { padding: 0; border: 1px solid var(--hairline-strong); background: var(--surface-card); color: var(--body); }
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
.sheet {
  margin: 0 0 0 auto; width: 440px; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-width: 0 0 0 1px;
  border-radius: 0; overflow: auto;
}
.sheet[open] { animation: sheet-in 220ms var(--ease); }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } }
.sheet-inner { display: grid; gap: var(--s-8); padding: var(--s-6); }
.sheet-head { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: start; }
.sheet-head h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.3px; overflow-wrap: anywhere; }
.id-line { display: flex; align-items: center; gap: var(--s-2); margin-top: 2px; color: var(--mute); }
.copy { height: 24px; padding: 0 var(--s-2); border-radius: var(--r-sm); border: 1px solid var(--hairline); background: none; color: var(--charcoal); font-size: 12px; cursor: pointer; }
.copy:hover { color: var(--ink); border-color: var(--hairline-strong); }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-6); margin: 0; }
.facts dt { color: var(--ash); }
.facts dd { margin: 0; color: var(--body); font-variant-numeric: tabular-nums; }
.section h3 { font-size: 13px; color: var(--ash); font-weight: 500; margin-bottom: var(--s-3); }
.roles { display: grid; border: 1px solid var(--hairline-strong); border-radius: var(--r-lg); overflow: hidden; }
.role { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); align-items: center; padding: var(--s-4); }
.role + .role { border-top: 1px solid var(--hairline); }
.role-name { color: var(--ink); font-weight: 500; display: flex; align-items: center; gap: var(--s-2); }
.role-desc { color: var(--mute); font-size: 13px; grid-column: 1; }
.role .btn { grid-row: 1 / span 2; grid-column: 2; }
.role-note { grid-column: 1 / -1; color: var(--ash); font-size: 12px; }
.dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--success); }
.ledger { list-style: none; margin: 0; padding: 0; display: grid; }
.ledger li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.ledger li:last-child { border-bottom: 0; }
.ledger .what { color: var(--body); }
.ledger .what b { color: var(--ink); font-weight: 500; }
.ledger time { color: var(--ash); }
.inline-error { color: var(--danger); font-size: 13px; }

.confirm { width: min(420px, calc(100vw - 32px)); border-radius: var(--r-lg); }
.confirm[open] { animation: pop 180ms var(--ease); }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } }
.confirm-inner { display: grid; gap: var(--s-4); padding: var(--s-6); }
.confirm-inner h2 { font-size: 16px; line-height: 1.4; }
.confirm-inner p { color: var(--mute); }
.confirm-actions { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }

@media (max-width: 767px) {
  .bar-inner { gap: var(--s-3); padding: 0 var(--s-4); }
  .who .name { display: none; }
  .page { padding: var(--s-6) var(--s-4) var(--s-12); }
  .input { width: 100%; }
  .toolbar .field { flex: 1 1 100%; }
  .col-wide { display: none; }
  .table td { height: 60px; padding: 0 var(--s-2); }
  .table th { padding: 0 var(--s-2); }
  .btn { height: 44px; }
  .btn-sm { height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; }
  .btn:active { transform: none; }
}