/* HISE Forge · capa de cuentas. Usa los mismos tokens que la app (--accent, --line, --glass…). */

/* barra superior */
.hf-bar{display:flex;align-items:center;gap:8px;margin-left:auto}
.hf-btn{height:34px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass-hi);color:var(--fg);font:700 12.5px var(--body);cursor:pointer;white-space:nowrap;transition:border-color .15s,filter .15s}
.hf-btn:hover{border-color:var(--accent)}
.hf-btn.hf-pro{border:0;color:var(--on-accent);background:linear-gradient(120deg,var(--accent),var(--accent-2));box-shadow:0 6px 20px -8px var(--accent),inset 0 1px 0 rgba(255,255,255,.3)}
.hf-btn.hf-pro:hover{filter:brightness(1.1)}
.hf-av{display:flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 3px;border-radius:999px;border:1px solid var(--line-2);background:var(--glass-hi);color:var(--fg);cursor:pointer}
.hf-av:hover{border-color:var(--accent)}
.hf-av i,.hf-who i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:600 13px var(--display);font-style:normal;color:var(--on-accent);background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.hf-av b{font:800 10px var(--mono);letter-spacing:.12em;color:var(--accent)}

.hf-btn.hf-adm[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.hf-beta{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:6px;font:800 9px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;color:var(--on-accent);background:linear-gradient(120deg,var(--accent),var(--accent-2))}

/* candado en los botones de copiar: todo mientras carga (hf-locked) y luego solo lo que tu plan no incluye (hf-lk) */
:root{--hf-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E")}
.hf-locked .cp svg,.hf-lk .cp svg,#dCopy.hf-lk svg,#dCopyM.hf-lk svg{display:none}
.hf-locked .cp::before,.hf-lk .cp::before,#dCopy.hf-lk::before,#dCopyM.hf-lk::before,.sc-item.hf-lk [data-sc="copy"]::before{content:"";width:14px;height:14px;flex:none;background:currentColor;-webkit-mask:var(--hf-lock) center/contain no-repeat;mask:var(--hf-lock) center/contain no-repeat}
.sc-item.hf-lk [data-sc="copy"]{display:inline-flex;align-items:center;gap:6px}
.hf-locked .cp,.hf-lk .cp{color:var(--muted)}

/* plan de cada componente sobre la vista previa */
.hf-tier{position:absolute;left:10px;bottom:10px;z-index:1;display:flex;max-width:calc(100% - 20px)}
.hf-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;font:800 9.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);background:rgba(8,8,14,.72);box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.hf-chip.t-free{color:#7CF0A9;box-shadow:inset 0 0 0 1px rgba(124,240,169,.35)}
.hf-chip.t-basic{color:#8EC5FF;box-shadow:inset 0 0 0 1px rgba(142,197,255,.35)}
.hf-chip.t-pro{color:var(--accent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent)}

/* modo admin: selector de plan en cada tarjeta y en cada categoría */
.hf-tset,.hf-catset{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(8,8,14,.82);box-shadow:inset 0 0 0 1px var(--line-2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hf-tset button,.hf-catset button{border:0;border-radius:999px;padding:4px 9px;background:none;color:var(--muted);font:800 9.5px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap}
.hf-tset button:hover,.hf-catset button:hover{color:var(--fg);background:rgba(255,255,255,.08)}
.hf-tset [data-tier="free"][aria-pressed="true"]{color:#06140C;background:#7CF0A9}
.hf-tset [data-tier="basic"][aria-pressed="true"]{color:#06101C;background:#8EC5FF}
.hf-tset [data-tier="pro"][aria-pressed="true"]{color:var(--on-accent);background:linear-gradient(120deg,var(--accent),var(--accent-2))}
.hf-tset.auto [aria-pressed="true"]{opacity:.55}
.hf-catset{margin-left:auto;align-self:center;padding-left:10px}
.hf-catset small{font:700 10px var(--mono);letter-spacing:.06em;color:var(--dim);margin-right:4px;white-space:nowrap}
.hf-editing .card .cp{visibility:hidden}
.hf-admin body{padding-bottom:140px}

.hf-adminbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:55;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:18px;font-size:12.5px;color:var(--muted);
  background:rgba(16,15,26,.94);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px var(--line-2),0 24px 60px -20px rgba(0,0,0,.85)}
.hf-adminbar[hidden]{display:none}
.hf-ab-t{font:600 14px var(--display);color:var(--fg)}
.hf-ab-c{display:flex;gap:10px}
.hf-ab-c i{font-style:normal;font:700 11px var(--mono);letter-spacing:.04em}
.hf-ab-c i b{color:var(--fg)}
.hf-ab-c .t-free{color:#7CF0A9}.hf-ab-c .t-basic{color:#8EC5FF}.hf-ab-c .t-pro{color:var(--accent)}
.hf-adminbar label{display:flex;align-items:center;gap:6px;white-space:nowrap}
.hf-adminbar select{height:28px;padding:0 8px;border-radius:8px;border:1px solid var(--line-2);background:rgba(0,0,0,.35);color:var(--fg);font:600 12px var(--body)}
.hf-ab-s{font:700 11px var(--mono);letter-spacing:.04em}
.hf-ab-s.saved{color:#7CF0A9}.hf-ab-s.saving{color:var(--muted)}.hf-ab-s.error{color:#FFB4B4}
.hf-ab-s .hf-link{font-size:11px}
.hf-ab-w{flex-basis:100%;margin:0;padding:8px 10px;border-radius:10px;font-size:12px;color:#FFC46B;background:rgba(255,190,80,.08)}

/* código bloqueado en el panel de detalle */
.code{position:relative}
.hf-lock{display:none}
.code.locked pre{max-height:230px;overflow:hidden;-webkit-mask:linear-gradient(#000 35%,transparent 92%);mask:linear-gradient(#000 35%,transparent 92%);user-select:none}
.code.locked .hf-lock{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:6px 22px 24px;margin-top:-70px;position:relative}
.hf-lock svg{color:var(--accent);filter:drop-shadow(0 0 10px var(--accent))}
.hf-lock b{font:600 17px var(--display);letter-spacing:-.01em}
.hf-lock p{margin:0 0 6px;max-width:42ch;color:var(--muted);font-size:13.5px}

/* ventana */
.hf-scrim{position:fixed;inset:0;z-index:60;background:rgba(4,4,8,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.hf-modal{position:fixed;left:50%;top:50%;z-index:61;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:26px 24px 22px;border-radius:22px;color:var(--fg);
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02) 40%),rgba(16,15,26,.9);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 30px 80px -20px rgba(0,0,0,.8),0 0 60px -30px var(--accent);
  opacity:0;transform:translate(-50%,-48%) scale(.97);transition:opacity .2s,transform .25s cubic-bezier(.2,.8,.2,1)}
.hf-scrim.on{opacity:1}
.hf-modal.on{opacity:1;transform:translate(-50%,-50%)}
.hf-modal.wide{width:min(840px,calc(100vw - 32px))}
.hf-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.hf-x:hover{color:var(--fg);border-color:var(--accent)}
.hf-modal h2{margin:0 40px 16px 0;font:500 26px/1.1 var(--display);letter-spacing:-.025em}
.hf-sub{margin:-4px 0 14px;color:var(--muted);font-size:14px}

.hf-tabs,.hf-seg{display:flex;gap:4px;padding:4px;margin:0 40px 18px 0;border-radius:999px;background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px var(--line)}
.hf-seg{margin:0 auto 18px;width:max-content;max-width:100%}
.hf-tabs button,.hf-seg button{flex:1;border:0;border-radius:999px;padding:8px 14px;background:none;color:var(--muted);font:700 13px var(--body);cursor:pointer;white-space:nowrap}
.hf-tabs button[aria-selected="true"],.hf-seg button[aria-checked="true"]{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),color-mix(in srgb,var(--accent) 28%,#1b1a27);box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.hf-seg small{font:700 10.5px var(--mono);color:var(--accent);margin-left:4px}
.hf-seg button[aria-checked="true"] small{color:#fff}

.hf-form{display:flex;flex-direction:column;gap:14px}
.hf-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.hf-form input{height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line-2);background:rgba(0,0,0,.3);color:var(--fg);font:500 15px var(--body);outline:0}
.hf-form input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.hf-form small{font-weight:500;letter-spacing:0;color:var(--dim)}
.hf-form.busy{opacity:.7}
.hf-cta{justify-content:center;height:44px;font-size:14px}
.hf-link{align-self:center;border:0;background:none;color:var(--muted);font:600 13px var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.hf-link:hover{color:var(--fg)}
.hf-msg{margin:0;padding:10px 12px;border-radius:10px;font-size:13.5px;background:rgba(255,255,255,.05)}
.hf-msg.err{color:#FFB4B4;background:rgba(255,70,90,.1)}
.hf-msg.ok{color:#B8F5D0;background:rgba(60,220,140,.1)}
.hf-out:empty{display:none}

/* planes */
.hf-plans{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.hf-plans.n1{grid-template-columns:1fr}
.hf-plans.n3{grid-template-columns:repeat(3,1fr)}
.hf-betanote{display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.hf-betanote .hf-beta{margin:0}
.hf-plan{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:16px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px var(--line)}
.hf-plan-pro{background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%),rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 16px 40px -24px var(--accent)}
.hf-plan h3{margin:0;font:600 16px var(--display);letter-spacing:-.01em}
.hf-plan-pro h3{color:var(--accent)}
.hf-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 4px;min-height:58px}
.hf-price b{font:500 34px var(--display);letter-spacing:-.03em}
.hf-price span{color:var(--muted);font-size:13px}
.hf-price em{flex-basis:100%;font-style:normal;font-size:12px;color:var(--dim)}
.hf-plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:13.5px;color:#D6D4E2;flex:1}
.hf-plan li{position:relative;padding-left:22px}
.hf-plan li::before{content:"";position:absolute;left:2px;top:.45em;width:10px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.hf-plan:not(.hf-plan-pro) li::before{border-color:var(--dim)}
.hf-cur{margin:0;text-align:center;font:700 12px var(--mono);letter-spacing:.06em;color:var(--muted);padding:12px 0 2px}
.hf-fine{margin:-4px 0 0;text-align:center;font-size:11.5px;color:var(--dim)}
.hf-legal{margin:12px 0 0}
.hf-legal a{color:var(--muted)}
.hf-secure{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 0;font-size:12px;color:var(--dim)}
.hf-plans+.hf-out{margin-top:12px}

/* mi cuenta */
.hf-acc{display:flex;flex-direction:column;gap:16px}
.hf-who{display:flex;align-items:center;gap:12px}
.hf-who i{width:44px;height:44px;font-size:18px}
.hf-who b{display:block;font-size:15px;word-break:break-all}
.hf-plan-badge{display:inline-block;margin-top:4px;padding:2px 9px;border-radius:999px;font:700 11px var(--mono);letter-spacing:.06em;color:var(--muted);background:rgba(255,255,255,.06)}
.hf-plan-badge.pro{color:var(--on-accent);background:linear-gradient(120deg,var(--accent),var(--accent-2))}
.hf-status{margin:0;font-size:14px;color:var(--muted)}
.hf-status.warn{color:#FFC46B}
.hf-lic{padding:14px;border-radius:14px;background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px var(--line)}
.hf-lic-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hf-lic-h em{font-style:normal;letter-spacing:.04em;text-transform:none;color:var(--dim)}
.hf-lic-h em.on{color:#7CF0A9}
.hf-lic p{margin:0;font-size:13.5px;color:var(--dim)}
.hf-key{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hf-key code{flex:1;min-width:0;font:600 15px var(--mono);letter-spacing:.06em;color:#fff;user-select:all}
.hf-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.hf-actions .hf-link{margin-left:auto}

@media (max-width:760px){.hf-plans.n3{grid-template-columns:1fr}}
@media (max-width:560px){
  .hf-plans,.hf-plans.n3{grid-template-columns:1fr}
  .hf-adminbar{bottom:8px;padding:10px 12px;gap:8px 12px}
  .hf-admin body{padding-bottom:230px}
  .hf-tier{left:6px;bottom:6px;max-width:calc(100% - 12px)}
  .hf-tset{gap:0;padding:2px}
  .hf-tset button{padding:4px 5px;letter-spacing:.02em}
  .hf-catset{margin-left:0}
  .hf-modal{padding:22px 16px 18px}
  .hf-btn{padding:0 11px}
}
@media (prefers-reduced-motion:reduce){.hf-modal,.hf-scrim{transition:none}}

/* teléfono: los botones de cuenta caben en la primera fila, junto a la marca */
@media (max-width:600px){.hf-bar{gap:6px}.hf-btn{height:32px;padding:0 10px;font-size:12px}.hf-av{height:32px}.hf-av i{width:26px;height:26px}.hf-beta{margin-left:4px;padding:1px 5px;font-size:8px}}
/* teléfono y tableta: campos a 16 px para que el iPhone no haga zoom al escribir */
@media (pointer:coarse){.hf-form input,.hf-adminbar select{font-size:16px}}

/* modo dueño de la vista previa en Claude: verde cuando todo está desbloqueado */
.hf-btn.hf-own{display:inline-flex;align-items:center;gap:6px}
.hf-btn.hf-own[aria-pressed="true"]{color:#BFF5D2;border-color:rgba(124,240,169,.5)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 16px -6px rgba(124,240,169,.7)!important}
@media (max-width:600px){.hf-btn.hf-own span{display:none}.hf-btn.hf-own{padding-inline:10px}}