/* ─── PEARL Mining Pool Dashboard ────────────────────────────────────── */

:root {
  --bg-primary: #0a0a0f;
  --bg-card: #12121a;
  --bg-card-hover: #1a1a28;
  --border: #1e1e2e;
  --accent: #7c3aed;
  --accent-light: #a78bfa;
  --accent-glow: rgba(124, 58, 237, 0.15);
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --info: #3b82f6;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --transition: 0.2s ease;
}

/* ─── Reset ──────────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--accent-light);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--accent);
}

/* ─── Typography ─────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.3;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

.mono {
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: -0.02em;
}

/* ─── Layout ─────────────────────────────────────────────────────────── */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ─── Header / Navbar ────────────────────────────────────────────────── */

.navbar {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(12px);
  background: rgba(18, 18, 26, 0.9);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.navbar-brand .logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--accent), #a78bfa, #c4b5fd);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.navbar-brand h1 {
  font-size: 1.25rem;
  background: linear-gradient(135deg, var(--accent-light), #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-brand .badge {
  font-size: 0.65rem;
  background: var(--accent-glow);
  color: var(--accent-light);
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  border: 1px solid rgba(124, 58, 237, 0.3);
  font-family: var(--font-mono);
}

.navbar-nav {
  display: flex;
  gap: 0.25rem;
  list-style: none;
}

.navbar-nav a {
  display: block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--transition);
}

.navbar-nav a:hover,
.navbar-nav a.active {
  color: var(--text-primary);
  background: var(--accent-glow);
}

.navbar-nav a.active {
  color: var(--accent-light);
}

.navbar-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.network-height {
  font-family: var(--font-mono);
  color: var(--accent-light);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
  animation: pulse 2s infinite;
}

.status-dot.disconnected {
  background: var(--danger);
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ─── Page Content ───────────────────────────────────────────────────── */

.page {
  padding: 2rem 0;
}

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

.page-header h2 {
  margin-bottom: 0.25rem;
}

.page-header p {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* ─── Cards ──────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color var(--transition);
}

.card:hover {
  border-color: rgba(124, 58, 237, 0.3);
}

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

.card-header h3 {
  font-size: 0.95rem;
  color: var(--text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ─── Stat Cards Grid ────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  opacity: 0;
  transition: opacity var(--transition);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover {
  border-color: rgba(124, 58, 237, 0.3);
  transform: translateY(-1px);
}

.stat-card .stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-primary);
  transition: color 0.3s;
}

.stat-card .stat-value.updating {
  color: var(--accent-light);
}

.stat-card .stat-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

/* ─── Tables ─────────────────────────────────────────────────────────── */

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

thead th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

tbody td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(30, 30, 46, 0.5);
  white-space: nowrap;
}

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover {
  background: rgba(124, 58, 237, 0.05);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ─── Status Badges ──────────────────────────────────────────────────── */

.badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge-pending {
  background: rgba(234, 179, 8, 0.15);
  color: var(--warning);
  border: 1px solid rgba(234, 179, 8, 0.3);
}

.badge-confirmed {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-orphan {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ─── Search / Input ─────────────────────────────────────────────────── */

.search-box {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.search-box input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--transition);
}

.search-box input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

/* ─── Buttons ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  font-family: var(--font-sans);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
}

.btn-primary:hover {
  color: #fff;
  background: #6d28d9;
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent-light);
}

.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.8rem;
}

.btn-icon {
  padding: 0.5rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition);
}

.btn-icon:hover {
  border-color: var(--accent);
  color: var(--accent-light);
}

/* ─── Pagination ─────────────────────────────────────────────────────── */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pagination button {
  padding: 0.4rem 0.8rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.8rem;
  transition: all var(--transition);
}

.pagination button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent-light);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.pagination .page-info {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0 0.5rem;
}

/* ─── Miner Dashboard ────────────────────────────────────────────────── */

.miner-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.miner-stat {
  text-align: center;
  padding: 1.25rem;
}

.miner-stat .stat-value {
  font-size: 1.25rem;
}

/* ─── Shares Chart (CSS bars) ────────────────────────────────────────── */

.shares-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 0.5rem 0;
}

.shares-chart .bar {
  flex: 1;
  background: linear-gradient(to top, var(--accent), var(--accent-light));
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: height 0.3s ease;
  position: relative;
}

.shares-chart .bar:hover {
  opacity: 0.8;
}

.shares-chart .bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ─── Code / Command Generator ───────────────────────────────────────── */

.code-block {
  background: #0d0d14;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #a5d6ff;
  overflow-x: auto;
  position: relative;
  line-height: 1.7;
}

.code-block .copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.3rem 0.6rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all var(--transition);
}

.code-block .copy-btn:hover {
  border-color: var(--accent);
  color: var(--accent-light);
}

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

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

