/* ============================================================
   JEON — Tactical Command Interface
   Theme: Combat / Military Operations Center
   ============================================================ */

:root {
  --bg:          #191c18;
  --bg2:         #1e221d;
  --surface:     #282f25;
  --surface2:    #323a2e;
  --surface3:    #3c4438;
  --border:      #46503f;
  --border2:     #566050;
  --gold:        #a8b49a;
  --gold-dim:    rgba(168,180,154,0.18);
  --green:       #4a7040;
  --green-bright:#6a9a5a;
  --red:         #b03328;
  --amber:       #b8891a;
  --blue:        #4a7888;
  --purple:      #7a5490;
  --text:        #e6ebe0;
  --text2:       #a8b49a;
  --muted:       #737960;
  --sidebar-w:   240px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 18px; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  min-height: 100vh;
}

/* ============================================================ LAYOUT */
.app-layout    { display: flex; min-height: 100vh; }
.main-content  { flex: 1; display: flex; flex-direction: column; margin-left: var(--sidebar-w); min-width: 0; }
.page-body     { flex: 1; padding: 1.5rem 2rem 3rem; max-width: 1400px; width: 100%; }

/* ============================================================ SIDEBAR */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-brand {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.brand-logo { font-size: 1.5rem; color: var(--gold); line-height: 1; }
.brand-name { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.2em; color: var(--gold); line-height: 1; display: block; }
.brand-tag  { font-size: 0.55rem; letter-spacing: 0.4em; color: var(--muted); text-transform: uppercase; display: block; }

.sidebar-user {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(168,180,154,0.03);
}
.user-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold-dim); border: 2px solid var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: var(--gold); flex-shrink: 0; overflow: hidden;
}
img.avatar-img { object-fit: cover; width: 100%; height: 100%; display: block; }
img.avatar-img.mini-avatar { width: 18px; height: 18px; border-radius: 2px; vertical-align: middle; }
img.avatar-img.user-avatar  { width: 52px; height: 52px; border-radius: 50%; }
img.avatar-img.pic-avatar   { width: 56px; height: 56px; border-radius: 2px; }
img.avatar-img.cap-avatar-lg{ width: 44px; height: 44px; border-radius: 50%; }
img.avatar-img.member-avatar{ width: 32px; height: 32px; border-radius: 50%; }

/* Avatar upload button on profile page */
.pic-avatar-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.avatar-upload-btn {
  position: absolute; bottom: -4px; right: -4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); color: #0a0c12;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; cursor: pointer; border: 2px solid var(--bg);
  line-height: 1;
}
.avatar-upload-btn:hover { background: #d9e0d0; }
.user-name  { display: block; font-size: 0.82rem; font-weight: 600; color: var(--text); }
.user-role  { display: block; font-size: 0.68rem; color: var(--muted); letter-spacing: 0.05em; }

.nav-section-label {
  padding: 0.75rem 1rem 0.35rem;
  font-size: 0.68rem; letter-spacing: 0.25em;
  color: var(--muted); text-transform: uppercase;
  font-family: 'Rajdhani', sans-serif;
}

.nav-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 1rem;
  color: var(--text2); text-decoration: none;
  font-size: 0.9rem; font-weight: 500;
  transition: all 0.15s; border-left: 2px solid transparent;
  position: relative;
}
.nav-link:hover        { color: var(--text); background: rgba(255,255,255,0.03); border-left-color: var(--border2); }
.nav-link.active       { color: var(--gold); background: var(--gold-dim); border-left-color: var(--gold); }
.nav-icon              { font-size: 0.9rem; width: 1rem; text-align: center; flex-shrink: 0; }
.nav-badge             { margin-left: auto; background: var(--red); color: white; font-size: 0.6rem; padding: 0.1rem 0.35rem; border-radius: 10px; font-weight: 700; }
.nav-logout            { color: var(--muted); }
.nav-logout:hover      { color: var(--red); border-left-color: var(--red); background: rgba(192,57,43,0.05); }

.sidebar-footer { margin-top: auto; border-top: 1px solid var(--border); }

/* ============================================================ TOPBAR */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 50;
}
.page-breadcrumb    { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; color: var(--text2); }
.breadcrumb-root    { color: var(--muted); letter-spacing: 0.1em; }
.breadcrumb-sep     { margin: 0 0.4rem; color: var(--border2); }
.breadcrumb-page    { color: var(--gold); letter-spacing: 0.1em; }
.topbar-right       { display: flex; align-items: center; gap: 1rem; }
.topbar-time        { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--muted); }
.topbar-intel-btn   { display: flex; align-items: center; gap: 0.5rem; font-family: 'Rajdhani', sans-serif; font-size: 0.78rem; letter-spacing: 0.1em; color: var(--text2); text-decoration: none; padding: 0.35rem 0.75rem; border: 1px solid var(--border); transition: all 0.15s; position: relative; }
.topbar-intel-btn:hover  { border-color: var(--gold); color: var(--gold); }
.topbar-intel-btn.has-alerts { border-color: var(--red); color: var(--red); animation: alertPulse 2s infinite; }
.topbar-count       { background: var(--red); color: white; font-size: 0.65rem; padding: 0.1rem 0.3rem; border-radius: 10px; font-weight: 700; }
.alert-pip          { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; background: var(--red); border-radius: 50%; }

@keyframes alertPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* ============================================================ SECTION HEADERS */
.section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap;
}
.section-title {
  font-family: 'Rajdhani', sans-serif; font-size: 1.9rem; font-weight: 700;
  letter-spacing: 0.15em; color: var(--text);
  position: relative;
}
.section-title::after {
  content: ''; display: block; width: 2.5rem; height: 2px;
  background: var(--gold); margin-top: 0.25rem;
}
.section-sub { font-size: 0.8rem; color: var(--muted); margin-top: 0.25rem; letter-spacing: 0.03em; }

/* ============================================================ CARDS */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  margin-bottom: 1rem;
  position: relative;
}
.card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--gold) 0%, transparent 70%);
  opacity: 0.3;
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: 'Rajdhani', sans-serif; font-size: 1rem;
  font-weight: 600; letter-spacing: 0.2em; color: var(--text);
}
.card-link  { font-size: 0.75rem; color: var(--gold); text-decoration: none; }
.card-link:hover { text-decoration: underline; }
.card-hint  { font-size: 0.75rem; color: var(--muted); }
.card-section-divider { padding: 0.5rem 0; margin: 0.5rem 0; border-top: 1px solid var(--border); font-size: 0.65rem; letter-spacing: 0.2em; color: var(--muted); font-family: 'Rajdhani', sans-serif; }

/* ============================================================ STAT GRID */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: ''; position: absolute;
  bottom: 0; right: 0;
  width: 40px; height: 40px;
  border-right: 1px solid var(--border2);
  border-bottom: 1px solid var(--border2);
  opacity: 0.4;
}
.stat-icon  { font-size: 1.2rem; margin-bottom: 0.5rem; }
.stat-value { font-family: 'Rajdhani', sans-serif; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.stat-label { font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--muted); margin-top: 0.2rem; }
.stat-sub   { font-size: 0.72rem; color: var(--text2); margin-top: 0.2rem; }

/* ============================================================ DASHBOARD GRID */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: 1fr; } }
.dash-col { display: flex; flex-direction: column; gap: 0; }

/* ============================================================ MISSION ROWS */
.mission-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  gap: 0.75rem;
}
.mission-row:last-child { border-bottom: none; }
.mission-row-left       { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.mission-row-title      { font-size: 0.95rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mission-row-title a    { color: var(--text); text-decoration: none; }
.mission-row-title a:hover { color: var(--gold); }
.mission-row-meta       { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.2rem; align-items: center; }
.wf-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================ CAPACITY ROWS */
.capacity-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); gap: 1rem;
}
.capacity-row:last-child { border-bottom: none; }
.cap-info     { display: flex; align-items: center; gap: 0.75rem; min-width: 140px; }
.cap-avatar   { width: 32px; height: 32px; border-radius: 2px; border: 1px solid; display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.75rem; flex-shrink: 0; }
.cap-name     { font-size: 0.82rem; font-weight: 500; }
.cap-dept     { font-size: 0.7rem; color: var(--muted); }
.cap-bar-wrap { flex: 1; display: flex; align-items: center; gap: 0.75rem; }
.cap-bar-track{ flex: 1; height: 6px; background: var(--surface3); border-radius: 1px; overflow: hidden; }
.cap-bar-fill { height: 100%; border-radius: 1px; transition: width 0.3s; }
.cap-hours    { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; white-space: nowrap; }

/* ============================================================ INTEL ROWS */
.intel-row {
  display: flex; gap: 0.75rem; padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}
.intel-row:last-child { border-bottom: none; }
.intel-row.unread { background: rgba(168,180,154,0.03); }
.intel-dot    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 0.3rem; }
.intel-title  { font-size: 0.82rem; font-weight: 500; }
.intel-msg    { font-size: 0.78rem; color: var(--text2); margin-top: 0.15rem; }
.intel-time   { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }

/* ============================================================ LEADERBOARD ROWS */
.leaderboard-row {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem; border-bottom: 1px solid var(--border);
}
.leaderboard-row:last-child { border-bottom: none; }
.rank-num  { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; width: 2rem; text-align: center; color: var(--muted); }
.rank-num.gold   { color: var(--gold); }
.rank-num.silver { color: #9aa0b8; }
.rank-num.bronze { color: #cd7f32; }
.rank-avatar { width: 28px; height: 28px; background: var(--surface3); display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-family: 'Rajdhani', sans-serif; font-weight: 700; border: 1px solid var(--border2); border-radius: 2px; }
.rank-name { flex: 1; font-size: 0.82rem; }
.rank-pts  { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--gold); }

/* ============================================================ LOG ROWS */
.log-row {
  display: flex; gap: 0.75rem; padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--border);
}
.log-row:last-child { border-bottom: none; }
.log-icon   { color: var(--gold); font-size: 0.8rem; flex-shrink: 0; margin-top: 0.1rem; }
.log-action { font-size: 0.8rem; }
.log-meta   { font-size: 0.7rem; color: var(--muted); margin-top: 0.15rem; }

/* ============================================================ SCORE CARD */
.score-card     { padding: 1.25rem; }
.score-header   { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.score-icon     { font-size: 2rem; color: var(--gold); }
.score-label    { font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--muted); }
.score-val      { font-family: 'Rajdhani', sans-serif; font-size: 2.5rem; font-weight: 700; color: var(--gold); line-height: 1; }
.score-val span { font-size: 0.9rem; color: var(--muted); }
.score-rank     { font-size: 0.78rem; color: var(--text2); margin-bottom: 0.75rem; }
.score-rank strong { color: var(--gold); }

/* ============================================================ BADGES */
.badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem; font-family: 'Rajdhani', sans-serif;
  font-weight: 600; letter-spacing: 0.1em;
  border: 1px solid; border-radius: 2px;
  white-space: nowrap;
}

/* ============================================================ META CHIPS */
.meta-item      { font-size: 0.72rem; color: var(--text2); }
.meta-chip      { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--text2); padding: 0.2rem 0.5rem; background: var(--surface3); border: 1px solid var(--border); border-radius: 2px; }
.mini-avatar    { width: 18px; height: 18px; background: var(--gold-dim); border: 1px solid var(--gold); display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-family: 'Rajdhani', sans-serif; font-weight: 700; color: var(--gold); border-radius: 2px; }
.overdue-chip   { color: var(--red) !important; border-color: var(--red) !important; background: rgba(192,57,43,0.08) !important; }

/* ============================================================ BUTTONS */
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  background: var(--gold); color: #0a0c12;
  font-family: 'Rajdhani', sans-serif; font-size: 0.85rem;
  font-weight: 700; letter-spacing: 0.1em;
  border: none; cursor: pointer; text-decoration: none;
  transition: background 0.15s;
}
.btn-primary:hover { background: #d9b85c; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  background: transparent; color: var(--text2);
  font-family: 'Rajdhani', sans-serif; font-size: 0.85rem;
  font-weight: 600; letter-spacing: 0.1em;
  border: 1px solid var(--border); cursor: pointer; text-decoration: none;
  transition: all 0.15s;
}
.btn-ghost:hover { border-color: var(--border2); color: var(--text); }

.btn-ghost-sm {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  background: transparent; color: var(--text2);
  font-family: 'Rajdhani', sans-serif; font-size: 0.75rem;
  font-weight: 600; letter-spacing: 0.05em;
  border: 1px solid var(--border); cursor: pointer; text-decoration: none;
  transition: all 0.15s;
}
.btn-ghost-sm:hover { border-color: var(--gold); color: var(--gold); }

.btn-primary-sm {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  background: var(--gold); color: #0a0c12;
  font-family: 'Rajdhani', sans-serif; font-size: 0.75rem;
  font-weight: 700; letter-spacing: 0.05em;
  border: none; cursor: pointer; text-decoration: none;
}
.btn-primary-sm:hover { background: #d9b85c; }

.btn-accent-sm {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  background: rgba(142,68,173,0.2); color: #8e44ad;
  font-family: 'Rajdhani', sans-serif; font-size: 0.75rem;
  font-weight: 700; border: 1px solid #8e44ad; cursor: pointer; text-decoration: none;
}
.btn-success {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  background: rgba(39,174,96,0.15); color: var(--green-bright);
  font-family: 'Rajdhani', sans-serif; font-size: 0.85rem;
  font-weight: 700; letter-spacing: 0.1em;
  border: 1px solid var(--green-bright); cursor: pointer;
  transition: all 0.15s;
}
.btn-success:hover { background: rgba(39,174,96,0.25); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.25rem;
  background: rgba(192,57,43,0.15); color: var(--red);
  font-family: 'Rajdhani', sans-serif; font-size: 0.85rem;
  font-weight: 700; letter-spacing: 0.1em;
  border: 1px solid var(--red); cursor: pointer;
  transition: all 0.15s;
}
.btn-danger:hover { background: rgba(192,57,43,0.25); }

.btn-xs {
  padding: 0.2rem 0.5rem;
  background: transparent; color: var(--text2);
  font-size: 0.7rem; font-family: 'Rajdhani', sans-serif;
  border: 1px solid var(--border); cursor: pointer;
  transition: all 0.15s;
}
.btn-xs:hover { border-color: var(--gold); color: var(--gold); }

/* ============================================================ FORMS */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }

.form-container { max-width: 1000px; }

.form-group { margin-bottom: 1rem; }
.form-row   { display: flex; gap: 0.75rem; margin-bottom: 1rem; }
.form-row .form-group { flex: 1; margin-bottom: 0; }

label {
  display: block; font-size: 0.78rem; letter-spacing: 0.15em;
  color: var(--muted); margin-bottom: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
}
.req { color: var(--red); }
.field-hint { font-size: 0.72rem; color: var(--muted); margin-top: 0.3rem; }

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
input[type=date],
select,
textarea {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.6rem 0.75rem;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  border-radius: 2px;
  transition: border-color 0.15s;
  outline: none;
}
input[type=date] { color-scheme: dark; }
input:focus, select:focus, textarea:focus { border-color: var(--gold); }
input:disabled { opacity: 0.5; cursor: not-allowed; }
select option  { background: var(--surface2); }

textarea { resize: vertical; min-height: 80px; }

.form-actions {
  display: flex; justify-content: flex-end; gap: 0.75rem;
  padding: 1rem; border-top: 1px solid var(--border); margin-top: 0.5rem;
}

.inline-form .form-row { margin-bottom: 0.5rem; }

.checkbox-group { margin-bottom: 0; }
.checkbox-label {
  display: flex; align-items: center; gap: 0.5rem;
  cursor: pointer; font-size: 0.75rem; color: var(--text2);
  letter-spacing: 0.05em; padding: 0;
}
.checkbox-label input[type=checkbox] { width: auto; margin: 0; cursor: pointer; }

/* ============================================================ WORKFLOW SELECTOR */
.workflow-selector {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; padding: 1rem; border-top: 1px solid var(--border);
}
@media (max-width: 700px) { .workflow-selector { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 420px) { .workflow-selector { grid-template-columns: 1fr; } }
.wf-option { position: relative; }
.wf-option + .wf-option { border-left: 1px solid var(--border); }
@media (max-width: 700px) { .wf-option + .wf-option { border-left: none; } }
.wf-option input[type=radio] { display: none; }
.wf-option-inner {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding: 1.1rem 1rem; height: 100%;
  cursor: pointer; transition: background 0.15s, color 0.15s;
  background: transparent; position: relative; overflow: hidden;
}
.wf-option-inner::before {
  content: ''; position: absolute; inset: 0;
  background: var(--wf-color, var(--gold)); opacity: 0;
  transition: opacity 0.2s; pointer-events: none;
}
.wf-option input:checked + .wf-option-inner::before { opacity: 0.06; }
.wf-option input:checked + .wf-option-inner {
  box-shadow: inset 0 3px 0 0 var(--wf-color, var(--gold));
}
.wf-option input:checked + .wf-option-inner .wf-option-label { color: var(--wf-color, var(--gold)); }
.wf-option input:checked + .wf-option-inner .wf-option-icon { color: var(--wf-color, var(--gold)); }
.wf-option-inner:hover::before { opacity: 0.04; }
.wf-option-icon  { font-size: 1.4rem; line-height: 1; }
.wf-option-label { font-family: 'Rajdhani', sans-serif; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text1); transition: color 0.15s; }
.wf-option-desc  { font-size: 0.7rem; color: var(--muted); line-height: 1.45; }

