/* ── Pack View Page Styles ── */
.pack-detail-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-8); align-items: flex-start; }
@media (max-width: 1024px) { .pack-detail-layout { grid-template-columns: 1fr; } }
.tab-content { transition: opacity 140ms ease, transform 140ms ease; }

.pack-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--space-8); align-items: flex-start; }
@media (max-width: 900px) { .pack-hero { grid-template-columns: 1fr; } }

.pack-hero-thumb { width: 260px; height: 260px; flex-shrink: 0; background: var(--surface-container-high); border-radius: var(--radius-xl); overflow: hidden; display: flex; align-items: center; justify-content: center; }
@media (max-width: 900px) { .pack-hero-thumb { width: 100%; height: auto; aspect-ratio: 1/1; max-width: 320px; } }
.pack-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }

.versions-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.version-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg); flex-wrap: wrap; }
.version-item:hover { background: var(--surface-container-high); }
.version-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.version-gvs { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.pack-meta-row { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin: var(--space-4) 0; }
.pack-meta-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body); color: var(--on-surface-variant); }
.pack-meta-item .icon { font-size: 18px; }

.pack-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }

.pack-content { font-size: var(--text-body-lg); }

.compat-table { width: 100%; border-collapse: collapse; margin: var(--space-4) 0; }
.compat-table th, .compat-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--outline-variant); font-size: var(--text-body); }
.compat-table th { font-family: var(--font-sans); font-weight: 600; color: var(--on-surface); background: var(--surface-container); }
.compat-table td { color: var(--on-surface-variant); }

.tags-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-6); }

.screenshots-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.screenshots-grid img { border-radius: var(--radius-lg); cursor: zoom-in; transition: transform var(--duration-short); aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.screenshots-grid img:hover { transform: scale(1.02); }
@media (max-width: 640px) { .screenshots-grid { grid-template-columns: repeat(2, 1fr); } }

.sidebar-download-card { background: var(--surface-container); border: 1px solid var(--outline-variant); border-radius: var(--radius-xl); padding: var(--space-6); position: sticky; top: 80px; }

.author-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--surface-container-high); border-radius: var(--radius-lg); margin-top: var(--space-4); }

/* ── Comments ── */
.comment-card { background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--radius-xl);padding:var(--space-5);margin-bottom:var(--space-3);transition:border-color var(--duration-short); }
.comment-card:hover { border-color:color-mix(in srgb,var(--primary) 30%,var(--outline-variant)); }
.comment-header { display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);justify-content:space-between; }
.comment-header-left { display:flex;align-items:center;gap:var(--space-3); }
.comment-delete-btn { display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-full);background:transparent;border:1px solid transparent;color:var(--on-surface-variant);opacity:0.4;font-size:var(--text-label);cursor:pointer;transition:all var(--duration-short); }
.comment-delete-btn:hover { opacity:1;background:var(--error-container);border-color:var(--error);color:var(--on-error-container); }
.comment-time { font-size:var(--text-label);color:var(--on-surface-variant);opacity:0.6; }
.comment-body { font-size:var(--text-body);color:var(--on-surface-variant);line-height:1.7;white-space:pre-wrap;word-break:break-word; }
.char-counter { font-size:var(--text-label);color:var(--on-surface-variant);text-align:right;margin-top:var(--space-1);transition:color var(--duration-short); }
.char-counter.warn { color:var(--warning); } .char-counter.over { color:var(--error); }

/* ── Ratings ── */
.rating-breakdown { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-6); }
.rating-row { display: flex; align-items: center; gap: var(--space-3); }
.rating-row-label { font-family: var(--font-sans); font-size: var(--text-label-lg); color: var(--on-surface-variant); min-width: 20px; }
.rating-bar { flex: 1; height: 8px; background: var(--surface-container-high); border-radius: 4px; overflow: hidden; }
.rating-bar-fill { height: 100%; background: var(--primary); border-radius: 4px; transition: width var(--duration-medium); }
.rating-row-count { font-size: var(--text-label); color: var(--on-surface-variant); min-width: 24px; text-align: right; }

/* ── Support links ── */
.support-links { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.support-link { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--on-surface-variant); font-size: var(--text-body); transition: background var(--duration-short); }
.support-link:hover { background: var(--surface-container-high); color: var(--on-surface); }
.support-link .icon { font-size: 18px; }

