/* RIFTLAB STUDIOS WEBSITE - GLOBAL STYLESHEET */
/* Consolidated from all HTML inline <style> tags */

/* ========================================
   FONT IMPORTS - MODERN & FUTURISTIC
   ======================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Space+Grotesk:wght@400;500;600;700&family=Orbitron:wght@400;700;900&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Riftlab Sans';
  src: url('../RiftlabSans-Regular.otf') format('opentype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ========================================
   CSS CUSTOM PROPERTIES & VARIABLES
   ======================================== */
:root {
  /* Modern Font Families */
  --font-futuristic: "Orbitron", "Space Grotesk", sans-serif;
  --font-main: "Inter", "Space Grotesk", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", monospace;

  /* Static brand palette - true black/white surfaces used by the public site base styles,
     independent of the light/dark theme toggle below */
  --bp-bg: #050505;
  --bp-surface: #101010;
  --bp-surface-soft: #171717;
  --bp-border: #2b2b2b;
  --bp-text: #f2f2f2;
  --bp-text-muted: #b5b5b5;
  --bp-white: #ffffff;
  --bp-black: #000000;

  /* Sidebar icon-rail width when collapsed to icons-only (expands on hover) */
  --sidebar-rail-width: 56px;

  /* Corner radius scale - shared by every surface (dashboard, CLI, public site) */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Dashboard Theme (Light Mode) */
  --bg-primary: #d6d0c8;
  --bg-secondary: #e9e2d9;
  --bg-tertiary: #dcd4ca;
  --text-primary: #171411;
  --text-secondary: #4b443d;
  --text-tertiary: #6d645a;
  --border-color: #b9afa3;
  --hover-bg: rgba(23, 20, 17, 0.06);
  --hover-bg-darker: rgba(23, 20, 17, 0.13);
  --accent-primary: #111111;
  --accent-strong: #000000;
  --accent-surface: #d3cbc1;
  --accent-cyan: #111111;
  --border-accent: #111111;
  --accent-red: #6b1d1d;

  /* Status/priority semantic palette - desaturated tokens, single source of
     truth so the Gantt chart, badges, and workload panel can't drift apart
     (see dashboard-improvements pass). *-bg variants are low-opacity tints
     for badge/chip backgrounds, never a solid saturated fill. */
  --status-pending: #9a6a2e;
  --status-pending-bg: rgba(154, 106, 46, 0.14);
  --status-progress: #3d5a73;
  --status-progress-bg: rgba(61, 90, 115, 0.14);
  --status-completed: #2f6b47;
  --status-completed-bg: rgba(47, 107, 71, 0.14);
  --status-danger: #8a3a2e;
  --status-danger-bg: rgba(138, 58, 46, 0.14);

  --shadow: 0 1px 2px rgba(23, 20, 17, 0.08), 0 8px 24px rgba(23, 20, 17, 0.05);
  --shadow-elevated: 0 4px 10px rgba(23, 20, 17, 0.08), 0 18px 36px rgba(23, 20, 17, 0.06);
  --shadow-glow: 0 0 0 1px rgba(23, 20, 17, 0.1), 0 8px 24px rgba(23, 20, 17, 0.12);
  --glass-bg: rgba(236, 230, 222, 0.92);
  --glass-border: rgba(23, 20, 17, 0.1);
  --button-bg: #111111;
  --button-bg-hover: #000000;
  --button-text: #ffffff;
  --focus-ring: 0 0 0 3px rgba(17, 17, 17, 0.15);

  /* Transition variables - fast, ease-out: state changes should feel instant,
     never bouncy or elastic (precision-instrument feel, not consumer-app). */
  --transition-fast: 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.22s cubic-bezier(0.16, 1, 0.3, 1);

  /* Font defaults */
  font-family: var(--font-main);
}

/* Dashboard Dark Mode */
body.dark-mode {
  --bg-primary: #050505;
  --bg-secondary: #101010;
  --bg-tertiary: #171717;
  --text-primary: #f2f2f2;
  --text-secondary: #b8b8b8;
  --text-tertiary: #888888;
  --border-color: #2b2b2b;
  --hover-bg: rgba(255, 255, 255, 0.1);
  --hover-bg-darker: rgba(255, 255, 255, 0.18);
  --accent-primary: #ffffff;
  --accent-strong: #e0e0e0;
  --accent-surface: #1a1a1a;
  --accent-cyan: #ffffff;
  --border-accent: #e0e0e0;
  --accent-red: #ff6b6b;

  --status-pending: #d1a05c;
  --status-pending-bg: rgba(209, 160, 92, 0.16);
  --status-progress: #7fa8c9;
  --status-progress-bg: rgba(127, 168, 201, 0.16);
  --status-completed: #6fbf8b;
  --status-completed-bg: rgba(111, 191, 139, 0.16);
  --status-danger: #d97a6c;
  --status-danger-bg: rgba(217, 122, 108, 0.16);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 4px 6px rgba(0, 0, 0, 0.4), 0 20px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 24px rgba(0, 0, 0, 0.3);
  --glass-bg: rgba(16, 16, 16, 0.9);
  --glass-border: rgba(255, 255, 255, 0.15);
  --focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.18);
  --button-bg: #ffffff;
  --button-bg-hover: #e0e0e0;
  --button-text: #000000;
  --transition-fast: 0.12s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-base: 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global focus-visible styles for accessibility */
*:focus-visible {
  outline: 2px solid var(--border-accent);
  outline-offset: 2px;
}

html.page-loading body {
  overflow: hidden;
}

