/* ====================================================================
   BioR Universal Design System v5.0 — Premium Scientific Platform
   https://github.com/mf2022-dev/BioR-ToolKit

   COMPLETE OVERHAUL: Clean white foundation, refined typography,
   generous spacing, subtle depth, zero visual noise.
   ==================================================================== */

/* ===== FOUNDATION: CSS CUSTOM PROPERTIES ===== */
:root {
  /* Brand — refined green palette */
  --bior-primary: #059669;
  --bior-primary-light: #10b981;
  --bior-primary-dark: #047857;
  --bior-primary-darkest: #064e3b;
  --bior-primary-rgb: 5,150,105;

  /* Semantic Status — muted, sophisticated tones */
  --bior-success: #059669;
  --bior-warning: #d97706;
  --bior-danger: #dc2626;
  --bior-info: #2563eb;
  --bior-special: #7c3aed;

  /* Surfaces — clean white foundation */
  --bior-bg-page: #ffffff;
  --bior-bg-card: #ffffff;
  --bior-bg-card-hover: #ffffff;
  --bior-bg-elevated: #f8fafc;
  --bior-bg-interactive: #f1f5f9;
  --bior-bg-modal: #ffffff;
  --bior-bg-section: #f8fafc;
  --bior-bg-section-alt: #f0fdf4;

  /* Text — high contrast, clean hierarchy */
  --bior-text-primary: #0f172a;
  --bior-text-secondary: #334155;
  --bior-text-muted: #64748b;
  --bior-text-faint: #94a3b8;
  --bior-text-disabled: #cbd5e1;
  --bior-text-on-primary: #ffffff;

  /* Borders — barely visible, clean separation */
  --bior-border-subtle: #f1f5f9;
  --bior-border-default: #e2e8f0;
  --bior-border-strong: #cbd5e1;
  --bior-border-primary: rgba(5,150,105,0.25);

  /* Radius — generous, modern */
  --bior-radius-sm: 8px;
  --bior-radius-md: 12px;
  --bior-radius-lg: 16px;
  --bior-radius-xl: 20px;
  --bior-radius-xxl: 24px;
  --bior-radius-pill: 9999px;

  /* Shadows — subtle depth, no noise */
  --bior-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --bior-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --bior-shadow-lg: 0 12px 32px rgba(0,0,0,0.08);
  --bior-shadow-xl: 0 24px 48px rgba(0,0,0,0.12);
  --bior-shadow-glow: 0 8px 32px rgba(5,150,105,0.12);
  --bior-shadow-glow-lg: 0 16px 48px rgba(5,150,105,0.15);

  /* Glass */
  --bior-glass-blur: 20px;
  --bior-glass-bg: rgba(255,255,255,0.85);
  --bior-glass-border: rgba(0,0,0,0.06);

  /* Z-index Scale */
  --z-base: 1;
  --z-header: 30;
  --z-sidebar-overlay: 35;
  --z-sidebar: 40;
  --z-modal: 50;
  --z-toast: 100;

  /* Transitions — smooth, premium feel */
  --bior-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --bior-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --bior-duration-fast: 0.15s;
  --bior-duration-normal: 0.3s;
  --bior-duration-slow: 0.5s;

  /* Typography — Inter with refined scale */
  --bior-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --bior-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing Scale */
  --bior-spacing-xs: 4px;
  --bior-spacing-sm: 8px;
  --bior-spacing-md: 16px;
  --bior-spacing-lg: 24px;
  --bior-spacing-xl: 32px;
  --bior-spacing-xxl: 48px;
  --bior-spacing-3xl: 64px;

  /* Badge Semantic Colors */
  --bior-badge-success-bg: #ecfdf5;
  --bior-badge-success-text: #065f46;
  --bior-badge-success-border: #a7f3d0;
  --bior-badge-danger-bg: #fef2f2;
  --bior-badge-danger-text: #991b1b;
  --bior-badge-danger-border: #fecaca;
  --bior-badge-warning-bg: #fffbeb;
  --bior-badge-warning-text: #92400e;
  --bior-badge-warning-border: #fde68a;
  --bior-badge-info-bg: #eff6ff;
  --bior-badge-info-text: #1e40af;
  --bior-badge-info-border: #bfdbfe;
  --bior-badge-special-bg: #f5f3ff;
  --bior-badge-special-text: #5b21b6;
  --bior-badge-special-border: #ddd6fe;

  color-scheme: light;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --bior-primary: #34d399;
  --bior-primary-light: #6ee7b7;
  --bior-primary-dark: #10b981;
  --bior-primary-darkest: #059669;
  --bior-primary-rgb: 52,211,153;

  --bior-bg-page: #0c0f1a;
  --bior-bg-card: #141825;
  --bior-bg-card-hover: #1a1f30;
  --bior-bg-elevated: #1a1f30;
  --bior-bg-interactive: #222838;
  --bior-bg-modal: #141825;
  --bior-bg-section: #0f1320;
  --bior-bg-section-alt: #0c1a14;

  --bior-text-primary: #f1f5f9;
  --bior-text-secondary: #cbd5e1;
  --bior-text-muted: #94a3b8;
  --bior-text-faint: #64748b;
  --bior-text-disabled: #475569;
  --bior-text-on-primary: #0c0f1a;

  --bior-border-subtle: #1e293b;
  --bior-border-default: #334155;
  --bior-border-strong: #475569;
  --bior-border-primary: rgba(52,211,153,0.3);

  --bior-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --bior-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
  --bior-shadow-lg: 0 12px 32px rgba(0,0,0,0.4);
  --bior-shadow-xl: 0 24px 48px rgba(0,0,0,0.5);
  --bior-shadow-glow: 0 8px 32px rgba(52,211,153,0.15);
  --bior-shadow-glow-lg: 0 16px 48px rgba(52,211,153,0.2);

  --bior-glass-bg: rgba(20,24,37,0.9);
  --bior-glass-border: rgba(255,255,255,0.06);

  --bior-badge-success-bg: rgba(5,150,105,0.15);
  --bior-badge-success-text: #6ee7b7;
  --bior-badge-success-border: rgba(52,211,153,0.3);
  --bior-badge-danger-bg: rgba(220,38,38,0.15);
  --bior-badge-danger-text: #fca5a5;
  --bior-badge-danger-border: rgba(239,68,68,0.3);
  --bior-badge-warning-bg: rgba(217,119,6,0.15);
  --bior-badge-warning-text: #fcd34d;
  --bior-badge-warning-border: rgba(245,158,11,0.3);
  --bior-badge-info-bg: rgba(37,99,235,0.15);
  --bior-badge-info-text: #93c5fd;
  --bior-badge-info-border: rgba(59,130,246,0.3);
  --bior-badge-special-bg: rgba(124,58,237,0.15);
  --bior-badge-special-text: #c4b5fd;
  --bior-badge-special-border: rgba(139,92,246,0.3);

  color-scheme: dark;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--bior-font);
  background: var(--bior-bg-page);
  color: var(--bior-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  transition: background var(--bior-duration-slow) var(--bior-ease), color var(--bior-duration-slow) var(--bior-ease);
}
::selection { background: rgba(var(--bior-primary-rgb),0.2); color: var(--bior-text-primary); }

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
:focus-visible {
  outline: 2px solid var(--bior-primary);
  outline-offset: 3px;
  border-radius: var(--bior-radius-sm);
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bior-border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--bior-text-faint); }
.bior-scroll { scrollbar-width: thin; scrollbar-color: var(--bior-border-strong) transparent; }