/* ── Heart / Share buttons ── */
.heart-btn { display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 20px;border-radius:var(--radius-full);background:var(--surface-container-high);border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-family:var(--font-sans);font-size:var(--text-body);font-weight:600;cursor:pointer;transition:all var(--duration-medium);line-height:1; }
.heart-btn:hover { background:color-mix(in srgb,var(--primary) 12%,var(--surface-container-high));border-color:var(--primary);color:var(--primary); }
.heart-btn.active { background:color-mix(in srgb,#e53935 12%,var(--surface-container-high));border-color:#e53935;color:#e53935; }
.heart-btn .icon { font-size:18px;transition:transform var(--duration-short); }
.heart-btn.active .icon { transform:scale(1.25); }
.share-btn { display:inline-flex;align-items:center;gap:var(--space-2);padding:10px 20px;border-radius:var(--radius-full);background:transparent;border:1px solid var(--outline-variant);color:var(--on-surface-variant);font-family:var(--font-sans);font-size:var(--text-body);font-weight:600;cursor:pointer;transition:all var(--duration-medium);line-height:1; }
.share-btn:hover { border-color:var(--primary);color:var(--primary); }

/* ── Download modal ── */
.dl-modal-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:500;display:flex;align-items:center;justify-content:center;padding:var(--space-6);opacity:0;pointer-events:none;transition:opacity var(--duration-medium); }
.dl-modal-backdrop.open { opacity:1;pointer-events:all; }
.dl-modal { background:var(--surface-container);border-radius:var(--radius-xl);padding:var(--space-8);max-width:480px;width:100%;transform:translateY(20px) scale(.97);transition:transform var(--duration-medium) var(--easing-enter);box-shadow:0 24px 64px rgba(0,0,0,.4); }
.dl-modal-backdrop.open .dl-modal { transform:translateY(0) scale(1); }
.dl-modal-head { display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-6); }
.dl-modal-icon { width:56px;height:56px;border-radius:var(--radius-lg);object-fit:cover;background:var(--surface-container-high);flex-shrink:0; }
.dl-steps { display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-6) 0; }
.dl-step { display:flex;align-items:flex-start;gap:var(--space-4); }
.dl-step-num { width:28px;height:28px;border-radius:var(--radius-full);background:var(--primary-container);color:var(--on-primary-container);font-size:var(--text-label-lg);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.dl-step-body { font-size:var(--text-body);color:var(--on-surface-variant);line-height:1.6; }
.dl-step-body strong { color:var(--on-surface); }
.dl-meta { display:flex;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4);background:var(--surface-container-high);border-radius:var(--radius-lg);margin-bottom:var(--space-6); }
.dl-meta-item { display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-label-lg);color:var(--on-surface-variant); }
.dl-meta-item .icon { font-size:16px; }

/* ── Download version picker ── */
.dl-versions-picker{margin:var(--space-4) 0;border:1px solid var(--outline-variant);border-radius:var(--radius-lg);overflow:hidden}
.dl-versions-summary{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);cursor:pointer;font-size:var(--text-body);font-weight:500;color:var(--on-surface-variant);list-style:none;user-select:none;transition:background var(--duration-short)}
.dl-versions-summary:hover{background:var(--surface-container-high)}
.dl-versions-summary::-webkit-details-marker{display:none}
.dl-versions-arrow{margin-left:auto;transition:transform var(--duration-short)}
.dl-versions-picker[open] .dl-versions-arrow{transform:rotate(180deg)}
.dl-versions-list{max-height:200px;overflow-y:auto;border-top:1px solid var(--outline-variant)}
.dl-version-row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid color-mix(in srgb,var(--outline-variant) 50%,transparent)}
.dl-version-row:last-child{border-bottom:none}
.dl-version-row:hover{background:var(--surface-container-high)}
.version-latest-badge { background:var(--primary-container);color:var(--on-primary-container);font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--radius-full);letter-spacing:.3px;text-transform:uppercase; }

/* ── Lightbox ── */
.lb-backdrop { position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:600;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--duration-medium); }
.lb-backdrop.open { opacity:1;pointer-events:all; }
.lb-img-wrap { position:relative;max-width:90vw;max-height:90vh; }
.lb-img-wrap img { max-width:90vw;max-height:82vh;border-radius:var(--radius-xl);object-fit:contain;display:block; }
.lb-close,.lb-prev,.lb-next { position:fixed;background:rgba(255,255,255,.1);border:none;color:#fff;cursor:pointer;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;transition:background var(--duration-short);backdrop-filter:blur(4px); }
.lb-close { top:var(--space-6);right:var(--space-6);width:44px;height:44px; }
.lb-prev,.lb-next { top:50%;transform:translateY(-50%);width:48px;height:48px; }
.lb-prev { left:var(--space-4); } .lb-next { right:var(--space-4); }
.lb-close:hover,.lb-prev:hover,.lb-next:hover { background:rgba(255,255,255,.2); }
.lb-caption { position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%);font-size:var(--text-label-lg);color:rgba(255,255,255,.7); }

/* ── Avatar color variety ── */
.av-color-a{background:#C62828;color:#fff} .av-color-b{background:#1565C0;color:#fff}
.av-color-c{background:#2E7D32;color:#fff} .av-color-d{background:#4527A0;color:#fff}
.av-color-e{background:#00695C;color:#fff} .av-color-f{background:#E65100;color:#fff}
.av-color-g{background:#558B2F;color:#fff} .av-color-h{background:#6A1B9A;color:#fff}
.av-color-i{background:#0277BD;color:#fff} .av-color-j{background:#AD1457;color:#fff}
.av-color-k{background:#00838F;color:#fff} .av-color-l{background:#F57F17;color:#000}
.av-color-m{background:#37474F;color:#fff} .av-color-n{background:#BF360C;color:#fff}
.av-color-o{background:#880E4F;color:#fff} .av-color-p{background:#1A237E;color:#fff}

/* ── Spin animation ── */
.spin-icon{animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}