:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #111113;--surface-hover: #1a1a1e;--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .16);--text: #fafafa;--text-muted: rgba(255, 255, 255, .55);--text-secondary: rgba(255, 255, 255, .7);--accent: #6366f1;--accent-soft: rgba(99, 102, 241, .12);--green: #22c55e;--green-soft: rgba(34, 197, 94, .12);--yellow: #eab308;--yellow-soft: rgba(234, 179, 8, .1);--red: #ef4444;--red-soft: rgba(239, 68, 68, .1);--blue: #3b82f6;--blue-soft: rgba(59, 130, 246, .1);--radius: .625rem;--radius-sm: .375rem}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column}.header{border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:10}.header-content{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:.75rem;color:var(--accent)}.logo h1{font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--text);line-height:1.2}.subtitle{font-size:.75rem;color:var(--text-muted)}.stats{display:flex;gap:1rem}.stat{font-size:.8rem;color:var(--text-muted);font-variant-numeric:tabular-nums}.main{max-width:1200px;margin:0 auto;padding:1.5rem;width:100%;flex:1}.search-bar{position:relative;margin-bottom:1rem}.search-icon{position:absolute;left:1rem;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.search-bar input{width:100%;padding:.75rem 2.5rem .75rem 2.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.9rem;outline:none;transition:border-color .15s}.search-bar input:focus{border-color:var(--accent)}.search-bar input::placeholder{color:var(--text-muted)}.clear-btn{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-muted);font-size:1.25rem;cursor:pointer;line-height:1;padding:.25rem}.clear-btn:hover{color:var(--text)}.categories{display:flex;gap:.5rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1rem;scrollbar-width:none}.categories::-webkit-scrollbar{display:none}.cat-btn{white-space:nowrap;padding:.4rem .85rem;border-radius:100px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);font-size:.8rem;cursor:pointer;transition:all .15s}.cat-btn:hover{border-color:var(--border-hover);color:var(--text)}.cat-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}.results-info{font-size:.8rem;color:var(--text-muted);margin-bottom:1rem}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.drug-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem;cursor:pointer;text-align:left;color:inherit;font:inherit;transition:all .15s;display:flex;flex-direction:column;gap:.5rem}.drug-card:hover{border-color:var(--border-hover);background:var(--surface-hover);transform:translateY(-1px)}.drug-card-header{display:flex;justify-content:space-between;align-items:flex-start}.drug-card-header h3{font-size:1.1rem;font-weight:600;letter-spacing:-.01em}.generic-name{font-size:.8rem;color:var(--text-muted);font-style:italic}.category-tag{display:inline-block;padding:.15rem .6rem;background:var(--accent-soft);color:var(--accent);border-radius:100px;font-size:.7rem;font-weight:500;width:fit-content}.route-badge{display:inline-block;padding:.15rem .5rem;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:.65rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.drug-desc{font-size:.82rem;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.empty{text-align:center;padding:4rem 2rem;color:var(--text-muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:100;padding:1rem}.modal{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;padding:2rem;position:relative}.modal-close{position:absolute;top:1rem;right:1rem;background:none;border:none;color:var(--text-muted);font-size:1.5rem;cursor:pointer;line-height:1;padding:.25rem}.modal-close:hover{color:var(--text)}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:.5rem}.modal-header h2{font-size:1.5rem;font-weight:700;letter-spacing:-.02em}.modal-badges{display:flex;gap:.5rem;flex-shrink:0}.drug-class-label{font-size:.8rem;color:var(--accent);font-weight:500;margin-bottom:.75rem}.modal-desc{font-size:.9rem;color:var(--text-secondary);line-height:1.6;margin-bottom:1.5rem}.detail-section{margin-bottom:1.25rem}.detail-section h4{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.6rem}.pill-list{display:flex;flex-wrap:wrap;gap:.4rem}.pill{display:inline-block;padding:.2rem .6rem;border-radius:100px;font-size:.78rem}.use-pill{background:var(--green-soft);color:var(--green)}.side-pill{background:var(--yellow-soft);color:var(--yellow)}.interaction-pill{background:var(--blue-soft);color:var(--blue)}.dosage-text{font-size:.9rem;color:var(--text);background:#ffffff08;padding:.6rem .85rem;border-radius:var(--radius-sm);border:1px solid var(--border);font-variant-numeric:tabular-nums}.warning-section{background:var(--red-soft);border-radius:var(--radius);margin-left:-1rem;margin-right:-1rem;padding:1rem 1.5rem}.warning-section h4{color:var(--red)}.warning-list{list-style:none;display:flex;flex-direction:column;gap:.35rem}.warning-list li{font-size:.85rem;color:var(--text-secondary);position:relative;padding-left:1rem}.warning-list li:before{content:"!";position:absolute;left:0;color:var(--red);font-weight:700;font-size:.75rem}@media(max-width:640px){.header-content{flex-direction:column;gap:.5rem;align-items:flex-start}.grid{grid-template-columns:1fr}.modal{padding:1.25rem}.modal-header{flex-direction:column}}