/* ═══════════════════════════════════════════════════════════
   HERMES Assessment — Apple-grade Design System
   Inspired by apple.com: precision, restraint, depth, motion
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ── Brand ── */
  --navy: #1B2A4A;
  --navy-soft: #2A3F66;
  --gold: #C5A55A;
  --gold-soft: #D4B978;
  --teal: #0D9488;
  --teal-bright: #14B8A6;
  --teal-light: #E6F7F5;
  --accent: #8A6A22;
  --accent-light: #F8F1DF;

  /* ── Apple neutrals (exact apple.com palette) ── */
  --black: #1D1D1F;
  --white: #FFFFFF;
  --bg: #FBFBFD;            /* apple.com page bg */
  --bg-section: #F5F5F7;    /* apple.com section bg */
  --surface: #FFFFFF;
  --primary: #1D1D1F;
  --secondary: #6E6E73;     /* apple gray text */
  --tertiary: #86868B;      /* apple lighter gray */
  --quaternary: #AEAEB2;

  /* ── Apple system colors ── */
  --blue: #0066CC;          /* apple link blue */
  --blue-bright: #0071E3;   /* apple button blue */
  --blue-light: #E8F2FF;
  --green: #00A852;
  --green-light: #E3F9ED;
  --red: #E30000;
  --red-light: #FFEDED;
  --orange: #F56300;
  --orange-light: #FFF2E8;

  /* ── Borders & dividers (apple uses very subtle) ── */
  --border: rgba(0,0,0,0.06);
  --border-strong: rgba(0,0,0,0.1);
  --divider: rgba(0,0,0,0.08);

  /* ── Shadows (apple's layered soft shadows) ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 28px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-xl: 0 16px 44px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-glow-blue: 0 8px 30px rgba(0,113,227,0.25);
  --shadow-glow-gold: 0 8px 30px rgba(197,165,90,0.3);

  /* ── Liquid Glass: controlled by one app slider ── */
  --glass-level: 50;
  --glass-bg: rgba(255,255,255,0.67);
  --glass-bg-strong: rgba(255,255,255,0.77);
  --glass-blur: 19px;
  --glass-saturate: 160%;
  --glass-brightness: 1.09;
  --glass-highlight: rgba(255,255,255,0.47);
  --glass-shadow-alpha: 0.13;
  --glass-border: rgba(255,255,255,0.59);
  --glass-distortion: 31;

  /* ── Radii (apple's generous rounding) ── */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  --r-full: 999px;

  /* ── Motion (apple's signature easing) ── */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --font: 'Heebo', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
}

/* ═══════════ RESET ═══════════ */
#hermes-root *, #hermes-root *::before, #hermes-root *::after { box-sizing: border-box; }
#hermes-root {
  direction: rtl;
  text-align: right;
  font-family: var(--font);
  color: var(--primary);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0;
}
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }
::selection { background: rgba(0,113,227,0.15); }

/* ═══════════ SCROLLBAR ═══════════ */
#hermes-root ::-webkit-scrollbar { width: 8px; height: 8px; }
#hermes-root ::-webkit-scrollbar-track { background: transparent; }
#hermes-root ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 4px; }
#hermes-root ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.25); }

/* ═══════════ LAYOUT ═══════════ */
.h-page { min-height: 100vh; background: var(--bg); }
.h-content { padding: 40px 32px 64px; max-width: 1240px; margin: 0 auto; }
.h-content-narrow { padding: 40px 24px 64px; max-width: 860px; margin: 0 auto; }

/* ═══════════ HEADER (apple nav bar) ═══════════ */
.h-header {
  background: rgba(251,251,253,0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0 32px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.h-logo {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: var(--white);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 4px;
  box-shadow: var(--shadow-xs);
  transition: transform 0.3s var(--ease-spring);
}
.h-logo:hover { transform: scale(1.05) rotate(-2deg); }
.h-logo img { width: 100%; height: 100%; object-fit: contain; }
.h-brand { font-weight: 700; font-size: 19px; color: var(--primary); letter-spacing: -0.02em; }
.h-header-actions { margin-right: auto; display: flex; gap: 8px; align-items: center; }

/* ═══════════ CARDS (apple's elevated surfaces) ═══════════ */
.h-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.h-card-hover { cursor: pointer; }
.h-card-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.h-card-p { padding: 28px; }
.h-card-p-lg { padding: 40px; }

/* ═══════════ STATS (apple metric cards) ═══════════ */
.h-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 40px; }
.h-stat { display: flex; align-items: center; gap: 18px; position: relative; overflow: hidden; }
.h-stat::after {
  content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--teal)); opacity: 0; transition: opacity 0.4s var(--ease);
}
.h-stat:hover::after { opacity: 1; }
.h-stat-icon { font-size: 36px; line-height: 1; }
.h-stat-value { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; letter-spacing: -0.03em; }
.h-stat-label { font-size: 14px; color: var(--secondary); margin-top: 4px; font-weight: 500; }

/* ═══════════ CANDIDATE GRID ═══════════ */
.h-candidates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: 20px; }
.h-candidate-card { position: relative; overflow: hidden; }
.h-candidate-card::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-lg);
  padding: 1px; background: linear-gradient(135deg, transparent, transparent);
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none;
}
.h-candidate-card:hover::before {
  opacity: 1; background: linear-gradient(135deg, rgba(197,165,90,0.4), rgba(13,148,136,0.4));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.h-avatar {
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
  box-shadow: var(--shadow-sm);
}
.h-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.h-candidate-name { font-size: 19px; font-weight: 700; color: var(--primary); margin-bottom: 3px; letter-spacing: -0.02em; }
.h-candidate-sub { font-size: 14px; color: var(--secondary); margin-bottom: 4px; }
.h-candidate-id { font-size: 12px; color: var(--tertiary); direction: ltr; text-align: right; font-variant-numeric: tabular-nums; }
.h-candidate-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); }

/* ═══════════ PROGRESS ═══════════ */
.h-progress-wrap { display: flex; align-items: center; gap: 10px; }
.h-progress-bar { width: 88px; height: 6px; border-radius: var(--r-full); background: var(--bg-section); overflow: hidden; }
.h-progress-fill { height: 100%; border-radius: var(--r-full); transition: width 0.8s var(--ease-out); }

/* ═══════════ BADGES ═══════════ */
.h-badge { display: inline-block; padding: 5px 12px; border-radius: var(--r-full); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.h-badge-role { background: var(--blue-light); color: var(--blue); }

/* ═══════════ STATUS ═══════════ */
.h-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--secondary); font-weight: 500; }
.h-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ═══════════ BUTTONS (apple's pill buttons) ═══════════ */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: none; border-radius: var(--r-full); cursor: pointer;
  font-family: var(--font); font-weight: 600; letter-spacing: -0.01em;
  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), opacity 0.2s;
  white-space: nowrap; text-decoration: none; position: relative;
}
.h-btn:active { transform: scale(0.96); }
.h-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.h-btn:disabled:active { transform: none; }

.h-btn-primary { background: var(--blue-bright); color: #fff; }
.h-btn-primary:hover:not(:disabled) { background: #0077ED; box-shadow: var(--shadow-glow-blue); }
.h-btn-gold { background: var(--gold); color: #fff; }
.h-btn-gold:hover:not(:disabled) { background: var(--gold-soft); box-shadow: var(--shadow-glow-gold); }
.h-btn-navy { background: var(--navy); color: #fff; }
.h-btn-navy:hover:not(:disabled) { background: var(--navy-soft); }
.h-btn-teal { background: var(--teal); color: #fff; }
.h-btn-teal:hover:not(:disabled) { background: var(--teal-bright); box-shadow: 0 8px 30px rgba(13,148,136,0.3); }
.h-btn-outline { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1.5px var(--blue); }
.h-btn-outline:hover:not(:disabled) { background: var(--blue); color: #fff; }
.h-btn-ghost { background: transparent; color: var(--secondary); }
.h-btn-ghost:hover:not(:disabled) { background: rgba(0,0,0,0.04); color: var(--primary); }
.h-btn-danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1.5px rgba(227,0,0,0.3); }
.h-btn-danger:hover:not(:disabled) { background: var(--red); color: #fff; }

.h-btn-sm { padding: 8px 16px; font-size: 13px; }
.h-btn-md { padding: 11px 22px; font-size: 15px; }
.h-btn-lg { padding: 14px 30px; font-size: 17px; }

/* ═══════════ INPUTS ═══════════ */
.h-input, .h-select, .h-textarea {
  width: 100%; padding: 13px 16px;
  border-radius: var(--r-md); border: 1.5px solid var(--border-strong);
  font-size: 15px; font-family: var(--font); outline: none;
  color: var(--primary); background: var(--surface);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  direction: rtl;
}
.h-input::placeholder, .h-textarea::placeholder { color: var(--quaternary); }
.h-input:focus, .h-select:focus, .h-textarea:focus { border-color: var(--blue-bright); box-shadow: 0 0 0 4px rgba(0,113,227,0.12); }
.h-input-error { border-color: var(--red) !important; box-shadow: 0 0 0 4px rgba(227,0,0,0.1) !important; }
.h-label { display: block; font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 8px; letter-spacing: -0.01em; }
.h-field { margin-bottom: 20px; }
.h-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }

/* ═══════════ MODAL ═══════════ */
.h-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
  animation: hFadeIn 0.25s var(--ease);
}
.h-modal {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-xl); padding: 40px; width: 480px;
  max-width: 95vw; max-height: 90vh; overflow-y: auto;
  animation: hModalIn 0.4s var(--ease-out);
}
.h-modal-title { font-size: 24px; font-weight: 700; color: var(--primary); margin-bottom: 28px; letter-spacing: -0.02em; }

/* ═══════════ QUESTIONNAIRE ═══════════ */
.h-quest-progress-bar { height: 2px; background: var(--border); position: sticky; top: 56px; z-index: 100; }
.h-quest-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--teal)); transition: width 0.6s var(--ease-out); }
.h-quest-body { display: flex; align-items: center; justify-content: center; padding: 56px 24px; min-height: calc(100vh - 130px); }
.h-quest-container { width: 100%; max-width: 720px; }

