/* ═══════════════════════════════════════════════════════
   REPO DETAIL DRAWER
═══════════════════════════════════════════════════════ */
.drawer-overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:200; opacity:0; pointer-events:none; transition:opacity .25s var(--ease) }
.drawer-overlay.open { opacity:1; pointer-events:all }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(680px,100vw); background:var(--bg2); border-left:1px solid var(--line2); z-index:201; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s var(--ease); box-shadow:-8px 0 40px rgba(0,0,0,.12); overflow:hidden }
.drawer.open { transform:translateX(0) }

.dr-top { display:flex; align-items:center; gap:10px; padding:14px 20px; border-bottom:1px solid var(--line); flex-shrink:0; background:var(--bg2); position:sticky; top:0; z-index:1 }
.dr-nav { display:flex; align-items:center; gap:4px }
.dr-nav-btn { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); color:var(--tx3); font-size:13px; border:1px solid transparent; transition:all var(--t); cursor:pointer; font-family:var(--mono); font-weight:600 }
.dr-nav-btn:hover:not(:disabled) { background:var(--bg3); color:var(--tx); border-color:var(--line) }
.dr-nav-btn:disabled { opacity:.3; cursor:not-allowed }
.dr-title { flex:1; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--tx) }
.dr-actions { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.dr-action-btn { display:flex; align-items:center; gap:5px; padding:5px 11px; border-radius:var(--r-sm); font-size:11px; font-weight:600; border:1px solid var(--line2); background:var(--bg3); color:var(--tx2); cursor:pointer; transition:all var(--t); white-space:nowrap }
.dr-action-btn:hover { border-color:var(--accent); color:var(--accent) }
.dr-action-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent) }
.dr-action-btn.primary:hover { background:#0047CC }
.dr-close { width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); color:var(--tx3); font-size:16px; cursor:pointer; border:1px solid transparent; transition:all var(--t) }
.dr-close:hover { background:var(--bg3); color:var(--tx); border-color:var(--line) }

