/* Sunrise Staff Website — design tokens + component styles on top of
 * Tailwind (CDN). All colors flow through CSS variables so themes are a
 * single block of variable overrides — never scattered through JS/HTML.
 *
 * IMPORTANT: Minecraft item textures/icons must NEVER be touched by theme
 * variables. Anything under .inv-slot / .mc-item-icon is intentionally
 * theme-agnostic (see inventory.js) — no filter/grayscale/tint here, ever.
 */

:root {
  color-scheme: dark;

  /* ---- Sunrise (default) theme ---------------------------------------- */
  --background: #0b0f1a;
  --background-elevated: #0f1420;
  --surface: #12182a;
  --surface-secondary: #171f34;
  --surface-hover: #1e2a44;
  --text: #f4ede4;
  --text-muted: #9ca7bd;
  --text-faint: #6b7690;
  --border: #232c42;
  --border-strong: #33405e;
  --accent: #f5a623;
  --accent-2: #f3722c;
  --accent-hover: #ffb84d;
  --accent-text: #1c1005;
  --success: #34c77b;
  --success-bg: #123522;
  --success-text: #a8f0c6;
  --warning: #f5a623;
  --warning-bg: #3a2a0d;
  --warning-text: #ffd699;
  --danger: #e5484d;
  --danger-bg: #3a1418;
  --danger-text: #ffb3b8;
  --info: #4f9cf9;
  --info-bg: #132840;
  --info-text: #a9d1ff;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --focus-ring: 0 0 0 3px rgba(245, 166, 35, 0.35);
  --header-gradient: linear-gradient(135deg, #f5a623 0%, #f3722c 55%, #e5484d 100%);
  --logo-gradient: linear-gradient(135deg, #ffe37a 0%, #f5a623 45%, #f3722c 75%, #e5484d 100%);
  --scrollbar-track: #0b0f1a;
  --scrollbar-thumb: #2b3555;
  --scrollbar-thumb-hover: #3a4770;
}

/* ---- Modern Black & White theme ---------------------------------------- */
[data-theme='mono'] {
  color-scheme: dark;
  --background: #0a0a0a;
  --background-elevated: #101010;
  --surface: #141414;
  --surface-secondary: #1a1a1a;
  --surface-hover: #232323;
  --text: #f5f5f5;
  --text-muted: #9a9a9a;
  --text-faint: #6b6b6b;
  --border: #262626;
  --border-strong: #383838;
  --accent: #e8e8e8;
  --accent-2: #ffffff;
  --accent-hover: #ffffff;
  --accent-text: #101010;
  --success: #3fb871;
  --success-bg: #10231a;
  --success-text: #9fe6bc;
  --warning: #d8b64f;
  --warning-bg: #2a2312;
  --warning-text: #f0d998;
  --danger: #e05a5a;
  --danger-bg: #2a1414;
  --danger-text: #f5b6b6;
  --info: #7fa8d9;
  --info-bg: #141c26;
  --info-text: #bdd6f2;
  --shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.25);
  --header-gradient: linear-gradient(135deg, #3a3a3a 0%, #1a1a1a 100%);
  --logo-gradient: linear-gradient(135deg, #ffffff 0%, #cfcfcf 100%);
  --scrollbar-track: #0a0a0a;
  --scrollbar-thumb: #2b2b2b;
  --scrollbar-thumb-hover: #3a3a3a;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--background);
  color: var(--text);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ---- Primitives ---------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  box-shadow: var(--shadow-sm);
}

.surface-elevated { background: var(--background-elevated); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active:not(:disabled) { transform: translateY(1px); }

.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }

.btn-secondary { background: var(--surface-secondary); color: var(--text); border-color: var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-hover); }

.btn-danger { background: var(--danger-bg); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }

.btn-ghost { background: transparent; color: var(--text-muted); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-secondary); color: var(--text); }

.input, select.input, textarea.input {
  background: var(--background-elevated);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--text);
  font-size: 0.875rem;
  width: 100%;
}
.input::placeholder { color: var(--text-faint); }
.input:focus, select.input:focus, textarea.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}
.input:disabled { opacity: 0.55; cursor: not-allowed; }

label { color: var(--text-muted); }

/* ---- Navigation ------------------------------------------------------ */

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.9rem;
  border-radius: 0.5rem;
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-link:hover { background: var(--surface-secondary); color: var(--text); }
.nav-link.active { background: var(--accent); color: var(--accent-text); }
.nav-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- Badges ----------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.badge-green { background: var(--success-bg); color: var(--success-text); }
.badge-red { background: var(--danger-bg); color: var(--danger-text); }
.badge-amber { background: var(--warning-bg); color: var(--warning-text); }
.badge-slate { background: var(--surface-secondary); color: var(--text-muted); border: 1px solid var(--border); }
.badge-blue { background: var(--info-bg); color: var(--info-text); }

/* ---- Inventory (theme-agnostic textures) ------------------------------ */
/* CRITICAL: .inv-slot surrounding chrome uses theme tokens, but item icon
 * images (.mc-item-icon) must NEVER receive filter/grayscale/opacity tied to
 * theme — this is enforced by keeping icon styling completely separate from
 * any --accent/--surface variable. */

.inv-slot {
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--background-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  text-align: center;
  color: var(--text-muted);
  cursor: grab;
  position: relative;
  padding: 2px;
  user-select: none;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.inv-slot.drag-over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--background-elevated)); }
.inv-slot.has-item { background: var(--surface); border-color: var(--border-strong); }
.inv-slot .amount {
  position: absolute;
  bottom: 1px;
  right: 3px;
  font-size: 0.68rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9), -1px -1px 0 rgba(0, 0, 0, 0.9), 1px -1px 0 rgba(0, 0, 0, 0.9), -1px 1px 0 rgba(0, 0, 0, 0.9);
  pointer-events: none;
}
/* The actual Minecraft item texture image. Never apply filter/grayscale/
 * mix-blend-mode/opacity-by-theme to this class. Uses nearest-neighbor
 * scaling so 16x16 textures stay crisp/pixelated regardless of theme. */
.mc-item-icon {
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  pointer-events: none;
  filter: none !important;
}
.inv-slot-label {
  font-size: 0.55rem;
  line-height: 1.1;
  color: var(--text-faint);
  text-align: center;
}
.inv-slot-clear-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s ease;
}
.inv-slot:hover .inv-slot-clear-btn { opacity: 1; }

/* ---- Toasts ------------------------------------------------------------ */

