/* ============================================================
   UGTLD v3 — Academic Light Theme
   UGT Lab for Discovery · Enzyme Engineering Platform
   
   Design System:
   - Clean white/ivory background
   - Sky blue + Emerald scientific accents
   - Crimson Pro headings (academic serif)
   - Atkinson Hyperlegible body (accessible)
   - JetBrains Mono for code/sequences
   - Card-based layout with subtle shadows
   - Sidebar navigation with SVG icons
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens ── */
:root {
  /* Surfaces — Clean White Academic */
  --bg-deep:      #FFFFFF;
  --bg-base:      #F8FAF8;
  --bg-raised:    #F1F5F1;
  --bg-card:      #FFFFFF;
  --bg-card-hover:#F0F7F0;
  --bg-input:     #FFFFFF;
  --bg-sidebar:   #1B5E20;
  --bg-nav:       #F8FAF8;
  --bg-tooltip:   #E8F5E9;

  /* Accents — Botanical Deep Green */
  --primary:      #2E7D32;
  --primary-dim:  #1B5E20;
  --primary-glow: rgba(46,125,50,0.08);
  --secondary:    #4CAF50;
  --secondary-dim:#388E3C;
  --secondary-glow:rgba(76,175,80,0.08);
  --accent:       #66BB6A;
  --warning:      #E67E22;
  --warning-glow: rgba(230,126,34,0.08);
  --danger:       #C0392B;
  --danger-glow:  rgba(192,57,43,0.08);
  --success:      #4CAF50;

  /* Text — Dark on white, high readability */
  --text-primary:   #1F2937;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;
  --text-inverse:   #FFFFFF;

  /* Borders — Light gray, subtle */
  --border:         #E5E7EB;
  --border-light:   #F3F4F6;
  --border-subtle:  #F9FAFB;
  --border-glow:    rgba(46,125,50,0.20);
  --border-card:    #E5E7EB;

  /* Radii */
  --radius-sm:  6px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-xl:  16px;

  /* Shadows — Light mode */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.04);
  --shadow:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.02);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-glow:0 0 16px rgba(46,125,50,0.06);

  /* Typography */
  --font-heading:'Crimson Pro', 'Georgia', 'Noto Serif SC', 'Times New Roman', serif;
  --font-body:   'Atkinson Hyperlegible', 'Segoe UI', 'Noto Sans SC', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Layout */
  --sidebar-w:   64px;
  --sidebar-w-expanded: 240px;
  --nav-h:       0px;
  --transition:  200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-primary);
  background: var(--bg-deep);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a { color: var(--primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--primary); }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; color: inherit; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ── App Shell ── */
.v4-app {
  display: flex;
  min-height: 100vh;
  position: relative;
}

/* ══════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   ══════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: width var(--transition-slow);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.sidebar:hover,
.sidebar.expanded {
  width: var(--sidebar-w-expanded);
}

/* Sidebar Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--border);
  min-height: 60px;
  white-space: nowrap;
}

.sidebar-logo {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 2px 8px rgba(46,125,50,0.2);
}

.sidebar-brand-text {
  opacity: 0;
  transition: opacity var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.sidebar:hover .sidebar-brand-text,
.sidebar.expanded .sidebar-brand-text {
  opacity: 1;
}

.sidebar-brand-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.sidebar-brand-ver {
  font-size: 11px;
  color: var(--primary);
  font-weight: 500;
}

/* Sidebar Nav Groups */
.sidebar-nav {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar-section-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  padding: 12px 12px 4px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.sidebar:hover .sidebar-section-label,
.sidebar.expanded .sidebar-section-label {
  opacity: 1;
}

.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 12px;
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.sidebar:hover .sidebar-divider,
.sidebar.expanded .sidebar-divider {
  opacity: 1;
}

/* Nav Items */
.v4-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
}

.v4-nav-item:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
}

.v4-nav-item.active {
  background: var(--primary-glow);
  color: var(--primary);
}

.v4-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--primary);
  border-radius: 0 2px 2px 0;
}

/* Nav Icons (SVG) */
.nav-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  opacity: 0.7;
  transition: opacity var(--transition);
  stroke: currentColor;
}

.v4-nav-item.active .nav-icon { opacity: 1; }
.v4-nav-item:hover .nav-icon { opacity: 0.9; }

