:root { color-scheme: dark; --bg:#111418; --panel:#1a1f26; --line:#2c3540; --text:#edf2f7; --muted:#93a0ad; --accent:#8fe3c0; --accent-dark:#18382f; }
* { box-sizing:border-box; } body { margin:0; background:radial-gradient(circle at 80% -10%,#263a42 0,#111418 42%); color:var(--text); font:15px/1.5 Inter,ui-sans-serif,system-ui,sans-serif; }
.topbar { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; padding:22px max(24px,calc((100vw - 1180px)/2)); } .topbar nav { display:flex; gap:18px; align-items:center; } .topbar nav a { color:var(--muted); font-size:13px; } .topbar nav a.active { color:var(--accent); } h1,h2,h3,p { margin:0; } h1 { font-size:21px; } h2 { font-size:clamp(30px,5vw,56px); line-height:1.03; max-width:650px; } h3 { font-size:22px; } a { color:var(--accent); text-decoration:none; }
.eyebrow { color:var(--accent); font-size:11px; font-weight:750; letter-spacing:.14em; margin-bottom:8px; } .shell { margin:auto; max-width:1180px; padding:56px 24px 80px; } .hero { align-items:end; display:grid; gap:32px; grid-template-columns:1.4fr .8fr; } .hero > div > p:last-child { color:var(--muted); margin-top:18px; max-width:600px; }
.upload-card,.panel,.stats { background:rgba(26,31,38,.86); border:1px solid var(--line); border-radius:18px; } .upload-card { display:grid; gap:14px; padding:22px; } label { color:var(--muted); display:grid; font-size:13px; gap:7px; } input { background:#101419; border:1px solid var(--line); border-radius:9px; color:var(--text); padding:11px; width:100%; } button { background:var(--accent); border:0; border-radius:9px; color:#10201b; cursor:pointer; font-weight:750; padding:11px 15px; } button:hover { filter:brightness(1.08); } .ghost { background:transparent; border:1px solid var(--line); color:var(--text); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); margin:42px 0 22px; overflow:hidden; } .stats div { border-right:1px solid var(--line); padding:18px 22px; } .stats div:last-child { border:0; } .stats span { color:var(--muted); display:block; font-size:12px; } .stats strong { display:block; font-size:24px; margin-top:4px; }
.content-grid { display:grid; gap:22px; grid-template-columns:1.1fr .9fr; } .panel { min-height:320px; padding:22px; } .panel-head { align-items:start; display:flex; justify-content:space-between; margin-bottom:14px; } .list { border-top:1px solid var(--line); } .list-row { align-items:center; background:transparent; border-bottom:1px solid var(--line); border-radius:0; color:var(--text); display:flex; justify-content:space-between; padding:16px 3px; text-align:left; width:100%; } .list-row strong,.list-row small { display:block; } .list-row small { color:var(--muted); font-size:12px; margin-top:3px; } .arrow { color:var(--accent); font-size:20px; } .muted { color:var(--muted); } .error { color:#ff9c9c; } .status { color:var(--accent); font-size:12px; min-height:18px; } .facts { display:grid; gap:12px; grid-template-columns:100px 1fr; margin-top:24px; } .facts dt { color:var(--muted); } .facts dd { margin:0; overflow-wrap:anywhere; } .mono { font-family:ui-monospace,SFMono-Regular,monospace; font-size:12px; }
@media (max-width:760px) { .hero,.content-grid { grid-template-columns:1fr; } .shell { padding-top:36px; } }
.jobs-head { border-top:1px solid var(--line); margin-top:24px; padding-top:20px; }
.jobs-head h3 { font-size:16px; }
.job { align-items:center; border-bottom:1px solid var(--line); display:flex; gap:14px; justify-content:space-between; padding:12px 3px; }
.job span { color:var(--muted); font-size:12px; }
.job span { display:block; margin-top:3px; }
.job-actions { display:flex; flex-wrap:wrap; gap:7px; justify-content:flex-end; }
.job-actions button { font-size:12px; padding:7px 9px; }
.danger { color:#ffb0b0; border-color:#6a3c42; }
.queue-help { font-size:12px; margin:-4px 0 12px; }
.review-form h4 { margin:8px 0 0; }
.correction-asset { border:1px solid var(--line); border-radius:10px; display:grid; gap:10px; margin:0; padding:12px; }
.correction-asset legend { color:var(--accent); font-size:13px; padding:0 5px; }
.review-form { display:grid; gap:14px; margin-top:20px; }
.asset-list { padding-left:20px; } .asset-list li { border-bottom:1px solid var(--line); padding:10px 0; } .asset-list small { color:var(--muted); display:block; margin-top:3px; }
.workspaces-panel { margin-top:24px; } .workspace-form { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; } .workspace-form input { flex:1; min-width:180px; } .inline-check { display:flex; align-items:center; gap:6px; } .inline-check input { width:auto; } .workspace-row { align-items:center; border-top:1px solid var(--line); display:flex; gap:16px; justify-content:space-between; padding:14px 0; } .workspace-row small { color:var(--muted); display:block; margin-top:4px; overflow-wrap:anywhere; } .workspace-actions { display:flex; gap:8px; flex-wrap:wrap; }
.search-row { display:flex; gap:10px; margin-bottom:12px; } select { background:#101419; border:1px solid var(--line); border-radius:9px; color:var(--text); padding:11px; min-width:170px; } .search-row select { min-width:170px; }
.type-chips { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; } .type-chip { background:var(--accent-dark); color:var(--accent); font-size:12px; padding:7px 10px; } .projects-panel { margin-top:24px; } .project-row { border-top:1px solid var(--line); padding:14px 0; } .project-row small { color:var(--muted); display:block; margin:3px 0 8px; } .pin { background:var(--accent-dark); border-radius:5px; color:var(--accent); font-family:ui-monospace,SFMono-Regular,monospace; font-size:12px; padding:4px 7px; }
.catalog-shell { padding-top:70px; } .catalog-hero { align-items:end; display:flex; gap:30px; justify-content:space-between; } .catalog-hero p:last-child { color:var(--muted); margin-top:18px; max-width:620px; } .button { background:var(--accent); border-radius:9px; color:#10201b; display:inline-flex; font-weight:750; gap:18px; padding:12px 16px; white-space:nowrap; } .catalog-toolbar { display:flex; gap:10px; margin-top:52px; } .search-large { align-items:center; background:rgba(26,31,38,.86); border:1px solid var(--line); border-radius:12px; display:flex; flex:1; gap:10px; padding:0 14px; } .search-large span { color:var(--accent); font-size:24px; } .search-large input { background:transparent; border:0; padding:14px 0; } .catalog-summary { align-items:center; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; margin:18px 0 22px; padding-bottom:14px; } .catalog-summary .type-chips { margin:0; } .catalog-grid { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); } .asset-card { background:rgba(26,31,38,.86); border:1px solid var(--line); border-radius:15px; min-width:0; padding:18px; } .asset-card-top,.asset-meta,.asset-actions { align-items:center; display:flex; gap:8px; justify-content:space-between; } .asset-type { color:var(--accent); font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; } .asset-pack,.asset-meta,.asset-origin { color:var(--muted); font-size:12px; } .asset-card h3 { font-size:20px; margin:22px 0 8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .asset-origin { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .asset-meta { border-bottom:1px solid var(--line); margin:18px 0 12px; padding-bottom:12px; } .asset-actions { align-items:flex-start; flex-wrap:wrap; } .asset-actions .ghost,.download-link { font-size:12px; padding:7px 9px; } .download-link { background:var(--accent-dark); border-radius:7px; color:var(--accent); } .empty-state { padding:80px 20px; text-align:center; } .empty-icon { color:var(--accent); font-size:42px; } .empty-state p { color:var(--muted); margin:8px 0 20px; }
@media (max-width:900px) { .catalog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .hero,.content-grid { grid-template-columns:1fr; } .catalog-hero,.catalog-toolbar,.catalog-summary { align-items:stretch; flex-direction:column; } .catalog-grid { grid-template-columns:1fr; } .topbar { align-items:flex-start; gap:14px; flex-direction:column; } .topbar nav { flex-wrap:wrap; } .shell { padding-top:36px; } }
.settings-shell { padding-top:60px; } .settings-layout { display:grid; gap:22px; grid-template-columns:1.25fr .75fr; margin-top:40px; } .settings-form { display:grid; gap:15px; margin-top:22px; } .role-field { border-bottom:1px solid var(--line); display:grid; gap:10px; grid-template-columns:1fr 220px; padding:15px 0; } .role-field span { display:grid; gap:3px; } .role-field small,.recommendation small { color:var(--muted); display:block; font-size:12px; } .recommendations { display:grid; gap:12px; margin:18px 0 30px; } .recommendation { border-top:1px solid var(--line); display:grid; gap:3px; padding-top:10px; } .recommendation strong { font-size:13px; } .panel h4 { border-top:1px solid var(--line); padding-top:18px; }
.asset-audio { display:block; max-width:100%; margin:8px 0; }
.catalog-audio { flex:1 1 100%; min-width:220px; }
.asset-preview { background:#0c1116; border-radius:10px; display:block; height:190px; margin-bottom:14px; object-fit:contain; width:100%; }
.preview-placeholder { align-items:center; background:#0c1116; border-radius:10px; color:var(--muted); display:flex; height:190px; justify-content:center; margin-bottom:14px; }
.catalog-audio .muted { display:block; font-size:11px; margin-bottom:3px; }
.package-shell { padding-top:42px; }
.back-link { color:var(--muted); display:inline-block; margin-bottom:28px; }
.package-hero { align-items:end; display:flex; gap:30px; justify-content:space-between; }
.package-hero p:last-child { color:var(--muted); margin-top:16px; max-width:720px; }
.package-facts { margin:30px 0 38px; }
.section-title { border-top:1px solid var(--line); margin:30px 0 18px; padding-top:24px; }
.package-assets { display:grid; gap:16px; grid-template-columns:repeat(3,1fr); }
.package-links { margin:24px 0; padding:18px; }
.provenance { border:1px solid var(--line); border-radius:4px; color:var(--muted); font-size:10px; padding:2px 4px; text-transform:uppercase; }
.provenance.ai { color:#f4c97b; }
.provenance.user { color:var(--accent); }
.inline-form { display:flex; gap:8px; margin:14px 0; }
.inline-form input { flex:1; }
.package-asset { background:rgba(26,31,38,.86); border:1px solid var(--line); border-radius:15px; padding:18px; }
.package-asset h3 { margin:18px 0 6px; overflow-wrap:anywhere; }
.package-asset p { margin:8px 0; overflow-wrap:anywhere; }
.asset-files { list-style:none; margin:16px 0 0; padding:0; }
.asset-files li { border-top:1px solid var(--line); padding:10px 0; overflow-wrap:anywhere; }
.asset-files a { display:block; }
.asset-files small { color:var(--muted); display:block; }
@media (max-width:900px) { .package-assets { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) { .package-hero { align-items:stretch; flex-direction:column; } .package-assets { grid-template-columns:1fr; } .inline-form { flex-direction:column; } }
@media (max-width:760px) { .settings-layout { grid-template-columns:1fr; } .role-field { grid-template-columns:1fr; } }