.form-group input,
.form-group select {
  width: 100%;
  background: #0d0d14;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* ─── Mining Guide ───────────────────────────────────────────────────── */

.server-list {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.server-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.server-item .server-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.server-item .server-port {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--accent-light);
}

.server-item .server-desc {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.server-item .server-diff {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ─── Section dividers ───────────────────────────────────────────────── */

.section {
  margin-bottom: 2.5rem;
}

.section h3 {
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.section p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}

/* ─── Loading / Empty states ─────────────────────────────────────────── */

.loading {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
}

.loading::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-left: 0.75rem;
  vertical-align: middle;
}

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

.empty-state {
  text-align: center;
  padding: 3rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .navbar .container {
    flex-wrap: wrap;
  }

  .navbar-nav {
    gap: 0;
    flex-wrap: wrap;
  }

  .navbar-nav a {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
  }

  .navbar-info {
    display: none;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .miner-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .search-box {
    flex-direction: column;
  }

  .stat-card .stat-value {
    font-size: 1.2rem;
  }

  h1 { font-size: 1.35rem; }

  .container {
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .miner-stats-grid {
    grid-template-columns: 1fr;
  }

  .server-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ─── Address display ────────────────────────────────────────────────── */

.addr {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent-light);
  word-break: break-all;
}

.hash {
  font-family: var(--font-mono);
  font-size: 0.8em;
  color: var(--text-muted);
}

/* ─── Smooth number transitions ──────────────────────────────────────── */

.animate-number {
  transition: opacity 0.2s;
}

.animate-number.flash {
  opacity: 0.6;
}

/* ─── Footer ─────────────────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  margin-top: 3rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

.footer a {
  color: var(--accent-light);
}

html{scroll-padding-top:100px}.section-stack{display:grid;gap:24px}.muted{color:var(--text-muted)}.content-copy{color:var(--text-secondary);font-size:.875rem;line-height:1.8}.content-copy p+p{margin-top:12px}.wallet-address{overflow-wrap:anywhere;color:var(--accent-light);font-family:var(--font-mono);font-size:.85rem}.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.section-anchor{scroll-margin-top:100px}.warn{color:var(--warning);white-space:pre-wrap}.empty-row{text-align:center;color:var(--text-muted);padding:32px}.table-wrapper td:first-child{font-family:var(--font-mono)}.connection-label{font-size:.75rem}.code-block{white-space:pre-wrap;overflow-wrap:anywhere}.footer{margin-top:20px}.stat-value small{font-size:.7rem;color:var(--text-muted);font-weight:400}.navbar-nav a:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}@media(min-width:1100px){.stats-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(max-width:800px){.policy-grid{grid-template-columns:1fr}.navbar .container{flex-wrap:wrap}.navbar-nav{order:3;overflow:auto;width:100%}.navbar-nav a{white-space:nowrap}.navbar-info{margin-left:auto}}@media(max-width:480px){.navbar-brand h1{font-size:1rem}.navbar-brand .badge{display:none}.navbar-info{gap:.4rem}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card{padding:1rem}.stat-card .stat-label{font-size:.65rem}.stat-card .stat-value{font-size:1.2rem}}
/* Live analytics and wallet pages */
.navbar .container{flex-wrap:wrap;gap:12px}.navbar-nav{flex-wrap:wrap}.navbar-nav a{padding:.5rem .65rem;font-size:.8rem}.navbar-info{margin-left:auto}.section-stack>.stats-grid{margin-bottom:0}.page-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.small{font-size:.78rem}.chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.chart{min-height:230px}.chart svg{display:block;width:100%;height:auto}.chart-legend{display:flex;justify-content:center;gap:20px;font-size:.78rem;margin-top:8px}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.toolbar select,.form-group select{background:#0d0d14;border:1px solid var(--border);border-radius:8px;color:var(--text-primary);padding:9px 12px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}.lookup-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:18px 0}.lookup-form .form-group{flex:1;min-width:220px;margin-bottom:0}.lookup-form button{height:42px}.calculator-form{display:flex;gap:16px;align-items:flex-end}.calculator-form .form-group{flex:1}.earnings-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:20px}.presets,.tabs{display:flex;gap:10px;flex-wrap:wrap}.presets button,.tabs button{border:1px solid var(--border);background:var(--bg-card);border-radius:8px;color:var(--text-secondary);padding:10px 16px;cursor:pointer}.presets button:hover,.tabs button.active{background:var(--accent-glow);color:var(--accent-light);border-color:var(--accent)}.tabs{padding:10px 0}.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px}.pager button:disabled{opacity:.35;cursor:default}.round-head{display:flex;justify-content:space-between;align-items:center}.round-head .stat-value{font:700 2rem var(--font-mono);color:var(--accent-light)}progress{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:block;box-sizing:border-box;width:100%;height:16px;margin:18px 0;accent-color:var(--accent);color:var(--accent);color-scheme:dark;background:var(--border,#222130);border:0;border-radius:8px;overflow:hidden;box-shadow:none}progress::-webkit-progress-bar{background:var(--border,#222130);border:0;border-radius:inherit;box-shadow:none}progress::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-light));border-radius:inherit}progress::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-light));border:0;border-radius:inherit}.info-list{display:grid;gap:0;margin-bottom:20px}.info-list>div{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--border)}.info-list span{color:var(--text-muted)}.info-list strong{text-align:right;font-weight:500}.guide-list{padding-left:24px;color:var(--text-secondary)}.guide-list li{padding:8px}.check-row{display:flex;gap:10px;align-items:center;margin:18px 0}.check-row input{accent-color:var(--accent)}[data-panel]{display:grid;gap:24px}[hidden]{display:none!important}.code-block{margin:18px 0}.text-link{display:inline-block;margin-top:20px}.wallet-link{font-family:var(--font-mono);white-space:nowrap}tbody td{white-space:nowrap}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px}#command-error,#lookup-error,#payment-error{min-height:1em}.content-copy+p{margin-top:15px}
@media(max-width:1050px){.navbar-nav{order:3;width:100%;overflow:auto;flex-wrap:nowrap}.stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.earnings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.chart-grid,.form-grid{grid-template-columns:1fr}.calculator-form{flex-wrap:wrap}.calculator-form .form-group{min-width:130px}.page-header{align-items:flex-start;flex-direction:column}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.info-list>div{flex-direction:column;gap:5px}.info-list strong{text-align:left}.lookup-form{align-items:stretch}.lookup-form .form-group{flex-basis:100%}.card{padding:18px}}
.stat-card .stat-value{overflow-wrap:anywhere;white-space:normal;line-height:1.4;font-size:clamp(1rem,1.7vw,1.6rem)}
@media(min-width:1100px){.public-stats{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* Block history: keep every cell centered on the same row. */
.block-hash-link{font-family:var(--font-mono);white-space:nowrap;color:var(--accent-light);text-decoration:none;font-size:13px;display:inline-block;line-height:24px}
.block-hash-link:hover{color:#dfd2ff;text-decoration:underline}
.block-statuses{display:flex;gap:8px;align-items:center;min-height:28px}
.block-status,.block-test{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid #8b72bc40;border-radius:6px;font-size:11px;line-height:18px;background:#8b72bc14;color:#c5b3ee;white-space:nowrap}
.block-status[data-state=finalized],.block-status[data-state=confirmed],.block-status[data-state=accepted]{background:#32c99312;color:#65d9ac;border-color:#32c99335}
.block-status[data-state=rejected],.block-status[data-state=orphaned]{background:#f4777712;color:#f49b9b;border-color:#f4777735}
.block-test{font-size:9px;letter-spacing:1px;color:#aaa2b7;background:transparent}
.block-effort{width:140px;display:flex;align-items:center;gap:12px;min-height:28px}
.block-effort strong{min-width:48px;font-size:13px;font-weight:600;line-height:20px;color:#68d5ad;font-variant-numeric:tabular-nums;white-space:nowrap}
.block-effort[data-level=high] strong{color:#e8b66d}
.block-effort progress{display:block;flex:1;width:80px;min-width:60px;height:4px;margin:0;border:0;border-radius:4px;accent-color:#68d5ad}
.block-effort progress::-webkit-progress-value{background:#68d5ad}
.block-effort[data-level=high] progress::-webkit-progress-value{background:#e8b66d}
.block-effort progress::-moz-progress-bar{background:#68d5ad}
.block-effort[data-level=high] progress::-moz-progress-bar{background:#e8b66d}
.block-history .qtc-table{table-layout:auto;width:100%}
.block-history .qtc-table th,.block-history .qtc-table td{vertical-align:middle;white-space:nowrap;padding:16px}
.block-history .qtc-table th:first-child,.block-history .qtc-table td:first-child{padding-left:0;width:30%}
.block-history .qtc-table th:last-child,.block-history .qtc-table td:last-child{padding-right:0;text-align:right}
.block-history>p{margin:0 0 16px;line-height:1.6}
.block-history>.table-wrapper+p{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:700px){.block-history .qtc-table{min-width:760px}.block-history .qtc-table th:first-child,.block-history .qtc-table td:first-child{padding-left:0}.block-effort{width:125px}}

.block-pager{padding-top:20px;border-top:1px solid var(--border)}.block-pager .btn{min-width:110px}.block-pager>span{font-variant-numeric:tabular-nums}@media(max-width:480px){.block-pager{gap:8px}.block-pager .btn{min-width:0;padding:8px 12px}.block-pager>span{font-size:11px}}

.block-history .qtc-table tbody td.empty-row{width:auto;max-width:none;text-align:center;padding:32px 16px;font-family:inherit;vertical-align:middle}