:root { --ink:#171716; --muted:#77716a; --line:#e8e3dc; --paper:#fbf9f6; --coral:#ff4a35; --sidebar:188px; }
* { box-sizing:border-box; }
html { background:var(--paper); }
body { color:var(--ink); font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif; }
button { font:inherit; }

.release-shell { position:fixed; inset:var(--topbar-h) 0 0 var(--sidebar-w); z-index:35; overflow:auto; background:var(--paper); }
body[data-workspace-mode="changelog"] .topbar { left:var(--sidebar-w); }
body[data-workspace-mode="changelog"] .template-dock { display:none; }

.release-sidebar { position:fixed; inset:0 auto 0 0; z-index:10; width:var(--sidebar); display:flex; flex-direction:column; padding:30px 18px 20px; background:#fff; border-right:1px solid var(--line); }
.release-brand { display:block; width:118px; margin:0 10px 43px; }
.release-brand img { display:block; width:100%; height:auto; }
.release-sidebar nav { display:grid; gap:8px; }
.release-sidebar nav a { min-height:48px; display:flex; align-items:center; gap:13px; padding:0 13px; color:#595550; border-radius:11px; text-decoration:none; font-size:13px; font-weight:500; transition:background .18s,color .18s,transform .18s; }
.release-sidebar nav a:hover { color:var(--ink); background:#f8f5f1; transform:translateX(2px); }
.release-sidebar nav a.active { color:#e13f2d; background:#fff0ec; font-weight:700; }
.nav-glyph { position:relative; width:19px; height:19px; flex:0 0 19px; color:currentColor; }
.nav-card-icon { border:1.7px solid currentColor; border-radius:3px; }
.nav-card-icon::after { content:""; position:absolute; left:3px; right:3px; bottom:4px; height:1.5px; background:currentColor; }
.people-glyph::before,.people-glyph::after { content:""; position:absolute; border:1.6px solid currentColor; }
.people-glyph::before { width:6px; height:6px; left:6px; top:1px; border-radius:50%; }
.people-glyph::after { width:15px; height:8px; left:2px; bottom:1px; border-radius:9px 9px 2px 2px; border-bottom:0; }
.tool-glyph { border:1.6px solid currentColor; border-radius:4px; transform:rotate(-7deg); }
.tool-glyph::after { content:""; position:absolute; left:3px; right:3px; top:7px; height:1.5px; background:currentColor; }
.log-glyph { border:1.6px solid currentColor; border-radius:3px; }
.log-glyph::before { content:""; position:absolute; left:4px; top:4px; width:3px; height:3px; border-radius:50%; background:currentColor; box-shadow:0 6px currentColor; }
.log-glyph::after { content:""; position:absolute; left:9px; right:3px; top:5px; height:1.5px; background:currentColor; box-shadow:0 6px currentColor; }
.sidebar-account { min-height:58px; display:grid; grid-template-columns:35px 1fr auto; align-items:center; gap:9px; margin-top:auto; padding:8px; color:var(--ink); border-radius:11px; text-decoration:none; }
.sidebar-account:hover { background:#f7f4f0; }
.sidebar-account img { width:35px; height:35px; object-fit:cover; border-radius:50%; }
.sidebar-account span { min-width:0; display:grid; gap:1px; }
.sidebar-account strong { font-size:11px; }
.sidebar-account small { color:#918b84; font-size:9px; }
.sidebar-account b { color:#aaa39b; font-size:14px; }

.release-main { width:min(1120px,calc(100vw - var(--sidebar-w) - 64px)); margin:0; padding:54px 54px 110px; }
.release-hero { max-width:760px; }
.release-kicker { margin:0 0 12px; color:#a49d95!important; font-size:10px!important; font-weight:700; letter-spacing:.19em; }
.release-hero h1 { margin:0; font-size:48px; font-weight:700; line-height:1.12; letter-spacing:-.055em; }
.release-hero h1 span { color:var(--coral); }
.release-hero>p:last-child { margin:14px 0 0; color:var(--muted); font-size:15px; }
.release-filters { display:flex; gap:8px; margin:34px 0 42px; }
.release-filters button { height:34px; padding:0 16px; color:#77716b; background:transparent; border:1px solid #e6e0d9; border-radius:999px; cursor:pointer; font-size:11px; font-weight:500; transition:all .18s; }
.release-filters button:hover { color:var(--ink); border-color:#cfc7bf; }
.release-filters button.active { color:#e54230; background:#fff0ec; border-color:#ffd8cf; font-weight:700; }
.release-list { display:grid; }
.release-entry { position:relative; display:grid; grid-template-columns:122px minmax(0,1fr); opacity:0; animation:entry-in .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay:calc(var(--entry-index) * 70ms); }
.release-entry:not(:last-child) { padding-bottom:22px; }
.release-rail { position:relative; padding:17px 24px 0 25px; border-right:1px solid #ff9c8f; }
.release-marker { position:absolute; top:18px; right:-6px; width:11px; height:11px; background:var(--paper); border:2px solid var(--coral); border-radius:50%; box-shadow:0 0 0 4px var(--paper); }
.release-date { display:block; color:#625d57; font-size:12px; font-weight:700; letter-spacing:.01em; white-space:nowrap; }
.release-card { min-height:220px; display:grid; grid-template-columns:minmax(270px,.88fr) minmax(300px,1.12fr); gap:32px; margin-left:28px; padding:28px; background:#fff; border:1px solid #e8e3dd; border-radius:16px; box-shadow:0 10px 28px rgba(61,49,37,.045),0 1px 2px rgba(61,49,37,.03); }
.release-entry.text-only .release-card { grid-template-columns:minmax(0,680px); min-height:0; }
.release-meta { display:flex; align-items:center; gap:9px; margin-bottom:16px; }
.release-meta span { display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:7px; font-size:10px; font-weight:700; }
.version-chip { color:var(--coral); background:#fff; border:1px solid #ffc4ba; }
.category-chip.feature { color:#e44331; background:#fff0ed; }
.category-chip.improvement { color:#a36c20; background:#fff7e8; }
.category-chip.fix { color:#62605d; background:#f1efec; }
.release-copy h2 { margin:0; font-size:23px; line-height:1.25; letter-spacing:-.035em; }
.release-summary { margin:11px 0 0; color:#6f6962; font-size:12px; line-height:1.8; }
.release-changes { display:grid; gap:8px; margin:20px 0 0; padding:0; color:#494540; list-style:none; font-size:11px; line-height:1.6; }
.release-changes li { position:relative; padding-left:15px; }
.release-changes li::before { content:""; position:absolute; left:0; top:.7em; width:4px; height:4px; background:var(--coral); border-radius:50%; }
.release-visual { min-width:0; min-height:205px; overflow:hidden; display:flex; align-items:center; margin:0; padding:8px; background:#faf7f2; border:1px solid #eee8e1; border-radius:12px; }
.release-visual img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; object-position:center; border-radius:7px; }
.release-loading,.release-empty { min-height:220px; display:grid; place-content:center; justify-items:center; gap:10px; color:#89827b; border:1px dashed #ded7cf; border-radius:16px; text-align:center; }
.release-loading i { width:22px; height:22px; border:2px solid #eee6df; border-top-color:var(--coral); border-radius:50%; animation:spin .8s linear infinite; }
.release-loading span,.release-empty p { margin:0; font-size:11px; }
.release-empty strong { color:#49443f; font-size:14px; }
.release-empty.error { border-color:#f0c9c2; }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes entry-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@media (max-width:1080px) { .release-card { grid-template-columns:1fr; } .release-visual { min-height:180px; } }

@media (max-width:760px) {
  body[data-workspace-mode="changelog"] .topbar { left:0; }
  .release-shell { inset:var(--topbar-h) 0 0; overflow-x:hidden; }
  .release-main { width:100%; margin:0; padding:28px 16px calc(64px + env(safe-area-inset-bottom)); }
  .release-hero { max-width:none; }
  .release-kicker { margin-bottom:9px; font-size:9px!important; }
  .release-hero h1 { font-size:34px; line-height:1.16; }
  .release-hero>p:last-child { margin-top:9px; font-size:13px; }
  .release-filters { gap:8px; margin:25px -16px 28px; padding:0 16px 4px; overflow-x:auto; scrollbar-width:none; }
  .release-filters::-webkit-scrollbar { display:none; }
  .release-filters button { min-width:max-content; height:40px; padding-inline:16px; flex:0 0 auto; }
  .release-list { gap:18px; }
  .release-entry { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; opacity:1; }
  .release-entry:not(:last-child) { padding-bottom:0; }
  .release-rail { min-width:0; padding:0 2px; border-right:0; }
  .release-marker { display:none; }
  .release-date { color:#8a837c; font-size:11px; letter-spacing:.04em; }
  .release-card,
  .release-entry.text-only .release-card { min-width:0; min-height:0; grid-template-columns:minmax(0,1fr); gap:20px; margin-left:0; padding:20px; border-radius:14px; }
  .release-meta { flex-wrap:wrap; margin-bottom:13px; }
  .release-copy h2 { overflow-wrap:anywhere; font-size:22px; }
  .release-summary { font-size:12px; line-height:1.75; }
  .release-changes { margin-top:17px; font-size:12px; line-height:1.65; }
  .release-visual { width:100%; min-height:0; padding:9px; }
  .release-visual img { width:100%; aspect-ratio:16/9; object-fit:contain; }
}