.h-quest-card {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg); padding: 48px 44px; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.h-quest-card::before {
  content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--navy), var(--teal), var(--gold));
}
.h-quest-num {
  font-size: 13px; color: var(--tertiary); font-weight: 600;
  margin-bottom: 16px; letter-spacing: 0.02em; text-transform: uppercase;
}
.h-quest-text { font-size: 27px; font-weight: 600; color: var(--primary); line-height: 1.45; letter-spacing: -0.025em; }
.h-question-guidance {
  margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(0, 113, 227, 0.07); border: 1px solid rgba(0, 113, 227, 0.14);
  color: var(--secondary); font-size: 14px; line-height: 1.65; font-weight: 500;
}

/* Choice options */
.h-options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.h-option {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 22px; border-radius: var(--r-md);
  border: 2px solid transparent; background: var(--surface);
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.h-option:hover { transform: translateX(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.h-option.selected { border-color: var(--blue-bright); background: var(--blue-light); box-shadow: var(--shadow-glow-blue); }
.h-option-letter {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg-section); color: var(--secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; flex-shrink: 0;
  transition: all 0.25s var(--ease-spring);
}
.h-option.selected .h-option-letter { background: var(--blue-bright); color: #fff; transform: scale(1.1); }
.h-option-text { font-size: 16px; color: var(--primary); line-height: 1.5; padding-top: 4px; font-weight: 450; }

/* Nav */
.h-quest-nav { display: flex; justify-content: space-between; align-items: center; }
.h-dots { display: flex; gap: 5px; align-items: center; }
.h-dot-nav { height: 7px; border-radius: var(--r-full); transition: all 0.4s var(--ease-spring); }
.h-dot-nav.done { width: 7px; background: var(--teal); }
.h-dot-nav.current { width: 22px; background: var(--navy); }
.h-dot-nav.upcoming { width: 7px; background: var(--border-strong); }

/* ═══════════ PROFILE ═══════════ */
.h-profile-hero {
  background: linear-gradient(135deg, var(--surface), var(--bg-section));
  border-radius: var(--r-xl); box-shadow: var(--shadow-md);
  padding: 36px 40px; margin-bottom: 28px;
  position: relative; overflow: hidden;
}
.h-profile-hero::before {
  content: ''; position: absolute; top: -50%; left: -10%; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(197,165,90,0.08), transparent 70%);
}
.h-profile-avatar {
  width: 68px; height: 68px; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold); display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; box-shadow: var(--shadow-md);
}
.h-profile-info { display: grid; grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: 28px; align-items: center; position: relative; }
.h-info-item label { font-size: 12px; color: var(--tertiary); display: block; margin-bottom: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.h-info-item span { font-weight: 600; font-size: 15px; color: var(--primary); }

.h-section-title { font-size: 22px; font-weight: 700; color: var(--primary); margin-bottom: 20px; letter-spacing: -0.02em; }

.h-quest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 20px; }
.h-quest-card-mini { padding: 28px; transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.h-quest-card-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.h-quest-title { font-size: 17px; font-weight: 700; color: var(--primary); margin-bottom: 4px; letter-spacing: -0.02em; }
.h-quest-sub { font-size: 14px; color: var(--secondary); margin-bottom: 18px; }
.h-quest-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ═══════════ ANALYSIS ═══════════ */
.h-rec-card { padding: 28px 32px; border-radius: var(--r-xl); border: 2px solid; margin-bottom: 4px; position: relative; overflow: hidden; }
.h-rec-label { font-size: 13px; font-weight: 700; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.h-rec-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; }

.h-disc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.h-disc-item { padding: 20px 24px; border-radius: var(--r-md); border: 2px solid; transition: transform 0.3s var(--ease); }
.h-disc-item:hover { transform: scale(1.02); }
.h-disc-emoji { font-size: 26px; margin-bottom: 6px; }
.h-disc-title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.h-disc-desc { font-size: 13px; color: var(--secondary); margin-top: 3px; }

.h-flag-item { padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 10px; font-size: 14px; line-height: 1.55; }
.h-flag-positive { background: var(--green-light); }
.h-flag-concern { background: var(--red-light); }
.h-flag-q { font-weight: 700; margin-left: 4px; }

/* Score items (expandable) */
.h-score-item { transition: background 0.2s var(--ease); border-radius: var(--r-sm); }
.h-score-item:hover { background: var(--bg-section); }

/* ═══════════ LOGIN ═══════════ */
.h-login-page {
  min-height: 100vh;
  background: linear-gradient(150deg, var(--navy) 0%, #233456 45%, #1a2540 100%);
  display: flex; align-items: center; justify-content: center; direction: rtl;
  position: relative; overflow: hidden;
}
.h-login-page::before {
  content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(197,165,90,0.12), transparent 60%);
  animation: hFloat 8s ease-in-out infinite;
}
.h-login-page::after {
  content: ''; position: absolute; bottom: -20%; left: -10%; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(13,148,136,0.12), transparent 60%);
  animation: hFloat 10s ease-in-out infinite reverse;
}
.h-login-card {
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
  border-radius: var(--r-xl); box-shadow: var(--shadow-xl);
  padding: 56px 48px; width: 420px; max-width: 92vw; text-align: center;
  position: relative; z-index: 1;
}
.h-login-logo {
  width: 84px; height: 84px; border-radius: var(--r-lg);
  background: var(--white); border: 1px solid var(--border);
  margin: 0 auto 28px; display: flex; align-items: center; justify-content: center;
  padding: 12px; box-shadow: var(--shadow-md);
}
.h-login-logo img { width: 100%; height: 100%; object-fit: contain; }
.h-login-logo span { color: var(--navy); font-size: 34px; font-weight: 800; }
.h-login-title { font-size: 28px; font-weight: 800; color: var(--primary); margin-bottom: 6px; letter-spacing: -0.03em; }
.h-login-sub { font-size: 15px; color: var(--secondary); margin-bottom: 36px; }

/* ═══════════ ALERTS ═══════════ */
.h-alert { padding: 15px 18px; border-radius: var(--r-md); font-size: 14px; line-height: 1.55; margin-bottom: 18px; font-weight: 500; }
.h-alert-error { background: var(--red-light); color: var(--red); }
.h-alert-success { background: var(--green-light); color: var(--green); }
.h-alert-warning { background: var(--orange-light); color: var(--orange); }
.h-alert-info { background: var(--blue-light); color: var(--blue); }

/* ═══════════ MISC ═══════════ */
.h-back-btn {
  background: var(--bg-section); border: none; cursor: pointer;
  font-size: 18px; color: var(--secondary); width: 38px; height: 38px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: all 0.25s var(--ease);
}
.h-back-btn:hover { background: var(--border-strong); color: var(--primary); transform: translateX(3px); }

.h-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px; gap: 20px; min-height: 60vh; }
.h-spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border); border-top-color: var(--navy);
  border-radius: 50%; animation: hSpin 0.7s linear infinite;
}
.h-loading span { color: var(--secondary); font-size: 15px; font-weight: 500; }

.h-empty { text-align: center; padding: 80px 24px; }
.h-empty-icon { font-size: 56px; margin-bottom: 20px; opacity: 0.8; }
.h-empty-text { font-size: 17px; color: var(--secondary); }

/* ═══════════ RECOMMENDATION COLOR VARIANTS ═══════════ */
.rec-highly { border-color: var(--green) !important; background: linear-gradient(135deg, var(--green-light), #fff) !important; }
.rec-recommended { border-color: #34C759 !important; background: linear-gradient(135deg, #F0FBF4, #fff) !important; }
.rec-conditional { border-color: var(--orange) !important; background: linear-gradient(135deg, var(--orange-light), #fff) !important; }
.rec-not { border-color: var(--red) !important; background: linear-gradient(135deg, var(--red-light), #fff) !important; }

/* ═══════════ ANIMATIONS ═══════════ */
@keyframes hFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hModalIn { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes hSpin { to { transform: rotate(360deg); } }
@keyframes hFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-20px,20px); } }
@keyframes hSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hScaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

.h-animate-in { animation: hSlideUp 0.5s var(--ease-out); }
.h-animate-scale { animation: hScaleIn 0.4s var(--ease-out); }

/* Staggered entrance for grid items */
.h-candidates-grid > *, .h-quest-grid > * { animation: hSlideUp 0.5s var(--ease-out) backwards; }
.h-candidates-grid > *:nth-child(1), .h-quest-grid > *:nth-child(1) { animation-delay: 0.05s; }
.h-candidates-grid > *:nth-child(2), .h-quest-grid > *:nth-child(2) { animation-delay: 0.1s; }
.h-candidates-grid > *:nth-child(3), .h-quest-grid > *:nth-child(3) { animation-delay: 0.15s; }
.h-candidates-grid > *:nth-child(4), .h-quest-grid > *:nth-child(4) { animation-delay: 0.2s; }
.h-candidates-grid > *:nth-child(5) { animation-delay: 0.25s; }
.h-candidates-grid > *:nth-child(6) { animation-delay: 0.3s; }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 768px) {
  .h-stats { grid-template-columns: 1fr; }
  .h-profile-info { grid-template-columns: 1fr 1fr; gap: 18px; }
  .h-disc-grid { grid-template-columns: 1fr; }
  .h-content, .h-content-narrow { padding: 24px 16px 48px; }
  .h-quest-text { font-size: 22px; }
  .h-quest-card { padding: 32px 24px; }
}

/* ═══════════ RESPONSIVE REPAIR LAYER ═══════════ */
#hermes-root {
  font-size: 16px;
  line-height: 1.5;
}

#hermes-root img {
  max-width: 100%;
}

#hermes-root .h-page {
  min-height: 100svh;
  width: 100%;
  overflow-x: hidden;
}

#hermes-root .h-content,
#hermes-root .h-content-narrow {
  width: min(100%, 1240px);
  margin-inline: auto;
  padding: clamp(20px, 3vw, 36px) clamp(14px, 3vw, 32px) 56px;
}

#hermes-root .h-content-narrow {
  width: min(100%, 900px);
}

#hermes-root .h-dashboard-content {
  padding-right: max(104px, clamp(14px, 3vw, 32px));
}

#hermes-root .h-header {
  min-height: 56px;
  height: auto;
  padding: 10px clamp(14px, 2.5vw, 32px);
  gap: 10px;
  flex-wrap: wrap;
  background: rgba(251,251,253,0.94);
}

#hermes-root .h-logo {
  width: 40px;
  height: 40px;
  padding: 5px;
  border-radius: 8px;
}

#hermes-root .h-brand {
  min-width: 0;
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.25;
  font-weight: 800;
  white-space: normal;
}

#hermes-root .h-header-actions {
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}

#hermes-root .h-header-actions .h-input {
  width: clamp(220px, 24vw, 320px) !important;
  min-width: 0;
}

