/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: #0f1117;
  color: #e2e8f0;
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
}

/* ===== SIDEBAR ===== */
.sidebar {
  width: 280px;
  background: #161922;
  border-right: 1px solid #1e2130;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: transform 0.3s ease;
}
.sidebar-header {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid #1e2130;
}
.logo {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #fff;
  flex-shrink: 0;
}
.sidebar-header h1 {
  font-size: 1rem;
  font-weight: 700;
  color: #f1f5f9;
  line-height: 1.2;
}
.subtitle {
  font-size: 0.7rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
nav {
  flex: 1;
  padding: 1rem 0.75rem;
  overflow-y: auto;
}
.nav-link {
  display: block;
  padding: 0.6rem 1rem;
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.15s ease;
  margin-bottom: 2px;
}
.nav-link:hover { color: #e2e8f0; background: #1e2130; }
.nav-link.active { color: #fff; background: #6366f1; }
.sidebar-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid #1e2130;
}
.team-label { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: #64748b; font-weight: 600; margin-bottom: 0.5rem; }
.team-members { display: flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.75rem; color: #fff;
}
.avatar-sm { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.65rem; color: #fff; }
.sprint-date { font-size: 0.75rem; color: #64748b; }

/* Mobile nav toggle */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 200;
  background: #161922;
  border: 1px solid #1e2130;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
}

/* ===== MAIN CONTENT ===== */
.content {
  margin-left: 280px;
  flex: 1;
  padding: 2.5rem 3rem;
  max-width: 1100px;
}
section {
  margin-bottom: 4rem;
  padding-top: 1rem;
}
.section-badge {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: #6366f1;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #f1f5f9;
  margin-bottom: 0.75rem;
  line-height: 1.2;
}
h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #e2e8f0;
  margin: 2rem 0 1rem;
}
h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #f1f5f9;
  margin-bottom: 0.5rem;
}
p { color: #94a3b8; }
.lead { font-size: 1.05rem; color: #94a3b8; margin-bottom: 2rem; max-width: 700px; }

/* ===== STAT CARDS ===== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}
.stat-number { font-size: 1.75rem; font-weight: 800; color: #f1f5f9; }
.stat-label { font-size: 0.8rem; color: #94a3b8; margin: 0.25rem 0; }
.stat-impact { font-size: 0.75rem; color: #ef4444; font-weight: 600; }

/* ===== 8 SYSTEMS GRID ===== */
.systems-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.system-card {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 12px;
  padding: 1.25rem;
}
.system-icon { font-size: 1.5rem; margin-bottom: 0.5rem; }
.system-card h4 { font-size: 0.9rem; }
.system-card p { font-size: 0.8rem; }

/* ===== TECH STACK ===== */
.tech-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.75rem;
}
.tech-item {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.tech-item strong { color: #6366f1; font-size: 0.8rem; white-space: nowrap; min-width: 120px; }
.tech-item span { font-size: 0.85rem; color: #94a3b8; }

/* ===== MARKET / TIER CARDS ===== */
.tier { margin-bottom: 2rem; }
.tier-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.tier-badge { font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.tier-badge-1 { background: #6366f1; color: #fff; }
.tier-badge-2 { background: #f59e0b; color: #1a1a2e; }
.tier-badge-3 { background: #10b981; color: #fff; }
.tier-timing { font-size: 0.85rem; color: #64748b; }
.tier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1rem; }
.market-card {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 12px;
  padding: 1.5rem;
}
.market-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.market-card-header h4 { font-size: 1.1rem; }
.score { font-size: 0.85rem; font-weight: 700; color: #6366f1; white-space: nowrap; }
.score-new em { font-size: 0.65rem; background: #ef4444; color: #fff; padding: 0.1rem 0.4rem; border-radius: 4px; font-style: normal; margin-left: 0.25rem; }
.market-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin-bottom: 1rem; font-size: 0.8rem; }
.market-stats div { color: #94a3b8; }
.market-stats strong { color: #64748b; }
.market-why { font-size: 0.8rem; color: #64748b; border-top: 1px solid #1e2130; padding-top: 0.75rem; }

/* ===== TABLES ===== */
.table-wrapper { overflow-x: auto; margin: 1rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th { background: #161922; color: #94a3b8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; text-align: left; padding: 0.75rem 1rem; border-bottom: 1px solid #1e2130; }
td { padding: 0.75rem 1rem; border-bottom: 1px solid #1e2130; color: #e2e8f0; }
tr:hover td { background: #1a1d2e; }
.total-row td { background: #1a1d2e; font-weight: 700; }
.status-badge { font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 4px; white-space: nowrap; }
.status-green { background: #064e3b; color: #34d399; }
.status-yellow { background: #713f12; color: #fbbf24; }
.status-red { background: #7f1d1d; color: #f87171; }
.priority { font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 4px; }
.p1 { background: #6366f1; color: #fff; }
.p2 { background: #f59e0b; color: #1a1a2e; }
.p3 { background: #64748b; color: #fff; }
.p4 { background: #334155; color: #94a3b8; }

/* ===== CALLOUTS ===== */
.callout {
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.85rem;
}
.callout-info { background: #1e1b4b; border-left: 3px solid #6366f1; color: #c7d2fe; }
.callout-success { background: #052e16; border-left: 3px solid #10b981; color: #a7f3d0; }
.callout strong { color: #fff; }

/* ===== ARCHITECTURE ===== */
.architecture { margin: 1.5rem 0; }
.arch-layer {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 10px;
  padding: 1rem 1.25rem;
}
.arch-layer h4 { font-size: 0.8rem; color: #6366f1; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.arch-items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.arch-item {
  background: #1e2130;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #e2e8f0;
}
.arch-green { border-left: 3px solid #10b981; }
.arch-yellow { border-left: 3px solid #f59e0b; }
.arch-red { border-left: 3px solid #ef4444; }
.arch-arrow { text-align: center; font-size: 1.5rem; color: #6366f1; padding: 0.25rem 0; }

/* ===== HIPAA ===== */
.hipaa-steps {
  padding-left: 1.5rem;
  margin: 1rem 0;
}
.hipaa-steps li {
  font-size: 0.9rem;
  color: #94a3b8;
  margin-bottom: 0.5rem;
  padding-left: 0.5rem;
}
.hipaa-steps strong { color: #f1f5f9; }

/* ===== TABS ===== */
.tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tab {
  padding: 0.5rem 1.25rem;
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 8px;
  color: #94a3b8;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.tab:hover { color: #e2e8f0; border-color: #6366f1; }
.tab.active { background: #6366f1; color: #fff; border-color: #6366f1; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ===== ICP ===== */
.icp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.icp-card {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 10px;
  padding: 1.25rem;
}
.icp-card-wide { grid-column: 1 / -1; }
.icp-card ul { list-style: none; }
.icp-card li { font-size: 0.85rem; color: #94a3b8; padding: 0.25rem 0; }
.icp-card li strong { color: #e2e8f0; }
.disqualifiers { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.disq-tag { background: #7f1d1d; color: #fca5a5; font-size: 0.75rem; padding: 0.3rem 0.75rem; border-radius: 6px; font-weight: 500; }

/* ===== SPRINT PLAN ===== */
.team-legend { display: flex; gap: 0.75rem; margin-bottom: 2rem; flex-wrap: wrap; }
.team-tag { font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 6px; white-space: nowrap; }
.team-andre { background: #312e81; color: #a5b4fc; }
.team-jason { background: #78350f; color: #fcd34d; }
.team-ed { background: #064e3b; color: #6ee7b7; }
.sprint-day {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 12px;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.sprint-day-final { border-color: #6366f1; }
.day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  background: #1a1d2e;
  border-bottom: 1px solid #1e2130;
}
.day-header-full { background: linear-gradient(135deg, #1a1d2e, #1e293b); }
.day-header h3 { margin: 0; font-size: 1rem; }
.day-team { display: flex; gap: 0.35rem; }
.task-list { padding: 0.75rem; }
.task {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.task:hover { background: #1a1d2e; }
.task .team-tag { margin-top: 0.2rem; flex-shrink: 0; }
.task-detail strong { font-size: 0.9rem; color: #f1f5f9; }
.task-detail p { font-size: 0.8rem; color: #64748b; margin-top: 0.2rem; }

/* ===== SCRIPTS ===== */
.scripts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.script-card {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 12px;
  overflow: hidden;
}
.script-card-outbound { border-color: #334155; }
.script-header {
  padding: 0.4rem 1rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.script-tier1 { background: #6366f1; color: #fff; }
.script-tier2 { background: #f59e0b; color: #1a1a2e; }
.script-tier3 { background: #10b981; color: #fff; }
.script-tier4 { background: #64748b; color: #fff; }
.script-outbound { background: #334155; color: #e2e8f0; }
.script-card h4 { padding: 1rem 1rem 0.25rem; font-size: 0.95rem; }
.script-card > p { padding: 0 1rem; font-size: 0.8rem; }
.script-includes {
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  color: #64748b;
  border-top: 1px solid #1e2130;
  margin-top: 0.75rem;
}

/* ===== RISKS ===== */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.risk-card {
  background: #161922;
  border-radius: 10px;
  padding: 1.25rem;
  border-left: 4px solid;
}
.risk-critical { border-color: #ef4444; }
.risk-high { border-color: #f59e0b; }
.risk-medium { border-color: #6366f1; }
.risk-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.risk-level { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.risk-critical .risk-level { color: #ef4444; }
.risk-high .risk-level { color: #f59e0b; }
.risk-medium .risk-level { color: #6366f1; }
.risk-owner { font-size: 0.7rem; color: #64748b; font-weight: 600; }
.risk-card h4 { font-size: 0.9rem; margin-bottom: 0.5rem; }
.risk-card p { font-size: 0.8rem; }

/* ===== ROADMAP ===== */
.roadmap { position: relative; padding-left: 2rem; }
.roadmap::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1e2130;
}
.roadmap-phase {
  position: relative;
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.phase-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  flex-shrink: 0;
  margin-left: -14px;
  z-index: 1;
}
.phase-1 { background: #6366f1; }
.phase-2 { background: #f59e0b; }
.phase-3 { background: #10b981; }
.phase-4 { background: #ef4444; }
.phase-content { flex: 1; }
.phase-content h4 { margin-bottom: 0.5rem; }
.phase-content ul { list-style: none; }
.phase-content li { font-size: 0.85rem; color: #94a3b8; padding: 0.2rem 0; padding-left: 1rem; position: relative; }
.phase-content li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 5px; height: 5px; background: #334155; border-radius: 50%; }

/* ===== ASSETS ===== */
.assets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
.asset-card {
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 12px;
  padding: 1.5rem;
  transition: border-color 0.15s ease;
}
.asset-card:hover { border-color: #6366f1; }
.asset-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.asset-card p { font-size: 0.8rem; margin-bottom: 0.75rem; }
.asset-file {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #6366f1;
  background: #1e1b4b;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

/* ===== ASSET CARD LINKS ===== */
.asset-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
  cursor: pointer;
}
.asset-card-link:hover { border-color: #6366f1; transform: translateY(-2px); transition: all 0.2s ease; }
.asset-card-link h4 { color: #f1f5f9; }
.gdrive-link { color: #6366f1; text-decoration: underline; font-weight: 600; }
.gdrive-link:hover { color: #818cf8; }

/* Link Admin Panel */
.link-admin { margin-top: 1rem; }
.link-admin summary {
  cursor: pointer;
  font-size: 0.8rem;
  color: #64748b;
  font-weight: 600;
  padding: 0.5rem 0;
}
.link-admin summary:hover { color: #94a3b8; }
.link-admin-form { padding: 1rem 0; }
.link-admin-form > p { font-size: 0.8rem; margin-bottom: 1rem; }
.link-field { margin-bottom: 0.75rem; }
.link-field label {
  display: block;
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.link-field input {
  width: 100%;
  max-width: 600px;
  padding: 0.5rem 0.75rem;
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 6px;
  color: #e2e8f0;
  font-size: 0.8rem;
  font-family: 'JetBrains Mono', monospace;
}
.link-field input:focus { outline: none; border-color: #6366f1; }

/* ===== QUESTIONS ===== */
.questions-list { display: flex; flex-direction: column; gap: 1rem; }
.question {
  display: flex;
  gap: 1rem;
  background: #161922;
  border: 1px solid #1e2130;
  border-radius: 10px;
  padding: 1.25rem;
  align-items: flex-start;
}
.critical-q { border-color: #ef4444; }
.q-number {
  width: 32px;
  height: 32px;
  background: #1e2130;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #94a3b8;
  flex-shrink: 0;
}
.critical-q .q-number { background: #7f1d1d; color: #fca5a5; }
.question h4 { font-size: 0.9rem; margin-bottom: 0.25rem; }
.question p { font-size: 0.8rem; }

/* ===== FOOTER ===== */
footer {
  text-align: center;
  padding: 2rem 0;
  margin-top: 2rem;
  border-top: 1px solid #1e2130;
}
footer p { font-size: 0.75rem; color: #475569; }

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 20px rgba(0,0,0,0.5); }
  .mobile-nav-toggle { display: block; }
  .content { margin-left: 0; padding: 2rem 1.25rem; padding-top: 4rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-cards { grid-template-columns: 1fr; }
  .icp-grid { grid-template-columns: 1fr; }
  .risk-grid { grid-template-columns: 1fr; }
  .scripts-grid { grid-template-columns: 1fr; }
  .market-stats { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .stat-grid { grid-template-columns: 1fr; }
  .systems-grid { grid-template-columns: 1fr; }
  .tech-stack { grid-template-columns: 1fr; }
  .task { flex-direction: column; }
  h2 { font-size: 1.4rem; }
}