/* ═══════════════════════════════════════════════════════════════════════
   Plugin Manager — theme-aware (uses shared --pp-* tokens; light/dark safe)
   ═══════════════════════════════════════════════════════════════════════ */
.plugin-manager-page {
    min-height: 100vh;
    background: var(--pp-app-bg);
    color: var(--pp-text);
}

/* ── Navbar ──────────────────────────────────────────────────────────── */
.plugin-manager-page .navbar-manager {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    background: var(--pp-navbar-bg);
    border-bottom: 1px solid color-mix(in srgb, var(--pp-border) 76%, transparent);
    position: sticky; top: 0; z-index: 30;
}
/* The theme picker lives in the last 1fr grid column; a grid item stretches to
   fill its cell by default, which would push its absolute dropdown to the far
   right edge. Shrink it to the trigger and pin it right so the menu opens
   directly below the button. */
.plugin-manager-page .navbar-manager .pp-theme-picker { justify-self: end; }
.plugin-manager-page .plugin-manager-back {
    width: max-content;
    color: color-mix(in srgb, var(--pp-accent) 82%, white);
    font-size: .92rem; font-weight: 650;
}
.plugin-manager-page .plugin-manager-back:hover { color: #fff; }
.plugin-manager-page .plugin-manager-navbar-title { color: #f8fafc; font-size: .88rem; font-weight: 700; text-align:center; }
.plugin-manager-page .pm-nav-right { display:flex; align-items:center; justify-content:flex-end; gap:.75rem; }
.plugin-manager-page .pm-guide-link {
    display:inline-flex; align-items:center; color: color-mix(in srgb, var(--pp-accent) 82%, white);
    font-size:.85rem; font-weight:650; text-decoration:none; padding:.3rem .6rem; border-radius:8px;
    border:1px solid color-mix(in srgb, var(--pp-accent) 40%, transparent); transition:background .15s ease, color .15s ease;
}
.plugin-manager-page .pm-guide-link:hover { background: color-mix(in srgb, var(--pp-accent) 20%, transparent); color:#fff; }

.plugin-manager-content { max-width: 1400px; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.plugin-manager-page .pm-btn-accent {
    background: var(--pp-accent); border:1px solid var(--pp-accent); color:#fff; font-weight:650; font-size:.85rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--pp-accent) 30%, transparent);
}
.plugin-manager-page .pm-btn-accent:hover { filter: brightness(1.07); color:#fff; }
.plugin-manager-page .pm-btn-ghost {
    background: var(--pp-surface); border:1px solid var(--pp-border-strong); color:var(--pp-text); font-weight:600; font-size:.85rem;
}
.plugin-manager-page .pm-btn-ghost:hover { border-color: var(--pp-accent); color: var(--pp-accent); }

/* ── Hero ────────────────────────────────────────────────────────────── */
.pm-hero {
    display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
    padding:1.4rem 1.6rem; border-radius:18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--pp-accent) 16%, var(--pp-surface)), var(--pp-surface));
    border:1px solid var(--pp-border); box-shadow: 0 10px 30px var(--pp-shadow-color);
}
.pm-hero-main { display:flex; align-items:center; gap:1rem; min-width:0; }
.pm-hero-icon {
    display:grid; place-items:center; flex:0 0 auto; width:52px; height:52px; border-radius:15px;
    background: var(--pp-accent-soft); color:var(--pp-accent); font-size:1.5rem;
    border:1px solid color-mix(in srgb, var(--pp-accent) 38%, var(--pp-border));
}
.pm-eyebrow { color: var(--pp-accent); font-size:.66rem; font-weight:800; letter-spacing:.13em; }
.pm-hero-title { color: var(--pp-text); font-size:1.55rem; font-weight:850; line-height:1.1; }
.pm-hero-sub { color: var(--pp-text-muted); font-size:.92rem; max-width:56ch; }
.pm-hero-actions { display:flex; gap:.55rem; flex-wrap:wrap; }

/* ── Stats ───────────────────────────────────────────────────────────── */
.pm-stats { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:.7rem; }
.pm-stat {
    display:flex; flex-direction:column; gap:.15rem; padding:.75rem .9rem; border-radius:13px;
    border:1px solid var(--pp-border); background:var(--pp-surface); box-shadow:0 4px 12px var(--pp-shadow-color);
    position:relative; overflow:hidden;
}
.pm-stat::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background: var(--pp-text-muted); opacity:.5; }
.pm-stat.is-ok::before     { background:#22c55e; opacity:1; }
.pm-stat.is-off::before    { background:#f59e0b; opacity:1; }
.pm-stat.is-core::before   { background: var(--pp-accent); opacity:1; }
.pm-stat.is-custom::before { background:#8b5cf6; opacity:1; }
.pm-stat-num { font-size:1.5rem; font-weight:820; color:var(--pp-text); line-height:1; }
.pm-stat-lbl { display:flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:650; color:var(--pp-text-muted); text-transform:uppercase; letter-spacing:.03em; }
.pm-stat-lbl i { font-size:.8rem; }

/* ── Install panel ───────────────────────────────────────────────────── */
.pm-install {
    padding:1.15rem 1.25rem; border:1px dashed var(--pp-border-strong); border-radius:16px;
    background:var(--pp-surface); box-shadow:0 10px 26px var(--pp-shadow-color);
}
.pm-install-head { display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem; }
.pm-install-head > span {
    display:grid; place-items:center; flex:0 0 auto; width:40px; height:40px; border-radius:12px;
    background:var(--pp-accent-soft); color:var(--pp-accent); font-size:1.15rem;
    border:1px solid color-mix(in srgb, var(--pp-accent) 38%, var(--pp-border));
}
.pm-install-head h2 { color:var(--pp-text); font-weight:750; }
.pm-install-head p { color:var(--pp-text-muted); font-size:.84rem; }
.pm-install-head code { background:var(--pp-surface-muted); color:var(--pp-accent); padding:.05em .35em; border-radius:4px; font-size:.85em; }
.pm-install-form { display:grid; grid-template-columns: 180px 1fr auto; gap:.6rem; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.pm-toolbar {
    display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
    padding:.7rem .8rem; border:1px solid var(--pp-border); border-radius:14px; background:var(--pp-surface);
    box-shadow:0 4px 14px var(--pp-shadow-color); position:sticky; top:66px; z-index:20;
}
.pm-search { position:relative; flex:1 1 240px; min-width:200px; }
.pm-search > i { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--pp-text-muted); font-size:.9rem; pointer-events:none; }
.pm-search input {
    width:100%; height:38px; padding:0 2.1rem; border-radius:10px; border:1px solid var(--pp-border-strong);
    background:var(--pp-input-bg); color:var(--pp-text); font-size:.88rem;
}
.pm-search input:focus { outline:none; border-color:var(--pp-accent); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--pp-accent) 20%, transparent); }
.pm-search-clear { position:absolute; right:.4rem; top:50%; transform:translateY(-50%); width:26px; height:26px; border:0; border-radius:7px;
    background:transparent; color:var(--pp-text-muted); display:grid; place-items:center; cursor:pointer; }
.pm-search-clear:hover { background:var(--pp-surface-muted); color:var(--pp-text); }
.pm-filters { display:flex; gap:.35rem; flex-wrap:wrap; }
.pm-pill {
    display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .7rem; border-radius:9px; cursor:pointer;
    border:1px solid var(--pp-border-strong); background:var(--pp-surface); color:var(--pp-text);
    font-size:.82rem; font-weight:650; transition:all .14s ease;
}
.pm-pill.sm { padding:.34rem .6rem; font-size:.78rem; }
.pm-pill i { color:var(--pp-accent); font-size:.85rem; }
.pm-pill:hover { border-color:var(--pp-accent); }
.pm-pill.active { background:var(--pp-accent); border-color:var(--pp-accent); color:#fff; box-shadow:0 3px 10px color-mix(in srgb, var(--pp-accent) 30%, transparent); }
.pm-pill.active i { color:#fff; }
.pm-pill-n { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 .3rem; border-radius:9px;
    background:var(--pp-surface-muted); color:var(--pp-text-muted); font-size:.68rem; font-weight:750; }
.pm-pill.active .pm-pill-n { background:rgba(255,255,255,.25); color:#fff; }

/* ── Plugin grid & cards ─────────────────────────────────────────────── */
.pm-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap:.9rem; }
.pm-card {
    display:flex; flex-direction:column; border:1px solid var(--pp-border); border-radius:15px;
    background:var(--pp-surface); box-shadow:0 5px 16px var(--pp-shadow-color); overflow:hidden;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.pm-card:hover { transform:translateY(-3px); border-color: color-mix(in srgb, var(--pp-accent) 50%, var(--pp-border)); box-shadow:0 14px 30px var(--pp-shadow-color); }
.pm-card.is-disabled { opacity:.62; filter:saturate(.72); }
.pm-card-top { display:flex; align-items:center; justify-content:space-between; padding:.85rem .9rem .3rem; }
.pm-card-ic {
    display:grid; place-items:center; width:44px; height:44px; border-radius:12px; flex:0 0 auto;
    background:var(--pp-accent-soft); color:var(--pp-accent); font-size:1.25rem;
    border:1px solid color-mix(in srgb, var(--pp-accent) 30%, var(--pp-border));
}
.pm-card-id { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.pm-card-cat { display:inline-flex; align-items:center; gap:.28rem; font-size:.68rem; font-weight:700; color:var(--pp-text-muted); text-transform:uppercase; letter-spacing:.04em; }
.pm-card-cat i { color:var(--pp-accent); font-size:.75rem; }
.pm-card-ver { font-size:.66rem; font-weight:750; color:var(--pp-accent); background:var(--pp-accent-soft); padding:.05rem .4rem; border-radius:6px; }
.pm-card-body { padding:.35rem .9rem .6rem; flex:1 1 auto; }
.pm-card-name { font-size:.98rem; font-weight:780; color:var(--pp-text); margin:0 0 .15rem; line-height:1.2; }
.pm-card-code { font-size:.72rem; color:var(--pp-text-muted); background:transparent; padding:0; }
.pm-card-desc { font-size:.79rem; color:var(--pp-text-muted); line-height:1.45; margin:.5rem 0 0; }
.pm-card-foot { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.6rem .9rem; border-top:1px solid var(--pp-border); background:var(--pp-surface-soft); }
.pm-card-badges { display:flex; gap:.3rem; flex-wrap:wrap; min-width:0; }
.pm-card-actions { display:flex; gap:.3rem; flex:0 0 auto; }
.pm-act {
    width:32px; height:32px; border-radius:9px; border:1px solid var(--pp-border-strong); background:var(--pp-surface);
    color:var(--pp-text); display:grid; place-items:center; cursor:pointer; font-size:.9rem; transition:all .14s ease;
}
.pm-act:hover:not(:disabled) { border-color:var(--pp-accent); color:var(--pp-accent); }
.pm-act.is-on:hover:not(:disabled) { border-color:#22c55e; color:#22c55e; }
.pm-act.danger:hover:not(:disabled) { border-color:#ef4444; color:#ef4444; }
.pm-act:disabled { opacity:.5; cursor:not-allowed; }

/* ── Badges (cards + modal) ──────────────────────────────────────────── */
.pm-badge { display:inline-flex; align-items:center; gap:.28rem; font-size:.68rem; font-weight:700; padding:.16rem .45rem; border-radius:7px; line-height:1.2; white-space:nowrap; }
.pm-badge i { font-size:.72rem; }
.pm-badge.core   { background: color-mix(in srgb, var(--pp-accent) 16%, transparent); color: var(--pp-accent); border:1px solid color-mix(in srgb, var(--pp-accent) 35%, transparent); }
.pm-badge.custom { background: color-mix(in srgb, #8b5cf6 15%, transparent); color:#8b5cf6; border:1px solid color-mix(in srgb, #8b5cf6 35%, transparent); max-width:130px; overflow:hidden; text-overflow:ellipsis; }
.pm-badge.on     { background: color-mix(in srgb, #22c55e 15%, transparent); color:#16a34a; border:1px solid color-mix(in srgb, #22c55e 35%, transparent); }
.pm-badge.off    { background: color-mix(in srgb, #f59e0b 16%, transparent); color:#d97706; border:1px solid color-mix(in srgb, #f59e0b 38%, transparent); }
.pm-badge.cat    { background: var(--pp-surface-muted); color:var(--pp-text); border:1px solid var(--pp-border); }
.pm-badge.ver    { background: var(--pp-accent-soft); color:var(--pp-accent); border:1px solid color-mix(in srgb, var(--pp-accent) 30%, transparent); }
.pm-badge.owner  { background: var(--pp-surface-muted); color:var(--pp-text-muted); border:1px solid var(--pp-border); }

/* ── Empty state ─────────────────────────────────────────────────────── */
.pm-empty { text-align:center; padding:3rem 1rem; color:var(--pp-text-muted); }
.pm-empty i { font-size:2.4rem; opacity:.5; display:block; margin-bottom:.6rem; }

/* ── Forms (shared) ──────────────────────────────────────────────────── */
.plugin-manager-page :where(.form-select, .form-control) {
    min-height: 38px; border-color: var(--pp-border-strong); background-color: var(--pp-input-bg); color: var(--pp-text);
}
.plugin-manager-page .form-control::file-selector-button {
    height:36px; border:0; border-inline-end:1px solid var(--pp-border); background:var(--pp-surface-muted); color:var(--pp-text);
}
.plugin-manager-page :where(.form-select, .form-control):focus {
    border-color:var(--pp-accent); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--pp-accent) 20%, transparent);
}
.plugin-manager-page .text-muted { color: var(--pp-text-muted) !important; }
.plugin-manager-page .alert { border-color: var(--pp-border); box-shadow:0 8px 22px var(--pp-shadow-color); }
.plugin-manager-page .swal2-popup { background: var(--pp-surface-raised); color:var(--pp-text); }
.plugin-manager-page :where(.swal2-title, .swal2-html-container) { color:var(--pp-text); }

/* ── Details modal ───────────────────────────────────────────────────── */
#pluginDetailsModal .modal-content { background: var(--pp-surface-raised); color:var(--pp-text); border:1px solid var(--pp-border); border-radius:16px; }
#pluginDetailsModal .modal-header { border-bottom:1px solid var(--pp-border); }
#pluginDetailsModal .modal-title { display:flex; align-items:center; gap:.6rem; font-weight:750; font-size:1.02rem; }
#pluginDetailsModal .pd-ic { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:var(--pp-accent-soft); color:var(--pp-accent); font-size:.95rem; }
#pluginDetailsModal .pd-meta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
#pluginDetailsModal .pd-desc { color:var(--pp-text-muted); line-height:1.55; }
#pluginDetailsModal .pd-h { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--pp-text-muted); margin:0 0 .5rem; font-weight:800; }
#pluginDetailsModal .pd-table { color:var(--pp-text); }
#pluginDetailsModal .pd-table code { font-size:.82em; background:var(--pp-surface-muted); color:var(--pp-accent); padding:.05em .35em; border-radius:4px; }
#pluginDetailsModal .pd-table td, #pluginDetailsModal .pd-table th { vertical-align:middle; border-color:var(--pp-border); color:var(--pp-text); }
#pluginDetailsModal .pd-vendor { border:1px solid var(--pp-border); border-radius:10px; padding:8px 10px; margin-bottom:8px; }
#pluginDetailsModal .pd-assets { display:flex; flex-direction:column; gap:.25rem; }
#pluginDetailsModal .pd-asset { font-family:ui-monospace,monospace; font-size:.78rem; color:var(--pp-text-muted); background:var(--pp-surface-muted); border:1px solid var(--pp-border); border-radius:7px; padding:.3rem .5rem; }
.plugin-details-btn { margin-right:0; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .pm-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767.98px) {
    .plugin-manager-page .navbar-manager { grid-template-columns: 1fr auto; gap:.5rem; }
    .plugin-manager-page .plugin-manager-navbar-title { display:none; }
    .pm-hero { padding:1.15rem; }
    .pm-hero-actions { width:100%; }
    .pm-hero-actions .btn { flex:1 1 auto; }
    .pm-install-form { grid-template-columns: 1fr; }
    .pm-toolbar { position:static; }
}
@media (max-width: 575.98px) {
    .pm-stats { grid-template-columns: repeat(2, 1fr); }
    .pm-guide-link span { display:none; }
}
@media (max-width: 480px) {
    .plugin-manager-page .plugin-manager-back { font-size:0; }
    .plugin-manager-page .plugin-manager-back i { font-size:1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
    .pm-card, .pm-pill, .pm-act { transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Polish pass (2026-08-22) — animated aurora hero + elevated stats/cards.
   Token-based (light/dark safe); animation gated behind no-preference.
   ═══════════════════════════════════════════════════════════════════════ */

/* Animated aurora hero */
.plugin-manager-page .pm-hero { position: relative; overflow: hidden; }
.plugin-manager-page .pm-hero-main,
.plugin-manager-page .pm-hero-actions { position: relative; z-index: 1; }
.pm-hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.pm-hero-aurora span { position: absolute; border-radius: 50%; filter: blur(42px); opacity: .5; will-change: transform; }
.pm-hero-aurora span:nth-child(1) { width: 300px; height: 300px; top: -140px; right: 6%;
    background: radial-gradient(circle, color-mix(in srgb, var(--pp-accent) 55%, transparent), transparent 70%); }
.pm-hero-aurora span:nth-child(2) { width: 230px; height: 230px; bottom: -150px; left: 22%;
    background: radial-gradient(circle, color-mix(in srgb, #8b5cf6 46%, transparent), transparent 70%); }
.pm-hero-aurora span:nth-child(3) { width: 210px; height: 210px; top: 20%; left: -90px;
    background: radial-gradient(circle, color-mix(in srgb, #38bdf8 40%, transparent), transparent 70%); }
.pm-hero-aurora::after { content: ""; position: absolute; top: 0; left: -45%; width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, color-mix(in srgb, #ffffff 20%, transparent), transparent);
    transform: skewX(-18deg); opacity: 0; }
.plugin-manager-page .pm-hero-icon { box-shadow: 0 8px 20px color-mix(in srgb, var(--pp-accent) 26%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }

/* Elevated stat tiles */
.plugin-manager-page .pm-stat { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.plugin-manager-page .pm-stat::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background: radial-gradient(130% 150% at 100% 0, var(--pm-hue, transparent), transparent 58%); }
.plugin-manager-page .pm-stat.is-ok     { --pm-solid: #22c55e; }
.plugin-manager-page .pm-stat.is-off    { --pm-solid: #f59e0b; }
.plugin-manager-page .pm-stat.is-core   { --pm-solid: var(--pp-accent); }
.plugin-manager-page .pm-stat.is-custom { --pm-solid: #8b5cf6; }
.plugin-manager-page .pm-stat { --pm-hue: color-mix(in srgb, var(--pm-solid, var(--pp-accent)) 12%, transparent); }
.plugin-manager-page .pm-stat:hover { transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--pm-solid, var(--pp-accent)) 42%, var(--pp-border));
    box-shadow: 0 12px 26px var(--pp-shadow-color); }
.plugin-manager-page .pm-stat-num { position: relative; z-index: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.plugin-manager-page .pm-stat-lbl { position: relative; z-index: 1; }

/* Glossier card icon */
.plugin-manager-page .pm-card-ic { box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }

/* Gentle staggered entrance */
@media (prefers-reduced-motion: no-preference) {
    .pm-hero-aurora span:nth-child(1) { animation: pmDrift1 19s ease-in-out infinite; }
    .pm-hero-aurora span:nth-child(2) { animation: pmDrift2 23s ease-in-out infinite; }
    .pm-hero-aurora span:nth-child(3) { animation: pmDrift3 27s ease-in-out infinite; }
    .pm-hero-aurora::after { animation: pmSheen 8s ease-in-out 1.2s infinite; }
    .plugin-manager-page .pm-stat { animation: pmIn .42s cubic-bezier(.4,0,.2,1) both; }
    .plugin-manager-page .pm-stat:nth-child(1){animation-delay:.03s}
    .plugin-manager-page .pm-stat:nth-child(2){animation-delay:.07s}
    .plugin-manager-page .pm-stat:nth-child(3){animation-delay:.11s}
    .plugin-manager-page .pm-stat:nth-child(4){animation-delay:.15s}
    .plugin-manager-page .pm-stat:nth-child(5){animation-delay:.19s}
    .plugin-manager-page .pm-grid > .pm-card { animation: pmIn .42s cubic-bezier(.4,0,.2,1) both; }
    .plugin-manager-page .pm-grid > .pm-card:nth-child(1){animation-delay:.04s}
    .plugin-manager-page .pm-grid > .pm-card:nth-child(2){animation-delay:.08s}
    .plugin-manager-page .pm-grid > .pm-card:nth-child(3){animation-delay:.12s}
    .plugin-manager-page .pm-grid > .pm-card:nth-child(4){animation-delay:.16s}
    .plugin-manager-page .pm-grid > .pm-card:nth-child(5){animation-delay:.20s}
    .plugin-manager-page .pm-grid > .pm-card:nth-child(6){animation-delay:.24s}
    .plugin-manager-page .pm-grid > .pm-card:nth-child(n+7){animation-delay:.28s}
}
@keyframes pmDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-30px,24px) scale(1.12)} }
@keyframes pmDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(32px,-20px) scale(1.08)} }
@keyframes pmDrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(38px,16px) scale(1.14)} }
@keyframes pmSheen  { 0%{left:-45%;opacity:0} 12%{opacity:.5} 55%,100%{left:130%;opacity:0} }
@keyframes pmIn     { from{opacity:0;transform:translateY(9px)} to{opacity:1;transform:none} }