#hermes-root .h-card,
#hermes-root .h-modal,
#hermes-root .h-login-card,
#hermes-root .h-quest-card,
#hermes-root .h-option,
#hermes-root .h-user-card,
#hermes-root .h-liquid-panel,
#hermes-root .h-input,
#hermes-root .h-select,
#hermes-root .h-textarea {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  box-shadow: 0 10px 34px rgba(0,0,0,var(--glass-shadow-alpha)), inset 0 1px 0 var(--glass-highlight);
}

#hermes-root .h-card,
#hermes-root .h-modal,
#hermes-root .h-login-card,
#hermes-root .h-quest-card,
#hermes-root .h-option,
#hermes-root .h-user-card,
#hermes-root .h-liquid-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

#hermes-root .h-card > *,
#hermes-root .h-modal > *,
#hermes-root .h-login-card > *,
#hermes-root .h-quest-card > *,
#hermes-root .h-option > *,
#hermes-root .h-user-card > *,
#hermes-root .h-liquid-panel > * {
  position: relative;
  z-index: 2;
}

#hermes-root .h-card::after,
#hermes-root .h-modal::after,
#hermes-root .h-login-card::after,
#hermes-root .h-quest-card::after,
#hermes-root .h-option::after,
#hermes-root .h-user-card::after,
#hermes-root .h-liquid-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.28), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.26), transparent 46%, rgba(255,255,255,0.14));
  mix-blend-mode: screen;
  opacity: calc(0.22 + (var(--glass-level) * 0.005));
}

#hermes-root .h-floating-menu {
  position: fixed;
  top: 88px;
  right: 18px;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  padding: 8px;
  width: 62px;
  overflow: visible;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  box-shadow: 0 18px 48px rgba(0,0,0,var(--glass-shadow-alpha)), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  isolation: isolate;
}

#hermes-root .h-float-slot {
  position: relative;
  width: 46px;
  height: 46px;
  overflow: visible;
}

#hermes-root .h-float-action {
  position: absolute;
  top: 0;
  right: 0;
  width: 46px;
  min-width: 46px;
  height: 46px;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
  color: var(--primary);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 24px rgba(0,0,0,var(--glass-shadow-alpha)), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: saturate(var(--glass-saturate)) blur(calc(var(--glass-blur) * 0.8));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(calc(var(--glass-blur) * 0.8));
  font-family: var(--font);
  font-weight: 800;
  white-space: nowrap;
  transform-origin: right center;
  isolation: isolate;
  transition: transform 0.22s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

#hermes-root .h-float-action::before,
#hermes-root .h-float-action::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

#hermes-root .h-float-action::before {
  z-index: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  filter: url(#h-liquid-glass-distortion) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  opacity: calc(var(--glass-level) / 130);
}

#hermes-root .h-float-action::after {
  z-index: 1;
  background: radial-gradient(circle at 28% 18%, rgba(255,255,255,0.34), transparent 38%),
              linear-gradient(140deg, rgba(255,255,255,0.32), transparent 45%, rgba(255,255,255,0.18));
  box-shadow: inset 1px 1px 1px var(--glass-highlight);
}

#hermes-root .h-float-action > * {
  position: relative;
  z-index: 2;
}

#hermes-root .h-float-action:hover,
#hermes-root .h-float-action:focus-visible {
  width: 46px;
  transform: translateX(-2px) scale(1.04);
  background: var(--glass-bg-strong);
  box-shadow: 0 12px 34px rgba(0,0,0,0.16);
  outline: none;
}

#hermes-root .h-float-action.is-active {
  color: var(--blue);
  box-shadow: 0 12px 34px rgba(0,113,227,0.18), inset 0 1px 0 var(--glass-highlight);
}

#hermes-root .h-float-primary {
  background: rgba(0,113,227,0.86);
  color: #fff;
}

#hermes-root .h-float-primary:hover,
#hermes-root .h-float-primary:focus-visible {
  background: var(--blue-bright);
}

#hermes-root .h-float-muted {
  color: var(--secondary);
}

#hermes-root .h-float-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

#hermes-root .h-float-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#hermes-root .h-float-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  color: var(--primary);
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(0,0,0,var(--glass-shadow-alpha)), inset 0 1px 0 var(--glass-highlight);
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  direction: rtl;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}

#hermes-root .h-float-action:hover .h-float-label,
#hermes-root .h-float-action:focus-visible .h-float-label {
  opacity: 1;
  transform: translate(0, -50%);
}

#hermes-root .h-users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

#hermes-root .h-user-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255,255,255,0.86);
  box-shadow: var(--shadow-sm);
}

#hermes-root .h-user-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--divider);
}

#hermes-root .h-user-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}

#hermes-root .h-readonly-pill {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--secondary);
  background: var(--bg-section);
  font-size: 13px;
}

#hermes-root .h-user-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#hermes-root .h-glass-slider-wrap {
  padding: 14px 14px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

#hermes-root .h-glass-slider {
  width: 100%;
  direction: rtl;
  accent-color: var(--blue-bright);
}

#hermes-root .h-glass-scale {
  display: flex;
  justify-content: space-between;
  color: var(--secondary);
  font-size: 11px;
  margin-top: 4px;
}

.h-modal {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  box-shadow: 0 22px 64px rgba(0,0,0,var(--glass-shadow-alpha)), inset 0 1px 0 var(--glass-highlight);
  position: relative;
  overflow-y: auto;
  isolation: isolate;
}

.h-modal > * {
  position: relative;
  z-index: 2;
}

.h-modal::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.28), transparent 32%),
    linear-gradient(135deg, rgba(255,255,255,0.26), transparent 46%, rgba(255,255,255,0.14));
  mix-blend-mode: screen;
  opacity: calc(0.22 + (var(--glass-level) * 0.005));
}

.h-modal-close-fixed {
  position: sticky;
  top: 0;
  z-index: 30;
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -18px 0 14px auto;
  padding: 9px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  cursor: pointer;
  color: var(--primary);
  background: rgba(255,255,255,0.88);
  box-shadow: 0 12px 28px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.75);
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  font-family: var(--font);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

.h-modal-close-fixed span {
  font-size: 18px;
  line-height: 0.8;
}

.h-modal-close-fixed:hover {
  color: #fff;
  background: var(--blue-bright);
}

.h-modal .h-btn-primary {
  background: linear-gradient(135deg, #007AFF, #005FCC) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,113,227,0.28), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

.h-modal .h-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #1688FF, #006FE6) !important;
  box-shadow: 0 14px 34px rgba(0,113,227,0.36), inset 0 1px 0 rgba(255,255,255,0.34) !important;
}

.h-glass-slider-wrap {
  padding: 14px 14px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(var(--glass-saturate)) blur(var(--glass-blur));
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

.h-glass-slider {
  width: 100%;
  direction: rtl;
  accent-color: var(--blue-bright);
}

.h-glass-scale {
  display: flex;
  justify-content: space-between;
  color: var(--secondary);
  font-size: 11px;
  margin-top: 4px;
}

#hermes-root .h-card {
  border: 1px solid var(--border);
  border-radius: 8px;
}

#hermes-root .h-card-p {
  padding: clamp(18px, 2vw, 28px);
}

#hermes-root .h-card-p-lg {
  padding: clamp(24px, 3vw, 40px);
}

#hermes-root .h-btn {
  min-height: 36px;
  line-height: 1.2;
  max-width: 100%;
}

#hermes-root .h-btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}

#hermes-root .h-btn-md {
  padding: 10px 18px;
  font-size: 14px;
}

#hermes-root .h-btn-lg {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 17px;
}

#hermes-root .h-input,
#hermes-root .h-select,
#hermes-root .h-textarea {
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.35;
}

#hermes-root .h-login-page {
  min-height: 100svh;
  padding: clamp(24px, 6vh, 64px) clamp(16px, 4vw, 40px);
  overflow-y: auto;
  background: linear-gradient(145deg, #182744 0%, #22365f 100%);
}

#hermes-root .h-login-page::before,
#hermes-root .h-login-page::after,
#hermes-root .h-profile-hero::before {
  display: none;
}

#hermes-root .h-login-card {
  width: min(100%, 440px);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 8px;
}

#hermes-root .h-login-logo {
  width: clamp(76px, 9vw, 96px);
  height: clamp(76px, 9vw, 96px);
  margin: 0 auto 22px;
  padding: 12px;
  border-radius: 8px;
}

#hermes-root .h-login-title {
  margin: 0 0 6px;
  font-size: clamp(28px, 2.5vw, 36px);
  line-height: 1.15;
}

#hermes-root .h-login-sub {
  margin: 0 0 26px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.35;
}

#hermes-root .h-login-card .h-input {
  width: 100%;
  min-height: 50px;
  margin: 0 0 16px !important;
  padding: 12px 14px !important;
}

#hermes-root .h-login-card .h-btn {
  width: 100%;
}

#hermes-root .h-stats {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 20px);
  margin-bottom: clamp(22px, 3vw, 36px);
}

#hermes-root .h-stat {
  min-height: 88px;
  padding: clamp(18px, 2vw, 24px);
}

#hermes-root .h-stat-icon {
  font-size: clamp(26px, 3vw, 34px);
}

#hermes-root .h-stat-value {
  font-size: clamp(28px, 3vw, 36px);
}

#hermes-root .h-candidates-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2vw, 20px);
}

#hermes-root .h-candidate-card {
  min-width: 0;
}

#hermes-root .h-candidate-name {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.25;
}

#hermes-root .h-candidate-footer {
  gap: 14px;
}

#hermes-root .h-profile-hero {
  padding: clamp(20px, 3vw, 32px);
  border-radius: 8px;
}

#hermes-root .h-profile-info {
  grid-template-columns: auto repeat(4, minmax(120px, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}

#hermes-root .h-info-item {
  min-width: 0;
}

#hermes-root .h-info-item label {
  font-size: 12px;
  line-height: 1.25;
}

#hermes-root .h-info-item span {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.35;
}

#hermes-root .h-section-title {
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
}

#hermes-root .h-quest-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(14px, 2vw, 20px);
}

#hermes-root .h-quest-card-mini {
  min-height: 178px;
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
}

#hermes-root .h-quest-title {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.25;
}

#hermes-root .h-quest-actions {
  margin-top: auto;
  align-items: center;
}

#hermes-root .h-quest-body {
  min-height: calc(100svh - 90px);
  padding: clamp(24px, 5vw, 56px) clamp(14px, 3vw, 24px);
}

