/* Plyvo UI Design Package v1 - opt-in visual skin only. */
html[data-plyvo-skin="community"] {
  --primary: #0e6b71;
  --primary-hover: #0b2e34;
  --primary-strong: #0b2e34;
  --primary-soft: #bdefe9;
  --primary-soft-hover: #a9e5df;
  --energy: #47c6c0;
  --energy-ink: #0b2e34;
  --teal: #47c6c0;
  --ink: #0b2e34;
  --text: #27474b;
  --text-muted: #5d6e70;
  --background: #f4f6f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f4f6f6;
  --border: #d9e3e4;
  --border-strong: #c4d4d6;
  --danger: #d95f64;
  --danger-border: #efb7ba;
  --warning: #a26d0b;
  --sidebar: #0b2e34;
  --sidebar-surface: #0e6b71;
  --sidebar-border: rgba(189, 239, 233, .22);
  --shadow-sm: 0 3px 12px rgba(11, 46, 52, .045);
  --shadow: 0 8px 28px rgba(11, 46, 52, .08);
  font-family: "Satoshi", "Inter", "Segoe UI", sans-serif;
}

/* The app's optional dark-mode class has stronger selector specificity than
   the base token block. Keep the community skin light even if dark mode was
   previously selected for the account. */
html[data-plyvo-skin="community"].dark {
  --primary: #0e6b71;
  --primary-hover: #0b2e34;
  --primary-strong: #0b2e34;
  --primary-soft: #bdefe9;
  --primary-soft-hover: #a9e5df;
  --energy: #47c6c0;
  --energy-ink: #0b2e34;
  --teal: #47c6c0;
  --ink: #0b2e34;
  --text: #27474b;
  --text-muted: #5d6e70;
  --background: #f4f6f6;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-subtle: #f4f6f6;
  --border: #d9e3e4;
  --border-strong: #c4d4d6;
  --danger: #d95f64;
  --danger-border: #efb7ba;
  --warning: #a26d0b;
  --sidebar: #0b2e34;
  --sidebar-surface: #0e6b71;
  --sidebar-border: rgba(189, 239, 233, .22);
  --shadow-sm: 0 3px 12px rgba(11, 46, 52, .045);
  --shadow: 0 8px 28px rgba(11, 46, 52, .08);
}