/* Selected indicator dot */
.wf-option input:checked + .wf-option-inner .wf-option-label::before {
  content: '▸ '; font-size: 0.7em;
}

/* ============================================================ VIDEO FIELDS BANNER */
.video-fields-banner {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.75rem 0 0.75rem; padding: 0.55rem 0.75rem;
  background: rgba(192,57,43,0.08); border: none;
  border-left: 3px solid #c0392b; color: #c0392b !important;
  font-family: 'Rajdhani', sans-serif; font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.18em;
}
.design-fields-banner {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.75rem 0 0.75rem; padding: 0.55rem 0.75rem;
  background: rgba(142,68,173,0.08); border: none;
  border-left: 3px solid #8e44ad; color: #8e44ad !important;
  font-family: 'Rajdhani', sans-serif; font-size: 0.72rem;
  font-weight: 700; letter-spacing: 0.18em;
}

/* Spec fields slide-in animation */
@keyframes vf-reveal { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
#videoFields[style*="block"] { animation: vf-reveal 0.2s ease; }

/* ============================================================ ASPECT RATIO PILLS */
.ar-pill-group { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.ar-pill { cursor: pointer; }
.ar-pill input[type=checkbox] { display: none; }

.ar-pill-inner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.18rem; padding: 0.65rem 0.75rem; min-width: 68px;
  border: 1.5px solid var(--border); color: var(--muted);
  background: rgba(255,255,255,0.02);
  transition: all 0.15s; user-select: none;
}
.ar-pill-inner:hover { border-color: var(--border2); color: var(--text); background: rgba(255,255,255,0.04); }

.ar-pill-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
.ar-pill-icon svg { width: 40px; height: 40px; }
.ar-pill-label {
  font-family: 'Rajdhani', sans-serif; font-size: 0.82rem;
  font-weight: 700; letter-spacing: 0.06em; color: var(--text2);
  line-height: 1; margin-top: 0.1rem;
  transition: color 0.15s;
}
.ar-pill-sub {
  font-size: 0.58rem; letter-spacing: 0.1em; color: var(--muted);
  text-transform: uppercase; line-height: 1;
}

/* Video workflow — red checked state */
.ar-video .ar-pill input:checked + .ar-pill-inner {
  border-color: #c0392b; background: rgba(192,57,43,0.1);
}
.ar-video .ar-pill input:checked + .ar-pill-inner .ar-pill-icon { color: #c0392b; }
.ar-video .ar-pill input:checked + .ar-pill-inner .ar-pill-label { color: #c0392b; }
.ar-video .ar-pill input:checked + .ar-pill-inner .ar-pill-sub  { color: rgba(192,57,43,0.7); }

/* Design workflow — purple checked state */
.ar-design .ar-pill input:checked + .ar-pill-inner {
  border-color: #8e44ad; background: rgba(142,68,173,0.1);
}
.ar-design .ar-pill input:checked + .ar-pill-inner .ar-pill-icon { color: #8e44ad; }
.ar-design .ar-pill input:checked + .ar-pill-inner .ar-pill-label { color: #8e44ad; }
.ar-design .ar-pill input:checked + .ar-pill-inner .ar-pill-sub  { color: rgba(142,68,173,0.7); }

.ar-error { font-size: 0.72rem; color: #e57373; margin-top: 0.4rem; }

/* Aspect ratio badges on mission view */
.ar-badge-row { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.ar-view-badge {
  display: inline-block; padding: 0.15rem 0.45rem;
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  border: 1px solid var(--border2); color: var(--text2);
  background: rgba(255,255,255,0.04); letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Aspect ratio body block — prominent display inside task details card */
.ar-body-block {
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(168,180,154,0.05);
  border: 1px solid rgba(168,180,154,0.15);
  border-left: 3px solid var(--gold);
}
.ar-body-header {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}
.ar-body-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.ar-body-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.65rem 0.9rem;
  background: rgba(168,180,154,0.07);
  border: 1px solid rgba(168,180,154,0.2);
  border-radius: 4px;
  min-width: 72px;
  transition: border-color 0.15s, background 0.15s;
}
.ar-body-pill:hover {
  border-color: var(--gold);
  background: rgba(168,180,154,0.12);
}
.ar-body-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
}
.ar-body-icon svg {
  width: 52px;
  height: 52px;
}
.ar-body-ratio {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--text);
  letter-spacing: 0.05em;
}

/* ============================================================ ALERT BANNERS */
.alert-banner {
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  margin-bottom: 1rem;
  border-left: 4px solid;
}
.alert-banner--warn {
  background: rgba(201, 168, 76, 0.08);
  border-color: #c9a84c;
  color: #c9a84c;
}
.alert-banner--error {
  background: rgba(192, 57, 43, 0.08);
  border-color: #c0392b;
  color: #e57373;
}
.alert-banner--success {
  background: rgba(39, 174, 96, 0.08);
  border-color: #27ae60;
  color: #2ecc71;
}

/* ============================================================ CAPACITY PREVIEW */
.capacity-preview { margin-top: 0.5rem; padding: 0.6rem; background: var(--bg2); border: 1px solid var(--border); }
.cp-label   { font-size: 0.78rem; margin-bottom: 0.35rem; }
.cp-bar     { height: 6px; background: var(--surface3); border-radius: 1px; overflow: hidden; }
.cp-fill    { height: 100%; border-radius: 1px; transition: width 0.3s; }

/* ============================================================ FILTER BAR */
.filter-bar   { margin-bottom: 1.25rem; }
.filter-form  { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.filter-form select { width: auto; min-width: 160px; padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.filter-chip  {
  padding: 0.3rem 0.75rem; font-size: 0.72rem;
  border: 1px solid var(--border); color: var(--text2);
  text-decoration: none; font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.05em; cursor: pointer; transition: all 0.15s;
}
.filter-chip:hover, .filter-chip.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* ============================================================ MISSION GRID */
.mission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.mission-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  padding: 1rem;
  transition: border-color 0.15s;
  position: relative;
}
.mission-card:hover { border-color: var(--border2); }
.mission-card.overdue { border-color: var(--red) !important; }
.mc-top       { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.5rem; gap: 0.5rem; }
.mc-workflow  { font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 600; }
.mc-badges    { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.mc-title     { font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; }
.mc-title a   { color: var(--text); text-decoration: none; }
.mc-title a:hover { color: var(--gold); }
.mc-op        { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.5rem; }
.mc-desc      { font-size: 0.78rem; color: var(--text2); line-height: 1.4; margin-bottom: 0.75rem; }
.mc-meta      { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.mc-hours     { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.75rem; }
.hours-bar-track { flex: 1; height: 4px; background: var(--surface3); border-radius: 1px; overflow: hidden; }
.hours-bar-fill  { height: 100%; border-radius: 1px; }
.mc-footer    { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.prerequisites-notice { font-size: 0.72rem; color: var(--muted); background: rgba(85,89,112,0.1); border: 1px solid var(--border); padding: 0.35rem 0.6rem; margin-bottom: 0.5rem; }
.overdue-text { color: var(--red) !important; }

/* ============================================================ EMPTY STATES */
.empty-state  { padding: 1.25rem 1rem; font-size: 0.8rem; color: var(--muted); text-align: center; }
.empty-panel  { text-align: center; padding: 4rem 2rem; }
.empty-icon   { font-size: 3rem; color: var(--border2); margin-bottom: 1rem; }
.empty-title  { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; letter-spacing: 0.2em; color: var(--muted); }
.empty-sub    { font-size: 0.8rem; color: var(--muted); margin-top: 0.4rem; }

/* ============================================================ ALERT BOXES */
.alert-box {
  padding: 0.875rem 1rem;
  border-left: 3px solid;
  margin-bottom: 1rem;
  font-size: 0.84rem;
}
.alert-danger  { background: rgba(192,57,43,0.1); border-color: var(--red); color: #e57373; }
.alert-success { background: rgba(39,174,96,0.1); border-color: var(--green-bright); color: #81c784; }
.alert-title   { font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 0.3rem; }
.alert-item    { margin-top: 0.2rem; }

/* ============================================================ MISSION VIEW */
.mission-view-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  padding: 1.25rem;
  display: flex; justify-content: space-between; gap: 1.5rem;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.mvh-workflow { font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; letter-spacing: 0.15em; color: var(--muted); margin-bottom: 0.3rem; }
.mvh-title    { font-family: 'Rajdhani', sans-serif; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.05em; color: var(--text); margin-bottom: 0.5rem; }
.mvh-badges   { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.mvh-right    { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.mvh-stat     { display: flex; flex-direction: column; gap: 0.15rem; }
.mvh-stat-label { font-family: 'Rajdhani', sans-serif; font-size: 0.6rem; letter-spacing: 0.2em; color: var(--muted); }
.mvh-stat-val   { font-size: 0.9rem; font-weight: 600; }

/* ── Team panel (lead + partners) ── */
.team-panel { display: flex; flex-direction: column; gap: 0.2rem; }
.team-row   { display: flex; align-items: center; gap: 0.4rem; }
.team-name  { font-size: 0.88rem; font-weight: 600; }
.team-remove {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 0.7rem; padding: 0 3px; line-height: 1; opacity: 0.6;
}
.team-remove:hover { color: #c0392b; opacity: 1; }
.pic-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 0.55rem; letter-spacing: 0.1em;
  color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.35);
  padding: 1px 6px; border-radius: 2px; white-space: nowrap;
}

/* Per-person appraisal stage grid */
.appraisal-person-grid { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.25rem 0; }
.apg-row  { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.apg-name { font-size: 0.8rem; font-weight: 600; flex: 1; min-width: 90px; display: flex; align-items: center; gap: 0.35rem; }
.apg-stage {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 2px; border: 1px solid var(--border); white-space: nowrap;
}
.apg-stage.apg-done   { color: #27ae60; border-color: rgba(39,174,96,0.4); background: rgba(39,174,96,0.08); }
.apg-stage.apg-active { color: var(--gold); border-color: rgba(201,168,76,0.4); }
.apg-stage.apg-locked { color: var(--muted); opacity: 0.5; }

.merit-recipient { font-size: 0.65rem; color: var(--muted); font-style: italic; margin-left: 4px; }

/* ── Estimated-hours amendment display ── */
.est-orig  { color: var(--muted); text-decoration: line-through; font-weight: 400; font-size: 0.78rem; }
.est-arrow { color: var(--muted); font-size: 0.72rem; margin: 0 3px; }
.est-badge {
  font-family: 'JetBrains Mono', monospace; font-size: 0.5rem; letter-spacing: 0.08em;
  padding: 1px 5px; border-radius: 2px; margin-left: 4px; vertical-align: 1px;
}
.est-badge--ext { color: var(--gold); background: rgba(201,168,76,0.12); border: 1px solid rgba(201,168,76,0.35); }
.est-badge--red { color: #27ae60;   background: rgba(39,174,96,0.10);  border: 1px solid rgba(39,174,96,0.3); }

/* ── Email notification settings (profile) ── */
.notif-row {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
}
.notif-row input[type=checkbox] { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.notif-label { font-size: 0.85rem; font-weight: 600; }
.notif-desc  { font-size: 0.7rem; color: var(--muted); margin-top: 1px; }

.prereq-lockbox {
  display: flex; align-items: flex-start; gap: 0.75rem;
  background: rgba(85,89,112,0.1); border: 1px solid var(--muted);
  padding: 0.875rem 1rem; margin-bottom: 1rem; font-size: 0.82rem;
}
.lock-icon { font-size: 1.2rem; color: var(--muted); flex-shrink: 0; }

.status-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }

.mission-view-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; }
@media (max-width: 900px) { .mission-view-grid { grid-template-columns: 1fr; } }
.mv-col { display: flex; flex-direction: column; gap: 1rem; }

.mission-desc-text { padding: 0 1rem 1rem; font-size: 0.85rem; line-height: 1.6; color: var(--text2); }
.spec-box     { margin: 0 1rem 1rem; padding: 0.65rem 0.875rem; background: rgba(41,128,185,0.08); border: 1px solid rgba(41,128,185,0.25); font-size: 0.82rem; }
.manager-notes-box { margin: 0 1rem 1rem; padding: 0.65rem 0.875rem; background: rgba(168,180,154,0.06); border: 1px solid rgba(168,180,154,0.2); font-size: 0.82rem; color: var(--text2); }

/* Edit history */
.edit-history-block { margin: 0.75rem 0 0; padding: 0.75rem 1rem; background: rgba(255,255,255,0.02); border-top: 1px solid var(--border); }
.edit-history-title { font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; letter-spacing: .15em; color: var(--muted); margin-bottom: 0.5rem; }
.edit-history-row { padding: 0.4rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.78rem; }
.edit-history-row:last-child { border-bottom: none; }
.edit-history-who { color: var(--gold); font-weight: 500; margin-right: 0.5rem; }
.edit-history-when { color: var(--muted); font-size: 0.72rem; }
.edit-history-detail { color: var(--text2); margin-top: 0.2rem; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; line-height: 1.6; }

/* ============================================================ ASSET VAULT */
.asset-list   { padding: 0 1rem 1rem; }
.asset-item   { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.asset-item:last-child { border-bottom: none; }
.asset-info   { display: flex; align-items: center; gap: 0.75rem; }
.asset-platform { font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; color: var(--gold); }
.asset-label  { font-size: 0.82rem; }
.asset-meta   { font-size: 0.7rem; color: var(--muted); }
.asset-actions { display: flex; align-items: center; gap: 0.6rem; }
.drive-thumb {
  width: 48px; height: 48px; object-fit: cover;
  border: 1px solid var(--border); border-radius: 2px; cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.drive-thumb:hover { border-color: var(--gold); transform: scale(1.08); }
.drive-preview-modal {
  width: 90vw; max-width: 860px; max-height: 90vh;
  flex-direction: column; padding: 0; overflow: hidden;
}
.drive-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.drive-preview-modal iframe {
  flex: 1; width: 100%; min-height: 520px; border: none; background: #111;
}

/* ============================================================ FEEDBACK */
.feedback-section { padding: 0.75rem 1rem; }
.fb-section-title { font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 0.65rem; }
.feedback-item    { background: var(--bg2); border: 1px solid var(--border); padding: 0.75rem; margin-bottom: 0.5rem; border-radius: 2px; }
.feedback-item.resolved { opacity: 0.6; }
.fb-timestamp { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--gold); margin-bottom: 0.3rem; }
.fb-pin-coords{ font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--purple); margin-bottom: 0.3rem; }
.fb-content   { font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.3rem; }
.fb-meta      { font-size: 0.7rem; color: var(--muted); display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.resolved-tag { background: rgba(39,174,96,0.1); color: var(--green-bright); border: 1px solid var(--green-bright); font-size: 0.65rem; padding: 0.1rem 0.35rem; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.1em; }

/* Image canvas */
.image-canvas-container {
  position: relative; background: var(--surface3); border: 1px solid var(--border);
  min-height: 200px; margin-bottom: 0.75rem; overflow: hidden;
}
.canvas-hint { padding: 1rem; font-size: 0.78rem; color: var(--muted); font-family: 'Rajdhani', sans-serif; letter-spacing: 0.1em; }
.image-pin   { position: absolute; transform: translate(-50%,-50%); cursor: pointer; z-index: 10; }
.pin-dot     { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--red); border: 2px solid white; box-shadow: 0 0 8px rgba(192,57,43,0.6); }
.pin-tooltip { display: none; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--surface2); border: 1px solid var(--border); padding: 0.5rem; min-width: 180px; font-size: 0.75rem; z-index: 20; }
.image-pin:hover .pin-tooltip { display: block; }

.add-feedback-form { padding: 1rem; border-top: 1px solid var(--border); }

/* ============================================================ HOURS TRACKER */
.hours-display  { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.75rem 1rem 0.5rem; }
.hours-actual   { font-family: 'Rajdhani', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; }
.hours-sep      { color: var(--muted); }
.hours-est      { font-size: 0.8rem; color: var(--muted); }
.hours-track-bar{ height: 8px; background: var(--surface3); margin: 0 1rem 0.75rem; overflow: hidden; }
.hours-track-fill{ height: 100%; transition: width 0.3s; }

/* ============================================================ MERIT LIST */
.merit-list   { padding: 0 1rem; }
.merit-item   { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.65rem 0; border-bottom: 1px solid var(--border); }
.merit-item:last-child { border-bottom: none; }
.merit-pts    { font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 700; min-width: 3rem; text-align: right; }
.merit-cat    { font-family: 'Rajdhani', sans-serif; font-size: 0.75rem; letter-spacing: 0.1em; }
.merit-reason { font-size: 0.78rem; color: var(--text2); margin-top: 0.1rem; }
.merit-meta   { font-size: 0.7rem; color: var(--muted); margin-top: 0.1rem; }
.merit-total  { padding: 0.5rem 0; font-size: 0.82rem; color: var(--text2); }

/* Appraisal stage tracker */
.appraisal-stages {
  display: flex; align-items: center; gap: 0;
  padding: 0.75rem 1rem 0;
}
.stage-item {
  display: flex; align-items: center; gap: 0.4rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.72rem; letter-spacing: 0.12em; font-weight: 600;
}
.stage-dot {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--border2); background: transparent;
  flex-shrink: 0;
}
.stage-item.stage-done .stage-dot  { background: #27ae60; border-color: #27ae60; }
.stage-item.stage-active .stage-dot { background: #c9a84c; border-color: #c9a84c; }
.stage-item.stage-locked .stage-dot { background: transparent; border-color: var(--border); opacity: 0.4; }
.stage-item.stage-done  { color: #27ae60; }
.stage-item.stage-active{ color: #c9a84c; }
.stage-item.stage-locked{ color: var(--muted); opacity: 0.5; }
.stage-check { font-size: 0.65rem; }
.stage-line  { flex: 1; height: 1px; background: var(--border); margin: 0 0.6rem; min-width: 2rem; }

/* Stage badges on merit entries */
.stage-badge {
  display: inline-block;
  font-size: 0.58rem; letter-spacing: 0.12em;
  padding: 1px 5px; border-radius: 2px;
  margin-left: 0.4rem; vertical-align: middle;
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
}
.stage-badge--during { background: rgba(41,128,185,0.15); color: #2980b9; border: 1px solid rgba(41,128,185,0.3); }
.stage-badge--after  { background: rgba(39,174,96,0.12);  color: #27ae60; border: 1px solid rgba(39,174,96,0.3); }

/* Appraisal notices */
.appraisal-stage-notice {
  font-size: 0.75rem; color: var(--muted);
  font-family: 'Rajdhani', sans-serif; letter-spacing: 0.05em;
  padding: 0.4rem 0;
}
.appraisal-stage-notice strong { color: #c9a84c; }
.appraisal-locked-msg {
  font-size: 0.78rem; color: var(--muted);
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  margin-top: 0.75rem;
}

/* ============================================================ TIMELINE LIST */
.timeline-list { padding: 0.75rem 1rem; }
.tl-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0; }
.tl-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.tl-label{ font-size: 0.78rem; font-weight: 500; }
.tl-time { font-size: 0.7rem; color: var(--muted); }

/* ============================================================ OPERATIONS GRID */
.op-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 1rem; }
.op-card { background: var(--surface); border: 1px solid var(--border); padding: 1.25rem; position: relative; }
.op-card-header { margin-bottom: 0.75rem; }
.op-badges { display: flex; gap: 0.4rem; margin-bottom: 0.4rem; flex-wrap: wrap; }
.op-title  { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.05em; }
.op-desc   { font-size: 0.78rem; color: var(--text2); line-height: 1.4; margin-bottom: 1rem; }
.op-stats  { display: flex; gap: 1.5rem; margin-bottom: 0.75rem; }
.op-stat   { display: flex; flex-direction: column; gap: 0.1rem; }
.op-stat-val   { font-family: 'Rajdhani', sans-serif; font-size: 1.3rem; font-weight: 700; line-height: 1; }
.op-stat-label { font-size: 0.65rem; color: var(--muted); letter-spacing: 0.1em; }
.op-progress { margin-bottom: 0.75rem; }
.op-progress-bar  { height: 4px; background: var(--surface3); margin-bottom: 0.25rem; }
.op-progress-fill { height: 100%; transition: width 0.3s; }
.op-progress-pct  { font-size: 0.7rem; color: var(--muted); }
.op-dates  { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.75rem; }
.op-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.op-creator{ font-size: 0.72rem; color: var(--muted); }

/* ============================================================ CAPACITY GRID */
.dept-section { margin-bottom: 2rem; }
.dept-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.dept-title   { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.2em; }
.dept-summary { font-size: 0.78rem; color: var(--muted); }
.capacity-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1rem; }
.cap-card { background: var(--surface); border: 1px solid var(--border); padding: 1rem; }
.cap-card-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.cap-avatar-lg { width: 44px; height: 44px; border-radius: 2px; border: 2px solid; display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem; flex-shrink: 0; }
.cap-card-name   { font-weight: 600; font-size: 0.9rem; }
.cap-card-role   { font-size: 0.72rem; color: var(--muted); margin-top: 0.1rem; }
.cap-status-badge{ font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 0.1em; margin-top: 0.2rem; }
.cap-score     { margin-left: auto; font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; color: var(--gold); }
.main-status-bar { margin-bottom: 0.75rem; }
.msb-labels    { display: flex; justify-content: space-between; font-size: 0.65rem; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.3rem; font-family: 'Rajdhani', sans-serif; }
.msb-track     { height: 10px; background: var(--surface3); position: relative; overflow: hidden; }
.msb-fill      { height: 100%; transition: width 0.4s cubic-bezier(0.4,0,0.2,1); position: relative; }
.msb-pct-label { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 0.6rem; color: #0a0c12; font-weight: 700; font-family: 'Rajdhani', sans-serif; }
.msb-thresholds{ position: relative; height: 4px; }
.msb-mark      { position: absolute; top: 0; width: 1px; height: 4px; background: var(--border2); }
.msb-overtime  { position: absolute; height: 100%; background: repeating-linear-gradient(45deg, rgba(192,57,43,0.4), rgba(192,57,43,0.4) 2px, transparent 2px, transparent 4px); }
.mission-breakdown { margin-top: 0.75rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
.mb-row    { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.75rem; }
.mb-wf-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.mb-title  { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mb-title a{ color: var(--text2); text-decoration: none; }
.mb-title a:hover { color: var(--gold); }
.mb-hours  { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; color: var(--muted); }
.cap-empty { font-size: 0.75rem; color: var(--muted); padding: 0.5rem 0; }
.overload-alert { background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3); color: var(--red); font-size: 0.75rem; padding: 0.4rem 0.6rem; margin-top: 0.75rem; font-family: 'Rajdhani', sans-serif; letter-spacing: 0.05em; }
.cap-card-footer { display: flex; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }

/* ============================================================ LEGEND */
.legend-bar { display: flex; gap: 1rem; flex-wrap: wrap; }
.legend-item{ display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--text2); }
.leg-dot    { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ============================================================ LEADERBOARD TABLE */
.leaderboard-table-wrap { overflow-x: auto; }
.leaderboard-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border);
}
.leaderboard-table th {
  padding: 0.65rem 1rem; text-align: left;
  font-family: 'Rajdhani', sans-serif; font-size: 0.65rem;
  letter-spacing: 0.2em; color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.leaderboard-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.leaderboard-table tr.my-row td { background: rgba(168,180,154,0.05); }
.leaderboard-table tr.rank-1 td { background: rgba(168,180,154,0.06); }
.leaderboard-table tr:last-child td { border-bottom: none; }

.rank-medal { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; }
.rank-medal.rank-1 { color: var(--gold); }
.rank-medal.rank-2 { color: #9aa0b8; }
.rank-medal.rank-3 { color: #cd7f32; }
.operative-cell { display: flex; align-items: center; gap: 0.75rem; }
.op-avatar { width: 32px; height: 32px; border-radius: 2px; background: var(--surface3); display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border); }
.op-avatar.rank-1 { border-color: var(--gold); background: rgba(168,180,154,0.1); color: var(--gold); }
.op-avatar.rank-2 { border-color: #9aa0b8; }
.op-avatar.rank-3 { border-color: #cd7f32; }
.op-name   { font-size: 0.85rem; font-weight: 500; }
.op-title-small { font-size: 0.7rem; color: var(--muted); }
.you-tag   { font-family: 'Rajdhani', sans-serif; font-size: 0.6rem; background: var(--gold-dim); color: var(--gold); border: 1px solid var(--gold); padding: 0.05rem 0.35rem; letter-spacing: 0.1em; }
.dept-tag  { font-size: 0.72rem; color: var(--text2); }
.num-cell  { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; }
.merit-num { color: var(--green-bright); }
.demerit-num { color: var(--red); }
.rating-cell { display: flex; align-items: center; gap: 0.75rem; }
.rating-pts { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--gold); min-width: 3.5rem; }
.rating-pts.neg { color: var(--red); }
.rating-bar-track { flex: 1; height: 4px; background: var(--surface3); overflow: hidden; min-width: 60px; }
.rating-bar-fill { height: 100%; background: var(--gold); }
.rating-bar-fill.rank-1 { background: linear-gradient(90deg, var(--gold), #e6c55c); }
.trend-bar  { height: 6px; background: var(--surface3); width: 60px; overflow: hidden; }
.trend-fill { height: 100%; }

.my-rank-banner { background: linear-gradient(135deg, var(--surface) 0%, rgba(168,180,154,0.08) 100%); border: 1px solid rgba(168,180,154,0.3); padding: 1.5rem; margin-bottom: 1.5rem; }
.mrb-inner  { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.mrb-ranks  { display: flex; align-items: center; gap: 1.25rem; }
.mrb-rank-block { text-align: center; }
.mrb-rank   { font-family: 'Rajdhani', sans-serif; font-size: 3.5rem; font-weight: 700; color: var(--gold); line-height: 1; }
.mrb-rank-label { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 0.25em; color: var(--muted); margin-top: 0.2rem; }
.mrb-rank-divider { width: 1px; height: 50px; background: var(--border); }
.mrb-label  { font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--muted); }
.mrb-pts    { font-family: 'Rajdhani', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--text); }
.mrb-pts span { font-size: 0.8rem; color: var(--muted); }
.mrb-gap    { font-size: 0.8rem; color: var(--text2); margin-top: 0.25rem; }
.mrb-chart-wrap { margin-left: auto; }

/* Within-team leaderboard */
.team-lb-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--surface2); border: 1px solid var(--border); margin-bottom: 0.75rem; }
.tlb-icon  { font-size: 1.1rem; }
.tlb-name  { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.15em; flex: 1; }
.tlb-count { font-size: 0.75rem; color: var(--muted); }

.view-toggle { display: flex; border: 1px solid var(--border); overflow: hidden; }
.toggle-btn  { padding: 0.45rem 1rem; font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; letter-spacing: 0.1em; color: var(--text2); text-decoration: none; transition: all 0.15s; }
.toggle-btn:hover { background: var(--surface3); }
.toggle-btn.active { background: var(--gold); color: #0a0c12; font-weight: 700; }

.dept-ranking-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 1rem; }
.dept-rank-card { background: var(--surface); border: 1px solid var(--border); padding: 1.5rem; text-align: center; }
.drc-rank { font-family: 'Rajdhani', sans-serif; font-size: 2.5rem; font-weight: 700; }
.drc-icon { font-size: 1.5rem; margin: 0.5rem 0; }
.drc-name { font-family: 'Rajdhani', sans-serif; letter-spacing: 0.15em; font-size: 0.8rem; color: var(--muted); }
.drc-pts  { font-family: 'Rajdhani', sans-serif; font-size: 2rem; font-weight: 700; margin: 0.5rem 0; }
.drc-pts span { font-size: 0.8rem; color: var(--muted); }
.drc-stats{ font-size: 0.75rem; color: var(--muted); display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* ============================================================ INTEL LIST */
.intel-list        { display: flex; flex-direction: column; gap: 0.5rem; }
.intel-date-divider{ font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; color: var(--muted); padding: 0.5rem 0 0.25rem; border-top: 1px solid var(--border); margin-top: 0.5rem; }
.intel-card        { display: flex; gap: 0.75rem; background: var(--surface); border: 1px solid var(--border); padding: 0.875rem; }
.intel-card.unread { background: rgba(168,180,154,0.03); }
.ic-indicator      { width: 28px; height: 28px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; flex-shrink: 0; }
.ic-body           { flex: 1; min-width: 0; }
.ic-header         { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.ic-title          { font-family: 'Rajdhani', sans-serif; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.05em; }
.ic-meta           { display: flex; gap: 0.6rem; font-size: 0.7rem; color: var(--muted); flex-wrap: wrap; align-items: center; }
.ic-message        { font-size: 0.82rem; color: var(--text2); line-height: 1.4; margin-bottom: 0.35rem; }
.ic-mission-link   { font-size: 0.78rem; color: var(--gold); text-decoration: none; }
.ic-mission-link:hover { text-decoration: underline; }
.unread-pip        { background: var(--gold); color: #0a0c12; font-size: 0.6rem; padding: 0.1rem 0.35rem; font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.1em; }

/* ============================================================ APPRAISAL / DOSSIER */
.appraisal-config .appraisal-form { padding: 1rem; }
.quick-periods .period-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.25rem; }

.dossier { display: flex; flex-direction: column; gap: 1rem; }
.dossier-header {
  background: var(--surface); border: 1px solid var(--border);
  padding: 1.5rem; position: relative; overflow: hidden;
}
.dossier-header::before {
  content: 'CLASSIFIED'; position: absolute;
  top: 50%; right: -2rem; transform: translateY(-50%) rotate(-30deg);
  font-family: 'Rajdhani', sans-serif; font-size: 4rem; font-weight: 900;
  letter-spacing: 0.2em; color: rgba(192,57,43,0.08); pointer-events: none;
}
.dossier-stamp {
  display: inline-block; border: 3px solid var(--red);
  color: var(--red); font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem; font-weight: 900; letter-spacing: 0.4em;
  padding: 0.15rem 0.75rem; transform: rotate(-2deg);
  margin-bottom: 1rem; opacity: 0.7;
}
.dossier-subject { display: flex; align-items: center; gap: 1rem; }
.dossier-avatar  { width: 56px; height: 56px; border-radius: 50%; background: var(--gold-dim); border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--gold); flex-shrink: 0; overflow: hidden; }
img.avatar-img.dossier-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; }
.dossier-name    { font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0.05em; }
.dossier-title   { font-size: 0.78rem; color: var(--muted); }
.dossier-period  { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--gold); margin-top: 0.2rem; }

.dossier-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 1rem; }
.kpi-card { background: var(--surface); border: 1px solid var(--border); padding: 1.25rem; }
.kpi-card.positive { border-top: 2px solid var(--green-bright); }
.kpi-card.negative { border-top: 2px solid var(--red); }
.kpi-card.warning  { border-top: 2px solid var(--amber); }
.kpi-val   { font-family: 'Rajdhani', sans-serif; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--text); }
.kpi-label { font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; color: var(--muted); margin-top: 0.2rem; }
.kpi-sub   { font-size: 0.72rem; color: var(--text2); margin-top: 0.25rem; }

.dossier-section { }
.dossier-charts-row { display: flex; gap: 1rem; align-items: flex-start; }
.dossier-chart-card { flex: 1 1 0; min-width: 0; }
.hotspot-chart-wrap { padding: 0 1rem 0.5rem; }
.hotspot-list { padding: 0 1rem 1rem; }
.hotspot-item { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.hs-category  { font-size: 0.78rem; min-width: 120px; color: var(--text2); }
.hs-bar-wrap  { flex: 1; background: var(--surface3); height: 8px; }
.hs-bar       { height: 100%; }
.hs-count     { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--muted); }
.merit-breakdown-chart { padding: 0 1rem 1rem; }
.qualitative-section .qualitative-text { padding: 1rem; font-size: 0.85rem; line-height: 1.7; color: var(--text2); border-left: 3px solid var(--gold); margin: 0 1rem 1rem; background: rgba(168,180,154,0.04); }

/* ── AI Summary Card ─────────────────────────────────────────── */
.ai-summary-card .card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ai-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #c9a84c;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
  text-transform: uppercase;
}
.ai-refresh-btn {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.08em;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.ai-refresh-btn:hover { opacity: 1; color: var(--gold); border-color: rgba(201,168,76,0.4); }

.ai-summary-body {
  padding: 1.1rem 1.25rem 0.5rem;
}
.ai-section-head {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 1rem 0 0.5rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(201,168,76,0.15);
}
.ai-section-head:first-child { margin-top: 0; }
.ai-para {
  font-size: 0.875rem;
  color: var(--text2);
  line-height: 1.75;
  margin: 0 0 0.5rem;
}
.ai-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ai-bullets li {
  font-size: 0.875rem;
  color: var(--text2);
  line-height: 1.65;
  padding-left: 0.5rem;
  border-left: 2px solid rgba(201,168,76,0.25);
}
.ai-bullets li strong { color: rgba(201,168,76,0.9); font-weight: 600; }
.ai-spacer { height: 0.4rem; }
.ai-footer {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  padding: 0.5rem 1.25rem 0.85rem;
  opacity: 0.6;
}
.ai-error-state {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: rgba(192,57,43,0.06);
  border-left: 3px solid rgba(192,57,43,0.4);
  margin: 0 1rem 0.75rem;
}
.ai-error-icon { font-size: 1rem; color: #c0392b; }
.ai-error-text { font-size: 0.8rem; color: var(--muted); }

.dossier-actions { display: flex; gap: 0.75rem; justify-content: flex-end; padding: 0.5rem 0; }

/* ============================================================ GANTT */
.gantt-container {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.gantt-wrap { overflow-x: auto; }
.gantt-inner {
  display: flex;
  flex-direction: column;
  min-width: 600px; /* overridden inline by PHP */
}

/* ── Header row ── */
.gantt-header-row {
  display: flex;
  position: sticky; top: 0; z-index: 20;
  background: var(--surface2);
  border-bottom: 2px solid var(--border);
}
.gantt-sidebar-hdr {
  width: 260px; min-width: 260px; flex-shrink: 0;
  padding: 0.6rem 1rem;
  font-family: 'Rajdhani', sans-serif; font-size: 0.65rem;
  letter-spacing: 0.2em; color: var(--muted);
  border-right: 1px solid var(--border);
  display: flex; align-items: center;
}

/* ── Chart column (shared by header + rows) ── */
.gantt-chart-col { flex: 1; position: relative; }
.gantt-hdr-area  { height: 40px; }
.gantt-row-area  { height: 52px; }

/* ── Week labels ── */
.gantt-week-label {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  padding-left: 5px;
  font-size: 0.62rem; color: var(--muted);
  font-family: 'Rajdhani', sans-serif; letter-spacing: 0.1em;
  white-space: nowrap; pointer-events: none;
}

/* ── Vertical grid lines ── */
.gantt-vgrid {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.05);
  pointer-events: none;
}
.gantt-vgrid--hdr { background: rgba(255,255,255,0.1); }

/* ── Today — header flag ── */
.gantt-today-hdr {
  position: absolute; top: 0; bottom: 0;
  width: 0;
  border-left: 2px solid var(--gold);
  z-index: 8;
}
.gantt-today-badge {
  position: absolute;
  top: 5px; left: 4px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em;
  color: #000;
  background: var(--gold);
  padding: 2px 6px;
  white-space: nowrap;
  border-radius: 1px;
}

/* ── Today — row line ── */
.gantt-today-line {
  position: absolute; top: 0; bottom: 0;
  width: 0;
  border-left: 2px solid var(--gold);
  z-index: 6;
  opacity: 0.75;
  pointer-events: none;
}

/* ── Data rows ── */
.gantt-row {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.1s;
}
.gantt-row:hover { background: rgba(255,255,255,0.01); }
.gantt-row:last-child { border-bottom: none; }
.gantt-row-sidebar {
  display: flex; align-items: center; gap: 0.5rem;
  width: 260px; min-width: 260px; flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.gantt-wf-dot   { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.gantt-row-info { min-width: 0; }
.gantt-row-title { font-size: 0.78rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gantt-row-title a { color: var(--text2); text-decoration: none; }
.gantt-row-title a:hover { color: var(--gold); }
.prereq-indicator { color: var(--muted); font-size: 0.7rem; margin-left: 0.25rem; }
.gantt-row-meta { font-size: 0.65rem; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── Bars ── */
.gantt-bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 22px; min-width: 4px; border-radius: 2px;
  display: flex; align-items: center; overflow: hidden;
  opacity: 0.88; transition: opacity 0.15s, transform 0.15s;
  z-index: 2;
}
.gantt-bar:hover { opacity: 1; transform: translateY(-50%) scaleY(1.1); cursor: default; }
.gantt-bar.overdue {
  opacity: 0.75;
  background-image: repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,0.25) 4px,rgba(0,0,0,0.25) 8px) !important;
}
.gantt-bar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; color: rgba(255,255,255,0.9);
  padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Final deadline marker (bold red) ── */
.gantt-marker-final {
  position: absolute; top: 0; bottom: 0;
  width: 0;
  border-left: 3px solid #c0392b;
  z-index: 7;
  pointer-events: none;
}
.gantt-marker-final::before {
  content: '';
  position: absolute; top: 0; left: -5px;
  width: 0; height: 0;
  border-left: 5px solid #c0392b;
  border-top: 5px solid #c0392b;
  border-right: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* ── Draft deadline marker (dashed amber) ── */
.gantt-marker-draft {
  position: absolute; top: 0; bottom: 0;
  width: 0;
  border-left: 2px dashed #d4951e;
  z-index: 6;
  pointer-events: none;
}

/* ── Deadline date labels ── */
.gantt-marker-label {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem;
  white-space: nowrap;
  padding: 1px 4px;
  border-radius: 1px;
  background: rgba(12,14,22,0.85);
}
.gantt-marker-label--final {
  bottom: 5px; left: 4px;
  color: #e74c3c;
  border: 1px solid rgba(192,57,43,0.4);
}
.gantt-marker-label--draft {
  top: 5px; left: 4px;
  color: #d4951e;
}

/* ── Legend ── */
.gantt-legend {
  display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface2);
}
.gl-item  { display: flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; color: var(--text2); }
.gl-dot   { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gl-line  { width: 14px; height: 2px; flex-shrink: 0; }
.gl-dash  { width: 14px; height: 0; border-top: 2px dashed currentColor; flex-shrink: 0; }
.gl-sep   { color: var(--border); font-size: 1rem; }

/* ============================================================ DAILY DEBRIEF */
.debrief-selector {
  display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;
  padding: 1rem 1.25rem;
}
.debrief-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap; gap: 0.75rem;
}
.debrief-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em;
}
.debrief-date { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }
.debrief-date-pill {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.debrief-date-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; color: var(--gold);
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  padding: 3px 10px; border-radius: 2px;
}

.debrief-stats {
  display: flex; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.debrief-stat {
  flex: 1; min-width: 90px;
  padding: 0.75rem 1rem;
  border-right: 1px solid var(--border);
  text-align: center;
}
.debrief-stat:last-child { border-right: none; }
.debrief-stat-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.7rem; font-weight: 700; display: block;
  line-height: 1;
}
.debrief-stat-label {
  font-size: 0.58rem; color: var(--muted);
  letter-spacing: 0.15em; margin-top: 3px; display: block;
}

.debrief-timeline { padding: 0.4rem 0; }
.debrief-entry {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.55rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.1s;
}
.debrief-entry:last-child { border-bottom: none; }
.debrief-entry:hover { background: rgba(255,255,255,0.02); }
.debrief-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; color: var(--muted);
  flex-shrink: 0; padding-top: 2px; min-width: 38px;
}
.debrief-icon { font-size: 0.72rem; flex-shrink: 0; padding-top: 2px; }
.debrief-body { min-width: 0; }
.debrief-action { font-size: 0.82rem; color: var(--text2); line-height: 1.4; }
.debrief-detail { font-size: 0.7rem; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.debrief-mission-link {
  font-size: 0.68rem; color: var(--gold);
  opacity: 0.8; margin-top: 3px; display: inline-block;
  text-decoration: none;
}
.debrief-mission-link:hover { opacity: 1; text-decoration: underline; }

/* ============================================================ WORK LOG */
.worklog-date-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}
.worklog-date-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem; color: var(--gold);
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.2);
  padding: 3px 10px; border-radius: 2px;
  display: inline-block;
}
.worklog-total-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.45rem 1rem;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  font-family: 'Rajdhani', sans-serif; font-size: 0.7rem;
  letter-spacing: 0.1em; color: var(--muted);
}
.worklog-total-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem; font-weight: 700; color: var(--gold);
}
.worklog-entry {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.1s;
}
.worklog-entry:last-child { border-bottom: none; }
.worklog-entry:hover { background: rgba(255,255,255,0.02); }
.worklog-cat-badge {
  font-size: 0.6rem; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 2px;
  font-family: 'Rajdhani', sans-serif; font-weight: 600;
  flex-shrink: 0; white-space: nowrap;
}
.worklog-hours {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem; font-weight: 700;
  flex-shrink: 0; min-width: 46px;
}
.worklog-notes {
  font-size: 0.8rem; color: var(--text2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.worklog-link {
  font-size: 0.68rem; color: var(--gold);
  opacity: 0.8; text-decoration: none; white-space: nowrap;
}
.worklog-link:hover { opacity: 1; text-decoration: underline; }
.worklog-time { font-size: 0.65rem; color: var(--muted); flex-shrink: 0; }
.mgmt-hours-note {
  font-size: 0.65rem; color: var(--muted);
  margin-top: 4px; display: block;
  font-style: italic;
}

/* ============================================================ FIRST MISSION BANNER */
.first-mission-banner {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 160px 1fr 140px; gap: 0;
  /* Photo background — image set via ::before so overlays stack cleanly */
  background: var(--surface);
  border: 1px solid rgba(168,180,154,0.45);
  border-top: 2px solid var(--gold);
  margin-bottom: 1.5rem;
  animation: fmEntrance 0.6s cubic-bezier(0.22,1,0.36,1) both;
  transition: opacity 0.4s, transform 0.4s;
  min-height: 140px;
}
/* The photo itself */
.first-mission-banner::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: url('../fm-bg.png');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  /* Darken + directional fade so text stays readable */
  -webkit-mask-image: linear-gradient(to right,
    rgba(0,0,0,0.0)  0%,
    rgba(0,0,0,0.55) 100%
  );
  mask-image: linear-gradient(to right,
    rgba(0,0,0,0.0)  0%,
    rgba(0,0,0,0.55) 100%
  );
}
/* Dark gradient overlay on top of photo */
.first-mission-banner::after {
  content: '';
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Heavy dark on left (text columns) fading to transparent right */
    linear-gradient(to right,
      rgba(25,28,24,0.92) 0%,
      rgba(25,28,24,0.78) 30%,
      rgba(25,28,24,0.45) 65%,
      rgba(25,28,24,0.62) 100%
    ),
    /* Subtle grid texture */
    repeating-linear-gradient(0deg, transparent, transparent 22px, rgba(168,180,154,0.03) 22px, rgba(168,180,154,0.03) 23px),
    repeating-linear-gradient(90deg, transparent, transparent 22px, rgba(168,180,154,0.03) 22px, rgba(168,180,154,0.03) 23px);
}
@keyframes fmEntrance {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Sweep scan line */
.fm-scanline {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(to bottom, transparent 0%, rgba(168,180,154,0.03) 50%, transparent 100%);
  background-size: 100% 80px;
  animation: fmScan 4s linear infinite;
}
@keyframes fmScan {
  0%   { background-position: 0 -80px; }
  100% { background-position: 0 200%; }
}

/* Corner targeting brackets */
.fm-corner {
  position: absolute; width: 14px; height: 14px; z-index: 4;
}
.fm-corner--tl { top: -1px; left: -1px;  border-top: 2px solid var(--gold); border-left:  2px solid var(--gold); }
.fm-corner--tr { top: -1px; right: -1px; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); }
.fm-corner--bl { bottom: -1px; left: -1px;  border-bottom: 2px solid var(--gold); border-left:  2px solid var(--gold); }
.fm-corner--br { bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold); }

/* LEFT — classification metadata */
.fm-left {
  position: relative; z-index: 5;
  padding: 1.2rem 1rem 1.2rem 1.25rem;
  border-right: 1px solid rgba(168,180,154,0.15);
  display: flex; flex-direction: column; gap: 0.45rem;
}
.fm-classification {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.18em; color: var(--gold);
  font-weight: 600;
}
.fm-code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; color: var(--muted); letter-spacing: 0.1em;
}
.fm-status-row {
  display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem;
}
.fm-status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); flex-shrink: 0;
  animation: fmDotBlink 1.4s ease-in-out infinite;
  box-shadow: 0 0 5px var(--gold);
}
@keyframes fmDotBlink {
  0%,100% { opacity: 1; } 50% { opacity: 0.2; }
}
.fm-status-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem; color: var(--muted); letter-spacing: 0.1em;
}
.fm-reward-badge {
  display: flex; align-items: baseline; gap: 0.3rem;
  margin-top: auto; padding-top: 0.75rem;
  border-top: 1px solid rgba(168,180,154,0.12);
}
.fm-reward-num {
  font-family: 'Rajdhani', sans-serif; font-size: 1.7rem;
  font-weight: 700; color: var(--gold); line-height: 1; letter-spacing: -0.02em;
}
.fm-reward-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.5rem; color: var(--muted); letter-spacing: 0.12em;
  line-height: 1.4; text-transform: uppercase;
}

/* CENTER — mission brief */
.fm-center {
  position: relative; z-index: 5;
  padding: 1.2rem 1.5rem;
  display: flex; flex-direction: column; justify-content: center;
}
.fm-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.22em; color: var(--gold);
  margin-bottom: 0.3rem;
}
.fm-heading {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.55rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text); line-height: 1; margin-bottom: 0.5rem;
}
.fm-divider {
  width: 32px; height: 2px; background: var(--gold);
  margin-bottom: 0.6rem;
  opacity: 0.6;
}
.fm-desc {
  font-size: 0.78rem; color: var(--text2); line-height: 1.55;
  max-width: 420px; margin-bottom: 1rem;
}
.fm-cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--gold); color: var(--bg);
  font-family: 'Rajdhani', sans-serif; font-size: 0.8rem;
  font-weight: 700; letter-spacing: 0.14em;
  padding: 0.5rem 1.1rem; text-decoration: none;
  border: none; cursor: pointer; width: fit-content;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.fm-cta:hover {
  background: var(--text);
  transform: translateX(2px);
  box-shadow: -3px 0 0 var(--gold);
}

/* RIGHT — avatar reticle */
.fm-right {
  position: relative; z-index: 5;
  padding: 1rem 1.25rem 1rem 1rem;
  border-left: 1px solid rgba(168,180,154,0.15);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
}
.fm-avatar-wrap {
  position: relative;
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.fm-ring {
  position: absolute; border-radius: 50%; border: 1px dashed rgba(168,180,154,0.35);
}
.fm-ring--outer {
  width: 72px; height: 72px;
  animation: fmSpin 12s linear infinite;
  border-color: rgba(168,180,154,0.3);
}
.fm-ring--inner {
  width: 54px; height: 54px;
  animation: fmSpin 8s linear infinite reverse;
  border-color: rgba(168,180,154,0.2);
}
@keyframes fmSpin { to { transform: rotate(360deg); } }
.fm-reticle-h, .fm-reticle-v {
  position: absolute; background: rgba(168,180,154,0.25);
  pointer-events: none;
}
.fm-reticle-h { width: 80px; height: 1px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.fm-reticle-v { width: 1px; height: 80px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
.fm-avatar-placeholder {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface2);
  border: 1px solid rgba(168,180,154,0.2);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative; z-index: 2;
}
.fm-silhouette { width: 32px; height: 32px; color: var(--muted); }
.fm-unknown {
  position: absolute; z-index: 3;
  font-family: 'Rajdhani', sans-serif; font-size: 1.1rem;
  font-weight: 700; color: var(--gold);
  animation: fmDotBlink 1.4s ease-in-out infinite;
}
.fm-avatar-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.48rem; letter-spacing: 0.12em;
  color: var(--muted); text-align: center; text-transform: uppercase;
}

/* Bonus flash popup */
.bonus-pop {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 9999;
  background: var(--surface); border: 1px solid var(--gold);
  border-top: 2px solid var(--gold);
  color: var(--gold); font-family: 'Rajdhani', sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.15em;
  padding: 0.75rem 1.25rem; border-radius: 0;
  opacity: 0; transform: translateY(12px);
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 32px rgba(0,0,0,0.5), -2px 0 0 var(--gold);
  pointer-events: none;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.bonus-pop--show { opacity: 1; transform: translateY(0); }

/* ============================================================ ONBOARDING TOUR */
.tour-box {
  position: fixed; z-index: 9001; width: 286px;
  background: var(--surface);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1rem 1.1rem 0.9rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(168,180,154,0.12);
  animation: tourBoxIn 0.22s ease;
  pointer-events: auto;
}
@keyframes tourBoxIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tour-step-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem; letter-spacing: 0.15em;
  color: var(--gold); margin-bottom: 0.35rem;
}
.tour-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--text); margin-bottom: 0.4rem;
}
.tour-body {
  font-size: 0.78rem; color: var(--text2);
  line-height: 1.55; margin-bottom: 0.85rem;
}
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.tour-dots { display: flex; gap: 5px; justify-content: center; margin-top: 0.6rem; }
.tour-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--border); transition: background 0.2s;
}
.tour-dot--active { background: var(--gold); }
.tour-highlight {
  position: relative; z-index: 9002 !important;
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px; border-radius: 3px;
  box-shadow: 0 0 0 4px rgba(168,180,154,0.14) !important;
  pointer-events: auto !important;
}
.tour-help-btn {
  opacity: 0.55; background: none; border: none;
  color: var(--text2); cursor: pointer; font-size: inherit;
  font-family: inherit; line-height: inherit;
}
.tour-help-btn:hover { opacity: 1; color: var(--gold); }