#hermes-root .h-quest-container {
  max-width: 760px;
}

#hermes-root .h-quest-card {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 8px;
}

#hermes-root .h-quest-text {
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.42;
}

#hermes-root .h-option {
  padding: clamp(14px, 2vw, 18px) clamp(14px, 2.2vw, 22px);
  border-radius: 8px;
}

#hermes-root .h-modal {
  width: min(480px, calc(100vw - 28px));
  padding: clamp(24px, 4vw, 40px);
  border-radius: 8px;
}

@media (min-width: 1600px) {
  #hermes-root .h-content {
    width: min(100%, 1360px);
  }
}

@media (max-width: 980px) {
  #hermes-root .h-header {
    align-items: center;
  }

  #hermes-root .h-header-actions {
    width: 100%;
    margin-right: 0;
  }

  #hermes-root .h-header-actions .h-input {
    width: 100% !important;
  }

  #hermes-root .h-profile-info {
    grid-template-columns: auto repeat(2, minmax(140px, 1fr));
  }
}

@media (max-width: 760px) {
  #hermes-root .h-dashboard-content {
    padding-right: 14px;
    padding-bottom: 92px;
  }

  #hermes-root .h-floating-menu {
    top: auto;
    right: 10px;
    left: 10px;
    bottom: 12px;
    width: auto;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    justify-content: flex-start;
    border-radius: 18px;
  }

  #hermes-root .h-float-slot {
    position: static;
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  #hermes-root .h-float-action,
  #hermes-root .h-float-action:hover,
  #hermes-root .h-float-action:focus-visible {
    position: relative;
    top: auto;
    right: auto;
    width: 44px;
    min-width: 44px;
    height: 44px;
    transform: none;
    grid-template-columns: 20px;
  }

  #hermes-root .h-float-icon {
    grid-column: 1;
  }

  #hermes-root .h-float-label {
    display: none;
  }
}

@media (max-width: 640px) {
  #hermes-root .h-header {
    padding: 10px 14px;
  }

  #hermes-root .h-logo {
    width: 34px;
    height: 34px;
  }

  #hermes-root .h-brand {
    font-size: 16px;
  }

  #hermes-root .h-header-actions {
    gap: 6px;
  }

  #hermes-root .h-header-actions .h-btn {
    flex: 1 1 auto;
  }

  #hermes-root .h-content,
  #hermes-root .h-content-narrow {
    padding: 18px 14px 48px;
  }

  #hermes-root .h-login-card {
    padding: 30px 22px;
  }

  #hermes-root .h-login-title {
    font-size: 27px;
  }

  #hermes-root .h-stats,
  #hermes-root .h-candidates-grid,
  #hermes-root .h-quest-grid {
    grid-template-columns: 1fr;
  }

  #hermes-root .h-stat {
    min-height: 78px;
  }

  #hermes-root .h-candidate-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  #hermes-root .h-progress-wrap,
  #hermes-root .h-progress-bar {
    width: 100%;
  }

  #hermes-root .h-profile-info {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #hermes-root .h-profile-avatar {
    width: 58px;
    height: 58px;
  }

  #hermes-root .h-quest-card-mini {
    min-height: 0;
  }

  #hermes-root .h-quest-nav {
    gap: 12px;
    flex-wrap: wrap;
  }

  #hermes-root .h-dots {
    order: -1;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

  #hermes-root .h-quest-nav .h-btn {
    flex: 1 1 130px;
  }

  #hermes-root .h-disc-grid,
  #hermes-root [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 420px) {
  #hermes-root .h-login-page {
    padding-inline: 12px;
  }

  #hermes-root .h-login-card {
    padding: 26px 18px;
  }

  #hermes-root .h-login-title {
    font-size: 24px;
  }

  #hermes-root .h-btn {
    white-space: normal;
  }
}

/* ═══════════ LIQUID GLASS REFINEMENT LAYER ═══════════ */
#hermes-root {
  --glass-bg: rgba(255,255,255,0.64);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-bg-soft: rgba(255,255,255,0.48);
  --glass-border: rgba(255,255,255,0.76);
  --glass-stroke: rgba(29,29,31,0.08);
  --glass-shadow: 0 18px 48px rgba(20,31,48,0.10), 0 4px 14px rgba(20,31,48,0.06);
  --glass-shadow-hover: 0 26px 70px rgba(20,31,48,0.15), 0 8px 22px rgba(20,31,48,0.08);
  --glass-inner: inset 0 1px 0 rgba(255,255,255,0.82), inset 0 -1px 0 rgba(29,29,31,0.04);
  --liquid-blue: #007AFF;
  --liquid-cyan: #27C3F3;
  --liquid-mint: #22C55E;
  --liquid-ink: #182033;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98) 0%, rgba(239,246,253,0.96) 44%, rgba(250,252,255,0.98) 100%);
}

#hermes-root .h-page {
  background:
    linear-gradient(145deg, rgba(248,251,255,0.98) 0%, rgba(237,244,251,0.94) 48%, rgba(255,255,255,0.98) 100%);
}

#hermes-root .h-header {
  background: rgba(248,250,252,0.68);
  border-bottom: 1px solid rgba(255,255,255,0.62);
  box-shadow: 0 1px 0 rgba(29,29,31,0.04), 0 10px 30px rgba(20,31,48,0.08);
  backdrop-filter: saturate(190%) blur(34px);
  -webkit-backdrop-filter: saturate(190%) blur(34px);
}

#hermes-root .h-card,
#hermes-root .h-login-card,
#hermes-root .h-modal,
#hermes-root .h-profile-hero,
#hermes-root .h-quest-card,
#hermes-root .h-quest-card-mini,
#hermes-root .h-option,
#hermes-root .h-rec-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
}

#hermes-root .h-card::after,
#hermes-root .h-login-card::after,
#hermes-root .h-modal::after,
#hermes-root .h-profile-hero::after,
#hermes-root .h-quest-card::after,
#hermes-root .h-quest-card-mini::after,
#hermes-root .h-option::after,
#hermes-root .h-rec-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.16) 42%, rgba(255,255,255,0.00) 74%),
    linear-gradient(315deg, rgba(0,122,255,0.08), rgba(39,195,243,0.04) 35%, rgba(255,255,255,0.00) 72%);
  opacity: 0.92;
}

#hermes-root .h-card > *,
#hermes-root .h-login-card > *,
#hermes-root .h-modal > *,
#hermes-root .h-profile-hero > *,
#hermes-root .h-quest-card > *,
#hermes-root .h-quest-card-mini > *,
#hermes-root .h-option > *,
#hermes-root .h-rec-card > * {
  position: relative;
  z-index: 1;
}

#hermes-root .h-card-hover:hover,
#hermes-root .h-candidate-card:hover,
#hermes-root .h-quest-card-mini:hover,
#hermes-root .h-option:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover), var(--glass-inner);
}

#hermes-root .h-logo {
  background: rgba(255,255,255,0.74);
  border: 1px solid rgba(255,255,255,0.82);
  box-shadow: 0 8px 24px rgba(20,31,48,0.12), inset 0 1px 0 rgba(255,255,255,0.82);
  backdrop-filter: saturate(170%) blur(18px);
  -webkit-backdrop-filter: saturate(170%) blur(18px);
}

#hermes-root .h-avatar,
#hermes-root .h-profile-avatar {
  background: linear-gradient(145deg, rgba(27,42,74,0.98), rgba(40,63,103,0.92));
  box-shadow: 0 16px 38px rgba(27,42,74,0.22), inset 0 1px 0 rgba(255,255,255,0.16);
}

#hermes-root .h-btn {
  border: 1px solid rgba(255,255,255,0.46);
  box-shadow: 0 10px 24px rgba(20,31,48,0.10), inset 0 1px 0 rgba(255,255,255,0.32);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

#hermes-root .h-btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

#hermes-root .h-btn-primary {
  background: linear-gradient(135deg, var(--liquid-blue), #0066CC);
}

#hermes-root .h-btn-teal {
  background: linear-gradient(135deg, #0D9488, var(--liquid-cyan));
}

#hermes-root .h-btn-gold {
  background: linear-gradient(135deg, #C5A55A, #D8BD72);
}

#hermes-root .h-btn-navy {
  background: linear-gradient(135deg, var(--navy), #31476F);
}

#hermes-root .h-btn-outline,
#hermes-root .h-btn-ghost,
#hermes-root .h-btn-danger {
  background: rgba(255,255,255,0.42);
}

#hermes-root .h-btn-outline:hover:not(:disabled) {
  background: rgba(0,122,255,0.92);
}

#hermes-root #h-add-performance-btn,
#hermes-root #h-perf-save,
#hermes-root .h-btn-primary {
  background: linear-gradient(135deg, #007AFF, #005FCC) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(0,113,227,0.28), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}

#hermes-root #h-add-performance-btn:hover:not(:disabled),
#hermes-root #h-perf-save:hover:not(:disabled),
#hermes-root .h-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #1688FF, #006FE6) !important;
  box-shadow: 0 14px 34px rgba(0,113,227,0.36), inset 0 1px 0 rgba(255,255,255,0.34) !important;
}

#hermes-root #h-save-status-btn {
  background: rgba(255,255,255,0.92) !important;
  color: #006FE6 !important;
  box-shadow: inset 0 0 0 1.6px #007AFF, 0 8px 20px rgba(0,113,227,0.16) !important;
}

#hermes-root #h-save-status-btn:hover:not(:disabled) {
  background: #007AFF !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(0,113,227,0.34) !important;
}

#hermes-root .h-status-actions {
  position: relative;
  z-index: 3;
}

#hermes-root .h-status-actions #h-add-performance-btn {
  background-color: #0071E3 !important;
  background-image: linear-gradient(180deg, #0A84FF 0%, #0071E3 52%, #0066CC 100%) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.66) !important;
  box-shadow: 0 12px 30px rgba(0,113,227,0.36), inset 0 1px 0 rgba(255,255,255,0.32), inset 0 -1px 0 rgba(0,0,0,0.10) !important;
  opacity: 1 !important;
  filter: saturate(1.1) contrast(1.04);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.14);
}

#hermes-root .h-status-actions #h-add-performance-btn:hover:not(:disabled) {
  background-color: #006FE6 !important;
  background-image: linear-gradient(180deg, #1A8CFF 0%, #007AFF 50%, #0060C8 100%) !important;
  box-shadow: 0 16px 38px rgba(0,113,227,0.44), inset 0 1px 0 rgba(255,255,255,0.36), inset 0 -1px 0 rgba(0,0,0,0.12) !important;
}