.toast {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.toast-item {
  min-width: 260px;
  max-width: 380px;
  padding: 0.75rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.875rem;
  box-shadow: var(--shadow);
  animation: toastIn 0.2s ease-out;
  border: 1px solid transparent;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast-success { background: var(--success-bg); color: var(--success-text); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.toast-error { background: var(--danger-bg); color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.toast-info { background: var(--info-bg); color: var(--info-text); border-color: color-mix(in srgb, var(--info) 40%, transparent); }

/* ---- Modal -------------------------------------------------------------- */

/* Native/utility hidden state must always beat the modal's display:flex rule. */
#modal-overlay.hidden, #modal-overlay[hidden] { display: none !important; backdrop-filter: none !important; }
body.modal-open { overflow: hidden; }

.modal-backdrop, #modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 1rem;
  backdrop-filter: blur(2px);
}

.spinner {
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Tables -------------------------------------------------------------- */

table.data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.data-table th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  color: var(--text-faint);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--border);
}
table.data-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
table.data-table tr:hover td { background: var(--surface); }

.data-row {
  border-bottom: 1px solid var(--border);
}
.data-row:hover { background: var(--surface); }
.data-head {
  color: var(--text-faint);
  border-bottom: 1px solid var(--border);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
input[type='checkbox'] { accent-color: var(--accent); }

/* ---- Text / utility tokens (used instead of literal Tailwind colors) --- */

.text-heading { color: var(--text); }
.text-body { color: var(--text-muted); }
.text-subtle { color: var(--text-faint); }
.text-accent { color: var(--accent); }
.text-danger-token { color: var(--danger); }
.text-success-token { color: var(--success); }
.text-info-token { color: var(--info); }
.border-token { border-color: var(--border); }
.border-token-strong { border-color: var(--border-strong); }
.bg-surface { background: var(--surface); }
.bg-surface-secondary { background: var(--surface-secondary); }
.bg-surface-hover:hover { background: var(--surface-hover); }
.bg-elevated { background: var(--background-elevated); }
.divider { border-color: var(--border); }
.status-dot-online { background: var(--success); }

.logo-gradient-text {
  background: var(--logo-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-orb {
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%);
}

.text-hover-bright:hover { color: var(--text); }
.border-danger-soft { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.border-warning-soft { border-color: color-mix(in srgb, var(--warning) 45%, var(--border)); }
.inv-slot-clear-btn:hover { background: color-mix(in srgb, var(--danger) 80%, white 10%); }

a { color: inherit; }
a.link-accent { color: var(--accent); }
a.link-accent:hover { color: var(--accent-hover); }

/* Focus visibility for keyboard nav on plain interactive elements */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Skeleton loading shimmer, theme-aware */
.skeleton {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-hover) 37%, var(--surface) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 0.5rem;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ---- Premium workspace surfaces ---------------------------------------- */
.page-wrap { max-width: 1180px; padding: 2rem clamp(1rem, 3vw, 2.5rem) 3rem; }
.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; margin-bottom:1.75rem; }
.eyebrow { color:var(--accent); font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin-bottom:.45rem; }
.page-title { color:var(--text); font-size:clamp(1.6rem, 3vw, 2.2rem); font-weight:750; letter-spacing:-.03em; }
.page-description { color:var(--text-muted); margin-top:.45rem; max-width:38rem; font-size:.92rem; }
.theme-current-pill { display:flex; align-items:center; gap:.5rem; border:1px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:999px; padding:.5rem .75rem; font-size:.75rem; white-space:nowrap; }
.segmented-tabs { display:flex; gap:.3rem; border-bottom:1px solid var(--border); margin-bottom:1.5rem; }
.segment-tab { color:var(--text-muted); background:transparent; border:0; border-bottom:2px solid transparent; padding:.75rem 1rem; font-weight:650; cursor:pointer; }
.segment-tab:hover, .segment-tab.active { color:var(--text); border-bottom-color:var(--accent); }
.theme-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(245px,1fr)); gap:1rem; }
.theme-card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; overflow:hidden; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.theme-card:hover { transform:translateY(-2px); border-color:var(--border-strong); box-shadow:var(--shadow); }
.theme-card.active { border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent), var(--shadow-sm); }
.theme-preview { height:122px; padding:.8rem; background:var(--preview-bg); border-bottom:1px solid color-mix(in srgb,var(--preview-secondary) 18%,transparent); }
.preview-topline { display:flex; align-items:center; gap:.4rem; }
.preview-dot { width:7px; height:7px; border-radius:50%; background:var(--preview-accent); }
.preview-line { height:5px; width:55px; border-radius:99px; background:color-mix(in srgb,var(--preview-secondary) 35%,transparent); }
.preview-line.short { width:32px; }
.preview-layout { display:flex; gap:.65rem; height:84px; margin-top:.75rem; }
.preview-sidebar { width:28%; border-radius:.35rem; background:color-mix(in srgb,var(--preview-surface) 72%,var(--preview-secondary)); }
.preview-main { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; align-items:start; }
.preview-block { height:34px; border-radius:.35rem; background:var(--preview-surface); border:1px solid color-mix(in srgb,var(--preview-secondary) 25%,transparent); }
.preview-block.accent { background:var(--preview-accent); opacity:.82; }
.theme-card-body { padding:1rem; }
.theme-card-title, .section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.theme-card-title { justify-content:flex-start; align-items:center; }
.theme-card-title h2 { color:var(--text); font-size:.95rem; font-weight:700; }
.theme-icon { width:2rem; height:2rem; display:grid; place-items:center; border-radius:.6rem; color:var(--accent); background:var(--surface-secondary); }
.theme-description { min-height:2.6rem; margin:.65rem 0 1rem; font-size:.82rem; line-height:1.45; }
.theme-apply { width:100%; justify-content:center; }
.editor-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.8fr); gap:1rem; align-items:start; }
.editor-panel, .editor-preview { padding:1.25rem; }
.section-heading h2 { color:var(--text); font-size:1rem; font-weight:700; }
.section-heading p { font-size:.8rem; margin-top:.25rem; }
.palette-list { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.25rem 0; padding-bottom:1.1rem; border-bottom:1px solid var(--border); }
.palette-chip { display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--border); background:var(--surface-secondary); color:var(--text-muted); border-radius:999px; padding:.35rem .6rem; font-size:.72rem; cursor:pointer; }
.palette-chip:hover { color:var(--text); border-color:var(--accent); }
.palette-swatch { width:10px; height:10px; border-radius:50%; }
.color-groups { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem 1.5rem; }
.color-group h3 { color:var(--text-muted); font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.7rem; }
.color-field { margin-bottom:.7rem; }
.color-field label { display:block; font-size:.75rem; margin-bottom:.3rem; }
.color-control { display:flex; align-items:center; gap:.45rem; }
.color-picker { width:2.15rem; height:2.15rem; padding:.15rem; border:1px solid var(--border); border-radius:.45rem; background:var(--surface); cursor:pointer; }
.color-hex { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem !important; }
.editor-preview { position:sticky; top:5rem; }
.editor-preview .theme-preview { margin-top:1rem; border-radius:.65rem; }
.preview-demo { display:grid; gap:.65rem; margin-top:1rem; }
.demo-stat, .demo-status { display:flex; justify-content:space-between; align-items:center; border:1px solid var(--border); background:var(--surface-secondary); border-radius:.65rem; padding:.75rem; color:var(--text-muted); font-size:.78rem; }
.demo-stat strong { color:var(--text); font-size:1.2rem; }
.demo-status { justify-content:flex-start; gap:.45rem; }
@media (max-width: 760px) { .page-header { flex-direction:column; } .theme-current-pill { align-self:flex-start; } .editor-layout { grid-template-columns:1fr; } .editor-preview { position:static; } .color-groups { grid-template-columns:1fr; } }