.nav-label {
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.sidebar:hover .nav-label,
.sidebar.expanded .nav-label {
  opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 8px;
  border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════
   MAIN CONTENT AREA
   ══════════════════════════════════════════════════ */
.v4-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  padding: 0;
  transition: margin-left var(--transition-slow);
}

/* ══════════════════════════════════════════════════
   TOP HEADER BAR (Status Bar)
   ══════════════════════════════════════════════════ */
.v4-topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 24px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  min-height: 56px;
}

/* Status area */
.v4-topnav-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.v4-pool-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  transition: all var(--transition);
}

.v4-pool-trigger:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-glow);
}

#poolCount {
  color: var(--warning);
  font-weight: 700;
}

.v4-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════
   PAGES
   ══════════════════════════════════════════════════ */
.v4-page {
  display: none;
  padding: 24px 32px 64px;
}

.v4-page.active {
  display: block;
  animation: pageIn 300ms ease-out;
}

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

/* ══════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════ */
.v4-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.v4-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
}

.v4-card h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.v4-card h4 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.v4-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════
   HERO AREA (Home Page)
   ══════════════════════════════════════════════════ */
.v4-hero-compact {
  background: linear-gradient(135deg, #E8F5E9 0%, #F1F8E9 30%, #F8FAF8 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.v4-hero-compact h2 {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}

.v4-subtitle {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

/* Metric Grid */
.v4-metric-grid {
  display: flex;
  gap: 24px;
  position: relative;
  z-index: 1;
}

.v4-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.v4-metric b {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--primary);
}

.v4-metric span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ══════════════════════════════════════════════════
   FLOW / PIPELINE
   ══════════════════════════════════════════════════ */
.v4-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding: 20px;
  background: var(--bg-base);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.v4-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  min-width: 90px;
  box-shadow: var(--shadow-sm);
}

.v4-flow-step:hover {
  border-color: var(--primary);
  background: var(--primary-glow);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.v4-flow-icon {
  font-size: 20px;
}

.v4-flow-step b {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.v4-small {
  font-size: 10.5px;
  color: var(--text-muted);
}

.v4-flow-arrow {
  color: var(--text-muted);
  font-size: 18px;
  font-weight: 300;
}

/* Step Flow (Docking) */
.v4-step-flow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.v4-step {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-base);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary-dim);
  transition: border-color var(--transition);
}

.v4-step:hover {
  border-left-color: var(--primary);
}

.v4-step-num {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.v4-step-body { flex: 1; }
.v4-step-body h4 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

/* ══════════════════════════════════════════════════
   TABLES
   ══════════════════════════════════════════════════ */
.v4-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 12px;
}

.v4-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--border);
  white-space: nowrap;
  background: var(--bg-base);
}

.v4-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}

.v4-table tbody tr:hover {
  background: #F0F7F0;
}

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

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
.v4-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.v4-btn.primary {
  background: linear-gradient(135deg, #2E7D32, #2E7D32);
  color: #fff;
  border: 1px solid rgba(46,125,50,0.3);
  box-shadow: 0 1px 3px rgba(46,125,50,0.15);
}

.v4-btn.primary:hover {
  background: linear-gradient(135deg, #4CAF50, #2E7D32);
  box-shadow: 0 2px 8px rgba(46,125,50,0.2);
  transform: translateY(-1px);
}

.v4-btn.light {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.v4-btn.light:hover {
  background: var(--bg-raised);
  color: var(--text-primary);
  border-color: var(--primary);
}

.v4-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: all var(--transition);
}

.v4-btn-outline:hover {
  background: var(--primary-glow);
}

.v4-btn.small {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}

.v4-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════ */
.v4-input,
.v4-select {
  padding: 8px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 13px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  width: 100%;
}

.v4-input:focus,
.v4-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
}

.v4-input::placeholder { color: var(--text-muted); }
.v4-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }

textarea.v4-input {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
}

.v4-select option {
  background: #F1F5F1;
  color: var(--text-primary);
}

/* Toolbar */
.v4-toolbar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.v4-toolbar .v4-input { width: auto; flex: 1; min-width: 180px; }
.v4-toolbar .v4-select { width: auto; min-width: 140px; }

/* Upload Zone */
.v4-upload-zone {
  border: 2px dashed #E5E7EB;
  border-radius: var(--radius-lg);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 12px;
  background: var(--bg-base);
}

.v4-upload-zone:hover {
  border-color: var(--primary);
  background: var(--primary-glow);
}