html.page-loading body > :not(.page-loader) {
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(5, 5, 5, 0.98);
  backdrop-filter: blur(12px);
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

html:not(.page-loading) .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader-card {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  min-width: 220px;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(214, 208, 200, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(17, 15, 13, 0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  color: #d8d0c6;
  text-align: center;
}

.page-loader-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(214, 208, 200, 0.16);
  border-top-color: #d8d0c6;
  animation: pageLoaderSpin 0.9s linear infinite;
}

.page-loader-text {
  margin: 0;
  font-family: var(--font-futuristic);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #d2c9bf;
}

@keyframes pageLoaderSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   DASHBOARD ANIMATIONS
   ======================================== */

/* Smooth scrolling for main content */
.main-content {
  scroll-behavior: smooth;
}

/* Content section visibility/panel styling lives further down, see
   "Content section panel styling" - kept in one place instead of scattered
   duplicate blocks so the cascade is easy to follow. */

/* Navigation panel animations */
.nav-panel {
  transition: all var(--transition-base);
}

.nav-panel-header {
  transition: all var(--transition-fast);
}

.nav-panel-toggle {
  transition: transform var(--transition-base);
}

.nav-panel.collapsed .nav-panel-toggle {
  transform: rotate(-90deg);
}

.nav-panel-content {
  animation: panelExpand 0.2s ease forwards;
}

@keyframes panelExpand {
  from {
    opacity:0;
    transform: translateY(-4px);
  }
  to {
    opacity:1;
    transform: translateY(0);
  }
}

/* Navigation link animations */
.sidebar .nav-link {
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.sidebar .nav-link::before {
  content: '';
  position: absolute;
  left:0;
  top:50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 70%;
  background: var(--accent-cyan);
  border-radius: 0 2px 2px 0;
  transition: transform var(--transition-base);
}

.sidebar .nav-link:hover::before,
.sidebar .nav-link.active::before {
  transform: translateY(-50%) scaleY(1);
}

.sidebar .nav-link:active {
  transform: translateX(2px) scale(0.98);
}

/* Button animations */
.btn-primary,
.btn-secondary,
.view-btn,
button[type="submit"],
button[type="button"] {
  transition: all var(--transition-base);
}

.btn-primary:active,
.btn-secondary:active,
.view-btn:active {
  transform: scale(0.96);
}

/* View button animations */
.view-btn {
  transition: all var(--transition-base);
}

/* .view-btn.active styling (incl. activeTabPulse animation) is defined once,
   further down, alongside its other active-state properties. */

/* Task card animations */
.task-card,
.team-member-card,
.report-card,
.absences-panel,
.ideas-list-item,
.list-container {
  transition: all var(--transition-base);
  animation: fadeInCard 0.3s ease forwards;
}

@keyframes fadeInCard {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.task-card:hover,
.team-member-card:hover,
.report-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

/* Table row animations */
.absences-table tbody tr,
table tbody tr {
  transition: all var(--transition-fast);
}

.absences-table tbody tr:hover,
table tbody tr:hover {
  background: var(--hover-bg);
  transform: scale(1.002);
}

/* Form input focus animations */
input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
textarea,
select {
  transition: all var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

/* Modal animations */
.modal,
[class*="modal"] {
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal.active,
[class*="modal"].active {
  animation: modalFadeIn 0.3s ease forwards;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal-content,
[class*="modal"] > div {
  animation: modalSlideIn 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Message animations */
.message {
  animation: messageSlideIn 0.3s ease forwards;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
    padding: 0;
    margin: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}

/* Global search focus animation */
.global-search input:focus {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.12);
}

/* Mobile nav select animation */
.mobile-nav-select {
  transition: all var(--transition-base);
}

.mobile-nav-select:focus {
  transform: translateY(-1px);
}

/* Bulk actions bar animation */
.bulk-actions-bar {
  animation: slideUpFade 0.3s ease forwards;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Resources tab button animations */
.resources-tab-btn {
  transition: all var(--transition-base);
}

.resources-tab-btn:active {
  transform: scale(0.97);
}

.resources-tab-btn.active {
  animation: activeTabGlow 0.4s ease;
}

@keyframes activeTabGlow {
  0% { box-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  100% { box-shadow: var(--shadow-glow); }
}

/* Details/summary expand animation */
details > summary {
  transition: all var(--transition-base);
  cursor: pointer;
}

details > summary:hover {
  background: var(--hover-bg);
  padding-left: 0.5rem;
}

details[open] > summary {
  margin-bottom: 0.5rem;
}

details > div,
details > .absences-disclosure-content {
  animation: detailsExpand 0.3s ease forwards;
}

@keyframes detailsExpand {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 2000px;
    overflow: visible;
  }
}

/* ========================================
   DASHBOARD CORE STYLES - OBSIDIAN/CLAUDEFLARE INSPIRED
   ======================================== */
.dashboard-container {
  display: flex;
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.sidebar {
  width: var(--sidebar-rail-width);
  background: var(--bg-secondary);
  border-right:1px solid var(--border-color);
  position: fixed;
  top:0;
  left:0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 50;
  transition: transform var(--transition-base), width var(--transition-base), box-shadow var(--transition-base);
}

/* Compact icon rail by default; expands over the page content on hover/focus
   so the layout doesn't reflow every time a viewer mouses over it. */
.sidebar:hover,
.sidebar:focus-within {
  width: 260px;
  box-shadow: var(--shadow-elevated);
}

/* Icon-rail <-> expanded transition: the icon's own position never moves
   between states (nav-link keeps its normal constant padding - see the
   .dashboard-container .sidebar .nav-link rule below - with no
   justify-content flip), so widening the sidebar is the ONLY layout change
   happening; labels just fade in on top of a hidden second column that was
   there all along. Two elements changing independently (icon re-centering +
   width) was the earlier source of the flash/misalignment glitch; one
   animated property fixes it. */
.nav-link-label,
.nav-link-count {
  opacity: 1;
  transition: opacity var(--transition-fast) 0.06s;
  white-space: nowrap;
}

.sidebar:not(:hover):not(:focus-within) .nav-link-label,
.sidebar:not(:hover):not(:focus-within) .nav-link-count {
  opacity: 0;
  pointer-events: none;
  transition-delay: 0s;
}

/* No category-name header row at all - between fading it in/out (flash) and
   reserving its height always (permanent empty block on the icon rail),
   neither read as "no gap", so the group name is dropped entirely. Groups
   are separated purely by the divider line (.nav-panel + .nav-panel further
   down), which costs zero extra height in either sidebar state and needs no
   animation of its own - the sidebar's existing width transition is the
   only motion left, and it's already smooth. */
.nav-panel-header {
  display: none;
}

.sidebar-header {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.sidebar-logo {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

.sidebar-title {
  font-family: "Riftlab Sans", var(--font-futuristic);
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  flex: 1;
}

.sidebar-nav-wrapper {
  flex: 1;
  /* Flex items default to min-height:auto (never shrink below content), which
     defeats flex:1 + overflow-y:auto here - with enough nav content this
     wrapper refuses to shrink and pushes the footer-cap below the sidebar's
     fixed-height, clipped box instead of scrolling internally. min-height:0
     lets it actually shrink to fit, so the footer stays anchored in view. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.5rem 0;
}

.sidebar-nav-wrapper::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav-wrapper::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

.sidebar-nav-wrapper::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* The 4px scrollbar above reads fine on the 260px expanded sidebar, but on
   the default 56px icon rail (see ".sidebar:hover, .sidebar:focus-within"
   above) it's disproportionately thick - thin it out for that resting
   state specifically. */
.sidebar:not(:hover):not(:focus-within) .sidebar-nav-wrapper {
  scrollbar-width: thin;
}

.sidebar:not(:hover):not(:focus-within) .sidebar-nav-wrapper::-webkit-scrollbar {
  width: 2px;
}

.sidebar-nav {
  padding: 0.25rem 0;
  flex: 1;
  overflow-y: auto;
}

.nav-panel {
  margin: 0 0.5rem 0.25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid transparent;
  transition: all var(--transition-base);
}

.nav-panel:hover {
  border-color: var(--border-color);
}

.nav-panel-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.nav-panel-toggle {
  font-size: 0.6rem;
  color: var(--text-tertiary);
  transition: transform var(--transition-base);
  display: inline-flex;
}

.nav-panel.collapsed .nav-panel-toggle {
  transform: rotate(-90deg);
}

.nav-panel.collapsed .nav-panel-content {
  display: none;
}

.nav-panel-content {
  padding: 0.125rem 0 0.25rem;
  animation: panelExpand 0.2s ease forwards;
}

.nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  margin: 0.35rem 0.75rem;
  opacity: 0.5;
}

.sidebar .nav-link {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.6rem;
  margin: 0.0625rem 0.25rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  transition: all var(--transition-fast);
  position: relative;
  gap: 0.5rem;
}

.sidebar .nav-link:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
  transform: translateX(2px);
}

.sidebar .nav-link.active {
  background: var(--accent-surface);
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--border-accent);
}

.sidebar .nav-link:active {
  transform: translateX(2px) scale(0.98);
}

.nav-link-icon {
  font-size: 0.875rem;
  width: 1rem;
  height: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar .nav-link-icon,
.sidebar .nav-link-icon[data-lucide],
.sidebar .nav-link-icon.lucide {
  width: 1rem;
  height: 1rem;
}

/* Lucide icon styling */
.lucide, [data-lucide] {
  width: 1.25em;
  height: 1.25em;
  stroke-width: 1.5;
  vertical-align: middle;
}

.icon-inline {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

/* Nav panel icon colors */
.nav-panel[data-panel="main"] .nav-link-icon { color: #ffffff; }
.nav-panel[data-panel="team"] .nav-link-icon { color: #a78bfa; }
.nav-panel[data-panel="resources"] .nav-link-icon { color: #34d399; }
.nav-panel[data-panel="planning"] .nav-link-icon { color: #fbbf24; }
.nav-panel[data-panel="insights"] .nav-link-icon { color: #fb923c; }
.nav-panel[data-panel="support"] .nav-link-icon { color: #f472b6; }
.nav-panel[data-panel="administration"] .nav-link-icon { color: #f87171; }

/* Priority icon colors */
.g-icon-priority-low { color: #27ae60; }
.g-icon-priority-medium { color: #f2c94c; }
.g-icon-priority-high { color: #eb5757; }
.g-icon-priority-critical { color: #ff6b6b; }

.icon-priority-low { color: #27ae60; }
.icon-priority-medium { color: #f2c94c; }
.icon-priority-high { color: #eb5757; }
.icon-priority-critical { color: #ff6b6b; }

/* Status icon colors */
.g-icon-status-pending { color: #f2c94c; }
.g-icon-status-progress { color: #ffffff; }
.g-icon-status-completed { color: #27ae60; }
.g-icon-status-canceled { color: #888; }
.g-icon-status-hold { color: #f2994a; }

.g-icon-overdue { color: #eb5757; }
.g-icon-due-today { color: #eb5757; }
.g-icon-due-tomorrow { color: #f2994a; }
.g-icon-due-week { color: #f2c94c; }
.g-icon-due-month { color: #ffffff; }
.g-icon-future { color: #a78bfa; }
.g-icon-no-deadline { color: #888; }
.g-icon-no-category { color: #888; }
.g-icon-branch { color: currentColor; margin-right: 0.4rem; vertical-align: middle; }
.branch-icon-badge .g-icon-branch { margin-right: 0; }
.g-icon-default { color: #888; }
.g-icon-bug { color: #eb5757; }

/* Category icon colors */
.g-icon-cat-game { color: #667eea; }
.g-icon-cat-web { color: #764ba2; }
.g-icon-cat-web { color: #ffffff; }
.g-icon-cat-other { color: #888; }

/* Assignee icons */
.g-icon-assigned-me { color: #27ae60; }
.g-icon-assigned-not-me { color: #888; }
.g-icon-user { color: #667eea; }
.g-icon-milestone { color: #f2c94c; }

/* Context menu icon sizing */
.context-menu-icon { width: 1em; height: 1em; }
.context-menu [data-lucide] { width: 1em; height: 1em; }

/* Admin widget icon colors */
.admin-icon { color: #ffffff; }
.admin-stat-icon { color: #a78bfa; }
.admin-btn-icon { color: #fbbf24; }

/* Section header icons */
.section-header-icon { color: #ffffff; vertical-align: middle; margin-right: 0.35rem; }

/* Tab icons (resources sub-tabs) */
.tab-icon { vertical-align: middle; margin-right: 0.35rem; color: var(--text-primary); }

/* Permission icons */
.permission-icon { vertical-align: middle; margin-right: 0.35rem; color: #a78bfa; }

/* Activity log icons */
.activity-icon-svg { vertical-align: middle; }

/* Floating controls */
.admin-toggle-btn [data-lucide] { width: 1.2em; height: 1.2em; }

.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  flex-shrink: 0;
}

.user-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.user-info-label {
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-info-name {
  font-size: 0.8125rem;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logout-btn {
  width: 100%;
  padding: 0.375rem 0.5rem;
  margin-top: 0.25rem;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.75rem;
  transition: all var(--transition-fast);
}

.logout-btn:hover {
  background: var(--hover-bg-darker);
  color: var(--text-primary);
}

/* Mobile responsive */
@media (max-width: 900px) {
  .sidebar {
    display: none;
  }

  .main-content {
    margin-left: 0;
    padding: 1rem;
  }

  .mobile-nav-select-wrap {
    display: block !important;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-nav-select {
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
  }

  .mobile-nav-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--focus-ring);
  }

  .mobile-top-actions {
    display: block !important;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-top-actions-toggle {
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all var(--transition-fast);
  }

  .mobile-top-actions-toggle:hover {
    background: var(--hover-bg);
    border-color: var(--text-tertiary);
  }

  .mobile-top-actions-toggle[aria-expanded="true"] {
    border-color: var(--border-accent);
    box-shadow: var(--focus-ring);
  }

  .mobile-quick-actions-menu {
    display: none;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    flex-direction: column;
    gap: 0.375rem;
  }

  .mobile-quick-actions-menu.active {
    display: flex;
    animation: slideDown 0.2s ease forwards;
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .mobile-quick-actions-menu .btn-secondary {
    width: 100%;
    justify-content: center;
    padding: 0.5rem;
    font-size: 0.8125rem;
  }
}

.mobile-nav-select-wrap {
  display: none;
}

.user-info {
  margin-top: auto;
  padding: 0.75rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

#logoutBtn {
  width: 100%;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
}

#logoutBtn:hover {
  background: var(--hover-bg);
}

.main-content {
  margin-left: var(--sidebar-rail-width);
  flex:1;
  min-width:0;
  padding: 1.5rem 2rem 2.5rem;
  max-width: 100%;
  overflow-x: hidden;
  color: var(--text-primary);
  position: relative;
  transition: margin-left var(--transition-base);
  background: var(--bg-primary);
}

/* Content section panel styling.
   Visibility/entrance animation for .active is set below via .content-section.active
   (the fadeInSection keyframe that used to live here was always overridden by that
   higher-specificity rule, so it never actually rendered - removed as dead code). */
.content-section {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
}

.content-section:not(.active) {
  display: none;
}

/* Section header panel style */
/* Global search panel style */
.global-search {
  display: block;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 40;
}

.global-search input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.global-search input::placeholder {
  color: var(--text-tertiary);
}

.global-search input:focus {
  outline: none;
  border-color: var(--border-accent);
  background: var(--bg-secondary);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(255, 255, 255, 0.12);
}

.content-section.active {
  display: block;
  animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.content-section.permission-hidden {
  display: none !important;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-color);
  gap: 0.8rem;
  flex-wrap: wrap;
}

.section-header h1 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin: 0;
}

.message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
  display: none;
  font-size: 0.875rem;
}

.message.success {
  background: #d1f4e0;
  color: #2d6e4e;
  border: 1px solid #a5d6c0;
}

.message.error {
  background: #ffe2dd;
  color: #d44c47;
  border: 1px solid #f5b5af;
}

.message.warning {
  background: var(--status-pending-bg);
  color: var(--status-pending);
  border: 1px solid var(--status-pending);
}

.message.active {
  display: block;
}

.view-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 1rem;
  padding: 0.375rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.view-btn {
  padding: 0.375rem 0.75rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.view-btn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.view-btn.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-weight: 600;
  border-color: var(--border-color);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  animation: activeTabPulse 0.3s ease;
}

@keyframes activeTabPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.tasks-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

/* --- Overview health strip --- */
.health-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.health-strip-item {
  flex: 1;
  min-width: 150px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.health-strip-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.health-strip-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.health-strip-value.health-strip-empty {
  color: var(--text-tertiary);
  font-weight: 500;
}

/* --- Kanban board view --- */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
  align-items: start;
}

@media (max-width: 900px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
}

.kanban-column {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.75rem;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.kanban-column-dragover {
  background: var(--hover-bg);
  border-color: var(--border-accent);
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 0.25rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
}

.kanban-column-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}

.kanban-column-count {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-pill);
  padding: 0.05rem 0.5rem;
}

.kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 60px;
}

.kanban-column-empty {
  color: var(--text-tertiary);
  font-size: 0.8rem;
  text-align: center;
  padding: 1rem 0;
}

.kanban-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  cursor: grab;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.kanban-card:hover {
  border-color: var(--border-accent);
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.kanban-card-deadline {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.kanban-card-deadline.overdue {
  color: var(--status-danger);
}

.kanban-card-assignee {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.task-card {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
  transition: all var(--transition-base);
  cursor: pointer;
  animation: fadeInCard 0.3s ease forwards;
}

.task-card:hover {
  background: var(--bg-secondary);
  border-color: var(--border-accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
}

.task-card:last-child {
  border-bottom: 1px solid var(--border-color);
}

.task-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.task-description {
  color: var(--text-secondary);
  margin: 0.45rem 0 0.7rem;
  font-size: 0.88rem;
}

.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.task-actions {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}

.btn-small {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.8rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  transition: all 0.15s ease;
  font-weight: 500;
}

.btn-small:hover {
  background: var(--hover-bg-darker);
}

.btn-icon-only {
  padding: 0.3rem;
  width: 1.65rem;
  height: 1.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-icon-only svg,
.btn-icon-only i {
  width: 0.85rem;
  height: 0.85rem;
}

.priority-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.btn-edit {
  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--border-color);
}

.btn-delete {
  background: rgba(235, 87, 87, 0.15);
  color: var(--accent-red);
  border-color: rgba(235, 87, 87, 0.35);
  transition: all 0.2s ease;
}
.btn-delete:hover {
  background: rgba(235, 87, 87, 0.25);
  border-color: rgba(235, 87, 87, 0.6);
  box-shadow: 0 4px 12px rgba(235, 87, 87, 0.2);
  transform: translateY(-1px);
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:0.75rem;
}

.team-card,
.category-item,
.role-item,
.widget-card,
.report-card,
.list-card,
.milestone-item,
.activity-item,
.profile-edit-container {
  background: var(--bg-primary);
  border:1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: all var(--transition-base);
}

.team-card:hover,
.report-card:hover,
.list-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--border-accent);
}

.report-card {
  animation: fadeInCard 0.3s ease forwards;
}

/* Bulk actions bar */
.bulk-actions-bar {
  position: sticky;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  animation: slideUpFade 0.3s ease forwards;
  z-index: 30;
}

.table-view,
.ideas-table,
.absences-table,
.admin-table,
.list-items-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-secondary);
}

/* .table-view (the Tasks table view) has no mobile card fallback like the
   Bugs table does, so on narrow screens it needs to scroll horizontally
   instead of clipping its Actions column - same fix as #bugsTableContainer. */
.table-view {
  display: block;
  overflow-x: auto;
}

.table-view th,
.table-view td,
.ideas-table th,
.ideas-table td,
.absences-table th,
.absences-table td,
.list-items-table th,
.list-items-table td {
  border-bottom: 1px solid var(--border-color);
  padding: 0.7rem 0.8rem;
  text-align: left;
  color: var(--text-primary);
}

.table-view th,
.ideas-table th,
.absences-table th,
.list-items-table th {
  background: var(--bg-tertiary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* form-group styles are in DASHBOARD EXTENDED STYLES section below */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  z-index: 1000;
}

.modal.active {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  width: min(92vw, 600px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 1.2rem;
  box-shadow: var(--shadow-elevated);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.close-modal {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.35rem;
  cursor: pointer;
}

.close-modal:hover {
  color: var(--text-primary);
}

@media (max-width: 900px) {
  .dashboard-container {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow-y: visible;
  }

  .main-content {
    margin-left: 0;
    padding: 1.1rem;
    min-width: 0;
    width: 100%;
  }

  .mobile-nav-select-wrap {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem;
  }

  .nav-row {
    display: none;
  }

  .section-header {
    flex-wrap: wrap;
  }

  .section-header h1 {
    font-size: 1.45rem;
  }

  /* View selector - hide buttons, show dropdown */
  .view-selector {
    display: none;
  }

  .mobile-view-select {
    display: block !important;
    width: 100%;
    padding: 0.625rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    margin-bottom: 1rem;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
  }

  .mobile-view-select:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--focus-ring);
  }

  /* Workload tab - compact on mobile */
  .workload-widgets,
  #workloadChart {
    grid-template-columns: 1fr !important;
    gap: 0.5rem;
  }

  .workload-member,
  .workload-card {
    padding: 0.75rem;
  }

  /* Lists - scrollable items on mobile */
  .lists-container,
  #listsContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .list-container,
  .list-card {
    min-width: 300px;
  }
}

@media (max-width: 900px) {
  table {
    min-width: 600px;
    width: 100%;
  }

  .mobile-table-message {
    display: none;
  }

  /* Personal Tasks - compact on mobile */
  #personalTasksColumns {
    grid-template-columns: 1fr !important;
    gap: 0.5rem;
  }

  .tasks-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  /* Absence panels - compact on mobile */
  .absences-panel {
    padding: 0.75rem;
    overflow-x: auto;
  }

  .absences-section-block {
    margin-bottom: 1rem;
  }

  .absences-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .absences-panel--glass {
    padding: 0.75rem;
  }

  .absences-table {
    font-size: 0.75rem;
  }

  .absences-table th,
  .absences-table td {
    padding: 0.375rem;
    white-space: nowrap;
  }

  /* Modal compact on mobile */
  .modal-content {
    width: 95vw;
    max-width: none;
    margin: 1rem;
    padding: 1rem;
  }
}

/* ========================================
   DASHBOARD EXTENDED STYLES
   (All component styles for tabs & dynamic content)
   ======================================== */

/* Override the global "color: white" rule that pollutes all dashboard buttons */
.dashboard-container button {
  color: inherit;
  font-family: inherit;
}
.dashboard-container .btn-primary  { color: var(--button-text) !important; }
.dashboard-container .btn-secondary { color: var(--text-primary) !important; }
.dashboard-container .btn-small    { color: var(--text-primary) !important; }
.dashboard-container .btn-edit     { color: var(--button-text) !important; }

/* --- btn-secondary --- */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-secondary:hover {
  background: var(--hover-bg-darker);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Claim reuses the same green already meaning "positive action / assigned to
   me" elsewhere (g-icon-assigned-me, priority-badge-low) rather than the old
   static cyan fill, which was the one static (non-hover) cyan spot the
   earlier cyan-removal pass missed. */
.btn-claim {
  background: rgba(39, 174, 96, 0.16) !important;
  border-color: rgba(39, 174, 96, 0.45) !important;
  color: #27ae60 !important;
  font-weight: 700;
}
.btn-claim:hover {
  background: rgba(39, 174, 96, 0.28) !important;
  color: #27ae60 !important;
}

.dashboard-container .btn-small.btn-claim,
.dashboard-container .btn-small.btn-claim:hover,
.dashboard-container .btn-small.btn-claim:focus,
.dashboard-container .btn-small.btn-claim:active,
.dashboard-container .btn-small.btn-claim * {
  color: #27ae60 !important;
}
body .dashboard-container .btn-small.btn-claim {
  color: #27ae60 !important;
}

body:has(.dashboard-container) {
  background: var(--bg-primary);
  color: var(--text-primary);
}
body.dark-mode:has(.dashboard-container) {
  background: var(--bg-primary);
}

body:not(.dark-mode) .dashboard-container {
  background: transparent;
}

body:not(.dark-mode) .sidebar,
body:not(.dark-mode) .user-info,
body:not(.dark-mode) .modal-content,
body:not(.dark-mode) .widget-card,
body:not(.dark-mode) .report-card,
body:not(.dark-mode) .team-card,
body:not(.dark-mode) .list-card,
body:not(.dark-mode) .milestone-item,
body:not(.dark-mode) .activity-item,
body:not(.dark-mode) .release-note-card,
body:not(.dark-mode) .workload-member,
body:not(.dark-mode) .resources-tab-btn,
body:not(.dark-mode) .group-card,
body:not(.dark-mode) .role-item,
body:not(.dark-mode) .category-item,
body:not(.dark-mode) .absences-panel,
body:not(.dark-mode) .absences-guide,
body:not(.dark-mode) .task-card,
body:not(.dark-mode) .idea-card,
body:not(.dark-mode) .idea-probability-column,
body:not(.dark-mode) .admin-personal-task-widget,
body:not(.dark-mode) .profile-edit-container,
body:not(.dark-mode) .table-view,
body:not(.dark-mode) .ideas-table,
body:not(.dark-mode) .absences-table,
body:not(.dark-mode) .admin-table,
body:not(.dark-mode) .list-items-table,
body:not(.dark-mode) .calendar-controls,
body:not(.dark-mode) .calendar-view,
body:not(.dark-mode) .search-results-dropdown,
body:not(.dark-mode) .context-menu,
body:not(.dark-mode) #personalTaskEditModal,
body:not(.dark-mode) #adminWidget.admin-widget {
  background: linear-gradient(180deg, rgba(240, 234, 226, 0.98), rgba(229, 221, 212, 0.98));
  border-color: rgba(23, 20, 17, 0.12);
  box-shadow: var(--shadow);
}

body:not(.dark-mode) .main-content {
  color: var(--text-primary);
}

body:not(.dark-mode) .section-header h1,
body:not(.dark-mode) .milestone-title,
body:not(.dark-mode) .report-title,
body:not(.dark-mode) .widget-title,
body:not(.dark-mode) .handbook-title,
body:not(.dark-mode) .game-feature-title {
  color: var(--text-primary);
}

body:not(.dark-mode) .view-btn,
body:not(.dark-mode) .resources-tab-btn,
body:not(.dark-mode) .btn-small,
body:not(.dark-mode) .btn-secondary,
body:not(.dark-mode) #logoutBtn,
body:not(.dark-mode) .calendar-nav button,
body:not(.dark-mode) .handbook-toolbar button,
body:not(.dark-mode) .admin-btn,
body:not(.dark-mode) .admin-toggle-btn,
body:not(.dark-mode) .dark-mode-toggle,
body:not(.dark-mode) .hint-fab {
  background: var(--bg-tertiary);
  border-color: rgba(23, 20, 17, 0.12);
  color: var(--text-primary);
}

body:not(.dark-mode) .view-btn.active,
body:not(.dark-mode) .resources-tab-btn.active,
body:not(.dark-mode) .admin-toggle-btn.active {
  background: #1b1815;
  color: #f7f2ec;
  border-color: #1b1815;
  box-shadow: 0 10px 20px rgba(23, 20, 17, 0.16);
}

body:not(.dark-mode) .global-search input,
body:not(.dark-mode) .form-group input,
body:not(.dark-mode) .form-group textarea,
body:not(.dark-mode) .form-group select,
body:not(.dark-mode) .personal-task-edit-form input,
body:not(.dark-mode) .personal-task-edit-form textarea,
body:not(.dark-mode) .personal-task-edit-form select,
body:not(.dark-mode) .list-item-title,
body:not(.dark-mode) .list-item-description,
body:not(.dark-mode) .list-item-assignee,
body:not(.dark-mode) .list-item-status,
body:not(.dark-mode) .list-item-due-date,
body:not(.dark-mode) .admin-select,
body:not(.dark-mode) .mobile-nav-select,
body:not(.dark-mode) .handbook-editor {
  background: rgba(248, 244, 239, 0.96);
  border-color: rgba(23, 20, 17, 0.14);
  color: var(--text-primary);
}

body:not(.dark-mode) .calendar-header,
body:not(.dark-mode) .list-items-table th,
body:not(.dark-mode) .table-view th,
body:not(.dark-mode) .ideas-table th,
body:not(.dark-mode) .absences-table th,
body:not(.dark-mode) #bugsTableContainer th,
body:not(.dark-mode) .group-header,
body:not(.dark-mode) .task-group h3,
body:not(.dark-mode) .admin-widget-header {
  background: rgba(216, 207, 197, 0.78);
}

body:not(.dark-mode) .message.success {
  background: #d7eadc;
  color: #284f37;
  border-color: #a8c7b2;
}

body:not(.dark-mode) .message.error {
  background: #f3d9d5;
  color: #7e302a;
  border-color: #dbaca7;
}

/* --- btn-save (modal save action) --- */
.btn-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.1rem;
  background: var(--button-bg);
  color: var(--button-text) !important;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.btn-save:hover { opacity: 0.85; }

/* --- btn-approve / btn-deny --- */
.btn-approve {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(39,174,96,0.5);
  background: rgba(39,174,96,0.1);
  color: #27ae60;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-approve:hover { background: rgba(39,174,96,0.22); }
.btn-deny {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(235,87,87,0.4);
  background: rgba(235,87,87,0.1);
  color: #eb5757;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-deny:hover { background: rgba(235,87,87,0.22); }

/* --- Form fields - improved look --- */
.form-group {
  margin-bottom: 1rem;
}
.form-group label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  opacity: 0.85;
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
/* Selects get a custom chevron instead of the OS-native dropdown arrow, so
   they don't clash with the dark, custom-bordered look every other field
   already has (this used to be scoped to .dashboard-container only, which
   missed selects inside modals rendered outside that container, e.g. the
   Account Settings modal). */
.form-group select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 14px;
  padding-right: 2.2rem;
  cursor: pointer;
}
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
  background: rgba(255, 255, 255, 0.02);
}
/* Dark-mode focus previously hardcoded a separate white glow here - now just
   inherits the unified --focus-ring (blue accent) from the base rule above,
   so focus states are consistent everywhere instead of two different rings. */
.form-group select option {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

/* Staff User Organizer form - keep each label tight to its own field */
#staffOrganizerForm .form-field label {
  margin-bottom: 0.4rem;
}
#staffOrganizerForm .form-field {
  margin-bottom: 0;
}
#staffOrganizerForm select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.2rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-secondary) 50%),
    linear-gradient(135deg, var(--text-secondary) 50%, transparent 50%);
  background-position: calc(100% - 1.1rem) center, calc(100% - 0.85rem) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* --- Priority badges --- */
.priority-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: capitalize;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.priority-badge-low {
  background: rgba(39,174,96,0.12);
  color: #27ae60;
  border-color: rgba(39,174,96,0.3);
}
.priority-badge-low:hover {
  background: rgba(39,174,96,0.22);
  border-color: rgba(39,174,96,0.6);
}
.priority-badge-medium {
  background: rgba(242,153,74,0.12);
  color: #c97910;
  border-color: rgba(242,153,74,0.3);
}
.priority-badge-medium:hover {
  background: rgba(242,153,74,0.22);
  border-color: rgba(242,153,74,0.6);
}
body.dark-mode .priority-badge-medium { color: #f2994e; }
.priority-badge-high {
  background: rgba(235,87,87,0.12);
  color: #c0392b;
  border-color: rgba(235,87,87,0.3);
}
.priority-badge-high:hover {
  background: rgba(235,87,87,0.22);
  border-color: rgba(235,87,87,0.6);
}
body.dark-mode .priority-badge-high { color: #eb5757; }
.priority-badge-critical {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border-color: rgba(138, 58, 46, 0.5);
  font-weight: 800;
}
.priority-badge-critical:hover {
  background: rgba(138, 58, 46, 0.24);
  border-color: rgba(138, 58, 46, 0.7);
}

/* --- Role / miscellaneous badges --- */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.2s ease;
}
.role-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Team cards --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.team-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: pointer;
  padding: 1.5rem 1rem 1rem;
  gap: 0.25rem;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  position: relative;
}
.team-card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}
.team-card-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 0.6rem;
  flex-shrink: 0;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.team-card h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.1rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-card .email {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-bottom: 0.2rem;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-card p {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin: 0;
}
.team-card-badges {
  margin-top: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
  width: 100%;
}
.team-card-role-row,
.team-card-group-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
}
.team-card-absence-badge {
  background: rgba(235,87,87,0.15) !important;
  color: #eb5757 !important;
  border-color: rgba(235,87,87,0.35) !important;
}
.team-group-badge { font-size: 0.68rem; }

/* --- Task inner components --- */
.task-content {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.task-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.task-assignee,
.task-branch,
.task-category {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  font-size: 0.74rem;
  color: var(--text-secondary);
}

/* Label chips - pill-shaped (vs. the square category tag) so they read as
   a distinct, additive tag rather than competing with Category. */
.task-label-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 500;
}

/* Toggleable label chips in the Task edit modal - filled when selected,
   outlined when not, both keyed to the label's own color. */
.label-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.label-picker-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  background: none;
}

.label-picker-chip:hover {
  filter: brightness(1.1);
}

/* Comments / Attachments panels appended below the Task/Bug edit form -
   only shown once the entity has an id (i.e. editing, not creating). */
.entity-side-panel {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
}

.entity-side-panel-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.6rem 0;
}

.comment-input-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  align-items: flex-start;
}

.comment-input-row textarea {
  flex: 1;
  resize: vertical;
  min-height: 2.4rem;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.comment-input-row textarea:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.comment-input-row textarea::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

.comment-input-row textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
  background: rgba(255, 255, 255, 0.02);
}

/* Style the native file input to match the site's own inputs/buttons instead
   of the browser's default "Choose File" control. */
.comment-input-row input[type="file"] {
  flex: 1;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.comment-input-row input[type="file"]:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.comment-input-row input[type="file"]::file-selector-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.75rem;
  padding: 0.4rem 0.85rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.comment-input-row input[type="file"]::file-selector-button:hover {
  background: var(--hover-bg-darker);
  border-color: rgba(255, 255, 255, 0.15);
}

/* --- Section widget stats row --- */
.section-widgets,
.widget-grid,
.reports-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
  margin-bottom: 1.5rem;
}
.widget-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.widget-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.widget-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
}

/* --- Reports --- */
.reports-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.reports-section-block {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.reports-section-header { margin-bottom: 1rem; }
.reports-section-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.section-subtitle,
.reports-section-header p {
  font-size: 0.83rem;
  color: var(--text-secondary);
  margin: 0;
}
.reports-header { flex-wrap: wrap; }
.reports-grid { display: grid; gap: 0.9rem; margin-bottom: 0.9rem; }
.reports-grid--standard { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.reports-grid--wide { grid-template-columns: 1fr; }
.report-card {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}
.report-card--accent { border-left: 3px solid var(--accent-primary); }
.report-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.report-body { font-size: 0.87rem; color: var(--text-primary); display: flex; flex-direction: column; gap: 0.85rem; }
.report-body-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* --- Ideas --- */
.ideas-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.idea-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
  transition: all 0.2s ease;
}
.idea-card:hover {
  border-color: var(--border-accent);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 6px 16px rgba(255, 255, 255, 0.12);
  transform: translateX(2px);
}
.idea-card h3 {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.idea-card p {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
#quick-dev-notes-section .idea-card {
  padding-left: 0.65rem;
}

#quick-dev-notes-section .idea-card p {
  margin-left: 0;
}
.idea-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.idea-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.73rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  background: var(--bg-tertiary);
}
.idea-actions,
.idea-admin-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.idea-sort-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.idea-sort-control select {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
}
.idea-probability-column {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
}
.idea-probability-column h3 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.ideas-probability {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}
.ideas-table-container { overflow-x: auto; }
.idea-table-row {
  cursor: pointer;
  transition: all 0.2s ease;
}
.idea-table-row:hover {
  background: var(--hover-bg);
  border-left: 3px solid var(--border-accent);
}

/* --- Lists --- */
.lists-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.list-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.15s ease;
}
.list-card:hover { box-shadow: var(--shadow); }
.list-header {
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.list-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.list-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.list-sort {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
}
.list-toggle { font-size: 0.8rem; }
.list-body {
  border-top: 1px solid var(--border-color);
  padding: 1rem;
}
.list-card.collapsed .list-body { display: none; }
.list-item-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}
.list-item-title,
.list-item-description,
.list-item-assignee,
.list-item-status,
.list-item-due-date {
  flex: 1;
  min-width: 110px;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.84rem;
}
.list-item-title { min-width: 160px; flex: 2; }
.list-item-title:focus,
.list-item-description:focus,
.list-item-assignee:focus,
.list-item-status:focus,
.list-item-due-date:focus { outline: none; border-color: var(--accent-primary); }
.list-items-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.list-items-table th {
  text-align: left;
  padding: 0.5rem 0.65rem;
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}
.list-items-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}
.list-items-table tr:last-child td { border-bottom: none; }
.list-items-table tr:hover td { background: var(--hover-bg); }

/* --- Milestones --- */
#milestonesContainer { display: flex; flex-direction: column; gap: 0.75rem; }
.milestone-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.1rem;
}
.milestone-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.milestone-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.milestone-toggle {
  transition: transform 0.2s ease;
  display: inline-block;
}
.milestone-date {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}
.milestone-progress { margin-top: 0.75rem; }
/* CSS-named variant */
.milestone-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  overflow: hidden;
  margin-top: 0.4rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.milestone-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-primary);
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}
/* JS-named variant: .progress-bar / .progress-fill inside .milestone-progress */
.milestone-progress .progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border-color);
  overflow: hidden;
  margin: 0.4rem 0 0.25rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
.milestone-progress .progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--accent-primary);
  transition: width 0.3s ease;
  box-shadow: 0 0 8px rgba(102, 126, 234, 0.5);
}
.milestone-progress .progress-text {
  font-size: 0.76rem;
  color: var(--text-secondary);
  text-align: right;
}
.milestone-progress-label {
  font-size: 0.76rem;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
}
.milestone-tasks {
  display: none;
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.milestone-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* --- Activity log --- */
#activityContainer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.activity-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}
.activity-icon {
  font-size: 1rem;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.activity-content { flex: 1; min-width: 0; }
.activity-title {
  font-size: 0.87rem;
  color: var(--text-primary);
  font-weight: 500;
  line-height: 1.4;
}
.activity-description {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-top: 0.18rem;
}
.activity-timestamp {
  font-size: 0.73rem;
  color: var(--text-tertiary);
  margin-top: 0.22rem;
}

/* --- Bulk actions bar --- */
.bulk-actions-bar {
  display: none;
  position: sticky;
  bottom: 1.5rem;
  margin-top: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  box-shadow: var(--shadow-elevated);
  z-index: 20;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.bulk-actions-bar.visible { display: flex; }
.bulk-count { font-size: 0.87rem; font-weight: 600; color: var(--text-primary); }
.bulk-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

#bugsTableContainer td:last-child .btn-small {
  margin-right: 0.6rem;
}
#bugsTableContainer td:last-child .btn-small:last-child {
  margin-right: 0;
}

/* --- Search results dropdown --- */
.search-results {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 90;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  margin-top: 0;
  max-height: 350px;
  overflow-y: auto;
}
.search-results.active { display: block; }
.search-results-dropdown {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  margin-top: 0.5rem;
  max-height: 350px;
  overflow-y: auto;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  font-size: 0.87rem;
  color: var(--text-primary);
  transition: background 0.1s;
}
.search-result-item:last-child {
  border-bottom: none;
}
.search-result-item:hover,
.search-result-item--active {
  background: var(--hover-bg-darker);
  color: var(--text-primary);
}
.search-result-item-category {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.4rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  flex-shrink: 0;
}

/* --- Resources section --- */
.resources-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.75rem;
}
.resources-tab-btn {
  display: flex;
  flex-direction: column;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
  min-width: 130px;
}
.resources-tab-btn:hover {
  background: var(--hover-bg);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
.resources-tab-btn.active {
  background: var(--accent-primary);
  color: #fff;
  border-color: var(--accent-primary);
}
.resources-tab-btn.active .resources-tab-title,
.resources-tab-btn.active .resources-tab-subtitle,
.resources-tab-btn.active .resources-tab-icon,
.resources-tab-btn.active .tab-icon {
  color: #000;
}
.resources-tab-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.87rem;
  font-weight: 600;
}
.resources-tab-icon { font-size: 0.95rem; }
.resources-tab-subtitle {
  font-size: 0.73rem;
  color: var(--text-tertiary);
  margin-top: 0.12rem;
}
.resources-panel { display: none; }
.resources-panel.active { display: block; }
.resources-panel-header { margin-bottom: 1rem; }
.resources-panel-actions { display: flex; gap: 0.5rem; align-items: center; }

/* --- Absences section --- */
.absences-header { flex-wrap: wrap; }
.absences-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.2rem;
}
.absences-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0.2rem 0 0;
  line-height: 1.5;
}
.absences-guide {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}
.absences-guide-header { margin-bottom: 0.9rem; }
.absences-guide-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.absences-disclosures {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.absences-disclosure {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.absences-disclosure > summary {
  padding: 0.65rem 1rem;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-tertiary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
}
.absences-disclosure > summary::-webkit-details-marker { display: none; }
.absences-disclosure > summary::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  flex-shrink: 0;
  background-color: var(--text-secondary);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  transition: transform 0.2s ease;
}
.absences-disclosure[open] > summary::before { transform: rotate(90deg); }
.absences-disclosure-content {
  padding: 0.9rem 1rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.65;
}
.absences-callout {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(235,87,87,0.07);
  border-left: 3px solid #eb5757;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 0.82rem;
  color: var(--text-primary);
}
.absences-list {
  margin: 0.5rem 0 0 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.absences-list li {
  font-size: 0.83rem;
  color: var(--text-secondary);
}
.absences-section-block { margin-bottom: 1.75rem; }
.absences-block-header { margin-bottom: 1rem; }
.absences-block-header h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}
.absences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1rem;
}
.absences-panel {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.absences-panel h2 {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
}
.absences-panel--glass {
  background: var(--glass-bg);
  border-color: var(--glass-border);
}
.absences-panel--manage {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
.absences-form { display: flex; flex-direction: column; gap: 0.65rem; }
.absences-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.75rem;
}
.absences-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}
.absences-form .form-group { margin-bottom: 0; }
.absences-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}
.absences-table-wrapper .absences-table {
  border: none;
  border-radius: 0;
}
.absences-manager-grid,
.absences-extension-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.absences-manage-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.absences-manage-header h2 {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.2rem;
}
.absences-manage-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.absences-manage-controls label {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.absences-manage-controls select {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
}
.absences-expired-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.absences-expired-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  font-size: 0.62rem;
  color: var(--text-tertiary);
  cursor: help;
}

/* --- Groups / Roles / Categories item cards --- */
.group-card,
.role-item,
.category-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
#groupsContainer,
.roles-grid,
.categories-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* --- Workload view --- */
.workload-member {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}
.workload-member h3 {
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

/* --- Release notes --- */
.release-note-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.release-note-card h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}
.release-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}
.release-body {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.65;
  white-space: pre-wrap;
}

/* --- Avatar color picker --- */
.color-option {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s ease, border-color 0.1s ease;
}
.color-option:hover { transform: scale(1.12); }
.color-option.selected {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px var(--accent-primary);
  transform: scale(1.06);
}
body.dark-mode .color-option.selected {
  border-color: #ffffff;
  box-shadow: 0 0 0 2px var(--bg-secondary), 0 0 0 4px #ffffff;
}

/* --- Calendar / Timeline --- */
.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
.calendar-nav { display: flex; gap: 0.4rem; }
.calendar-nav button {
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 0.82rem;
  transition: background 0.15s;
}
.calendar-nav button:hover { background: var(--hover-bg); }
.calendar-month-year { font-size: 1rem; font-weight: 600; color: var(--text-primary); }
.calendar-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
#timelineContainer {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

#calendarContainer {
  overflow-x: auto;
}

.gantt-container {
  min-width: 0;
  overflow-x: hidden;
}

.gantt-shell {
  background: var(--bg-secondary);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  max-width: 100%;
  overflow: hidden;
}

.gantt-scroll-area {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.gantt-canvas {
  max-width: none;
}

.gantt-zoom-toggle {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1rem;
  width: fit-content;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.15rem;
  background: var(--bg-tertiary);
}

.gantt-zoom-btn {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem;
  border-radius: calc(var(--radius-md) - 3px);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.gantt-zoom-btn:hover {
  color: var(--text-primary);
}

.gantt-zoom-btn.active {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

body.timeline-window-scrollbars-hidden {
  overflow-x: hidden;
}

/* --- Bugs table --- */
#bugsTableContainer { overflow-x: auto; }
#bugsTableContainer table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
#bugsTableContainer th {
  text-align: left;
  padding: 0.6rem 0.8rem;
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}
#bugsTableContainer td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
  vertical-align: middle;
}
#bugsTableContainer tr:last-child td { border-bottom: none; }
#bugsTableContainer tr:hover td { background: var(--hover-bg); }

/* --- Context menu --- */
.context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: 0.4rem 0;
  min-width: 155px;
}
.context-menu-item {
  padding: 0.5rem 1rem;
  font-size: 0.86rem;
  cursor: pointer;
  color: var(--text-primary);
  transition: background 0.1s;
}
.context-menu-item:hover { background: var(--hover-bg); }
.context-menu-item.danger { color: var(--accent-red); }
.context-menu-divider { height: 1px; background: var(--border-color); margin: 0.25rem 0; }

/* --- Admin personal task widget --- */
.admin-personal-task-widget {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1.25rem;
}

/* --- Profile edit (Staff Card tab) --- */
.profile-edit-container { max-width: 600px; }
.profile-edit-container h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

/* ===========================
   HIDE SCROLLBARS GLOBALLY
   =========================== */
/* Thin scrollbar style everywhere in dashboard */
.dashboard-container ::-webkit-scrollbar { width: 4px; height: 4px; }
.dashboard-container ::-webkit-scrollbar-track { background: transparent; }
.dashboard-container ::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 2px; }
.dashboard-container { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }

/* Hidden scrollbars for specific panels */
.sidebar,
.modal-content {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar::-webkit-scrollbar,
.modal-content::-webkit-scrollbar { display: none; }

/* ===========================
   CALENDAR INNER CELLS
   =========================== */
.calendar-view .calendar-header {
  padding: 0.55rem 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}
.calendar-day {
  min-height: 90px;
  padding: 0.4rem 0.45rem;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  overflow: hidden;
  vertical-align: top;
  background: var(--bg-secondary);
  transition: background 0.1s ease;
}
.calendar-day:nth-child(7n) { border-right: none; }
.calendar-day:hover { background: var(--hover-bg); }
.calendar-day.today {
  background: var(--accent-surface);
}
.calendar-day.today .calendar-day-number {
  color: var(--accent-strong);
  font-weight: 700;
}
.calendar-day.other-month {
  opacity: 0.38;
}
.calendar-day-number {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}
.calendar-event {
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-weight: 500;
}
.calendar-event.task {
  background: rgba(102, 126, 234, 0.18);
  color: #667eea;
  border-left: 2px solid #667eea;
}
body.dark-mode .calendar-event.task { color: #a5b4fc; }
.calendar-event.milestone {
  background: rgba(39, 174, 96, 0.15);
  color: #27ae60;
  border-left: 2px solid #27ae60;
}
body.dark-mode .calendar-event.milestone { color: #6ee7b7; }
.calendar-event.release {
  background: rgba(242, 153, 74, 0.15);
  color: #c97910;
  border-left: 2px solid #f2994e;
}
body.dark-mode .calendar-event.release { color: #fbbf24; }

/* ===========================
   AVATAR COLOR PICKER (modal)
   =========================== */
.avatar-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}

/* ===========================
   ROLE TAGS (member modal)
   =========================== */
.roles-section {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}
.roles-section h3 {
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--text-primary);
}
.roles-section .roles-grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.role-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.role-tag:hover {
  background: var(--hover-bg);
  border-color: var(--accent-primary);
  color: var(--text-primary);
}
.role-tag.selected {
  background: var(--button-bg);
  color: var(--button-text) !important;
  border-color: var(--border-color);
}

/* ===========================
   HANDBOOK + GAME FEATURES
   =========================== */
.handbook-list,
.game-features-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.handbook-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.handbook-card,
.game-feature-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  transition: box-shadow 0.15s ease;
}
.handbook-card:hover,
.game-feature-card:hover { box-shadow: var(--shadow); }
.handbook-card-header,
.game-feature-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.6rem;
}
.handbook-tag,
.game-feature-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}
/* Tag group - ops (teal) */
.handbook-tag--ops,
.handbook-tag--default {
  background: rgba(0, 180, 216, 0.1);
  color: #0094a8;
  border-color: rgba(0, 180, 216, 0.3);
}
body.dark-mode .handbook-tag--ops,
body.dark-mode .handbook-tag--default { color: #67e8f9; }
.game-feature-tag--ops,
.game-feature-tag--default {
  background: rgba(0, 180, 216, 0.1);
  color: #0094a8;
  border-color: rgba(0, 180, 216, 0.3);
}
body.dark-mode .game-feature-tag--ops,
body.dark-mode .game-feature-tag--default { color: #67e8f9; }
/* Tag group - people (violet) */
.handbook-tag--people {
  background: rgba(118, 75, 162, 0.1);
  color: #764ba2;
  border-color: rgba(118, 75, 162, 0.3);
}
body.dark-mode .handbook-tag--people { color: #c4b5fd; }
/* Tag group - pipeline (amber) */
.handbook-tag--pipeline {
  background: rgba(242, 153, 74, 0.12);
  color: #c97910;
  border-color: rgba(242, 153, 74, 0.3);
}
body.dark-mode .handbook-tag--pipeline { color: #fbbf24; }
/* Tag group - external (rose) */
.handbook-tag--external {
  background: rgba(235, 87, 87, 0.1);
  color: #c0392b;
  border-color: rgba(235, 87, 87, 0.28);
}
body.dark-mode .handbook-tag--external { color: #fca5a5; }
/* Tag group - core (green) */
.handbook-tag--core {
  background: rgba(39, 174, 96, 0.1);
  color: #27ae60;
  border-color: rgba(39, 174, 96, 0.28);
}
body.dark-mode .handbook-tag--core { color: #6ee7b7; }
/* Game mechanics category groups */
.handbook-tag--systems {
  background: rgba(52, 152, 219, 0.12);
  color: #1f78b4;
  border-color: rgba(52, 152, 219, 0.32);
}
body.dark-mode .handbook-tag--systems { color: #93c5fd; }
.game-feature-tag--systems {
  background: rgba(52, 152, 219, 0.12);
  color: #1f78b4;
  border-color: rgba(52, 152, 219, 0.32);
}
body.dark-mode .game-feature-tag--systems { color: #93c5fd; }

.handbook-tag--content {
  background: rgba(46, 204, 113, 0.12);
  color: #1f9d5a;
  border-color: rgba(46, 204, 113, 0.3);
}
body.dark-mode .handbook-tag--content { color: #86efac; }
.game-feature-tag--content {
  background: rgba(46, 204, 113, 0.12);
  color: #1f9d5a;
  border-color: rgba(46, 204, 113, 0.3);
}
body.dark-mode .game-feature-tag--content { color: #86efac; }

.handbook-tag--experience {
  background: rgba(155, 89, 182, 0.12);
  color: #8e44ad;
  border-color: rgba(155, 89, 182, 0.3);
}
body.dark-mode .handbook-tag--experience { color: #d8b4fe; }
.game-feature-tag--experience {
  background: rgba(155, 89, 182, 0.12);
  color: #8e44ad;
  border-color: rgba(155, 89, 182, 0.3);
}
body.dark-mode .game-feature-tag--experience { color: #d8b4fe; }

.handbook-tag--operations {
  background: rgba(230, 126, 34, 0.14);
  color: #c56a12;
  border-color: rgba(230, 126, 34, 0.34);
}
body.dark-mode .handbook-tag--operations { color: #fdba74; }
.game-feature-tag--operations {
  background: rgba(230, 126, 34, 0.14);
  color: #c56a12;
  border-color: rgba(230, 126, 34, 0.34);
}
body.dark-mode .game-feature-tag--operations { color: #fdba74; }
.handbook-title,
.game-feature-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0.2rem 0;
}
.handbook-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.game-feature-meta {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}
.handbook-excerpt,
.game-feature-excerpt {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-top: 0.4rem;
}
.handbook-content,
.game-feature-content {
  display: none;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.75;
}
.handbook-content.expanded,
.game-feature-content.expanded { display: block; }
.handbook-content h2,
.game-feature-content h2 { font-size: 1rem; font-weight: 700; margin: 1rem 0 0.4rem; color: var(--text-primary); }
.handbook-content h3,
.game-feature-content h3 { font-size: 0.9rem; font-weight: 600; margin: 0.8rem 0 0.3rem; color: var(--text-primary); }
.handbook-content ul,
.handbook-content ol,
.game-feature-content ul,
.game-feature-content ol { padding-left: 1.4rem; margin: 0.35rem 0; }
.handbook-content li,
.game-feature-content li { margin-bottom: 0.3rem; }
.handbook-content code,
.game-feature-content code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.82em;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  transition: all 0.2s ease;
}
.handbook-content code:hover,
.game-feature-content code:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
}
.handbook-content pre,
.game-feature-content pre {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  overflow-x: auto;
  font-size: 0.82rem;
  transition: all 0.2s ease;
}
.handbook-content pre:hover,
.game-feature-content pre:hover {
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
/* Handbook / Game-mechanic editor toolbar */
.handbook-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.handbook-toolbar button {
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: 5px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.12s;
}
.handbook-toolbar button:hover { background: var(--hover-bg); }
.handbook-editor {
  min-height: 200px;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.7;
  outline: none;
}
.handbook-editor:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.1);
}
.handbook-editor[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--text-tertiary);
  pointer-events: none;
}
.handbook-modal .modal-content { max-width: 720px; width: 90vw; }
.quick-panel-content { max-width: 420px; width: 90vw; }

/* Comment/attachment count indicators on task/bug cards - small pill icons
   alongside the existing Subtasks row, opening the quick panel instead of
   the full Edit modal. */
.entity-count-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--hover-bg);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 0.8rem;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
}
.entity-count-indicator:hover {
  background: var(--hover-bg-darker);
  color: var(--text-primary);
}
.form-hint {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 0.3rem;
}

/* ===========================
   GROUPED TASKS VIEW
   =========================== */
.grouped-tasks {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 0.5rem 0;
}
.task-group {
  margin-top: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.task-group h3 {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-secondary);
  margin: 0;
  padding: 0.65rem 1rem 0.65rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
}
.group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text-primary);
}
.group-tasks {
  display: flex;
  flex-direction: column;
}
.group-task-item {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.12s ease;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.group-task-item:last-child { border-bottom: none; }
.group-task-item:hover { background: var(--hover-bg); }
.group-task-item strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* ===========================
   PERSONAL TASK EDIT MODAL
   =========================== */
#personalTaskEditBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 599;
  backdrop-filter: blur(2px);
}
#personalTaskEditBackdrop.active { display: block; }

#personalTaskEditModal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 600;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  width: min(480px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-elevated);
}
#personalTaskEditModal.active { display: block; }
#personalTaskEditModal h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
}
.personal-task-edit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.personal-task-edit-form label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-secondary);
}
.personal-task-edit-form input,
.personal-task-edit-form textarea,
.personal-task-edit-form select {
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.personal-task-edit-form input:focus,
.personal-task-edit-form textarea:focus,
.personal-task-edit-form select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
}
.personal-task-edit-form textarea { min-height: 80px; resize: vertical; }
.personal-task-edit-buttons {
  display: flex;
  gap: 0.65rem;
  margin-top: 0.5rem;
}
.btn-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-cancel:hover { background: var(--hover-bg-darker); }

/* ===========================
   ADMIN WIDGET
   =========================== */
#adminWidget.admin-widget {
  display: none;
  flex-direction: column;
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  z-index: 500;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  width: min(300px, calc(100vw - 3rem));
  max-height: 70vh;
  overflow-y: auto;
}
#adminWidget.admin-widget.u-224b51a7b4 {
  display: none;
}
#adminWidget.admin-widget.visible { display: flex; flex-direction: column; }
.admin-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  cursor: grab;
}
.admin-widget-header h3 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.admin-widget-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--text-secondary);
  padding: 0;
  line-height: 1;
}
.admin-widget-content { padding: 1rem; }
.admin-widget-content .section-subtitle { margin-bottom: 0.9rem; }
.admin-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 1rem;
}
@media (max-width: 480px) {
  .admin-stats { grid-template-columns: repeat(2, 1fr); }
}
.stat-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.5rem;
  text-align: center;
}
.stat-label { font-size: 0.68rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.admin-section { margin-bottom: 1rem; }
.admin-section h4 { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); margin-bottom: 0.5rem; }
.admin-btn {
  display: block;
  width: 100%;
  padding: 0.45rem 0.75rem;
  margin-bottom: 0.4rem;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
}
.admin-btn:hover { background: var(--hover-bg); }
.admin-btn.admin-btn--danger { color: var(--accent-red); border-color: rgba(235,87,87,0.3); }
.admin-btn.admin-btn--danger:hover { background: rgba(235,87,87,0.08); }
.admin-select-label { font-size: 0.78rem; color: var(--text-secondary); display: block; margin-bottom: 0.3rem; }
.admin-select {
  width: 100%;
  border: 1px solid var(--border-color);
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 0.4rem;
}

/* ===========================
   FLOATING CONTROLS
   =========================== */
.floating-controls {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.dark-mode-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: background 0.15s, box-shadow 0.15s;
}
.dark-mode-toggle:hover { background: var(--hover-bg); box-shadow: var(--shadow-elevated); }
.hint-fab {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}
.hint-fab:hover {
  background: var(--hover-bg);
  transform: scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.hint-icon { display: flex; }
.hint-icon [data-lucide] { width: 1.2em; height: 1.2em; }
.hint-tooltip {
  display: none;
  position: absolute;
  right: calc(100% + 0.5rem);
  top: 50%;
  transform: translateY(-50%) scaleX(0);
  transform-origin: right center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.75rem;
  font-size: 0.78rem;
  white-space: nowrap;
  box-shadow: var(--shadow);
  color: var(--text-primary);
  transition: all 0.2s ease;
}
.hint-fab:hover .hint-tooltip {
  display: block;
  transform: translateY(-50%) scaleX(1);
}
.admin-toggle-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 1.15rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  transition: background 0.15s;
}
.admin-toggle-btn#adminWidgetToggle.u-224b51a7b4 {
  display: flex;
}
.admin-toggle-btn:hover { background: var(--hover-bg); }
.admin-toggle-btn.active {
  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--border-color);
}

/* ===========================
   PERMISSION SECTIONS (Role modal)
   =========================== */
.permission-section { margin-bottom: 1.25rem; }
.permission-section h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.65rem;
}
.permission-checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  font-size: 0.86rem;
  color: var(--text-primary);
  cursor: pointer;
}
.permission-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent-primary);
}

/* ===========================
   MOBILE NAV SELECT
   =========================== */
.mobile-nav-select {
  width: 100%;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.9rem;
  font-family: inherit;
}
.mobile-nav-select-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.35rem;
}

.mobile-top-actions {
  display: none;
  margin: 0 0.75rem 0.75rem;
  position: relative;
}

.mobile-top-actions-toggle {
  width: 100%;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.mobile-top-actions-toggle::after {
  content: "▾";
  float: right;
  color: var(--text-secondary);
}

.mobile-quick-actions-menu {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 35;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 0.45rem;
  box-shadow: var(--shadow-elevated);
  gap: 0.4rem;
}

.mobile-quick-actions-menu.active {
  display: grid;
}

.mobile-quick-actions-menu .btn-secondary {
  width: 100%;
  justify-content: flex-start;
}

/* Responsive additions */
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .absences-grid,
  .absences-manager-grid,
  .absences-extension-grid { grid-template-columns: 1fr; }
  .reports-grid--standard { grid-template-columns: 1fr; }
  .section-widgets,
  .widget-grid,
  .reports-widgets { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

@media (max-width: 900px) {
  .floating-controls {
    display: none;
  }

  .mobile-top-actions {
    display: block;
  }
}

/* ========================================
   BASE STYLES & RESETS
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  background: var(--bp-bg);
  color: var(--bp-text);
  font-family: "Riftlab Sans", var(--font-main);
  line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Riftlab Sans", var(--font-main);
}

a {
  color: inherit;
}

a:visited {
  color: inherit;
}

.external-link,
.external-link:visited {
  color: var(--accent-cyan);
}

/* Smooth hover transitions everywhere by default; more specific rules below still win. */
a, button, input, textarea, select,
.card, [class*="-card"], [class*="btn"], [class*="badge"],
.nav-link, [class*="-row"], [class*="tab"] {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

button,
input[type="submit"],
input[type="button"] {
  color: var(--bp-white);
}

/* Revert UI elements to original fonts (not Riftlab Sans) */
button, .btn, .btn-primary, .btn-secondary, .btn-small, .btn-edit, .btn-delete,
.btn-save, .btn-approve, .btn-deny, .btn-claim, .view-btn,
input, textarea, select,
.section-header h1, .task-title, .milestone-title, .report-title, .widget-title,
.handbook-title, .game-feature-title,
.nav-link, .nav-panel-title,
.bulk-actions-bar, .resources-tab-btn {
  font-family: var(--font-main);
}

.dashboard-container button,
.dashboard-container .btn-primary,
.dashboard-container .btn-secondary,
.dashboard-container .btn-small {
  font-family: var(--font-main) !important;
}

/* ========================================
   LAYOUT & CONTAINER UTILITIES
   ======================================== */
.container {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
}

.shell {
  width: min(1000px, calc(100% - 2rem));
  margin: 1.5rem auto;
}

.panel {
  background: rgba(16, 16, 16, 0.92);
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

/* ========================================
   COMPONENT STYLES
   ======================================== */
.bp-card {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
}

.bp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  background: var(--bp-surface-soft);
  color: var(--bp-white);
  cursor: pointer;
  transition: background 0.2s ease;
}

.bp-button:hover {
  background: var(--bp-white);
  color: var(--bp-black);
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  background: var(--button-bg);
  color: var(--button-text);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* --- Settings page --- */
.settings-form-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
  max-width: 640px;
}

.settings-form-card .form-group {
  margin-bottom: 1rem;
}

.settings-danger-card {
  background: var(--bg-secondary);
  border: 1px solid var(--status-danger-bg);
  border-left: 3px solid var(--status-danger);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-bottom: 1rem;
  max-width: 640px;
}

.settings-danger-card .section-subtitle {
  margin-bottom: 0.85rem;
}

.form-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}

.form-row input,
.form-row select {
  flex: 1;
  min-width: 160px;
  /* .form-row only ever set layout (flex sizing), so these fell back to the
     browser's bare/blocky default look - same themed treatment as
     .form-group input now, just kept inline instead of stacked. */
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.form-row select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 14px;
  padding-right: 2.2rem;
  cursor: pointer;
}

.form-row input:hover,
.form-row select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.form-row input:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
  background: rgba(255, 255, 255, 0.02);
}

.settings-inline-role-row select {
  max-width: 140px;
  padding: 0.4rem 1.8rem 0.4rem 0.6rem;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-inline-role-row select:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.settings-inline-role-row select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: var(--focus-ring);
}

.settings-info-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.settings-empty-state {
  color: var(--text-tertiary);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.settings-inline-role-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.875rem;
}

.settings-inline-role-row:last-child {
  border-bottom: none;
}

.settings-inline-role-row select {
  max-width: 140px;
}

.settings-wipe-preview-list {
  max-height: 200px;
  overflow-y: auto;
  margin: 0.75rem 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.1rem;
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border: 1px solid var(--status-danger);
  border-radius: var(--radius-md);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-danger:hover {
  background: var(--status-danger);
  color: var(--bg-primary);
}

.color-options {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.account-pref-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.account-pref-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-primary);
  cursor: pointer;
}

/* Compact density preference - a real, if modest, effect: tighter task
   card padding and slightly smaller text, applied globally via a body
   class rather than duplicating every card's styling into two variants. */
body.density-compact .task-card,
body.density-compact .kanban-card,
body.density-compact .bug-card {
  padding: 0.75rem !important;
}

body.density-compact .tasks-grid {
  gap: 0.4rem;
}

.word-with-tiny {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 1rem;
}

.bp-heading {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.bp-muted {
  color: var(--bp-text-muted);
}

/* ========================================
   NAVIGATION STYLES
   ======================================== */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #050505;
  border-bottom: 1px solid #2b2b2b;
}

.nav-container {
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 0.85rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  text-decoration: none;
  color: #fff;
  letter-spacing: 0.03em;
  font-weight: 600;
  font-size: 1.2rem;
}

.logo span {
  font-family: "Riftlab Sans", var(--font-futuristic);
}

.logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #0f0f0f;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  padding: 2px;
}

.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid #2b2b2b;
  color: #fff;
  background: #101010;
  border-radius: var(--radius-md);
  padding: 0.5rem;
}

.mobile-toggle i,
.mobile-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.nav-links {
  display: flex;
  gap: 0.55rem;
  list-style: none;
}

.nav-links a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border: 1px solid #2b2b2b;
  background: #101010;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
}

.nav-links a:hover {
  background: #fff;
  color: #000;
}

.nav a:active,
.nav a:focus-visible,
.nav-links a:active,
.nav-links a:focus-visible {
  background: var(--bp-white);
  color: var(--bp-black);
  outline: none;
}

.nav {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.nav a {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  color: #fff;
  text-decoration: none;
  background: #171717;
  padding: 0.48rem 0.75rem;
}

.nav a:hover,
.nav a.active {
  background: #fff;
  color: #000;
}

/* ========================================
   HERO & BANNER STYLES
   ======================================== */
.hero {
  width: min(1120px, calc(100% - 2rem));
  margin: 2.4rem auto 0;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #101010;
  padding: 2rem;
  text-align: center;
}

.hero h1 {
  font-family: "Riftlab Sans", var(--font-main);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero p {
  margin-top: 1rem;
  color: #d0d0d0;
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  margin-top: 1.4rem;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-buttons a {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  background: #171717;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
}

.hero-buttons a:hover {
  background: #fff;
  color: #000;
}

.hero-buttons a:active,
.hero-buttons a:focus-visible {
  background: #fff;
  color: #000;
}

.nav-account-circle {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  justify-content: stretch;
  width: 36px;
  height: 36px;
  min-width: 36px;
  max-width: 36px;
  min-height: 36px;
  max-height: 36px;
  aspect-ratio: 1 / 1;
  padding: 0;
  line-height: 1;
  border-radius: var(--radius-pill) !important;
  overflow: hidden;
  background: #171717;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 36px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  isolation: isolate;
}

.nav-account-avatar,
.nav-account-initial {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  box-sizing: border-box;
  pointer-events: none;
}

.nav-account-avatar {
  display: block;
  object-fit: cover;
  object-position: center;
}

.nav-account-initial {
  display: none;
  place-items: center;
  background: #171717;
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
}

#navAccountIndicator {
  display: flex;
  align-items: center;
  position: relative;
}

#navAccountIndicator::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 190px;
  height: 10px;
}

.nav-links #navAccountIndicator .nav-account-circle {
  flex: 0 0 36px;
}

.nav-account-dropdown {
  position: absolute;
  top: calc(100% + 0.2rem);
  right: 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.55rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #0e0e0e;
  z-index: 120;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

.nav-account-dropdown a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  padding: 0.45rem 0.6rem;
  font-size: 0.84rem;
  background: #141414;
}

.nav-account-dropdown a:hover {
  background: #ffffff;
  color: #000000;
}

#navAccountIndicator:hover .nav-account-dropdown,
#navAccountIndicator:focus-within .nav-account-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-account-circle.staff-unlocked {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

@media (max-width: 720px) {
  .nav-account-circle {
    width: 34px;
    height: 34px;
    min-width: 34px;
    max-width: 34px;
    min-height: 34px;
    max-height: 34px;
  }
}

@media (max-width: 850px) {
  #navAccountIndicator {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    margin-top: 0.15rem;
    padding-top: 0.45rem;
    border-top: 1px solid #2b2b2b;
    justify-content: center;
  }

  #navAccountIndicator::after {
    display: none;
  }

  #navAccountIndicator .nav-account-circle {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 !important;
    flex: 0 0 34px !important;
    align-self: center;
    margin-bottom: 0.45rem;
  }

  .nav-account-dropdown {
    position: static;
    margin-top: 0.45rem;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }
}

/* ========================================
   SECTION & CONTENT STYLES
   ======================================== */
.section {
  width: min(1120px, calc(100% - 2rem));
  margin: 1.25rem auto 0;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #101010;
  padding: 2rem;
}

.section h2 {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.45rem;
}

.section > p {
  color: #b5b5b5;
  margin-top: 0.8rem;
  margin-bottom: 1.25rem;
}

.section-footer-link {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
}

.section-footer-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.2rem;
  background: #171717;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
}

.section-footer-link a:hover {
  background: #fff;
  color: #000;
}

.guide-link {
  color: #7fb8ff;
  text-decoration: underline;
}

.guide-link:hover,
.guide-link:visited {
  color: #a7d0ff;
}

/* ========================================
   STEAM ID GUIDE PAGE
   ======================================== */
.guide-panel {
  position: relative;
  width: min(1120px, calc(100% - 2rem));
  margin: 1.25rem auto 0;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
  background: var(--bp-surface);
  padding: 1.5rem;
}

.guide-panel-recommended {
  border-color: var(--bp-text-muted);
}

.guide-panel h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.guide-panel-intro {
  margin: 0 0 1rem;
  color: var(--bp-text-muted);
  font-size: 0.9rem;
}

.guide-panel-note {
  margin: 1rem 0 0;
  color: var(--bp-text-muted);
  font-size: 0.85rem;
}

.guide-badge {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.guide-badge-recommended {
  background: var(--bp-white);
  color: var(--bp-black);
}

.guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.guide-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-md);
  background: var(--bp-surface-soft);
  padding: 0.75rem 0.9rem;
}

.guide-step-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--bp-white);
}

.guide-step-text {
  color: var(--bp-text);
  font-size: 0.9rem;
  line-height: 1.5;
  padding-top: 0.15rem;
}

.guide-example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.guide-example {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-md);
  background: var(--bp-surface-soft);
  padding: 0.9rem 1rem;
}

.guide-example-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-text-muted);
}

.guide-example code {
  display: block;
  background: var(--bp-bg);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  color: var(--bp-text);
  word-break: break-all;
}

.guide-highlight {
  color: var(--bp-white);
  font-weight: 700;
}

.guide-highlight-code {
  color: var(--bp-white) !important;
  font-weight: 700;
}

.guide-fallback {
  width: min(1120px, calc(100% - 2rem));
  margin: 1.25rem auto 0;
}

.guide-extract-result {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-md);
  background: var(--bp-surface-soft);
  padding: 0.75rem 1rem;
}

.guide-extract-result.is-success {
  border-color: var(--bp-text-muted);
}

.guide-extract-result.is-empty {
  color: var(--bp-text-muted);
  font-size: 0.9rem;
}

.guide-extract-result-id {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--bp-white);
  word-break: break-all;
}

.guide-extract-result-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bp-text-muted);
  display: block;
  margin-bottom: 0.2rem;
}