/* ============================================================ DATA TABLE */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 0.65rem 1rem; text-align: left; font-family: 'Rajdhani', sans-serif; font-size: 0.65rem; letter-spacing: 0.2em; color: var(--muted); border-bottom: 1px solid var(--border); background: var(--surface2); }
.data-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.92rem; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: rgba(255,255,255,0.01); }
.mono-cell  { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text2); }
.details-cell { font-size: 0.75rem; color: var(--muted); max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-td   { text-align: center; color: var(--muted); padding: 2rem !important; }

/* ============================================================ PAGINATION */
.pagination { display: flex; gap: 0.4rem; padding: 1rem 0; justify-content: center; }
.pg-btn     { padding: 0.35rem 0.75rem; border: 1px solid var(--border); color: var(--text2); text-decoration: none; font-family: 'Rajdhani', sans-serif; font-size: 0.8rem; }
.pg-btn:hover, .pg-btn.active { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }

/* ============================================================ PROFILE */
.profile-grid { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }
@media (max-width: 700px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-id-card { background: var(--surface); border: 1px solid var(--border); }
.pic-header { padding: 1.5rem 1rem; display: flex; align-items: flex-start; gap: 0.875rem; }
.pic-avatar { width: 56px; height: 56px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; background: rgba(168,180,154,0.1); flex-shrink: 0; overflow: hidden; }
.pic-name   { font-family: 'Rajdhani', sans-serif; font-size: 1.2rem; font-weight: 700; }
.pic-role   { font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; }
.pic-dept   { font-size: 0.7rem; color: var(--muted); }
.pic-title  { font-size: 0.72rem; color: var(--text2); margin-top: 0.2rem; }
.pic-stats  { display: flex; border-top: 1px solid var(--border); }
.pic-stat   { flex: 1; text-align: center; padding: 0.875rem 0.5rem; border-right: 1px solid var(--border); }
.pic-stat:last-child { border-right: none; }
.pic-stat-val   { display: block; font-family: 'Rajdhani', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1; }
.pic-stat-label { display: block; font-size: 0.62rem; letter-spacing: 0.1em; color: var(--muted); margin-top: 0.2rem; }

/* ============================================================ ADMIN */
.btn-xs-primary { color: var(--gold) !important; border-color: var(--gold) !important; background: rgba(168,180,154,0.08) !important; }
.inactive-row td { opacity: 0.55; }
.danger-zone { border-color: rgba(192,57,43,0.3) !important; padding: 1.25rem; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box { background: var(--surface); border: 1px solid var(--border); padding: 1.5rem; width: 100%; max-width: 400px; }
.modal-title { font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 0.5rem; }

/* ============================================================ CAMPAIGN GROUPING */
.campaign-group { margin-bottom: 2rem; }
.campaign-group-header {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 1rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  margin-bottom: 1rem;
}
.cg-icon { color: var(--gold); font-size: 1rem; }
.cg-name { font-family: 'Rajdhani', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0.1em; color: var(--text); flex: 1; }
.cg-count { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.05em; background: var(--surface); border: 1px solid var(--border); padding: 0.15rem 0.5rem; }

/* ============================================================ UTILITIES */
.wf-badge   { font-family: 'Rajdhani', sans-serif; }
.text-gold  { color: var(--gold); }
.text-red   { color: var(--red); }
.text-green { color: var(--green-bright); }
.font-mono  { font-family: 'JetBrains Mono', monospace; }
.font-raj   { font-family: 'Rajdhani', sans-serif; }
.hidden     { display: none !important; }

/* Scrollbar */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Print styles */
@media print {
  .sidebar, .topbar, .status-controls, .dossier-actions { display: none !important; }
  .main-content { margin-left: 0; }
  body { background: white; color: black; }
  .dossier-header::before { color: rgba(192,57,43,0.15); }
}

/* ============================================================ RESPONSIVE */

/* ── Sidebar overlay (mobile) ──────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 199;
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.3s;
}
.sidebar-overlay.active {
  display: block;
  opacity: 1;
}
body.sidebar-open { overflow: hidden; }

/* ── Hamburger button ──────────────────────────────────────── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid rgba(168,180,154,0.2);
  border-radius: 4px;
  cursor: pointer;
  padding: 7px 8px;
  flex-shrink: 0;
}
.hamburger-btn span {
  display: block;
  height: 2px;
  background: var(--text2);
  border-radius: 1px;
  transition: transform 0.25s, opacity 0.25s;
}
.sidebar-open .hamburger-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sidebar-open .hamburger-btn span:nth-child(2) { opacity: 0; }
.sidebar-open .hamburger-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Main responsive breakpoints ──────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* Sidebar — fixed width on mobile, slides in over content */
  .sidebar {
    width: 260px !important;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
    z-index: 200;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 32px rgba(0,0,0,0.6);
  }
  .hamburger-btn { display: flex; }

  /* Layout */
  .main-content { margin-left: 0; }
  .page-body { padding: 1rem 0.85rem 2rem; }

  /* Topbar */
  .topbar { padding: 0 0.85rem; gap: 0.5rem; }
  .topbar-left { gap: 0.6rem; }
  .topbar-time { display: none; }
  .notif-text { display: none; }
  .topbar-intel-btn { padding: 0.35rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.05em; }

  /* Section header */
  .section-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .view-toggle { width: 100%; }
  .view-toggle .toggle-btn { flex: 1; text-align: center; font-size: 0.7rem; padding: 0.4rem 0.5rem; }

  /* Dashboard grids */
  .dashboard-grid { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .briefing-row { flex-direction: column; gap: 0.75rem; }
  .briefing-card { min-width: 0; }

  /* KPI grid */
  .dossier-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 0.6rem; }

  /* Charts */
  .dossier-charts-row { flex-direction: column; }
  .gantt-wrap { min-width: 100%; overflow-x: auto; }

  /* Leaderboard */
  .lb-hero-row { flex-direction: column; }
  .podium-col { flex: unset; }
  .lb-hero-row .podium-wrap { flex: unset; }
  .prize-banner { flex: unset; }
  .podium-slot { max-width: 120px; }
  .podium-avatar { width: 52px !important; height: 52px !important; }
  img.avatar-img.podium-avatar { width: 52px !important; height: 52px !important; }
  img.avatar-img.podium-avatar.podium-avatar-1 { width: 70px !important; height: 70px !important; }
  .arena-stats-row { gap: 0; }
  .my-rank-banner .mrb-inner { flex-direction: column; gap: 0.75rem; }
  .mrb-chart-wrap { display: none; }

  /* Tables */
  .leaderboard-table th:nth-child(3),
  .leaderboard-table td:nth-child(3) { display: none; }
  .leaderboard-table th:nth-child(7),
  .leaderboard-table td:nth-child(7) { display: none; }

  /* Forms */
  .form-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .appraisal-form .form-grid { grid-template-columns: 1fr; }
  .period-btns { flex-wrap: wrap; }

  /* Mission view */
  .mission-view-grid { grid-template-columns: 1fr; }

  /* Cards */
  .card { border-radius: 4px; }
  .card-header { padding: 0.85rem 1rem; }

  /* Hall of fame */
  .hof-grid { grid-template-columns: repeat(2, 1fr); }

  /* My rank banner */
  .mrb-ranks { gap: 0.75rem; }
  .mrb-rank { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .page-body { padding: 0.75rem 0.65rem 2rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .stat-card { padding: 0.85rem 0.75rem; }
  .stat-value { font-size: 1.6rem; }
  .dossier-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .kpi-val { font-size: 1.5rem !important; }
  .hof-grid { grid-template-columns: 1fr; }
  .pb-number { font-size: 2.6rem; }
  .podium-wrap { gap: 0; }
  .podium-block-1 { height: 80px !important; }
  .podium-block-2 { height: 55px !important; }
  .podium-block-3 { height: 40px !important; }
  .section-title { font-size: 1.2rem; }
  .week-badge { font-size: 0.6rem; }
  .briefing-row { gap: 0.6rem; }
  .mrb-ranks { flex-wrap: wrap; justify-content: center; }
  .mrb-rank-divider { display: none; }
  .leaderboard-table { font-size: 0.78rem; }
  .leaderboard-table th, .leaderboard-table td { padding: 0.55rem 0.5rem; }
}

/* ============================================================
   JEON — ENHANCED UI v2
   Tactical depth, micro-interactions & motion design
   ============================================================ */

/* ---------- Tactical grid background texture ---------- */
body {
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 39px, rgba(168,180,154,0.022) 39px, rgba(168,180,154,0.022) 40px),
    repeating-linear-gradient(90deg,  transparent, transparent 39px, rgba(168,180,154,0.022) 39px, rgba(168,180,154,0.022) 40px);
}

/* ---------- Sidebar depth & brand glow ---------- */
.sidebar {
  box-shadow: 2px 0 24px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, #252c22 0%, var(--surface) 60%);
}

.brand-logo {
  animation: brandGlow 4s ease-in-out infinite;
}
@keyframes brandGlow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(168,180,154,0.25)); }
  50%       { filter: drop-shadow(0 0 14px rgba(168,180,154,0.65)); }
}