.v4-upload-icon { font-size: 32px; margin-bottom: 8px; }
.v4-upload-title { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.v4-upload-hint { font-size: 12px; color: var(--text-muted); }

/* Code block */
.v4-code {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 12px;
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════
   SPECIES CARDS
   ══════════════════════════════════════════════════ */
.species-quick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.species-quick-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: var(--shadow-sm);
}

.species-quick-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.species-quick-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-raised);
  display: flex;
  align-items: center;
  justify-content: center;
}

.species-quick-info { flex: 1; min-width: 0; }
.species-quick-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.species-quick-latin {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.species-quick-badge {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--secondary-glow);
  color: var(--secondary);
}

.species-quick-badge.pending {
  background: var(--bg-raised);
  color: var(--text-muted);
}

/* ══════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ══════════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  padding: 12px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: #9CA3AF;
  border: 1px solid #9CA3AF;
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: toastIn 300ms ease-out;
  max-width: 380px;
}

.toast-success {
  background: #2E7D32;
  border-color: #4CAF50;
}

.toast-error {
  background: #C0392B;
  border-color: #E57373;
}

.toast-warning {
  background: #E67E22;
  border-color: #F39C12;
}

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

/* ══════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════ */
.v4-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
}

.v4-badge.new {
  background: var(--secondary-glow);
  color: var(--secondary);
}

/* ══════════════════════════════════════════════════
   SETTINGS
   ══════════════════════════════════════════════════ */
.v4-settings-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.v4-settings-section h4 {
  font-family: var(--font-heading);
  font-size: 15px;
}

/* ══════════════════════════════════════════════════
   SUMMARY GRID
   ══════════════════════════════════════════════════ */
.v4-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.v4-summary-grid > * {
  padding: 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

/* ══════════════════════════════════════════════════
   ROADMAP / FEATURE PREVIEW
   ══════════════════════════════════════════════════ */
.v4-roadmap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.v4-road {
  padding: 16px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.v4-road h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.v4-road ul li {
  font-size: 12px;
  color: var(--text-muted);
  padding: 3px 0;
}

.v4-road ul li::before {
  content: '— ';
  color: var(--primary);
}

/* ══════════════════════════════════════════════════
   AGENT CHAT
   ══════════════════════════════════════════════════ */
.agent-chat-messages {
  padding: 20px;
  max-height: 500px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agent-chat-welcome {
  text-align: center;
  padding: 32px 16px;
}

.agent-chat-msg {
  display: flex;
  gap: 10px;
  animation: msgIn 250ms ease-out;
}

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

.agent-chat-msg.user { flex-direction: row-reverse; }

.agent-chat-msg .msg-avatar {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 14px;
}

.agent-chat-msg.user .msg-avatar {
  background: var(--primary-dim); color: var(--primary);
}

.agent-chat-msg.assistant .msg-avatar {
  background: var(--secondary-dim); color: var(--secondary);
}

.agent-chat-msg .msg-body {
  max-width: 72%; padding: 10px 14px;
  border-radius: var(--radius); font-size: 13px;
  line-height: 1.6; color: var(--text-primary);
}

.agent-chat-msg.user .msg-body {
  background: linear-gradient(135deg, var(--primary-dim), rgba(46,125,50,0.15));
  border: 1px solid rgba(46,125,50,0.2);
  border-radius: var(--radius) var(--radius) 4px var(--radius);
}

.agent-chat-msg.assistant .msg-body {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) var(--radius) 4px;
}

.agent-chat-extracted {
  padding: 12px; margin-top: 8px; background: var(--bg-base);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text-secondary);
}

.agent-chat-input-bar {
  display: flex; gap: 8px; padding: 12px 20px;
  background: var(--bg-base); border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.agent-chat-textarea {
  flex: 1; padding: 10px 14px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text-primary); font-size: 13px; font-family: var(--font-body);
  resize: none; outline: none; line-height: 1.5;
  transition: border-color var(--transition);
}

.agent-chat-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(46,125,50,0.12);
}

/* ══════════════════════════════════════════════════
   PAGE HEADER / PLACEHOLDER / VISUAL ELEMENTS
   ══════════════════════════════════════════════════ */
.v4-ph-header { display: flex; align-items: center; gap: 14px; }
.v4-ph-icon { font-size: 28px; }
.v4-ph-badge {
  margin-left: auto; padding: 4px 12px; background: var(--warning-glow);
  color: var(--warning); border-radius: 12px; font-size: 11px; font-weight: 600;
}