.lead {
  margin-top: 1rem;
  color: var(--bp-text-muted);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.5rem;
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--bp-border);
  background: var(--bp-surface-soft);
  color: var(--bp-text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ========================================
   CARD & GRID LAYOUTS
   ======================================== */
.grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.8rem;
}

.card {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  padding: 1rem;
  text-decoration: none;
  color: #fff;
  background: #171717;
}

.card:hover {
  background: #fff;
  color: #000;
}

.card:active,
.card:focus-visible {
  background: var(--bp-white);
  color: var(--bp-black);
  outline: none;
}

.card p {
  margin-top: 0.5rem;
  color: #b5b5b5;
}

.card:hover p {
  color: #222;
}

.tool-last-used {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.75rem !important;
  color: #888 !important;
}

.card:hover .tool-last-used {
  color: #555 !important;
}

.tool-last-used--empty {
  opacity: 0.7;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.faq-list details.card {
  padding: 1rem 1.25rem;
}

.faq-list details.card:hover,
.faq-list details.card:hover p,
.faq-list details.card:hover a {
  background: #171717;
  color: inherit;
}

.faq-list details.card summary {
  color: #fff;
  font-weight: 600;
  list-style: none;
}

.faq-list details.card summary::-webkit-details-marker {
  display: none;
}

.faq-list details.card summary::before {
  content: "+";
  display: inline-block;
  width: 1.2em;
  margin-right: 0.4rem;
  color: #7a7a7a;
}

.faq-list details.card[open] summary::before {
  content: "\2212";
}

.faq-list details.card p {
  margin-top: 0.6rem;
  padding-left: 1.6rem;
}

.faq-list details.card p a {
  color: #fff;
  text-decoration: underline;
}

/* ========================================
   APPLICATION CATEGORY PANELS
   ======================================== */
.app-categories {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.app-category-panel {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  padding: 1rem 1rem 1.1rem;
  background: #111111;
}

.app-category-title {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #b5b5b5;
}

.app-category-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.app-compact-card {
  flex: 0 0 220px;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  padding: 0.75rem;
  text-decoration: none;
  color: #fff;
  background: #171717;
}

.app-compact-card h4 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.app-compact-card p {
  margin: 0;
  font-size: 0.8rem;
  color: #b5b5b5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.app-compact-card:hover {
  background: #fff;
  color: #000;
}

.app-compact-card:hover p {
  color: #222;
}

.app-compact-card:active,
.app-compact-card:focus-visible {
  background: var(--bp-white);
  color: var(--bp-black);
  outline: none;
}

.app-compact-card-closed {
  position: relative;
  opacity: 0.55;
  cursor: not-allowed;
}

.app-compact-card-closed:hover {
  background: #171717;
  color: #fff;
}

.app-compact-card-closed:hover p {
  color: #b5b5b5;
}

.app-closed-badge {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #3a1414;
  color: #ff8a8a;
}

.app-unavailable-badge {
  display: inline-block;
  margin-bottom: 0.35rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #2b2b2b;
  color: #b5b5b5;
}

.discord-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}

.widget {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #171717;
}

.widget h3 {
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid #2b2b2b;
  padding: 0.75rem 0.9rem;
}

.widget iframe {
  width: 100%;
  min-height: 480px;
  border: 0;
}

/* Document/handbook link lists inside a .widget-body (AG12 homepage) -
   smaller text so long titles wrap cleanly inside the card, plus real
   padding on every side instead of sitting flush against the card walls. */
.doc-link-list {
  list-style: none;
  padding: 1.1rem 1rem 1.25rem 1.5rem;
  margin: 0;
  text-align: left;
  font-size: 0.85rem;
  line-height: 1.6;
}

.doc-link-list li {
  margin-bottom: 0.6rem;
}

.doc-link-list li:last-child {
  margin-bottom: 0;
}

/* ========================================
   DEPARTMENTS PAGE (AG12)
   ======================================== */
.dept-panel {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: var(--bp-surface, #101010);
  overflow: hidden;
  margin-top: 1rem;
}

.dept-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid #2b2b2b;
  border-left: 3px solid var(--accent, #2b2b2b);
  cursor: pointer;
  transition: background 0.15s ease;
}

.dept-panel > *:last-child {
  border-bottom: none;
}

.dept-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.dept-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dept-icon img,
.dept-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

.dept-icon-badge {
  width: 96px;
  height: 96px;
}

.dept-body {
  flex: 1;
  min-width: 0;
}

.dept-name {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.dept-desc {
  margin: 0.3rem 0 0;
  color: var(--bp-text-muted, #b5b5b5);
  font-size: 0.85rem;
  line-height: 1.45;
}

.dept-meta {
  flex-shrink: 0;
  align-self: flex-start;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--accent, #2b2b2b);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.06);
}

.dept-expand {
  max-height: 0;
  overflow: hidden;
  border-bottom: 1px solid #2b2b2b;
  transition: max-height 0.25s ease;
}

.dept-panel > .dept-expand:last-child {
  border-bottom: none;
}

.dept-expand-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
}

.dept-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  background: var(--bp-surface-soft, #171717);
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  color: #fff;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.dept-btn:hover {
  background: #fff;
  color: #000;
}

.dept-btn-coming {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ========================================
   STAFF & PROFILE STYLES
   ======================================== */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: #fff;
  text-decoration: none;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.brand-copy h2 {
  margin: 0;
  color: #ffffff;
  font-size: 1.1rem;
  line-height: 1.1;
}

.brand-subtitle {
  margin: 0;
  color: #9c9c9c;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  color: #fff;
  text-decoration: none;
  background: #171717;
  padding: 0.5rem 0.75rem;
}

.back:hover {
  background: #fff;
  color: #000;
}

.back:active,
.back:focus-visible {
  background: var(--bp-white);
  color: var(--bp-black);
  outline: none;
}

.back-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  font-weight: 500;
}

.back-button i,
.back-button svg {
  width: 1em;
  height: 1em;
}

.back-button:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  transform: translateX(-4px);
}

.back-button:active,
.back-button:focus-visible {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.staff-top {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.staff-top img {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  border: 1px solid #2b2b2b;
  object-fit: cover;
}

.role {
  color: #b5b5b5;
  margin-top: 0.3rem;
}

.card:hover .role {
  color: #222;
}

.logo-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.4rem;
  border: 1px solid #2b3036;
  border-radius: var(--radius-md);
  background: #171717;
  text-decoration: none;
  transition: all 0.2s ease;
}

.logo-home-btn:hover {
  background: #212121;
  border-color: #00aaff;
}

.logo-home-btn:focus-visible {
  outline: 2px solid #00aaff;
  outline-offset: 2px;
}

.dotted-background {
  background-color: #050505;
  background-image: radial-gradient(
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}

.layout-container {
  overflow-x: hidden;
}

.error-box {
  background: rgba(120, 0, 0, 0.2);
  border: 1px solid rgba(255, 90, 90, 0.45);
  border-radius: var(--radius-lg);
  padding: 1rem;
  color: #ffd6d6;
}

.link-list a {
  color: #00aaff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link-list a:hover {
  color: #5cc8ff;
}

/* ========================================
   LOGIN & AUTHENTICATION STYLES
   ======================================== */
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #050505;
  padding: 1rem;
  position: relative;
}

.login-box {
  background: #101010;
  border: 1px solid #2b2b2b;
  padding: 2rem;
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 440px;
}

.login-box h2 {
  margin-bottom: 0.5rem;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.45rem;
}

.login-box .intro {
  margin-bottom: 1.5rem;
  color: #b5b5b5;
  font-size: 0.95rem;
}

.login-box input {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  font-size: 1rem;
  background: #171717;
  color: #ffffff;
  box-sizing: border-box;
}

.login-box input[readonly] {
  opacity: 0.75;
  cursor: not-allowed;
}

/* Shared account form helpers */
.field-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0.25rem 0 0.45rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #cfcfcf;
}

.field-label > span {
  white-space: pre-line;
}

.field-help-link {
  flex: 0 0 auto;
  font-family: "Riftlab Sans", var(--font-main);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #7fb8ff;
  text-decoration: none;
  white-space: nowrap;
}

.field-help-link:hover {
  color: #a7d0ff;
  text-decoration: underline;
}

.app-required-notice {
  margin: 1rem 0 0;
  font-size: 0.65rem;
  color: #6b6b6b;
  text-align: left;
}

.field-help {
  margin: -0.45rem 0 0.9rem;
  font-size: 0.8rem;
  color: #9b9b9b;
}

.login-box button {
  width: 100%;
  padding: 0.8rem;
  background: #ffffff;
  color: #000000;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
  margin-bottom: 1rem;
}

.login-box button:hover {
  opacity: 0.88;
}

.login-box button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.error-message {
  color: #ff9696;
  background: #240f0f;
  border: 1px solid #4d1f1f;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  display: none;
}


.success-message {
  color: #d6ffd6;
  background: #102212;
  border: 1px solid #27472b;
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  margin-bottom: 1rem;
  display: none;
}

.back-link {
  margin-top: 1rem;
}

/* ========================================
   ACCOUNT / AUTH PAGES
   ======================================== */

.auth-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.account-action-grid {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.account-action-card {
  display: block;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #161616 0%, #121212 100%);
  padding: 0.85rem 0.95rem;
  text-decoration: none;
  color: #ffffff;
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.account-action-card:hover {
  border-color: #3d3d3d;
  background: linear-gradient(180deg, #1b1b1b 0%, #151515 100%);
  transform: translateY(-1px);
}

.account-action-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.account-action-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.83rem;
  color: #b7b7b7;
}

.account-action-icon {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.5rem;
}

#accountLoginBtn .account-action-icon { color: #00d4ff; }
#accountSignupBtn .account-action-icon { color: #22c55e; }
#accountSettingsBtn .account-action-icon { color: #a855f7; }
#dashboardUnlockBtn .account-action-icon { color: #fbbf24; }
#applicationsBtn .account-action-icon { color: #f472b6; }
#ticketsBtn .account-action-icon { color: #38bdf8; }

.auth-section {
  background: #111111;
  border: 1px solid #262626;
  border-radius: var(--radius-lg);
  padding: 0.95rem;
  margin-bottom: 0;
}

.auth-section-title {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #f0f0f0;
}

.auth-actions-row a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #2b2b2b;
  padding-bottom: 0.1rem;
  transition: border-color 0.2s ease;
}

.auth-actions-row a:hover {
  border-bottom-color: #ffffff;
}

.auth-actions-row a .icon-inline {
  width: 0.9em;
  height: 0.9em;
  vertical-align: middle;
  margin-right: 0.25em;
}

.auth-divider {
  border: 0;
  border-top: 1px solid #2b2b2b;
  margin: 1rem 0;
}

.oauth-providers {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.oauth-btn {
  width: 100%;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border: 1px solid #2b2b2b;
}

.oauth-btn:hover {
  opacity: 0.88;
}

.oauth-btn-google {
  background: #1a1a1a;
  color: #ffffff;
}

.oauth-btn-google:hover {
  background: #252525;
}

.oauth-btn-discord {
  background: #1a1a33;
  color: #ffffff;
  border-color: #2b2b55;
}

.oauth-btn-discord:hover {
  background: #222244;
}

.oauth-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.secondary-auth-btn {
  width: 100%;
  padding: 0.8rem;
  background: #171717;
  color: #ffffff;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
  margin: 1rem 0;
}

.secondary-auth-btn:hover {
  opacity: 0.88;
}

.auth-redirect-page #continueBtn {
  margin-bottom: 1rem;
}

.auth-reset-form {
  margin-top: 1rem;
}

.auth-redirect-note {
  margin-top: 1rem;
}

.back-link a {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 1px solid #2b2b2b;
  padding-bottom: 0.1rem;
  transition: all 0.2s ease;
}

.back-link a:hover {
  border-bottom-color: #ffffff;
  transform: translateX(-2px);
}

.auth-legal {
  margin-top: 1.5rem;
  font-size: 0.7rem;
  color: #666;
  background: #111;
  border: 1px solid #222;
  border-radius: var(--radius-md);
  padding: 0.4rem 0.65rem;
  line-height: 1.4;
  width: 100%;
  max-width: 440px;
  box-sizing: border-box;
  text-align: center;
}

.auth-legal a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s ease;
}

.auth-legal a:hover {
  color: #fff;
}

/* ========================================
   404 PAGE STYLES
   ======================================== */
body.error-page {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.actions {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid #2b2b2b;
  background: #171717;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.action:hover {
  transform: translateY(-1px);
  background: #ffffff;
  color: #000000;
}

.action-primary,
.action-primary:link,
.action-primary:visited,
.action-primary:active {
  background: #ffffff;
  color: #000000;
}

.action-primary:hover {
  background: #dcdcdc;
}

.quick-links {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #2b2b2b;
}

.quick-links h2 {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.quick-links-grid {
  margin-top: 0.85rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.75rem;
}

.quick-link {
  padding: 0.9rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid #2b2b2b;
  background: #141414;
  text-decoration: none;
  color: #ffffff;
  transition: all 0.2s ease;
}

.quick-link strong {
  display: block;
  font-size: 0.95rem;
}

.quick-link span {
  display: block;
  margin-top: 0.35rem;
  color: #9c9c9c;
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.quick-link:hover {
  background: #ffffff;
  color: #000000;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.quick-link:hover span {
  color: #333333;
}

/* ========================================
   WALLPAPERS PAGE STYLES
   ======================================== */
.wallpaper-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.wallpaper-card {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #101010;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wallpaper-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(255, 255, 255, 0.15);
}

.wallpaper-preview {
  width: 100%;
  height: 220px;
  background: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #b5b5b5;
}

.wallpaper-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.variant-label {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  background: #171717;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: #b5b5b5;
  margin-top: 0.5rem;
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  background: #ffffff;
  color: #000000;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.9rem;
  margin-top: 1rem;
  transition: opacity 0.2s ease;
}

.download-btn:hover {
  opacity: 0.85;
}

/* ========================================
   FOOTER STYLES
   ======================================== */
footer {
  width: min(1120px, calc(100% - 2rem));
  margin: 1.25rem auto 2rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem 1.5rem;
  background: #101010;
}

footer p {
  color: #b5b5b5;
}

footer a {
  color: #e0e0e0;
  text-decoration: none;
  transition: color 0.2s ease;
}

footer a:hover {
  color: #fff;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-column h4 {
  color: #7a7a7a;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 0.2rem;
}

.footer-column a {
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: fit-content;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
}

.footer-brand img {
  width: 32px;
  height: 32px;
}

.footer-column p {
  font-size: 0.85rem;
  margin: 0;
}

.footer-bottom {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid #2b2b2b;
}

.footer-bottom p {
  font-size: 0.8rem;
  margin: 0;
}

@media (max-width: 850px) {
  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem 1rem;
  }

  .footer-column:first-child {
    grid-column: 1 / -1;
  }
}

/* ========================================
   HELP & DOCUMENTATION STYLES
   ======================================== */
.help-guide-page {
  min-height: 100vh;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.help-guide-page,
.help-guide-page * {
  box-sizing: border-box;
}

.help-guide-page a,
.help-guide-page a:visited {
  color: inherit;
}

.help-guide-page .help-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  display: grid;
  gap: 1.5rem;
}

.help-guide-page .help-container > header {
  display: grid;
  gap: 1rem;
  padding: 2rem;
  margin-bottom: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(23, 23, 23, 0.8), rgba(16, 16, 16, 0.95)),
    #0f0f0f;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.help-guide-page .help-container > header h1 {
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  line-height: 0.96;
  letter-spacing: -0.05em;
  margin: 0;
  color: var(--text-primary);
  max-width: 11ch;
}

.help-guide-page .back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.help-guide-page .back-button:hover {
  background: var(--bg-tertiary);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(255, 255, 255, 0.2);
}

.help-guide-page .toc {
  position: sticky;
  top: 1.25rem;
  z-index: 2;
  background: rgba(16, 16, 16, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  padding: 1.35rem 1.4rem;
  margin-bottom: 0;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.help-guide-page .toc h2 {
  font-size: 0.88rem;
  margin: 0 0 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.help-guide-page .toc ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.55rem;
  margin: 0;
  padding: 0;
}

.help-guide-page .toc li {
  margin: 0;
}

.help-guide-page .toc a {
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.help-guide-page .toc a:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

.help-guide-page .help-container section {
  margin-bottom: 0;
  scroll-margin-top: 6rem;
  padding: 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 16, 16, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.help-guide-page .help-container section h2 {
  font-size: 1.55rem;
  margin-bottom: 0.85rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.help-guide-page .help-container section h3 {
  font-size: 1rem;
  margin-top: 1.2rem;
  margin-bottom: 0.55rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.help-guide-page .help-container p,
.help-guide-page .help-container li {
  color: var(--text-secondary);
  line-height: 1.7;
}

.help-guide-page .feature-box,
.help-guide-page .menu-item,
.help-guide-page .steps,
.help-guide-page .tip-box {
  border-radius: var(--radius-xl);
}

.help-guide-page .feature-box {
  background: rgba(23, 23, 23, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 1.2rem 1.25rem;
  margin: 0.9rem 0;
}

.help-guide-page .feature-box h4 {
  color: var(--text-primary);
  margin-bottom: 0.45rem;
  font-size: 1rem;
}

.help-guide-page .feature-box p {
  color: var(--text-secondary);
  margin: 0;
}

.help-guide-page .accordion {
  background: rgba(23, 23, 23, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xl);
  margin: 0.85rem 0;
  overflow: hidden;
  box-shadow: none;
}

.help-guide-page .accordion summary {
  cursor: pointer;
  list-style: none;
  padding: 1rem 1.2rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background 0.15s ease;
}

.help-guide-page .accordion summary:hover {
  background: rgba(255, 255, 255, 0.06);
}

.help-guide-page .accordion summary::-webkit-details-marker {
  display: none;
}

.help-guide-page .accordion summary::after {
  content: "+";
  font-size: 1.2rem;
  color: #009db2;
  flex-shrink: 0;
}

.help-guide-page .accordion[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.12);
}

.help-guide-page .accordion[open] summary::after {
  content: "-";
}

.help-guide-page .accordion .accordion-body {
  padding: 1rem 1.2rem 1.2rem;
  color: var(--text-secondary);
}

.help-guide-page .accordion .accordion-body p {
  margin-bottom: 0.75rem;
}

.help-guide-page .accordion .accordion-body ul,
.help-guide-page .accordion .accordion-body ol {
  margin: 0.55rem 0 0 1.15rem;
}

.help-guide-page .accordion .accordion-body li {
  margin: 0.45rem 0;
}

.help-guide-page .steps {
  background: rgba(23, 23, 23, 0.8);
  padding: 1rem 1.1rem;
  margin: 1rem 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.help-guide-page .steps ol {
  margin-left: 1.15rem;
  color: var(--text-secondary);
}

.help-guide-page .steps li {
  margin: 0.55rem 0;
  line-height: 1.75;
}

.help-guide-page code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.18rem 0.42rem;
  border-radius: var(--radius-md);
  font-family: "Courier New", monospace;
  color: var(--text-primary);
}

.help-guide-page .menu-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0;
}

.help-guide-page .menu-item {
  background: rgba(23, 23, 23, 0.8);
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.help-guide-page .menu-item h4 {
  color: var(--text-primary);
  margin-bottom: 0.4rem;
  font-size: 0.98rem;
}

.help-guide-page .menu-item p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.help-guide-page .tip-box {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1rem 1.1rem;
  margin: 1.15rem 0 0;
}

.help-guide-page .tip-box strong {
  color: var(--text-primary);
}

.help-guide-page .notice {
  background: rgba(255, 193, 7, 0.16);
  border: 1px solid rgba(160, 118, 8, 0.28);
  padding: 1rem;
  margin: 1rem 0;
  border-radius: var(--radius-lg);
  color: #6b4f00;
}

.help-guide-page .admin-table {
  width: 100%;
  margin: 1.25rem 0;
  border-collapse: collapse;
  background: rgba(23, 23, 23, 0.7);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.help-guide-page .admin-table th {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.9rem 1rem;
  text-align: left;
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.help-guide-page .admin-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}

.help-guide-page .admin-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

.help-guide-page footer {
  margin-top: 0;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(16, 16, 16, 0.92);
  color: var(--text-secondary);
  width: 100%;
}
@media (max-width: 768px) {
  .help-guide-page .help-container {
    padding: 1.25rem 0.9rem 2.5rem;
  }

  .help-guide-page .help-container > header,
  .help-guide-page .help-container section,
  .help-guide-page footer,
  .help-guide-page .toc {
    border-radius: var(--radius-xl);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .help-guide-page .toc {
    position: static;
  }

  .help-guide-page .toc ul,
  .help-guide-page .menu-items {
    grid-template-columns: 1fr;
  }

  .help-guide-page .help-container > header h1 {
    max-width: none;
  }
}

/* ========================================
   AUTH REDIRECT STYLES
   ======================================== */
.container-auth {
  position: relative;
  z-index: 10;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-elevated);
  max-width: 420px;
  width: 90%;
}

.auth-header {
  margin-bottom: 2rem;
}

.auth-logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  background: var(--button-bg);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--button-text);
  font-size: 24px;
  font-weight: bold;
}

#pageTitle {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

#statusText {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  min-height: 20px;
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color);
  border-top-color: var(--accent-cyan);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

#resetForm {
  display: none;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 2rem;
}

.form-group {
  position: relative;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
  text-align: left;
}

#resetForm input {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  transition: all 0.2s ease;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: inherit;
}

#resetForm input:focus {
  outline: none;
  border-color: var(--border-accent);
  box-shadow: var(--focus-ring);
}

#resetForm input::placeholder {
  color: var(--text-tertiary);
}

.form-hint {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 0.375rem;
  text-align: left;
}

#resetForm button {
  width: 100%;
  padding: 0.875rem;
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 0.5rem;
}

#resetForm button:hover {
  background: var(--button-bg-hover);
}

#resetForm button:active {
  transform: scale(0.98);
}