/* Enhanced active nav link */
.nav-link {
  transition: color 0.18s ease, background 0.18s ease, border-left-color 0.18s ease;
}
.nav-link.active .nav-icon {
  filter: drop-shadow(0 0 5px rgba(168,180,154,0.5));
}
.nav-link.active {
  text-shadow: 0 0 16px rgba(168,180,154,0.18);
}

/* ---------- Topbar depth ---------- */
.topbar {
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,0.25);
}
.topbar-time {
  font-variant-numeric: tabular-nums;
}
.topbar-intel-btn {
  transition: all 0.18s ease;
}
.topbar-intel-btn:hover {
  box-shadow: 0 0 10px rgba(168,180,154,0.12);
}

/* ---------- Card hover elevation ---------- */
.card {
  transition: box-shadow 0.22s ease;
}
.card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,0.22);
}
.card::before {
  transition: opacity 0.22s ease;
  background: linear-gradient(90deg, var(--gold) 0%, rgba(168,180,154,0.25) 40%, transparent 70%);
  opacity: 0.35;
}
.card:hover::before {
  opacity: 0.75;
}

/* ---------- Stat card: stagger entry + hover lift ---------- */
@keyframes statFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stat-grid .stat-card {
  animation: statFadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
.stat-grid .stat-card:nth-child(1) { animation-delay: 0.04s; }
.stat-grid .stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-grid .stat-card:nth-child(3) { animation-delay: 0.16s; }
.stat-grid .stat-card:nth-child(4) { animation-delay: 0.22s; }
.stat-grid .stat-card:nth-child(5) { animation-delay: 0.28s; }
.stat-grid .stat-card:nth-child(6) { animation-delay: 0.34s; }
.stat-grid .stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28), 0 0 0 1px rgba(168,180,154,0.07);
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent 60%);
  opacity: 0.3;
}

