/* --- Liquid Glass Premium Theme --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg1: #0f172a;
  --bg2: #020617;
  --glass: rgba(15, 23, 42, 0.6);
  --glassBorder: rgba(255, 255, 255, 0.08);
  --muted: rgba(148, 163, 184, 0.9);
  --text: rgba(248, 250, 252, 0.95);
  --shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.6);
  --pillBg: rgba(0, 0, 0, 0.3);
  --danger: #f43f5e;
  --warn: #fbbf24;
  --good: #10b981;
  --brand: #3b82f6;
  --dialTileRing: rgba(56, 189, 248, 0.6);
  --dialTileGlow: rgba(56, 189, 248, 0.22);
  --brandGradient: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(0, 255, 255, 0.15));
  --brandCyan: #00ffff;
}

:root.light-mode {
  --bg1: #f1f5f9;
  --bg2: #e2e8f0;
  --glass: rgba(255, 255, 255, 0.85);
  --glassBorder: rgba(0, 0, 0, 0.15);
  --muted: rgba(71, 85, 105, 0.9);
  --text: rgba(15, 23, 42, 0.95);
  --shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.15);
  --pillBg: rgba(0, 0, 0, 0.08);
  --danger: #e11d48;
  --warn: #d97706;
  --good: #059669;
  --brand: #2563eb;
  --dialTileRing: rgba(37, 99, 235, 0.52);
  --dialTileGlow: rgba(37, 99, 235, 0.18);
  --brandGradient: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(8, 145, 178, 0.1));
  --brandCyan: #0891b2;
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: radial-gradient(800px circle at 15% 20%, rgba(59, 130, 246, 0.12), transparent 50%),
    radial-gradient(600px circle at 85% 60%, rgba(0, 255, 255, 0.08), transparent 50%),
    linear-gradient(135deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  overflow-x: hidden;
}

/* tiny utility fallback so we don't depend on Tailwind */
.hidden {
  display: none !important;
}

.mono {
  font-variant-numeric: tabular-nums;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 22px 18px 40px
}

/* === LOGIN SCREEN SPECIFIC === */
.login-view {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  padding: 20px;
}

.login-title {
  font-size: min(10vw, 64px);
  font-weight: 900;
  letter-spacing: -0.04em;
  margin-top: 20px;
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.1;
}

.login-subtitle {
  font-size: min(4vw, 24px);
  font-weight: 700;
  color: var(--warn);
  margin-bottom: 40px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}


.forged-line {
  display: flex;
  align-items: center;
}

.forged-line-login {
  justify-content: center;
  gap: 10px;
}

.forged-line-header {
  color: var(--warn);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 11px;
  gap: 6px;
}

.forged-icon {
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
}

.build-stamp {
  width: 100%;
  text-align: right;
  cursor: help;
}
.login-box {
  width: min(420px, 100%);
  padding: 30px 24px;
  border-radius: 20px;
}

.login-box label {
  text-align: left;
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 800;
  margin-bottom: 8px;
}

.btn-large {
  padding: 14px;
  font-size: 16px;
  width: 100%;
}

.tos-ack-row {
  margin-top: 12px;
  margin-bottom: 10px;
  display: grid;
  gap: 8px;
}

.tos-ack-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
  text-align: left;
}

.tos-ack-label input {
  margin-top: 2px;
}

.tos-link-btn {
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand small {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.6)
}

.chipRow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end
}

.chip {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow);
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
}

.btn {
  cursor: pointer;
  padding: 9px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-weight: 700;
  transition: all 0.2s ease;
}

.btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.btn:active {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn.primary {
  background: var(--brandGradient);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: none;
}

.btn.primary:hover {
  background: var(--brandGradient);
  box-shadow: none;
  border-color: rgba(99, 102, 241, 0.8);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.glass {
  background: var(--glass);
  border: 1px solid var(--glassBorder);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.card {
  border-radius: 18px;
  padding: 16px
}

.grid {
  display: grid;
  gap: 14px
}

.topGrid {
  grid-template-columns: 1.2fr 0.8fr
}

.topGrid > .card {
  padding: 12px 14px;
}

@media (max-width: 980px) {
  .topGrid {
    grid-template-columns: 1fr
  }
}

.scoreBig {
  font-size: 32px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.02em
}

.scoreSub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px
}

.scoreHint {
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 13px
}

.scoreHint b {
  color: white
}

.kpiGrid {
  grid-template-columns: repeat(3, 1fr)
}

@media (max-width: 980px) {
  .kpiGrid {
    grid-template-columns: repeat(2, 1fr)
  }
}

.tabular-head {
  display: grid;
  grid-template-columns: 2.5fr 1.5fr 3.5fr 1fr;
  gap: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin: 32px 0 16px 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 400;
}

.tabular-row {
  display: grid;
  grid-template-columns: 2.5fr 1.5fr 3.5fr 1fr;
  gap: 20px;
  align-items: center;
  padding-bottom: 20px;
  font-family: inherit;
}

@media (max-width: 760px) {

  .tabular-head,
  .tabular-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .tabular-head>div:nth-child(3),
  .tabular-head>div:nth-child(4) {
    display: none;
  }
}

.section-title {
  font-weight: 900;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.target-pct-label {
  color: #fff;
}

.drag-subtext {
  color: rgba(255, 255, 255, 0.6);
}

.projected-target {
  color: rgba(255, 255, 255, 0.65);
}

.metric-name-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.metric-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}

.metric-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tabular-row .metric-name.bad { color: #FF5252; }
.tabular-row .metric-name.warn { color: #FFB74D; }
.tabular-row .metric-name.good { color: #4CAF50; }
.tabular-row .metric-name.great {
  color: #00E5FF;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.metric-nums {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  text-align: right;
}

.metric-nums b {
  color: white;
  font-weight: 700;
}

.tabular-row .metric-nums.bad b { color: #FF5252; }
.tabular-row .metric-nums.warn b { color: #FFB74D; }
.tabular-row .metric-nums.good b { color: #4CAF50; }
.tabular-row .metric-nums.great b { color: #00E5FF; }

.bulletGraph {
  height: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
}

.bulletPaceBg {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  z-index: 1;
}

.bulletFill {
  position: relative;
  height: 6px;
  margin-left: 2px;
  border-radius: 4px;
  background: var(--brand);
  z-index: 2;
  transition: width 0.3s ease;
  border: 1px solid transparent;
}

.bulletFill.bad {
  background: #742020;
  border-color: #FF5252;
  box-shadow: inset 0 1px 0 rgba(255, 82, 82, 0.35), 0 0 8px rgba(255, 82, 82, 0.2);
}

.bulletFill.warn {
  background: #855E28;
  border-color: #FFB74D;
  box-shadow: inset 0 1px 0 rgba(255, 183, 77, 0.35), 0 0 8px rgba(255, 183, 77, 0.2);
}

.bulletFill.good {
  background: #1B5E20;
  border-color: #4CAF50;
  box-shadow: inset 0 1px 0 rgba(76, 175, 80, 0.35), 0 0 8px rgba(76, 175, 80, 0.2);
}

.bulletFill.great {
  background: #006064;
  border-color: #00E5FF;
  box-shadow: inset 0 1px 0 rgba(0, 229, 255, 0.35), 0 0 8px rgba(0, 229, 255, 0.22);
}

.bulletTick {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: #fff;
  transform: translateX(-1px);
  z-index: 3;
}

.bulletLine {
  position: absolute;
  top: -24px;
  bottom: -16px;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.45) 0 3px,
    rgba(255, 255, 255, 0.05) 3px 6px
  );
  transform: translateX(-1px);
  z-index: 0;
}

.pts-col {
  font-weight: 700;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  text-align: right;
}

.tabular-row .pts-col.bad {
  color: #FF5252;
  font-weight: 400;
}

.tabular-row .pts-col.warn {
  color: #FFB74D;
  font-weight: 400;
}

.tabular-row .pts-col.good {
  color: #4CAF50;
}

.tabular-row .pts-col.great {
  color: #00E5FF;
}

.footer {
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap
}

/* Modal */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.58);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 50
}

.modal {
  width: min(720px, 100%);
  border-radius: 18px;
  padding: 16px
}

.modal h2 {
  margin: 0 0 10px 0;
  font-size: 18px
}

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

@media (max-width: 680px) {
  .row {
    grid-template-columns: 1fr
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 10px 0
}

.field label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 800
}

input,
select,
textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

input:focus,
textarea:focus {
  border-color: rgba(251, 191, 36, 0.45)
}

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

.modalActions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px
}

.hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65)
}

.help-doc {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.warnBox {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(251, 113, 133, 0.14);
  border: 1px solid rgba(251, 113, 133, 0.25);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  margin-top: 10px
}
.softWarnBox {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  margin-top: 10px;
}

/* === TARGET SETTINGS === */
.target-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 10px;
  max-height: 200px;
  overflow-y: auto;
  padding-right: 8px;
}

.target-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 14px;
}

.remove-target {
  cursor: pointer;
  color: #ff6e40;
  font-weight: bold;
}

.add-target-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Light Mode Overrides */
.light-mode .scoreHint {
  color: rgba(15, 23, 42, 0.8);
}

.light-mode .scoreHint b {
  color: #0f172a;
}

.light-mode #adminBadge {
  background: rgba(1, 59, 194, 0.15) !important;
  color: #013bc2 !important;
}