#resetForm button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

#errorBox,
#successBox {
  padding: 1rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
  display: none;
  font-size: 0.95rem;
  border-left: 4px solid;
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

#errorBox {
  border-left-color: var(--accent-red);
}

#successBox {
  border-left-color: var(--accent-cyan);
}

#continueBtn {
  display: none;
  width: 100%;
  padding: 0.875rem;
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1rem;
}

#continueBtn:hover {
  background: var(--button-bg-hover);
}

#continueBtn:active {
  transform: scale(0.98);
}

.divider {
  margin: 1.5rem 0;
  border: none;
  border-top: 1px solid var(--border-color);
}

.auth-footer {
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-top: 1.5rem;
  text-align: center;
}

.auth-footer a {
  color: var(--accent-cyan);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes moveBackground {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   RESPONSIVE DESIGN - TABLETS & MOBILE
   ======================================== */
@media (max-width: 850px) {
  .nav-container {
    width: calc(100% - 1.25rem);
    padding: 0.7rem 0;
  }

  .mobile-toggle {
    display: inline-flex;
    padding: 0.5rem 0.72rem;
  }

  .nav-links {
    display: flex;
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0.65rem;
    right: 0.65rem;
    padding: 0.65rem;
    background: #050505;
    border: 1px solid #2b2b2b;
    border-radius: var(--radius-lg);
    flex-direction: column;
    gap: 0.45rem;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition:
      max-height 0.32s ease,
      opacity 0.24s ease,
      transform 0.24s ease;
  }

  .nav-links.active {
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links li {
    display: flex;
    justify-content: center;
  }

  .nav-links a {
    width: 100%;
    min-width: 0;
    padding: 0.65rem 0.9rem;
    text-align: center;
  }

  .hero {
    width: calc(100% - 1.25rem);
    margin-top: 1rem;
    padding: 1.35rem 1rem;
  }

  .hero h1 {
    font-size: clamp(1.7rem, 9vw, 2.45rem);
  }

  .hero p {
    margin-top: 0.75rem;
  }

  .hero-buttons {
    margin-top: 1rem;
    gap: 0.6rem;
  }

  .hero-buttons a {
    width: 100%;
    max-width: 320px;
    text-align: center;
  }

  .section,
  footer {
    width: calc(100% - 1.25rem);
    padding: 1.25rem 1rem;
  }

  .section h2 {
    font-size: 1.2rem;
  }

  .discord-widgets {
    grid-template-columns: 1fr;
  }

  .widget iframe {
    min-height: 420px;
  }

  .panel {
    padding: 1.4rem;
    border-radius: var(--radius-xl);
  }

  .grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .actions {
    flex-direction: column;
  }

  .action {
    width: 100%;
  }

  .help-container {
    padding: 1rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  header {
    flex-wrap: wrap;
    gap: 0.75rem;
    flex-direction: column;
    align-items: flex-start;
  }

  section h2 {
    font-size: 1.5rem;
  }

  section h3 {
    font-size: 1.25rem;
  }
}

@media (max-width: 520px) {
  .logo {
    gap: 0.6rem;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
  }

  .logo img {
    width: 38px;
    height: 38px;
  }

  .mobile-toggle {
    font-size: 1rem;
    padding: 0.42rem 0.58rem;
  }

  .hero-buttons a {
    max-width: none;
  }

  .widget iframe {
    min-height: 360px;
  }

  .container-auth {
    padding: 2rem;
  }

  #pageTitle {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  header .flex.items-center.gap-8 {
    width: 100%;
    justify-content: space-between;
  }

  header .flex.items-center.gap-8 > .flex.items-center.gap-9 {
    width: 100%;
  }
}

/* INLINE STYLE UTILITIES START */

.u-0087482414 {
  font-size: 0.8rem; color: var(--text-secondary); margin-top: 1rem;
}

.u-008dd5276b {
  color: #d0d0d0;
}

.u-03a93a1fb4 {
  margin-bottom: 0.35rem;
}

.u-049eb96e94 {
  margin-top: 0.75rem; color: var(--text-secondary);
}

.u-095a8124e8 {
  background: #f39c12;
}

.u-09e5bcbf35 {
  margin: 0; color: var(--text-primary);
}

.u-0acc4ad61d {
  background: var(--bg-secondary); padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-color);
}

.u-0bb450f7e1 {
  width: 100%; margin-bottom: 0.5rem;
}

.u-0dd0513458 {
  display: flex; gap: 1rem; align-items: center;
}

.u-1974fe2fb5 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
}

.u-199b6f0e58 {
  width: 100%;
}

.u-1bf72780f4 {
  color: #b9b9b9;
}

.u-1c0eba1eec {
  display: none; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow);
}