#hermes-root .h-status-actions #h-save-status-btn {
  background: rgba(255,255,255,0.98) !important;
  color: #006FE6 !important;
  border-color: rgba(0,122,255,0.46) !important;
  box-shadow: inset 0 0 0 1.8px #007AFF, 0 10px 24px rgba(0,113,227,0.18) !important;
  opacity: 1 !important;
}

#hermes-root .h-btn-ghost:hover:not(:disabled) {
  background: rgba(255,255,255,0.70);
  box-shadow: 0 12px 28px rgba(20,31,48,0.12), inset 0 1px 0 rgba(255,255,255,0.56);
}

#hermes-root .h-btn-danger:hover:not(:disabled) {
  background: linear-gradient(135deg, #FF3B30, #D70015);
}

#hermes-root .h-input,
#hermes-root .h-select,
#hermes-root .h-textarea {
  background: rgba(255,255,255,0.62);
  border-color: rgba(29,29,31,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 6px 18px rgba(20,31,48,0.05);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
}

#hermes-root .h-input:focus,
#hermes-root .h-select:focus,
#hermes-root .h-textarea:focus {
  background: rgba(255,255,255,0.84);
  border-color: rgba(0,122,255,0.52);
  box-shadow: 0 0 0 4px rgba(0,122,255,0.13), 0 12px 30px rgba(20,31,48,0.08);
}

#hermes-root .h-progress-bar,
#hermes-root .h-score-fill {
  background: rgba(20,31,48,0.08);
  box-shadow: inset 0 1px 2px rgba(20,31,48,0.06);
}

#hermes-root .h-progress-fill,
#hermes-root .h-score-fill > * {
  background: linear-gradient(90deg, var(--liquid-blue), var(--liquid-cyan), var(--liquid-mint));
}

#hermes-root .h-badge,
#hermes-root .h-status,
#hermes-root .h-dot,
#hermes-root .h-qdot {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.46), 0 4px 12px rgba(20,31,48,0.08);
}

#hermes-root .h-login-page {
  background:
    linear-gradient(145deg, #17233D 0%, #1F3357 42%, #EEF6FF 100%);
}

#hermes-root .h-login-card {
  background: rgba(255,255,255,0.72);
  border-color: rgba(255,255,255,0.84);
  box-shadow: 0 28px 80px rgba(8,18,34,0.22), var(--glass-inner);
}

#hermes-root .h-login-logo-wrap {
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.86);
  box-shadow: 0 22px 54px rgba(8,18,34,0.16), inset 0 1px 0 rgba(255,255,255,0.82);
}

#hermes-root .h-section-title,
#hermes-root .h-login-title,
#hermes-root .h-analysis-title {
  color: var(--liquid-ink);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #hermes-root .h-card,
  #hermes-root .h-login-card,
  #hermes-root .h-modal,
  #hermes-root .h-profile-hero,
  #hermes-root .h-quest-card,
  #hermes-root .h-quest-card-mini,
  #hermes-root .h-option,
  #hermes-root .h-rec-card {
    background: rgba(255,255,255,0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  #hermes-root .h-card-hover:hover,
  #hermes-root .h-candidate-card:hover,
  #hermes-root .h-quest-card-mini:hover,
  #hermes-root .h-option:hover,
  #hermes-root .h-btn:hover:not(:disabled) {
    transform: none;
  }
}

@media (max-width: 640px) {
  #hermes-root .h-card,
  #hermes-root .h-login-card,
  #hermes-root .h-modal,
  #hermes-root .h-profile-hero,
  #hermes-root .h-quest-card,
  #hermes-root .h-quest-card-mini {
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
  }
}

/* Critical contrast layer for status controls and badges */
#hermes-root .h-status-actions {
  position: relative !important;
  z-index: 12 !important;
}

#hermes-root .h-status-actions .h-select {
  background: rgba(255,255,255,0.98) !important;
  color: #1D1D1F !important;
  border: 1px solid rgba(29,29,31,0.12) !important;
  box-shadow: 0 8px 22px rgba(20,31,48,0.10), inset 0 1px 0 rgba(255,255,255,0.82) !important;
}

#hermes-root .h-status-actions #h-add-performance-btn.h-action-strong,
#hermes-root button#h-add-performance-btn.h-action-strong {
  background: #0071E3 !important;
  background-image: linear-gradient(180deg, #0A84FF 0%, #0071E3 54%, #005FCC 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(0,95,204,0.38) !important;
  box-shadow: 0 14px 34px rgba(0,113,227,0.40), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(0,0,0,0.12) !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.16);
}

#hermes-root .h-status-actions #h-add-performance-btn.h-action-strong:hover:not(:disabled),
#hermes-root button#h-add-performance-btn.h-action-strong:hover:not(:disabled) {
  background: #006FE6 !important;
  background-image: linear-gradient(180deg, #1A8CFF 0%, #007AFF 50%, #0057B8 100%) !important;
  box-shadow: 0 18px 42px rgba(0,113,227,0.48), inset 0 1px 0 rgba(255,255,255,0.38), inset 0 -1px 0 rgba(0,0,0,0.14) !important;
}

#hermes-root .h-status-actions #h-save-status-btn.h-action-outline,
#hermes-root button#h-save-status-btn.h-action-outline {
  background: #FFFFFF !important;
  color: #005FCC !important;
  border: 1.8px solid #007AFF !important;
  box-shadow: 0 10px 24px rgba(0,113,227,0.18), inset 0 1px 0 rgba(255,255,255,0.88) !important;
  opacity: 1 !important;
  filter: none !important;
}

#hermes-root .h-status-actions #h-save-status-btn.h-action-outline:hover:not(:disabled),
#hermes-root button#h-save-status-btn.h-action-outline:hover:not(:disabled) {
  background: #007AFF !important;
  color: #FFFFFF !important;
  box-shadow: 0 14px 34px rgba(0,113,227,0.34) !important;
}

#hermes-root .h-profile-hero .h-info-item label {
  color: #4B5563 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

#hermes-root .h-profile-hero .h-info-item span {
  color: #1D1D1F !important;
  opacity: 1 !important;
}

#hermes-root .h-pipeline-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 6px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#hermes-root .h-pipeline-neutral {
  background: #E8F2FF !important;
  color: #0057B8 !important;
  border-color: rgba(0,122,255,0.28) !important;
  box-shadow: 0 8px 20px rgba(0,113,227,0.14), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

#hermes-root .h-pipeline-success {
  background: #E3F9ED !important;
  color: #087A3D !important;
  border-color: rgba(0,168,82,0.22) !important;
  box-shadow: 0 8px 20px rgba(0,168,82,0.12), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

#hermes-root .h-pipeline-warning {
  background: #FFF2E8 !important;
  color: #B24A00 !important;
  border-color: rgba(245,99,0,0.22) !important;
  box-shadow: 0 8px 20px rgba(245,99,0,0.12), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

#hermes-root .h-pipeline-danger {
  background: #FFEDED !important;
  color: #C90000 !important;
  border-color: rgba(227,0,0,0.22) !important;
  box-shadow: 0 8px 20px rgba(227,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.72) !important;
}

/* Critical wash fix: prevent the liquid sheen from bleaching one side of content panels */
#hermes-root {
  --secondary: #4F5663;
  --tertiary: #687180;
}

#hermes-root,
#hermes-root .h-page {
  background: linear-gradient(180deg, #F6FAFF 0%, #EEF5FC 100%) !important;
}

#hermes-root .h-card,
#hermes-root .h-login-card,
#hermes-root .h-modal,
#hermes-root .h-profile-hero,
#hermes-root .h-quest-card,
#hermes-root .h-quest-card-mini,
#hermes-root .h-liquid-panel {
  background: rgba(255,255,255,0.90) !important;
}

#hermes-root .h-card::after,
#hermes-root .h-login-card::after,
#hermes-root .h-modal::after,
#hermes-root .h-profile-hero::after,
#hermes-root .h-quest-card::after,
#hermes-root .h-quest-card-mini::after,
#hermes-root .h-option::after,
#hermes-root .h-rec-card::after,
#hermes-root .h-liquid-panel::after {
  background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.02)) !important;
  mix-blend-mode: normal !important;
  opacity: 0.16 !important;
}

#hermes-root .h-card > *,
#hermes-root .h-login-card > *,
#hermes-root .h-modal > *,
#hermes-root .h-profile-hero > *,
#hermes-root .h-quest-card > *,
#hermes-root .h-quest-card-mini > *,
#hermes-root .h-option > *,
#hermes-root .h-rec-card > *,
#hermes-root .h-liquid-panel > * {
  position: relative;
  z-index: 3 !important;
}

/* Fixed app header: keep navigation and back actions visible while scrolling */
#hermes-root .h-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1600 !important;
  min-height: 56px !important;
  background: rgba(248,250,252,0.88) !important;
  border-bottom: 1px solid rgba(29,29,31,0.08) !important;
  box-shadow: 0 8px 28px rgba(20,31,48,0.10), inset 0 1px 0 rgba(255,255,255,0.78) !important;
}

#hermes-root .h-header ~ .h-content,
#hermes-root .h-header ~ .h-content-narrow {
  margin-top: 56px !important;
}

#hermes-root .h-header + .h-quest-progress-bar {
  margin-top: 56px !important;
}

#hermes-root .h-back-btn {
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 2 !important;
  background: rgba(255,255,255,0.92) !important;
  color: #1D1D1F !important;
  box-shadow: 0 8px 20px rgba(20,31,48,0.10), inset 0 1px 0 rgba(255,255,255,0.86) !important;
}

#hermes-root .h-back-btn:hover {
  background: #FFFFFF !important;
  color: #0071E3 !important;
}

#hermes-root .h-quest-progress-bar {
  top: 56px !important;
  z-index: 1500 !important;
}