/* ---------- Mission card hover ---------- */
.mission-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}
.mission-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.22);
}

/* ---------- Operation card hover ---------- */
.op-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.op-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
  border-color: var(--border2);
}

/* ---------- Capacity card hover ---------- */
.cap-card {
  transition: box-shadow 0.2s ease;
}
.cap-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}

/* ---------- Primary button: glow & lift ---------- */
.btn-primary {
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.btn-primary:hover {
  box-shadow: 0 4px 18px rgba(168,180,154,0.22);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Ghost button refinements */
.btn-ghost:hover {
  background: rgba(255,255,255,0.02);
}
.btn-ghost-sm:hover {
  box-shadow: 0 0 8px rgba(168,180,154,0.08);
}
.toggle-btn.active {
  box-shadow: inset 0 0 8px rgba(0,0,0,0.15);
}

/* ---------- Input focus glow ---------- */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(168,180,154,0.1), 0 0 10px rgba(168,180,154,0.06);
}

/* ---------- Modal: backdrop blur + slide-in ---------- */
.modal-overlay {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.62);
}
.modal-box {
  box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(168,180,154,0.08);
  animation: modalSlideIn 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: scale(0.95) translateY(-8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ---------- Capacity bar shimmer ---------- */
.msb-fill,
.cap-bar-fill {
  position: relative;
  overflow: hidden;
}
.msb-fill::after,
.cap-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.22) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: capShimmer 3s ease-in-out infinite;
  animation-delay: 0.8s;
}
@keyframes capShimmer {
  0%, 40%  { transform: translateX(-100%); }
  70%, 100%{ transform: translateX(100%); }
}

/* ---------- Alert fade-in ---------- */
.alert-box {
  animation: alertFadeIn 0.28s ease;
}
@keyframes alertFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Section title gradient underline ---------- */
.section-title::after {
  background: linear-gradient(90deg, var(--gold) 0%, transparent 85%);
  opacity: 0.85;
  height: 2px;
  width: 3rem;
}

/* ---------- Unread intel card left accent ---------- */
.intel-card.unread {
  border-left: 2px solid rgba(168,180,154,0.45);
}

/* ---------- Nav badge pulse ring ---------- */
.nav-badge {
  animation: badgeRing 2.5s ease-in-out infinite;
}
@keyframes badgeRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(176,51,40,0.45); }
  50%       { box-shadow: 0 0 0 4px rgba(176,51,40,0); }
}

/* ---------- Empty state float ---------- */
.empty-icon {
  animation: emptyFloat 3.5s ease-in-out infinite;
}
@keyframes emptyFloat {
  0%, 100% { opacity: 0.35; transform: translateY(0px); }
  50%       { opacity: 0.6;  transform: translateY(-5px); }
}

/* ---------- Rank-1 gold aura ---------- */
.rank-medal.rank-1  { text-shadow: 0 0 12px rgba(168,180,154,0.55); }
.rank-num.gold      { text-shadow: 0 0 10px rgba(168,180,154,0.5); }
.op-avatar.rank-1   { box-shadow: 0 0 10px rgba(168,180,154,0.2); }

/* ---------- My rank banner sheen sweep ---------- */
.my-rank-banner {
  background: linear-gradient(135deg, var(--surface) 0%, rgba(168,180,154,0.04) 55%, var(--surface) 100%);
  position: relative;
  overflow: hidden;
}
.my-rank-banner::after {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(168,180,154,0.05), transparent);
  animation: bannerSheen 7s linear infinite;
  pointer-events: none;
}
@keyframes bannerSheen {
  from { left: -50%; }
  to   { left: 150%; }
}

/* ---------- Dossier classified text subtle breathe ---------- */
.dossier-header::before {
  animation: classifiedBreathe 7s ease-in-out infinite;
}
@keyframes classifiedBreathe {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

/* ---------- KPI card hover ---------- */
.kpi-card {
  transition: box-shadow 0.2s ease;
}
.kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.22);
}

/* ---------- Profile ID card depth ---------- */
.profile-id-card {
  background: linear-gradient(165deg, var(--surface) 0%, rgba(36,43,33,0.96) 100%);
}

/* ---------- Leaderboard dept rank card hover ---------- */
.dept-rank-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.dept-rank-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

/* ---------- Filter chip active glow ---------- */
.filter-chip {
  transition: all 0.15s ease;
}
.filter-chip:hover,
.filter-chip.active {
  box-shadow: 0 0 8px rgba(168,180,154,0.08);
}

/* ---------- Data table row transitions ---------- */
.data-table tbody tr {
  transition: background 0.12s ease;
}
.data-table tbody tr:hover td {
  background: rgba(168,180,154,0.025);
}

/* ---------- Scrollbar refinement ---------- */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(70,80,63,0.55); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ============================================================ PODIUM */
/* ============================================================
   PODIUM v2 — Championship Stage
   ============================================================ */