.u-1c9116ee05 {
  text-align: center; margin-top: 32px; color: var(--bp-text-muted); font-size: 1em;
}

.u-1dac0b9a38 {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}

.u-1dd1863b80 {
  background: #f39c12; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-1def6ee70f {
  color: #999; font-size: 0.875rem;
}

.u-1df16cd7f0 {
  display: grid; grid-template-columns: minmax(320px, 1.2fr) minmax(320px, 1fr); gap: 1.25rem; align-items: start;
}

.staff-card-list-row {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.staff-card-text-row {
  grid-template-columns: 1fr auto;
}

.staff-card-link-row {
  grid-template-columns: 1fr 1fr auto;
}

.staff-card-list-row input {
  min-width: 0;
  width: 100%;
}

.u-1e52ae17aa {
  font-size: 2rem;
}

.u-21fcbdc5bf {
  padding: 1rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; color: var(--text-primary); transition: all 0.2s ease; display: flex; align-items: center; gap: 0.75rem;
}

.u-224b51a7b4 {
  display: none;
}

.u-24b531c61c {
  cursor: pointer;
}

.u-263210f0a2 {
  background: #ffffff; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-268fb78f11 {
  display: grid; gap: 1.5rem;
}

.u-2a56b75d43 {
  font-size: 0.85rem; color: var(--text-secondary);
}

.u-2ee324e727 {
  display: flex; flex-direction: column; gap: 1.5rem;
}

.u-2fa130aeca {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; flex-wrap: wrap;
}

.u-31e1062ded {
  padding: 1.5rem; text-align: center; color: var(--text-secondary); border: 1px dashed var(--border-color); border-radius: var(--radius-lg); background: var(--bg-secondary); margin-bottom: 1.5rem;
}

.u-3229ae90bb {
  margin-bottom: 1rem; color: var(--text-primary);
}

.u-35042daded {
  color: var(--text-secondary);
}

.u-3587d3e88d {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-weight: 500;
}

.u-35c8a4631f {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
}

.u-36f1b69f37 {
  background: #667eea;
}

.u-38e6a142a1 {
  width: 100%; max-width: 260px; border-radius: var(--radius-lg);
}

.u-3a17f2ae9e {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;
}

.u-3b84c0ff31 {
  background: #27ae60; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-3ce9d1792d {
  background: var(--bg-secondary); padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--border-color);
}

.u-3d67c26026 {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6;
}

.u-3dde037a00 {
  background: #ffffff;
}

.u-3eca9ee6b1 {
  font-weight: 600; color: var(--text-primary);
}

.u-3fa598650f {
  margin-bottom: 1.5rem; color: var(--text-primary);
}

.u-402084f055 {
  border: 1px solid #2b2b2b; border-radius: var(--radius-lg); background: rgba(43, 43, 43, 0.7); padding: 0.8rem; display: flex; justify-content: center;
}

.u-45cebc9ae6 {
  background: #764ba2; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-476a5d7777 {
  min-height: 200px;
}

.u-49cdf8748d {
  flex: 1;
}

.u-4c4849545f {
  margin-bottom: 1.5rem; color: var(--text-secondary);
}

.u-4d1e5c7dd7 {
  max-width: 600px;
}

.u-4f5f61b5ee {
  white-space: pre-wrap;
}

.u-50b87a3659 {
  width: 18px; height: 18px; cursor: pointer;
}

.u-51fc983900 {
  font-size: 1.5rem; color: #27ae60;
}

.u-5485aed367 {
  margin: 0.45rem 0 0 1.25rem;
}

.u-55fa2208d3 {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem;
}

.u-5af732c821 {
  margin-bottom: 1.5rem; display: flex; gap: 1rem; align-items: center;
}

.u-5fa1c6fb07 {
  display: flex; gap: 0.5rem;
}

.u-5fec6b39e3 {
  background: #050505; border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem;
}

.u-61059eac0c {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}

.u-61fee814a6 {
  margin-top: 0.6rem;
}

.u-66e68c6e5d {
  font-size: 0.8rem; color: var(--text-secondary); margin-top: 1rem; max-height: 200px; overflow-y: auto;
}

.u-685eb7ba5e {
  display: flex; flex-direction: column; gap: 0.5rem;
}

.u-696da6315e {
  margin-top: 1rem; display: grid; gap: 0.85rem;
}

.u-6e2da47641 {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;
}

.u-7012d5d10a {
  width: 100%; padding: 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; resize: vertical;
}

.u-70c6772cf9 {
  display: none; color: #eb5757;
}

.u-7350084f98 {
  width: 100%; padding: 0.5rem; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: var(--radius-md);
}

.u-73f912af3d {
  background: #9b59b6; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-75d90b69cf {
  font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center;
}

.u-766e2ce949 {
  padding: 0.5rem; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); border-radius: 4px;
}

.u-77a3ec2317 {
  margin-bottom: 0.75rem;
}

.u-783be4376a {
  font-size: 1.5rem; color: #f2994e;
}

/* ========================================
   WHITEBOARD UTILITY PAGE
   ======================================== */
body.whiteboard-page .tool-shell {
  margin-top: 1rem;
}

body.whiteboard-page .tool-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 1rem 0;
}

body.whiteboard-page .tool-toolbar .bp-muted {
  margin: 0;
}

body.whiteboard-page .color-spawn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

body.whiteboard-page .color-spawn-btn {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  color: #fff;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
}

body.whiteboard-page .color-spawn-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.whiteboard-page .whiteboard {
  position: relative;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px)
      0 0 / 20px 20px,
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 20px
      20px,
    #101010;
  min-height: 65vh;
  overflow: hidden;
}

body.whiteboard-page .note {
  position: absolute;
  width: min(280px, 78vw);
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

body.whiteboard-page .note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.5rem;
  cursor: grab;
  touch-action: none;
}

body.whiteboard-page .note-header:active {
  cursor: grabbing;
}

body.whiteboard-page .note-actions {
  display: inline-flex;
  gap: 0.35rem;
}

body.whiteboard-page .note-icon-btn {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

body.whiteboard-page .note textarea {
  width: 100%;
  border: 0;
  border-top: 1px solid #2b2b2b;
  background: transparent;
  color: #fff;
  min-height: 130px;
  resize: vertical;
  padding: 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
}

body.whiteboard-page .note textarea:focus {
  outline: 2px solid rgba(255, 255, 255, 0.2);
  outline-offset: -2px;
}

body.whiteboard-page .empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: #b5b5b5;
  padding: 1rem;
  pointer-events: none;
}

/* ========================================
   TEXT TOOLS UTILITY PAGE
   ======================================== */
body.text-tools-page .tool-shell {
  margin-top: 1rem;
}

body.text-tools-page .tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

body.text-tools-page .tool-column {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #101010;
  padding: 1rem;
}

body.text-tools-page .tool-column h3 {
  margin-bottom: 0.55rem;
}

body.text-tools-page .tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

body.text-tools-page .tool-column textarea,
body.text-tools-page .tool-column input {
  width: 100%;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
  color: #ffffff;
  padding: 0.6rem;
  font-family: inherit;
}

body.text-tools-page .tool-column textarea {
  min-height: 180px;
  resize: vertical;
}

body.text-tools-page .slug-output {
  margin-top: 0.6rem;
}

/* ========================================
   TOOLKIT UTILITY PAGES (shared)
   ======================================== */
body.util-toolkit-page .tool-shell {
  margin-top: 1rem;
}

body.util-toolkit-page .tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 720px) {
  body.util-toolkit-page .tool-grid {
    grid-template-columns: 1fr;
  }
}

body.util-toolkit-page .tool-column {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #101010;
  padding: 1rem;
}

body.util-toolkit-page .tool-column h3 {
  margin-bottom: 0.55rem;
}

body.util-toolkit-page .tool-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

body.util-toolkit-page .tool-column textarea,
body.util-toolkit-page .tool-column input,
body.util-toolkit-page .tool-column select {
  width: 100%;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
  color: #ffffff;
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
  box-sizing: border-box;
}

/* Every control - text input, select, color swatch, segmented button - shares
   this height so a row mixing dropdowns and custom buttons lines up evenly. */
body.util-toolkit-page .tool-column select,
body.util-toolkit-page .tool-column input[type="text"],
body.util-toolkit-page .tool-column input[type="url"] {
  height: 42px;
}

body.util-toolkit-page .tool-column textarea {
  min-height: 130px;
  resize: vertical;
}

body.util-toolkit-page .tool-column input[type="color"] {
  width: 100%;
  height: 42px;
  padding: 0.25rem;
  cursor: pointer;
}

body.util-toolkit-page .tool-field {
  margin-top: 0.7rem;
}

body.util-toolkit-page .tool-field:first-child {
  margin-top: 0;
}

body.util-toolkit-page .tool-field label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: #cfcfcf;
}

body.util-toolkit-page .tool-field-row {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.7rem;
}

body.util-toolkit-page .tool-field-row:first-child {
  margin-top: 0;
}

/* The row itself carries the top spacing (above) - its own :first-child
   rule can't tell a row's left cell from its right cell, so both cells
   are reset to 0 here to avoid the left one losing its margin instead. */
body.util-toolkit-page .tool-field-row .tool-field {
  flex: 1 1 0;
  margin-top: 0;
}

body.util-toolkit-page .tool-status {
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: #b5b5b5;
}

/* QR Code Generator */
body.util-toolkit-page .qr-preview-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #151515;
  padding: 1rem;
}

body.util-toolkit-page .qr-preview-wrap canvas,
body.util-toolkit-page .qr-preview-wrap img {
  /* No border-radius here: rounding a canvas/img clips its own corner
     pixels to whatever sits behind it. For dark QR styles that clipped
     sliver is close enough to the wrap's background to look like a
     rendering glitch rather than the intended square image - the
     wrap's own border-radius already frames it. */
  max-width: 100%;
  height: auto;
}

body.util-toolkit-page .tool-segmented {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

body.util-toolkit-page .tool-segmented button {
  flex: 1 1 auto;
  min-width: 100px;
  height: 44px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.6rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
  color: #cfcfcf;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow-wrap: break-word;
  transition: all var(--transition-fast);
}

@media (max-width: 640px) {
  body.util-toolkit-page .tool-segmented button {
    height: auto;
    min-height: 44px;
    white-space: normal;
    padding: 0.5rem 0.5rem;
  }
}

body.util-toolkit-page .tool-segmented button:hover {
  border-color: #3a3a3a;
}

body.util-toolkit-page .tool-segmented button.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 600;
}

/* Logo source shares its row with the upload field (half the row's width
   each), unlike every other segmented control which gets a full row - so
   its two buttons sit much closer to the wrap threshold. The active
   button's bold text is wide enough to tip the pair over that threshold,
   wrapping "Custom image" onto its own line and shifting both buttons -
   pinning them to an even 50/50 split with no wrap keeps them in place
   regardless of which one is bold. */
body.util-toolkit-page #qrLogoSource {
  flex-wrap: nowrap;
}

body.util-toolkit-page #qrLogoSource button {
  flex: 1 1 50%;
  min-width: 0;
}

body.util-toolkit-page .tool-swatches {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

body.util-toolkit-page .tool-swatches button {
  width: 42px;
  height: 42px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #2b2b2b;
  cursor: pointer;
  padding: 0;
  transition: all var(--transition-fast);
}

body.util-toolkit-page .tool-swatches button:hover {
  transform: translateY(-2px);
}

body.util-toolkit-page .tool-swatches button.active {
  border-color: #ffffff;
}

/* A single standalone toggle button - same visual language as
   .tool-segmented, but for an on/off field rather than a set of options. */
body.util-toolkit-page .tool-toggle {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
  color: #cfcfcf;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all var(--transition-fast);
}

body.util-toolkit-page .tool-toggle:hover {
  border-color: #3a3a3a;
}

body.util-toolkit-page .tool-toggle.active {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 600;
}

/* A collapsible section for controls that CAN be tweaked but shouldn't
   clutter the panel by default - only its <summary> shows until opened. */
body.util-toolkit-page .tool-advanced {
  margin-top: 0.7rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #131313;
  padding: 0.6rem 0.75rem;
}

body.util-toolkit-page .tool-advanced[open] {
  padding-bottom: 0.75rem;
}

body.util-toolkit-page .tool-advanced summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #cfcfcf;
  list-style: none;
}

body.util-toolkit-page .tool-advanced summary::-webkit-details-marker {
  display: none;
}

body.util-toolkit-page .tool-advanced summary::before {
  content: "\25B8";
  display: inline-block;
  width: 1em;
  color: #8a8a8a;
  transition: transform var(--transition-fast);
}

body.util-toolkit-page .tool-advanced[open] summary::before {
  transform: rotate(90deg);
}

body.util-toolkit-page .tool-field label span {
  color: #f5f5f5;
  font-weight: 600;
}

/* Toggling Riftlab/Custom keeps this field in the layout at all times -
   only its visibility flips - so switching sources never reflows anything
   around it (see .tool-file-field.is-hidden below). */
body.util-toolkit-page .tool-file-field.is-hidden {
  visibility: hidden;
}

body.util-toolkit-page .tool-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Styled to match .tool-toggle/.tool-segmented button exactly, so the
   native file input it wraps reads as one more control in the same set
   rather than a raw browser widget. */
/* Extra ".tool-field" ancestor class here isn't decorative - it's what
   gives this rule enough specificity to beat ".tool-field label" (which
   sets display: block) since this element IS a <label>. Without it the
   button collapses to block layout and its icon/text lose the flex
   centering below, reading as left-aligned instead of centered. */
body.util-toolkit-page .tool-field .tool-file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
  color: #cfcfcf;
  cursor: pointer;
  font-size: 0.85rem;
  font-family: inherit;
  transition: all var(--transition-fast);
  overflow: hidden;
}

/* ".tool-field" ancestor class added for specificity - without it
   ".tool-field label span" (which bolds/lightens slider value labels
   like "40%") outranks this and pins the filename text to a near-white
   #f5f5f5 no matter what, so it stays unreadable even once has-file
   turns the button's own background white. Inheriting the button's own
   color keeps the text readable in both the normal and has-file states. */
body.util-toolkit-page .tool-field .tool-file-button span {
  color: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.util-toolkit-page .tool-file-button .icon-inline {
  flex: none;
  width: 1em;
  height: 1em;
}

body.util-toolkit-page .tool-file-button:hover {
  border-color: #3a3a3a;
}

body.util-toolkit-page .tool-file-button:has(+ .tool-file-input:focus-visible) {
  border-color: #3a3a3a;
  outline: 2px solid #3a3a3a;
  outline-offset: 2px;
}

/* Filled in once a file is chosen - same "active" treatment as
   .tool-toggle/.tool-segmented so the state reads consistently. */
body.util-toolkit-page .tool-file-button.has-file {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
  font-weight: 600;
}

/* Small info glyph next to the upload label - the transparency-requirement
   note only shows on hover/focus instead of sitting on the page as
   permanent text, so it can't push anything below it around. */
body.util-toolkit-page .tool-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
  color: #8a8a8a;
  cursor: help;
  vertical-align: -2px;
}

body.util-toolkit-page .tool-info .icon-inline {
  width: 0.9em;
  height: 0.9em;
}

body.util-toolkit-page .tool-info:hover {
  color: #cfcfcf;
}

body.util-toolkit-page .tool-info-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.4rem);
  transform: translateX(-50%) translateY(4px);
  width: 200px;
  padding: 0.5rem 0.65rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #1c1c1c;
  color: #cfcfcf;
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: normal;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 5;
}

body.util-toolkit-page .tool-info:hover .tool-info-tip,
body.util-toolkit-page .tool-info:focus-visible .tool-info-tip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

body.util-toolkit-page .tool-column input[type="range"] {
  width: 100%;
  height: 42px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

body.util-toolkit-page .tool-column input[type="range"]:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

body.util-toolkit-page .tool-column input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #2b2b2b;
}

body.util-toolkit-page .tool-column input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #2b2b2b;
}

body.util-toolkit-page .tool-column input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #2b2b2b;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}

/* Chrome/Edge draw a soft focus-ring "halo" around the thumb on hover and
   while dragging by default - kill it explicitly rather than relying on
   the base rule's box-shadow:none, since these states are what add it. */
body.util-toolkit-page .tool-column input[type="range"]::-webkit-slider-thumb:hover,
body.util-toolkit-page .tool-column input[type="range"]::-webkit-slider-thumb:active,
body.util-toolkit-page .tool-column input[type="range"]:focus::-webkit-slider-thumb {
  box-shadow: none;
  outline: none;
}

body.util-toolkit-page .tool-column input[type="range"]:focus {
  outline: none;
}

body.util-toolkit-page .tool-column input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #2b2b2b;
  cursor: pointer;
  outline: none;
  box-shadow: none;
}

body.util-toolkit-page .tool-column input[type="range"]::-moz-range-thumb:hover,
body.util-toolkit-page .tool-column input[type="range"]::-moz-range-thumb:active {
  box-shadow: none;
  outline: none;
}

body.util-toolkit-page .tool-column input[type="range"]::-moz-focus-outer {
  border: 0;
}

/* Discord Timestamp Generator */
body.util-toolkit-page .timestamp-rows {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

body.util-toolkit-page .timestamp-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #171717;
  padding: 0.6rem 0.85rem;
}

body.util-toolkit-page .timestamp-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

body.util-toolkit-page .timestamp-row-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9b9b9b;
}

body.util-toolkit-page .timestamp-row-preview {
  font-size: 0.9rem;
  color: #e6e6e6;
}