html[data-plyvo-skin="community"] body { background: var(--background); }
html[data-plyvo-skin="community"] #appBootScreen {
  color: var(--plyvo-ink, #0b2e34);
  background: linear-gradient(145deg, #fff 0%, #f4f6f6 64%, #bdefe9 100%);
}
html[data-plyvo-skin="community"] #appBootScreen span { color: #5d6e70; }
.brand-logo-community { display: none; }
html[data-plyvo-skin="community"] #appBootScreen .boot-logo-old { display: none; }
html[data-plyvo-skin="community"] #appBootScreen .boot-logo-community { display: block; width: 180px; height: auto; }
html[data-plyvo-skin="community"] #appBootScreen strong { display: none; }
html[data-plyvo-skin="community"] .auth-brand img { content: url("../assets/plyvo-logo-primary.png"); width: min(220px, 72vw); height: auto; border-radius: 0; }
html[data-plyvo-skin="community"] .auth-brand span { display: none; }
html[data-plyvo-skin="community"] .public-brand img { content: url("../assets/plyvo-logo-on-dark.png"); width: 172px; height: auto; }
html[data-plyvo-skin="community"] .public-brand span,
html[data-plyvo-skin="community"] .public-brand > strong { display: none; }
html[data-plyvo-skin="community"] .brand-logo-community {
  display: block;
  width: 100%;
  height: auto;
  max-height: 62px;
  object-fit: contain;
  border-radius: 10px;
}
html[data-plyvo-skin="community"] .brand > .brand-mark,
html[data-plyvo-skin="community"] .brand > .brand-copy { display: none; }
html[data-plyvo-skin="community"] .app-shell.is-sidebar-collapsed .brand-logo-community { display: none; }
html[data-plyvo-skin="community"] .app-shell.is-sidebar-collapsed .brand > .brand-mark {
  display: block;
  content: url("../assets/plyvo-mark-community.png");
  border-radius: 0;
  box-shadow: none;
}
html[data-plyvo-skin="community"] .brand-name { color: #fff; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
html[data-plyvo-skin="community"] .brand-tagline { color: #b9e8e1; }
html[data-plyvo-skin="community"] .app-sidebar { background: var(--sidebar); }
html[data-plyvo-skin="community"] .tab.active { color: #0b2e34; background: var(--energy); box-shadow: inset 3px 0 #47c6c0; }
html[data-plyvo-skin="community"] .platform-nav-parent { border: 0; color: #aeb7c7; background: transparent; box-shadow: none; }
html[data-plyvo-skin="community"] .platform-nav-parent:hover,
html[data-plyvo-skin="community"] .platform-system-nav:has(.tab.active) .platform-nav-parent { color: #fff; background: rgba(255, 255, 255, .065); box-shadow: none; }
html[data-plyvo-skin="community"] .platform-nav-child.active { color: #0b2e34; background: var(--energy); box-shadow: none; }
html[data-plyvo-skin="community"] .platform-nav-child-marker { background: var(--sidebar); }
html[data-plyvo-skin="community"] .platform-nav-child.active .platform-nav-child-marker { background: currentColor; }
html[data-plyvo-skin="community"] .platform-nav-submenu { border-color: rgba(189, 239, 233, .28); background: #0b2e34; box-shadow: 0 20px 48px rgba(11, 46, 52, .28); }
html[data-plyvo-skin="community"] .sidebar-staff-account { margin-top: 0; border-color: rgba(189, 239, 233, .24); color: #fff; background: rgba(14, 107, 113, .22); box-shadow: none; }
html[data-plyvo-skin="community"] .sidebar-staff-hub { border-color: rgba(189, 239, 233, .3); background: rgba(14, 107, 113, .16); }
html[data-plyvo-skin="community"] .sidebar-staff-hub .sidebar-staff-account { background: transparent; }
html[data-plyvo-skin="community"] .sidebar-notification-menu { border-left-color: rgba(189, 239, 233, .24); }
html[data-plyvo-skin="community"] .sidebar-notification-button { color: #fff; }
html[data-plyvo-skin="community"] .sidebar-staff-account:hover,
html[data-plyvo-skin="community"] .sidebar-staff-account.is-active { border-color: #47c6c0; color: #fff; background: rgba(71, 198, 192, .16); }
html[data-plyvo-skin="community"] .sidebar-staff-photo { border-color: rgba(189, 239, 233, .45); color: #0b2e34; background: #bdefe9; }
body.platform-staff-active .sidebar-footer { display: none; }
body.platform-staff-active .app-sidebar { padding: 10px 14px 9px; }
body.platform-staff-active .sidebar-top { padding: 0 3px 4px; }
body.platform-staff-active .brand-logo-community { max-width: 166px; max-height: 43px; }
body.platform-staff-active .app-sidebar .tabs { align-content: start; gap: 1px; margin-top: 5px; padding-bottom: 2px; }
body.platform-staff-active .app-sidebar .tab,
body.platform-staff-active .platform-nav-parent { min-height: 34px; gap: 10px; padding: 5px 9px; border-radius: 9px; font-size: .82rem; }
body.platform-staff-active .app-sidebar .tab svg,
body.platform-staff-active .platform-nav-parent > svg:first-child { width: 18px; height: 18px; }
body.platform-staff-active .platform-nav-section { margin: 5px 8px 1px; font-size: .58rem; }
body.platform-staff-active .platform-nav-section::before { margin-bottom: 5px; }
body.platform-staff-active .platform-admin-tab { margin-bottom: 0; }
html[data-plyvo-skin="community"] body.platform-staff-active .sidebar-notification-button { color: #fff; background: transparent; }
html[data-plyvo-skin="community"] body.platform-staff-active .sidebar-notification-button:hover,
html[data-plyvo-skin="community"] body.platform-staff-active .sidebar-notification-button[aria-expanded="true"] { color: #fff; background: rgba(71,198,192,.12); }
html[data-plyvo-skin="community"] .platform-admin-tab { border-color: rgba(189, 239, 233, .35); }
html[data-plyvo-skin="community"] .card,
html[data-plyvo-skin="community"] .metric-card { border-radius: 14px; box-shadow: var(--shadow); }
html[data-plyvo-skin="community"] button,
html[data-plyvo-skin="community"] select,
html[data-plyvo-skin="community"] input,
html[data-plyvo-skin="community"] textarea { border-radius: 10px; }
html[data-plyvo-skin="community"] button.primary { color: #fff; background: var(--sidebar); }
html[data-plyvo-skin="community"] button.primary:hover { background: var(--primary); }
html[data-plyvo-skin="community"] button:focus-visible,
html[data-plyvo-skin="community"] select:focus-visible,
html[data-plyvo-skin="community"] input:focus-visible,
html[data-plyvo-skin="community"] textarea:focus-visible { border-color: var(--teal); outline-color: rgba(71, 198, 192, .22); }
html[data-plyvo-skin="community"] .metric-icon { border-radius: 10px; }
html[data-plyvo-skin="community"] .metric-icon-indigo { color: var(--primary-strong); background: var(--primary-soft); }
html[data-plyvo-skin="community"] .metric-icon-lime { color: #176b58; background: #dff7ed; }
html[data-plyvo-skin="community"] .metric-icon-teal { color: var(--primary-strong); background: var(--primary-soft); }
html[data-plyvo-skin="community"] .metric-icon-amber { color: #8a650d; background: #fff3d9; }

.platform-skin-settings { margin-bottom: 18px; }
.platform-skin-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.platform-skin-choice { display: grid; gap: 5px; min-height: 96px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface); text-align: left; }
.platform-skin-choice strong { color: var(--ink); }
.platform-skin-choice small { color: var(--text-muted); line-height: 1.45; }
.platform-skin-choice:hover, .platform-skin-choice.is-selected { border-color: var(--primary); background: var(--primary-soft); }
.platform-skin-choice.is-selected { box-shadow: inset 0 0 0 2px var(--primary); }
@media (max-width: 640px) { .platform-skin-choices { grid-template-columns: 1fr; } }

/* Component-level overrides: the legacy stylesheet contains several fixed dark
   surfaces, so the community skin intentionally normalises those surfaces here. */
html[data-plyvo-skin="community"],
html[data-plyvo-skin="community"].dark { color-scheme: light; }
html[data-plyvo-skin="community"] body,
html[data-plyvo-skin="community"].dark body { background: var(--background); color: var(--text); }
html[data-plyvo-skin="community"] .app-content { background: transparent; }
html[data-plyvo-skin="community"] .content-header h1,
html[data-plyvo-skin="community"] .page-description,
html[data-plyvo-skin="community"] h1,
html[data-plyvo-skin="community"] h2,
html[data-plyvo-skin="community"] h3 { color: var(--ink); }
html[data-plyvo-skin="community"] .page-description,
html[data-plyvo-skin="community"] .hint,
html[data-plyvo-skin="community"] .muted { color: var(--text-muted); }
html[data-plyvo-skin="community"] .platform-admin-hero {
  min-height: 174px;
  border-color: var(--border);
  color: var(--ink);
  background: linear-gradient(135deg, #fff 0%, #f4f6f6 68%, #bdefe9 100%);
  box-shadow: var(--shadow);
}
html[data-plyvo-skin="community"] .platform-admin-hero::after { border-color: rgba(14, 107, 113, .12); box-shadow: 0 0 0 34px rgba(71, 198, 192, .05), 0 0 0 72px rgba(71, 198, 192, .025); }
html[data-plyvo-skin="community"] .platform-admin-hero h2 { color: var(--ink); }
html[data-plyvo-skin="community"] .platform-admin-hero p { color: var(--text-muted); }
html[data-plyvo-skin="community"] .platform-admin-hero button { border-color: var(--primary-strong); color: #fff; background: var(--primary-strong); }
html[data-plyvo-skin="community"] .platform-admin-hero button:hover { border-color: var(--primary); color: #fff; background: var(--primary); }
html[data-plyvo-skin="community"] .platform-admin-kicker { color: var(--primary); }
html[data-plyvo-skin="community"] .platform-admin-kicker > span { background: var(--teal); box-shadow: 0 0 0 4px rgba(71, 198, 192, .16); }
html[data-plyvo-skin="community"] .card,
html[data-plyvo-skin="community"] .metric-card,
html[data-plyvo-skin="community"] .context-pill,
html[data-plyvo-skin="community"] .header-actions,
html[data-plyvo-skin="community"].dark .card,
html[data-plyvo-skin="community"].dark .metric-card,
html[data-plyvo-skin="community"].dark .context-pill,
html[data-plyvo-skin="community"].dark .header-actions { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow); }
html[data-plyvo-skin="community"] .card { border-radius: var(--radius-card); }
html[data-plyvo-skin="community"] .metric-card { background: #fff; }
html[data-plyvo-skin="community"] .metric-icon-lime { color: #176b58; background: #dff7ed; }
html[data-plyvo-skin="community"] .metric-icon-indigo,
html[data-plyvo-skin="community"] .metric-icon-teal { color: var(--primary-strong); background: var(--primary-soft); }
html[data-plyvo-skin="community"] .metric-icon-amber { color: #8a650d; background: #fff3d9; }
html[data-plyvo-skin="community"] .section-heading { border-color: var(--border); }
html[data-plyvo-skin="community"] .card-kicker,
html[data-plyvo-skin="community"] .eyebrow { color: var(--primary); }
html[data-plyvo-skin="community"] .platform-attention-item,
html[data-plyvo-skin="community"] .platform-club-bar,
html[data-plyvo-skin="community"] .platform-attention-empty { border-color: var(--border); background: var(--surface-subtle); }
html[data-plyvo-skin="community"] .platform-attention-item strong,
html[data-plyvo-skin="community"] .platform-club-bar strong { color: var(--ink); }
html[data-plyvo-skin="community"] .platform-bar-track { background: var(--primary-soft); }
html[data-plyvo-skin="community"] .platform-bar-track span { background: var(--teal); }
html[data-plyvo-skin="community"] .table-wrap { border-color: var(--border); background: var(--surface); }
html[data-plyvo-skin="community"] th,
html[data-plyvo-skin="community"].dark th { color: var(--text-muted); background: var(--surface-subtle); }
html[data-plyvo-skin="community"] td { border-color: var(--border); color: var(--text); }
html[data-plyvo-skin="community"] tbody tr:nth-child(even),
html[data-plyvo-skin="community"].dark tbody tr:nth-child(even) { background: #fbfdfc; }
html[data-plyvo-skin="community"] tbody tr:hover,
html[data-plyvo-skin="community"].dark tbody tr:hover { background: var(--primary-soft); }
html[data-plyvo-skin="community"] button.primary,
html[data-plyvo-skin="community"] .primary { color: #fff; border-color: var(--primary-strong); background: var(--primary-strong); }
html[data-plyvo-skin="community"] button.primary:hover,
html[data-plyvo-skin="community"] .primary:hover { color: #fff; border-color: var(--primary); background: var(--primary); }
html[data-plyvo-skin="community"] button:not(.tab):not(.account-button):not(.icon-button):not(.platform-skin-choice) { border-color: var(--border-strong); }
html[data-plyvo-skin="community"] input,
html[data-plyvo-skin="community"] select,
html[data-plyvo-skin="community"] textarea { color: var(--ink); border-color: var(--border-strong); background: #fff; }
html[data-plyvo-skin="community"] .platform-status.is-ready { color: #0e6b71; background: #bdefe9; }
html[data-plyvo-skin="community"] .status-badge { color: var(--primary-strong); border-color: var(--border); background: var(--primary-soft); }
html[data-plyvo-skin="community"] .platform-skin-settings .status-badge { background: var(--primary-soft); }
html[data-plyvo-skin="community"] .empty,
html[data-plyvo-skin="community"] .dashboard-empty { color: var(--text-muted); border-color: var(--border-strong); background: var(--surface-subtle); }

/* Full Club / Community component language from the design manual. */
html[data-plyvo-skin="community"],
html[data-plyvo-skin="community"].dark {
  --plyvo-ink: #0b2e34;
  --plyvo-teal-900: #0b2e34;
  --plyvo-teal-700: #0e6b71;
  --plyvo-teal-500: #47c6c0;
  --plyvo-mint-300: #bdefe9;
  --plyvo-mint-100: #bdefe9;
  --plyvo-aqua-50: #f4f6f6;
  --plyvo-sand: #f4f6f6;
  --plyvo-coral: #f47d61;
  --plyvo-gold: #e5b84a;
  --plyvo-sky: #68a9c7;
  --success: #3abf8a;
  --success-soft: #dff8ef;
  --success-ink: #176b58;
  --accent: #47c6c0;
  --radius-control: 10px;
  --radius-card: 14px;
  --radius-panel: 20px;
}

html[data-plyvo-skin="community"] body,
html[data-plyvo-skin="community"].dark body {
  background:
    radial-gradient(circle at 98% 0%, rgba(71, 198, 192, .14), transparent 29rem),
    linear-gradient(180deg, #f4f6f6 0%, #fff 72%, #f4f6f6 140%);
  color: var(--text);
  font-size: 15px;
}

html[data-plyvo-skin="community"] h1 { font-size: clamp(1.75rem, 2.6vw, 2rem); letter-spacing: -.035em; }
html[data-plyvo-skin="community"] h2 { letter-spacing: -.025em; }
html[data-plyvo-skin="community"] .app-content { max-width: 1600px; padding-top: 32px; }
html[data-plyvo-skin="community"] .content-header { margin-bottom: 24px; }
html[data-plyvo-skin="community"] .page-description { font-size: .95rem; }

html[data-plyvo-skin="community"] .app-sidebar {
  border-right-color: rgba(189, 239, 233, .2);
  background: #0b2e34;
}
html[data-plyvo-skin="community"] .sidebar-top { padding-bottom: 20px; }
html[data-plyvo-skin="community"] .brand { width: 100%; }
html[data-plyvo-skin="community"] .brand-logo-community {
  width: 100%;
  max-width: 210px;
  max-height: 78px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
html[data-plyvo-skin="community"] .platform-nav-section,
html[data-plyvo-skin="community"] .sidebar-label { color: #bdefe9; }
html[data-plyvo-skin="community"] .platform-nav-section::before,
html[data-plyvo-skin="community"] .sidebar-footer { border-color: rgba(189, 239, 233, .22); }
html[data-plyvo-skin="community"] .sidebar-footer { color: #effbf9; }
html[data-plyvo-skin="community"] .sidebar-footer small { color: #bdefe9; }
html[data-plyvo-skin="community"] .status-dot,
html[data-plyvo-skin="community"] .context-pulse { background: var(--plyvo-teal-500); box-shadow: 0 0 0 4px rgba(71, 198, 192, .14); }
html[data-plyvo-skin="community"] .sidebar-toggle { border-color: rgba(189, 239, 233, .28); color: #bdefe9; background: #0b2e34; box-shadow: 0 8px 20px rgba(2, 28, 30, .22); }
html[data-plyvo-skin="community"] .sidebar-toggle:hover { border-color: var(--plyvo-mint-300); color: #fff; background: var(--plyvo-teal-700); }

html[data-plyvo-skin="community"] .app-sidebar .tab,
html[data-plyvo-skin="community"].dark .app-sidebar .tab {
  min-height: 44px;
  border-color: transparent;
  color: #d9eeeb;
  background: transparent;
  box-shadow: none;
}
html[data-plyvo-skin="community"] .app-sidebar .tab:hover,
html[data-plyvo-skin="community"].dark .app-sidebar .tab:hover { color: #fff; background: rgba(189, 239, 233, .12); }
html[data-plyvo-skin="community"] .app-sidebar .tab.active,
html[data-plyvo-skin="community"].dark .app-sidebar .tab.active {
  color: #062f31;
  background: var(--plyvo-mint-300);
  box-shadow: inset 3px 0 var(--plyvo-teal-500), 0 8px 20px rgba(2, 28, 30, .12);
}
html[data-plyvo-skin="community"] .app-sidebar .tab.active svg { stroke-width: 2; }
html[data-plyvo-skin="community"] body.platform-staff-active .app-sidebar .tab,
html[data-plyvo-skin="community"].dark body.platform-staff-active .app-sidebar .tab { min-height: 34px; }
html[data-plyvo-skin="community"] .nav-count { color: var(--plyvo-ink); background: var(--plyvo-mint-300); }
html[data-plyvo-skin="community"] .app-sidebar .tab.active .nav-count { background: #fff; }
html[data-plyvo-skin="community"] .sidebar-settings-button:hover,
html[data-plyvo-skin="community"] .sidebar-settings-button.active { color: #fff; background: rgba(189, 239, 233, .14); }

html[data-plyvo-skin="community"] button,
html[data-plyvo-skin="community"] select,
html[data-plyvo-skin="community"] input,
html[data-plyvo-skin="community"] textarea,
html[data-plyvo-skin="community"].dark button,
html[data-plyvo-skin="community"].dark select,
html[data-plyvo-skin="community"].dark input,
html[data-plyvo-skin="community"].dark textarea {
  min-height: 44px;
  color: var(--ink);
  border-color: var(--border-strong);
  background: #fff;
}
html[data-plyvo-skin="community"] textarea { min-height: 96px; }
html[data-plyvo-skin="community"] button:hover,
html[data-plyvo-skin="community"].dark button:hover { border-color: var(--plyvo-teal-700); color: var(--plyvo-ink); background: var(--plyvo-mint-100); }
html[data-plyvo-skin="community"] .app-sidebar .platform-nav-parent,
html[data-plyvo-skin="community"].dark .app-sidebar .platform-nav-parent {
  border: 0;
  color: #d9eeeb;
  background: transparent;
  box-shadow: none;
}
html[data-plyvo-skin="community"] .app-sidebar .platform-nav-parent:hover,
html[data-plyvo-skin="community"].dark .app-sidebar .platform-nav-parent:hover,
html[data-plyvo-skin="community"] .platform-system-nav:has(.tab.active) .platform-nav-parent,
html[data-plyvo-skin="community"].dark .platform-system-nav:has(.tab.active) .platform-nav-parent {
  border: 0;
  color: #fff;
  background: rgba(255, 255, 255, .065);
  box-shadow: none;
}
html[data-plyvo-skin="community"] .primary,
html[data-plyvo-skin="community"].dark .primary,
html[data-plyvo-skin="community"] button.primary,
html[data-plyvo-skin="community"].dark button.primary {
  border-color: var(--plyvo-teal-900);
  color: #fff;
  background: var(--plyvo-teal-900);
  box-shadow: 0 7px 18px rgba(11, 46, 52, .16);
}
html[data-plyvo-skin="community"] .primary:hover,
html[data-plyvo-skin="community"].dark .primary:hover,
html[data-plyvo-skin="community"] button.primary:hover,
html[data-plyvo-skin="community"].dark button.primary:hover { border-color: var(--plyvo-teal-700); color: #fff; background: var(--plyvo-teal-700); }
html[data-plyvo-skin="community"] .energy-action,
html[data-plyvo-skin="community"].dark .energy-action { border-color: var(--plyvo-mint-300); color: var(--plyvo-ink); background: var(--plyvo-mint-300); box-shadow: 0 7px 18px rgba(14, 107, 113, .12); }
html[data-plyvo-skin="community"] .energy-action:hover,
html[data-plyvo-skin="community"].dark .energy-action:hover { border-color: var(--plyvo-teal-500); color: #fff; background: var(--plyvo-teal-500); }
html[data-plyvo-skin="community"] .danger:hover,
html[data-plyvo-skin="community"].dark .danger:hover { border-color: var(--danger); color: var(--danger); background: #fff1f0; }
html[data-plyvo-skin="community"] :is(button, select, input, textarea):focus-visible {
  border-color: var(--plyvo-teal-500);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(71, 198, 192, .22);
}

html[data-plyvo-skin="community"] :is(.card, .metric-card, .page-team-context, .context-pill, .header-actions, .account-profile-identity, .account-profile-address, .account-membership, .account-preference-row),
html[data-plyvo-skin="community"].dark :is(.card, .metric-card, .page-team-context, .context-pill, .header-actions) {
  border-color: var(--border);
  background: #fff;
  box-shadow: var(--shadow);
}
html[data-plyvo-skin="community"] .card { padding: 20px; }
html[data-plyvo-skin="community"] :is(.inline-form, .player-form, .club-venue-row, .member-advanced, .team-role-row, .platform-attention-item, .platform-club-bar, .platform-club-audit-item, .platform-member-detail-section, .platform-club-product-summary, .platform-club-sports-form, .commerce-row, .round-history, .set-score-row, .round-pause-picker, .training-trainer-group) {
  border-color: var(--border);
  background: var(--surface-subtle);
}
html[data-plyvo-skin="community"] .account-profile-identity,
html[data-plyvo-skin="community"] .account-profile-address,
html[data-plyvo-skin="community"] .account-membership,
html[data-plyvo-skin="community"] .account-preference-row { box-shadow: none; background: var(--plyvo-aqua-50); }

html[data-plyvo-skin="community"] .table-wrap { overflow: auto; border-radius: var(--radius-card); box-shadow: none; }
html[data-plyvo-skin="community"] th,
html[data-plyvo-skin="community"].dark th { color: var(--text-muted); background: var(--plyvo-mint-100); }
html[data-plyvo-skin="community"] td { padding-block: 14px; }
html[data-plyvo-skin="community"] tbody tr:nth-child(even),
html[data-plyvo-skin="community"].dark tbody tr:nth-child(even) { background: #fbfdfc; }
html[data-plyvo-skin="community"] tbody tr:hover,
html[data-plyvo-skin="community"].dark tbody tr:hover { background: var(--plyvo-aqua-50); }
html[data-plyvo-skin="community"] :is(.list button, .access-user, .training-item, .platform-message-case, .conversation-item) { min-height: 56px; }
html[data-plyvo-skin="community"] :is(.list button, .training-item, .platform-message-case, .conversation-item):hover,
html[data-plyvo-skin="community"] :is(.list button.selected, .training-item.selected, .platform-message-case.is-selected, .conversation-item.selected) { border-color: var(--border); color: var(--ink); background: var(--plyvo-mint-100); }
html[data-plyvo-skin="community"] :is(.platform-message-case.is-selected, .conversation-item.selected) { box-shadow: inset 3px 0 var(--plyvo-teal-500); }

html[data-plyvo-skin="community"] :is(.platform-club-directory-tabs, .platform-club-detail-tabs, .commerce-detail-tabs, .access-source-switch) { border-color: var(--border); background: var(--plyvo-aqua-50); box-shadow: none; }
html[data-plyvo-skin="community"] :is(.platform-club-directory-tabs, .platform-club-detail-tabs, .commerce-detail-tabs, .access-source-switch) button { border-color: transparent; background: transparent; box-shadow: none; }
html[data-plyvo-skin="community"] :is(.platform-club-directory-tabs, .platform-club-detail-tabs, .commerce-detail-tabs) button:is(.is-active, [aria-selected="true"]),
html[data-plyvo-skin="community"] .access-source-switch button.selected { border-color: var(--border); color: var(--plyvo-ink); background: #fff; box-shadow: 0 4px 14px rgba(11, 46, 52, .07); }
html[data-plyvo-skin="community"] .message-center-tabs button.selected,
html[data-plyvo-skin="community"] .conversation-sidebar-actions button.selected { border-color: var(--plyvo-teal-700); color: #fff; background: var(--plyvo-teal-700); }

html[data-plyvo-skin="community"] :is(.status-badge, .platform-status, .role-badges span, .member-profile-status, .guest-badge, .conversation-status) { min-height: 24px; color: var(--plyvo-ink); border-color: transparent; background: var(--plyvo-mint-100); }
html[data-plyvo-skin="community"] .platform-status.is-ready { color: #176b58; background: var(--success-soft); }
html[data-plyvo-skin="community"] :is(.platform-status.needs-attention, .translation-status.is-draft, .member-profile-status[data-status="invited"]) { color: #755510; background: #fff4d6; }
html[data-plyvo-skin="community"] :is(.translation-status.is-missing, .auth-error) { color: #9f3d43; background: #fff1f0; }
html[data-plyvo-skin="community"] .platform-member-frozen-badge { color: #275f78; background: #e6f3f8; }
html[data-plyvo-skin="community"] .platform-bar-track,
html[data-plyvo-skin="community"] .commerce-revenue-track { background: var(--plyvo-mint-100); }
html[data-plyvo-skin="community"] .platform-bar-track span,
html[data-plyvo-skin="community"] .commerce-revenue-fill { background: linear-gradient(90deg, var(--plyvo-teal-700), var(--plyvo-teal-500)); }

html[data-plyvo-skin="community"] :is(.platform-message-center-layout, .platform-message-workspace, .message-list, .platform-message-thread-history, .platform-member-message-history) { border-color: var(--border); background: var(--plyvo-aqua-50); }
html[data-plyvo-skin="community"] :is(.message-bubble.is-own, .platform-message-bubble.is-staff) { border-color: var(--plyvo-mint-300); background: var(--plyvo-mint-100); }
html[data-plyvo-skin="community"] .conversation-avatar { color: var(--plyvo-ink); background: var(--plyvo-mint-300); }

html[data-plyvo-skin="community"] .access-dialog::backdrop { background: rgba(11, 46, 52, .5); }
html[data-plyvo-skin="community"] .access-dialog-panel { border-color: var(--border); color: var(--text); background: #fff; box-shadow: 0 28px 80px rgba(11, 46, 52, .2); }
html[data-plyvo-skin="community"] .dialog-close { color: var(--text-muted); background: var(--plyvo-aqua-50); }

html[data-plyvo-skin="community"] .auth-overlay { background: linear-gradient(135deg, #0b2e34 0%, #0e6b71 48%, #f4f6f6 48%, #fff 100%); }
html[data-plyvo-skin="community"] .auth-card { border-color: var(--border); color: var(--text); background: #fff; box-shadow: 0 30px 90px rgba(11, 46, 52, .24); }
html[data-plyvo-skin="community"] .auth-brand strong,
html[data-plyvo-skin="community"] .auth-card h1 { color: var(--ink); }
html[data-plyvo-skin="community"] .auth-brand small,
html[data-plyvo-skin="community"] .auth-card > p,
html[data-plyvo-skin="community"] .auth-card form label,
html[data-plyvo-skin="community"] .auth-link { color: var(--text-muted); }
html[data-plyvo-skin="community"] .auth-card input { border-color: var(--border-strong); color: var(--ink); background: #fff; }
html[data-plyvo-skin="community"] .auth-password-toggle { color: var(--plyvo-teal-700); background: transparent; }
html[data-plyvo-skin="community"] .auth-password-toggle:hover { color: var(--plyvo-ink); background: var(--plyvo-mint-100); }
html[data-plyvo-skin="community"] .auth-success { border-color: var(--success); color: var(--success-ink) !important; background: var(--success-soft); }
html[data-plyvo-skin="community"] .auth-link:hover { color: var(--plyvo-teal-700); }

/* Public and authentication brand surfaces use the official dark-background palette. */
html[data-plyvo-skin="community"] .public-site { color: #f4f6f6; background: #0b2e34; }
html[data-plyvo-skin="community"] .public-site :is(h1, h2, h3) { color: #f4f6f6; }
html[data-plyvo-skin="community"] .public-header .public-brand img { width: 172px; height: auto; }
html[data-plyvo-skin="community"] .public-footer .public-brand img { width: 138px; height: auto; }
html[data-plyvo-skin="community"] .public-header nav,
html[data-plyvo-skin="community"] :is(.public-hero-copy > p, .public-trust-list, .public-section-heading p, .public-signup-copy > p, .public-about p, .public-contact-card p) { color: color-mix(in srgb, #bdefe9 72%, #f4f6f6); }
html[data-plyvo-skin="community"] .public-hero::before { background: rgba(71, 198, 192, .18); }
html[data-plyvo-skin="community"] :is(.public-kicker, .public-hero h1 em, .public-trust-list li::before, .public-plan-badge, .public-plan-saving, .public-plan-card li::before, .public-form-message) { color: #47c6c0; }
html[data-plyvo-skin="community"] button.public-login-link { border-color: rgba(189, 239, 233, .35); color: #fff; background: rgba(189, 239, 233, .06); box-shadow: none; }
html[data-plyvo-skin="community"] button.public-login-link:hover { border-color: #47c6c0; color: #fff; background: rgba(71, 198, 192, .14); }
html[data-plyvo-skin="community"] :is(.public-primary, .public-plan-card > a) { color: #0b2e34 !important; background: #47c6c0; box-shadow: none; }
html[data-plyvo-skin="community"] .public-primary:hover { background: #bdefe9; }
html[data-plyvo-skin="community"] .public-secondary { border-color: rgba(189, 239, 233, .36); background: rgba(189, 239, 233, .06); }
html[data-plyvo-skin="community"] :is(.public-product-card, .public-plan-card, .public-signup-form) { border-color: rgba(189, 239, 233, .2); background: color-mix(in srgb, #0e6b71 22%, #0b2e34); }
html[data-plyvo-skin="community"] .public-plan-card.is-featured { border-color: rgba(71, 198, 192, .58); background: radial-gradient(circle at 100% 0, rgba(71, 198, 192, .12), transparent 18rem), #0b2e34; }
html[data-plyvo-skin="community"] :is(.public-stat-grid article, .public-activity span, .public-billing-toggle) { border-color: rgba(189, 239, 233, .18); background: rgba(14, 107, 113, .22); }
html[data-plyvo-skin="community"] .public-billing-toggle button { border-color: transparent; color: #bdefe9; background: transparent; box-shadow: none; }
html[data-plyvo-skin="community"] .public-billing-toggle button.is-active { color: #0b2e34; background: #bdefe9; }
html[data-plyvo-skin="community"] .public-activity i,
html[data-plyvo-skin="community"] .public-activity i.is-green,
html[data-plyvo-skin="community"] .public-activity i.is-blue { background: #47c6c0; }
html[data-plyvo-skin="community"] .public-contact-card > a { color: #fff !important; background: #0e6b71; }
html[data-plyvo-skin="community"] .public-signup-copy > div { border-left-color: #47c6c0; background: rgba(189, 239, 233, .05); }
html[data-plyvo-skin="community"] .public-signup-form :is(input, select, textarea) { border-color: rgba(189, 239, 233, .3); color: #fff; background: rgba(11, 46, 52, .72); }

html[data-plyvo-skin="community"] .commerce-row.is-editing,
html[data-plyvo-skin="community"] .subscription-trial-fields,
html[data-plyvo-skin="community"] .upcoming-payment { border-color: var(--plyvo-mint-300); background: var(--plyvo-aqua-50); box-shadow: none; }
html[data-plyvo-skin="community"] .billing-legal-note { border-left-color: var(--plyvo-teal-500); background: var(--plyvo-aqua-50); }
html[data-plyvo-skin="community"] :is(.training-item.selected, .training-choice:has(input:checked), .round-pause-choice:has(input:checked)) { border-color: var(--plyvo-teal-500); color: var(--plyvo-ink); background: var(--plyvo-mint-100); box-shadow: 0 0 0 2px rgba(71, 198, 192, .16); }

@media (max-width: 760px) {
  body.platform-staff-active .sidebar-staff-account { display: none; }
  body.platform-staff-active .header-actions { display: flex; }
  html[data-plyvo-skin="community"] .app-content { padding: 22px 16px 84px; }
  html[data-plyvo-skin="community"] .card { padding: 16px; }
  html[data-plyvo-skin="community"] .brand-logo-community { width: 200px; max-height: 78px; }
  html[data-plyvo-skin="community"] .platform-nav-section { display: none !important; }
  html[data-plyvo-skin="community"] .platform-system-nav,
  html[data-plyvo-skin="community"] .platform-nav-submenu { display: contents; }
  html[data-plyvo-skin="community"] .platform-nav-parent { display: none; }
  html[data-plyvo-skin="community"] .platform-nav-child.tab { padding: 7px 3px 6px; }
  html[data-plyvo-skin="community"] .platform-nav-child.tab::before,
  html[data-plyvo-skin="community"] .platform-nav-child-marker { display: none; }
  html[data-plyvo-skin="community"] .tabs {
    grid-template-columns: none;
    grid-auto-columns: 72px;
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    border-color: rgba(189, 239, 233, .22);
    background: rgba(11, 46, 52, .97);
    box-shadow: 0 16px 44px rgba(11, 46, 52, .3);
    scrollbar-width: none;
  }
  html[data-plyvo-skin="community"] .tabs::-webkit-scrollbar,
  html[data-plyvo-skin="community"] :is(.platform-club-detail-tabs, .commerce-detail-tabs)::-webkit-scrollbar { display: none; }
  html[data-plyvo-skin="community"] .tabs .tab { width: 72px; min-height: 54px; scroll-snap-align: start; }
  html[data-plyvo-skin="community"] .tabs .tab > span { width: 100%; }
  html[data-plyvo-skin="community"] :is(.platform-club-detail-tabs, .commerce-detail-tabs) { scrollbar-width: none; }
  html[data-plyvo-skin="community"] button,
  html[data-plyvo-skin="community"] select,
  html[data-plyvo-skin="community"] input { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-plyvo-skin="community"] *,
  html[data-plyvo-skin="community"] *::before,
  html[data-plyvo-skin="community"] *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}