* { box-sizing: border-box; }
html, body {
  overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, sans-serif;
  background: #f6f7fb;
  color: #1f2937;
}
main {
  min-width: 0;
  overflow-x: hidden;
}
.card-hover { transition: all .2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.sidebar-link { 
  transition: .2s ease;
  color: #374151;
  border-radius: 16px;
}
.sidebar-link:hover { 
  background: rgba(16,185,129,.12);
  color: #065f46;
}
.sidebar-link.active { 
  background: #059669 !important;
  color: #fff !important; 
}
.panel {
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px);
}
.bg-white15 { background-color: rgba(255, 255, 255, 0.15); }
.bg-white20 { background-color: rgba(255, 255, 255, 0.20); }
.bg-white25 { background-color: rgba(255, 255, 255, 0.25); }
.border-white20 { border-color: rgba(255, 255, 255, 0.20); }
.border-white30 { border-color: rgba(255, 255, 255, 0.30); }
.border-white40 { border-color: rgba(255, 255, 255, 0.40); }
.soft-border { border: 1px solid rgba(148,163,184,.18); }
.badge { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .7rem; border-radius:9999px; font-size:.75rem; font-weight:700; }
.btn { min-height:26px; border-radius:16px; font-weight:700; transition:all .2s ease; display:inline-flex; align-items:center; justify-content:center; }
.btn:hover { transform: translateY(-1px); }
.table-wrap { overflow:auto; border-radius: 18px; }
table { width:100%; border-collapse: collapse; }
th, td { padding: .9rem 1rem; border-bottom: 1px solid rgba(148,163,184,.18); text-align:left; font-size:.92rem; }
th { position: sticky; top: 0; background: rgba(248,250,252,.95); z-index: 5; }
.hidden { display: none !important; }
.desktop-only { display: none; }
@media (min-width: 768px) {
  .desktop-only { display: block; }
}
.desktop-only-flex { display: none; }
@media (min-width: 768px) {
  .desktop-only-flex { display: flex; }
}
.mobile-only { display: none; }
@media (max-width: 768px) {
  main {
    min-width: 0;
    overflow-x: hidden;
  }
  .admin-tab-nav {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .table-wrap {
    max-height: 60vh;
  }  
  .admin-tab-nav::-webkit-scrollbar { display: none; }  
}
@media (max-width: 768px) {
  .app-grid {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 280px;
    height: 100dvh;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    border-right: 1px solid rgba(148, 163, 184, 0.18) !important;
    border-bottom: none !important;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .mobile-only {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 30;
    width: 100%;
  }
  #sidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 40;
    backdrop-filter: blur(2px);
  }

  #sidebarOverlay.active {
    display: block;
  }
}
.mermaid-container {
  width: 100%;
  max-width: 100%;
}
.mermaid-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  padding-bottom: 8px;
}
.mermaid-wrap svg {
  display: block;
  width: 1200px !important;
  min-width: 900px;
  max-width: none !important;
  height: auto !important;
}
#sidebarOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 40;
  backdrop-filter: blur(2px);
}
#sidebarOverlay.active {
  display: block;
}
[data-theme="dark"] th { background: rgba(15,23,42,.95); }
[data-theme="dark"] .panel {
  background: rgba(15,23,42,.85);
  border-color: rgba(148,163,184,.18);
}
[data-theme="dark"] .sidebar-link { color: #e5e7eb; }
[data-theme="dark"] .sidebar-link.active { background: #059669 !important; color: #fff !important; }
[data-theme="dark"] .sidebar-link:hover { background: rgba(16,185,129,.2); }
[data-theme="dark"] body {
  background: #0f172a;
  color: #e5e7eb;
}
[data-theme="dark"] header.panel {
  background: linear-gradient(135deg, #064e3b 0%, #134e4a 100%) !important;
  border-color: transparent !important;
}
[data-theme="dark"] .panel {
  background-color: #1e293b !important; 
  border-color: #334155 !important;
  color: #f1f5f9 !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: #0f172a !important; 
  border-color: #334155 !important;
  color: #f8fafc !important;
}
[data-theme="dark"] .badge {
  filter: brightness(0.8) contrast(1.2);
}
[data-theme="dark"] #resultBox,
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-cyan-50,
[data-theme="dark"] .bg-blue-50 {
  background-color: #064e3b !important;
  border-color: #065f46 !important;
  color: #d1fae5 !important;
}
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-500 {
  color: #94a3b8 !important;
}
[data-theme="dark"] #approvedTitleBox {
  background-color: rgba(8, 51, 68, 0.4) !important;
  border-color: rgba(34, 211, 238, 0.2) !important;   
  color: #bae6fd !important;                
}
[data-theme="dark"] .text-slate-700 {
  color: #6ee7b7 !important;
}
[data-theme="dark"] #approvedTitleText {
  color: #f0f9ff !important; 
}
[data-theme="dark"] #historyList .bg-white\/60 {
  background-color: rgba(30, 41, 59, 0.5) !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
}
[data-theme="dark"] .badge.bg-emerald-100 {
  background-color: rgb(10 225 167 / 50%) !important;
  color: #6ee7b7 !important;
}
[data-theme="dark"] #advisorList .bg-emerald-50,
[data-theme="dark"] #advisorList .bg-blue-50 {
  background-color: rgba(6, 78, 59, 0.15) !important; 
  border: 1px solid rgba(16, 185, 129, 0.2) !important; 
}
[data-theme="dark"] #advisorList .text-emerald-700 {
  color: #6ee7b7 !important; 
}
[data-theme="dark"] #advisorList .text-blue-700 {
  color: #6ee7b7 !important; 
}
[data-theme="dark"] #advisorList .font-semibold {
  color: #f1f5f9 !important; 
}
[data-theme="dark"] .badge.bg-red-100 {
  background-color: rgba(127, 29, 29, 0.5) !important;
  color: #fca5a5 !important;
}
.expertise-label { font-weight: 600; color: #111827; }
[data-theme="dark"] .expertise-label { color: #f1f5f9; }