body.util-toolkit-page .timestamp-row-code {
  flex: 0 0 auto;
  font-family: inherit;
  font-size: 0.8rem;
  color: #ffffff;
  background: #0c0c0c;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

body.util-toolkit-page .timestamp-row-code:hover {
  background: #ffffff;
  color: #000000;
}

/* Color Palette Generator */
body.util-toolkit-page .palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

body.util-toolkit-page .palette-swatch {
  position: relative;
  height: 160px;
  border-radius: var(--radius-lg);
  border: 1px solid #2b2b2b;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0.75rem;
  transition: transform var(--transition-fast);
}

body.util-toolkit-page .palette-swatch:hover {
  transform: translateY(-2px);
}

body.util-toolkit-page .palette-swatch-hex {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}

body.util-toolkit-page .palette-swatch-lock {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1.1em;
  height: 1.1em;
  cursor: pointer;
}

body.util-toolkit-page .palette-controls {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body.util-toolkit-page .palette-controls .tool-field {
  margin-top: 0;
  width: 100%;
}

body.util-toolkit-page .palette-base-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  height: 44px;
}

body.util-toolkit-page .color-picker-wrap {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
}

body.util-toolkit-page .color-picker-trigger {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: block;
}

body.util-toolkit-page .color-picker-trigger:hover {
  border-color: #3a3a3a;
}

body.util-toolkit-page .color-picker-popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  width: 220px;
  padding: 0.75rem;
  background: #151515;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

body.util-toolkit-page .color-picker-sv {
  position: relative;
  width: 100%;
  height: 140px;
  border-radius: var(--radius-sm, 6px);
  cursor: crosshair;
  touch-action: none;
  overflow: hidden;
}

body.util-toolkit-page .color-picker-sv-white {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

body.util-toolkit-page .color-picker-sv-black {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

body.util-toolkit-page .color-picker-sv-thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.util-toolkit-page .color-picker-hue {
  position: relative;
  width: 100%;
  height: 14px;
  margin-top: 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(
    to right,
    #ff0000,
    #ffff00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
}

body.util-toolkit-page .color-picker-hue-thumb {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body.util-toolkit-page .palette-base-row input[type="text"] {
  flex: 1 1 auto;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
  color: #ffffff;
  padding: 0 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

body.util-toolkit-page .palette-base-row .btn-secondary {
  flex: 0 0 auto;
  width: 44px;
  height: 100%;
  box-sizing: border-box;
  padding: 0;
}

body.util-toolkit-page .tool-actions.palette-actions {
  align-items: center;
}

body.util-toolkit-page .palette-actions-right {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}

body.util-toolkit-page .palette-actions-right .btn-secondary {
  gap: 0.5rem;
  background: #151515;
  color: #cfcfcf;
  border: 1px solid #2b2b2b;
}

body.util-toolkit-page .palette-actions-right .btn-secondary:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

body.util-toolkit-page .palette-actions-right .btn-secondary .icon-inline {
  color: inherit;
}

body.util-toolkit-page .palette-saved-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

body.util-toolkit-page .palette-saved-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
}

body.util-toolkit-page .palette-saved-swatches {
  display: flex;
  flex: 1 1 auto;
  height: 32px;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  cursor: pointer;
}

body.util-toolkit-page .palette-saved-swatches span {
  flex: 1 1 0;
}

body.util-toolkit-page .palette-saved-item .palette-saved-remove {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: transparent;
  color: #cfcfcf;
  cursor: pointer;
}

body.util-toolkit-page .palette-saved-item .palette-saved-remove:hover {
  border-color: #c0392b;
  color: #c0392b;
}

body.util-toolkit-page .palette-controls select {
  width: 100%;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #151515;
  color: #ffffff;
  padding: 0.6rem;
  font-family: inherit;
  font-size: 0.9rem;
}

/* ========================================
   DRAWING BOARD UTILITY PAGE
   ======================================== */
body.drawing-board-page {
  overflow: hidden;
  background: #ffffff;
}

body.drawing-board-page .drawing-shell {
  position: fixed;
  inset: 0;
}

body.drawing-board-page #drawingCanvas {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  touch-action: none;
  background: #ffffff;
}

body.drawing-board-page .drawing-hint {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 5;
  max-width: min(32rem, calc(100vw - 2rem));
  padding: 0.8rem 1rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.9);
  color: #1a1a1a;
  font-size: 0.94rem;
  line-height: 1.35;
  box-shadow: 0 14px 34px rgba(17, 17, 17, 0.1);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

body.drawing-board-page .drawing-status {
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  color: #1a1a1a;
  font-size: 0.85rem;
  box-shadow: 0 10px 24px rgba(17, 17, 17, 0.08);
  backdrop-filter: blur(10px);
}

body.drawing-board-page .drawing-toolbar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 20;
  width: min(1120px, calc(100vw - 1rem));
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

body.drawing-board-page .toolbar-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 0;
  background: transparent;
  color: #161616;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

body.drawing-board-page .toolbar-meta {
  font-size: 0.82rem;
  font-weight: 700;
  color: #5d5d5d;
}

body.drawing-board-page .toolbar-body {
  padding: 0 1rem 1rem;
}

body.drawing-board-page .toolbar-grid {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.drawing-board-page .toolbar-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  flex: 1 1 auto;
}

body.drawing-board-page .toolbar-page-nav {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
  flex: 0 0 auto;
}

body.drawing-board-page .file-menu {
  position: fixed;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.15);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  min-width: 160px;
}

body.drawing-board-page .file-menu-item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: transparent;
  color: #171717;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

body.drawing-board-page .file-menu-item:hover {
  background: #f0f0f0;
}

body.dark-mode.drawing-board-page .file-menu {
  background: rgba(20, 20, 20, 0.95);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .file-menu-item {
  color: #f2f2f2;
}

body.dark-mode.drawing-board-page .file-menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

body.drawing-board-page .toolbar-section {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.drawing-board-page .toolbar-section + .toolbar-section {
  padding-left: 0.75rem;
  border-left: 1px solid rgba(17, 17, 17, 0.12);
}

body.drawing-board-page .toolbar-size-control {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-pill);
  background: #f6f6f6;
}

body.drawing-board-page .toolbar-size-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: #2a2a2a;
  white-space: nowrap;
}

body.drawing-board-page .toolbar-size-slider {
  width: 130px;
  accent-color: #171717;
}

body.drawing-board-page .toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-pill);
  background: #f6f6f6;
  color: #171717;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.02);
}

body.drawing-board-page .toolbar-button:hover {
  background: #ededed;
}

body.drawing-board-page .toolbar-button.is-active {
  background: #171717;
  color: #ffffff;
  border-color: #171717;
}

body.drawing-board-page .toolbar-page-button {
  min-width: 44px;
  padding-left: 0;
  padding-right: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

body.drawing-board-page .drawing-toolbar.is-collapsed .toolbar-body {
  display: none;
}

@media (max-width: 820px) {
  body.drawing-board-page .drawing-toolbar {
    width: calc(100vw - 0.75rem);
    bottom: 0.375rem;
    border-radius: var(--radius-xl);
  }
}

@media (max-width: 560px) {
  body.drawing-board-page .toolbar-toggle {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.drawing-board-page .toolbar-grid {
    flex-wrap: wrap;
  }

  body.drawing-board-page .toolbar-page-nav {
    width: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }

  body.drawing-board-page .toolbar-meta {
    margin-left: 0;
  }

  body.drawing-board-page .drawing-hint {
    left: 0.75rem;
    right: 0.75rem;
    top: 0.75rem;
    max-width: none;
  }

  body.drawing-board-page .drawing-status {
    right: 0.75rem;
    top: auto;
    bottom: 4.75rem;
  }
}

body.drawing-board-page .color-selector {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-xl);
  padding: 0.75rem;
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
  backdrop-filter: blur(14px);
}

body.drawing-board-page .color-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

body.drawing-board-page .color-swatch {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  border: 2px solid rgba(17, 17, 17, 0.12);
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

body.drawing-board-page .color-swatch:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.drawing-board-page .color-swatch.active {
  border: 2px solid #161616;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 3px #161616;
}

body.drawing-board-page .eraser-cursor {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 1.5px solid rgba(0, 0, 0, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  pointer-events: none;
  z-index: 18;
}

body.drawing-board-page .drawing-utilities {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 25;
  display: flex;
  gap: 0.375rem;
  padding: 0.5rem;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 18px 40px rgba(17, 17, 17, 0.12);
  backdrop-filter: blur(14px);
}

body.drawing-board-page .utility-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 50%;
  background: #f6f6f6;
  color: #171717;
  cursor: pointer;
  transition: all 0.15s ease;
}

body.drawing-board-page .utility-button:hover {
  background: #ededed;
}

body.drawing-board-page .utility-button svg {
  display: block;
}

body.dark-mode.drawing-board-page {
  background: #0d0d0d;
}

body.dark-mode.drawing-board-page #drawingCanvas {
  background: #0d0d0d;
}

body.dark-mode.drawing-board-page .drawing-toolbar {
  background: rgba(16, 16, 16, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .toolbar-toggle {
  color: #f2f2f2;
}

body.dark-mode.drawing-board-page .toolbar-meta {
  color: #888888;
}

body.dark-mode.drawing-board-page .toolbar-button {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f2f2f2;
}

body.dark-mode.drawing-board-page .toolbar-button:hover {
  background: #2a2a2a;
}

body.dark-mode.drawing-board-page .toolbar-button.is-active {
  background: #f2f2f2;
  color: #0d0d0d;
  border-color: #f2f2f2;
}

body.dark-mode.drawing-board-page .toolbar-size-control {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .toolbar-size-label {
  color: #f2f2f2;
}

body.dark-mode.drawing-board-page .toolbar-size-slider {
  accent-color: #f2f2f2;
}

body.dark-mode.drawing-board-page .toolbar-section + .toolbar-section {
  border-left-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .color-selector {
  background: rgba(16, 16, 16, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .color-swatch {
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .color-swatch.active {
  border-color: #f2f2f2;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.5), 0 0 0 3px #f2f2f2;
}

body.dark-mode.drawing-board-page .drawing-hint {
  background: rgba(16, 16, 16, 0.9);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f2f2f2;
}

body.dark-mode.drawing-board-page .drawing-status {
  background: rgba(16, 16, 16, 0.9);
  color: #f2f2f2;
}

body.dark-mode.drawing-board-page .eraser-cursor {
  border-color: rgba(255, 255, 255, 0.55);
}

body.dark-mode.drawing-board-page .drawing-utilities {
  background: rgba(16, 16, 16, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .utility-button {
  color: #f2f2f2;
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode.drawing-board-page .utility-button:hover {
  background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 768px) {
  body.whiteboard-page .whiteboard {
    min-height: 72vh;
  }
}

.u-78bf8b3eba {
  padding: 1rem; background: var(--bg-secondary); border: 1px solid #27ae60; border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; color: var(--text-primary); transition: all 0.2s ease; display: flex; align-items: center; gap: 0.75rem;
}

.u-7d4a58262a {
  font-size: 1.5rem; color: #eb5757;
}

.u-7d4ab9b9be {
  background: #f2994e;
}

.u-8321c50225 {
  display: flex; gap: 0.75rem; justify-content: flex-end;
}

.u-84df9acdb4 {
  display: flex; flex-direction: column; gap: 0.75rem;
}

.u-858c693486 {
  font-family: var(--font-main);
}

.u-85affc642c {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;
}

.u-87024db3a0 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1rem;
}

.u-89cc0b3ebb {
  background: #eb5757; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-8ab75eb6f7 {
  margin: 0; color: var(--text-secondary); font-size: 0.9rem;
}

.u-8d0e4371f4 {
  background: #eb5757;
}

.u-90453e4dea {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}

.u-911727de86 {
  max-height: 500px; overflow-y: auto;
}

.u-937a5949da {
  background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-color); overflow-x: auto;
}

.u-988c5fa7c7 {
  margin-top: 1rem;
}

.u-9bd95a40cb {
  font-size: 1.5rem; color: #c0392b;
}

.u-9fc0e0a851 {
  color: #eb5757;
}

.u-a0558bdc54 {
  background: #2980b9; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-a067122837 {
  color: #667eea; text-decoration: none; transition: color 0.2s ease;
}

.u-a067122837:hover {
  color: #8fa4f3;
}

.u-a36f4eb8b1 {
  display: inline-flex; align-items: center; gap: 0.5rem;
}

.u-a674e7ccbb {
  background: var(--hover-bg); border: 1px solid var(--border-color);
}

.u-a7af3b4aaa {
  padding: 1rem; background: var(--bg-secondary); border: 1px solid #f2994e; border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; color: var(--text-primary); transition: all 0.2s ease; display: flex; align-items: center; gap: 0.75rem;
}

.u-aa0da8a6b4 {
  padding: 1.5rem;
}

.u-abed483693 {
  background: var(--bg-secondary); padding: 1rem; border-radius: var(--radius-md); border-left: 4px solid #667eea; margin-bottom: 1rem;
}

/* Secondary reference link on the Release Notes tab - the in-app list is
   authoritative now, this just points to the external historical sheet. */
.release-notes-external-link {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-tertiary);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.release-notes-external-link a {
  color: var(--text-secondary);
  text-decoration: underline;
}

.release-notes-external-link a:hover {
  color: var(--text-primary);
}

.u-ac79cce730 {
  margin-bottom: 0.5rem;
}

.u-ad5bf8667b {
  background-color: var(--accent-red); opacity: 0.7;
}

.u-ad9e4850ec {
  min-width: 220px;
}

.u-afcd7ed5ec {
  display: flex; gap: 0.5rem; align-items: center;
}

.u-b09de88da2 {
  font-size: 0.8rem; color: var(--text-secondary);
}

.u-b2fd88effd {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem;
}

.u-b56f4ebe1c {
  padding: 1rem; background: var(--bg-secondary); border: 1px solid #c0392b; border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; color: var(--text-primary); transition: all 0.2s ease; display: flex; align-items: center; gap: 0.75rem;
}

.u-bcbbdaa073 {
  color: var(--accent-color);
}

.u-bf0623942c {
  display: none; margin-top: 2rem; background: var(--bg-secondary); padding: 1.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border-color);
}

.u-c0dc2c6378 {
  max-width: 300px;
}

.u-c2c1c46766 {
  background: #27ae60;
}

.u-c2e712755d {
  background: #9b59b6;
}

.u-c4cec173c4 {
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem;
}

.u-c7167c3929 {
  margin: 0 0 0.75rem 0; color: var(--text-primary);
}

.u-ca9a6c17ab {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem;
}

.u-cd23822094 {
  background: #2980b9;
}

.u-cf0f3aef04 {
  margin-top: 2rem;
}

.u-d6fcdc85b9 {
  display: flex; gap: 0.75rem; margin-top: 1rem;
}

.u-d8a5730c92 {
  padding: 0.75rem; background: var(--bg-tertiary); border: 1px solid var(--border-color); border-radius: var(--radius-md);
}

.u-d8e4a1cc83 {
  background: #764ba2;
}

.u-d9ec21c6ec {
  width: 100%; height: 600px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: white;
}

.u-da7ecfaa82 {
  max-width: 760px;
}

.u-dac869a571 {
  display: none; margin-top: 0.75rem;
}

.u-dfdae1b11d {
  background: var(--hover-bg); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 0.8rem; margin-bottom: 1rem; color: var(--text-secondary); font-size: 0.9rem;
}

.u-e0f8bd9907 {
  background: #667eea; width: 50px; height: 50px; border-radius: var(--radius-md); cursor: pointer;
}

.u-e1db3de24b {
  display: none; margin-bottom: 2rem; padding: 1.5rem; background: var(--bg-secondary); border-radius: var(--radius-lg); border: 1px solid var(--border-color);
}

.u-e4905fb3c3 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;
}

.u-e4bf0341af {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem;
}

.u-e7992da274 {
  font-size: 0.85rem;
}

.u-e7e3a87746 {
  padding: 1rem; background: var(--bg-secondary); border: 1px solid #eb5757; border-radius: var(--radius-md); cursor: pointer; font-size: 1rem; color: var(--text-primary); transition: all 0.2s ease; display: flex; align-items: center; gap: 0.75rem;
}

.u-ebd636fb4b {
  display: flex; flex-direction: column; gap: 0.35rem;
}

.u-edce5f108a {
  justify-content: flex-start; margin-top: 0.75rem;
}

.u-ef2a287c19 {
  font-size: 0.85rem; color: var(--text-secondary); margin-top: 1rem;
}

.u-f2020e1409 {
  margin-left: 1.2rem;
}

.u-f48bc238f1 {
  display: flex; flex-direction: column; gap: 1rem;
}

.u-f6fed3cf80 {
  display: none; padding: 0.75rem; background: var(--bg-tertiary); border-radius: var(--radius-md); margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-secondary); border-left: 3px solid var(--accent-primary);
}

.u-fa415b955f {
  font-size: 1.5rem;
}

.u-fbe98b0a2a {
  max-width: 400px;
}

/* INLINE STYLE UTILITIES END */

/* STAFF UTILITY CLASSES (Tailwind replacement) */
.flex { display: flex; }
.hidden { display: none; }
.inline-block { display: inline-block; }
.relative { position: relative; }
.flex-1 { flex: 1 1 0%; }
.grow { flex-grow: 1; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-9 { gap: 2.25rem; }
.h-full { height: 100%; }
.h-10 { height: 2.5rem; }
.w-10 { width: 2.5rem; }
.w-full { width: 100%; }
.size-full { width: 100%; height: 100%; }
.min-h-screen { min-height: 100vh; }
.min-w-72 { min-width: 18rem; }
.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[280px\] { max-width: 280px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.p-4 { padding: 1rem; }
.pt-5 { padding-top: 1.25rem; }
.pt-6 { padding-top: 1.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.rounded { border-radius: var(--radius-sm); }
.rounded-full { border-radius: var(--radius-pill); }
.rounded-xl { border-radius: var(--radius-lg); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
.object-cover { object-fit: cover; }
.overflow-x-hidden { overflow-x: hidden; }
.text-white { color: #ffffff; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-\[22px\] { font-size: 22px; }
.text-\[33px\] { font-size: 33px; }
.text-\[53px\] { font-size: 53px; }
.text-\[\#00aaff\] { color: #00aaff; }
.text-\[\#bcbcbc\] { color: #bcbcbc; }
.text-\[\#d1d1d1\] { color: #d1d1d1; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.underline { text-decoration: underline; }

.resource-link-btn {
  color: #667eea;
  text-decoration: none;
  transition: color 0.2s ease;
}

.resource-link-btn:hover {
  color: #8fa4f3;
}
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-\[\#2b3036\] { border-color: #2b3036; }
.bg-\[\#050505\] { background-color: #050505; }
.bg-\[\#1a1d22\] { background-color: #1a1d22; }
.bg-\[\#2b2b2b\] { background-color: #2b2b2b; }
.bg-red-600 { background-color: #dc2626; }
.bg-opacity-80 { opacity: 0.8; }
.bg-\[\#1a1d22\].bg-opacity-80 { background-color: rgba(26, 29, 34, 0.8); opacity: 1; }
.hover\:bg-red-700:hover { background-color: #b91c1c; }
.hover\:text-white:hover { color: #ffffff; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.group\/design-root { position: relative; }

@media (min-width: 768px) {
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
  .md\:px-20 { padding-left: 5rem; padding-right: 5rem; }
}

@media (min-width: 1024px) {
  .lg\:flex-row { flex-direction: row; }
  .lg\:w-1\/3 { width: 33.333333%; }
  .lg\:px-40 { padding-left: 10rem; padding-right: 10rem; }
}

/* ========================================
   TERMS OF SERVICE PAGE
   ======================================== */
.tos-page .shell {
  width: min(1100px, calc(100% - 2rem));
}

.tos-page .legal-doc {
  background: var(--bp-surface);
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
}

.tos-page .header {
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bp-border);
}

.tos-page .brand h1 {
  font-size: 1.25rem;
  line-height: 1.2;
}

.tos-page .lead {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-md);
  background: var(--bp-surface-soft);
  color: var(--bp-text-muted);
  font-size: 0.92rem;
}

.tos-page .legal-doc > p {
  color: var(--bp-text-muted);
  max-width: 90ch;
  line-height: 1.75;
  margin-bottom: 0.95rem;
}

.tos-page .legal-doc > p:last-child {
  margin-top: 1rem;
  margin-bottom: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bp-border);
  font-size: 0.92rem;
}

.tos-page .section {
  width: 100%;
  margin: 1rem 0 0;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
  background: var(--bp-surface-soft);
  padding: 1.15rem;
}

.tos-page .section h2 {
  font-size: 1.08rem;
  letter-spacing: 0.035em;
  line-height: 1.3;
  color: var(--bp-white);
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--bp-border);
}

.tos-page .section h3 {
  margin: 1rem 0 0.55rem;
  color: var(--bp-white);
  font-size: 0.99rem;
  letter-spacing: 0.02em;
}

.tos-page .section > p {
  color: var(--bp-text-muted);
  max-width: 90ch;
  margin-top: 0;
  margin-bottom: 0.75rem;
  line-height: 1.72;
}

.tos-page .section ul {
  margin: 0.2rem 0 0.9rem 1.2rem;
}

.tos-page .section li {
  color: var(--bp-text-muted);
  margin-bottom: 0.6rem;
  line-height: 1.72;
  max-width: 88ch;
}

.tos-page .section li:last-child {
  margin-bottom: 0;
}

.tos-page .conf-levels-dropdown {
  margin-top: 0.9rem;
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-lg);
  background: rgba(5, 5, 5, 0.35);
  overflow: hidden;
}

.tos-page .conf-levels-dropdown summary {
  list-style: none;
  cursor: pointer;
  padding: 0.8rem 0.9rem;
  font-weight: 600;
  color: var(--bp-white);
  border-bottom: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
}

.tos-page .conf-levels-dropdown summary::-webkit-details-marker {
  display: none;
}

.tos-page .conf-levels-dropdown[open] summary {
  border-bottom-color: var(--bp-border);
}

.tos-page .conf-levels-dropdown > :not(summary) {
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}

.tos-page .conf-levels-dropdown > p,
.tos-page .conf-levels-dropdown > ul,
.tos-page .conf-levels-dropdown > h3,
.tos-page .conf-levels-dropdown > h4,
.tos-page .conf-levels-dropdown .levels-table-wrap {
  margin-top: 0.8rem;
}

.tos-page .conf-levels-dropdown > :last-child {
  margin-bottom: 0.9rem;
}

.tos-page .conf-levels-dropdown h4 {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bp-white);
}

.tos-page .conf-levels-dropdown .level-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.58rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border: 1px solid transparent;
}

.tos-page .conf-levels-dropdown .level-title {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 0.26rem 0.62rem;
  border: 1px solid transparent;
  margin-left: 0.45rem;
}

.tos-page .level-public .level-badge,
.tos-page .level-title.level-public {
  background: rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.45);
  color: #8ff3cc;
}

.tos-page .level-not-public .level-badge,
.tos-page .level-title.level-not-public {
  background: rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.45);
  color: #9ec6ff;
}

.tos-page .level-confidential .level-badge,
.tos-page .level-title.level-confidential {
  background: rgba(234, 179, 8, 0.2);
  border-color: rgba(234, 179, 8, 0.45);
  color: #ffe38a;
}

.tos-page .level-frontier .level-badge,
.tos-page .level-title.level-frontier,
.tos-page .level-frontier-relic .level-badge {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.45);
  color: #d9b0ff;
}

.tos-page .level-relic .level-badge,
.tos-page .level-title.level-relic {
  background: rgba(107, 114, 128, 0.28);
  border-color: rgba(156, 163, 175, 0.45);
  color: #e4e7ec;
}

.tos-page .level-restricted .level-badge,
.tos-page .level-title.level-restricted {
  background: rgba(249, 115, 22, 0.2);
  border-color: rgba(249, 115, 22, 0.45);
  color: #ffc996;
}

.tos-page .level-redacted .level-badge,
.tos-page .level-title.level-redacted {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ffadad;
}

.tos-page .level-exceptional .level-badge,
.tos-page .level-title.level-exceptional {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.conf-page .tier-jump-panel {
  display: none;
}

.conf-page {
  scroll-behavior: smooth;
}

@media (min-width: 1360px) {
  .conf-page .shell {
    width: min(980px, calc(100% - 22rem));
  }

  .conf-page .tier-jump-panel {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    position: fixed;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 220px;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    padding: 0.8rem;
    border: 1px solid var(--bp-border);
    border-radius: var(--radius-lg);
    background: rgba(16, 16, 16, 0.94);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
    z-index: 40;
  }

  .conf-page .tier-jump-panel h3 {
    margin: 0 0 0.25rem;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bp-text-muted);
  }

  .conf-page .tier-jump-panel a {
    display: block;
    text-decoration: none;
    color: var(--bp-text);
    border: 1px solid var(--bp-border);
    border-radius: var(--radius-md);
    background: var(--bp-surface-soft);
    padding: 0.4rem 0.56rem;
    font-size: 0.86rem;
    line-height: 1.25;
  }

  .conf-page .tier-jump-panel a.level-public { color: #8ff3cc; }
  .conf-page .tier-jump-panel a.level-not-public { color: #9ec6ff; }
  .conf-page .tier-jump-panel a.level-confidential { color: #ffe38a; }
  .conf-page .tier-jump-panel a.level-frontier { color: #d9b0ff; }
  .conf-page .tier-jump-panel a.level-relic { color: #e4e7ec; }
  .conf-page .tier-jump-panel a.level-restricted { color: #ffc996; }
  .conf-page .tier-jump-panel a.level-redacted { color: #ffadad; }
  .conf-page .tier-jump-panel a.level-exceptional {
    color: #ffffff;
    background: #000000;
    border-color: rgba(255, 255, 255, 0.3);
  }

  .conf-page .tier-jump-panel a:hover,
  .conf-page .tier-jump-panel a:focus-visible {
    background: var(--bp-white);
    color: var(--bp-black);
    outline: none;
  }

  .conf-page .conf-levels-dropdown [id] {
    scroll-margin-top: 1rem;
  }
}

.tos-page .levels-table-wrap {
  border: 1px solid var(--bp-border);
  border-radius: var(--radius-md);
  overflow-x: auto;
}

.tos-page .levels-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.tos-page .levels-table th,
.tos-page .levels-table td {
  border-bottom: 1px solid var(--bp-border);
  padding: 0.58rem 0.68rem;
  text-align: left;
  color: var(--bp-text-muted);
  vertical-align: top;
}

.tos-page .levels-table th {
  color: var(--bp-white);
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(255, 255, 255, 0.03);
}

.tos-page .levels-table tbody tr:last-child td {
  border-bottom: 0;
}

@media (max-width: 900px) {
  .tos-page .legal-doc {
    padding: 1.05rem;
  }

  .tos-page .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .tos-page .back {
    width: auto;
  }

  .tos-page .section {
    padding: 1rem;
  }

  .tos-page .conf-levels-dropdown > :not(summary) {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ========================================
   DASHBOARD MOBILE POLISH
   ======================================== */
.dashboard-container .view-btn.active {
  background: #ffffff !important;
  color: #111111 !important;
  border-color: #ffffff !important;
}

.dashboard-container .task-compact-toggle {
  display: none;
}

.dashboard-container .task-icon-strip {
  display: none;
}

.dashboard-container .bug-compact-toggle {
  display: none;
}

@media (max-width: 900px) {
  .dashboard-container {
    flex-direction: column;
  }

  .dashboard-container .sidebar {
    position: static;
    top: auto;
    width: 100%;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    overflow: visible;
    z-index: auto;
  }

  .dashboard-container .sidebar-top {
    position: static;
    top: auto;
    z-index: auto;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
  }

  .dashboard-container .sidebar nav {
    overflow-y: visible;
  }

  .dashboard-container .user-info {
    margin-top: 0;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
  }

  .dashboard-container .main-content {
    margin-left: 0;
    padding: 0.9rem;
  }

  .dashboard-container .task-card {
    padding: 0.75rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .dashboard-container .task-compact-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
  }

  .dashboard-container .task-icon-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 0.4rem;
  }

  .dashboard-container .task-icon-badge {
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--hover-bg);
    font-size: 0.72rem;
    line-height: 1;
  }

  .dashboard-container .task-icon-priority-high {
    background: rgba(235, 87, 87, 0.18);
    color: #eb5757;
    border-color: rgba(235, 87, 87, 0.45);
  }

  .dashboard-container .task-icon-priority-medium {
    background: rgba(242, 153, 78, 0.2);
    color: #f2994e;
    border-color: rgba(242, 153, 78, 0.45);
  }

  .dashboard-container .task-icon-priority-low {
    background: rgba(39, 174, 96, 0.2);
    color: #27ae60;
    border-color: rgba(39, 174, 96, 0.45);
  }

  .dashboard-container .task-icon-status-completed {
    background: rgba(39, 174, 96, 0.18);
    color: #27ae60;
    border-color: rgba(39, 174, 96, 0.42);
  }

  .dashboard-container .task-icon-status-pending,
  .dashboard-container .task-icon-status-in-progress,
  .dashboard-container .task-icon-status-in_progress {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.38);
  }

  .dashboard-container .task-icon-status-planned {
    background: rgba(102, 126, 234, 0.16);
    color: #8ea2ff;
    border-color: rgba(142, 162, 255, 0.4);
  }

  .dashboard-container .task-icon-status-upcoming {
    background: rgba(168, 85, 247, 0.2);
    color: #d7b7ff;
    border-color: rgba(168, 85, 247, 0.42);
  }

  .dashboard-container .task-icon-status-canceled,
  .dashboard-container .task-icon-status-cancelled {
    background: rgba(235, 87, 87, 0.16);
    color: #eb5757;
    border-color: rgba(235, 87, 87, 0.4);
  }

  .dashboard-container .task-icon-assignee.is-me {
    background: rgba(39, 174, 96, 0.18);
    border-color: rgba(39, 174, 96, 0.4);
    color: #27ae60;
  }

  .dashboard-container .task-icon-assignee.not-me {
    background: rgba(142, 150, 163, 0.18);
    border-color: rgba(142, 150, 163, 0.4);
    color: #b0bac8;
  }

  .dashboard-container .task-icon-critical {
    animation: taskCriticalPulse 1.15s ease-in-out infinite;
  }

  @keyframes taskCriticalPulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(235, 87, 87, 0);
    }
    50% {
      transform: scale(1.08);
      box-shadow: 0 0 0 4px rgba(235, 87, 87, 0.22);
    }
  }

  .dashboard-container .task-card .task-compact-details {
    display: none;
  }

  .dashboard-container .task-card.compact-open .task-compact-details {
    display: block;
  }

  .dashboard-container .task-card-header {
    margin-bottom: 0.55rem !important;
  }

  .dashboard-container .task-title {
    font-size: 0.88rem !important;
    line-height: 1.35 !important;
  }

  .dashboard-container .task-description {
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
    margin: 0 0 0.55rem !important;
  }

  .dashboard-container .task-meta-row {
    margin-bottom: 0.55rem !important;
    gap: 0.35rem !important;
  }

  .dashboard-container .task-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.18rem 0.5rem !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.72rem !important;
    line-height: 1.1;
    font-weight: 600 !important;
  }

  .dashboard-container .task-pill-priority::before {
    content: "\26A1";
    font-size: 0.72rem;
  }

  .dashboard-container .task-pill-status::before {
    content: "\25CF";
    font-size: 0.6rem;
  }

  .dashboard-container .task-pill-start::before {
    content: "\1F4C5";
    font-size: 0.72rem;
  }

  .dashboard-container .task-footer {
    gap: 0.25rem;
    margin-top: 0.35rem;
  }

  .dashboard-container .task-assignee,
  .dashboard-container .task-branch,
  .dashboard-container .task-category {
    padding: 0.1rem 0.42rem;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    gap: 0.2rem;
  }

  .dashboard-container .task-assignee::before {
    content: "\1F464";
  }

  .dashboard-container .task-branch::before {
    content: "\1F9E9";
  }

  .dashboard-container .task-category::before {
    content: "\1F3F7";
  }

  .dashboard-container .task-subtask-actions {
    margin-top: 0.45rem !important;
    gap: 0.35rem !important;
  }

  .dashboard-container .task-subtask-toggle,
  .dashboard-container .task-subtask-add {
    font-size: 0.72rem !important;
    padding: 0.22rem 0.48rem !important;
    border-radius: var(--radius-pill) !important;
  }

  .dashboard-container .deadline-indicator {
    width: 30px !important;
    height: 30px !important;
    font-size: 0.65rem !important;
  }

  .dashboard-container .task-card:hover {
    transform: none;
    padding-left: 0.75rem;
  }

  .dashboard-container .bugs-mobile-grid {
    padding: 0.9rem;
    display: grid;
    gap: 1rem;
  }

  .dashboard-container .bug-card {
    border-radius: var(--radius-lg) !important;
    padding: 1rem !important;
  }

  .dashboard-container .bug-compact-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.15rem;
    margin-bottom: 0.6rem;
    background: var(--hover-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    cursor: pointer;
  }

  .dashboard-container .bug-card .bug-compact-details {
    display: none;
  }

  .dashboard-container .bug-card.compact-open .bug-compact-details {
    display: block;
  }
}

@media (max-width: 900px) {
  #resources-section .resources-tabs,
  #quick-dev-notes-section .resources-tabs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
  }

  #resources-section .resources-tab-btn,
  #quick-dev-notes-section .resources-tab-btn {
    min-width: 0;
    padding: 0.52rem 0.72rem;
    border-radius: var(--radius-md);
  }

  #resources-section .resources-tab-title,
  #quick-dev-notes-section .resources-tab-title {
    font-size: 0.82rem;
  }

  #resources-section .resources-tab-subtitle,
  #quick-dev-notes-section .resources-tab-subtitle {
    font-size: 0.7rem;
  }

  #resources-section .resources-panel-header {
    margin-bottom: 0.75rem;
  }

  #resources-section .resources-panel-actions {
    width: 100%;
  }

  #resources-section .resources-panel-actions .btn-primary {
    width: 100%;
  }

  #resourcesContainer {
    display: grid;
    gap: 0.62rem;
  }

  #resourcesContainer > div {
    display: block !important;
    padding: 0.8rem !important;
    border-radius: var(--radius-lg) !important;
  }

  #resourcesContainer > div h3 {
    font-size: 0.92rem;
    margin-bottom: 0.35rem !important;
  }

  #resourcesContainer > div p {
    font-size: 0.8rem !important;
    margin-bottom: 0.55rem !important;
  }

  #resourcesContainer > div > div:last-child {
    margin-top: 0.6rem;
  }

  #staff-card-section .u-1df16cd7f0 {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }

  #staff-card-section .u-c4cec173c4,
  #staff-card-section .u-af9bd09b64 {
    padding: 0.85rem;
    border-radius: var(--radius-lg);
  }

  #staff-card-section .form-group label {
    font-size: 0.76rem;
  }

  #staff-card-section .form-group input,
  #staff-card-section .form-group textarea,
  #staff-card-section .form-group select {
    font-size: 0.84rem;
    padding: 0.48rem 0.62rem;
  }

  #staff-card-section .u-c4cec173c4,
  #staff-card-section .u-5fec6b39e3,
  #staff-card-section .u-696da6315e {
    min-width: 0;
    width: 100%;
  }

  #staff-card-section .u-5fec6b39e3 {
    padding: 0.75rem;
  }

  #staff-card-section .u-696da6315e {
    padding: 0.8rem;
  }

  #staff-card-section .u-55fa2208d3 {
    grid-template-columns: 1fr;
  }

  #staff-card-section .staff-card-link-row {
    grid-template-columns: 1fr;
  }

  #staff-card-section .staff-card-text-row {
    grid-template-columns: 1fr;
  }

  #staff-card-section .staff-card-list-row .btn-delete {
    width: 100%;
    justify-self: stretch;
  }

  #lists-section .lists-container {
    gap: 0.72rem;
  }

  #lists-section .list-header {
    padding: 0.72rem 0.78rem;
  }

  #lists-section .list-body {
    padding: 0.72rem;
  }

  #lists-section .list-item-form {
    gap: 0.42rem;
  }

  #lists-section .list-items-table {
    font-size: 0.8rem;
  }

  #lists-section .list-items-table th,
  #lists-section .list-items-table td {
    padding: 0.42rem 0.45rem;
  }

  #quick-dev-notes-section .idea-card,
  #ideas-section .idea-card,
  #release-notes-section .release-note-card {
    border-radius: var(--radius-lg);
    padding: 0.78rem;
  }

  #quick-dev-notes-section .idea-actions,
  #ideas-section .idea-actions,
  #release-notes-section .section-header .btn-primary {
    width: 100%;
  }

  #quick-dev-notes-section .idea-actions .btn-small,
  #ideas-section .idea-actions .btn-small,
  #ideas-section .idea-admin-actions .btn-small {
    flex: 1;
    min-width: 0;
  }

  #quick-dev-notes-section .idea-meta,
  #ideas-section .idea-meta {
    gap: 0.3rem;
  }

  #quick-dev-notes-section .idea-meta > span:not(.idea-badge),
  #ideas-section .idea-meta > span:not(.idea-badge) {
    font-size: 0.73rem;
    color: var(--text-secondary);
  }

  #quick-dev-notes-section .view-selector,
  #ideas-section .view-selector {
    gap: 0.35rem;
    padding-bottom: 0.2rem;
  }

  #quick-dev-notes-section .view-btn,
  #ideas-section .view-btn {
    padding: 0.35rem 0.62rem;
    font-size: 0.78rem;
  }

  #release-notes-section .u-abed483693 {
    margin-bottom: 0.7rem;
  }

  #release-notes-section .release-meta {
    font-size: 0.72rem;
  }

  #release-notes-section .release-body {
    font-size: 0.82rem;
    line-height: 1.5;
  }

  #timeline-section .section-header {
    gap: 0.5rem;
  }

  #timeline-section .section-header select {
    width: 100%;
  }

  #timelineContainer,
  .gantt-container {
    overflow-x: hidden !important;
  }

  #calendarContainer,
  .gantt-scroll-area {
    overflow-x: auto !important;
  }

  #timelineContainer > div {
    padding: 0.8rem !important;
  }

  .gantt-shell {
    padding: 0.8rem;
  }

  .calendar-controls {
    padding: 0.62rem 0.72rem;
  }

  .calendar-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .calendar-nav button {
    width: 100%;
    padding: 0.34rem 0.45rem;
    font-size: 0.76rem;
  }

  .calendar-month-year {
    width: 100%;
    text-align: center;
    font-size: 0.88rem;
  }
}