/* ── Keyframes ── */
@keyframes podiumCrownFloat {
  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 0 12px rgba(201,168,76,0.65)); }
  50%       { transform: translateY(-6px); filter: drop-shadow(0 0 24px rgba(201,168,76,1)); }
}
@keyframes podiumCrownDrop {
  from { transform: translateY(-28px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes crownSparkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50%       { opacity: 1; transform: scale(1.1) rotate(180deg); }
}
@keyframes ringShimmer {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}
@keyframes podiumBlockRise {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to   { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}
@keyframes podiumAvatarPop {
  0%   { transform: scale(0) translateY(16px); opacity: 0; }
  65%  { transform: scale(1.1) translateY(-3px); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
@keyframes podiumGlow {
  0%, 100% { box-shadow: 0 8px 0 -1px #141710, 0 14px 32px rgba(0,0,0,0.5), 0 0 0 rgba(201,168,76,0); }
  50%       { box-shadow: 0 8px 0 -1px #141710, 0 14px 32px rgba(0,0,0,0.5), 0 0 28px 2px rgba(201,168,76,0.1); }
}

/* ── Container ── */
.podium-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  margin-bottom: 1.5rem;
  padding: 2.5rem 0.5rem 0;
  position: relative;
  background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(201,168,76,0.06) 0%, transparent 70%);
}
/* Ground line */
.podium-wrap::after {
  content: '';
  position: absolute;
  bottom: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,180,154,0.18) 30%, rgba(168,180,154,0.18) 70%, transparent);
}

/* ── Slot ── */
.podium-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 170px;
  position: relative;
  z-index: 1;
}

/* ── Spotlight cone (1st place only) ── */
.podium-spotlight {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 160px;
  height: 105%;
  background: linear-gradient(180deg, rgba(201,168,76,0.13) 0%, rgba(201,168,76,0.03) 55%, transparent 100%);
  clip-path: polygon(32% 0%, 68% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  z-index: 0;
}

/* ── Crown ── */
.podium-crown {
  font-size: 2.6rem;
  color: #c9a84c;
  line-height: 1;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 2;
  animation:
    podiumCrownDrop  0.55s cubic-bezier(0.34,1.56,0.64,1) 0.1s both,
    podiumCrownFloat 3s   ease-in-out 0.7s infinite;
}
.podium-crown::before {
  content: '✦';
  position: absolute;
  top: -5px; right: -16px;
  font-size: 0.65rem;
  color: #c9a84c;
  animation: crownSparkle 2.4s ease-in-out 0.5s infinite;
}
.podium-crown::after {
  content: '✦';
  position: absolute;
  top: -2px; left: -16px;
  font-size: 0.5rem;
  color: #e0c060;
  animation: crownSparkle 2.4s ease-in-out 1.2s infinite;
}

/* ── Avatar ring ── */
.podium-avatar-ring {
  border-radius: 50%;
  margin-bottom: 0.55rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.podium-ring-1 {
  padding: 4px;
  background: linear-gradient(90deg, #c9a84c 0%, #f5e07a 22%, #a8b49a 44%, #f5e07a 66%, #c9a84c 88%, #f5e07a 100%);
  background-size: 250% 100%;
  box-shadow: 0 0 22px rgba(201,168,76,0.45), 0 0 48px rgba(201,168,76,0.15);
  animation: podiumAvatarPop 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.05s both,
             ringShimmer 2.8s linear 0.7s infinite;
}
.podium-ring-2 {
  padding: 3px;
  background: linear-gradient(90deg, #6a7080 0%, #c8cedd 30%, #9aa0b8 55%, #c8cedd 75%, #6a7080 100%);
  background-size: 250% 100%;
  box-shadow: 0 0 14px rgba(154,160,184,0.3);
  animation: podiumAvatarPop 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.18s both,
             ringShimmer 4s linear 1.1s infinite;
}
.podium-ring-3 {
  padding: 3px;
  background: linear-gradient(90deg, #7a4e18 0%, #e8a94e 30%, #cd7f32 55%, #e8a94e 75%, #7a4e18 100%);
  background-size: 250% 100%;
  box-shadow: 0 0 14px rgba(205,127,50,0.25);
  animation: podiumAvatarPop 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.3s both,
             ringShimmer 4.5s linear 1.3s infinite;
}

/* ── Avatar ── */
.podium-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: var(--surface2);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.1rem;
  color: var(--text2);
  overflow: hidden; object-fit: cover; flex-shrink: 0;
}
.podium-avatar.podium-avatar-1 {
  width: 88px; height: 88px;
  font-size: 1.6rem;
  color: #c9a84c;
}
img.avatar-img.podium-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--bg); }
img.avatar-img.podium-avatar.podium-avatar-1 { width: 88px; height: 88px; }

/* ── Name ── */
.podium-name {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.88rem; font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text);
  text-align: center;
  max-width: 130px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; z-index: 2;
}
.podium-name-1 {
  font-size: 1.05rem;
  color: #ead88a;
  letter-spacing: 0.08em;
  max-width: 152px;
}

/* ── Dept tag ── */
.podium-dept {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-top: 0.1rem;
  position: relative; z-index: 2;
}
.podium-dept-1 { color: rgba(201,168,76,0.55); }

/* ── Points pill ── */
.podium-pts {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem; font-weight: 600;
  color: var(--muted);
  margin: 0.25rem 0 0.7rem;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.2);
  letter-spacing: 0.04em;
  position: relative; z-index: 2;
}
.podium-pts span { font-weight: 400; font-size: 0.68rem; opacity: 0.7; }
.podium-pts-1 {
  color: #c9a84c;
  border-color: rgba(201,168,76,0.4);
  background: rgba(201,168,76,0.08);
  font-size: 0.82rem;
}

/* ── Platform blocks — 3D depth ── */
.podium-block {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 2;
}
/* Top-edge sheen on all blocks */
.podium-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}
/* Reflective floor line below each block */
.podium-block::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 15%; right: 15%; height: 1px;
  opacity: 0.3;
}
.podium-block-1 {
  height: 92px;
  background: linear-gradient(180deg, #38402c 0%, #282e20 55%, #1e2219 100%);
  border: 1px solid rgba(201,168,76,0.38);
  border-bottom: 3px solid #c9a84c;
  box-shadow: 0 9px 0 -1px #12150e, 0 16px 32px rgba(0,0,0,0.55),
              inset 0 0 24px rgba(201,168,76,0.04);
  animation: podiumBlockRise 0.45s cubic-bezier(0.22,1,0.36,1) 0.35s both,
             podiumGlow 3.2s ease-in-out 0.8s infinite;
}
.podium-block-1::after { background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent); }
.podium-block-2 {
  height: 64px;
  background: linear-gradient(180deg, #2a2e38 0%, #1e2128 100%);
  border: 1px solid rgba(154,160,184,0.3);
  border-bottom: 3px solid #7a8396;
  box-shadow: 0 7px 0 -1px #12141a, 0 12px 26px rgba(0,0,0,0.45);
  animation: podiumBlockRise 0.45s cubic-bezier(0.22,1,0.36,1) 0.18s both;
}
.podium-block-2::after { background: linear-gradient(90deg, transparent, rgba(154,160,184,0.35), transparent); }
.podium-block-3 {
  height: 46px;
  background: linear-gradient(180deg, #302519 0%, #221a10 100%);
  border: 1px solid rgba(205,127,50,0.3);
  border-bottom: 3px solid #9b5e1e;
  box-shadow: 0 6px 0 -1px #120e08, 0 10px 22px rgba(0,0,0,0.45);
  animation: podiumBlockRise 0.45s cubic-bezier(0.22,1,0.36,1) 0.48s both;
}
.podium-block-3::after { background: linear-gradient(90deg, transparent, rgba(205,127,50,0.35), transparent); }

.podium-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.9rem; font-weight: 700; line-height: 1;
}
.podium-block-1 .podium-num { color: #c9a84c; }
.podium-block-2 .podium-num { color: #9aa0b8; opacity: 0.9; }
.podium-block-3 .podium-num { color: #cd7f32; opacity: 0.9; }

/* ============================================================ RANK STARS */
.cap-card-name {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.rank-stars {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  line-height: 1;
}

/* Individual star */
.star {
  font-size: 0.72rem;
  line-height: 1;
  display: inline-block;
}
.star-full  { color: var(--gold); filter: drop-shadow(0 0 3px rgba(168,180,154,0.45)); }
.star-empty { color: rgba(168,180,154,0.18); }

/* Half-star: empty base + clipped gold overlay */
.star-wrap {
  position: relative;
  display: inline-block;
  line-height: 1;
}
.star-wrap .star-empty {
  display: block;
  color: rgba(168,180,154,0.18);
}
.star-wrap .star-half-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 55%;        /* slightly > 50% covers the centre stroke */
  overflow: hidden;
  white-space: nowrap;
  color: var(--gold);
  filter: drop-shadow(0 0 3px rgba(168,180,154,0.45));
}

/* Cap card avatar: circular photo */
img.avatar-img.cap-avatar-lg {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* ============================================================
   DAILY BRIEFING ROW  —  v2 Tactical Terminal Design
   ============================================================ */

/* ── Entrance animations ── */
@keyframes briefing-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes radar-ring {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0.6; }
  100% { transform: translate(-50%,-50%) scale(2.2); opacity: 0; }
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
@keyframes chase-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); border-color: rgba(201,168,76,0.35); }
  50%     { box-shadow: 0 0 18px 2px rgba(201,168,76,0.12); border-color: rgba(201,168,76,0.75); }
}
@keyframes bar-grow {
  from { width: 0 !important; }
}
@keyframes ai-dot-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(0.7); }
}

.briefing-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: stretch;
}

/* Base card shell */
.briefing-card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.2rem 1rem;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  animation: briefing-rise 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.briefing-card:nth-child(1) { animation-delay: 0.05s; }
.briefing-card:nth-child(2) { animation-delay: 0.14s; }
.briefing-card:nth-child(3) { animation-delay: 0.23s; }

/* Top accent bar */
.briefing-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-accent, rgba(168,180,154,0.3));
  transition: background 0.3s;
}
.briefing-card:hover::after {
  background: var(--card-accent-hover, rgba(168,180,154,0.6));
}

/* Shared label */
.bcard-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--muted);
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.bcard-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}

/* ════════════════════════════════════════
   WEATHER CARD
   ════════════════════════════════════════ */
.weather-card {
  --card-accent: rgba(74,160,134,0.5);
  --card-accent-hover: rgba(74,160,134,0.9);
  flex: 0 0 220px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(74,160,134,0.07) 0%, transparent 70%),
    linear-gradient(160deg, #172220 0%, #191c18 100%);
  border-color: rgba(74,160,134,0.2);
}

/* Radar ring behind icon */
.wx-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.5rem;
  flex-shrink: 0;
}
.wx-pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(74,160,134,0.4);
  animation: radar-ring 3s ease-out infinite;
}
.wx-pulse-ring::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(74,160,134,0.25);
  animation: radar-ring 3s ease-out 1s infinite;
  transform: translate(-50%,-50%);
}
.wx-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(74,160,134,0.45));
}

.wx-temp-row {
  text-align: center;
  margin-bottom: 0.75rem;
}
.wx-temp {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: #7ecfb8;
  line-height: 1;
  letter-spacing: -0.02em;
}
.wx-temp span {
  font-size: 1.1rem;
  color: var(--muted);
  font-weight: 400;
}
.wx-desc {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

.wx-data-row {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(74,160,134,0.12);
  background: rgba(0,0,0,0.15);
}
.wx-data-item {
  flex: 1;
  padding: 0.4rem 0.6rem;
}
.wx-data-sep {
  width: 1px;
  align-self: stretch;
  background: rgba(74,160,134,0.15);
}
.wx-data-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}
.wx-data-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin: 0.1rem 0 0.35rem;
}
.wx-bar {
  height: 3px;
  background: rgba(168,180,154,0.1);
  overflow: hidden;
}
.wx-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(74,160,134,0.5), rgba(74,160,134,0.9));
  animation: bar-grow 1s cubic-bezier(0.22,1,0.36,1) 0.4s both;
}
.wx-bar-wind .wx-bar-fill {
  background: linear-gradient(90deg, rgba(168,180,154,0.4), rgba(168,180,154,0.7));
}

.wx-city {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(74,160,134,0.1);
  letter-spacing: 0.05em;
}
.wx-offline { color: var(--muted); font-size: 0.82rem; margin: auto 0; }

/* ════════════════════════════════════════
   DAILY QUOTE CARD
   ════════════════════════════════════════ */
.quote-card {
  --card-accent: rgba(168,180,154,0.4);
  --card-accent-hover: rgba(168,180,154,0.8);
  flex: 1.5;
  background: #191c18;
  border-color: rgba(168,180,154,0.18);
}
.quote-card--urgent {
  border-color: rgba(176,51,40,0.5) !important;
  border-top: 2px solid #b03328 !important;
}
.quote-card--urgent .quote-accent-line { background: #b03328; }
.quote-card--urgent .bcard-label { color: #b03328; }
.quote-card--urgent .quote-pulse-dot { background: #b03328; box-shadow: 0 0 5px #b03328; }
.quote-card--threat {
  border-color: rgba(184,137,26,0.5) !important;
  border-top: 2px solid var(--amber) !important;
}
.quote-card--threat .quote-accent-line { background: var(--amber); }
.quote-card--threat .bcard-label { color: var(--amber); }
.quote-card--threat .quote-pulse-dot { background: var(--amber); box-shadow: 0 0 5px var(--amber); }

/* Diagonal hatch texture */
.quote-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 18px,
    rgba(168,180,154,0.018) 18px,
    rgba(168,180,154,0.018) 19px
  );
  pointer-events: none;
}

/* Ghost watermark */
.quote-watermark {
  position: absolute;
  bottom: 0.6rem;
  right: 0.8rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  color: rgba(168,180,154,0.06);
  transform: rotate(-90deg);
  transform-origin: bottom right;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.quote-accent-line {
  width: 28px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 0.9rem;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.quote-accent-line::after {
  content: '';
  position: absolute;
  left: 32px;
  top: 0;
  width: 6px;
  height: 2px;
  background: var(--gold);
  opacity: 0.4;
}

blockquote.quote-text {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: 0.015em;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  flex: 1;
  position: relative;
  z-index: 1;
}

/* Blinking cursor */
.quote-cursor {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  background: var(--gold);
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: cursor-blink 1.1s step-end infinite;
}

.quote-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(168,180,154,0.08);
  position: relative;
  z-index: 1;
}
.quote-pulse-dot {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  animation: ai-dot-pulse 2s ease-in-out infinite;
}
.quote-ai-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}

/* ════════════════════════════════════════
   PERFORMANCE INTEL CARD  (staff)
   ════════════════════════════════════════ */
.perf-card {
  flex: 1.2;
  position: relative;
}

/* Ghost rank typographic background */
.perf-ghost-rank {
  position: absolute;
  bottom: -0.2rem;
  right: -0.1rem;
  font-family: 'Rajdhani', sans-serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.04em;
}

/* Motivate state */
.perf-card--motivate {
  --card-accent: rgba(74,112,64,0.5);
  --card-accent-hover: rgba(74,112,64,0.9);
  background:
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(74,112,64,0.07) 0%, transparent 60%),
    linear-gradient(150deg, #191c18 0%, #1a1e18 100%);
  border-color: rgba(74,112,64,0.3);
}
.perf-card--motivate .perf-ghost-rank { color: rgba(74,112,64,0.07); }

/* Chase state */
.perf-card--chase {
  --card-accent: rgba(201,168,76,0.6);
  --card-accent-hover: rgba(201,168,76,1);
  background:
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(201,168,76,0.06) 0%, transparent 60%),
    linear-gradient(150deg, #1c1a14 0%, #1e1b14 100%);
  border-color: rgba(201,168,76,0.35);
  animation: chase-pulse 2.4s ease-in-out infinite;
}
.perf-card--chase .perf-ghost-rank { color: rgba(201,168,76,0.07); }

/* Command state (manager) */
.perf-card--command {
  --card-accent: rgba(41,128,185,0.5);
  --card-accent-hover: rgba(41,128,185,0.9);
  background:
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(41,128,185,0.06) 0%, transparent 60%),
    linear-gradient(150deg, #171a20 0%, #181b22 100%);
  border-color: rgba(41,128,185,0.25);
}

/* Stat row */
.perf-main-stat {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
  position: relative;
  z-index: 1;
}
.perf-rank-num {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  letter-spacing: -0.02em;
}
.perf-card--chase  .perf-rank-num { color: #c9a84c; }
.perf-card--motivate .perf-rank-num { color: #7abd78; }
.perf-rank-meta { line-height: 1.3; }
.perf-rank-of {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.perf-pts {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text2);
}
.perf-pts span { font-size: 0.72rem; color: var(--muted); font-weight: 400; }

/* Rank position dot track */
.perf-track {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.65rem;
  position: relative;
  z-index: 1;
}
.perf-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(168,180,154,0.12);
  border: 1px solid rgba(168,180,154,0.18);
  flex-shrink: 0;
  transition: background 0.2s;
}
.perf-dot--active {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 5px rgba(168,180,154,0.3);
}
.perf-card--chase  .perf-dot--active { background: #c9a84c; border-color: #c9a84c; box-shadow: 0 0 5px rgba(201,168,76,0.3); }
.perf-card--motivate .perf-dot--active { background: #7abd78; border-color: #7abd78; box-shadow: 0 0 5px rgba(122,189,120,0.3); }
.perf-track-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-left: 4px;
}

.perf-msg {
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.6;
  font-style: italic;
  flex: 1;
  position: relative;
  z-index: 1;
}

.perf-chaser {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding: 0.4rem 0.6rem;
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.18);
  font-size: 0.74rem;
  position: relative;
  z-index: 1;
}
.perf-chaser-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: #c9a84c;
  letter-spacing: 0.05em;
}
.perf-chaser-gap { color: var(--muted); }
.perf-chaser-icon { opacity: 0.7; }

/* ════════════════════════════════════════
   COMMAND BRIEF  (manager)
   ════════════════════════════════════════ */
.cmd-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-bottom: 0.75rem;
  border: 1px solid rgba(41,128,185,0.15);
  background: rgba(0,0,0,0.15);
  position: relative;
  z-index: 1;
}
.cmd-stat {
  text-align: center;
  padding: 0.5rem 0.4rem;
  border-right: 1px solid rgba(41,128,185,0.12);
}
.cmd-stat:last-child { border-right: none; }
.cmd-stat-val {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: #5babd4;
  line-height: 1;
}
.cmd-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.56rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-top: 0.2rem;
  line-height: 1.4;
}
.cmd-perf-msg {
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.6;
  font-style: italic;
  position: relative;
  z-index: 1;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .briefing-row { flex-wrap: wrap; }
  .weather-card { flex: 0 0 100%; flex-direction: row; align-items: center; gap: 1.5rem; }
  .wx-icon-wrap { margin: 0; }
  .wx-temp-row { text-align: left; flex: 1; }
  .quote-card, .perf-card { flex: 1 1 calc(50% - 0.5rem); }
}
@media (max-width: 600px) {
  .briefing-row { flex-direction: column; }
  .weather-card { flex: 1 1 100%; flex-direction: column; }
  .wx-temp-row { text-align: center; }
  .quote-card, .perf-card { flex: 1 1 100%; }
}

/* ============================================================
   LEADERBOARD REDESIGN — Championship Hall meets Tactical Ops
   ============================================================ */

