/* Vivi plugin marketplace (plugins.viviplayer.app): same dark theme as viviplayer.app, no web fonts. */
:root { --bg:#0e0e0e; --bg2:#161616; --card:#1b1b1b; --line:#2a2a2a; --fg:#ececec; --fg2:#a8a8a8; --fg3:#6f6f6f;
  --accent:#D37918; --accent-bg:rgba(211,121,24,.14); --r:10px; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
code { font-family:ui-monospace, monospace; font-size:.85em; background:var(--card); padding:.1em .35em; border-radius:4px; }
svg.lucide { width:18px; height:18px; flex:none; }
header.nav { position:sticky; top:0; z-index:10; background:rgba(14,14,14,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.nav .in { max-width:1180px; margin:0 auto; padding:12px 24px; display:flex; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--fg); font-weight:700; font-size:18px; }
header nav { display:flex; gap:20px; margin-left:auto; }
header nav a { color:var(--fg2); font-size:14px; font-weight:500; display:flex; align-items:center; gap:6px; }
header nav a:hover { color:var(--fg); text-decoration:none; }
main { max-width:1180px; margin:0 auto; padding:0 24px 64px; }
.hero { padding:56px 0 24px; } .hero h1 { font-size:44px; line-height:1.1; margin:0 0 12px; } .hero h1 span, h1 span { color:var(--accent); }
.hero p { color:var(--fg2); max-width:720px; margin:0; }
.toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:16px 0 24px; position:sticky; top:55px; z-index:5; background:var(--bg); padding:10px 0; }
.search { display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:0 12px; flex:1 1 240px; color:var(--fg3); }
.search input { background:none; border:0; color:var(--fg); font:inherit; padding:10px 0; width:100%; outline:none; }
.cats { display:flex; flex-wrap:wrap; gap:6px; }
.cats button, select { background:var(--card); color:var(--fg2); border:1px solid var(--line); border-radius:999px; padding:6px 12px; font:inherit; font-size:14px; cursor:pointer; display:flex; align-items:center; gap:6px; }
.cats button svg { width:15px; height:15px; }
.cats button.on, .cats button:hover { color:var(--fg); border-color:var(--accent); background:var(--accent-bg); }
.sort { color:var(--fg3); font-size:14px; display:flex; gap:8px; align-items:center; } select { border-radius:8px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; color:var(--fg); display:flex; flex-direction:column; transition:border-color .15s, transform .15s; }
.card:hover { border-color:var(--accent); text-decoration:none; transform:translateY(-2px); }
.thumb { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:var(--bg2); }
.thumb.ph { display:flex; align-items:center; justify-content:center; color:var(--accent); background:radial-gradient(circle at 30% 20%, rgba(211,121,24,.25), var(--bg2) 70%); }
.thumb.ph svg { width:56px; height:56px; }
.card .body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.title { display:flex; align-items:center; gap:10px; } .title h2 { font-size:17px; margin:0; }
.ic { color:var(--accent); display:flex; }
.card p { color:var(--fg2); font-size:14px; margin:0; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.meta { display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--fg3); font-size:13px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; }
.chip { font-size:12px; padding:2px 9px; border-radius:999px; background:var(--bg2); border:1px solid var(--line); color:var(--fg2); }
.chip.k { color:var(--accent); border-color:rgba(211,121,24,.4); } .chip.t { color:var(--fg3); }
.crumbs { padding:24px 0 0; font-size:14px; color:var(--fg3); }
.phead { display:flex; gap:24px; padding:20px 0 8px; align-items:flex-start; }
.bigic { width:84px; height:84px; border-radius:20px; background:var(--accent-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; }
.bigic svg { width:42px; height:42px; }
.phead h1 { margin:0 0 6px; font-size:34px; line-height:1.15; } .lead { color:var(--fg2); margin:0 0 12px; max-width:760px; }
.phead .chips, .phead .meta { margin-bottom:10px; }
.actions { margin-top:16px; }
.btn { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r); font-weight:600; font-size:15px; margin:0 8px 8px 0; }
.btn.primary { background:var(--accent); color:#111; } .btn.ghost { border:1px solid var(--line); color:var(--fg); }
.btn:hover { text-decoration:none; filter:brightness(1.1); }
.muted { color:var(--fg3); } .small { font-size:13px; }
h2 { font-size:22px; margin:36px 0 14px; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); gap:14px; }
.gallery figure { margin:0; } .gallery img { width:100%; height:auto; border-radius:var(--r); border:1px solid var(--line); display:block; }
.cols { display:grid; grid-template-columns:3fr 2fr; gap:36px; }
.changelog, .perms, .settings { list-style:none; padding:0; margin:0; }
.changelog li { border-left:2px solid var(--line); padding:0 0 18px 16px; position:relative; }
.changelog li::before { content:""; position:absolute; left:-6px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.changelog .v { font-size:14px; color:var(--fg3); } .changelog .v b { color:var(--fg); font-size:16px; } .changelog p { margin:4px 0 0; color:var(--fg2); }
.perms li { display:flex; gap:10px; align-items:center; padding:10px 12px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px; color:var(--fg2); }
.perms svg { color:var(--accent); }
.settings li { padding:6px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--fg2); } .settings b { color:var(--fg); font-weight:500; }
footer { border-top:1px solid var(--line); color:var(--fg3); font-size:13px; text-align:center; padding:28px 24px; }
@media (max-width:760px) { .cols { grid-template-columns:1fr; } .phead { flex-direction:column; } .hero h1 { font-size:34px; } .wide { display:none; } .toolbar { position:static; } }
.card[hidden], [hidden] { display:none !important; }