/* ---- Public product homepage ------------------------------------------- */
.public-site { min-height:100vh; overflow:hidden; background:var(--background); color:var(--text); }
.public-header { position:relative; z-index:20; max-width:1240px; margin:0 auto; padding:1.15rem clamp(1rem,4vw,2.5rem); }
.public-nav { display:flex; align-items:center; gap:2rem; min-height:3rem; }
.sunrise-logo { display:inline-flex; align-items:center; gap:.6rem; color:var(--text); font-size:.95rem; font-weight:850; letter-spacing:.18em; text-decoration:none; }
.sunrise-logo-mark { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; color:var(--accent-text); background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 26%,transparent); }
.public-nav-links { display:flex; align-items:center; gap:1.5rem; margin-left:auto; }
.public-nav-link { color:var(--text-muted); font-size:.8rem; text-decoration:none; transition:color .18s ease; }
.public-nav-link:hover { color:var(--text); }
.public-nav-actions { display:flex; align-items:center; gap:1rem; }
.public-theme-control { position:relative; display:flex; align-items:center; color:var(--text-muted); font-size:.78rem; }
.public-theme-trigger { display:flex; align-items:center; gap:.55rem; min-width:9.7rem; border:1px solid var(--border); border-radius:999px; background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--text); padding:.48rem .7rem; font:inherit; cursor:pointer; box-shadow:0 8px 24px color-mix(in srgb, var(--background) 18%, transparent); transition:border-color .18s ease, transform .18s ease, background .18s ease; }
.public-theme-trigger:hover, .public-theme-control.is-open .public-theme-trigger { border-color:var(--accent); background:var(--surface); transform:translateY(-1px); }
.public-theme-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.public-theme-trigger-label { flex:1; text-align:left; font-weight:700; white-space:nowrap; }
.public-theme-trigger-swatch, .public-theme-option-swatch { display:inline-block; flex:none; width:1.15rem; height:1.15rem; border:2px solid color-mix(in srgb, var(--surface) 72%, var(--text)); border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.public-theme-trigger-chevron { color:var(--text-faint); font-size:.65rem; transition:transform .18s ease; }
.public-theme-control.is-open .public-theme-trigger-chevron { transform:rotate(180deg); }
.public-theme-menu { position:absolute; top:calc(100% + .7rem); right:0; z-index:40; display:grid; gap:.25rem; width:18.5rem; padding:.5rem; border:1px solid var(--border); border-radius:1.15rem; background:color-mix(in srgb, var(--surface) 94%, var(--background)); box-shadow:0 20px 55px color-mix(in srgb, var(--background) 46%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent); opacity:0; pointer-events:none; transform:translateY(-.35rem) scale(.98); transform-origin:top right; transition:opacity .16s ease, transform .16s ease; backdrop-filter:blur(18px); }
.public-theme-control.is-open .public-theme-menu { opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
.public-theme-option { display:flex; align-items:center; gap:.7rem; width:100%; padding:.62rem .65rem; border:0; border-radius:.8rem; background:transparent; color:var(--text); text-align:left; cursor:pointer; transition:background .16s ease, transform .16s ease; }
.public-theme-option:hover, .public-theme-option:focus-visible { background:var(--surface-hover); transform:translateX(2px); outline:none; }
.public-theme-option-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:.12rem; }
.public-theme-option-copy strong { font-size:.76rem; font-weight:800; }
.public-theme-option-copy small { overflow:hidden; color:var(--text-faint); font-size:.65rem; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; }
.public-theme-option-check { display:none; color:var(--accent); font-size:.75rem; }
.public-theme-control:not(.is-open) .public-theme-option[aria-current='true'] .public-theme-option-check, .public-theme-option[aria-current='true'] .public-theme-option-check { display:block; }
.public-nav-setup { color:var(--accent); font-size:.78rem; font-weight:700; text-decoration:none; }
.public-nav-cta { padding:.55rem .9rem; font-size:.78rem; }
.public-menu-button { display:none; border:0; background:transparent; color:var(--text); font-size:1.1rem; }
.section-container { width:min(1160px, calc(100% - 2rem)); margin-inline:auto; }
.public-hero { position:relative; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,6vw,5rem); align-items:center; padding-top:clamp(4.5rem,9vw,8rem); padding-bottom:clamp(4rem,9vw,8rem); }
.public-hero::before { content:''; position:absolute; z-index:0; width:40rem; height:40rem; left:-18rem; top:0; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 16%,transparent),transparent 67%); pointer-events:none; }
.hero-copy, .hero-product-wrap { position:relative; z-index:1; }
.hero-eyebrow, .section-eyebrow { display:flex; align-items:center; gap:.5rem; color:var(--accent); font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.eyebrow-pulse { width:.45rem; height:.45rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 .3rem color-mix(in srgb,var(--accent) 18%,transparent); }
.hero-copy h1 { max-width:600px; margin:1.15rem 0 1.25rem; color:var(--text); font-size:clamp(2.7rem,6vw,5.5rem); font-weight:780; line-height:1.01; letter-spacing:-.065em; }
.hero-gradient-text { background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-lede { max-width:560px; color:var(--text-muted); font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.7; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem; }
.hero-main-cta { padding:.78rem 1.1rem; }
.hero-secondary-cta { padding:.78rem 1.1rem; }
.hero-setup-note { margin-top:1rem; color:var(--text-faint); font-size:.78rem; }
.hero-setup-note i { color:var(--accent); margin-right:.3rem; }
.hero-trust-row { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.1rem; color:var(--text-faint); font-size:.68rem; }
.hero-trust-row i { color:var(--success); margin-right:.3rem; }
.hero-product-wrap { min-height:470px; display:flex; align-items:center; justify-content:center; }
.hero-glow { position:absolute; inset:9% 5% 4%; border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--accent) 25%,transparent),transparent 68%); filter:blur(16px); opacity:.8; }
.product-preview { position:relative; z-index:2; display:flex; width:min(100%,590px); min-height:360px; transform:perspective(1300px) rotateY(-7deg) rotateX(3deg); overflow:hidden; background:color-mix(in srgb,var(--surface) 88%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius:1rem; box-shadow:0 28px 70px color-mix(in srgb,var(--background) 55%,transparent), 0 0 0 8px color-mix(in srgb,var(--accent) 4%,transparent); }
.product-sidebar { width:112px; flex:0 0 112px; padding:.9rem .6rem; background:color-mix(in srgb,var(--surface-secondary) 72%,var(--background)); border-right:1px solid var(--border); }
.product-mini-logo { display:grid; place-items:center; width:1.8rem; height:1.8rem; margin:0 .35rem 1.3rem; color:var(--accent-text); background:var(--accent); border-radius:.5rem; font-size:.75rem; }
.product-side-item { display:flex; align-items:center; gap:.4rem; padding:.45rem .35rem; margin:.25rem 0; color:var(--text-faint); font-size:.58rem; border-radius:.4rem; }
.product-side-item i { width:.8rem; text-align:center; }
.product-side-item.selected { color:var(--accent-text); background:var(--accent); }
.product-canvas { flex:1; padding:1rem; background:var(--background-elevated); }
.product-toolbar, .product-panel-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.product-kicker { display:block; color:var(--text-faint); font-size:.45rem; letter-spacing:.11em; }
.product-toolbar strong { display:block; margin-top:.25rem; color:var(--text); font-size:.8rem; }
.product-avatar { display:grid; place-items:center; width:1.55rem; height:1.55rem; color:var(--accent-text); background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-radius:50%; font-size:.6rem; font-weight:800; }
.product-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:1.1rem; }
.product-stat { position:relative; padding:.65rem; background:var(--surface); border:1px solid var(--border); border-radius:.55rem; }
.product-stat-icon { color:var(--accent); font-size:.55rem; }
.product-stat strong, .product-stat small { display:block; }
.product-stat strong { margin-top:.4rem; color:var(--text); font-size:1rem; }
.product-stat small { margin-top:.1rem; color:var(--text-faint); font-size:.48rem; }
.product-lower-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:.55rem; margin-top:.55rem; }
.product-panel { padding:.7rem; background:var(--surface); border:1px solid var(--border); border-radius:.55rem; }
.product-panel-head { margin-bottom:.5rem; color:var(--text-muted); font-size:.58rem; }
.product-panel-head span { color:var(--accent); font-size:.48rem; }
.product-player-row, .product-activity-row { display:flex; align-items:center; gap:.45rem; padding:.45rem 0; border-top:1px solid var(--border); color:var(--text-muted); font-size:.54rem; }
.product-player-row small { margin-left:auto; color:var(--text-faint); font-size:.44rem; }
.product-player-dot { width:.35rem; height:.35rem; border-radius:50%; background:var(--success); }
.product-activity-icon, .floating-icon { display:grid; place-items:center; width:1.25rem; height:1.25rem; border-radius:.4rem; color:var(--accent); background:var(--surface-secondary); font-size:.5rem; }
.product-activity-row b, .product-activity-row small { display:block; }
.product-activity-row b { color:var(--text-muted); font-size:.5rem; font-weight:600; }
.product-activity-row small { color:var(--text-faint); font-size:.42rem; }
.floating-product-card { position:absolute; z-index:3; display:flex; align-items:center; gap:.5rem; min-width:145px; padding:.55rem .65rem; background:color-mix(in srgb,var(--surface) 92%,transparent); border:1px solid var(--border); border-radius:.7rem; box-shadow:var(--shadow); animation:public-float 6s ease-in-out infinite; }
.floating-product-card b, .floating-product-card small { display:block; }
.floating-product-card b { color:var(--text); font-size:.58rem; }
.floating-product-card small { margin-top:.15rem; color:var(--text-faint); font-size:.48rem; }
.floating-card-one { top:13%; right:-2%; }
.floating-card-two { bottom:9%; left:-4%; animation-delay:-2.5s; }
.floating-icon.green { color:var(--success); background:color-mix(in srgb,var(--success) 14%,var(--surface)); }
.floating-icon.orange { color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,var(--surface)); }
@keyframes public-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
.public-stat-strip { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; color:var(--text-faint); border-top:1px solid var(--border); border-bottom:1px solid var(--border); font-size:.68rem; letter-spacing:.04em; }
.public-stat-strip strong { color:var(--text-muted); font-size:.75rem; letter-spacing:0; }
.public-section { padding-top:clamp(5rem,10vw,8rem); }
.section-intro { max-width:670px; margin-bottom:2rem; }
.section-intro.compact { margin-bottom:2.6rem; }
.section-intro h2, .story-copy h2, .public-cta h2 { margin:.7rem 0 .8rem; color:var(--text); font-size:clamp(2rem,4vw,3.3rem); font-weight:750; line-height:1.06; letter-spacing:-.05em; }
.section-intro p, .story-copy p, .public-cta p { color:var(--text-muted); font-size:.98rem; line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.feature-card { position:relative; min-height:220px; padding:1.3rem; background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--surface-secondary) 55%,var(--surface))); border:1px solid var(--border); border-radius:.85rem; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.feature-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); box-shadow:var(--shadow); }
.feature-icon { display:grid; place-items:center; width:2.3rem; height:2.3rem; color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,var(--surface)); border-radius:.65rem; }
.feature-tag { display:block; margin-top:1.2rem; color:var(--text-faint); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.feature-card h3 { margin:.45rem 0 .4rem; color:var(--text); font-size:1rem; }
.feature-card p { max-width:260px; color:var(--text-muted); font-size:.8rem; line-height:1.5; }
.feature-arrow { position:absolute; right:1.2rem; bottom:1.2rem; color:var(--text-faint); font-size:.75rem; }
.workflow-section { padding-bottom:1rem; background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--surface) 55%,transparent),transparent); }
.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.workflow-step { position:relative; padding:1.25rem 1rem 1rem 0; }
.workflow-number { color:var(--accent); font-family:ui-monospace,SFMono-Regular,monospace; font-size:.78rem; font-weight:800; }
.workflow-line { width:100%; height:1px; margin:1rem 0 1.2rem; background:linear-gradient(90deg,var(--accent),var(--border)); }
.workflow-step h3 { color:var(--text); font-size:1rem; }
.workflow-step p { margin-top:.45rem; color:var(--text-muted); font-size:.8rem; line-height:1.55; }
.product-story { display:grid; grid-template-columns:1fr .8fr; gap:clamp(2rem,8vw,8rem); align-items:center; }
.story-points { display:grid; gap:.75rem; margin-top:1.5rem; color:var(--text-muted); font-size:.85rem; }
.story-points span { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; margin-right:.55rem; color:var(--success); background:color-mix(in srgb,var(--success) 12%,var(--surface)); border-radius:50%; font-size:.55rem; }
.story-metric-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:310px; overflow:hidden; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 45%),var(--surface); border:1px solid var(--border); border-radius:1rem; box-shadow:var(--shadow); }
.metric-orbit { position:absolute; border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); border-radius:50%; transform:rotate(-18deg); }
.metric-orbit-one { width:230px; height:105px; }
.metric-orbit-two { width:280px; height:150px; transform:rotate(52deg); }
.metric-label { color:var(--accent); font-size:.6rem; font-weight:800; letter-spacing:.14em; }
.story-metric-card strong { z-index:1; margin:.25rem 0; color:var(--text); font-size:5rem; font-weight:750; letter-spacing:-.1em; }
.story-metric-card p { z-index:1; color:var(--text-muted); font-size:.8rem; }
.metric-bottom { position:absolute; right:1.2rem; bottom:1rem; left:1.2rem; display:flex; justify-content:space-between; color:var(--text-faint); font-size:.65rem; }
.public-cta { position:relative; margin-top:clamp(5rem,10vw,8rem); margin-bottom:5rem; padding:clamp(3rem,7vw,5rem); overflow:hidden; text-align:center; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),color-mix(in srgb,var(--accent-2) 10%,var(--surface))); border:1px solid color-mix(in srgb,var(--accent) 32%,var(--border)); border-radius:1.2rem; }
.public-cta .section-eyebrow { justify-content:center; }
.public-cta h2 { position:relative; z-index:1; max-width:650px; margin-inline:auto; }
.public-cta p { position:relative; z-index:1; max-width:520px; margin-inline:auto; }
.cta-actions { position:relative; z-index:1; justify-content:center; }
.cta-spark { position:absolute; width:20rem; height:20rem; top:-10rem; right:-5rem; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 28%,transparent),transparent 68%); }
.public-footer { border-top:1px solid var(--border); }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.6rem 0; }
.footer-links { display:flex; gap:1.2rem; }
.footer-links a { font-size:.72rem; }
.footer-copy { color:var(--text-faint); font-size:.65rem; }