.v4-ph-visual-card { padding: 20px; background: var(--bg-base) !important; }

.v4-ph-heatmap-preview { padding: 16px; }
.v4-ph-htitle { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.v4-ph-hgrid { display: flex; flex-direction: column; gap: 4px; }
.v4-ph-hrow { display: flex; align-items: center; gap: 6px; }
.v4-ph-hlabel { width: 44px; font-size: 11px; color: var(--text-muted); text-align: right; }
.v4-ph-hc {
  width: 44px; height: 28px; border-radius: 4px;
  background: rgba(2,132,199, calc(var(--v) * 0.7 + 0.1));
  transition: background 300ms;
}
.v4-ph-hxlabels { display: flex; gap: 6px; margin-top: 8px; margin-left: 50px; }
.v4-ph-hxlabels span { width: 44px; text-align: center; font-size: 10px; color: var(--text-muted); }

.v4-ph-flow-visual { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
.v4-ph-block { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; border-radius: var(--radius); min-width: 80px; }
.v4-ph-block.pocket { background: rgba(46,125,50,0.08); border: 1px solid rgba(46,125,50,0.15); }
.v4-ph-block.scan { background: rgba(46,125,50,0.08); border: 1px solid rgba(46,125,50,0.18); }
.v4-ph-block.mutant { background: rgba(230,126,34,0.06); border: 1px solid rgba(230,126,34,0.12); }
.v4-ph-block.ai { background: rgba(123,31,162,0.06); border: 1px solid rgba(76,175,80,0.12); }
.v4-ph-block-icon { font-size: 24px; }
.v4-ph-block-label { font-size: 11px; color: var(--text-secondary); text-align: center; line-height: 1.3; }
.v4-ph-connector { color: var(--text-muted); font-size: 18px; }

.v4-ph-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.v4-ph-fig-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; background: var(--bg-base); border: 1px solid var(--border); border-radius: var(--radius); }
.v4-ph-fig-preview { width: 80px; height: 60px; border-radius: 4px; }
.v4-ph-fig-preview.tree { background: linear-gradient(135deg, rgba(46,125,50,0.18), rgba(46,125,50,0.10)); }
.v4-ph-fig-preview.heatmap { background: linear-gradient(135deg, rgba(230,126,34,0.12), rgba(192,57,43,0.08)); }
.v4-ph-fig-preview.structure { background: linear-gradient(135deg, rgba(46,125,50,0.15), rgba(76,175,80,0.08)); }
.v4-ph-fig-preview.logo { background: linear-gradient(135deg, rgba(76,175,80,0.12), rgba(46,125,50,0.10)); }
.v4-ph-fig-card span { font-size: 11px; color: var(--text-muted); text-align: center; }

/* ══════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════ */
.hidden { display: none !important; }

/* ══════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════ */
#speciesPagination button {
  padding: 6px 12px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--text-secondary); font-size: 12px; cursor: pointer;
  transition: all var(--transition);
}

#speciesPagination button:hover {
  background: var(--bg-raised); color: var(--text-primary);
}

#speciesPagination button.active {
  background: var(--primary-glow); color: var(--primary);
  border-color: var(--primary);
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root { --sidebar-w: 56px; --sidebar-w-expanded: 220px; }
  .v4-page { padding: 16px 20px 48px; }
  .v4-hero-compact { flex-direction: column; align-items: flex-start; }
  .v4-metric-grid { width: 100%; justify-content: flex-start; }
  .v4-flow { flex-direction: column; align-items: stretch; }
  .v4-flow-arrow { display: none; }
  .v4-ph-gallery { grid-template-columns: repeat(2, 1fr); }
  .v4-roadmap { grid-template-columns: 1fr; }
  .species-quick-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