/* ========================================
   CLI PAGE STYLES - MATCH DASHBOARD DESIGN
   ======================================== */

.cli-page {
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
}

/* Fade animation for desktop tab/content switching */
@media (min-width: 901px) {
  .content-section {
    animation: fadeInSection 0.3s ease forwards;
  }

  .nav-panel-content {
    animation: panelExpand 0.2s ease forwards;
  }

  .view-btn.active {
    animation: activeTabPulse 0.3s ease;
  }

  .task-card,
  .team-card,
  .report-card,
  .list-card {
    animation: fadeInCard 0.3s ease forwards;
  }
}

/* Content section animation */
@keyframes fadeInSection {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pure terminal shell - full viewport, no card chrome */
.cli-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* Minimal persistent header so the CLI is never a dead end - a link back to
   the dashboard plus the brand mark, nothing else (this is still a terminal,
   not a dashboard page). */
.cli-topbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.cli-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.cli-back-link:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.cli-topbar-mark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cli-topbar-mark img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.cli-terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.cli-terminal-output::-webkit-scrollbar {
  width: 6px;
}

.cli-terminal-output::-webkit-scrollbar-track {
  background: transparent;
}

.cli-terminal-output::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.cli-line {
  margin-bottom: 0.25rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.cli-line--welcome,
.cli-line--system,
.cli-line--info,
.cli-line--success {
  color: var(--text-secondary);
}

.cli-line--prompt {
  color: var(--text-primary);
  font-weight: 600;
}

.cli-line--error {
  color: var(--accent-red);
}

.cli-terminal-output code {
  font-family: inherit;
  color: var(--text-primary);
}

.cli-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--border-color);
  flex-shrink: 0;
}

.cli-prompt {
  font-size: 0.8125rem;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}

.cli-input,
.cli-input:focus,
.cli-input:focus-visible {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 0.8125rem;
  outline: none;
  box-shadow: none;
}

.cli-input::placeholder {
  color: var(--text-tertiary);
}

/* ========================================
   PUBLIC HOMEPAGE TERMINAL (unauthenticated easter egg)
   ======================================== */
.public-terminal {
  margin-top: 1.25rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #0c0c0c;
  overflow: hidden;
}

.public-terminal-output {
  height: 260px;
  overflow-y: auto;
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
  line-height: 1.7;
  color: #f2f2f2;
}

.public-terminal-output::-webkit-scrollbar {
  width: 6px;
}

.public-terminal-output::-webkit-scrollbar-track {
  background: transparent;
}

.public-terminal-output::-webkit-scrollbar-thumb {
  background: #2b2b2b;
  border-radius: 3px;
}

.public-terminal-line {
  margin-bottom: 0.3rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: #9a9a9a;
}

.public-terminal-line a {
  color: #f2f2f2;
  text-decoration: underline;
}

.public-terminal-line.error {
  color: var(--accent-red);
}

.public-terminal-line.command {
  color: #ffffff;
  font-weight: 600;
}

.public-terminal-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #2b2b2b;
}

.public-terminal-prompt {
  font-size: 0.85rem;
  color: #f2f2f2;
  font-weight: 600;
  white-space: nowrap;
}

.public-terminal-input,
.public-terminal-input:focus,
.public-terminal-input:focus-visible {
  flex: 1;
  background: transparent;
  border: none;
  color: #f2f2f2;
  font-size: 0.85rem;
  outline: none;
  box-shadow: none;
}

.public-terminal-input::placeholder {
  color: #7a7a7a;
}

/* ========================================
   APPLICATIONS & TICKETS PAGES
   ======================================== */
.app-arc-page .shell,
.ticket-arc-page .shell {
  width: min(860px, calc(100% - 2rem));
}

.app-arc-page input,
.app-arc-page select,
.app-arc-page textarea,
.ticket-arc-page input,
.ticket-arc-page select,
.ticket-arc-page textarea {
  width: 100%;
  padding: 0.8rem;
  margin-bottom: 1rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  font-size: 1rem;
  background: #171717;
  color: #ffffff;
  box-sizing: border-box;
  font-family: inherit;
}

.app-arc-page select,
.ticket-arc-page select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #888 50%),
    linear-gradient(135deg, #888 50%, transparent 50%);
  background-position:
    calc(100% - 20px) calc(50% + 2px),
    calc(100% - 15px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.arc-callout {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #131313;
  color: #b5b5b5;
  font-size: 0.9rem;
}

.arc-callout a {
  color: #ffffff;
}

.arc-table {
  margin-top: 1rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #101010;
}

.arc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid #222;
  text-decoration: none;
  color: #ffffff;
  transition: background 0.2s ease;
}

.arc-row:last-child {
  border-bottom: 0;
}

.arc-row:hover {
  background: #1a1a1a;
}

.arc-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.arc-row-title {
  font-size: 0.96rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.arc-row-sub {
  font-size: 0.82rem;
  color: #9b9b9b;
}

.arc-row-date {
  font-size: 0.8rem;
  color: #9b9b9b;
  white-space: nowrap;
}

.arc-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 1px solid #2b2b2b;
  color: #d4d4d4;
  background: #1a1a1a;
}

.arc-badge.status-pending,
.arc-badge.status-open {
  color: #ffe38a;
  border-color: #4d4216;
  background: #211d0e;
}

.arc-badge.status-reviewing,
.arc-badge.status-in_progress,
.arc-badge.status-awaiting_user {
  color: #9ec6ff;
  border-color: #1d3a5c;
  background: #0f1d2e;
}

.arc-badge.status-accepted,
.arc-badge.status-resolved {
  color: #8ff3cc;
  border-color: #1d4a36;
  background: #0e211a;
}

.arc-badge.status-rejected,
.arc-badge.status-closed {
  color: #ffadad;
  border-color: #4d1f1f;
  background: #241010;
}

.arc-badge.status-withdrawn {
  color: #c9c9c9;
}

.wizard-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}

.wizard-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #131313;
  color: #9b9b9b;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.wizard-step-num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #3a3a3a;
  font-size: 0.76rem;
  font-weight: 700;
  flex-shrink: 0;
}

.wizard-step-label {
  font-size: 0.86rem;
  font-weight: 600;
}

.wizard-step.active {
  border-color: #ffffff;
  color: #ffffff;
}

.wizard-step.active .wizard-step-num {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.wizard-step.done {
  color: #d4d4d4;
}

.wizard-step.done .wizard-step-num {
  border-color: #8ff3cc;
  color: #8ff3cc;
}

.wizard-step:not(.active):not(.done) {
  cursor: default;
}

.wizard-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

#requirementsPanel .wizard-actions {
  margin-top: 1.75rem;
}

.wizard-actions .btn-primary,
.wizard-actions .secondary-auth-btn {
  width: auto;
  min-width: 120px;
  margin: 0;
}

.ticket-header-actions {
  justify-content: flex-start;
  margin-top: 1rem;
}

.ticket-header-actions .btn-primary {
  margin: 0;
}

.arc-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.arc-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #131313;
  color: #e6e6e6;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.arc-option:hover {
  border-color: #3d3d3d;
  background: #181818;
}

.arc-option input {
  width: auto;
  margin: 0;
}

.arc-review {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

.arc-review-group {
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #111111;
  padding: 0.9rem 1rem;
}

.arc-review-group h3 {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9b9b9b;
}

.arc-review-row {
  display: grid;
  grid-template-columns: minmax(140px, 30%) 1fr;
  gap: 1rem;
  padding: 0.4rem 0;
  border-top: 1px solid #1f1f1f;
}

.arc-review-row:first-of-type {
  border-top: 0;
}

.arc-review-label {
  color: #9b9b9b;
  font-size: 0.84rem;
}

.arc-review-value {
  color: #f2f2f2;
  font-size: 0.9rem;
  word-break: break-word;
  white-space: pre-wrap;
}

.arc-review-row-body .arc-review-value {
  white-space: pre-wrap;
}

.requirements-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.requirements-list li {
  position: relative;
  padding: 0.55rem 0.9rem 0.55rem 2rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #111111;
  color: #f2f2f2;
  font-size: 0.9rem;
}

.requirements-list li::before {
  content: "✓";
  position: absolute;
  left: 0.85rem;
  color: #7fdc8c;
  font-weight: 700;
}

.arc-success {
  margin-top: 1rem;
  padding: 1.2rem;
  border: 1px solid #27472b;
  border-radius: var(--radius-lg);
  background: #102212;
}

.arc-success .bp-heading {
  color: #d6ffd6;
}

.arc-ticket-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 1rem 0;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid #2b2b2b;
}

.arc-ticket-meta .bp-muted {
  font-size: 0.86rem;
  margin-top: 0.35rem;
}

.arc-thread {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.arc-message {
  max-width: 85%;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-lg);
  border: 1px solid #2b2b2b;
}

.arc-message.user {
  align-self: flex-end;
  background: #182031;
  border-color: #24304b;
}

.arc-message.staff {
  align-self: flex-start;
  background: #181818;
}

.arc-message-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.arc-message-author {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9ec6ff;
}

.arc-message.user .arc-message-author {
  color: #ffe38a;
}

.arc-message-date {
  font-size: 0.72rem;
  color: #9b9b9b;
}

.arc-message-body {
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.arc-reply-textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #171717;
  color: #ffffff;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  resize: vertical;
}

.arc-reply-textarea::placeholder {
  color: #8a8a8a;
}

.arc-reply-textarea:focus {
  outline: none;
  border-color: #ffffff;
  box-shadow: var(--focus-ring);
}

.arc-reply-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ticket-close-btn {
  background: #241010;
  border-color: #4d1f1f;
  color: #ffadad;
}

.ticket-close-btn:hover {
  background: #3a1818;
}

.support-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.support-toolbar select {
  max-width: 240px;
  padding: 0.5rem 0.7rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #171717;
  color: #ffffff;
  font-size: 0.9rem;
}

.support-toolbar .btn-primary {
  margin: 0;
}

.support-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.support-empty {
  color: #9b9b9b;
  font-size: 0.9rem;
}

.support-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #141414;
}

.support-row-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.support-row-title {
  font-size: 0.94rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.support-row-sub {
  font-size: 0.8rem;
  color: #9b9b9b;
}

.support-row-date {
  font-size: 0.76rem;
  color: #8a8a8a;
}

.support-row .btn-primary {
  margin: 0;
  flex-shrink: 0;
}

.support-modal-content {
  width: min(92vw, 720px);
}

.support-subheading {
  margin: 1.1rem 0 0.45rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9b9b9b;
}

.support-status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

.support-status-actions select {
  flex: 1;
  min-width: 140px;
  padding: 0.5rem 0.7rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #171717;
  color: #ffffff;
  font-size: 0.9rem;
}

.support-status-btn {
  padding: 0.45rem 0.75rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-md);
  background: #1a1a1a;
  color: #d4d4d4;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.support-status-btn:hover {
  border-color: #3d3d3d;
  background: #222;
}