/* ---- Authentication ---------------------------------------------------- */
.auth-page { position:relative; display:grid; min-height:100vh; place-items:center; overflow:hidden; padding:2rem 1rem; background:radial-gradient(circle at 50% -10%, color-mix(in srgb,var(--accent) 15%,transparent), transparent 42%), var(--background); }
.auth-frame { position:relative; z-index:1; display:flex; width:min(100%, 440px); flex-direction:column; align-items:center; }
.auth-brand { display:inline-flex; align-items:center; gap:.65rem; margin-bottom:1.5rem; color:var(--text); font-size:1rem; font-weight:800; letter-spacing:.16em; }
.auth-brand:hover { color:var(--text); }
.auth-brand-mark { display:grid; width:2.4rem; height:2.4rem; place-items:center; color:var(--accent-text); background:var(--header-gradient); border-radius:.75rem; box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 22%,transparent); }
.auth-card { width:100%; padding:clamp(1.5rem,5vw,2.25rem); background:color-mix(in srgb,var(--surface) 94%,transparent); border:1px solid var(--border); border-radius:1.15rem; box-shadow:var(--shadow); backdrop-filter:blur(18px); }
.auth-card-kicker { display:flex; align-items:center; gap:.45rem; margin-bottom:1rem; color:var(--accent); font-size:.63rem; font-weight:800; letter-spacing:.13em; }
.auth-kicker-dot { width:.45rem; height:.45rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent); }
.auth-title { margin:0; color:var(--text); font-size:clamp(1.7rem,5vw,2.15rem); font-weight:750; letter-spacing:-.04em; line-height:1.1; }
.auth-description { margin:.7rem 0 1.5rem; color:var(--text-muted); font-size:.88rem; line-height:1.55; }
.auth-card form { display:grid; gap:.85rem; }
.auth-card form > div { display:grid; gap:.35rem; }
.auth-card label { color:var(--text-muted); font-size:.72rem; font-weight:650; }
.auth-card .input { min-height:2.85rem; }
.auth-submit { display:flex; width:100%; min-height:2.85rem; align-items:center; justify-content:space-between; margin-top:.35rem; padding-inline:1rem; }
.auth-submit i { font-size:.75rem; transition:transform .15s ease; }
.auth-submit:hover i { transform:translateX(3px); }
.auth-error { min-height:1.25rem; margin-bottom:.45rem; color:var(--danger); font-size:.78rem; line-height:1.4; }
.auth-starter-note { display:flex; align-items:flex-start; gap:.7rem; margin:1rem 0 1.2rem; padding:.8rem .9rem; color:var(--warning-text); background:var(--warning-bg); border:1px solid color-mix(in srgb,var(--warning) 30%,var(--border)); border-radius:.7rem; font-size:.72rem; line-height:1.45; }
.auth-starter-note i { margin-top:.15rem; color:var(--warning); }
.auth-starter-note strong, .auth-starter-note span { display:block; }
.auth-starter-note strong { margin-bottom:.1rem; color:var(--text); }
.auth-switch { display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; margin-top:1.25rem; color:var(--text-faint); font-size:.75rem; text-align:center; }
.auth-switch a { font-weight:700; }
.auth-footer { display:flex; align-items:center; justify-content:center; gap:.4rem; margin-top:1.25rem; color:var(--text-faint); font-size:.66rem; text-align:center; }
.auth-footer i { color:var(--success); }
.auth-orb { position:absolute; width:22rem; height:22rem; border-radius:50%; filter:blur(2px); opacity:.2; pointer-events:none; }
.auth-orb-one { top:-13rem; right:-7rem; background:radial-gradient(circle,var(--accent),transparent 68%); }
.auth-orb-two { bottom:-15rem; left:-8rem; background:radial-gradient(circle,var(--accent-2),transparent 68%); }

/* ---- Settings ---------------------------------------------------------- */
.settings-page { max-width:900px; }
.settings-theme-link { white-space:nowrap; }
.settings-security-card { max-width:620px; padding:1.5rem; }
.settings-card-heading { display:flex; align-items:flex-start; gap:.85rem; margin-bottom:1.25rem; }
.settings-card-icon { display:grid; width:2.45rem; height:2.45rem; flex:0 0 auto; place-items:center; color:var(--accent-text); background:var(--accent); border-radius:.7rem; }
.settings-card-heading h2 { margin:0; color:var(--text); font-size:1rem; }
.settings-card-heading p { margin:.3rem 0 0; color:var(--text-muted); font-size:.78rem; line-height:1.5; }
.settings-security-card > div:not(.settings-card-heading) { display:grid; gap:.35rem; margin-bottom:.85rem; }
.settings-security-card label { font-size:.72rem; font-weight:650; }
.settings-security-card .input { min-height:2.7rem; }
.settings-error { margin-bottom:.7rem !important; }
.settings-submit { min-height:2.75rem; }

@media (max-width: 640px) { .auth-page { padding:1rem .75rem; } .auth-card { padding:1.35rem; } .auth-footer { max-width:280px; line-height:1.45; } .settings-page .page-header { align-items:flex-start; flex-direction:column; } .settings-theme-link { width:100%; justify-content:center; } .settings-security-card { padding:1.1rem; } }