/* ===== COMPONENTS ===== */

/* Glass Card */
.bior-card {
  background: var(--bior-bg-card);
  border: 1px solid var(--bior-border-default);
  border-radius: var(--bior-radius-xl);
  box-shadow: var(--bior-shadow-sm);
  transition: transform var(--bior-duration-normal) var(--bior-ease),
              box-shadow var(--bior-duration-normal) var(--bior-ease),
              border-color var(--bior-duration-normal) var(--bior-ease);
}
.bior-card:hover {
  border-color: var(--bior-border-primary);
  box-shadow: var(--bior-shadow-md);
  transform: translateY(-2px);
}

/* KPI Card */
.bior-kpi {
  background: var(--bior-bg-card);
  border: 1px solid var(--bior-border-default);
  border-radius: var(--bior-radius-lg);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--bior-shadow-sm);
  transition: transform var(--bior-duration-normal) var(--bior-ease),
              box-shadow var(--bior-duration-normal) var(--bior-ease),
              border-color var(--bior-duration-normal) var(--bior-ease);
}
.bior-kpi::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--bior-radius-lg) var(--bior-radius-lg) 0 0;
  background: var(--bior-border-default);
}
.bior-kpi:hover { transform: translateY(-2px); box-shadow: var(--bior-shadow-md); }
.bior-kpi.accent-green::before { background: linear-gradient(90deg, #059669, #34d399); }
.bior-kpi.accent-red::before { background: linear-gradient(90deg, #dc2626, #f87171); }
.bior-kpi.accent-blue::before { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.bior-kpi.accent-amber::before { background: linear-gradient(90deg, #d97706, #fbbf24); }
.bior-kpi.accent-purple::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }

/* Panel Card */
.bior-panel {
  background: var(--bior-bg-card);
  border: 1px solid var(--bior-border-default);
  border-radius: var(--bior-radius-xl);
  padding: 24px;
  box-shadow: var(--bior-shadow-sm);
  transition: border-color var(--bior-duration-normal) var(--bior-ease),
              box-shadow var(--bior-duration-normal) var(--bior-ease);
}
.bior-panel:hover { border-color: var(--bior-border-strong); box-shadow: var(--bior-shadow-md); }

/* Button Primary */
.bior-btn {
  background: var(--bior-primary);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: var(--bior-radius-md);
  padding: 10px 22px;
  cursor: pointer;
  font-family: var(--bior-font);
  font-size: 13px;
  letter-spacing: -0.01em;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 2px 8px rgba(var(--bior-primary-rgb),0.2);
  transition: all var(--bior-duration-normal) var(--bior-ease);
  position: relative;
  overflow: hidden;
}
.bior-btn:hover {
  background: var(--bior-primary-dark);
  box-shadow: 0 4px 12px rgba(var(--bior-primary-rgb),0.3);
  transform: translateY(-1px);
}
.bior-btn:active { transform: translateY(0); }

/* Button Secondary */
.bior-btn-sec {
  background: var(--bior-bg-card);
  border: 1px solid var(--bior-border-default);
  color: var(--bior-text-primary);
  border-radius: var(--bior-radius-md);
  padding: 10px 22px;
  cursor: pointer;
  font-family: var(--bior-font);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: all var(--bior-duration-normal) var(--bior-ease);
}
.bior-btn-sec:hover {
  border-color: var(--bior-primary);
  color: var(--bior-primary);
  box-shadow: 0 2px 8px rgba(var(--bior-primary-rgb),0.1);
}

/* Button Danger */
.bior-btn-danger {
  background: var(--bior-danger);
  color: #fff; font-weight: 600; border: none; border-radius: var(--bior-radius-md);
  padding: 10px 22px; cursor: pointer; font-family: var(--bior-font); font-size: 13px;
  transition: all var(--bior-duration-normal) var(--bior-ease);
}
.bior-btn-danger:hover { box-shadow: 0 4px 12px rgba(220,38,38,0.3); transform: translateY(-1px); }

/* Input */
.bior-input {
  background: var(--bior-bg-card);
  border: 1.5px solid var(--bior-border-default);
  border-radius: var(--bior-radius-md);
  color: var(--bior-text-primary);
  font-size: 14px;
  outline: none;
  padding: 10px 14px;
  width: 100%;
  font-family: var(--bior-font);
  transition: border-color var(--bior-duration-normal) var(--bior-ease),
              box-shadow var(--bior-duration-normal) var(--bior-ease);
}
.bior-input:hover { border-color: var(--bior-border-strong); }
.bior-input:focus { border-color: var(--bior-primary); box-shadow: 0 0 0 3px rgba(var(--bior-primary-rgb),0.1); }
.bior-input::placeholder { color: var(--bior-text-faint); }

/* Badge */
.bior-badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: var(--bior-radius-pill);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
}
.bior-badge-success { background: var(--bior-badge-success-bg); color: var(--bior-badge-success-text); border: 1px solid var(--bior-badge-success-border); }
.bior-badge-danger { background: var(--bior-badge-danger-bg); color: var(--bior-badge-danger-text); border: 1px solid var(--bior-badge-danger-border); }
.bior-badge-warning { background: var(--bior-badge-warning-bg); color: var(--bior-badge-warning-text); border: 1px solid var(--bior-badge-warning-border); }
.bior-badge-info { background: var(--bior-badge-info-bg); color: var(--bior-badge-info-text); border: 1px solid var(--bior-badge-info-border); }
.bior-badge-special { background: var(--bior-badge-special-bg); color: var(--bior-badge-special-text); border: 1px solid var(--bior-badge-special-border); }

/* Table */
.bior-table { width: 100%; border-radius: var(--bior-radius-lg); overflow: hidden; border-collapse: collapse; }
.bior-table thead { background: var(--bior-bg-elevated); }
.bior-table th { font-size: 11px; font-weight: 600; color: var(--bior-text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 16px; text-align: left; }
.bior-table td { padding: 14px 16px; font-size: 13px; border-bottom: 1px solid var(--bior-border-subtle); }
.bior-table tbody tr { transition: background var(--bior-duration-fast) ease; }
.bior-table tbody tr:hover { background: var(--bior-bg-elevated); }

/* Modal */
.bior-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  z-index: var(--z-modal); display: flex; align-items: center; justify-content: center;
  animation: biorFadeIn 0.2s ease-out;
}
.bior-modal {
  background: var(--bior-bg-modal);
  border: 1px solid var(--bior-border-default);
  border-radius: var(--bior-radius-xxl);
  max-width: 720px; width: 90%; max-height: 85vh; overflow-y: auto;
  box-shadow: var(--bior-shadow-xl);
  animation: biorScaleIn 0.3s var(--bior-ease);
}

/* Tab */
.bior-tab {
  padding: 10px 18px; border-radius: var(--bior-radius-md); font-size: 13px; font-weight: 500;
  color: var(--bior-text-muted); cursor: pointer; border: 1px solid transparent;
  transition: all var(--bior-duration-normal) var(--bior-ease);
}
.bior-tab:hover { color: var(--bior-text-primary); background: var(--bior-bg-elevated); }
.bior-tab.active { background: var(--bior-bg-elevated); color: var(--bior-primary); border-color: var(--bior-border-primary); font-weight: 600; }

/* Glass Utility */
.bior-glass {
  background: var(--bior-glass-bg);
  -webkit-backdrop-filter: blur(var(--bior-glass-blur)); backdrop-filter: blur(var(--bior-glass-blur));
  border: 1px solid var(--bior-glass-border);
}

/* Strategy Card */
.bior-card-strategy {
  background: var(--bior-bg-card);
  border: 1px solid var(--bior-border-default);
  border-radius: var(--bior-radius-xl);
  padding: var(--bior-spacing-lg);
  position: relative; overflow: hidden;
  box-shadow: var(--bior-shadow-sm);
  transition: transform var(--bior-duration-normal) var(--bior-ease),
              box-shadow var(--bior-duration-normal) var(--bior-ease),
              border-color var(--bior-duration-normal) var(--bior-ease);
}
.bior-card-strategy:hover { transform: translateY(-3px); box-shadow: var(--bior-shadow-lg); border-color: var(--bior-border-primary); }
.bior-card-strategy::before { content:''; position:absolute; top:0; left:0; bottom:0; width:4px; background:var(--bior-border-default); border-radius:var(--bior-radius-xl) 0 0 var(--bior-radius-xl); }
.bior-card-strategy.accent-green::before  { background:linear-gradient(180deg,var(--bior-success),#34d399); }
.bior-card-strategy.accent-red::before    { background:linear-gradient(180deg,var(--bior-danger),#f87171); }
.bior-card-strategy.accent-blue::before   { background:linear-gradient(180deg,var(--bior-info),#60a5fa); }
.bior-card-strategy.accent-amber::before  { background:linear-gradient(180deg,var(--bior-warning),#fbbf24); }
.bior-card-strategy.accent-purple::before { background:linear-gradient(180deg,var(--bior-special),#a78bfa); }
.bior-card-strategy .card-header { display:flex; align-items:flex-start; gap:var(--bior-spacing-md); margin-bottom:var(--bior-spacing-md); }
.bior-card-strategy .card-icon { width:44px; height:44px; border-radius:var(--bior-radius-lg); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.bior-card-strategy .card-title { font-size:15px; font-weight:700; color:var(--bior-text-primary); line-height:1.3; }
.bior-card-strategy .card-body { font-size:13px; line-height:1.7; color:var(--bior-text-secondary); margin-bottom:var(--bior-spacing-md); }

/* Metric Card */
.bior-card-metric {
  background: var(--bior-bg-card);
  border: 1px solid var(--bior-border-default);
  border-radius: var(--bior-radius-xl);
  padding: var(--bior-spacing-lg);
  position: relative; overflow: hidden;
  box-shadow: var(--bior-shadow-sm);
  transition: transform var(--bior-duration-normal) var(--bior-ease), box-shadow var(--bior-duration-normal) var(--bior-ease);
}
.bior-card-metric:hover { transform:translateY(-2px); box-shadow:var(--bior-shadow-md); }
.bior-card-metric .metric-value { font-size:28px; font-weight:800; color:var(--bior-text-primary); line-height:1.1; }

/* Action Card */
.bior-card-action {
  background: var(--bior-bg-card);
  border: 1px solid var(--bior-border-default);
  border-radius: var(--bior-radius-xl);
  padding: var(--bior-spacing-lg); cursor: pointer; text-align: center;
  box-shadow: var(--bior-shadow-sm);
  transition: transform var(--bior-duration-normal) var(--bior-ease), box-shadow var(--bior-duration-normal) var(--bior-ease), border-color var(--bior-duration-normal) var(--bior-ease);
}
.bior-card-action:hover { transform:translateY(-3px); box-shadow:var(--bior-shadow-md); border-color:var(--bior-border-primary); }

/* Card Grid */
.bior-card-grid { display:grid; gap:var(--bior-spacing-lg); }
.bior-card-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.bior-card-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.bior-card-grid.cols-4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:768px) { .bior-card-grid.cols-2,.bior-card-grid.cols-3,.bior-card-grid.cols-4 { grid-template-columns:1fr; } }
@media (min-width:769px) and (max-width:1024px) { .bior-card-grid.cols-3,.bior-card-grid.cols-4 { grid-template-columns:repeat(2,1fr); } }

/* ===== KEYFRAME ANIMATIONS ===== */
@keyframes biorFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes biorFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes biorScaleIn { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes biorSlideIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes biorShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes biorPulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.7; transform:scale(1.05); } }
@keyframes biorGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Skeleton Loader */
.bior-skeleton {
  background: linear-gradient(90deg, var(--bior-bg-elevated) 25%, var(--bior-bg-interactive) 50%, var(--bior-bg-elevated) 75%);
  background-size: 200% 100%; animation: biorShimmer 1.5s ease-in-out infinite;
  border-radius: var(--bior-radius-md);
}

/* Pulse Indicator */
.bior-pulse { width: 8px; height: 8px; border-radius: 50%; animation: biorPulse 2s infinite; }

/* Fade In */
.bior-fade-in { animation: biorFadeUp 0.5s ease-out; }

/* ===== PRINT ===== */
@media print {
  body { background: #fff; color: #000; }
  .bior-card, .bior-panel, .bior-kpi { background: #fff; border: 1px solid #ddd; box-shadow: none; }
  nav, footer, .theme-toggle, .modal-overlay { display: none !important; }
}