.support-status-btn.selected {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.support-modal-content .btn-primary {
  margin: 0;
}

@media (max-width: 640px) {
  .arc-row {
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
  }

  .arc-row-main {
    flex-basis: 100%;
  }

  .arc-ticket-meta {
    flex-direction: column;
  }

  .arc-message {
    max-width: 100%;
  }

  .wizard-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .wizard-actions .btn-primary,
  .wizard-actions .secondary-auth-btn {
    width: 100%;
  }

  .arc-review-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }
}

/* ========================================================================
   OPENROUTER-INSPIRED DASHBOARD RESTYLE
   Additive overrides only, scoped to .dashboard-container / dashboard-only
   classes so the public site (which shares .btn-primary/.btn-secondary and
   the global input resets) is untouched. No class/id renamed, no JS-facing
   markup changed - everything below is cascade-safe because it's appended
   last in the file. Reintroduces --accent-cyan as a genuine cyan (matches
   Wallpapers/Riftlab-Cyan-Accent-Clean.svg, the dashboard's original
   documented accent before it got flattened to white) as the one on-brand
   accent detail; everything else stays black/white/gray, used sparingly on
   hover/active/focus states only.
   ======================================================================== */

/* Color tokens (--accent-cyan, --border-color, --bg-secondary/--tertiary, shadows,
   --focus-ring) are now defined once, site-wide, in Config/Theme.json (see
   Backend.js loadThemeConfig -> /theme.css) rather than overridden here per page -
   "one system of colors used around the whole website." Everything below is
   layout/spacing only. */

/* --- Sidebar: quieter surface, no boxed nav groups --- */

/* Control panel anchored to the bottom (help/settings/CLI) - matches the
   topbar's flat bg-secondary treatment and the nav-link row styling above
   it, so it reads as part of the same panel instead of a separately-tinted
   cap or a plain caption. */
.dashboard-container .sidebar-controls {
  position: relative;
  flex-shrink: 0;
  padding: 0.4rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
}

.shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.shortcuts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
}

.shortcuts-row-label {
  font-size: 0.85rem;
  color: var(--text-primary);
}

.shortcuts-row-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.shortcuts-row kbd {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.15rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  min-width: 1.75rem;
  text-align: center;
}

.shortcuts-row kbd.shortcuts-row-capturing {
  border-color: var(--accent-primary, var(--border-accent));
  color: var(--accent-primary, var(--border-accent));
}

.sidebar-control-btn {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

.dashboard-container .nav-panel {
  margin: 0 0.5rem 0.125rem;
  border: none;
}
.dashboard-container .nav-panel:hover {
  border-color: transparent;
}
/* Breathing room + a subtle divider above every group after the first, so a
   new group reads as a clear break from the previous one's last item
   instead of just another line in the list. */
.dashboard-container .nav-panel + .nav-panel {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.dashboard-container .nav-panel-header {
  margin: 0;
  border-radius: var(--radius-md);
}
.dashboard-container .nav-panel-title {
  font-size: 0.68rem;
  color: var(--text-tertiary);
  letter-spacing: 0.09em;
  gap: 0.55rem;
  padding: 0.5rem 0.5rem 0.3rem;
}
.dashboard-container .nav-panel-toggle {
  opacity: 0.6;
}

/* Flat nav rows: full-width soft fill on active, no left accent bar */
.dashboard-container .sidebar .nav-link {
  padding: 0.4rem 0.65rem;
  font-size: 0.8125rem;
  gap: 0.6rem;
}
.dashboard-container .sidebar .nav-link::before {
  display: none;
}
.dashboard-container .sidebar .nav-link:hover {
  transform: none;
}
.dashboard-container .sidebar .nav-link.active {
  background: var(--bg-tertiary);
  box-shadow: none;
}

/* One neutral icon tone instead of seven per-group hues - the accent only
   marks the active row, matching the reference page's restraint. */
.dashboard-container .nav-panel[data-panel] .nav-link-icon {
  color: var(--text-tertiary);
}
body.dark-mode .dashboard-container .sidebar .nav-link.active .nav-link-icon {
  color: var(--border-accent);
}

/* --- Content sections read as quiet page cards --- */
.dashboard-container .content-section {
  padding: 1.5rem 1.75rem;
  box-shadow: none;
}

.dashboard-container .section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1.1rem;
}
.dashboard-container .section-header h1 {
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.dashboard-container .section-header-icon {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--accent-cyan);
  flex-shrink: 0;
}

/* --- View selector / tabs: quieter pill group --- */
.dashboard-container .view-selector {
  background: transparent;
  border: none;
  padding: 0;
  gap: 0.25rem;
}
.dashboard-container .view-btn {
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
}
.dashboard-container .view-btn.active {
  background: var(--bg-tertiary);
  box-shadow: none;
  animation: none;
}

/* --- Cards: thinner border, flat hover (no lift/shadow, accent border only) --- */
.dashboard-container .task-card,
.dashboard-container .team-card,
.dashboard-container .report-card,
.dashboard-container .list-card,
.dashboard-container .widget-card,
.dashboard-container .category-item,
.dashboard-container .role-item,
.dashboard-container .milestone-item,
.dashboard-container .activity-item {
  border-radius: var(--radius-md);
  box-shadow: none;
}
.dashboard-container .task-card:hover,
.dashboard-container .team-card:hover,
.dashboard-container .report-card:hover,
.dashboard-container .list-card:hover {
  transform: none;
  box-shadow: none;
}

/* --- Tables: quiet header row, row-only separators, tabular numerals --- */
.dashboard-container .table-view,
.dashboard-container .ideas-table,
.dashboard-container .absences-table,
.dashboard-container .admin-table,
.dashboard-container .list-items-table {
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.dashboard-container .table-view th,
.dashboard-container .ideas-table th,
.dashboard-container .absences-table th,
.dashboard-container .admin-table th,
.dashboard-container .list-items-table th {
  background: transparent;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
}
.dashboard-container .table-view td,
.dashboard-container .ideas-table td,
.dashboard-container .absences-table td,
.dashboard-container .admin-table td,
.dashboard-container .list-items-table td {
  padding: 0.6rem 0.8rem;
}
.dashboard-container .absences-table tbody tr:hover,
.dashboard-container table tbody tr:hover {
  transform: none;
}

/* --- Badges/pills: smaller, quieter scale (same variant classes, no renames) --- */
.dashboard-container .priority-badge,
.dashboard-container .role-badge,
.dashboard-container .status-pill,
.dashboard-container .arc-badge,
.dashboard-container .game-feature-tag,
.dashboard-container .handbook-tag {
  padding: 0.12rem 0.5rem;
  font-size: 0.68rem;
}

/* --- Buttons: compact scale, flat hover (dashboard-scoped so public pages
   sharing .btn-primary/.btn-secondary are unaffected) --- */
.dashboard-container .btn-primary,
.dashboard-container .btn-secondary {
  padding: 0.4rem 0.85rem;
  font-size: 0.8125rem;
}
.dashboard-container .btn-primary:hover {
  transform: none;
  box-shadow: none;
  background: var(--button-bg-hover);
}
.dashboard-container .btn-secondary:hover {
  transform: none;
}

/* --- Modals: align with the flatter card language (dashboard-exclusive class) --- */
.modal-content {
  box-shadow: none;
}

/* --- Top navbar: site chrome + account menu (moved out of the sidebar footer) ---
   Sits in normal document flow above .dashboard-container, so the fixed .sidebar
   needs an explicit top offset matching its height; on mobile .sidebar already
   becomes position:static (see the existing 900px blocks), so no extra mobile
   handling is required here. */
.dashboard-topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.dashboard-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.dashboard-topbar-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  padding: 0.25rem;
  transition: background var(--transition-fast);
}

.dashboard-topbar-logo:hover {
  background: var(--hover-bg);
}

.dashboard-topbar-logo img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.dashboard-topbar-section {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-topbar .global-search {
  width: 280px;
  max-width: 40vw;
  margin-bottom: 0;
}

.dashboard-topbar .global-search input {
  padding: 0.45rem 2.6rem 0.45rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: var(--radius-md);
  width: 100%;
}

.global-search-kbd-hint {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.2rem;
  pointer-events: none;
}

.global-search-kbd-hint kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.25rem;
  border-radius: 4px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-tertiary);
  font-size: 0.65rem;
  font-family: inherit;
}

@media (max-width: 900px) {
  .global-search-kbd-hint {
    display: none;
  }
}

@media (max-width: 720px) {
  .dashboard-topbar-section {
    display: none;
  }
}

/* --- Shared confirm-delete modal --- */
.confirm-delete-content {
  width: min(92vw, 420px);
}

.confirm-delete-message {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 0 1.25rem;
}

.confirm-delete-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.confirm-delete-btn {
  background: #eb5757 !important;
  border-color: #eb5757 !important;
  color: #ffffff !important;
}

.confirm-delete-btn:hover {
  background: #d64545 !important;
}

/* --- Overview / Home landing page --- */
.overview-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* Grid items default to min-width:auto, sized to fit content's min-content
   width - and nowrap text (.overview-attention-title) has a min-content width
   equal to its full unwrapped length. Without this, a long title expands the
   grid track past the viewport on mobile instead of actually eliding. */
.overview-columns > .report-card {
  min-width: 0;
}

@media (max-width: 900px) {
  .overview-columns {
    grid-template-columns: 1fr;
  }
}

.overview-empty-row {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0.5rem 0;
}

.overview-attention-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0;
  min-width: 0;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
}

.overview-attention-item:last-child {
  border-bottom: none;
}

.overview-attention-item:hover .overview-attention-title {
  color: var(--border-accent);
}

.overview-attention-title {
  font-size: 0.88rem;
  color: var(--text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

/* --- Sidebar item counts: muted by default, amber only when the count
   implies something pending (open bugs, pending absences) - not for plain
   totals like open task count. --- */
.nav-link-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.3rem;
  padding: 0 0.4rem;
  height: 1.15rem;
  min-width: 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--hover-bg);
  font-size: 0.68rem;
  line-height: 1;
  color: var(--text-tertiary);
  font-weight: 600;
  vertical-align: middle;
}

.nav-link-count--attention {
  color: #f2994e;
}

/* updateSidebarCounts() sets textContent to "" for a zero count - without
   this, the pill's fixed min-width/height/background still render as a
   permanent empty gray dot (most visible on Absences, which is often
   legitimately at 0, unlike Tasks/Bugs which rarely are). */
.nav-link-count:empty {
  display: none;
}

/* --- Mini avatar: task/bug card assignee identity, same colored-circle
   system as the Members page, at inline-tag scale. --- */
.mini-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.mini-avatar--unassigned {
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}

.mini-avatar--unassigned [data-lucide] {
  width: 0.65rem;
  height: 0.65rem;
}

/* --- Roles / Categories list rows: name+ID block, then action buttons on
   their own row with real breathing room (previously unstyled - the ID line
   and the buttons had nothing but a paragraph's own margin between them). --- */
.dashboard-container .role-item-header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.dashboard-container .role-item-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.dashboard-container .role-item-actions,
.dashboard-container .category-item-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 14px;
}

/* The shared .group-card/.role-item/.category-item base rule (further up
   this file) sets align-items:center + justify-content:space-between for a
   ROW layout. Category/Branch cards have no wrapping header div like Roles
   does, so switching this one to flex-direction:column without resetting
   align-items/justify-content left them centered + space-between'd on the
   wrong axis - exactly the "icon floats up-right, buttons stuck bottom-left
   with a dead gap" bug. Resetting all four properties together fixes it. */
.dashboard-container .category-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.dashboard-container .sortable-th {
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.dashboard-container .sortable-th:hover {
  color: var(--border-accent);
}

.dashboard-container .sortable-th-arrow {
  width: 0.85em;
  height: 0.85em;
  vertical-align: middle;
  color: var(--accent-cyan);
}

/* Sticky table headers on Table/Bugs views - the topbar is in normal flow
   (not fixed), so a plain top:0 sticks headers to the viewport edge once
   the page has scrolled past everything above the table. */
.dashboard-container .table-view th,
.dashboard-container .bugs-table th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-tertiary);
}

/* Truncate with a "..." and rely on the title="" attribute for a native
   tooltip with the full text - used for branch names and similar labels
   that get cut off in narrow table/card columns. */
.truncate-tooltip {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  cursor: default;
}

@media (max-width: 520px) {
  .dashboard-topbar .global-search {
    max-width: 34vw;
  }
}

/* Utility buttons (help hint, admin toggle, CLI) - moved here from a fixed
   bottom-right FAB cluster. Flat topbar treatment: no circular shadow, no
   hover scale/glow, just a quiet background shift. */
.dashboard-topbar-tools {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.dashboard-topbar-tool {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dashboard-topbar-tool [data-lucide] {
  width: 1.1em;
  height: 1.1em;
}

.dashboard-topbar-tool:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.dashboard-topbar-tool.active {
  background: var(--button-bg);
  color: var(--button-text);
}

.dashboard-topbar-tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.65rem;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--text-primary);
  z-index: 70;
}

.dashboard-topbar-tool:hover .dashboard-topbar-tooltip {
  display: block;
}

.dashboard-topbar-account {
  position: relative;
}

.dashboard-topbar-account-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dashboard-topbar-account-trigger:hover,
.dashboard-topbar-account-trigger[aria-expanded="true"] {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.dashboard-topbar-account-trigger svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}

.dashboard-topbar-account-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.dashboard-topbar-account-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 160px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: 0.4rem;
  z-index: 60;
}

.dashboard-topbar-account-dropdown.active {
  display: block;
}

.notification-bell-wrapper {
  position: relative;
}

.notification-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: #eb5757;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.notification-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  width: 320px;
  max-height: 420px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  z-index: 70;
  overflow: hidden;
  flex-direction: column;
}

.notification-dropdown.active {
  display: flex;
}

.notification-dropdown-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  flex-shrink: 0;
}

.notification-dropdown-header button {
  background: none;
  border: none;
  color: var(--accent-cyan);
  font-size: 0.74rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}

.notification-list {
  overflow-y: auto;
}

.notification-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.75rem;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-item:hover {
  background: var(--hover-bg);
}

.notification-item.unread {
  background: var(--accent-surface);
}

.notification-item-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.notification-item-body {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin-bottom: 0.15rem;
}

.notification-item-time {
  font-size: 0.7rem;
  color: var(--text-tertiary);
}

.notification-empty {
  padding: 1.5rem 0.75rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.dashboard-topbar-account-logout {
  width: 100%;
  padding: 0.45rem 0.65rem;
  background: transparent;
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dashboard-topbar-account-logout:hover {
  background: var(--hover-bg);
}

body:has(.dashboard-topbar) .dashboard-container {
  min-height: calc(100vh - 56px);
}

.mobile-bottom-logout {
  display: none;
}

@media (max-width: 900px) {
  .dashboard-topbar {
    display: none;
  }

  body:has(.dashboard-topbar) .dashboard-container {
    min-height: 100vh;
  }

  .mobile-bottom-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: calc(100% - 1.5rem);
    margin: 1.5rem 0.75rem 2rem;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
  }

  .mobile-bottom-logout:hover {
    background: var(--hover-bg-darker);
  }
}

/* Desktop-only: on mobile .sidebar is already position:static (see the existing
   900px blocks), where top/height here would be inert at best - scoping to a
   min-width media query keeps this from ever out-specificitying those resets. */
@media (min-width: 901px) {
  body:has(.dashboard-topbar) .sidebar {
    top: 56px;
    height: calc(100vh - 56px);
  }
}

/* --- Long-press quick-actions (Pinterest-style, touch devices only) ---
   .long-press-active is toggled by Staff-Dashboard-LongPress.js while a card/row
   is being held; the actual menu is the existing .context-menu system, opened via
   a synthetic contextmenu event, so only the press feedback + touch ergonomics
   need extra rules here. */
@media (hover: none) and (pointer: coarse) {
  .dashboard-container .task-card,
  .dashboard-container .bug-card,
  .dashboard-container .team-card,
  .dashboard-container .list-card,
  .dashboard-container .report-card,
  .dashboard-container .absences-table tbody tr,
  .dashboard-container .admin-table tbody tr,
  .dashboard-container .ideas-table tbody tr,
  .dashboard-container .list-items-table tbody tr,
  .dashboard-container .table-view tbody tr {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  .dashboard-container .long-press-active {
    transform: scale(0.97);
    opacity: 0.85;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }

  .context-menu-item {
    padding: 0.7rem 1.1rem;
    font-size: 0.92rem;
  }
}

/* --- Centered content column (OpenRouter/Supabase-style page body) ---
   Each dashboard "page" is a .content-section, so centering it directly needs
   no HTML changes and no wrapper div. */
.dashboard-container .content-section {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Status/priority/due-date icon chips, Supabase/OpenRouter-style ---
   These g-icon-* / icon-priority-* classes were bare colored glyphs before;
   turning the icon itself into a small tinted circular chip needs no markup
   changes (class names, and everywhere they're applied in Staff-Dashboard.js,
   are untouched). Reuses the same semantic colors that were already there. */
.dashboard-container [class*="g-icon-"],
.dashboard-container [class*="icon-priority-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.dashboard-container .g-icon-priority-low,
.dashboard-container .icon-priority-low,
.dashboard-container .g-icon-status-completed,
.dashboard-container .g-icon-assigned-me {
  background: rgba(39, 174, 96, 0.16);
}

.dashboard-container .g-icon-priority-medium,
.dashboard-container .icon-priority-medium,
.dashboard-container .g-icon-status-pending,
.dashboard-container .g-icon-due-tomorrow,
.dashboard-container .g-icon-status-hold {
  background: rgba(242, 153, 78, 0.18);
}

.dashboard-container .g-icon-due-week {
  background: rgba(242, 201, 76, 0.18);
}

/* Overdue / due-today - the "something is late" signal, made deliberately
   the loudest chip in the system (solid fill, not just a tint). */
.dashboard-container .g-icon-overdue,
.dashboard-container .g-icon-priority-critical,
.dashboard-container .icon-priority-critical,
.dashboard-container .g-icon-due-today,
.dashboard-container .g-icon-bug,
.dashboard-container .g-icon-priority-high,
.dashboard-container .icon-priority-high {
  background: rgba(235, 87, 87, 0.2);
}

.dashboard-container .g-icon-status-canceled,
.dashboard-container .g-icon-no-deadline,
.dashboard-container .g-icon-no-category,
.dashboard-container .g-icon-default,
.dashboard-container .g-icon-assigned-not-me,
.dashboard-container .g-icon-cat-other {
  background: var(--hover-bg);
}

.dashboard-container .g-icon-overdue,
.dashboard-container .g-icon-due-today {
  background: #eb5757;
  color: #ffffff !important;
}

.dashboard-container .g-icon-status-progress,
.dashboard-container .g-icon-due-month {
  background: rgba(0, 212, 255, 0.16);
  color: var(--accent-cyan) !important;
}

.dashboard-container .g-icon-future {
  background: rgba(167, 139, 250, 0.16);
}

.dashboard-container .g-icon-cat-game,
.dashboard-container .g-icon-user {
  background: rgba(102, 126, 234, 0.16);
}

.dashboard-container .g-icon-cat-web {
  background: rgba(0, 212, 255, 0.16);
  color: var(--accent-cyan) !important;
}

/* --- Sidebar header: logo + wordmark are one "go home" link, so the whole
   header reads as the app's identity rather than a bare line of text. --- */
.sidebar-header-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.sidebar-header-link:hover {
  opacity: 0.85;
}

.sidebar-header-link:hover .sidebar-title {
  color: var(--border-accent);
}

/* --- Dropdowns look like buttons until opened: subtle border + background,
   thin chevron, no heavy native focus outline - Supabase/OpenRouter texture. --- */
.dashboard-container select,
.dashboard-container .form-group select {
  -webkit-appearance: none;
  appearance: none;
  border-width: 1px;
  background-color: var(--bg-tertiary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 14px;
  padding-right: 2.1rem;
  cursor: pointer;
}

.dashboard-container select:hover,
.dashboard-container .form-group select:hover {
  border-color: var(--border-accent);
}

.dashboard-container select:focus,
.dashboard-container .form-group select:focus {
  box-shadow: var(--focus-ring);
}

/* --- Toast notifications: bottom-right, self-contained, never blocking --- */
.dashboard-toast-container {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 200;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
  max-width: min(340px, calc(100vw - 2.5rem));
}

.dashboard-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--text-tertiary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  font-size: 0.83rem;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.dashboard-toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.dashboard-toast--success { border-left-color: #27ae60; }
.dashboard-toast--error { border-left-color: #eb5757; }
.dashboard-toast--info { border-left-color: var(--accent-cyan); }

.dashboard-toast-message {
  flex: 1;
  min-width: 0;
  line-height: 1.4;
}

.dashboard-toast-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition-fast);
}

.dashboard-toast-close:hover {
  color: var(--text-primary);
}

/* --- Reports KPI row: resolve to a clean 3x3 grid instead of auto-fit
   wrapping unevenly (was 6-then-3, a ragged trailing row). --- */
.dashboard-container .reports-widgets {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 640px) {
  .dashboard-container .reports-widgets {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Public Roadmap page --- */
.roadmap-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.roadmap-card {
  display: block;
  padding: 1.25rem;
}

.roadmap-card h3 {
  margin-top: 0.75rem;
}

.roadmap-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
}

.roadmap-card-icon--overdue { color: #d97a6c; background: rgba(217, 122, 108, 0.14); }
.roadmap-card-icon--soon { color: #d1a05c; background: rgba(209, 160, 92, 0.14); }
.roadmap-card-icon--upcoming { color: #6fbf8b; background: rgba(111, 191, 139, 0.14); }
.roadmap-card-icon--none { color: #8a8a8a; }

.roadmap-deadline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--bp-text-muted, #b5b5b5);
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 1rem;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
}

.roadmap-deadline--overdue { color: #d97a6c; background: rgba(217, 122, 108, 0.14); }
.roadmap-deadline--soon { color: #d1a05c; background: rgba(209, 160, 92, 0.14); }
.roadmap-deadline--upcoming { color: #6fbf8b; background: rgba(111, 191, 139, 0.14); }

/* --- Public Status page --- */
.status-overall {
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  background: #171717;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}

.status-badge--ok {
  background: rgba(111, 191, 139, 0.16);
  color: #6fbf8b;
}

.status-badge--degraded {
  background: rgba(217, 122, 108, 0.16);
  color: #d97a6c;
}

.status-overall .bp-muted {
  margin-top: 0.6rem;
}

.status-card h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.status-icon-ok {
  color: #6fbf8b;
}

.status-icon-bad {
  color: #d97a6c;
}

.status-footnote {
  margin-top: 1.5rem;
  font-size: 0.78rem;
}

/* --- Public Release Notes page --- */
.release-timeline {
  /* Single source of truth for where the line sits - the dot markers on
     each entry read this same value (see .release-entry::before) instead
     of duplicating a hand-picked offset, so they can never drift apart. */
  --timeline-line-x: 0.6rem;
  position: relative;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-left: 2rem;
}

.release-timeline::before {
  content: "";
  position: absolute;
  left: var(--timeline-line-x);
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  transform: translateX(-50%);
  background: #2b2b2b;
}

.release-entry {
  position: relative;
  background: #171717;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}

.release-entry::before {
  content: "";
  position: absolute;
  /* Same --timeline-line-x the line itself is anchored to, just re-based
     from .release-timeline's edge to this entry's edge (the timeline's own
     padding-left is the gap between them). translateX(-50%) then centers
     the dot on that x exactly the way the line centers on it above -
     they can't end up misaligned since both read the one variable. */
  left: calc(-2rem + var(--timeline-line-x));
  top: 1.55rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  transform: translateX(-50%);
  background: #6fbf8b;
  border: 2px solid #0b0b0b;
}

.release-entry--in-progress::before {
  background: #d1a05c;
}

.release-entry-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.release-version {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
}

.release-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.release-status-badge--released {
  background: rgba(111, 191, 139, 0.16);
  color: #6fbf8b;
}

.release-status-badge--in-progress {
  background: rgba(209, 160, 92, 0.16);
  color: #d1a05c;
}

.release-date {
  color: var(--bp-text-muted, #b5b5b5);
  font-size: 0.82rem;
  margin: 0.35rem 0 0;
}

.release-summary {
  margin: 0.75rem 0 0;
  color: #e8e8e8;
}

.release-changes {
  margin: 0.85rem 0 0;
  padding-left: 1.25rem;
  color: #b5b5b5;
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}