.auth-switch { display:flex; justify-content:center; gap:.35rem; margin-top:1.25rem; color:var(--text-faint); font-size:.75rem; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
@media (max-width: 900px) { .public-hero { grid-template-columns:1fr; padding-top:4rem; } .hero-copy { max-width:700px; margin:auto; text-align:center; } .hero-eyebrow, .hero-trust-row { justify-content:center; } .hero-actions { justify-content:center; } .hero-lede { margin-inline:auto; } .hero-product-wrap { min-height:420px; margin-top:1rem; } .feature-grid { grid-template-columns:repeat(2,1fr); } .product-story { grid-template-columns:1fr; } .story-metric-card { max-width:520px; width:100%; margin:auto; } }
@media (max-width: 640px) { .public-header { padding-top:.8rem; } .public-nav { flex-wrap:wrap; justify-content:space-between; } .public-nav-links, .public-nav-actions { display:none; width:100%; } .public-nav.is-open .public-nav-links, .public-nav.is-open .public-nav-actions { display:flex; } .public-nav.is-open .public-nav-links { flex-direction:column; align-items:flex-start; gap:.8rem; padding:.8rem 0; } .public-nav.is-open .public-nav-actions { justify-content:flex-start; padding-bottom:.5rem; } .public-menu-button { display:block; margin-left:auto; } .public-stat-strip { flex-wrap:wrap; justify-content:flex-start; } .public-stat-strip > span { width:100%; } .feature-grid, .workflow-grid { grid-template-columns:1fr; } .product-preview { transform:none; min-height:300px; } .product-sidebar { width:70px; flex-basis:70px; } .product-side-item { justify-content:center; font-size:0; } .product-side-item i { font-size:.6rem; } .product-stat-grid { gap:.25rem; } .product-stat { padding:.45rem; } .product-stat strong { font-size:.8rem; } .product-lower-grid { grid-template-columns:1fr; } .activity-panel { display:none; } .floating-card-one { right:-3%; top:4%; } .floating-card-two { left:-3%; bottom:3%; } .footer-inner { align-items:flex-start; flex-direction:column; } .footer-copy { order:3; } }

/* Staff chat and presence */
.staff-chat-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:1rem; align-items:start; }
.staff-chat-card { min-width:0; overflow:hidden; }
.staff-chat-messages { display:flex; flex-direction:column; gap:.7rem; min-height:420px; max-height:62vh; overflow:auto; padding:1rem; background:color-mix(in srgb,var(--background-elevated) 60%,var(--surface)); }
.staff-chat-message { max-width:min(85%, 720px); padding:.7rem .85rem; background:var(--surface-secondary); border:1px solid var(--border); border-radius:.8rem .8rem .8rem .2rem; }
.staff-chat-message.is-mine { align-self:flex-end; background:color-mix(in srgb,var(--accent) 13%,var(--surface)); border-color:color-mix(in srgb,var(--accent) 35%,var(--border)); border-radius:.8rem .8rem .2rem .8rem; }
.staff-chat-message-meta { display:flex; align-items:center; gap:.6rem; margin-bottom:.3rem; color:var(--text-muted); font-size:.72rem; }
.staff-chat-message-meta time { color:var(--text-faint); font-size:.65rem; }
.staff-chat-message p { margin:0; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.staff-chat-attachment { display:inline-flex; gap:.4rem; align-items:center; margin-top:.55rem; color:var(--accent); font-size:.75rem; overflow-wrap:anywhere; }
.staff-chat-empty { margin:auto; color:var(--text-faint); font-size:.85rem; }
.staff-chat-composer { display:flex; gap:.65rem; align-items:flex-end; padding:.8rem; border-top:1px solid var(--border); }
.staff-chat-compose-main { flex:1; min-width:0; }
.staff-chat-input { resize:vertical; min-height:2.8rem; }
.staff-chat-attachment-row { display:flex; align-items:center; gap:.6rem; margin-top:.5rem; min-width:0; }
.staff-chat-attachment-row label { cursor:pointer; }
.staff-chat-file-name { color:var(--text-faint); font-size:.72rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.staff-presence { padding:1rem; position:sticky; top:5rem; }
.staff-presence-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:.7rem; color:var(--text); }
.staff-presence-row { display:flex; align-items:center; gap:.5rem; padding:.55rem 0; border-top:1px solid var(--border); }
.staff-presence-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:.82rem; }
.staff-presence-status { color:var(--text-faint); font-size:.62rem; font-weight:700; }
.status-dot { width:.5rem; height:.5rem; flex:none; border-radius:50%; }
.status-dot-afk { background:var(--warning); }.status-dot-offline { background:var(--text-faint); }
.settings-presence-card { max-width:620px; padding:1.5rem; margin-bottom:1rem; }
.settings-presence-actions { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.75rem; flex-wrap:wrap; }
.kit-details { padding:.65rem; background:var(--background-elevated); border:1px solid var(--border); border-radius:.5rem; line-height:1.55; overflow-wrap:anywhere; }
@media (max-width: 800px) { .staff-chat-layout { grid-template-columns:1fr; } .staff-presence { position:static; } }
@media (max-width: 560px) { .staff-chat-composer { flex-direction:column; align-items:stretch; } .staff-chat-composer > .btn { justify-content:center; } .staff-chat-message { max-width:94%; } }

