/* =========================================================
   HIDDEN PATTERN — Constelações vivas
   ========================================================= */
.hpc {
  position: fixed; inset: 0; z-index: 11000;
  display: grid; grid-template-rows: auto auto 1fr;
  background:
    radial-gradient(1200px 700px at 70% -10%, rgba(124, 92, 255, .14), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(77, 156, 255, .1), transparent 60%),
    #050812;
  color: var(--sb-text); font-family: var(--sb-font-family);
}
.hpc.hidden { display: none; }
body.hpc-active .app { visibility: hidden; }
.hpc-top { display: grid; grid-template-columns: 1fr minmax(240px, 440px) auto; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--sb-border); }
.hpc-crumbs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.hpc-crumbs button { border: 0; padding: 7px 11px; border-radius: 9px; background: rgba(255, 255, 255, .05); color: var(--sb-text-secondary); font: 600 13.5px var(--sb-font-family); cursor: pointer; }
.hpc-crumbs button[aria-current] { background: rgba(124, 92, 255, .22); color: #fff; box-shadow: inset 0 0 0 1px rgba(143, 114, 255, .45); }
.hpc-crumbs span { color: var(--sb-text-disabled); }
.hpc-search input { width: 100%; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, .2); background: rgba(8, 12, 26, .7); color: var(--sb-text); font: 13.5px var(--sb-font-family); outline: none; }
.hpc-search input:focus { border-color: var(--sb-primary); box-shadow: 0 0 0 3px rgba(124, 92, 255, .2); }
.hpc-actions { display: flex; gap: 8px; }
.hpc-actions button { height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid rgba(148, 163, 184, .2); background: rgba(8, 12, 26, .6); color: var(--sb-text); font: 600 13px var(--sb-font-family); cursor: pointer; }
.hpc-actions button:hover { border-color: rgba(143, 114, 255, .6); background: rgba(124, 92, 255, .18); }
.hpc-primary { background: linear-gradient(135deg, #7c5cff, #5b6cff) !important; border-color: transparent !important; color: #fff !important; }
.hpc-close:hover { background: rgba(251, 113, 133, .2) !important; }
.hpc-hint { padding: 6px 18px; font-size: 12px; color: var(--sb-text-muted); min-height: 26px; }
.hpc-stage { position: relative; overflow: hidden; outline: none; }
.hpc-grid[hidden], .hpc-board[hidden] { display: none !important; }

/* ---------- Grelha de constelações ---------- */
.hpc-grid { position: absolute; inset: 0; overflow: auto; padding: 10px 18px 40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; align-content: start; }
.hpc-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, #0b1220), #070b16);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35); cursor: pointer; outline: none;
  transition: transform .18s, box-shadow .18s;
}
.hpc-card:hover, .hpc-card:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 2px var(--c), 0 20px 50px rgba(0, 0, 0, .45); }
.hpc-card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.hpc-card strong { font-size: 18px; }
.hpc-card small { color: var(--sb-text-muted); font-size: 12px; }
.hpc-card p { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 5px; }
.hpc-card p span { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; background: rgba(255, 255, 255, .06); color: var(--sb-text-secondary); }
.hpc-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 40%, transparent); font-size: 17px; }
.hpc-empty { grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: var(--sb-text-muted); }
.hpc-empty > div { font-size: 42px; color: var(--sb-primary); }
.hpc-empty h3 { color: var(--sb-text); }