.dr-body { flex:1; overflow-y:auto; scroll-behavior:smooth }
.dr-hero { padding:24px 24px 0 }
.dr-repo-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:16px }
.dr-avatar { width:52px; height:52px; border-radius:12px; overflow:hidden; border:1px solid var(--line2); background:var(--bg3); flex-shrink:0 }
.dr-avatar img { width:100%; height:100%; object-fit:cover }
.dr-repo-info { flex:1; min-width:0 }
.dr-owner { font-size:12px; color:var(--tx3); font-family:var(--mono); margin-bottom:2px }
.dr-repo-name { font-size:20px; font-weight:700; letter-spacing:-.4px; color:var(--tx) }
.dr-repo-badges { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }
.dr-badge { display:flex; align-items:center; gap:4px; padding:3px 9px; border-radius:4px; font-size:11px; font-weight:500; background:var(--bg3); border:1px solid var(--line2); color:var(--tx2) }
.dr-badge.lang { gap:6px }
.dr-badge-dot { width:8px; height:8px; border-radius:50% }
.dr-stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px }
.dr-stat { background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; text-align:center }
.dr-stat-val { font-family:var(--mono); font-size:16px; font-weight:700; color:var(--tx) }
.dr-stat-lbl { font-size:10px; color:var(--tx3); text-transform:uppercase; letter-spacing:.6px; margin-top:3px; font-weight:500 }
.dr-score-row { display:flex; align-items:center; gap:10px; background:var(--bg3); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 14px; margin-bottom:16px }
.dr-score-lbl { font-size:11px; color:var(--tx3); font-family:var(--mono); font-weight:600; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap }
.dr-score-track { flex:1; height:6px; background:var(--bg4); border-radius:3px; overflow:hidden }
.dr-score-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--accent),#00AAFF); transition:width .8s var(--ease) }
.dr-score-val { font-family:var(--mono); font-size:14px; font-weight:700; color:var(--accent); min-width:32px; text-align:right }
.dr-lang-bar { height:8px; border-radius:4px; overflow:hidden; display:flex; margin-bottom:6px }
.dr-lang-seg { height:100%; transition:width .6s var(--ease) }
.dr-lang-legend { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px }
.dr-lang-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--tx2); font-family:var(--mono) }
.dr-lang-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0 }
.dr-clone { padding:0 24px 20px }
.dr-clone-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--tx3); margin-bottom:8px }
.dr-clone-row { display:flex; align-items:stretch; gap:0; background:var(--bg3); border:1px solid var(--line2); border-radius:var(--r-sm); overflow:hidden; margin-bottom:8px }
.dr-clone-label { padding:8px 12px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; background:var(--bg4); border-right:1px solid var(--line2); color:var(--tx3); display:flex; align-items:center; white-space:nowrap; min-width:56px; justify-content:center }
.dr-clone-cmd { flex:1; padding:8px 10px; font-family:var(--mono); font-size:12px; color:var(--tx2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:transparent; border:none; outline:none; cursor:text }
.dr-clone-copy { padding:8px 12px; font-size:11px; font-weight:600; color:var(--accent); border-left:1px solid var(--line2); background:transparent; cursor:pointer; transition:all var(--t); white-space:nowrap }
.dr-clone-copy:hover { background:var(--accent-lo) }
.dr-clone-copy.copied { color:var(--green) }
.dr-download-row { display:flex; gap:8px; margin-bottom:4px }
.dr-section { padding:0 24px 20px }
.dr-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--tx3); margin-bottom:10px }
.dr-topics { display:flex; flex-wrap:wrap; gap:6px }
.dr-topic { font-size:12px; font-family:var(--mono); color:var(--accent); background:var(--accent-lo); border:1px solid var(--accent-mid); padding:3px 10px; border-radius:20px; cursor:pointer; transition:all var(--t) }
.dr-topic:hover { background:var(--accent-mid) }
.dr-readme { padding:0 24px 32px }
.dr-readme-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--tx3); margin-bottom:12px; display:flex; align-items:center; gap:8px }
.dr-readme-body { font-size:13px; line-height:1.75; color:var(--tx2); border:1px solid var(--line); border-radius:var(--r); padding:20px; background:var(--bg3) }
.dr-readme-body h1,.dr-readme-body h2,.dr-readme-body h3,.dr-readme-body h4 { color:var(--tx); font-weight:700; margin:16px 0 8px; line-height:1.3 }
.dr-readme-body h1 { font-size:20px }
.dr-readme-body h2 { font-size:16px; padding-bottom:6px; border-bottom:1px solid var(--line) }
.dr-readme-body h3 { font-size:14px }
.dr-readme-body p { margin-bottom:12px }
.dr-readme-body a { color:var(--accent); text-decoration:none }
.dr-readme-body a:hover { text-decoration:underline }
.dr-readme-body code { font-family:var(--mono); font-size:11px; background:var(--bg4); padding:2px 5px; border-radius:3px; color:var(--accent) }
.dr-readme-body pre { background:var(--bg); border:1px solid var(--line2); border-radius:var(--r-sm); padding:14px; overflow-x:auto; margin-bottom:12px }
.dr-readme-body pre code { background:none; padding:0; font-size:12px; color:var(--tx) }
.dr-readme-body ul,.dr-readme-body ol { padding-left:20px; margin-bottom:12px }
.dr-readme-body li { margin-bottom:4px }
.dr-readme-body img { max-width:100%; border-radius:6px; margin:8px 0 }
.dr-readme-body blockquote { border-left:3px solid var(--accent); padding-left:12px; color:var(--tx3); margin:12px 0; font-style:italic }
.dr-readme-body table { width:100%; border-collapse:collapse; margin-bottom:12px; font-size:12px }
.dr-readme-body th { background:var(--bg4); padding:8px 12px; text-align:left; font-weight:600; color:var(--tx); border:1px solid var(--line2) }
.dr-readme-body td { padding:7px 12px; border:1px solid var(--line2); color:var(--tx2) }
.dr-readme-body hr { border:none; border-top:1px solid var(--line2); margin:16px 0 }
.dr-readme-body .readme-empty { text-align:center; padding:24px; color:var(--tx3); font-style:italic }
.dr-related { padding:0 24px 20px }
.dr-related-grid { display:flex; flex-direction:column; gap:8px }
.dr-rel-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--bg3); cursor:pointer; transition:all var(--t); text-decoration:none; color:inherit }
.dr-rel-card:hover { border-color:var(--accent); background:var(--accent-lo) }
.dr-rel-av { width:28px; height:28px; border-radius:6px; overflow:hidden; flex-shrink:0 }
.dr-rel-av img { width:100%; height:100%; object-fit:cover }
.dr-rel-info { flex:1; min-width:0 }
.dr-rel-name { font-size:12px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.dr-rel-desc { font-size:11px; color:var(--tx3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px }
.dr-rel-stars { font-family:var(--mono); font-size:11px; color:var(--amber); flex-shrink:0 }
.dr-footer { padding:16px 24px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; background:var(--bg2) }
.dr-footer-left { font-size:11px; color:var(--tx3) }
.dr-github-link { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:var(--tx3); border:1px solid var(--line2); border-radius:var(--r-sm); padding:5px 12px; transition:all var(--t); text-decoration:none }
.dr-github-link:hover { color:var(--tx); border-color:var(--line) }
.dr-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:60px 24px; gap:12px; color:var(--tx3) }
.dr-spinner { width:32px; height:32px; border:3px solid var(--line2); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }
@media(max-width:700px) { .drawer { width:100vw; border-left:none } .dr-stats-row { grid-template-columns:repeat(2,1fr) } }
@media(max-width:480px) { .dr-top { padding:10px 14px; flex-wrap:wrap; gap:6px } .dr-actions { width:100%; justify-content:flex-end } .dr-hero { padding:16px 16px 0 } .dr-section,.dr-clone,.dr-readme,.dr-related { padding-left:16px; padding-right:16px } }