/* Apple assessment polish: apply the tracker visual language to HERMES Assessment only */
#hermes-root {
  --apple-bg: #F5F5F7;
  --apple-surface: rgba(255,255,255,0.78);
  --apple-surface-strong: rgba(255,255,255,0.92);
  --apple-surface-soft: rgba(255,255,255,0.60);
  --apple-border: rgba(29,29,31,0.10);
  --apple-border-soft: rgba(29,29,31,0.06);
  --apple-text: #1D1D1F;
  --apple-secondary: #5F646D;
  --apple-muted: #86868B;
  --apple-blue: #0071E3;
  --apple-blue-hover: #0077ED;
  --apple-green: #118944;
  --apple-red: #D70015;
  --apple-orange: #B24A00;
  --apple-shadow: 0 18px 55px rgba(20,31,48,0.10), 0 2px 8px rgba(20,31,48,0.04);
  --apple-shadow-soft: 0 10px 32px rgba(20,31,48,0.07), 0 1px 3px rgba(20,31,48,0.04);
  --apple-inner: inset 0 1px 0 rgba(255,255,255,0.72);
  --primary: var(--apple-text);
  --secondary: var(--apple-secondary);
  --tertiary: var(--apple-muted);
  --blue: var(--apple-blue);
  --blue-bright: var(--apple-blue);
  --green: var(--apple-green);
  --red: var(--apple-red);
  --orange: #F56300;
  --border: var(--apple-border-soft);
  --border-strong: var(--apple-border);
  --divider: var(--apple-border-soft);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 8px;
  --r-xl: 8px;
  color: var(--apple-text);
  letter-spacing: 0;
}

#hermes-root,
#hermes-root .h-page {
  background: linear-gradient(180deg, #F7FAFE 0%, var(--apple-bg) 52%, #EEF3F8 100%) !important;
}

#hermes-root .h-login-page {
  background: linear-gradient(145deg, #17233D 0%, #25395F 48%, #EEF6FF 100%) !important;
}

#hermes-root .h-login-page::before,
#hermes-root .h-login-page::after,
#hermes-root .h-card::after,
#hermes-root .h-login-card::after,
#hermes-root .h-modal::after,
#hermes-root .h-profile-hero::after,
#hermes-root .h-quest-card::after,
#hermes-root .h-quest-card-mini::after,
#hermes-root .h-option::after,
#hermes-root .h-rec-card::after,
#hermes-root .h-liquid-panel::after,
#hermes-root .h-user-card::after {
  display: none !important;
}

#hermes-root .h-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  z-index: 1800 !important;
  width: 100% !important;
  min-height: 64px !important;
  height: 64px !important;
  padding: 10px clamp(16px, 2.4vw, 32px) !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  background: rgba(248,250,252,0.78) !important;
  border-bottom: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow: 0 12px 32px rgba(20,31,48,0.10), var(--apple-inner) !important;
  backdrop-filter: saturate(180%) blur(26px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(26px) !important;
}

#hermes-root .h-header ~ .h-content,
#hermes-root .h-header ~ .h-content-narrow {
  margin-top: 64px !important;
}

#hermes-root .h-header + .h-quest-progress-bar {
  margin-top: 64px !important;
}

#hermes-root .h-quest-progress-bar {
  top: 64px !important;
  z-index: 1700 !important;
}

#hermes-root .h-logo,
#hermes-root .h-login-logo {
  border-radius: 8px !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.74) !important;
  box-shadow: var(--apple-shadow-soft), var(--apple-inner) !important;
}

#hermes-root .h-logo {
  width: 42px !important;
  height: 42px !important;
  padding: 5px !important;
}

#hermes-root .h-brand {
  color: var(--apple-text) !important;
  font-size: clamp(17px, 1.45vw, 20px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

#hermes-root .h-header-actions {
  margin-right: auto !important;
  flex: 0 1 auto !important;
  flex-wrap: nowrap !important;
}

#hermes-root .h-header-actions .h-input {
  width: clamp(240px, 25vw, 360px) !important;
  min-height: 42px !important;
  border-radius: 999px !important;
}

#hermes-root .h-content,
#hermes-root .h-content-narrow {
  padding-top: clamp(22px, 3vw, 34px) !important;
}

#hermes-root .h-dashboard-content {
  padding-right: max(96px, clamp(16px, 3vw, 32px)) !important;
}

#hermes-root .h-card,
#hermes-root .h-login-card,
#hermes-root .h-modal,
#hermes-root .h-profile-hero,
#hermes-root .h-quest-card,
#hermes-root .h-quest-card-mini,
#hermes-root .h-option,
#hermes-root .h-rec-card,
#hermes-root .h-liquid-panel,
#hermes-root .h-user-card {
  background: var(--apple-surface) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 8px !important;
  box-shadow: var(--apple-shadow-soft), var(--apple-inner) !important;
  color: var(--apple-text) !important;
  isolation: isolate;
  backdrop-filter: saturate(170%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(170%) blur(22px) !important;
}

#hermes-root .h-card:hover,
#hermes-root .h-candidate-card:hover,
#hermes-root .h-quest-card-mini:hover,
#hermes-root .h-option:hover,
#hermes-root .h-rec-card:hover {
  background: var(--apple-surface-strong) !important;
  box-shadow: var(--apple-shadow), var(--apple-inner) !important;
  transform: translateY(-1px);
}

#hermes-root .h-card-p {
  padding: clamp(18px, 2.2vw, 28px) !important;
}

#hermes-root .h-login-card {
  width: min(440px, calc(100vw - 28px)) !important;
  padding: clamp(34px, 5vw, 52px) clamp(24px, 4vw, 42px) !important;
  text-align: center !important;
}

#hermes-root .h-login-logo {
  margin-inline: auto !important;
}

#hermes-root .h-login-title,
#hermes-root .h-section-title,
#hermes-root .h-modal-title,
#hermes-root .h-candidate-name,
#hermes-root .h-quest-title,
#hermes-root h1,
#hermes-root h2,
#hermes-root h3 {
  color: var(--apple-text) !important;
  letter-spacing: 0 !important;
}

#hermes-root .h-login-sub,
#hermes-root .h-candidate-sub,
#hermes-root .h-stat-label,
#hermes-root .h-quest-meta,
#hermes-root .h-info-item label,
#hermes-root .h-empty-text,
#hermes-root p {
  color: var(--apple-secondary) !important;
}

#hermes-root .h-stats {
  gap: 10px !important;
  margin-bottom: clamp(24px, 3vw, 34px) !important;
}

#hermes-root .h-stat {
  min-height: 72px !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}

#hermes-root .h-stat-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: rgba(0,113,227,0.10) !important;
  border: 1px solid rgba(0,113,227,0.12) !important;
  color: var(--apple-blue) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

#hermes-root .h-stat-value {
  color: var(--apple-text) !important;
  font-size: clamp(25px, 2.2vw, 32px) !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

#hermes-root .h-candidates-grid,
#hermes-root .h-quest-grid {
  gap: 14px !important;
}

#hermes-root .h-candidate-card,
#hermes-root .h-quest-card-mini {
  min-height: 190px !important;
}

#hermes-root .h-profile-hero {
  padding: clamp(20px, 3vw, 30px) !important;
}

#hermes-root .h-profile-info {
  align-items: center !important;
}

#hermes-root .h-avatar,
#hermes-root .h-profile-avatar {
  border-radius: 8px !important;
  background: linear-gradient(145deg, #1B2A4A, #2A3F66) !important;
  color: var(--gold) !important;
  box-shadow: var(--apple-shadow-soft) !important;
}

#hermes-root .h-input,
#hermes-root .h-select,
#hermes-root .h-textarea {
  background: rgba(255,255,255,0.84) !important;
  border: 1px solid var(--apple-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--apple-inner), 0 8px 22px rgba(20,31,48,0.05) !important;
  color: var(--apple-text) !important;
  letter-spacing: 0 !important;
}

#hermes-root .h-input:focus,
#hermes-root .h-select:focus,
#hermes-root .h-textarea:focus {
  border-color: rgba(0,113,227,0.45) !important;
  box-shadow: 0 0 0 4px rgba(0,113,227,0.12), 0 8px 22px rgba(20,31,48,0.08) !important;
}

#hermes-root .h-btn {
  border-radius: 999px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  box-shadow: var(--apple-inner), 0 6px 16px rgba(20,31,48,0.05);
}

#hermes-root .h-btn-primary,
#hermes-root .h-btn-teal,
#hermes-root .h-btn-navy,
#hermes-root .h-status-actions #h-add-performance-btn.h-action-strong,
#hermes-root button#h-add-performance-btn.h-action-strong {
  background: var(--apple-blue) !important;
  background-image: none !important;
  border: 1px solid rgba(0,95,204,0.18) !important;
  box-shadow: 0 12px 28px rgba(0,113,227,0.28), var(--apple-inner) !important;
  color: #fff !important;
  filter: none !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

#hermes-root .h-btn-primary:hover:not(:disabled),
#hermes-root .h-btn-teal:hover:not(:disabled),
#hermes-root .h-btn-navy:hover:not(:disabled),
#hermes-root .h-status-actions #h-add-performance-btn.h-action-strong:hover:not(:disabled),
#hermes-root button#h-add-performance-btn.h-action-strong:hover:not(:disabled) {
  background: var(--apple-blue-hover) !important;
  box-shadow: 0 16px 34px rgba(0,113,227,0.34), var(--apple-inner) !important;
}

#hermes-root .h-btn-outline,
#hermes-root .h-status-actions #h-save-status-btn.h-action-outline,
#hermes-root button#h-save-status-btn.h-action-outline {
  background: rgba(255,255,255,0.82) !important;
  border: 1.5px solid rgba(0,113,227,0.58) !important;
  box-shadow: var(--apple-inner), 0 8px 20px rgba(0,113,227,0.11) !important;
  color: var(--apple-blue) !important;
  opacity: 1 !important;
  filter: none !important;
}

#hermes-root .h-btn-outline:hover:not(:disabled),
#hermes-root .h-status-actions #h-save-status-btn.h-action-outline:hover:not(:disabled),
#hermes-root button#h-save-status-btn.h-action-outline:hover:not(:disabled) {
  background: var(--apple-blue) !important;
  color: #fff !important;
}

#hermes-root .h-btn-danger {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(215,0,21,0.18) !important;
  box-shadow: var(--apple-inner), 0 8px 20px rgba(215,0,21,0.08) !important;
  color: var(--apple-red) !important;
}

#hermes-root .h-btn-danger:hover:not(:disabled) {
  background: var(--apple-red) !important;
  color: #fff !important;
}

#hermes-root .h-back-btn {
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.88) !important;
  color: var(--apple-text) !important;
  box-shadow: var(--apple-shadow-soft), var(--apple-inner) !important;
}

