/* v33 - GitHub Upgrade Hub and Website Build artifacts */
.vk-gh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .75rem;
}
.vk-gh-card {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(178,220,255,.12);
  border-radius: 8px;
  padding: .85rem;
  min-height: 150px;
}
.vk-gh-card div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
}
.vk-gh-card span {
  color: #69d8ff;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vk-gh-card b {
  color: #91eed4;
  font-size: .66rem;
  font-weight: 700;
}
.vk-gh-card strong {
  display: block;
  color: #f8fbff;
  font-size: .95rem;
  margin-bottom: .4rem;
}
.vk-gh-card p,
.vk-gh-card small {
  color: #aab7ca;
  font-size: .78rem;
  line-height: 1.5;
}
.vk-gh-card small {
  display: block;
  margin-top: .55rem;
  color: #7f8ca4;
}
.vk-gh-split {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 1rem;
  align-items: start;
}
.vk-gh-json {
  max-height: 620px;
  overflow: auto;
  background: rgba(3,8,18,.62);
  border: 1px solid rgba(178,220,255,.12);
  border-radius: 8px;
  padding: .85rem;
}
.vk-gh-json pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #d8e6ff;
  font-size: .72rem;
  line-height: 1.55;
}
.vk-gh-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .6rem;
}
.vk-gh-node {
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(178,220,255,.12);
  border-radius: 8px;
  padding: .75rem;
}
.vk-gh-node span {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #69d8ff;
  color: #06111f;
  font-size: .72rem;
  font-weight: 900;
  margin-bottom: .45rem;
}
.vk-gh-node strong {
  display: block;
  color: #f8fbff;
  font-size: .85rem;
}
.vk-gh-node p {
  color: #9fb0ca;
  font-size: .74rem;
  line-height: 1.45;
  margin: .35rem 0 0;
}
.vk-gh-actions,
.da-web-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.vk-gh-editor {
  margin: 1rem 0;
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(178,220,255,.12);
  border-radius: 8px;
  overflow: hidden;
}
.vk-gh-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  border-bottom: 1px solid rgba(178,220,255,.1);
}
.vk-gh-editor-head span {
  color: #69d8ff;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vk-gh-editor-head strong {
  color: #f8fbff;
  font-size: .9rem;
}
.vk-gh-editor-grid {
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(230px, .9fr) minmax(280px, 1.2fr);
  gap: .75rem;
  padding: .85rem;
}
.vk-gh-editor-panel {
  background: rgba(3,8,18,.42);
  border: 1px solid rgba(178,220,255,.1);
  border-radius: 8px;
  padding: .8rem;
}
.vk-gh-editor-panel h3 {
  color: #f8fbff;
  font-size: .86rem;
  margin: 0 0 .7rem;
}
.vk-gh-panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-bottom: .65rem;
}
.vk-gh-panel-title h3 {
  margin: 0;
}
.vk-gh-panel-title small {
  color: #69d8ff;
  font-size: .7rem;
}
.vk-gh-panel-title div {
  display: flex;
  gap: .35rem;
}
.vk-gh-panel-title select,
.vk-gh-panel-title button,
.vk-gh-block-tools button {
  min-height: 32px;
  border: 1px solid rgba(178,220,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #f8fbff;
  font: inherit;
  font-size: .74rem;
  padding: .35rem .5rem;
}
.vk-gh-field {
  display: grid;
  gap: .32rem;
  margin-bottom: .65rem;
}
.vk-gh-field span,
.vk-gh-color-row span {
  color: #9fb0ca;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.vk-gh-field input,
.vk-gh-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(178,220,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: #f8fbff;
  font: inherit;
  font-size: .82rem;
  padding: .6rem .65rem;
  resize: vertical;
}
.vk-gh-field textarea {
  min-height: 86px;
}
.vk-gh-color-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem;
}
.vk-gh-color-row label {
  display: grid;
  gap: .32rem;
}
.vk-gh-color-row input {
  width: 100%;
  height: 38px;
  border: 1px solid rgba(178,220,255,.14);
  border-radius: 8px;
  background: transparent;
  padding: 0;
}
.vk-gh-block-list {
  display: grid;
  gap: .45rem;
  max-height: 390px;
  overflow: auto;
  padding-right: .15rem;
}
.vk-gh-block-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid rgba(178,220,255,.1);
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  color: #f8fbff;
  text-align: left;
  padding: .55rem;
}
.vk-gh-block-row.active {
  border-color: rgba(105,216,255,.5);
  background: rgba(105,216,255,.08);
}
.vk-gh-block-row > span {
  min-width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #69d8ff;
  color: #06111f;
  font-size: .72rem;
  font-weight: 900;
}
.vk-gh-block-row strong {
  display: block;
  font-size: .78rem;
}
.vk-gh-block-row small {
  display: block;
  color: #9fb0ca;
  font-size: .68rem;
  margin-top: .12rem;
}
.vk-gh-block-tools {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .75rem;
}
.vk-gh-empty {
  color: #9fb0ca;
  font-size: .82rem;
  line-height: 1.45;
}
.vk-site-preview,
.da-web-preview {
  background: var(--vk-site-bg, var(--da-web-bg, #07111f));
  color: var(--vk-site-text, var(--da-web-text, #f8fbff));
  border: 1px solid rgba(178,220,255,.13);
  border-radius: 8px;
  overflow: hidden;
}
.vk-site-preview {
  padding: 1rem;
}
.vk-site-nav {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.vk-site-nav strong {
  margin-right: auto;
}
.vk-site-nav span {
  color: var(--vk-site-muted, #9fb0ca);
  font-size: .78rem;
}
.vk-site-nav button,
.vk-site-hero button,
.vk-site-pricing button,
.da-web-hero button {
  border: 0;
  border-radius: 8px;
  padding: .55rem .75rem;
  background: var(--vk-site-accent, var(--da-web-accent, #69d8ff));
  color: #06111f;
  font-weight: 800;
}
.vk-site-hero,
.da-web-hero {
  padding: 2rem 0;
}
.vk-site-hero span,
.da-web-hero span {
  color: var(--vk-site-accent, var(--da-web-accent, #69d8ff));
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.vk-site-hero h2,
.da-web-hero h3 {
  margin: .45rem 0;
  color: var(--vk-site-text, var(--da-web-text, #f8fbff));
  font-size: clamp(2rem, 6vw, 4.8rem);
  line-height: .98;
}
.vk-site-hero p,
.da-web-hero p,
.vk-site-section p,
.vk-site-proof p,
.vk-site-pricing li,
.da-web-section p,
.da-web-block p {
  color: var(--vk-site-muted, var(--da-web-muted, #9fb0ca));
  line-height: 1.55;
}
.vk-site-hero .ghost,
.da-web-hero .ghost {
  background: transparent;
  color: var(--vk-site-text, var(--da-web-text, #f8fbff));
  border: 1px solid rgba(255,255,255,.2);
  margin-left: .4rem;
}
.vk-site-section,
.vk-site-proof,
.vk-site-pricing,
.vk-site-footer,
.da-web-section,
.da-web-block {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.35rem 0;
}
.vk-site-section h3,
.vk-site-proof h3,
.vk-site-pricing h3,
.da-web-section h4 {
  margin: 0 0 .8rem;
  color: var(--vk-site-text, var(--da-web-text, #f8fbff));
}
.vk-site-features,
.da-web-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
}
.vk-site-features article,
.da-web-features article {
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: .8rem;
}
.vk-site-features strong,
.da-web-features strong {
  color: var(--vk-site-text, var(--da-web-text, #f8fbff));
}
.vk-site-steps,
.da-web-steps {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding-left: 1.2rem;
  color: var(--vk-site-muted, var(--da-web-muted, #9fb0ca));
}
.vk-site-pricing strong {
  display: block;
  font-size: 1.9rem;
  margin-bottom: .4rem;
}
.vk-site-footer {
  color: var(--vk-site-muted, #9fb0ca);
  font-size: .8rem;
}
.da-web-build {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(178,220,255,.12);
  border-radius: 10px;
  overflow: hidden;
}
.da-web-head {
  display: flex;
  justify-content: space-between;
  gap: .85rem;
  padding: .9rem;
  border-bottom: 1px solid rgba(178,220,255,.1);
}
.da-web-head h3 {
  margin: .25rem 0;
  color: #f8fbff;
}
.da-web-head p {
  margin: 0;
  color: #9fb0ca;
  font-size: .78rem;
  line-height: 1.45;
}
.da-web-badge {
  color: var(--da-web-accent, #69d8ff);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.da-web-preview {
  padding: .9rem;
}
.da-web-block {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.da-web-block span {
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--da-web-accent, #69d8ff);
  color: #06111f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 900;
}
.da-web-block strong {
  color: var(--da-web-text, #f8fbff);
}
.da-web-block small {
  display: block;
  color: var(--da-web-accent, #69d8ff);
  font-size: .68rem;
  margin-top: .2rem;
}
.da-web-json {
  border-top: 1px solid rgba(178,220,255,.1);
  padding: .75rem .9rem;
}
.da-web-json summary {
  color: #9fb0ca;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
}
.da-web-json pre {
  white-space: pre-wrap;
  word-break: break-word;
  color: #d8e6ff;
  font-size: .72rem;
}
@media(max-width:760px) {
  .vk-gh-split,
  .vk-gh-editor-grid,
  .vk-site-features,
  .da-web-features {
    grid-template-columns: 1fr;
  }
  .vk-gh-color-row {
    grid-template-columns: 1fr;
  }
  .vk-site-nav span {
    display: none;
  }
  .da-web-head {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   HISTORY DRAWER (.vh-*) + header History button — added 2026-07-04
   Mobile-first: drawer is full-width on small screens.
═══════════════════════════════════════════════════════════════════ */
.history-button{border:1px solid rgba(0,0,0,.14);background:#fff;color:#0a0a0a;display:flex;align-items:center;gap:7px;font-size:11px;padding:8px 11px;border-radius:999px;cursor:pointer}
.history-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vh-scrim{position:fixed;inset:0;background:rgba(13,36,54,.38);backdrop-filter:blur(2px);z-index:118}
.vh-drawer{position:fixed;top:0;right:0;bottom:0;width:100%;max-width:100%;background:#fff;z-index:119;transform:translateX(103%);transition:transform .3s ease;display:flex;flex-direction:column;box-shadow:-18px 0 55px rgba(18,58,88,.2);visibility:hidden}
.vh-drawer.open{transform:translateX(0);visibility:visible}
.vh-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.15rem 1.25rem .95rem;border-bottom:1px solid rgba(60,130,175,.14)}
.vh-head span{display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#5c8098;margin-bottom:.2rem}
.vh-head h2{margin:0;font-size:1.12rem;font-weight:700;color:#10324a}
#vhClose{border:1px solid rgba(0,0,0,.12);background:#fff;color:#33607c;border-radius:10px;width:30px;height:30px;font-size:.85rem;line-height:1;cursor:pointer}
#vhClose:hover{background:#eef7fd}
.vh-tools{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.25rem;border-bottom:1px solid rgba(60,130,175,.1)}
#vhSearch{flex:1;border:1px solid rgba(54,145,194,.22);background:#f6fbff;border-radius:10px;padding:.5rem .75rem;font-size:.82rem;color:#153d57;outline:none}
#vhSearch:focus{border-color:rgba(38,159,216,.55);box-shadow:0 0 0 3px rgba(38,159,216,.1)}
#vhCount{font-size:.68rem;color:#6e91a7;white-space:nowrap}
.vh-list{flex:1;overflow:auto;padding:1rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.7rem}
.vh-empty{font-size:.83rem;color:#5f8298;line-height:1.55;padding:.5rem 0}
.vh-item{border:1px solid rgba(60,130,175,.16);border-radius:14px;background:#fff;overflow:hidden}
.vh-main{display:block;width:100%;text-align:left;border:0;background:none;padding:.85rem .95rem .7rem;cursor:pointer;font:inherit;color:inherit}
.vh-main:hover{background:#f4fafe}
.vh-type{display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1f7fb2;background:rgba(56,166,222,.1);border-radius:999px;padding:.18rem .55rem;margin-bottom:.4rem}
.vh-main strong{display:block;font-size:.88rem;font-weight:650;color:#10324a;margin-bottom:.15rem}
.vh-main small{display:block;font-size:.66rem;color:#7392a6;margin-bottom:.35rem}
.vh-main p{margin:0;font-size:.76rem;line-height:1.5;color:#4c7089}
.vh-actions{display:flex;gap:.45rem;padding:.55rem .95rem .75rem;border-top:1px dashed rgba(60,130,175,.14)}
.vh-actions button{border:1px solid rgba(54,145,194,.22);background:#fff;color:#2c6787;border-radius:9px;padding:.32rem .7rem;font-size:.68rem;font-weight:600;cursor:pointer}
.vh-actions button:hover{background:#eef7fd}
.vh-actions button.danger{color:#c2453a;border-color:rgba(194,69,58,.28)}
.vh-actions button.danger:hover{background:#fdf1f0}
.vh-detail{padding:1rem 1.25rem 1.5rem;overflow:auto}
.vh-detail-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.vh-detail-head span{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#1f7fb2;background:rgba(56,166,222,.1);border-radius:999px;padding:.2rem .6rem}
#vhCloseDetail{border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:9px;padding:.3rem .75rem;font-size:.7rem;font-weight:600;color:#33607c;cursor:pointer}
.vh-detail h3{margin:.2rem 0 .25rem;font-size:1rem;color:#10324a}
.vh-detail small{display:block;font-size:.66rem;color:#7392a6;margin-bottom:.7rem}
.vh-prompt{font-size:.78rem;color:#4c7089;background:#f4fafe;border:1px solid rgba(60,130,175,.14);border-radius:10px;padding:.6rem .75rem;margin:0 0 .8rem}
.vh-answer{font-size:.82rem;line-height:1.6;color:#28516c;margin-bottom:1rem;word-break:break-word}
.vh-primary{border:1px solid rgba(255,255,255,.85);background:linear-gradient(120deg,#e8f9ff,#9ddfff 53%,#c8c2ff);color:#113b54;border-radius:11px;padding:.55rem 1rem;font-size:.78rem;font-weight:650;cursor:pointer;box-shadow:0 8px 22px rgba(41,149,205,.16)}
@media(min-width:641px){
  .vh-drawer{width:430px}
}
@media(max-width:760px){
  .history-button span{display:none}
}

/* ═══ v35 — light teal overrides ═══ */
.vk-gh-card,.vk-gh-editor-panel,.vk-gh-block-row,.vk-gh-node,.da-web-block,.vk-gh-editor{background:#fff;border-color:#e6eaee}
.vk-gh-card span,.vk-gh-panel-title{color:#2563eb}
.vk-gh-card b{color:#1e40af}
.vk-gh-empty{color:#6b7280}
.vk-gh-json,.da-web-json{background:#f7f9fa;border-color:#e6eaee;color:#0f1724}
.history-button{border-color:#e6eaee;background:#fff;color:#3d4654}
.vh-drawer{background:#fff;border-color:#e6eaee;color:#0f1724}
.vh-item{background:#f7f9fa;border-color:#e6eaee;color:#0f1724}
.vh-item:hover{border-color:#2563eb}
.vh-primary{background:#2563eb;border-color:#2563eb;color:#fff}
.vh-type{color:#1e40af;background:rgba(37,99,235,.1)}