@media (max-width: 640px) {
  :root { --sidebar-w: 0; }
  .sidebar { transform: translateX(-100%); transition: transform var(--transition-slow); }
  .sidebar.expanded { transform: translateX(0); width: var(--sidebar-w-expanded); }
  .v4-main { margin-left: 0; }
  .v4-topnav { padding: 10px 14px; }
  .v4-page { padding: 12px 14px 40px; }
  .v4-hero-compact { padding: 20px; }
  .v4-hero-compact h2 { font-size: 24px; }
  .v4-metric-grid { gap: 12px; }
  .v4-metric { min-width: 60px; padding: 8px 10px; }
  .v4-metric b { font-size: 20px; }
  .v4-metric span { font-size: 10px; }
  .v4-ph-gallery { grid-template-columns: 1fr 1fr; }
  .v4-ph-flow-visual { flex-direction: column; }
  .v4-ph-connector { transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════
   SVG SPECIES ICONS
   ══════════════════════════════════════════════════ */
.species-svg-icon { display: block; width: 40px; height: 40px; }

/* ══════════════════════════════════════════════════
   SPECIES DETAIL PAGE
   ══════════════════════════════════════════════════ */

/* Species Header Card */
.v4-species-header {
  background: linear-gradient(135deg, #F0F7F0 0%, #F1F5F1 40%, #F1F5F1 100%);
  border: 1px solid #E5E7EB;
  overflow: hidden;
}

.v4-species-header-top {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}

.v4-species-icon-box {
  width: 64px;
  height: 64px;
  min-width: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--primary-glow), rgba(46,125,50,0.08));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(46,125,50,0.15);
  box-shadow: 0 2px 8px rgba(46,125,50,0.08);
}

.v4-species-title {
  flex: 1;
  min-width: 0;
}

.v4-species-title h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.v4-species-title p {
  font-style: italic;
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 2px;
}

.v4-species-stats {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.v4-species-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  padding: 10px 16px;
  background: #F1F5F1;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition);
}

.v4-species-stat:hover {
  border-color: var(--primary-dim);
  box-shadow: var(--shadow);
}

.v4-species-stat.highlight {
  background: linear-gradient(135deg, rgba(46,125,50,0.06), rgba(46,125,50,0.03));
  border-color: rgba(46,125,50,0.18);
}

.v4-species-stat-num {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
}

.v4-species-stat.highlight .v4-species-stat-num {
  color: var(--secondary);
}

.v4-species-stat-label {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
}

.v4-species-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.v4-species-meta-tag {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 500;
  background: var(--bg-raised);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.v4-species-meta-tag.accent {
  background: var(--secondary-glow);
  color: var(--secondary);
  border-color: rgba(46,125,50,0.18);
}

.v4-species-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Species Gene List Card */
.v4-species-genes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.v4-species-genes-header h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.v4-species-genes-header h3 span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.v4-species-genes-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.v4-species-genes-tools .v4-input {
  max-width: 220px;
  font-size: 12.5px;
  padding: 6px 12px;
}

.v4-species-genes-tools .v4-select {
  max-width: 130px;
  font-size: 12.5px;
  padding: 6px 12px;
}

.v4-species-genes-tools span {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  padding-right: 4px;
}

.v4-species-genes-table {
  max-height: 520px;
  overflow-y: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Gene Table */
.v4-gene-table {
  margin-top: 0;
}

.v4-gene-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.v4-gene-table thead th {
  background: var(--bg-base);
  border-bottom: 2px solid #E5E7EB;
  font-size: 10.5px;
  padding: 10px 14px;
}

.v4-gene-table tbody tr {
  transition: background 150ms ease;
}

.v4-gene-table tbody tr:nth-child(even) {
  background: rgba(241,245,241,0.6);
}

.v4-gene-table tbody tr:hover {
  background: #F0F7F0;
}

.v4-gene-table tbody td {
  padding: 9px 14px;
  border-bottom: 1px solid #F1F5F1;
}

.v4-gene-id {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  font-weight: 500;
}

.v4-gene-icon {
  display: inline-block;
  width: 20px;
  margin-right: 4px;
  font-size: 13px;
  text-align: center;
  opacity: 0.7;
}

.v4-gene-len {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.v4-gene-family {
  font-size: 11.5px;
  color: var(--text-muted);
}

.v4-gene-pos {
  font-size: 10.5px;
}

.v4-gene-action {
  text-align: right;
  white-space: nowrap;
}

/* PSPG Badge */
.v4-pspg-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-raised);
  color: var(--text-muted);
}

.v4-pspg-badge.positive {
  background: #E8F5E9;
  color: #1B5E20;
  font-weight: 600;
}

.v4-pspg-pct {
  font-weight: 400;
  opacity: 0.7;
  margin-left: 3px;
  font-size: 10px;
}

/* In-Pool Badge */
.v4-inpool-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  background: var(--secondary-glow);
  color: var(--secondary);
  cursor: default;
  user-select: none;
  border: 1px solid rgba(46,125,50,0.18);
  white-space: nowrap;
}

/* Pool Add Button Hover Refinement */
.v4-pool-add {
  transition: all 180ms ease;
}

.v4-pool-add:hover {
  transform: translateY(-1px);
}

/* Settings — Status Cards */
.v4-status-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  min-width: 160px;
}
.v4-status-card span {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.v4-status-card small {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-muted);
}
.v4-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.v4-status-dot.online  { background: var(--secondary); }
.v4-status-dot.offline { background: var(--danger); }
.v4-status-dot.muted   { background: var(--text-muted); }