#hermes-root .h-floating-menu {
  position: fixed !important;
  top: 50% !important;
  right: 18px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 1550 !important;
  width: 58px !important;
  padding: 7px !important;
  gap: 8px !important;
  align-items: center !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.74) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: var(--apple-shadow), var(--apple-inner) !important;
  transform: translateY(-50%) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
}

#hermes-root .h-float-slot {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
}

#hermes-root .h-float-action,
#hermes-root .h-float-action:hover,
#hermes-root .h-float-action:focus-visible {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  border-radius: 8px !important;
}

#hermes-root .h-float-action {
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid var(--apple-border-soft) !important;
  box-shadow: var(--apple-inner), 0 8px 20px rgba(20,31,48,0.06) !important;
  color: var(--apple-text) !important;
}

#hermes-root .h-float-action:hover,
#hermes-root .h-float-action:focus-visible {
  background: #fff !important;
  box-shadow: 0 12px 26px rgba(20,31,48,0.12), var(--apple-inner) !important;
  transform: translateX(-2px) !important;
}

#hermes-root .h-float-action.is-active {
  color: var(--apple-blue) !important;
  box-shadow: 0 12px 26px rgba(0,113,227,0.18), var(--apple-inner) !important;
}

#hermes-root .h-float-primary {
  background: var(--apple-blue) !important;
  border-color: rgba(0,95,204,0.18) !important;
  box-shadow: 0 12px 28px rgba(0,113,227,0.28), var(--apple-inner) !important;
  color: #fff !important;
}

#hermes-root .h-float-primary:hover,
#hermes-root .h-float-primary:focus-visible {
  background: var(--apple-blue-hover) !important;
  color: #fff !important;
}

#hermes-root .h-float-icon,
#hermes-root .h-float-icon svg {
  width: 21px !important;
  height: 21px !important;
}

#hermes-root .h-float-label {
  right: calc(100% + 10px) !important;
  left: auto !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  box-shadow: var(--apple-shadow-soft), var(--apple-inner) !important;
  color: var(--apple-text) !important;
  transform: translate(8px, -50%) !important;
}

#hermes-root .h-float-action:hover .h-float-label,
#hermes-root .h-float-action:focus-visible .h-float-label {
  transform: translate(0, -50%) !important;
}

#hermes-root .h-modal-overlay {
  background: rgba(245,245,247,0.48) !important;
  backdrop-filter: saturate(160%) blur(18px) !important;
  -webkit-backdrop-filter: saturate(160%) blur(18px) !important;
}

#hermes-root .h-modal {
  max-height: min(88vh, 900px) !important;
  overflow: auto !important;
}

#hermes-root .h-modal-close-fixed {
  background: var(--apple-blue) !important;
  color: #fff !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(0,113,227,0.28), var(--apple-inner) !important;
}

#hermes-root .h-pipeline-badge,
#hermes-root .h-badge,
#hermes-root .h-status {
  letter-spacing: 0 !important;
}

#hermes-root .h-pipeline-neutral {
  background: #E8F2FF !important;
  color: #0057B8 !important;
}

#hermes-root .h-pipeline-success {
  background: #E3F9ED !important;
  color: var(--apple-green) !important;
}

#hermes-root .h-pipeline-warning {
  background: #FFF2E8 !important;
  color: var(--apple-orange) !important;
}

#hermes-root .h-pipeline-danger {
  background: #FFEDED !important;
  color: var(--apple-red) !important;
}

#hermes-root .h-quest-card {
  max-width: 760px !important;
}

#hermes-root .h-quest-text {
  font-size: clamp(21px, 2vw, 28px) !important;
  line-height: 1.45 !important;
}

#hermes-root .h-option.selected {
  background: rgba(0,113,227,0.10) !important;
  border-color: rgba(0,113,227,0.46) !important;
  box-shadow: 0 12px 28px rgba(0,113,227,0.13), var(--apple-inner) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #hermes-root .h-header,
  #hermes-root .h-card,
  #hermes-root .h-login-card,
  #hermes-root .h-modal,
  #hermes-root .h-profile-hero,
  #hermes-root .h-quest-card,
  #hermes-root .h-quest-card-mini,
  #hermes-root .h-option,
  #hermes-root .h-floating-menu {
    background: rgba(255,255,255,0.96) !important;
  }
}

@media (max-width: 980px) {
  #hermes-root .h-header {
    min-height: 72px !important;
    height: auto !important;
    flex-wrap: wrap !important;
  }

  #hermes-root .h-header-actions {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #hermes-root .h-header-actions .h-input {
    width: 100% !important;
  }

  #hermes-root .h-header ~ .h-content,
  #hermes-root .h-header ~ .h-content-narrow,
  #hermes-root .h-header + .h-quest-progress-bar {
    margin-top: 112px !important;
  }

  #hermes-root .h-quest-progress-bar {
    top: 112px !important;
  }
}

@media (max-width: 760px) {
  #hermes-root .h-dashboard-content {
    padding-right: 14px !important;
    padding-bottom: 94px !important;
  }

  #hermes-root .h-floating-menu {
    top: auto !important;
    right: 10px !important;
    left: 10px !important;
    bottom: 12px !important;
    width: auto !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    transform: none !important;
    overflow-x: auto !important;
  }

  #hermes-root .h-float-action:hover,
  #hermes-root .h-float-action:focus-visible {
    transform: none !important;
  }

  #hermes-root .h-float-label {
    display: none !important;
  }
}

@media (max-width: 520px) {
  #hermes-root .h-header {
    padding: 9px 12px !important;
  }

  #hermes-root .h-logo {
    width: 36px !important;
    height: 36px !important;
  }

  #hermes-root .h-brand {
    font-size: 16px !important;
  }

  #hermes-root .h-stat,
  #hermes-root .h-candidate-card,
  #hermes-root .h-quest-card-mini {
    min-height: 0 !important;
  }
}

/* Final guard for clear Apple-style surfaces and icon-only rail controls */
#hermes-root * {
  letter-spacing: 0 !important;
}

#hermes-root .h-float-action::before,
#hermes-root .h-float-action::after {
  display: none !important;
}

#hermes-root .h-float-action > * {
  position: relative !important;
  z-index: 2 !important;
}

#hermes-root .rec-highly,
#hermes-root .rec-recommended {
  background: rgba(227,249,237,0.78) !important;
  border-color: rgba(17,137,68,0.24) !important;
}

#hermes-root .rec-conditional {
  background: rgba(255,242,232,0.78) !important;
  border-color: rgba(245,99,0,0.24) !important;
}

#hermes-root .rec-not {
  background: rgba(255,237,237,0.78) !important;
  border-color: rgba(215,0,21,0.22) !important;
}

/* Tracker parity layer: dense Apple workspace, matching the financial tracker system */
#hermes-root {
  --tracker-bg: #F5F5F7;
  --tracker-surface: rgba(255,255,255,0.78);
  --tracker-surface-strong: rgba(255,255,255,0.92);
  --tracker-border: rgba(255,255,255,0.72);
  --tracker-stroke: rgba(29,29,31,0.08);
  --tracker-text: #1D1D1F;
  --tracker-secondary: #5F646D;
  --tracker-muted: #86868B;
  --tracker-blue: #0071E3;
  --tracker-blue-hover: #0077ED;
  --tracker-green: #118944;
  --tracker-red: #D70015;
  --tracker-orange: #F56300;
  --tracker-shadow: 0 18px 55px rgba(20,31,48,0.10), 0 2px 8px rgba(20,31,48,0.04);
  --tracker-shadow-soft: 0 10px 32px rgba(20,31,48,0.07), 0 1px 3px rgba(20,31,48,0.04);
  --tracker-inner: inset 0 1px 0 rgba(255,255,255,0.72);
}

#hermes-root .h-dashboard-page,
#hermes-root .h-tool-page {
  background: linear-gradient(180deg, #F7FAFE 0%, var(--tracker-bg) 52%, #EEF3F8 100%) !important;
  min-height: 100svh !important;
}

#hermes-root .h-rail-page .h-header {
  align-items: center !important;
  background: var(--tracker-surface) !important;
  border: 1px solid var(--tracker-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--tracker-shadow-soft), var(--tracker-inner) !important;
  display: flex !important;
  gap: 14px !important;
  height: 68px !important;
  left: 18px !important;
  min-height: 68px !important;
  padding: 10px 18px !important;
  position: fixed !important;
  right: 92px !important;
  top: 14px !important;
  width: auto !important;
  z-index: 1800 !important;
  backdrop-filter: saturate(180%) blur(26px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(26px) !important;
}

#hermes-root .h-rail-page .h-logo {
  height: 44px !important;
  width: 44px !important;
}

#hermes-root .h-rail-page .h-brand {
  color: var(--tracker-text) !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

#hermes-root .h-rail-page .h-header-actions {
  align-items: center !important;
  display: flex !important;
  flex: 0 1 430px !important;
  justify-content: flex-end !important;
  margin-right: auto !important;
  min-width: min(420px, 34vw) !important;
  width: auto !important;
}

#hermes-root .h-rail-page .h-header-actions .h-input {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(29,29,31,0.06) !important;
  border-radius: 999px !important;
  box-shadow: var(--tracker-inner), 0 8px 22px rgba(20,31,48,0.05) !important;
  color: var(--tracker-text) !important;
  font-size: 14px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  width: min(420px, 100%) !important;
}

#hermes-root .h-rail-page .h-content,
#hermes-root .h-rail-page .h-content-narrow {
  margin: 0 !important;
  max-width: none !important;
  padding: 96px 92px 18px 18px !important;
  width: 100% !important;
}

#hermes-root .h-dashboard-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  min-height: 100svh !important;
}

#hermes-root .h-dashboard-titlebar {
  align-items: center !important;
  background: var(--tracker-surface) !important;
  border: 1px solid var(--tracker-border) !important;
  border-radius: 8px !important;
  box-shadow: var(--tracker-shadow-soft), var(--tracker-inner) !important;
  display: flex !important;
  gap: 18px !important;
  justify-content: space-between !important;
  margin: 0 !important;
  min-height: 68px !important;
  padding: 10px 18px !important;
  backdrop-filter: saturate(180%) blur(26px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(26px) !important;
}

#hermes-root .h-dashboard-titlebar h1 {
  color: var(--tracker-text) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin: 0 0 4px !important;
}

#hermes-root .h-dashboard-titlebar p,
#hermes-root .h-dashboard-source {
  color: var(--tracker-secondary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

#hermes-root .h-dashboard-source {
  background: rgba(245,245,247,0.78) !important;
  border: 1px solid rgba(29,29,31,0.06) !important;
  border-radius: 999px !important;
  box-shadow: var(--tracker-inner) !important;
  color: var(--tracker-blue) !important;
  padding: 9px 13px !important;
  white-space: nowrap !important;
}