/* ---------- Quadro ---------- */
.hpc-board { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-image: radial-gradient(rgba(148, 163, 184, .13) 1px, transparent 1px); background-size: 26px 26px; }
.hpc-board:active { cursor: grabbing; }
.hpc-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hpc-links { position: absolute; left: -5000px; top: -5000px; width: 10000px; height: 10000px; overflow: visible; pointer-events: none; }
.hpc-links > * { transform: translate(5000px, 5000px); }
.hpc-tree-link { fill: none; stroke: rgba(143, 114, 255, .5); stroke-width: 2; }
.hpc-rel { pointer-events: auto; cursor: pointer; }
.hpc-rel-hit { fill: none; stroke: transparent; stroke-width: 16; }
.hpc-rel-line { fill: none; stroke: #34d9c4; stroke-width: 2; stroke-dasharray: 7 6; }
.hpc-rel.is-selected .hpc-rel-line { stroke: #fff; stroke-width: 3; }
.hpc-rel text { fill: #a7f3e8; font: 600 12px var(--sb-font-family); text-anchor: middle; paint-order: stroke; stroke: #050812; stroke-width: 4px; pointer-events: auto; }
.hpc-rel-draft { stroke: #fff; stroke-dasharray: 4 4; }
.hpc-nodes { position: absolute; left: 0; top: 0; }
.hpc-node {
  position: absolute; width: 210px; transform: translate(-50%, -50%);
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid color-mix(in srgb, var(--c) 65%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 16%, #0b1220), #080c18);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4), 0 0 24px color-mix(in srgb, var(--c) 18%, transparent);
  cursor: grab; outline: none; user-select: none;
}
.hpc-node.hpc-root { width: 250px; border-width: 2px; }
.hpc-node.hpc-root .hpc-text { font-size: 20px; }
.hpc-node-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.hpc-text { font-size: 15.5px; line-height: 1.3; word-break: break-word; outline: none; border-radius: 6px; }
.hpc-text[contenteditable="true"] { background: rgba(0, 0, 0, .35); box-shadow: 0 0 0 2px var(--sb-primary); padding: 2px 4px; user-select: text; cursor: text; }
.hpc-node small { color: var(--sb-text-muted); font-size: 11.5px; }
.hpc-note { align-self: flex-start; border: 0; padding: 0; background: none; color: #b9dcff; font: 13px var(--sb-font-family); cursor: pointer; text-align: left; }
.hpc-note:hover { text-decoration: underline; }
.hpc-note.is-deleted { color: #fda4af; cursor: default; text-decoration: line-through; }
.hpc-warn { font-style: normal; font-size: 11.5px; color: var(--sb-warning); }
.hpc-node.is-selected { box-shadow: 0 0 0 3px var(--sb-primary), 0 10px 30px rgba(0, 0, 0, .4); }
.hpc-node.is-match { box-shadow: 0 0 0 3px #f5b94d, 0 0 30px rgba(245, 185, 77, .5); }
.hpc-node.is-flash { animation: hpcFlash 2.2s ease-out; }
@keyframes hpcFlash { 0%, 30% { box-shadow: 0 0 0 4px #fff, 0 0 60px var(--c); } }
.hpc-port { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(52, 217, 196, .15); color: #34d9c4; font-size: 14px; cursor: crosshair; opacity: 0; transition: opacity .15s; }
.hpc-node:hover .hpc-port, .hpc-node:focus-visible .hpc-port { opacity: 1; }
.hpc.is-linking .hpc-node { cursor: crosshair; }
.hpc.is-linking .hpc-node:hover { box-shadow: 0 0 0 3px #34d9c4; }
.hpc-img { position: relative; width: 100%; background: #0b1220; }
.hpc-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.hpc-img.is-missing::after { content: "imagem indisponível"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: var(--sb-text-muted); }
.hpc-img-resize { position: absolute; left: 50%; bottom: -1px; width: 46px; height: 10px; margin-left: -23px; border-radius: 6px 6px 0 0; background: rgba(255, 255, 255, .35); cursor: ns-resize; opacity: 0; }
.hpc-node:hover .hpc-img-resize { opacity: 1; }
.hpc-card .hpc-img { height: 120px; }
.hpc-card .hpc-img-resize { display: none; }

/* ---------- Menus ---------- */
.hpc-menu { position: fixed; z-index: 12; min-width: 250px; max-width: min(420px, calc(100vw - 16px)); padding: 6px; border-radius: 13px;
  background: rgba(11, 17, 30, .98); border: 1px solid rgba(148, 163, 184, .22); box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  display: flex; flex-direction: column; gap: 1px; }
.hpc-menu header { padding: 6px 10px 8px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--sb-text-muted); }
.hpc-menu > button { text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--sb-text); font: 13.5px var(--sb-font-family); cursor: pointer; }
.hpc-menu > button small { color: var(--sb-text-muted); }
.hpc-menu > button:hover, .hpc-menu > button:focus-visible { background: rgba(124, 92, 255, .2); outline: none; }
.hpc-menu > button:disabled { opacity: .4; cursor: default; }
.hpc-menu .danger { color: #fda4af; }
.hpc-menu .danger:hover { background: rgba(251, 113, 133, .16); }
.hpc-sep { height: 1px; margin: 5px 4px; background: rgba(148, 163, 184, .14); }
.hpc-menu-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; }
.hpc-menu-row button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: var(--sw); cursor: pointer; }
.hpc-icons > div { display: grid; grid-template-columns: repeat(7, 36px); gap: 4px; padding: 4px 6px; }
.hpc-icons > div button { height: 34px; border-radius: 8px; border: 0; background: rgba(255, 255, 255, .05); font-size: 17px; cursor: pointer; }
.hpc-icons > div button:hover { background: rgba(124, 92, 255, .25); }
.hpc-icons label { padding: 8px 10px; font-size: 12.5px; color: var(--sb-text-secondary); }
.hpc-menu input { height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid rgba(148, 163, 184, .25); background: #050b14; color: var(--sb-text); font: 14px var(--sb-font-family); outline: none; }
.hpc-icons input { width: 80px; margin-left: 6px; }
.hpc-prompt, .hpc-confirm, .hpc-picker { padding: 12px; gap: 10px; width: min(400px, calc(100vw - 16px)); }
.hpc-prompt > div, .hpc-confirm > div { display: flex; justify-content: flex-end; gap: 8px; }
.hpc-prompt button, .hpc-confirm button { height: 34px; padding: 0 14px; border-radius: 9px; border: 1px solid rgba(148, 163, 184, .25); background: transparent; color: var(--sb-text); font: 600 13px var(--sb-font-family); cursor: pointer; }
.hpc-confirm p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--sb-text-secondary); }
.hpc-confirm .danger-solid { background: #e11d48; border-color: #e11d48; color: #fff; }
.hpc-picker ul { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.hpc-picker li button { width: 100%; text-align: left; display: flex; flex-direction: column; padding: 7px 10px; border-radius: 8px; border: 0; background: transparent; color: var(--sb-text); cursor: pointer; font-family: var(--sb-font-family); }
.hpc-picker li button:hover { background: rgba(124, 92, 255, .2); }
.hpc-picker li small { color: var(--sb-text-muted); }
.hpc-muted { color: var(--sb-text-muted); padding: 8px; font-size: 12.5px; }
.hpc kbd { font: 12px ui-monospace, Consolas, monospace; padding: 2px 6px; border-radius: 5px; background: rgba(148, 163, 184, .12); border: 1px solid rgba(148, 163, 184, .2); }

@media (max-width: 760px) {
  .hpc-top { grid-template-columns: 1fr auto; }
  .hpc-search { grid-column: 1 / -1; grid-row: 2; }
}