.version-history { --vh-bg:#f0f4f9; --vh-card:#fff; --vh-text:#0f172a; --vh-muted:#64748b; --vh-line:#d8e2ef; color:var(--vh-text); }
.theme-dark .version-history { --vh-bg:#0b1220; --vh-card:#131e30; --vh-text:#e2e8f0; --vh-muted:#9aacc4; --vh-line:#304158; }
.vh-dialog { margin:auto; padding:0; width:min(1100px,calc(100vw - 24px)); max-width:none; max-height:min(92dvh,1000px); border:1px solid var(--vh-line); border-radius:24px; background:var(--vh-bg); color:var(--vh-text); box-shadow:0 24px 70px #02061750; }
.vh-dialog::backdrop { background:#020617a6; }
.vh-shell { display:flex; flex-direction:column; max-height:min(92dvh,1000px); }
.vh-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:24px; background:#0f172a; color:#fff; }
.vh-eyebrow { color:#7dd3fc; text-transform:uppercase; font-size:11px; letter-spacing:.15em; font-weight:700; }
.vh-header h2 { margin:6px 0; font-size:21px; font-weight:800; line-height:1.3; }
.vh-header p:last-child { color:#cbd5e1; font-size:13px; }
.vh-button { border:1px solid var(--vh-line); background:var(--vh-card); color:var(--vh-text); padding:9px 13px; border-radius:10px; font-size:13px; font-weight:600; cursor:pointer; min-height:40px; }
.vh-button:hover { border-color:#0284c7; }
.vh-button:focus-visible, .vh-entry>summary:focus-visible { outline:3px solid #38bdf8; outline-offset:2px; }
.vh-header .vh-button { border-color:#475569; background:#1e293b; color:white; }
.vh-scroll { overflow:auto; min-height:0; overscroll-behavior:contain; padding:20px 24px 24px; }
.vh-filters { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:12px; padding:18px; border:1px solid var(--vh-line); border-radius:16px; background:var(--vh-card); }
.vh-filters label { display:flex; flex-direction:column; gap:7px; font-size:12px; font-weight:600; color:var(--vh-muted); min-width:0; }
.vh-filters input,.vh-filters select { width:100%; min-width:0; border:1px solid var(--vh-line); background:var(--vh-bg); color:var(--vh-text); border-radius:9px; padding:10px; font-size:13px; min-height:42px; }
.vh-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:16px 0; font-size:12px; color:var(--vh-muted); }
.vh-toolbar-actions { display:flex; flex-wrap:wrap; gap:8px; }
.vh-entry { background:var(--vh-card); border:1px solid var(--vh-line); border-left:3px solid #38bdf8; border-radius:14px; margin-top:14px; overflow:hidden; }
.vh-entry[hidden] { display:none; }
.vh-entry[data-event="destroy"] { border-left-color:#fb7185; }
.vh-entry[data-event="create"] { border-left-color:#34d399; }
.vh-entry>summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:16px; }
.vh-entry>summary::-webkit-details-marker { display:none; }
.vh-entry>summary::before { content:'›'; font-size:24px; color:var(--vh-muted); transition:transform 120ms ease; }
.vh-entry[open]>summary::before { transform:rotate(90deg); }
.vh-entry-heading { flex:1; min-width:0; }
.vh-entry-heading strong { font-size:14px; }
.vh-meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--vh-muted); font-size:12px; margin-top:7px; }
.vh-badge { display:inline-block; padding:4px 9px; margin-right:8px; border-radius:7px; color:#0369a1; background:#e0f2fe; font-size:11px; font-weight:700; }
.vh-entry[data-event="create"] .vh-badge { color:#065f46; background:#d1fae5; }
.vh-entry[data-event="destroy"] .vh-badge { color:#9f1239; background:#ffe4e6; }
.vh-changes { border-top:1px solid var(--vh-line); padding:0 16px; }
.vh-change { display:grid; grid-template-columns:minmax(120px, .8fr) minmax(0,1fr) minmax(0,1fr); gap:12px; padding:13px 0; border-bottom:1px solid var(--vh-line); align-items:start; font-size:13px; }
.vh-change:last-child { border-bottom:0; }
.vh-field { font-weight:600; padding-top:8px; overflow-wrap:anywhere; }
.vh-value { min-width:0; padding:9px 12px; background:var(--vh-bg); border-radius:9px; overflow-wrap:anywhere; white-space:pre-wrap; font-variant-numeric:tabular-nums; }
.vh-value-label { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--vh-muted); margin-bottom:5px; }
.vh-after { border-left:2px solid #0284c7; font-weight:600; }
.vh-exact { margin-top:6px; font-size:11px; color:var(--vh-muted); }
.vh-exact summary { cursor:pointer; }
.vh-empty { padding:32px 16px; text-align:center; color:var(--vh-muted); }
.vh-footer { border-top:1px solid var(--vh-line); background:var(--vh-card); padding:13px 24px; color:var(--vh-muted); font-size:12px; }
@media(max-width:800px) { .vh-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .vh-filters label:first-child { grid-column:1/-1; } }
@media(max-width:520px) { .vh-header { padding:18px; } .vh-header h2 { font-size:18px; } .vh-scroll { padding:12px; } .vh-change { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; } .vh-field { grid-column:1/-1; padding:0; } .vh-entry>summary { padding:12px; gap:8px; } .vh-footer { padding:12px; } }
@media(prefers-reduced-motion:reduce) { .vh-entry>summary::before { transition:none; } }