/* ── Week header elements ──────────────────────────────────── */
.week-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.7rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #c9a84c;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 20px;
  padding: 0.15rem 0.65rem 0.15rem 0.5rem;
  margin-left: 0.75rem;
  vertical-align: middle;
  background: rgba(201,168,76,0.07);
}
.week-badge-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c9a84c;
  animation: lb-dot-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes lb-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
.week-dates {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.weekly-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.25rem;
}
.cd-unit {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: #c9a84c;
}
.cd-unit small {
  font-size: 0.62rem;
  color: var(--muted);
  font-weight: 400;
  font-family: 'JetBrains Mono', monospace;
}
.cd-sep {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0.05rem;
  line-height: 1;
  align-self: center;
}

/* ── Hero row ──────────────────────────────────────────────── */
.lb-hero-row {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  margin-bottom: 1.75rem;
}
/* Podium column — wraps arena bar + podium stages */
.podium-col {
  flex: 1.2;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.lb-hero-row .podium-wrap {
  flex: unset;
  margin-bottom: 0;
}

/* ── Arena bar (stats + challengers) ──────────────────────── */
.podium-arena-bar {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 18px,
      rgba(168,180,154,0.025) 18px,
      rgba(168,180,154,0.025) 19px
    ),
    linear-gradient(180deg, rgba(10,12,8,0.6) 0%, rgba(14,18,12,0.4) 100%);
  border: 1px solid rgba(168,180,154,0.12);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  padding: 0.85rem 1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Stats row */
.arena-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
}
.arena-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.arena-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.15rem;
  font-weight: 700;
  color: #a8b49a;
  line-height: 1;
}
.arena-stat-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.arena-stat-divider {
  width: 1px;
  height: 28px;
  background: rgba(168,180,154,0.15);
  flex-shrink: 0;
}

/* Challengers header */
.challengers-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(168,180,154,0.1);
}
.challengers-label {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: rgba(168,180,154,0.7);
  text-transform: uppercase;
}
.challengers-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.55rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}

/* Challengers list */
.challengers-list {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
@keyframes challengerSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.challenger-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  animation: challengerSlide 0.35s ease both;
}
.challenger-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  width: 1.1rem;
  text-align: right;
  flex-shrink: 0;
  opacity: 0.7;
}
.challenger-avatar {
  flex-shrink: 0;
}
.challenger-av {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  font-size: 0.6rem !important;
  line-height: 26px !important;
}
img.avatar-img.challenger-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(168,180,154,0.25);
}
.challenger-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.challenger-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text2);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.challenger-bar-wrap {
  height: 2px;
  background: rgba(168,180,154,0.1);
  border-radius: 1px;
  overflow: hidden;
}
.challenger-bar {
  height: 100%;
  background: linear-gradient(90deg, rgba(168,180,154,0.35), rgba(168,180,154,0.6));
  border-radius: 1px;
  transition: width 0.8s cubic-bezier(0.25,1,0.5,1);
}
.challenger-pts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text2);
  flex-shrink: 0;
  white-space: nowrap;
}
.challenger-pts span {
  font-size: 0.55rem;
  opacity: 0.5;
  margin-left: 0.15rem;
  font-weight: 400;
}

/* ── Prize Banner — Gilded Announcement ───────────────────── */
@keyframes pb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33%       { transform: translateY(-5px) rotate(-2deg); }
  66%       { transform: translateY(-3px) rotate(2deg); }
}
@keyframes pb-rays-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes pb-streak-slide {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  30%  { opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateX(220%) skewX(-20deg); opacity: 0; }
}
@keyframes pb-pulse-border {
  0%, 100% { border-color: rgba(201,168,76,0.45); box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  50%       { border-color: rgba(201,168,76,0.9); box-shadow: 0 0 18px 4px rgba(201,168,76,0.15); }
}
@keyframes pb-cd-tick {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(-90deg); opacity: 0.3; }
  51%  { transform: rotateX(90deg); opacity: 0.3; }
  100% { transform: rotateX(0); opacity: 1; }
}

.prize-banner {
  flex: 1;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 18px,
      rgba(201,168,76,0.025) 18px,
      rgba(201,168,76,0.025) 19px
    ),
    radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.12) 0%, transparent 65%),
    linear-gradient(165deg, #1c1600 0%, #1e1a06 45%, #141812 100%);
  border: 1px solid rgba(201,168,76,0.45);
  border-top: 3px solid #c9a84c;
  border-radius: 2px 2px 8px 8px;
  padding: 1.6rem 1.4rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  position: relative;
  overflow: hidden;
  animation: pb-pulse-border 4s ease-in-out infinite;
}

/* Diagonal shine streak */
.pb-streak {
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,0.08) 50%, transparent 100%);
  animation: pb-streak-slide 6s ease-in-out infinite 1.5s;
  pointer-events: none;
  z-index: 0;
}

/* Corner ornament brackets */
.pb-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(201,168,76,0.7);
  border-style: solid;
  z-index: 2;
  pointer-events: none;
}
.pb-corner--tl { top: 8px; left: 8px;  border-width: 2px 0 0 2px; }
.pb-corner--tr { top: 8px; right: 8px; border-width: 2px 2px 0 0; }
.pb-corner--bl { bottom: 8px; left: 8px;  border-width: 0 0 2px 2px; }
.pb-corner--br { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; }

/* Crown with sunburst halo */
.pb-crown-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 0.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.pb-crown-rays {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,    rgba(201,168,76,0.35) 4deg,
    transparent 8deg,    rgba(201,168,76,0.20) 12deg,
    transparent 16deg,   rgba(201,168,76,0.35) 20deg,
    transparent 24deg,   rgba(201,168,76,0.20) 28deg,
    transparent 32deg,   rgba(201,168,76,0.35) 36deg,
    transparent 40deg,   rgba(201,168,76,0.20) 44deg,
    transparent 48deg,   rgba(201,168,76,0.35) 52deg,
    transparent 56deg,   rgba(201,168,76,0.20) 60deg,
    transparent 64deg,   rgba(201,168,76,0.35) 68deg,
    transparent 72deg,   rgba(201,168,76,0.20) 76deg,
    transparent 80deg,   rgba(201,168,76,0.35) 84deg,
    transparent 88deg,   rgba(201,168,76,0.20) 92deg,
    transparent 96deg,   rgba(201,168,76,0.35) 100deg,
    transparent 104deg,  rgba(201,168,76,0.20) 108deg,
    transparent 112deg,  rgba(201,168,76,0.35) 116deg,
    transparent 120deg,  rgba(201,168,76,0.20) 124deg,
    transparent 128deg,  rgba(201,168,76,0.35) 132deg,
    transparent 136deg,  rgba(201,168,76,0.20) 140deg,
    transparent 144deg,  rgba(201,168,76,0.35) 148deg,
    transparent 152deg,  rgba(201,168,76,0.20) 156deg,
    transparent 160deg,  rgba(201,168,76,0.35) 164deg,
    transparent 168deg,  rgba(201,168,76,0.20) 172deg,
    transparent 176deg,  rgba(201,168,76,0.35) 180deg,
    transparent 184deg,  rgba(201,168,76,0.20) 188deg,
    transparent 192deg,  rgba(201,168,76,0.35) 196deg,
    transparent 200deg,  rgba(201,168,76,0.20) 204deg,
    transparent 208deg,  rgba(201,168,76,0.35) 212deg,
    transparent 216deg,  rgba(201,168,76,0.20) 220deg,
    transparent 224deg,  rgba(201,168,76,0.35) 228deg,
    transparent 232deg,  rgba(201,168,76,0.20) 236deg,
    transparent 240deg,  rgba(201,168,76,0.35) 244deg,
    transparent 248deg,  rgba(201,168,76,0.20) 252deg,
    transparent 256deg,  rgba(201,168,76,0.35) 260deg,
    transparent 264deg,  rgba(201,168,76,0.20) 268deg,
    transparent 272deg,  rgba(201,168,76,0.35) 276deg,
    transparent 280deg,  rgba(201,168,76,0.20) 284deg,
    transparent 288deg,  rgba(201,168,76,0.35) 292deg,
    transparent 296deg,  rgba(201,168,76,0.20) 300deg,
    transparent 304deg,  rgba(201,168,76,0.35) 308deg,
    transparent 312deg,  rgba(201,168,76,0.20) 316deg,
    transparent 320deg,  rgba(201,168,76,0.35) 324deg,
    transparent 328deg,  rgba(201,168,76,0.20) 332deg,
    transparent 336deg,  rgba(201,168,76,0.35) 340deg,
    transparent 344deg,  rgba(201,168,76,0.20) 348deg,
    transparent 352deg,  rgba(201,168,76,0.35) 356deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: pb-rays-spin 20s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 22px, black 23px);
  mask: radial-gradient(circle, transparent 22px, black 23px);
}
.pb-crown {
  font-size: 2.2rem;
  color: #c9a84c;
  text-shadow:
    0 0 8px  rgba(201,168,76,0.9),
    0 0 20px rgba(201,168,76,0.5),
    0 0 40px rgba(201,168,76,0.2),
    0 2px 0  rgba(100,80,20,0.8);
  animation: pb-float 3.5s ease-in-out infinite;
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* Decree label + main title */
.pb-decree {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: rgba(201,168,76,0.65);
  text-align: center;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}
.pb-title {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 1.55rem;
  color: #e8c96a;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0,0,0,0.8), 0 0 20px rgba(201,168,76,0.3);
  position: relative;
  z-index: 1;
  line-height: 1.1;
}

/* Prize amount block */
.pb-amount-wrap {
  text-align: center;
  position: relative;
  z-index: 1;
  padding: 0.5rem 0.75rem 0.6rem;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 4px;
  margin: 0 0.25rem;
}
.pb-amount-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: rgba(201,168,76,0.55);
  text-transform: uppercase;
  margin-bottom: 0.2rem;
  display: block;
}
.pb-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem;
  line-height: 1;
}
.pb-currency {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: rgba(201,168,76,0.8);
  letter-spacing: 0.05em;
  text-shadow: 0 0 12px rgba(201,168,76,0.4);
}
.pb-number {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 800;
  font-size: 3.2rem;
  color: #c9a84c;
  text-shadow:
    0 0 20px rgba(201,168,76,0.5),
    0 3px 0  rgba(80,55,5,0.9),
    0 6px 12px rgba(0,0,0,0.6);
  letter-spacing: -0.02em;
}

/* Rules list */
.pb-rules {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  position: relative;
  z-index: 1;
}
.pb-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.5;
}
.pb-rule-bullet {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(201,168,76,0.7);
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.3);
  padding: 0.05rem 0.35rem;
  border-radius: 2px;
  flex-shrink: 0;
  line-height: 1.6;
  letter-spacing: 0.05em;
}
.pb-rule-text {
  flex: 1;
  min-width: 0;
  line-height: 1.55;
}
.pb-rule-item strong {
  color: rgba(201,168,76,0.9);
  font-weight: 600;
}

/* THE TWIST callout box */
.pb-twist-box {
  background: rgba(201,130,30,0.1);
  border: 1px solid rgba(201,130,30,0.35);
  border-left: 3px solid #c9841c;
  border-radius: 0 4px 4px 0;
  padding: 0.5rem 0.7rem;
  margin-top: 0.15rem;
}
.pb-twist-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #d4901c;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}
.pb-twist-text {
  font-size: 0.79rem;
  color: var(--text2);
  line-height: 1.5;
  font-style: italic;
}

/* Diamond divider */
.pb-divider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 1;
  color: rgba(201,168,76,0.45);
  font-size: 0.55rem;
}
.pb-divider::before,
.pb-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3), transparent);
}

/* Countdown — segmented flip blocks */
.pb-countdown-wrap {
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 6px;
  padding: 0.7rem 0.8rem 0.6rem;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.pb-countdown-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  text-align: center;
}
.pb-countdown-digits {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3rem;
}
.pb-cd-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.pb-cd-block span:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 1.55rem;
  color: #c9a84c;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 4px;
  min-width: 2.4rem;
  text-align: center;
  padding: 0.15rem 0.3rem;
  line-height: 1.2;
  text-shadow: 0 0 10px rgba(201,168,76,0.4);
}
.pb-cd-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.pb-cd-sep {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  color: rgba(201,168,76,0.4);
  margin-bottom: 1.1rem;
  line-height: 1;
}

/* Sponsor section */
.pb-sponsored-by {
  margin-top: 0.5rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(201,168,76,0.15);
  text-align: center;
  position: relative;
  z-index: 1;
}
.pb-sponsored-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  color: var(--muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.pb-sponsor-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
}
.pb-sponsor-chip {
  font-size: 0.75rem;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #c9a84c;
  border: 1px solid rgba(201,168,76,0.4);
  padding: 0.2rem 0.65rem;
  background: rgba(201,168,76,0.07);
  border-radius: 2px;
  transition: background 0.2s, border-color 0.2s;
}
.pb-sponsor-chip:hover {
  background: rgba(201,168,76,0.14);
  border-color: rgba(201,168,76,0.65);
}
.pb-sponsor-chip--default {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
}

/* ── Hall of Fame ──────────────────────────────────────────── */
.hall-of-fame {
  margin-top: 2.5rem;
}
.hof-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.winner-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid rgba(201,168,76,0.5);
  border-radius: 6px;
  padding: 1.1rem 1rem 1rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.15s;
}
.winner-card:hover {
  border-color: rgba(201,168,76,0.7);
  transform: translateY(-2px);
}
.winner-card--rolled {
  border-top-color: rgba(184,137,26,0.7);
  background: linear-gradient(160deg, rgba(184,137,26,0.04) 0%, var(--surface) 60%);
}
.winner-card--claimed {
  border-top-color: rgba(74,112,64,0.7);
  background: linear-gradient(160deg, rgba(74,112,64,0.04) 0%, var(--surface) 60%);
}
.wc-trophy {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  font-size: 1.6rem;
  color: rgba(201,168,76,0.18);
  line-height: 1;
  pointer-events: none;
}
.wc-period {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.wc-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}
.wc-dept {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.65rem;
}
.wc-pts {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  color: var(--text2);
  margin-bottom: 0.5rem;
}
.wc-prize {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  color: #c9a84c;
  letter-spacing: 0.02em;
}
.wc-badge {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.55rem;
  border-radius: 3px;
  margin-bottom: 0.35rem;
}
.wc-badge--rolled {
  background: rgba(184,137,26,0.15);
  border: 1px solid rgba(184,137,26,0.45);
  color: #d4a832;
}
.wc-badge--claimed {
  background: rgba(74,112,64,0.15);
  border: 1px solid rgba(74,112,64,0.45);
  color: #6a9a5a;
}
.hof-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--muted);
}
.hof-empty-icon {
  font-size: 3rem;
  color: rgba(201,168,76,0.2);
  margin-bottom: 0.75rem;
}
.hof-empty-text {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.3rem;
}
.hof-empty-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hof-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .lb-hero-row { flex-direction: column; }
  .podium-col { flex: unset; }
  .lb-hero-row .podium-wrap { flex: unset; }
  .prize-banner { flex: unset; }
  .hof-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .hof-grid { grid-template-columns: 1fr; }
  .pb-amount { font-size: 2.6rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR + COMPOSER
   ══════════════════════════════════════════════════════════════════════ */

/* Topbar announce button */
.topbar-announce-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: rgba(184,137,26,0.12);
  border: 1px solid rgba(184,137,26,0.45);
  border-radius: 4px;
  color: #c9a84c;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.topbar-announce-btn:hover {
  background: rgba(184,137,26,0.22);
  border-color: rgba(184,137,26,0.7);
}

/* Composer panel */
.announce-panel {
  background: rgba(20,22,28,0.97);
  border-bottom: 1px solid rgba(184,137,26,0.25);
  padding: 0.85rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.announce-form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
}
.announce-form textarea {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem;
  padding: 0.6rem 0.85rem;
  resize: vertical;
  min-height: 56px;
  max-height: 120px;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.announce-form textarea:focus {
  border-color: rgba(184,137,26,0.5);
}
.announce-form-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.ann-readers-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.ann-readers-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  min-width: 260px;
  max-height: 220px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 0.4rem 0;
}
.announce-form-actions {
  position: relative;
}
.ann-reader-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ann-reader-row:last-child { border-bottom: none; }
.ann-reader-name {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}
.ann-reader-dept {
  font-size: 0.7rem;
  color: var(--muted);
}
.ann-reader-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}
.ann-reader-empty {
  color: var(--muted);
  font-style: italic;
  justify-content: center;
}

/* Announcement bar */
.ann-bar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1.5rem;
  background: linear-gradient(90deg, rgba(184,137,26,0.12) 0%, rgba(184,137,26,0.06) 100%);
  border-bottom: 1px solid rgba(184,137,26,0.3);
  transition: opacity 0.3s;
  flex-wrap: wrap;
}
.ann-icon {
  color: #c9a84c;
  font-size: 0.75rem;
  flex-shrink: 0;
}
.ann-poster {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: #c9a84c;
  flex-shrink: 0;
}
.ann-sep {
  color: rgba(201,168,76,0.4);
  flex-shrink: 0;
}
.ann-content {
  font-size: 0.82rem;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.ann-dismiss {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.15rem 0.4rem;
  border-radius: 3px;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
  line-height: 1;
}
.ann-dismiss:hover {
  color: var(--text);
  background: rgba(255,255,255,0.07);
}

/* ══════════════════════════════════════════════════════════════════════
   CHAT ROOM
   ══════════════════════════════════════════════════════════════════════ */

.chat-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 180px);
  min-height: 400px;
  background: var(--surface);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  overflow: hidden;
}

