:root { color-scheme: dark; --bg:#0b1120; --panel:#111a2b; --line:#263653; --text:#eef5ff; --muted:#9cadc8; --accent:#38bdf8; --accent-strong:#0ea5e9; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 15% 0%,#172947,transparent 40%),var(--bg); color:var(--text); font:15px/1.5 system-ui,-apple-system,Segoe UI,sans-serif; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
.portfolio-header { min-height:64px; padding:10px clamp(16px,4vw,54px); display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:rgba(11,17,32,.82); backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; font-weight:800; }
.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid #47bdf3; border-radius:8px; color:#07111f; background:var(--accent); font-weight:950; }
nav { display:flex; gap:18px; color:var(--muted); font-weight:700; } nav a:hover { color:var(--text); }
.portfolio-shell { width:min(1400px,100%); margin:0 auto; padding:clamp(24px,5vw,64px) clamp(16px,4vw,54px); }
.portfolio-ad { width:100%; min-height:28px; margin:0 auto 22px; overflow:hidden; border-radius:7px; background:rgba(17,26,43,.42); }
.portfolio-ad-bottom { margin:24px auto 0; }
.intro { display:flex; justify-content:space-between; align-items:end; gap:24px; padding-bottom:28px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 5px; color:var(--accent); font-size:12px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:8px; font-size:clamp(28px,4vw,48px); line-height:1.05; } h2 { margin-bottom:0; font-size:22px; }
.intro p:not(.eyebrow) { margin-bottom:0; color:var(--muted); }
.primary,.ghost { min-height:40px; padding:9px 14px; border-radius:7px; font-weight:800; border:1px solid var(--line); }
.primary { background:var(--accent-strong); border-color:#38bdf8; color:#03111c; } .primary:hover { background:#7dd3fc; }
.ghost { background:transparent; color:var(--text); } .ghost:hover { background:#1c2b46; }
.workspace-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); gap:20px; padding-top:22px; }
.panel { min-width:0; padding:20px; border:1px solid var(--line); border-radius:10px; background:rgba(17,26,43,.82); }
.panel-heading,.library-footer { display:flex; align-items:center; justify-content:space-between; gap:12px; } .panel-heading { margin-bottom:16px; }
.events-list { display:grid; gap:10px; }
.event-card { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:8px; background:#0d1728; }
.event-card h3 { margin:0 0 4px; font-size:16px; } .event-meta,.muted { color:var(--muted); font-size:13px; }
.event-actions { display:flex; gap:7px; flex-wrap:wrap; justify-content:end; } .event-actions a,.event-actions button { min-height:34px; padding:7px 10px; border-radius:6px; border:1px solid var(--line); background:transparent; color:var(--text); font-weight:750; }
.library-tools { display:flex; gap:8px; margin-bottom:14px; } input { width:100%; min-height:40px; padding:9px 11px; border:1px solid var(--line); border-radius:7px; background:#0a1322; color:var(--text); outline:none; } input:focus { border-color:var(--accent); }
.library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; min-height:250px; } .library-tile { position:relative; aspect-ratio:1; overflow:hidden; border:2px solid transparent; border-radius:6px; background:#0a1322; cursor:pointer; } .library-tile.selected { border-color:#f59e0b; } .library-tile img { width:100%; height:100%; display:block; object-fit:cover; } .library-tile span { position:absolute; left:4px; right:4px; bottom:4px; padding:3px 4px; overflow:hidden; color:#fff; background:rgba(0,0,0,.68); font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.selection-count { color:var(--accent); font-size:12px; font-weight:800; } .library-footer { margin-top:13px; color:var(--muted); font-size:13px; } .library-footer div { display:flex; gap:6px; } .wide { width:100%; margin-top:14px; } .status { min-height:22px; margin:18px 0 0; color:var(--muted); }
@media(max-width:850px) { nav { gap:9px; font-size:13px; } .intro { align-items:start; flex-direction:column; } .workspace-grid { grid-template-columns:1fr; } .library-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:480px) { .portfolio-header { align-items:flex-start; flex-direction:column; } .library-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .event-card { grid-template-columns:1fr; } .event-actions { justify-content:start; } }