.light-mode .duke-btn {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
}

.light-mode .tabular-head {
  color: rgba(15, 23, 42, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.light-mode .metric-nums {
  color: rgba(15, 23, 42, 0.85);
}

.light-mode .metric-nums b {
  color: #0f172a;
}

.light-mode .bulletGraph {
  background: rgba(0, 0, 0, 0.08);
}

.light-mode .bulletPaceBg {
  background: rgba(0, 0, 0, 0.08);
}

.light-mode .bulletTick {
  background: #000;
}

.light-mode .bulletLine {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.45) 0 3px,
    rgba(0, 0, 0, 0.08) 3px 6px
  );
}

.light-mode .tabular-row .metric-name.bad { color: #D32F2F; }
.light-mode .tabular-row .metric-name.warn { color: #F57C00; }
.light-mode .tabular-row .metric-name.good { color: #388E3C; }
.light-mode .tabular-row .metric-name.great { color: #0097A7; text-shadow: none; }

.light-mode .tabular-row .metric-nums.bad b { color: #D32F2F; }
.light-mode .tabular-row .metric-nums.warn b { color: #F57C00; }
.light-mode .tabular-row .metric-nums.good b { color: #388E3C; }
.light-mode .tabular-row .metric-nums.great b { color: #0097A7; }

.light-mode .tabular-row .bulletFill.bad {
  background: #FFCDD2;
  border-color: #D32F2F;
  box-shadow: inset 0 1px 0 rgba(211, 47, 47, 0.24);
}
.light-mode .tabular-row .bulletFill.warn {
  background: #FFE0B2;
  border-color: #F57C00;
  box-shadow: inset 0 1px 0 rgba(245, 124, 0, 0.22);
}
.light-mode .tabular-row .bulletFill.good {
  background: #C8E6C9;
  border-color: #388E3C;
  box-shadow: inset 0 1px 0 rgba(56, 142, 60, 0.22);
}
.light-mode .tabular-row .bulletFill.great {
  background: #B2EBF2;
  border-color: #0097A7;
  box-shadow: inset 0 1px 0 rgba(0, 151, 167, 0.24);
}

.light-mode .tabular-row .pts-col.bad { color: #D32F2F; }
.light-mode .tabular-row .pts-col.warn { color: #F57C00; }
.light-mode .tabular-row .pts-col.good { color: #388E3C; }
.light-mode .tabular-row .pts-col.great { color: #0097A7; }

.light-mode .footer {
  color: rgba(15, 23, 42, 0.6);
}

.light-mode .hint {
  color: rgba(15, 23, 42, 0.65);
}

.light-mode .help-doc {
  color: rgba(15, 23, 42, 0.85);
}

.light-mode .field label {
  color: rgba(15, 23, 42, 0.7);
}

.light-mode input,
.light-mode select,
.light-mode textarea {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: rgba(15, 23, 42, 0.95);
}

.light-mode input:focus,
.light-mode textarea:focus {
  border-color: var(--brand);
}

.light-mode .warnBox {
  color: rgba(15, 23, 42, 0.86);
  background: rgba(225, 29, 72, 0.1);
}
.light-mode .softWarnBox {
  color: rgba(15, 23, 42, 0.88);
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.3);
}

.light-mode .section-title {
  color: rgba(15, 23, 42, 0.75);
}

.light-mode .target-pct-label {
  color: #0f172a;
  font-weight: 900;
}

.light-mode .drag-subtext,
.light-mode .projected-target {
  color: rgba(15, 23, 42, 0.8);
}

.light-mode .chip {
  color: rgba(15, 23, 42, 0.85);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.light-mode .brand .hint {
  color: rgba(15, 23, 42, 0.65);
}

.light-mode .target-item {
  background: rgba(0, 0, 0, 0.06);
  color: rgba(15, 23, 42, 0.85);
}

.light-mode .remove-target {
  color: var(--danger);
}

/* === CALCULATIONS VIEW SPECIFIC === */
/* The underlying calculations demo requested a specific dark grey theme */
.calc-modal {
  background: rgba(24, 24, 27, 0.95);
  /* Tailwind zinc-900 */
  border-color: rgba(255, 255, 255, 0.1);
}

.calc-card {
  background: rgba(39, 39, 42, 0.6);
  /* Tailwind zinc-800 */
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
}

/* Base table styling for OCs */
.calc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

.calc-table th,
.calc-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.calc-table th {
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.calc-table tr:last-child td {
  border-bottom: none;
}

.calc-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}

/* Inner Badge logic */
.badge {
  padding: 4px 8px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge.success {
  background: rgba(16, 185, 129, 0.15);
  color: var(--good);
}

.badge.danger {
  background: rgba(244, 63, 94, 0.15);
  color: var(--danger);
}

.badge.warn {
  background: rgba(251, 191, 36, 0.15);
  color: var(--warn);
}

.badge.neutral {
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted);
}

.badge.brand {
  background: rgba(59, 130, 246, 0.15);
  color: var(--brand);
}

/* Information note blocks */
.calc-note {
  background: rgba(251, 191, 36, 0.1);
  border-left: 4px solid var(--warn);
  padding: 12px 16px;
  margin-top: 16px;
  border-radius: 4px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.calc-note.info {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: var(--brand);
}

.code-inline {
  background: rgba(0, 0, 0, 0.3);
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.85em;
  color: var(--brand);
}

/* Data Grids for Boosters/Standard */
.calc-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.calc-data-item {
  background: rgba(0, 0, 0, 0.25);
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.calc-data-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  font-weight: 700;
}

.calc-data-value {
  font-size: 20px;
  font-weight: 900;
  color: var(--text);
}

.calc-data-value.small {
  font-size: 16px;
}

/* Light mode overrides for the calculations modal */
.light-mode .calc-modal {
  background: rgba(244, 244, 245, 0.95);
  /* Tailwind zinc-100 */
  border-color: rgba(0, 0, 0, 0.1);
}

.light-mode .calc-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.1);
}

.light-mode .calc-table th {
  color: rgba(15, 23, 42, 0.6);
}

.light-mode .calc-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.light-mode .calc-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.03);
}

.light-mode .calc-note {
  color: rgba(15, 23, 42, 0.85);
}

.light-mode .calc-data-item {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

.light-mode .calc-data-value {
  color: rgba(15, 23, 42, 0.95);
}

/* === ENHANCEMENTS & NEW COMPONENTS === */
/* Tooltips for Metric Bars */
.tooltip-container {
  position: relative;
}

.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 100;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--bg2);
  color: var(--text);
  border: 1px solid var(--glassBorder);
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  white-space: normal;
  min-width: 260px;
  max-width: 320px;
  opacity: 0;
  box-shadow: var(--shadow);
  transition: opacity 0.2s, visibility 0.2s;
  pointer-events: none;
}

.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

.tooltip-title {
  font-weight: 800;
  color: var(--text);
  margin-bottom: 2px;
}

.tooltip-subtitle {
  color: var(--muted);
  font-size: 11px;
  margin-bottom: 8px;
}

.tooltip-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tooltip-section:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tooltip-section-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brandCyan);
  margin-bottom: 6px;
}

.tooltip-metric-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: baseline;
}

.tooltip-metric-label {
  color: var(--muted);
}

.tooltip-metric-label-strong {
  color: var(--text);
  font-weight: 700;
}

.tooltip-metric-value {
  color: var(--text);
  font-weight: 700;
}

.tooltip-metric-value-strong {
  font-weight: 800;
  color: #ffffff;
}

.tooltip-note {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.4;
}

.tooltip-note + .tooltip-note {
  margin-top: 4px;
}

.tooltip-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tooltip-pill.warn {
  color: var(--warn);
  background: rgba(255, 184, 77, 0.14);
  border: 1px solid rgba(255, 184, 77, 0.28);
}

.tooltip-pill.good {
  color: var(--good);
  background: rgba(34, 197, 94, 0.14);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

/* Overachiever Text */
.overachiever-tag {
  font-size: 10px;
  color: #ff00ff;
  background: rgba(255, 0, 255, 0.15);
  padding: 2px 6px;
  border-radius: 99px;
  margin-left: 8px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.chillout-tag {
  font-size: 10px;
  color: var(--brandCyan);
  background: rgba(0, 255, 255, 0.15);
  padding: 2px 6px;
  border-radius: 99px;
  margin-left: 8px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
}

.kpi-override-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 184, 77, 0.35);
  background: rgba(255, 184, 77, 0.14);
  color: var(--warn);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

.status-accent-warn {
  color: var(--warn);
  font-weight: 700;
}

.kpi-status-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.kpi-status-chip.good {
  color: var(--good);
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.24);
}

.kpi-status-chip.warn {
  color: var(--warn);
  background: rgba(255, 184, 77, 0.14);
  border-color: rgba(255, 184, 77, 0.24);
}

.kpi-status-chip.bad {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.24);
}

.kpi-status-chip.great {
  color: var(--brandCyan);
  background: rgba(34, 211, 238, 0.14);
  border-color: rgba(34, 211, 238, 0.24);
}

/* Marauder Status Pulsing Pink Animation */
@keyframes pulse-pink {
  0% {
    text-shadow: 0 0 10px rgba(255, 0, 255, 0), 0 0 20px rgba(255, 0, 255, 0);
    transform: scale(1);
  }

  50% {
    text-shadow: 0 0 15px rgba(255, 0, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.4);
    transform: scale(1.02);
  }

  100% {
    text-shadow: 0 0 10px rgba(255, 0, 255, 0), 0 0 20px rgba(255, 0, 255, 0);
    transform: scale(1);
  }
}

.pulse-achieved {
  color: #ff00ff;
  font-weight: 900;
  animation: pulse-pink 2.5s infinite ease-in-out;
  display: inline-block;
}

/* Faction Restricted 525 Overlay */
.deny-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.deny-content {
  text-align: center;
  max-width: 560px;
  padding: 28px 28px 30px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #080808;
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.52);
}

.deny-content img {
  width: min(100%, 340px);
  max-width: 340px;
  display: block;
  margin: 0 auto 22px;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
  border: 2px solid #ff8a00;
  box-shadow: none;
  filter: none;
}

.deny-text {
  color: #ff8a00;
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: none;
  margin-bottom: 32px;
}

/* Custom Scrollbars for Details Modal to match theme */
.calc-modal::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.admin-only::-webkit-scrollbar {
  width: 10px;
}

.calc-modal::-webkit-scrollbar-track,
.modal::-webkit-scrollbar-track,
.admin-only::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.calc-modal::-webkit-scrollbar-thumb,
.modal::-webkit-scrollbar-thumb,
.admin-only::-webkit-scrollbar-thumb {
  background: var(--brandCyan);
  border-radius: 4px;
}

.light-mode .calc-modal::-webkit-scrollbar-track,
.light-mode .modal::-webkit-scrollbar-track,
.light-mode .admin-only::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
}

.light-mode .calc-modal::-webkit-scrollbar-thumb,
.light-mode .modal::-webkit-scrollbar-thumb,
.light-mode .admin-only::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
}
.help-modal {
  max-height: 85vh;
  overflow-y: auto;
}

.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brandCyan);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .loader-anvil {
    animation: pulse-loader 1.1s ease-in-out infinite !important;
  }
}
.view-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.month-toggle,
.view-toggle {
  display: inline-flex;
  gap: 8px;
}