/* Settings — Sections */
.v4-settings-section {
  margin-bottom: 20px;
}
.v4-settings-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Settings — Code block */
.v4-code {
  background: var(--bg-deep);
  padding: 12px 16px;
  border-radius: 6px;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  white-space: pre-wrap;
}

/* Animations */
@keyframes fadeScaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* Scientific journey stepper: status communicates the next scientific action,
   while the backend remains the sole source of truth for evidence and ranks. */
.ugtld-journey-stepper { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border, #d9e2ec); border-radius: 12px; background: var(--surface, #fff); }
.ugtld-journey-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.ugtld-journey-step { display: flex; min-height: 66px; flex-direction: column; justify-content: space-between; gap: 3px; padding: 9px 10px; border-radius: 9px; background: #f4f7fb; color: #344054; font-size: 12px; border: 0; text-align: left; font: inherit; appearance: none; -webkit-appearance: none; cursor: pointer; }
.ugtld-journey-step:hover { background: #eaf1fb; }
.ugtld-journey-step:focus-visible { outline: 2px solid rgba(47,107,255,.35); outline-offset: 1px; }
.ugtld-journey-step:disabled { opacity: .6; cursor: not-allowed; }
.ugtld-journey-step b { color: #667085; font-size: 11px; }
.ugtld-journey-step small { font-size: 10px; font-weight: 700; letter-spacing: .03em; }
.journey-complete { background: #ecfdf3; color: #166534; }
.journey-ready { background: #eff6ff; color: #1d4ed8; }
.journey-blocked { background: #fff7ed; color: #9a3412; }
.journey-partial { background: #fefce8; color: #854d0e; }
/* M11-R1 primary navigation and Projects workspace */
.ugtld-project-create { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:20px; padding:24px; border:1px solid #dce3e6; background:#fff; border-radius:8px; }
.ugtld-project-create[hidden] { display:none; }
.ugtld-project-create .ugtld-wizard-heading,.ugtld-project-create fieldset,.ugtld-project-create > div:last-child,.ugtld-project-create label:has(textarea) { grid-column:1/-1; }
.ugtld-project-create label { display:grid; gap:6px; color:#52616a; font-size:12px; font-weight:700; }
.ugtld-project-create input,.ugtld-project-create select,.ugtld-project-create textarea { padding:10px 12px; border:1px solid #c9d4d7; border-radius:5px; font:inherit; font-weight:400; }
.ugtld-project-create fieldset { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; border:1px solid #dce3e6; border-radius:6px; }
.ugtld-selection-bar { position:sticky; bottom:16px; z-index:8; display:flex; align-items:center; gap:10px; margin-top:14px; padding:12px 14px; border:1px solid #b8d7d2; border-radius:7px; background:#fff; box-shadow:0 8px 28px rgba(24,33,38,.13); }
.ugtld-selection-bar strong { margin-right:auto; }
.ugtld-analysis-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0; }
.ugtld-analysis-grid article { min-height:150px; padding:20px; border:1px solid #dce3e6; border-radius:7px; background:#fff; }
.ugtld-analysis-grid h2 { margin:0 0 20px; font-size:17px; }
.ugtld-analysis-grid strong { color:#286b66; font-size:19px; }
.ugtld-integrated-state { display:flex; justify-content:space-between; align-items:center; padding:22px; border-left:4px solid #2f7f78; background:#eef5f3; }
.ugtld-comparison-surface { margin-top:24px; padding:20px; border:1px solid #dce3e6; background:#fff; }
.ugtld-axis-dots { color:#2f7f78; white-space:nowrap; letter-spacing:0; }
.ugtld-biological-overview { margin-bottom:18px; }
.ugtld-error-state { padding:24px; border:1px solid #d6b8b8; background:#fff5f5; }
@media(max-width:900px){.ugtld-project-create,.ugtld-project-create fieldset,.ugtld-analysis-grid{grid-template-columns:1fr}.ugtld-project-create>*{grid-column:1!important}.ugtld-selection-bar{flex-wrap:wrap}}
.legacy-nav-section,
.ugtld-v1-legacy-label { display: none !important; }
.ugtld-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.ugtld-project-card {
  border: 1px solid var(--border-light, #d8dee8);
  border-radius: 8px;
  padding: 16px;
  background: var(--surface, #fff);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ugtld-project-card:hover, .ugtld-project-card:focus-visible {
  border-color: var(--primary, #2563eb);
  box-shadow: 0 4px 18px rgba(15, 23, 42, .08);
  transform: translateY(-1px);
  outline: none;
}
.ugtld-project-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ugtld-project-card-id, .ugtld-project-card-meta { margin-top: 8px; color: var(--text-muted, #64748b); font-size: 12px; }
.ugtld-project-card-action { margin-top: 18px; color: var(--primary, #2563eb); font-size: 13px; font-weight: 600; }
.ugtld-project-create { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-light, #d8dee8); }
.ugtld-project-create label { display: grid; gap: 6px; font-size: 12px; color: var(--text-muted, #64748b); }
.ugtld-project-create input { min-width: 220px; padding: 9px 10px; border: 1px solid var(--border-light, #d8dee8); border-radius: 6px; }
.ugtld-advanced-only { display: none !important; }
.ugtld-compatibility-hooks { display: none !important; }
.ugtld-feedback-dialog { width: min(560px, calc(100vw - 32px)); border: 1px solid var(--border-light, #d8dee8); border-radius: 8px; padding: 20px; }
.ugtld-feedback-dialog::backdrop { background: rgba(15,23,42,.35); }
.ugtld-feedback-dialog form { display: grid; gap: 14px; }
.ugtld-feedback-dialog label { display: grid; gap: 6px; font-size: 12px; color: var(--text-muted, #64748b); }
.ugtld-feedback-dialog textarea, .ugtld-feedback-dialog select { font: inherit; padding: 9px; border: 1px solid var(--border-light, #d8dee8); border-radius: 6px; }
.ugtld-feedback-check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.ugtld-login-shell{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:#f4f7f6;padding:24px}.ugtld-login-shell[hidden]{display:none}.ugtld-login-panel{width:min(420px,100%);background:#fff;border:1px solid #d7e0dd;border-radius:8px;padding:32px;box-shadow:0 18px 50px rgba(24,45,38,.14)}.ugtld-login-panel h1{font-size:26px;margin:8px 0}.ugtld-login-panel>p{color:#596963}.ugtld-login-panel label{display:grid;gap:6px;margin:18px 0;font-weight:600}.ugtld-login-panel input{height:42px;border:1px solid #b9c7c2;border-radius:6px;padding:0 12px;font:inherit}.ugtld-login-error{min-height:20px;color:#a12622!important}.ugtld-session-user{font-size:12px;color:var(--text-muted)}
.ugtld-project-chart-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ugtld-project-chart{border:1px solid var(--border);padding:18px;background:#fff;border-radius:6px}.ugtld-project-chart h2{font-size:16px;margin:0 0 16px}.ugtld-chart-bars{display:grid;gap:9px}.ugtld-chart-row{display:grid;grid-template-columns:minmax(110px,1fr) 3fr 50px;gap:10px;align-items:center;font-size:12px}.ugtld-chart-row>i{height:14px;background:#edf1ef;display:block}.ugtld-chart-row>i>b{display:block;height:100%}.ugtld-chart-row>strong{text-align:right}@media(max-width:800px){.ugtld-project-chart-grid{grid-template-columns:1fr}}
.ugtld-axis-detail{padding:24px;border:1px solid var(--border);background:#fff;border-radius:6px}.ugtld-axis-detail h2{margin:6px 0 20px}.ugtld-axis-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ugtld-axis-detail-grid>div{padding:14px;background:#f5f8f7;border-left:3px solid #247a64}.ugtld-axis-detail-grid span{display:block;font-size:11px;color:var(--text-muted);margin-bottom:5px}.ugtld-axis-detail-grid strong{font-size:14px;overflow-wrap:anywhere}.ugtld-axis-detail>p{margin-top:18px;color:var(--text-muted);font-size:12px}