/* Message list */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  scroll-behavior: smooth;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* Date divider */
.chat-date-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 0.85rem 0 0.6rem;
  gap: 0.75rem;
}
.chat-date-divider::before,
.chat-date-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.chat-date-divider span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  white-space: nowrap;
  padding: 0 0.25rem;
}

/* Chat message */
.chat-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  max-width: 72%;
  margin-bottom: 0.5rem;
}
.chat-msg--own {
  align-self: flex-end;
  flex-direction: row-reverse;
}
.chat-msg:not(.chat-msg--own) {
  align-self: flex-start;
}

/* Avatar */
.chat-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(184,137,26,0.15);
  border: 1px solid rgba(184,137,26,0.3);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-msg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-msg-avatar span {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  color: #c9a84c;
  letter-spacing: 0.04em;
}
.chat-msg-avatar--own {
  background: rgba(74,112,64,0.15);
  border-color: rgba(74,112,64,0.3);
}
.chat-msg-avatar--own span { color: #6a9a5a; }

/* Message body */
.chat-msg-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.chat-msg--own .chat-msg-body {
  align-items: flex-end;
}

/* Sender name */
.chat-msg-sender {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #c9a84c;
  padding-left: 0.1rem;
}
.chat-msg-role {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-left: 0.3rem;
}

/* Bubble */
.chat-msg-bubble {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px 10px 10px 3px;
  padding: 0.55rem 0.85rem;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
  max-width: 100%;
}
.chat-msg--own .chat-msg-bubble {
  background: rgba(74,112,64,0.18);
  border-color: rgba(74,112,64,0.3);
  border-radius: 10px 10px 3px 10px;
}

/* Timestamp + seen */
.chat-msg-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  padding: 0 0.1rem;
}
.chat-seen-by {
  color: rgba(106,154,90,0.8);
  margin-left: 0.2rem;
}

/* Empty state */
.chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 3rem 1rem;
  color: var(--muted);
  text-align: center;
}
.chat-empty-icon {
  font-size: 2.5rem;
  color: rgba(255,255,255,0.06);
  margin-bottom: 0.75rem;
}
.chat-empty-text {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
}

/* Input bar */
.chat-input-bar {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 0.75rem 1rem 0.6rem;
  background: rgba(0,0,0,0.2);
}
.chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}
.chat-textarea {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.83rem;
  line-height: 1.5;
  padding: 0.55rem 0.85rem;
  resize: none;
  overflow-y: hidden;
  outline: none;
  transition: border-color 0.2s;
  max-height: 120px;
}
.chat-textarea:focus { border-color: rgba(74,112,64,0.5); }
.chat-send-btn {
  width: 38px;
  height: 38px;
  background: rgba(74,112,64,0.25);
  border: 1px solid rgba(74,112,64,0.45);
  border-radius: 6px;
  color: #6a9a5a;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.chat-send-btn:hover:not(:disabled) {
  background: rgba(74,112,64,0.4);
  border-color: rgba(74,112,64,0.7);
}
.chat-send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-input-meta {
  margin-top: 0.3rem;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Member count badge in section header */
.chat-member-count {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  background: rgba(74,112,64,0.1);
  border: 1px solid rgba(74,112,64,0.25);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: #6a9a5a;
  letter-spacing: 0.06em;
}
.cmc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6a9a5a;
  box-shadow: 0 0 6px rgba(106,154,90,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

/* ── Chat responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
  .chat-wrap { height: calc(100vh - 160px); }
  .chat-msg { max-width: 88%; }
  .chat-messages { padding: 0.85rem 0.85rem; }
  .ann-bar { padding: 0.5rem 0.85rem; gap: 0.4rem; }
  .announce-panel { padding: 0.75rem 0.85rem; }
  .topbar-announce-btn { font-size: 0.7rem; padding: 0.3rem 0.6rem; }
}

/* ── Chat @mention ──────────────────────────────────────────────────────────── */
.mention-dropdown {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--surface);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 6px;
  min-width: 200px;
  max-width: 280px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 300;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4);
  padding: 0.3rem 0;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text);
  transition: background 0.15s;
}
.mention-item:hover,
.mention-item.active {
  background: rgba(201,168,76,0.12);
}
.mention-item-at {
  color: #c9a84c;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
}
.chat-mention {
  color: #c9a84c;
  font-weight: 600;
  background: rgba(201,168,76,0.1);
  border-radius: 3px;
  padding: 0 2px;
}
.chat-mention--me {
  color: #6a9a5a;
  background: rgba(74,112,64,0.15);
}

/* ── Task Reassignment ──────────────────────────────────────────────────────── */
.reassign-toggle-btn {
  display: inline-block;
  margin-top: 0.3rem;
  opacity: 0.6;
  font-size: 0.68rem;
}
.reassign-toggle-btn:hover { opacity: 1; }
.reassign-form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.reassign-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  color: var(--text);
  font-size: 0.78rem;
  padding: 0.25rem 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  outline: none;
}
.reassign-select:focus {
  border-color: rgba(201,168,76,0.4);
}

/* ── Forgot / Reset Password ─────────────────────────────────────────────── */
/* ============================================================
   AUTH PAGES — Login / Forgot Password / Reset Password
   ============================================================ */

.login-bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(168,180,154,0.03) 40px),
    repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(168,180,154,0.03) 40px),
    var(--bg);
}
.login-bg::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(168,180,154,0.05) 0%, transparent 70%);
}
body:has(.login-wrap) {
  display: flex;
  overflow: hidden;
}
.login-wrap {
  position: relative; z-index: 1;
  margin: auto; width: 100%; max-width: 440px; padding: 2rem;
  animation: authFadeIn 0.45s ease both;
}
@keyframes authFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(168,180,154,0.04);
}
.login-top {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
}
.login-top::before, .login-top::after {
  content: '';
  position: absolute; bottom: -1px; width: 40px; height: 3px; background: var(--gold);
}
.login-top::before { left: 0; }
.login-top::after  { right: 0; }
.logo-sym  { font-size: 2.8rem; color: var(--gold); line-height: 1; }
.logo-name { font-family: 'Rajdhani', sans-serif; font-size: 3.2rem; font-weight: 700; letter-spacing: 0.3em; color: var(--gold); line-height: 1; }
.logo-tag  { font-size: 0.78rem; letter-spacing: 0.5em; color: var(--muted); margin-top: 0.3rem; text-transform: uppercase; }

.login-body { padding: 2rem; background: #1a1d28; }

/* section-head inside login body (avoids conflict with dashboard .section-head) */
.login-body .section-head {
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.95rem; letter-spacing: 0.3em; color: #8b8fa8;
  border-bottom: 1px solid #3a3f55;
  padding-bottom: 0.5rem; margin-bottom: 1.5rem;
}

.login-body .form-group { margin-bottom: 1.25rem; }

.login-body label {
  display: block; font-size: 0.85rem; letter-spacing: 0.15em;
  color: #8b8fa8; margin-bottom: 0.5rem;
  font-family: 'Rajdhani', sans-serif;
}

.input-wrap    { position: relative; }
.input-prefix  {
  position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%);
  color: var(--gold); font-size: 0.85rem; pointer-events: none; z-index: 2;
}

.login-body input[type=email],
.login-body input[type=password] {
  width: 100%;
  background: #0e1119;
  border: 1.5px solid #4a5070;
  border-radius: 2px;
  color: #e8e3d8;
  padding: 0.9rem 1rem 0.9rem 2.5rem;
  font-size: 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
  display: block;
}
.login-body input[type=email]::placeholder,
.login-body input[type=password]::placeholder { color: #3a3f55; }
.login-body input[type=email]:focus,
.login-body input[type=password]:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(168,180,154,0.12);
}

.btn-auth {
  width: 100%; padding: 1rem;
  background: var(--gold); color: #0a0c12;
  font-family: 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 700;
  letter-spacing: 0.2em; border: none; cursor: pointer; margin-top: 0.5rem;
  transition: background 0.2s, transform 0.1s;
  position: relative; display: block; text-align: center;
}
.btn-auth:hover  { background: #c4d4b0; }
.btn-auth:active { transform: scale(0.99); }

.login-body .error-box {
  background: rgba(176,51,40,0.12); border: 1px solid rgba(176,51,40,0.35);
  color: #e57373; padding: 0.75rem 1rem; font-size: 0.82rem;
  margin-bottom: 1.25rem; border-left: 3px solid var(--red);
  font-family: 'JetBrains Mono', monospace;
}

.login-footer {
  padding: 1rem 2rem;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.7rem; color: var(--muted); letter-spacing: 0.05em;
  background: var(--surface2);
}
.status-dot {
  display: inline-block; width: 6px; height: 6px;
  background: var(--green-bright); border-radius: 50%; margin-right: 0.4rem;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Corner decoration brackets */
.corner-deco {
  position: absolute; width: 16px; height: 16px;
  border-color: var(--gold); border-style: solid;
  opacity: 0.7;
}
.corner-deco.tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.corner-deco.tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; }
.corner-deco.bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; }
.corner-deco.br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

/* reCAPTCHA container */
.captcha-wrap {
  margin: 1.25rem 0 0.5rem;
  display: flex; justify-content: center;
}
.captcha-wrap .g-recaptcha { border: 1px solid #46503f; display: inline-block; }
.captcha-label {
  font-family: 'Rajdhani', sans-serif; font-size: 0.78rem;
  letter-spacing: 0.15em; color: #8b8fa8; margin-bottom: 0.5rem;
}

/* Reset / success states */
/* Logo images */
.auth-logo-img {
  width: 90px; height: 90px;
  object-fit: contain; display: block; margin: 0 auto;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.5));
}
.sidebar-logo-img {
  width: 36px; height: 36px;
  object-fit: contain; display: block;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

.reset-success-msg {
  text-align: center;
  padding: 1.75rem 1rem 1.25rem;
}
.reset-success-icon {
  font-size: 2.8rem;
  color: var(--green-bright);
  margin-bottom: 0.85rem;
  line-height: 1;
  animation: iconPop 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes iconPop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.reset-success-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.25em; color: var(--text);
  margin-bottom: 0.6rem;
}
.reset-success-sub {
  font-size: 0.82rem; color: var(--muted);
  line-height: 1.65; max-width: 300px; margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════
   RUBRIC APPRAISAL — Structured 5-criterion scoring form
   ══════════════════════════════════════════════════════════ */

/* Stage context banner */
.rubric-stage-ctx {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem; color: var(--gold); letter-spacing: 0.08em;
  padding: 0.5rem 0.75rem;
  background: rgba(201,168,76,0.07);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  margin-bottom: 0.85rem;
}

/* Table wrapper — clean border, no overflow issues (buttons are flex:1 so no fixed-width overflow) */
.rubric-table {
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.85rem;
}

/* Direction strip — single slim row replacing the old 2-header system */
/* Simple flex with space-between: ← NEEDS WORK | NEUTRAL | OUTSTANDING → */
.rubric-dir-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 0.58rem;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.1em;
}
.rs-neg { color: #c0392b; }
.rs-neu { color: var(--muted); }
.rs-pos { color: #27ae60; }

/* Criterion row — fieldset reset, no min-width constraint */
.rubric-row {
  border: none;
  border-top: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  margin: 0;
  display: block;
}
.rubric-row:hover { background: rgba(255,255,255,0.015); }
.rubric-row legend.rubric-label {
  font-size: 0.84rem; color: var(--text2);
  padding: 0 0 0.45rem 0;
  float: left; width: 100%;
  font-family: 'Rajdhani', sans-serif;
  letter-spacing: 0.04em;
}

/* Score options — flex:stretch so 5 buttons always fill 100% of available card width */
.rubric-options {
  display: flex;
  gap: 5px;
  clear: both;
}

/* Individual radio + label cell */
.rubric-cell {
  flex: 1;                           /* each cell stretches equally — no fixed widths */
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  touch-action: manipulation;        /* eliminates 300ms tap delay on mobile */
  min-width: 44px;                   /* WCAG minimum touch target */
}
.rubric-cell input[type=radio] {
  position: absolute;
  opacity: 0; width: 0; height: 0;
}
.rubric-cell input[type=radio]:focus-visible + .rubric-btn {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Score button — flex:1 fills its cell, 44px min-height (no desc text inside anymore) */
.rubric-btn {
  flex: 1;                           /* fills the rubric-cell width */
  min-height: 44px;                  /* was 52px; reduced since no desc text inside button */
  border-radius: 3px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--border);
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  user-select: none;
}
.rubric-btn:hover { border-color: rgba(201,168,76,0.5); }
.rubric-score {
  font-size: 0.8rem; font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
}
/* Descriptor text hidden from button — moved to .rubric-desc-bar below each row.
   Kept in DOM so aria-label on radio still works for screen readers. */
.rubric-btn-desc { display: none; }

/* Description bar — shows selected/hovered descriptor as a readable single line */
.rubric-desc-bar {
  margin-top: 0.35rem;
  min-height: 1.4em;
  font-size: 0.72rem;
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
  padding: 0 2px;
  transition: color 0.15s;
}
.rubric-desc-bar::before { content: '↳ '; opacity: 0.45; }
.rubric-desc-bar.tone-pos { color: rgba(39,174,96,0.85); }
.rubric-desc-bar.tone-neg { color: rgba(192,57,43,0.85); }
.rubric-desc-bar.tone-neu { color: var(--muted); }

/* Selected states — 2px border + background + inset bottom bar (non-colour secondary cue) */
.rubric-cell input:checked + .rubric-btn.rubric-pos {
  background: rgba(39,174,96,0.15);
  border-color: #27ae60;
  border-width: 2px;
  box-shadow: inset 0 -3px 0 #27ae60;
}
.rubric-cell input:checked + .rubric-btn.rubric-pos .rubric-score { color: #27ae60; }
.rubric-cell input:checked + .rubric-btn.rubric-pos .rubric-btn-desc { color: rgba(39,174,96,0.85); }

.rubric-cell input:checked + .rubric-btn.rubric-neg {
  background: rgba(192,57,43,0.15);
  border-color: #c0392b;
  border-width: 2px;
  box-shadow: inset 0 -3px 0 #c0392b;
}
.rubric-cell input:checked + .rubric-btn.rubric-neg .rubric-score { color: #c0392b; }
.rubric-cell input:checked + .rubric-btn.rubric-neg .rubric-btn-desc { color: rgba(192,57,43,0.85); }

.rubric-cell input:checked + .rubric-btn.rubric-neutral {
  background: rgba(139,143,168,0.22);
  border-color: rgba(139,143,168,0.85);
  border-width: 2px;
  box-shadow: inset 0 -3px 0 rgba(139,143,168,0.8);
}
.rubric-cell input:checked + .rubric-btn.rubric-neutral .rubric-score { color: var(--text); }

/* Live total display */
.rubric-total {
  display: flex; align-items: baseline; gap: 0.35rem;
  justify-content: flex-end;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem; color: var(--muted);
  margin-bottom: 0.75rem;
}
.rubric-total-val {
  font-size: 1.3rem; font-weight: 700;
  color: var(--text2);
  transition: color 0.2s;
}
.rubric-total-max { font-size: 0.75rem; }

/* Confirm modal score display */
.rubric-confirm-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.82rem; color: var(--muted);
  padding: 0.5rem 0;
}

/* History: criteria breakdown chips */
.rubric-breakdown {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px; margin-bottom: 2px;
}
.rb-item {
  font-size: 0.6rem; padding: 2px 6px;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  background: var(--surface2);
  cursor: default;
}
.rb-pos     { color: #27ae60; }
.rb-neg     { color: #c0392b; }
.rb-neutral { color: var(--muted); }

/* Mobile: hide the direction strip on very small viewports (buttons are self-labelled) */
@media (max-width: 400px) {
  .rubric-dir-strip { display: none; }
}

/* ══════════════════════════════════════════════════════════
   RECOGNITION TIER CARD — Monthly standing on appraisal page
   ══════════════════════════════════════════════════════════ */

.recognition-tier-card .tier-body {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1rem;
}
.tier-score {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.4rem; font-weight: 700;
  line-height: 1; flex-shrink: 0;
}
.tier-pts-label {
  font-size: 0.9rem; font-weight: 400;
  color: var(--muted);
}
.tier-info { flex: 1; min-width: 0; }
.tier-label {
  font-family: 'Rajdhani', sans-serif;
  font-size: 1rem; font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 0.15rem;
}
.tier-bonus {
  font-size: 0.75rem; color: var(--muted);
  margin-bottom: 0.65rem;
}
.tier-scale {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.tier-pip {
  font-size: 0.6rem;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3px 7px;
  color: var(--muted);
  white-space: nowrap;
}
.tier-pip--active {
  font-weight: 700;
}
.tier-pip-range { opacity: 0.7; margin-right: 4px; }
.tier-pip-name  { }

@media (max-width: 560px) {
  .recognition-tier-card .tier-body { flex-direction: column; gap: 0.75rem; }
}