#hermes-root .h-dashboard-content .h-stats {
  display: grid !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 !important;
}

#hermes-root .h-dashboard-content .h-stat {
  align-items: center !important;
  background: var(--tracker-surface) !important;
  border: 1px solid rgba(255,255,255,0.68) !important;
  border-radius: 8px !important;
  box-shadow: var(--tracker-shadow-soft), var(--tracker-inner) !important;
  display: flex !important;
  flex-direction: row !important;
  gap: 12px !important;
  justify-content: flex-start !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  backdrop-filter: saturate(170%) blur(22px) !important;
  -webkit-backdrop-filter: saturate(170%) blur(22px) !important;
}

#hermes-root .h-dashboard-content .h-stat::after {
  display: none !important;
}

#hermes-root .h-dashboard-content .h-stat:hover {
  background: var(--tracker-surface-strong) !important;
  box-shadow: var(--tracker-shadow), var(--tracker-inner) !important;
  transform: translateY(-1px) !important;
}

#hermes-root .h-dashboard-content .h-stat-icon {
  align-items: center !important;
  background: rgba(0,113,227,0.10) !important;
  border: 1px solid rgba(0,113,227,0.12) !important;
  border-radius: 8px !important;
  color: var(--tracker-blue) !important;
  display: inline-flex !important;
  height: 36px !important;
  justify-content: center !important;
  line-height: 0 !important;
  min-width: 36px !important;
  width: 36px !important;
}

#hermes-root .h-dashboard-content .h-stat-success .h-stat-icon {
  background: rgba(17,137,68,0.10) !important;
  border-color: rgba(17,137,68,0.14) !important;
  color: var(--tracker-green) !important;
}

#hermes-root .h-dashboard-content .h-stat-warning .h-stat-icon {
  background: rgba(245,99,0,0.10) !important;
  border-color: rgba(245,99,0,0.14) !important;
  color: var(--tracker-orange) !important;
}

#hermes-root .h-dashboard-content .h-stat-icon svg,
#hermes-root .h-empty-icon svg,
#hermes-root .h-quest-card-mini svg {
  display: block !important;
  fill: none !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
  width: 20px !important;
}

#hermes-root .h-dashboard-content .h-stat-value {
  color: var(--tracker-text) !important;
  font-size: clamp(22px, 2vw, 30px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#hermes-root .h-dashboard-content .h-stat-label {
  color: var(--tracker-secondary) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 3px 0 0 !important;
}

#hermes-root .h-dashboard-panel {
  background: rgba(255,255,255,0.72) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 8px !important;
  box-shadow: var(--tracker-shadow), var(--tracker-inner) !important;
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  margin: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
}

#hermes-root .h-dashboard-panel-head {
  align-items: center !important;
  border-bottom: 1px solid rgba(29,29,31,0.06) !important;
  display: flex !important;
  flex: 0 0 auto !important;
  justify-content: space-between !important;
  min-height: 58px !important;
  padding: 10px 16px !important;
}

#hermes-root .h-dashboard-panel-head h2 {
  color: var(--tracker-text) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  margin: 0 0 3px !important;
}

#hermes-root .h-dashboard-panel-head span {
  color: var(--tracker-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#hermes-root .h-dashboard-panel #h-dashboard-cards {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 16px !important;
}

#hermes-root .h-dashboard-panel .h-candidates-grid {
  display: grid !important;
  gap: 14px !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)) !important;
}

#hermes-root .h-dashboard-panel .h-candidate-card {
  background: rgba(255,255,255,0.74) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 8px !important;
  box-shadow: var(--tracker-shadow-soft), var(--tracker-inner) !important;
  min-height: 172px !important;
  padding: 18px !important;
}

#hermes-root .h-dashboard-panel .h-candidate-card::before,
#hermes-root .h-dashboard-panel .h-candidate-card::after {
  display: none !important;
}

#hermes-root .h-dashboard-panel .h-card-header {
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 14px !important;
}

#hermes-root .h-dashboard-panel .h-avatar {
  border-radius: 8px !important;
  font-size: 20px !important;
  height: 50px !important;
  min-width: 50px !important;
  width: 50px !important;
}

#hermes-root .h-dashboard-panel .h-candidate-name {
  color: var(--tracker-text) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  margin-bottom: 5px !important;
}

#hermes-root .h-dashboard-panel .h-candidate-sub,
#hermes-root .h-dashboard-panel .h-candidate-id {
  color: var(--tracker-secondary) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#hermes-root .h-dashboard-panel .h-candidate-footer {
  border-top: 1px solid rgba(29,29,31,0.06) !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
}

#hermes-root .h-dashboard-panel .h-progress-bar {
  background: rgba(29,29,31,0.06) !important;
  height: 6px !important;
}

#hermes-root .h-dashboard-panel .h-progress-fill {
  background: var(--tracker-green) !important;
}

#hermes-root .h-rail-page .h-floating-menu {
  align-items: center !important;
  background: rgba(255,255,255,0.74) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  border-radius: 8px !important;
  bottom: auto !important;
  box-shadow: var(--tracker-shadow), var(--tracker-inner) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  left: auto !important;
  overflow: visible !important;
  padding: 7px !important;
  position: fixed !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 58px !important;
  z-index: 1700 !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
}

#hermes-root .h-rail-page .h-float-slot {
  display: block !important;
  flex: 0 0 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  min-width: 44px !important;
  overflow: visible !important;
  position: relative !important;
  width: 44px !important;
}

#hermes-root .h-rail-page .h-float-action {
  align-items: center !important;
  background: rgba(255,255,255,0.82) !important;
  border: 1px solid rgba(29,29,31,0.06) !important;
  border-radius: 8px !important;
  box-shadow: var(--tracker-inner), 0 8px 20px rgba(20,31,48,0.06) !important;
  color: var(--tracker-text) !important;
  cursor: pointer !important;
  display: grid !important;
  height: 44px !important;
  inset: auto !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin: 0 !important;
  min-height: 44px !important;
  min-width: 44px !important;
  overflow: visible !important;
  padding: 0 !important;
  place-items: center !important;
  position: relative !important;
  text-align: center !important;
  transform: none !important;
  width: 44px !important;
}

#hermes-root .h-rail-page .h-float-action:hover,
#hermes-root .h-rail-page .h-float-action:focus-visible {
  background: #fff !important;
  box-shadow: 0 12px 26px rgba(20,31,48,0.12), var(--tracker-inner) !important;
  transform: translateX(-2px) !important;
}

#hermes-root .h-rail-page .h-float-primary {
  background: var(--tracker-blue) !important;
  border-color: rgba(0,95,204,0.18) !important;
  box-shadow: 0 12px 28px rgba(0,113,227,0.28), var(--tracker-inner) !important;
  color: #fff !important;
}

#hermes-root .h-rail-page .h-float-primary:hover,
#hermes-root .h-rail-page .h-float-primary:focus-visible {
  background: var(--tracker-blue-hover) !important;
  color: #fff !important;
}

#hermes-root .h-rail-page .h-float-icon {
  align-items: center !important;
  color: inherit !important;
  display: grid !important;
  height: 22px !important;
  justify-content: center !important;
  line-height: 0 !important;
  margin: 0 !important;
  min-height: 22px !important;
  min-width: 22px !important;
  place-items: center !important;
  pointer-events: none !important;
  position: static !important;
  transform: none !important;
  width: 22px !important;
}

#hermes-root .h-rail-page .h-float-icon svg {
  color: inherit !important;
  display: block !important;
  fill: none !important;
  height: 21px !important;
  margin: 0 !important;
  max-height: 21px !important;
  max-width: 21px !important;
  min-height: 21px !important;
  min-width: 21px !important;
  position: static !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
  transform: none !important;
  width: 21px !important;
}

#hermes-root .h-rail-page .h-float-label {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid rgba(255,255,255,0.78) !important;
  border-radius: 8px !important;
  box-shadow: var(--tracker-shadow-soft), var(--tracker-inner) !important;
  color: var(--tracker-text) !important;
  direction: rtl !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  left: auto !important;
  line-height: 1 !important;
  opacity: 0 !important;
  padding: 9px 12px !important;
  pointer-events: none !important;
  position: absolute !important;
  right: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translate(8px, -50%) !important;
  white-space: nowrap !important;
}

#hermes-root .h-rail-page .h-float-action:hover .h-float-label,
#hermes-root .h-rail-page .h-float-action:focus-visible .h-float-label {
  opacity: 1 !important;
  transform: translate(0, -50%) !important;
}

#hermes-root .h-quest-card-mini [style*="font-size:18px"] {
  color: var(--tracker-blue) !important;
  line-height: 0 !important;
}

#hermes-root .h-btn svg {
  display: block !important;
  fill: none !important;
  height: 17px !important;
  margin: 0 !important;
  min-height: 17px !important;
  min-width: 17px !important;
  stroke: currentColor !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  stroke-width: 2 !important;
  width: 17px !important;
}

#hermes-root .h-btn {
  min-height: 34px !important;
}

#hermes-root .h-btn-sm {
  gap: 7px !important;
  padding: 8px 14px !important;
}

#hermes-root .h-quest-actions {
  gap: 8px !important;
}

@media (max-width: 1100px) {
  #hermes-root .h-dashboard-content .h-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #hermes-root .h-dashboard-source {
    display: none !important;
  }
}

@media (max-width: 760px) {
  #hermes-root .h-rail-page .h-header {
    left: 12px !important;
    min-height: 74px !important;
    right: 12px !important;
    top: 10px !important;
  }

  #hermes-root .h-rail-page .h-content,
  #hermes-root .h-rail-page .h-content-narrow {
    padding: 96px 12px 94px !important;
  }

  #hermes-root .h-dashboard-titlebar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  #hermes-root .h-dashboard-content .h-stats {
    grid-template-columns: 1fr !important;
  }

  #hermes-root .h-rail-page .h-floating-menu {
    bottom: 12px !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    left: 10px !important;
    overflow-x: auto !important;
    right: 10px !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
  }

  #hermes-root .h-rail-page .h-float-action:hover,
  #hermes-root .h-rail-page .h-float-action:focus-visible {
    transform: none !important;
  }

  #hermes-root .h-rail-page .h-float-label {
    display: none !important;
  }
}