.his-shell,
.his-personal {
  --his-accent: #2ee6d6;
  color: #e9ffff;
  background:
    radial-gradient(circle at 12% 0%, rgba(46, 230, 214, .12), transparent 34rem),
    linear-gradient(145deg, #07161b, #061014 70%);
  border: 1px solid rgba(104, 230, 222, .18);
  border-radius: 24px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42), inset 0 1px rgba(255, 255, 255, .04);
  padding: clamp(18px, 2.5vw, 32px);
}

.his-heading,
.his-actions,
.his-history-row,
.his-checkpoint-create {
  display: flex;
  align-items: center;
  gap: 12px;
}

.his-heading { justify-content: space-between; }
.his-heading h2,
.his-side h3,
.his-history h3 { margin: 0; }
.his-eyebrow { margin: 0 0 5px; color: #74ded8; font-size: .72rem; letter-spacing: .19em; font-weight: 800; }
.his-icon-button { width: 42px; height: 42px; padding: 0; border-radius: 50%; font-size: 1.55rem; }
.his-feedback { min-height: 30px; margin: 10px 0; }
.his-feedback p { margin: 2px 0; color: #86c9c6; }
.his-feedback [role="alert"] { color: #ff9f9f; }
.his-save-state { display: inline-flex; margin: 0 0 16px; padding: 7px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; }
.his-save-state.is-saved { color: #8af0c5; background: rgba(41, 190, 128, .12); border: 1px solid rgba(91, 230, 168, .25); }
.his-save-state.is-draft { color: #ffd58c; background: rgba(247, 173, 54, .11); border: 1px solid rgba(247, 173, 54, .24); }
.his-workspace { display: grid; grid-template-columns: minmax(430px, 1.65fr) minmax(280px, .75fr); gap: 18px; }

.his-board {
  position: relative;
  min-height: 510px;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(104, 230, 222, .19);
  background-color: #061318;
  background-image: radial-gradient(circle, rgba(87, 216, 207, .16) 1px, transparent 1.2px);
  background-size: 24px 24px;
  touch-action: none;
}
.his-board[data-accent="blue"] { --his-accent: #55a8ff; }
.his-board[data-accent="violet"] { --his-accent: #aa86ff; }
.his-board[data-accent="green"] { --his-accent: #6fe39c; }
.his-board::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--his-accent) 12%, transparent), transparent 64%); pointer-events: none; }
.his-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.his-wires line { stroke: var(--his-accent); stroke-width: .34; stroke-dasharray: 1.5 1.1; opacity: .52; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px var(--his-accent)); }
.his-core { position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 48% 52% 55% 45%; border: 1px solid color-mix(in srgb, var(--his-accent) 72%, white); background: radial-gradient(circle at 37% 30%, #173b42, #071b21 62%, #061014); box-shadow: 0 0 0 12px rgba(55, 224, 212, .035), 0 0 60px color-mix(in srgb, var(--his-accent) 28%, transparent); text-align: center; }
.his-core::before { content: ""; position: absolute; inset: 18%; border: 1px dashed var(--his-accent); border-radius: 43% 57%; animation: his-orbit 18s linear infinite; opacity: .65; }
.his-core strong { color: #efffff; letter-spacing: .18em; font-size: 1.05rem; }
.his-core span { max-width: 95px; color: #76b8b6; font-size: .69rem; }
.his-core.is-compact { width: 112px; }
.his-core.is-balanced { width: 136px; }
.his-core.is-large { width: 164px; }
@keyframes his-orbit { to { rotate: 360deg; } }

.his-node { position: absolute; z-index: 3; translate: -50% -50%; display: grid; gap: 5px; width: min(152px, 24%); min-height: 72px; padding: 12px; text-align: left; color: #e9ffff; background: rgba(9, 31, 37, .93); border: 1px solid rgba(106, 220, 214, .3); border-radius: 15px; box-shadow: 0 12px 35px rgba(0, 0, 0, .35); cursor: grab; user-select: none; }
.his-node:hover,
.his-node:focus-visible,
.his-node.is-selected { border-color: var(--his-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--his-accent) 20%, transparent), 0 14px 40px rgba(0, 0, 0, .4); outline: none; }
.his-node:active { cursor: grabbing; }
.his-status { font-size: .68rem; color: #a9c6c5; }
.his-status.is-available { color: #77e6b2; }
.his-status.is-adapter_required { color: #e8bc72; }

.his-side { display: flex; flex-direction: column; gap: 17px; padding: 19px; border-radius: 20px; border: 1px solid rgba(105, 215, 208, .15); background: rgba(8, 25, 30, .7); }
.his-layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.his-field { display: grid; gap: 6px; color: #9fc0be; font-size: .76rem; }
.his-field select,
.his-checkpoint-create input { width: 100%; min-height: 40px; color: #eaffff; background: #0b2329; border: 1px solid rgba(120, 217, 211, .23); border-radius: 10px; padding: 8px 10px; }
.his-field input[type="checkbox"] { width: 21px; height: 21px; accent-color: #26d6c8; }
.his-selected { padding: 15px; border-radius: 15px; background: rgba(38, 170, 161, .07); border: 1px solid rgba(88, 220, 211, .14); }
.his-selected p { color: #9ab8b7; line-height: 1.5; }
.his-adapter-note { padding-left: 11px; border-left: 2px solid #d9a349; color: #d9b979 !important; }
button.his-primary,
button.his-secondary,
button.his-quiet,
button.his-danger,
.his-icon-button { min-height: 40px; padding: 9px 13px; color: #eaffff; border-radius: 11px; border: 1px solid rgba(93, 224, 215, .25); background: #0b2930; font: inherit; cursor: pointer; }
button.his-primary { color: #031416; background: linear-gradient(135deg, #59f0e3, #27bdb4); border-color: transparent; font-weight: 850; }
button.his-quiet { background: transparent; }
button.his-danger { color: #ffd8d8; border-color: rgba(255, 111, 111, .42); background: rgba(175, 54, 54, .19); }
button:disabled { opacity: .43; cursor: default; }
.his-actions { flex-wrap: wrap; }
.his-history { margin-top: 18px; padding: 18px; border: 1px solid rgba(105, 215, 208, .14); border-radius: 18px; background: rgba(6, 22, 27, .55); }
.his-history-row { justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(107, 205, 199, .1); }
.his-history-row > div { display: grid; gap: 3px; }
.his-history-row small,
.his-readonly { color: #86aaa8; }
.his-checkpoint-create { margin: 13px 0; }
.his-checkpoint-create input { max-width: 420px; }
.his-restore-review { margin-top: 16px; padding: 16px; border: 1px solid rgba(255, 139, 139, .32); border-radius: 14px; background: rgba(122, 39, 43, .12); }
.his-restore-review p { color: #d4bbbb; line-height: 1.5; }
.his-personal { max-width: 760px; }
.his-personal .his-layout-grid { margin: 8px 0 22px; }

@media (max-width: 900px) {
  .his-workspace { grid-template-columns: 1fr; }
  .his-board { min-height: 430px; }
}
@media (max-width: 560px) {
  .his-shell, .his-personal { padding: 15px; border-radius: 17px; }
  .his-board { min-height: 390px; }
  .his-node { width: 31%; padding: 9px; font-size: .78rem; }
  .his-layout-grid { grid-template-columns: 1fr; }
  .his-checkpoint-create { align-items: stretch; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .his-core::before { animation: none; } }

.his-catalog-toggle{margin:8px 0 16px}
.his-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px;padding:16px;border:1px solid rgba(89,180,226,.26);border-radius:14px;background:rgba(6,22,36,.75)}
.his-catalog-note{grid-column:1/-1;margin:0;color:#a7c5d6;font-size:13px;line-height:1.5}
.his-catalog-item{min-width:0;display:flex;flex-wrap:wrap;gap:8px;align-content:start;border:1px solid rgba(89,180,226,.15);border-radius:10px;padding:12px}
.his-catalog-item h3,.his-catalog-item p{width:100%;margin:0;overflow-wrap:anywhere}.his-catalog-item h3{font-size:15px}.his-catalog-item p{color:#adc3d2;font-size:12px;line-height:1.4}
.his-catalog-item button{white-space:normal;font-size:12px;padding:8px 10px}
@media(max-width:800px){.his-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.his-catalog{grid-template-columns:minmax(0,1fr)}}

.his-shell>.his-heading{position:sticky;top:0;z-index:8;background:#0a1c2d;padding:12px 0;align-items:center;gap:12px;flex-wrap:wrap}
.his-shell>.his-heading>.his-catalog-toggle{margin:0;flex:0 0 auto;white-space:nowrap}
.his-shell>.his-heading>div{flex:1 1 240px}
.his-catalog>.his-quiet{justify-self:start;grid-column:1/-1}