.month-toggle .btn,
.view-toggle .btn {
  padding: 6px 10px;
  font-size: 12px;
}

.month-btn-wrap {
  display: inline-flex;
}

.month-toggle .btn.active,
.view-toggle .btn.active {
  background: var(--brandGradient);
  border-color: rgba(59, 130, 246, 0.65);
  color: var(--text);
}

.month-toggle .btn.month-disabled {
  opacity: 0.4;
}

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

.dialSvg {
  width: 42px;
  height: 42px;
}

.dialTrack {
  fill: none;
  stroke: rgba(255, 255, 255, 0.14);
  stroke-width: 4;
}

.dialPace {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 2;
}

.dialFill {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.dialFill.bad { stroke: #FF5252; }
.dialFill.warn { stroke: #FFB74D; }
.dialFill.good { stroke: #4CAF50; }
.dialFill.great { stroke: #00ffff; }

.dialPct {
  position: absolute;
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
}
.dial-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 16px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

 .legend-swatch.marker {
  background: rgba(255, 255, 255, 0.28);
}

.legend-swatch.progress-arc {
  background: var(--brandCyan);
}

.dial-tile-row {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
}

.dial-tile-row.cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dial-tile-row.cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dial-tile {
  background: rgba(15, 23, 42, 0.74);
  border: 1px solid var(--glassBorder);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  min-height: 168px;
}

.light-mode .dial-tile {
  background: rgba(255, 255, 255, 0.74);
}

.dial-tile::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 18px;
  border: 3px solid var(--dialTileRing);
  box-shadow: 0 0 0 1px var(--dialTileGlow);
  pointer-events: none;
}

.dial-tile-head {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 4px;
}

.dial-tile-sub {
  font-size: 12px;
  color: var(--muted);
}

.dialSvg.large {
  width: 64px;
  height: 64px;
}

.dial-tile-points {
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 980px) {
  .dial-tile-row.cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .view-toggle-row {
    justify-content: flex-start;
  }
  .dial-tile-row.cols-2,
  .dial-tile-row.cols-4 {
    grid-template-columns: 1fr;
  }
  .dial-legend {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
.gaugeGraph {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gaugeSvg {
  width: 170px;
  height: 104px;
}

.gaugeHalo {
  fill: none;
  stroke: #2C2C2E;
  stroke-width: 14;
  stroke-linecap: round;
}
.gaugeTrack {
  fill: none;
  stroke: #2C2C2E;
  stroke-width: 10;
  stroke-linecap: round;
}

.gaugeProgress {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
}

.gaugeProgress.bad { stroke: #FF5252; }
.gaugeProgress.warn { stroke: #FFB74D; }
.gaugeProgress.good { stroke: #4CAF50; }
.gaugeProgress.great { stroke: #00E5FF; }

.gaugeMarker {
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
}

.gaugePct {
  position: absolute;
  top: 62px;
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
}
.light-mode .gaugeHalo {
  stroke: #E0E0E0;
}

.light-mode .gaugeTrack {
  stroke: #E0E0E0;
}

.light-mode .gaugeProgress.bad { stroke: #D32F2F; }
.light-mode .gaugeProgress.warn { stroke: #F57C00; }
.light-mode .gaugeProgress.good { stroke: #388E3C; }
.light-mode .gaugeProgress.great { stroke: #0097A7; }

.light-mode .dialFill.bad { stroke: #D32F2F; }
.light-mode .dialFill.warn { stroke: #F57C00; }
.light-mode .dialFill.good { stroke: #388E3C; }
.light-mode .dialFill.great { stroke: #0097A7; }

.light-mode .gaugeMarker {
  stroke: #000000;
}

@keyframes pulse-loader {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}

.pace-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 14px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--muted);
}

.pace-legend.bottom-left {
  margin-left: 0;
}

.month-compare {
  margin-bottom: 14px;
}

.month-compare-table th,
.month-compare-table td {
  white-space: nowrap;
}

.tos-modal {
  max-width: 720px;
}

.tos-full-text {
  margin: 0;
  max-height: 56vh;
  overflow: auto;
  white-space: pre-wrap;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--glassBorder);
  background: rgba(0, 0, 0, 0.22);
}

.tos-rich {
  max-height: 56vh;
  overflow: auto;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--glassBorder);
  background: rgba(0, 0, 0, 0.18);
}

.tos-rich h2 {
  margin: 14px 0 8px;
  font-size: 17px;
  letter-spacing: 0.01em;
}

.tos-rich h3 {
  margin: 12px 0 7px;
  font-size: 14px;
  color: var(--brandCyan);
}

.tos-rich p {
  margin: 8px 0;
  line-height: 1.6;
}

.tos-rich ul,
.tos-rich ol {
  margin: 8px 0 10px 20px;
  padding: 0;
}

.tos-rich li {
  margin: 4px 0;
  line-height: 1.5;
}

.tos-rich hr {
  border: 0;
  border-top: 1px solid var(--glassBorder);
  margin: 14px 0;
}

.tos-rich code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--glassBorder);
  background: rgba(0, 0, 0, 0.25);
}

.tos-table-wrap {
  overflow-x: auto;
  margin: 10px 0 12px;
}

.tos-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.tos-table th,
.tos-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border: 1px solid var(--glassBorder);
}

.tos-table th {
  background: rgba(59, 130, 246, 0.14);
  font-weight: 800;
}

.compare-modal {
  max-width: 980px;
}

.pace-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pace-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}
.pace-dot.bad { background: #FF5252; }
.pace-dot.warn { background: #FFB74D; }
.pace-dot.good { background: #4CAF50; }
.pace-dot.great { background: #00E5FF; }

.light-mode .pace-dot.bad { background: #D32F2F; }
.light-mode .pace-dot.warn { background: #F57C00; }
.light-mode .pace-dot.good { background: #388E3C; }
.light-mode .pace-dot.great { background: #0097A7; }

.loader-anvil {
  width: 78px;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 14px rgba(0, 255, 255, 0.35));
  animation: anvil-bob 1.05s ease-in-out infinite;
}

.loader-anvil-img {
  width: 78px;
  height: 78px;
  object-fit: contain;
}



@keyframes anvil-bob {
  0%,
  100% {
    transform: translateY(0) scale(0.98);
  }
  50% {
    transform: translateY(-5px) scale(1);
  }
}






.city-icon {
  object-fit: cover;
}

.city-icon-lg {
  width: 120px;
  height: 120px;
  border-radius: 20px;
}

.city-icon-sm {
  width: 34px;
  height: 34px;
  border-radius: 6px;
}

.mb-24 { margin-bottom: 24px; }
.mt-16 { margin-top: 16px; }
.input-lg { font-size: 16px; padding: 14px; }

.brand-title { font-weight: 900; letter-spacing: 0.06em; font-size: 26px; margin-top: 0; }
.card-relative { position: relative; }
.score-head-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }
.player-meta { font-weight: 800; color: var(--brand); font-size: 14px; text-align: right; line-height: 1.2; }
.player-nav-id { font-size: 11px; opacity: 0.8; }
.admin-badge { font-size: 10px; background: rgba(0,255,255,0.15); color: #00ffff; padding: 2px 6px; border-radius: 4px; margin-top: 4px; display: inline-block; }
.projected-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: -2px; margin-bottom: 2px; }
.threshold-text { font-weight: 800; }
.actual-score-text { font-weight: 700; color: var(--brandCyan); font-size: 14px; margin-bottom: 4px; }
.section-title-tight { margin-bottom: 6px; }
.drag-list {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  max-height: 110px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--brandCyan) rgba(0, 0, 0, 0.2);
}
.drag-list::-webkit-scrollbar { width: 9px; }
.drag-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}
.drag-list::-webkit-scrollbar-thumb {
  background: var(--brandCyan);
  border-radius: 8px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
.drag-list::-webkit-scrollbar-thumb:hover { background: #79f6ff; }
.drag-item { margin-bottom: 8px; }
.drag-item:last-child { margin-bottom: 0; }
.drag-title { color: var(--text); font-weight: 700; }
.drag-subtext {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  font-size: 13px;
  align-items: baseline;
  margin-top: 2px;
}
.drag-col { min-width: 0; white-space: nowrap; }
.drag-col-right { text-align: right; }
.drag-sep { opacity: 0.3; font-size: 10px; }
.drag-miss-pace { color: var(--danger); font-weight: 700; }
.drag-miss-target { color: var(--warn); font-weight: 700; }
.light-mode .drag-list {
  scrollbar-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.08);
}
.light-mode .drag-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
}
.light-mode .drag-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.35);
  border-color: rgba(0, 0, 0, 0.08);
}
@media (max-width: 760px) {
  .drag-subtext {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .drag-col { white-space: normal; }
  .drag-col-right { text-align: left; }
  .drag-sep { display: none; }
}
.tabular-head-tight { margin-top: 16px; }
.align-right { text-align: right; }
.pos-rel { position: relative; }
.target-pct-marker { position: absolute; left: 90.909%; top: -2px; transform: translateX(-50%); font-weight: 800; font-size: 10px; }
.btn-icon { display: flex; align-items: center; }
.btn-logout { color: #000; background: var(--warn); border-color: var(--warn); font-weight: 900; }
.loading-overlay { z-index: 999; flex-direction: column; gap: 16px; }
.loading-title { font-weight: 700; font-size: 14px; letter-spacing: 0.05em; color: var(--brandCyan); }
.loading-subtext { max-width: 300px; text-align: center; }
.duke-btn-full { width: 100%; font-weight: 900; }
.theme-row { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.theme-row-label { font-size: 14px; font-weight: 700; color: var(--text); }
.switch-compact { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch-input-hidden { opacity: 0; width: 0; height: 0; }



/* Inline-style extraction helpers */
.status-row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: flex-start; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.status-col { flex: 1; min-width: 300px; }
.baseline-chip {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.baseline-chip.ok { border-color: rgba(16,185,129,0.6); color: #10b981; }
.baseline-chip.warn { border-color: rgba(251,191,36,0.65); color: #fbbf24; }
.baseline-chip.bad { border-color: rgba(244,63,94,0.65); color: #f43f5e; }
.mt-10 { margin-top: 10px; }
.mt-8 { margin-top: 8px; }
.mt-6 { margin-top: 6px; }
.action-row-end { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; }
.btn-refresh-now {
  border-color: rgba(56, 189, 248, 0.42);
  color: var(--brandCyan);
}
.btn-refresh-now:hover {
  border-color: rgba(56, 189, 248, 0.62);
  color: #9af6ff;
}
.btn-refresh-now svg { margin-right: 4px; }
.icon-mr-4 { margin-right: 4px; }
.switch-track { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2); border-radius: 34px; transition: .4s; }
.switch-thumb { position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: .4s; }
.admin-scroll { max-height: 45vh; overflow-y: auto; overflow-x: hidden; padding-right: 12px; }
.hr-subtle { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 16px 0; }
.admin-head-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.admin-title { margin: 0; font-size: 16px; color: var(--warn); }
.btn-compact { font-size: 12px; padding: 6px 10px; }
.modal-actions-space { justify-content: space-between; width: 100%; }
.action-row-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-sm { max-width: 500px; }
.hint-tight { margin-bottom: 12px; line-height: 1.4; }
.target-list-max { max-height: 250px; }
.flex-1 { flex: 1; }
.modal-actions-top-space { margin-top: 16px; justify-content: space-between; }
.help-title { margin-top: 0; color: var(--warn); font-size: 18px; }
.help-intro { margin-top: 0; margin-bottom: 12px; font-size: 13px; color: rgba(255,255,255,0.8); }
.help-card { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.help-card-title { margin: 0 0 6px 0; font-size: 14px; color: var(--text); }
.help-card-body { margin: 0; font-size: 12px; color: rgba(255,255,255,0.7); }
.help-card-last { background: rgba(0,0,0,0.2); border-radius: 8px; padding: 12px; }
.calc-modal-wide { max-width: 900px; max-height: 90vh; overflow-y: auto; }
.calc-head-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; }
.calc-title { font-weight: 900; letter-spacing: 0.05em; font-size: 18px; margin-top: 2px; }
.calc-subtitle { color: var(--brand); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }
.calc-muted-intro { color: var(--muted); font-size: 13px; margin-top: 4px; margin-bottom: 16px; }
.overflow-x-auto { overflow-x: auto; }
.text-right { text-align: right; }
.text-center-muted { text-align: center; color: var(--muted); }
.calc-grid-gap { margin-bottom: 24px; gap: 24px; }
.calc-grid-two { grid-template-columns: 1fr 1fr; margin-top: 16px; }
.muted-inline-13 { font-size: 13px; color: var(--muted); font-weight: 400; }
.grid-col-all { grid-column: 1 / -1; }
.muted-note-12 { font-size: 12px; color: var(--muted); font-weight: 400; padding-left: 8px; font-family: 'Inter', sans-serif; }
.calc-total-row { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--glassBorder); display: flex; justify-content: space-between; align-items: center; }
.calc-total-label { font-size: 14px; color: var(--muted); font-weight: 700; }
.calc-total-value { font-size: 24px; font-weight: 900; color: var(--brand); }
.stack-24 { display: flex; flex-direction: column; gap: 24px; }
.calc-grid-one { grid-template-columns: 1fr; margin-top: 16px; }
.calc-row-divider { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--glassBorder); }
.m-0 { margin: 0; }
.calc-row { display: flex; justify-content: space-between; padding: 8px 0; }
.brand-text { color: var(--brand); }
.brand-value-20 { color: var(--brand); font-size: 20px; }
.calc-alert { margin-top: 12px; font-size: 12px; padding: 10px; border-left-color: var(--danger); background: rgba(244, 63, 94, 0.1); }
.btn-fetch-daily { margin-top: 16px; width: 100%; justify-content: center; border: 1px solid var(--brandCyan); color: var(--brandCyan); font-weight: 800; text-transform: uppercase; }
.fetch-daily-results { margin-top: 12px; display: none; font-size: 12px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 12px; }
.muted-block-12 { color: var(--muted); font-size: 12px; margin-top: 4px; margin-bottom: 16px; }
.stack-8 { display: flex; flex-direction: column; gap: 8px; }
.calc-grid-three { grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
.muted-note-11 { font-size: 11px; color: var(--muted); margin-top: 4px; }
.muted-inline-20 { color: var(--muted); font-weight: 400; font-size: 20px; }

#btnSortPace {
  cursor: pointer;
}

#sortPaceIcon {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 4px;
}