CSS
/* ─── 10 App Sidebar with Bottom-Pinned Profile — PM workspace ── */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');
.sn-pin {
--sn-pin-bg: #0c0c0f;
--sn-pin-rail: #131318;
--sn-pin-rail-2: #1c1c24;
--sn-pin-line: #26262f;
--sn-pin-txt: #ededf2;
--sn-pin-muted: #85858f;
--sn-pin-accent: #f5d90a;
--sn-pin-accent-2: #a78bfa;
--sn-pin-green: #4ade80;
position: relative;
width: 100%;
height: 600px;
font-family: 'Geist', 'Inter', sans-serif;
background: var(--sn-pin-bg);
color: var(--sn-pin-txt);
display: flex;
overflow: hidden;
box-sizing: border-box;
}
.sn-pin *, .sn-pin *::before, .sn-pin *::after { box-sizing: border-box; margin: 0; padding: 0; }
.sn-pin .sidebar {
width: 256px; background: var(--sn-pin-rail); border-right: 1px solid var(--sn-pin-line);
height: 100%; display: flex; flex-direction: column; flex-shrink: 0;
}
.sn-pin .ws { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; margin: .6rem;
border-radius: 12px; background: var(--sn-pin-rail-2); cursor: pointer; transition: .18s; }
.sn-pin .ws:hover { background: #23232c; }
.sn-pin .ws .ic { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
background: linear-gradient(135deg, var(--sn-pin-accent), var(--sn-pin-accent-2));
display: grid; place-items: center; color: #0c0c0f; font-weight: 700; }
.sn-pin .ws b { font-size: .92rem; font-weight: 600; }
.sn-pin .ws small { display: block; color: var(--sn-pin-muted); font-size: .72rem; }
.sn-pin .ws .ch { margin-left: auto; color: var(--sn-pin-muted); }
.sn-pin .ws .ch svg { width: 16px; height: 16px; }
.sn-pin .nav { flex: 1; overflow-y: auto; padding: .5rem .7rem; }
.sn-pin .cap { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--sn-pin-muted);
font-weight: 600; padding: .9rem .8rem .35rem; font-family: 'Geist Mono', monospace; }
.sn-pin .item { display: flex; align-items: center; gap: .8rem; padding: .6rem .8rem; border-radius: 10px;
color: var(--sn-pin-txt); text-decoration: none; font-size: .9rem; font-weight: 500; transition: .16s; }
.sn-pin .item svg { width: 19px; height: 19px; stroke-width: 1.8; color: var(--sn-pin-muted); flex-shrink: 0; }
.sn-pin .item:hover { background: var(--sn-pin-rail-2); }
.sn-pin .item:hover svg { color: var(--sn-pin-txt); }
.sn-pin .item.active { background: var(--sn-pin-rail-2); color: #fff; }
.sn-pin .item.active svg { color: var(--sn-pin-accent); }
.sn-pin .item .count { margin-left: auto; font-size: .72rem; color: var(--sn-pin-muted); font-family: 'Geist Mono', monospace; }
.sn-pin .item .dot { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--sn-pin-green); }
.sn-pin .profile-wrap { margin-top: auto; border-top: 1px solid var(--sn-pin-line); padding: .7rem; }
.sn-pin .quick { display: flex; gap: .4rem; margin-bottom: .5rem; }
.sn-pin .quick a { flex: 1; display: grid; place-items: center; padding: .55rem; border-radius: 9px;
color: var(--sn-pin-muted); transition: .16s; }
.sn-pin .quick a:hover { background: var(--sn-pin-rail-2); color: var(--sn-pin-txt); }
.sn-pin .quick svg { width: 18px; height: 18px; stroke-width: 1.8; }
.sn-pin .profile { display: flex; align-items: center; gap: .7rem; padding: .6rem; border-radius: 12px;
cursor: pointer; transition: .18s; }
.sn-pin .profile:hover { background: var(--sn-pin-rail-2); }
.sn-pin .avatar { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
background: linear-gradient(135deg, #4ade80, #a78bfa); position: relative; }
.sn-pin .avatar::after { content: ""; position: absolute; bottom: -2px; right: -2px; width: 11px; height: 11px;
border-radius: 50%; background: var(--sn-pin-green); border: 2.5px solid var(--sn-pin-rail); }
.sn-pin .profile b { font-size: .88rem; font-weight: 600; }
.sn-pin .profile small { display: block; color: var(--sn-pin-muted); font-size: .72rem; }
.sn-pin .profile .more { margin-left: auto; color: var(--sn-pin-muted); }
.sn-pin .profile .more svg { width: 16px; height: 16px; }
.sn-pin .mainpane { flex: 1; padding: 2.5rem 3rem; min-width: 0; overflow-y: auto; }
.sn-pin .head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.8rem; }
.sn-pin .head h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -.03em; }
.sn-pin .head .new { background: var(--sn-pin-accent); color: #0c0c0f; border: none; border-radius: 10px;
padding: .6rem 1.1rem; font-weight: 600; font-size: .85rem; cursor: pointer; font-family: inherit; }
.sn-pin .board { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.sn-pin .col { background: var(--sn-pin-rail); border: 1px solid var(--sn-pin-line); border-radius: 16px; padding: 1rem; }
.sn-pin .col .ct { font-size: .8rem; color: var(--sn-pin-muted); font-weight: 600; margin-bottom: .8rem;
display: flex; align-items: center; gap: .5rem; font-family: 'Geist Mono', monospace; }
.sn-pin .col .ct i { width: 8px; height: 8px; border-radius: 50%; }
.sn-pin .col .ct i.grey { background: #85858f; }
.sn-pin .col .ct i.yellow { background: #f5d90a; }
.sn-pin .col .ct i.green { background: #4ade80; }
.sn-pin .task { background: var(--sn-pin-rail-2); border-radius: 11px; padding: .85rem; margin-bottom: .6rem; font-size: .85rem; }
.sn-pin .task small { display: block; color: var(--sn-pin-muted); font-size: .74rem; margin-top: .4rem; }
@media (max-width: 780px) {
.sn-pin .sidebar { width: 74px; }
.sn-pin .ws b, .sn-pin .ws small, .sn-pin .ws .ch, .sn-pin .cap,
.sn-pin .item span, .sn-pin .item .count, .sn-pin .item .dot,
.sn-pin .profile b, .sn-pin .profile small, .sn-pin .profile .more { display: none; }
.sn-pin .ws { justify-content: center; padding: .7rem; }
.sn-pin .item { justify-content: center; padding: .65rem; }
.sn-pin .profile { justify-content: center; }
.sn-pin .quick { flex-direction: column; }
.sn-pin .mainpane { padding: 1.5rem; }
}