:root {
            --emerald: #10b981;
            --emerald-dark: #047857;
            --indigo: #4f46e5;
            --amber: #f59e0b;
            --rose: #ef4444;
            --slate: #0f172a;
            --muted: #64748b;
            --surface: #ffffff;
            --bg: #f8fafc;
        }
        body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--slate); }
        .card { background: var(--surface); border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 8px 24px rgba(15, 23, 42, .04); }
        .soft-card { background: linear-gradient(180deg, #fff, #f8fafc); border: 1px solid #e2e8f0; border-radius: 1rem; }
        .network-box { height: 560px; background: radial-gradient(circle at top, #ffffff 0%, #f1f5f9 100%); border-radius: 1rem; }
        .compact-network-box { height: 450px; background: radial-gradient(circle at top, #ffffff 0%, #f8fafc 100%); border-radius: 1rem; }
        .chart-container { position: relative; height: 320px; width: 100%; }
        .tab-active { border-bottom: 2px solid var(--emerald); color: #065f46; font-weight: 700; background: linear-gradient(180deg, rgba(16,185,129,0.05), transparent); }
        .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
        .custom-scrollbar::-webkit-scrollbar-track { background: #f1f5f9; }
        .custom-scrollbar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        .loader { border-top-color: var(--emerald); animation: spinner 1.2s linear infinite; }
        .badge { display: inline-flex; align-items: center; border-radius: 999px; font-size: 11px; font-weight: 700; padding: .2rem .55rem; }
        .metric-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #64748b; font-weight: 700; }
        .fade-in { animation: fadein .25s ease-out; }
        .glass { backdrop-filter: blur(8px); background: rgba(255,255,255,0.85); }
        .drawer-open { transform: translateX(0) !important; }
        .sort-btn:hover { color: var(--emerald); }
        @keyframes spinner { from { transform: rotate(0); } to { transform: rotate(360deg); } }
        @keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
    


/* ===== Version 3 graph readability ===== */
#overviewHerbNetwork,
#cpNetwork,
#ppiNetwork {
  background: transparent;
}



/* ===== Version 4 AI Network Pharmacology Platform ===== */
.v4-action-bar{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 16px}
.v4-btn{padding:10px 16px;border:none;border-radius:10px;background:#0f766e;color:#fff;font-weight:700;cursor:pointer}
.v4-btn.secondary{background:#334155}
.v4-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0 0 18px}
.v4-card{background:#fff;border-radius:14px;padding:16px 18px;box-shadow:0 1px 4px rgba(15,23,42,.08)}
.v4-card-label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#64748b;margin-bottom:10px}
.v4-card-value{font-size:20px;font-weight:800;color:#0f172a;line-height:1.25}
.v4-card-value.small{font-size:14px;font-weight:700}
.v4-panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.v4-panel{background:#fff;border-radius:16px;padding:18px;box-shadow:0 1px 4px rgba(15,23,42,.08)}
.v4-panel.full{grid-column:1/-1}
.v4-panel-header{font-size:15px;font-weight:800;color:#0f172a;margin-bottom:14px}
.v4-table-wrap{overflow:auto}
.v4-table{width:100%;border-collapse:collapse}
.v4-table th,.v4-table td{padding:10px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:top}
.v4-table th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#64748b;background:#f8fafc}
.v4-pill{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700}
.v4-pill.high{background:#dcfce7;color:#166534}
.v4-pill.medium{background:#fef3c7;color:#92400e}
.v4-pill.low{background:#fee2e2;color:#991b1b}
.v4-report-wrap{font-size:14px;line-height:1.6;color:#334155}
.v4-report-wrap h3{font-size:16px;font-weight:800;color:#0f172a;margin:16px 0 8px}
.v4-report-wrap ul{margin:0 0 10px 18px}
@media (max-width: 980px){
  .v4-summary-grid{grid-template-columns:1fr 1fr}
  .v4-panels{grid-template-columns:1fr}
}