/* ---- App shell refresh: calm, modern operations workspace ---------------- */
:root {
  --surface-glass: color-mix(in srgb, var(--surface) 82%, transparent);
  --radius-lg: 1rem;
  --radius-md: .72rem;
}
body { background-image: radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 32rem), radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 28rem); }
.app-shell { min-height:100vh; background:transparent; }
.app-sidebar { width:248px; padding:1rem .75rem .75rem; background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(20px); box-shadow:12px 0 40px rgba(0,0,0,.12); z-index:30; }
.app-sidebar > div:first-child { margin:.25rem .25rem 1.5rem; padding:0 .6rem; }
.app-sidebar .nav-link { position:relative; min-height:2.65rem; margin:.18rem 0; border:1px solid transparent; }
.app-sidebar .nav-link.active { box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 16%, transparent); }
.app-sidebar .nav-link.active::before { content:''; position:absolute; left:-.75rem; width:3px; height:1.3rem; border-radius:0 4px 4px 0; background:var(--accent); }
.app-topbar { height:68px; background:color-mix(in srgb, var(--background) 76%, transparent); backdrop-filter:blur(18px); }
.topbar-leading { display:flex; align-items:center; gap:.75rem; }
.connection-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .65rem; border:1px solid color-mix(in srgb, var(--success) 25%, var(--border)); border-radius:999px; color:var(--success-text); background:color-mix(in srgb, var(--success) 8%, transparent); font-size:.68rem; font-weight:700; }
.connection-pill .status-dot-online, .theme-current-pill .status-dot-online, .demo-status .status-dot-online { width:.42rem; height:.42rem; border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent); }
.mobile-menu-button, .sidebar-backdrop { display:none; }
#page-outlet { min-width:0; }
#page-outlet > * { animation:pageEnter .36s cubic-bezier(.2,.75,.25,1) both; }
@keyframes pageEnter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.page-wrap { width:min(1240px,100%); margin:0 auto; padding-top:2.35rem; }
.card { border-radius:var(--radius-lg); background:linear-gradient(145deg, color-mix(in srgb,var(--surface) 95%,transparent), color-mix(in srgb,var(--surface-secondary) 36%,var(--surface))); border-color:color-mix(in srgb,var(--border) 88%,transparent); box-shadow:0 10px 35px rgba(0,0,0,.14); }
.card:hover { border-color:color-mix(in srgb,var(--border-strong) 72%,var(--border)); }
.btn { min-height:2.55rem; border-radius:.68rem; box-shadow:0 4px 12px rgba(0,0,0,.1); }
.btn-primary { box-shadow:0 8px 20px color-mix(in srgb,var(--accent) 18%, transparent); }
.input { min-height:2.55rem; border-radius:.68rem; background:color-mix(in srgb,var(--background-elevated) 92%, transparent); }
.loading-state, .empty-state, .error-state { display:flex; align-items:center; justify-content:center; gap:.75rem; min-height:12rem; padding:2rem; color:var(--text-muted); text-align:center; }
.error-state { justify-content:flex-start; text-align:left; color:var(--danger-text); }
.error-state > i { color:var(--danger); font-size:1.35rem; }
.error-state p { margin:.3rem 0 .8rem; color:var(--text-muted); font-size:.85rem; }
.page-transitioning { min-height:16rem; }
.data-row, table.data-table tr, .staff-chat-message, .theme-card, .feature-card { transition:transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease; }
.data-row:hover { transform:translateX(2px); }
@media (max-width: 760px) {
  .app-sidebar { position:fixed; inset:0 auto 0 0; width:min(280px,86vw); transform:translateX(-105%); transition:transform .25s ease; box-shadow:25px 0 70px rgba(0,0,0,.4); }
  #app.nav-open .app-sidebar { transform:translateX(0); }
  .sidebar-backdrop { position:fixed; inset:0; z-index:20; border:0; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); }
  #app.nav-open .sidebar-backdrop { display:block; }
  .app-topbar { padding-inline:1rem; }
  .mobile-menu-button { display:grid; place-items:center; width:2.35rem; height:2.35rem; border:1px solid var(--border); border-radius:.65rem; color:var(--text); background:var(--surface); }
  .topbar-user > span:last-child { display:none; }
  .connection-pill { display:none; }
  .page-wrap { padding-top:1.35rem; }
}
@media (prefers-reduced-motion: reduce) { #page-outlet > * { animation:none; } }

/* ========================================================================== */
/* Workspace pages — full product surface, not utility-class leftovers      */
/* ========================================================================== */
.page-section { max-width: 1400px; padding: clamp(1.35rem, 3vw, 2.8rem) clamp(1.1rem, 3vw, 2.8rem) 4rem; }
.page-section > * + * { margin-top: 1.15rem; }
.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; padding:.3rem 0 .6rem; }
.page-header h1, .page-section h1 { margin:0; color:var(--text); font-size:clamp(1.7rem,3vw,2.55rem); font-weight:780; letter-spacing:-.055em; line-height:1.05; }
.page-header p, .page-section > div > p { color:var(--text-muted); font-size:.82rem; line-height:1.6; }
.page-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding:.7rem; border:1px solid var(--border); border-radius:.85rem; background:rgba(17,20,27,.7); }
.page-toolbar .input { width:auto; min-width:180px; flex:1 1 180px; }
.page-toolbar .btn { flex:none; }
.data-table-card { overflow-x:auto; border-radius:1rem; }
.data-table-card > div { min-width:680px; }
.data-table-card > div:first-child { padding-top:.9rem; padding-bottom:.9rem; color:#687384; background:rgba(255,255,255,.018); font-size:.61rem; letter-spacing:.1em; text-transform:uppercase; }
.data-table-card > div:not(:first-child) { min-height:3.5rem; border-color:#1f2530; }
.data-table-card > div:not(:first-child):hover { background:rgba(200,240,90,.045); }
.page-control-card { background:linear-gradient(135deg,rgba(200,240,90,.08),rgba(17,20,27,.92) 42%); border-color:rgba(200,240,90,.18); }
.page-control-card::before { content:''; display:block; width:2.8rem; height:.2rem; margin-bottom:.8rem; border-radius:2rem; background:var(--accent); }
.players-page .card, .activity-page .card, .audit-page .card, .staff-page .card { box-shadow:0 18px 50px rgba(0,0,0,.18); }
.players-page .page-header::after { content:'LIVE DIRECTORY'; align-self:center; padding:.35rem .55rem; border:1px solid rgba(99,230,160,.2); border-radius:999px; color:var(--success-text); background:rgba(99,230,160,.06); font-size:.58rem; font-weight:800; letter-spacing:.12em; }
.player-detail-page > a { display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .65rem; border:1px solid var(--border); border-radius:.58rem; color:var(--text-muted); background:var(--surface-secondary); font-size:.68rem; text-decoration:none; }
.player-detail-page > a:hover { color:var(--text); border-color:var(--border-strong); transform:translateX(-2px); }
.player-detail-page .card { box-shadow:0 18px 52px rgba(0,0,0,.2); }
.player-detail-page .card h1 { font-size:clamp(1.55rem,3vw,2.35rem); letter-spacing:-.05em; }
.player-detail-page .segmented-control { padding:.25rem; border:1px solid var(--border); border-radius:.7rem; background:var(--background-elevated); }
.player-detail-page .segmented-option { border-radius:.48rem; color:var(--text-muted); }
.player-detail-page .segmented-option.is-active { color:var(--accent-text); background:var(--accent); }
.inventory-page .minecraft-grid { gap:.45rem !important; padding:.7rem; border:1px solid var(--border); border-radius:.8rem; background:#0a0c11; }
.inventory-page .inv-slot { width:clamp(38px,5vw,58px); height:clamp(38px,5vw,58px); border-radius:.55rem; background:#11151d; }
.inventory-page .inv-slot:hover { border-color:var(--accent); box-shadow:0 0 0 3px rgba(200,240,90,.08); transform:translateY(-2px); }
.kits-page .card { box-shadow:0 18px 52px rgba(0,0,0,.18); }
.kits-page .grid > .card { display:flex; flex-direction:column; min-height:230px; }
.kits-page .grid > .card > :last-child { margin-top:auto; }
.staff-page .data-table-card { margin-bottom:.4rem; }
.staff-page .data-table-card > div:not(:first-child) { min-height:4.25rem; }
.staff-page .data-table-card + .card, .staff-page > .card:last-child { border-color:rgba(242,189,91,.22); background:linear-gradient(135deg,rgba(242,189,91,.07),rgba(17,20,27,.95)); }
.public-admin-page > div { padding:1.1rem; border:1px solid var(--border); border-radius:1rem; background:rgba(17,20,27,.68); }
.public-admin-page > div > .card { border:0; padding:0; background:transparent; box-shadow:none; }
.public-admin-page .input { min-height:2.75rem; }
.staff-chat-page .page-header { padding-bottom:1rem; }
.staff-chat-page .staff-chat-card { box-shadow:0 24px 70px rgba(0,0,0,.25); }
.staff-chat-page .staff-chat-messages { min-height:520px; background:radial-gradient(circle at 75% 0,rgba(200,240,90,.05),transparent 28rem),#0b0e13; }
.staff-chat-page .staff-chat-message { animation:messageIn .28s ease both; }
@keyframes messageIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.settings-page { max-width:1000px; }
.settings-page .settings-security-card, .settings-page .settings-presence-card { max-width:none; }
.settings-page .settings-security-card { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(280px,1.2fr); gap:1rem 2rem; align-items:start; }
.settings-page .settings-security-card .settings-card-heading, .settings-page .settings-security-card .settings-error, .settings-page .settings-security-card .settings-submit { grid-column:1 / -1; }
.settings-page .settings-security-card > div:not(.settings-card-heading):not(.auth-error) { margin:0; }
.themes-page .theme-card, .theme-grid .theme-card { border-radius:1rem; overflow:hidden; }
.theme-grid { gap:1rem; }
.theme-card:hover { transform:translateY(-4px); box-shadow:0 22px 55px rgba(0,0,0,.28); }
.theme-card.active { border-color:rgba(200,240,90,.5); box-shadow:0 0 0 1px rgba(200,240,90,.18),0 24px 60px rgba(200,240,90,.08); }
.modal-backdrop, #modal-overlay { backdrop-filter:blur(10px); }
.modal-card, #modal-overlay > * { border-radius:1rem !important; box-shadow:0 30px 100px rgba(0,0,0,.5) !important; }
@media (max-width: 820px) {
  .page-header { align-items:flex-start; flex-direction:column; }
  .players-page .page-header::after { align-self:flex-start; }
  .settings-page .settings-security-card { display:block; }
  .settings-page .settings-security-card > * { margin-bottom:.85rem !important; }
  .settings-page .settings-security-card .settings-submit { margin-top:.35rem; }
}
@media (max-width: 560px) {
  .page-section { padding-inline:.85rem; }
  .page-toolbar { align-items:stretch; flex-direction:column; }
  .page-toolbar .input, .page-toolbar .btn { width:100%; }
  .data-table-card > div { min-width:620px; }
  .inventory-page .minecraft-grid { gap:.25rem !important; padding:.4rem; }
  .inventory-page .inv-slot { width:34px; height:34px; }
  .staff-chat-page .staff-chat-messages { min-height:390px; }
}


/* ========================================================================== */
/* Sunrise Control Room — v2 visual system                                  */
/* Inspired by modern AI operations dashboards: compact navigation, layered  */
/* surfaces, quiet typography, expressive status color and purposeful motion. */
/* ========================================================================== */
:root {
  --background: #08090d;
  --background-elevated: #0d0f15;
  --surface: #11141b;
  --surface-secondary: #171b24;
  --surface-hover: #202632;
  --text: #f2f4f7;
  --text-muted: #9aa3b2;
  --text-faint: #616b7b;
  --border: #242a35;
  --border-strong: #394252;
  --accent: #c8f05a;
  --accent-2: #a5d73a;
  --accent-hover: #ddff79;
  --accent-text: #12170b;
  --success: #63e6a0;
  --success-bg: #10251a;
  --success-text: #b7f6d1;
  --warning: #f2bd5b;
  --warning-bg: #2b2110;
  --warning-text: #f8da9a;
  --danger: #ff6b78;
  --danger-bg: #2b1118;
  --danger-text: #ffc0c7;
  --info: #79a9ff;
  --info-bg: #101c32;
  --info-text: #bad2ff;
  --purple: #b69aff;
  --shadow: 0 24px 80px rgba(0,0,0,.32);
  --shadow-sm: 0 10px 35px rgba(0,0,0,.18);
  --focus-ring: 0 0 0 3px rgba(200,240,90,.25);
  --header-gradient: linear-gradient(135deg,#c8f05a,#8ecb49);
  --logo-gradient: linear-gradient(135deg,#efffa5,#c8f05a);
}
html { background:var(--background); }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background:var(--background); letter-spacing:-.01em; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
.app-shell { display:flex; min-height:100vh; position:relative; }
.app-sidebar { position:sticky; top:0; width:270px; min-height:100vh; padding:0; border-right:1px solid #1d222b; background:rgba(12,14,19,.9); box-shadow:none; backdrop-filter:blur(24px); }
.sidebar-inner { display:flex; min-height:100vh; flex-direction:column; padding:1.15rem .9rem .85rem; }
.brand-row { display:flex; align-items:center; justify-content:space-between; padding:.25rem .4rem 1.5rem; }
.brand-lockup { display:flex; align-items:center; gap:.65rem; color:var(--text); text-decoration:none; }
.brand-lockup > span:last-child { display:flex; flex-direction:column; gap:.08rem; }
.brand-lockup strong { font-size:.84rem; font-weight:850; letter-spacing:.17em; }
.brand-lockup small { color:var(--text-faint); font-size:.58rem; letter-spacing:.06em; }
.brand-mark { display:grid; place-items:center; width:2.15rem; height:2.15rem; color:var(--accent-text); background:var(--accent); border-radius:.7rem; box-shadow:0 0 0 5px rgba(200,240,90,.08),0 10px 24px rgba(200,240,90,.12); }
.sidebar-collapse { width:1.9rem; height:1.9rem; border:1px solid var(--border); border-radius:.55rem; color:var(--text-faint); background:transparent; cursor:pointer; }
.sidebar-collapse:hover { color:var(--text); background:var(--surface-secondary); }
.workspace-switcher { display:flex; align-items:center; gap:.6rem; width:100%; padding:.65rem .6rem; margin-bottom:1.35rem; border:1px solid var(--border); border-radius:.8rem; color:var(--text); background:linear-gradient(135deg,#161a22,#10131a); text-align:left; cursor:pointer; }
.workspace-switcher:hover { border-color:var(--border-strong); background:var(--surface-secondary); }
.workspace-avatar,.account-avatar { display:grid; flex:none; place-items:center; width:1.8rem; height:1.8rem; border-radius:.55rem; color:var(--accent-text); background:linear-gradient(135deg,var(--accent),#80bd48); font-size:.64rem; font-weight:850; }
.workspace-copy,.account-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:.08rem; }
.workspace-copy strong,.account-copy strong { overflow:hidden; color:var(--text); font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.workspace-copy small,.account-copy small { color:var(--text-faint); font-size:.61rem; }
.workspace-chevron { color:var(--text-faint); font-size:.6rem; }
.sidebar-nav { display:flex; flex:1; flex-direction:column; gap:1.15rem; overflow-y:auto; }
.nav-section { display:grid; gap:.32rem; }
.nav-section-label { padding:0 .72rem; color:#4f5868; font-size:.59rem; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
.nav-section-links { display:grid; gap:.18rem; }
.nav-link { position:relative; display:flex; align-items:center; gap:.65rem; min-height:2.45rem; padding:.52rem .72rem; border:1px solid transparent; border-radius:.68rem; color:var(--text-muted); font-size:.76rem; font-weight:650; text-decoration:none; transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.nav-link:hover { color:var(--text); background:#161a22; transform:translateX(2px); }
.nav-link.active { color:var(--text); background:linear-gradient(90deg,rgba(200,240,90,.12),rgba(200,240,90,.035)); border-color:rgba(200,240,90,.16); box-shadow:none; }
.nav-link.active::before { display:none; }
.nav-link-icon { display:grid; place-items:center; width:1.3rem; height:1.3rem; color:#6f798a; font-size:.72rem; }
.nav-link.active .nav-link-icon { color:var(--accent); }
.nav-link-active-dot { width:.3rem; height:.3rem; margin-left:auto; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(200,240,90,.1); }
.sidebar-bottom { display:grid; gap:.65rem; padding-top:.9rem; margin-top:1rem; border-top:1px solid #1d222b; }
.sidebar-health { display:flex; align-items:center; gap:.55rem; padding:.65rem; border:1px solid rgba(99,230,160,.13); border-radius:.72rem; background:rgba(99,230,160,.045); }
.health-icon { display:grid; place-items:center; width:1.7rem; height:1.7rem; border-radius:.5rem; color:var(--success); background:rgba(99,230,160,.1); font-size:.68rem; }
.sidebar-health > span:nth-child(2) { display:flex; flex:1; flex-direction:column; gap:.1rem; }
.sidebar-health strong { color:var(--success-text); font-size:.66rem; }
.sidebar-health small { color:#6f9b82; font-size:.56rem; }
.health-pulse,.status-dot-online { width:.42rem; height:.42rem; flex:none; border-radius:50%; background:var(--success); box-shadow:0 0 0 4px rgba(99,230,160,.1); }
.account-row { display:flex; align-items:center; gap:.55rem; width:100%; padding:.55rem .35rem; border:0; border-radius:.68rem; background:transparent; text-align:left; cursor:pointer; }
.account-row:hover { background:var(--surface-secondary); }
.account-avatar { width:1.9rem; height:1.9rem; border-radius:50%; }
.account-logout { color:var(--text-faint); font-size:.7rem; }
.workspace-content { display:flex; min-width:0; flex:1; flex-direction:column; }
.app-topbar { position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:space-between; height:72px; padding:0 clamp(1.25rem,3vw,2.7rem); border-bottom:1px solid #1d222b; background:rgba(8,9,13,.78); backdrop-filter:blur(22px); }
.topbar-left,.topbar-right,.breadcrumb,.topbar-profile { display:flex; align-items:center; }
.breadcrumb { gap:.62rem; color:var(--text-faint); font-size:.7rem; }
.breadcrumb i { font-size:.52rem; }
.breadcrumb strong { color:var(--text); font-size:.8rem; font-weight:700; }
.topbar-right { gap:.85rem; }
.command-search { display:flex; align-items:center; gap:.55rem; width:210px; height:2.25rem; padding:0 .65rem; border:1px solid var(--border); border-radius:.65rem; color:var(--text-faint); background:#0d1016; }
.command-search:focus-within { border-color:rgba(200,240,90,.45); box-shadow:var(--focus-ring); }
.command-search input { width:100%; border:0; outline:0; color:var(--text); background:transparent; font:inherit; font-size:.7rem; }
.command-search input::placeholder { color:#5e6776; }
kbd { padding:.16rem .32rem; border:1px solid var(--border); border-radius:.3rem; color:#626c7b; font-size:.57rem; white-space:nowrap; }
.topbar-icon-button { position:relative; display:grid; place-items:center; width:2.25rem; height:2.25rem; border:1px solid var(--border); border-radius:.65rem; color:var(--text-muted); background:#0d1016; cursor:pointer; }
.topbar-icon-button:hover { color:var(--text); border-color:var(--border-strong); }
.notification-dot { position:absolute; top:.42rem; right:.42rem; width:.27rem; height:.27rem; border:2px solid #0d1016; border-radius:50%; background:var(--accent); }
.topbar-divider { width:1px; height:1.5rem; background:var(--border); }
.topbar-profile { gap:.5rem; color:var(--text-muted); font-size:.7rem; }
.topbar-avatar { display:grid; place-items:center; width:2rem; height:2rem; border:1px solid rgba(200,240,90,.25); border-radius:50%; color:var(--accent-text); background:var(--accent); font-size:.62rem; font-weight:850; }
.workspace-canvas { min-width:0; flex:1; }
.dashboard-page { width:min(1400px,100%); margin:0 auto; padding:clamp(1.4rem,3vw,2.8rem) clamp(1.1rem,3vw,2.8rem) 4rem; }
.dashboard-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; padding:1.5rem 0 2.1rem; }
.hero-copy-block { max-width:650px; }
.eyebrow { display:flex; align-items:center; gap:.45rem; color:var(--accent); font-size:.61rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow-dot { width:.42rem; height:.42rem; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(200,240,90,.11); animation:softPulse 2.2s ease-in-out infinite; }
@keyframes softPulse { 0%,100%{opacity:1;box-shadow:0 0 0 4px rgba(200,240,90,.11)}50%{opacity:.55;box-shadow:0 0 0 8px rgba(200,240,90,0)} }
.dashboard-hero h1 { margin:.75rem 0 .55rem; color:var(--text); font-size:clamp(2rem,4vw,3.4rem); font-weight:780; letter-spacing:-.06em; line-height:1.03; }
.hero-name { color:var(--accent); }
.dashboard-hero p { color:var(--text-muted); font-size:.86rem; line-height:1.6; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.55rem; }
.btn { min-height:2.55rem; border-radius:.62rem; font-size:.72rem; font-weight:750; }
.btn-primary { color:var(--accent-text); background:var(--accent); }
.btn-primary:hover:not(:disabled) { background:var(--accent-hover); transform:translateY(-1px); }
.btn-secondary { color:var(--text); background:var(--surface-secondary); border-color:var(--border); }
.btn-secondary:hover:not(:disabled) { background:var(--surface-hover); border-color:var(--border-strong); transform:translateY(-1px); }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; }
.metric-card,.dashboard-card { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:.9rem; background:linear-gradient(145deg,#12161e,#0f1218); box-shadow:var(--shadow-sm); }
.metric-card { min-height:148px; padding:1rem 1.1rem; transition:transform .2s ease,border-color .2s ease; }
.metric-card:hover,.dashboard-card:hover { border-color:#3a4351; transform:translateY(-2px); }
.metric-card::after { content:''; position:absolute; right:-30px; bottom:-50px; width:140px; height:100px; border-radius:50%; background:radial-gradient(circle,rgba(200,240,90,.09),transparent 68%); pointer-events:none; }
.metric-card-top,.metric-card-bottom,.card-heading,.trend-summary { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.metric-label,.card-kicker { color:var(--text-faint); font-size:.63rem; font-weight:700; letter-spacing:.04em; }
.metric-icon { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.58rem; font-size:.72rem; }
.metric-icon-amber { color:var(--accent); background:rgba(200,240,90,.1); }.metric-icon-green { color:var(--success); background:rgba(99,230,160,.1); }.metric-icon-blue { color:var(--info); background:rgba(121,169,255,.1); }.metric-icon-purple { color:var(--purple); background:rgba(182,154,255,.1); }.metric-icon-red { color:var(--danger); background:rgba(255,107,120,.1); }
.metric-value { display:block; margin:1.25rem 0 .5rem; color:var(--text); font-size:1.72rem; font-weight:760; letter-spacing:-.06em; }
.metric-card-bottom { color:var(--text-faint); font-size:.62rem; }.metric-trend,.positive-change { color:var(--success); font-weight:800; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.8fr) minmax(240px,.65fr); gap:.75rem; margin-top:.75rem; align-items:stretch; }
.dashboard-card { padding:1.15rem; min-height:360px; }
.card-heading { align-items:flex-start; }.card-heading h2 { margin-top:.33rem; color:var(--text); font-size:.95rem; font-weight:750; letter-spacing:-.025em; }.card-link,.card-footer-link { color:var(--text-faint); font-size:.62rem; text-decoration:none; }.card-link:hover,.card-footer-link:hover { color:var(--accent); }.card-link i { margin-left:.2rem; font-size:.55rem; }.range-pill { padding:.32rem .5rem; border:1px solid var(--border); border-radius:.4rem; color:var(--text-faint); font-size:.58rem; }
.trend-summary { justify-content:flex-start; margin:2rem 0 1rem; }.trend-summary strong { color:var(--text); font-size:2rem; letter-spacing:-.07em; }.trend-summary span:not(.positive-change) { margin-left:-.35rem; color:var(--text-muted); font-size:.65rem; }.positive-change { margin-left:auto; padding:.3rem .45rem; border-radius:.35rem; background:rgba(99,230,160,.08); font-size:.61rem; }
.chart-area { position:relative; display:flex; align-items:flex-end; height:150px; padding:.5rem 0 0; }.chart-grid-lines { position:absolute; inset:.5rem 0 0; display:flex; flex-direction:column; justify-content:space-between; }.chart-grid-lines span { width:100%; height:1px; background:#202631; }.chart-bars { position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-around; width:100%; height:100%; gap:.35rem; }.chart-bar { width:100%; max-width:1.15rem; min-height:5px; border-radius:.3rem .3rem .12rem .12rem; background:linear-gradient(to top,rgba(200,240,90,.18),rgba(200,240,90,.72)); transition:height .6s cubic-bezier(.2,.8,.2,1),filter .2s ease; }.chart-bar:hover,.chart-bar.is-current { filter:brightness(1.35); background:linear-gradient(to top,rgba(200,240,90,.5),var(--accent)); }.chart-axis { display:flex; justify-content:space-between; margin-top:.55rem; color:#586272; font-size:.55rem; }.online-card,.activity-card { display:flex; flex-direction:column; }.online-player-list { display:grid; gap:.25rem; margin-top:1.55rem; }.online-player-row { display:flex; align-items:center; gap:.55rem; width:100%; padding:.48rem .35rem; border:0; border-bottom:1px solid #202631; color:var(--text); background:transparent; text-align:left; cursor:pointer; }.online-player-row:hover { background:#171c24; }.player-avatar { display:grid; place-items:center; width:1.75rem; height:1.75rem; border-radius:.55rem; color:hsl(var(--avatar-hue),70%,85%); background:hsl(var(--avatar-hue),35%,20%); font-size:.65rem; font-weight:800; }.player-identity { display:flex; flex:1; flex-direction:column; gap:.12rem; min-width:0; }.player-identity strong { overflow:hidden; color:var(--text); font-size:.68rem; text-overflow:ellipsis; white-space:nowrap; }.player-identity small { color:var(--text-faint); font-size:.57rem; }.player-status { display:flex; align-items:center; gap:.35rem; color:var(--success-text); font-size:.57rem; }.player-status .status-dot-online { width:.34rem; height:.34rem; }.card-footer-link { display:flex; align-items:center; gap:.4rem; padding-top:1rem; margin-top:auto; border-top:1px solid #202631; color:var(--text-muted); }.inline-empty { margin:2rem 0; color:var(--text-faint); font-size:.72rem; }.timeline { display:grid; gap:0; margin-top:1.35rem; }.timeline-item { display:flex; align-items:center; gap:.55rem; min-height:3.25rem; border-bottom:1px solid #202631; }.timeline-icon { display:grid; place-items:center; width:1.65rem; height:1.65rem; border-radius:.5rem; font-size:.6rem; }.timeline-green{color:var(--success);background:rgba(99,230,160,.1)}.timeline-blue{color:var(--info);background:rgba(121,169,255,.1)}.timeline-amber{color:var(--accent);background:rgba(200,240,90,.1)}.timeline-purple{color:var(--purple);background:rgba(182,154,255,.1)}.timeline-copy { display:flex; flex:1; flex-direction:column; gap:.14rem; }.timeline-copy strong { color:var(--text-muted); font-size:.62rem; font-weight:650; }.timeline-copy small { color:var(--text-faint); font-size:.56rem; }.activity-footnote { display:flex; align-items:center; gap:.4rem; margin-top:auto; padding-top:1rem; color:var(--text-faint); font-size:.58rem; }.activity-footnote .status-dot-online { width:.32rem; height:.32rem; }.permission-card,.dashboard-error { grid-column:1 / -1; display:flex; align-items:flex-start; gap:.8rem; min-height:180px; padding:1.5rem; }.permission-card > i { color:var(--accent); }.permission-card strong { color:var(--text); font-size:.9rem; }.permission-card p { margin-top:.3rem; color:var(--text-muted); font-size:.75rem; }.dashboard-error .card { width:100%; }
@media (max-width:1100px) { .dashboard-grid { grid-template-columns:1.15fr .85fr; } .dashboard-side-column { grid-column:1/-1; } .activity-card { min-height:280px; } .timeline { grid-template-columns:repeat(2,1fr); column-gap:1rem; } }
@media (max-width:800px) { .app-sidebar { position:fixed; z-index:40; transform:translateX(-102%); transition:transform .28s ease; } #app.nav-open .app-sidebar { transform:translateX(0); }.sidebar-backdrop { position:fixed; inset:0; z-index:35; display:none; border:0; background:rgba(0,0,0,.6); }.topbar-right .command-search,.topbar-divider,.topbar-username { display:none; } #app.nav-open .sidebar-backdrop { display:block; }.metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.dashboard-hero { align-items:flex-start; flex-direction:column; }.dashboard-grid { grid-template-columns:1fr; }.dashboard-side-column { grid-column:auto; }.dashboard-card { min-height:320px; } }
@media (max-width:520px) { .dashboard-page { padding-inline:.85rem; }.metric-grid { gap:.5rem; }.metric-card { min-height:126px; padding:.75rem; }.metric-value { margin-top:1rem; font-size:1.45rem; }.dashboard-hero h1 { font-size:2rem; }.hero-actions { width:100%; }.hero-actions .btn { flex:1; justify-content:center; }.app-topbar { padding-inline:.9rem; }.breadcrumb { font-size:.62rem; } }