/*
 * Panel admin · Niveles de personajes y Stages del juego.
 */
.gt { padding-top: 34px; padding-bottom: 60px; }
.gt *, .gt *::before, .gt *::after { box-sizing: border-box; }

.gt-head {
  --a: #35c8e0;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding: 24px 26px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--a) 35%, transparent);
  background:
    radial-gradient(110% 140% at 0% 0%, color-mix(in srgb, var(--a) 18%, transparent), transparent 55%),
    linear-gradient(180deg, rgba(14, 19, 27, .9), rgba(8, 11, 16, .94));
  box-shadow: 0 24px 60px -34px var(--a);
}
.gt-head.lv { --a: #8f7bff; }
.gt-head.st { --a: #4be08c; }
.gt-eyebrow { margin: 0; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--a); }
.gt-head h2 { margin: 6px 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.gt-head p { margin: 0; color: #a7b2c0; font-size: .92rem; }
.gt-search { display: flex; gap: 8px; }
.gt-search input {
  flex: 1; min-width: 0; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14); background: #0b1016; color: #f2f5f8; font: inherit;
}
.gt-search input:focus { outline: 0; border-color: var(--a); }
.gt-stats { display: flex; gap: 10px; justify-content: flex-end; margin: 0; padding: 0; list-style: none; }
.gt-stats li { display: grid; min-width: 110px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(6, 9, 13, .55); }
.gt-stats b { font-size: 1.4rem; }
.gt-stats span { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #8995a5; }
.gt-stats .off b { color: #ff7a95; }

/* niveles */
.gt-account { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 22px 0 14px; font-size: 1.1rem; }
.gt-state { padding: 5px 12px; border-radius: 999px; font-size: .78rem; font-weight: 700; color: #4be08c; background: rgba(75, 224, 140, .12); }
.gt-state.on { color: #ff7a95; background: rgba(255, 92, 122, .12); }
.gt-chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.gt-char {
  --c: #35c8e0;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(14, 19, 27, .9), rgba(8, 11, 16, .95));
}
.gt-char.c0 { --c: #e0a043; } .gt-char.c1 { --c: #5fcf7a; } .gt-char.c2 { --c: #d0685a; }
.gt-char.c3 { --c: #8f7bff; } .gt-char.c4 { --c: #35c8e0; }
.gt-char-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.gt-char-top .class-ico { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c); }
.gt-char-top strong { display: block; font-size: 1.05rem; }
.gt-char-top em { font-style: normal; font-size: .8rem; color: var(--c); }
.gt-lv { display: grid; place-items: center; min-width: 58px; padding: 6px 10px; border-radius: 12px; font-size: 1.5rem; font-weight: 800; line-height: 1; color: #fff; background: color-mix(in srgb, var(--c) 22%, transparent); }
.gt-lv small { font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: var(--c); }
.gt-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
.gt-meta div { padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.gt-meta dt { font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: #8995a5; }
.gt-meta dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.gt-lvform label { display: block; margin-bottom: 6px; font-size: .8rem; color: #9aa6b6; }
.gt-lvrow { display: flex; gap: 8px; }
.gt-lvrow input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0b1016; color: #f2f5f8; font: inherit; font-size: 1.05rem; font-weight: 700; }
.gt-lvrow input:focus { outline: 0; border-color: var(--c); }
.gt-lvrow .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* stages */
.gt-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 14px; }
.gt-all { display: flex; align-items: center; gap: 8px; margin-right: auto; color: #cfd8e3; cursor: pointer; }
.gt-all input, .gt-stage input { width: 17px; height: 17px; accent-color: #4be08c; }
.gt-stages { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.gt-stage {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(75, 224, 140, .25);
  background: rgba(12, 16, 23, .85);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.gt-stage:hover { border-color: rgba(75, 224, 140, .6); }
.gt-stage:has(input:checked) { border-color: #f2c14e; background: rgba(242, 193, 78, .08); }
.gt-stage.hidden { border-color: rgba(255, 92, 122, .35); opacity: .78; }
.gt-sn { font-family: ui-monospace, Consolas, monospace; font-size: 1.1rem; font-weight: 800; color: #4be08c; }
.gt-stage.hidden .gt-sn { color: #ff7a95; }
.gt-st { display: grid; min-width: 0; }
.gt-st strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-st em { font-style: normal; font-size: .76rem; color: #8995a5; }
.gt-badge { padding: 4px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; }
.gt-badge.on { color: #4be08c; background: rgba(75, 224, 140, .12); }
.gt-badge.off { color: #ff7a95; background: rgba(255, 92, 122, .14); }

/* cuenta: slots, inventario y puntos de Power User */
.gt-acc {
  display: grid;
  grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: end;
  margin: 0 0 18px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(143, 123, 255, .3);
  background: linear-gradient(90deg, rgba(143, 123, 255, .12), rgba(10, 14, 20, .9) 40%);
}
.gt-acc-title { margin: 0; align-self: center; font-size: .72rem; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: #8f7bff; }
.gt-acc-f { display: grid; gap: 6px; min-width: 0; }
.gt-acc-f > span:first-child { font-size: .78rem; font-weight: 700; color: #cfd8e3; }
.gt-acc-f small { font-size: .7rem; color: #7d8898; }

/* stepper - [n] + */
.gt-step { display: inline-grid; grid-template-columns: 30px minmax(42px, 1fr) 30px; align-items: stretch; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14); background: #0b1016; }
.gt-step.wide { grid-template-columns: 30px minmax(70px, 1fr) 30px; }
.gt-step button { border: 0; padding: 0; font: inherit; font-size: 1.05rem; font-weight: 800; color: #cfd8e3; background: rgba(255, 255, 255, .05); cursor: pointer; transition: background .12s ease, color .12s ease; }
.gt-step button:hover { color: #fff; background: color-mix(in srgb, var(--c, #8f7bff) 45%, transparent); }
.gt-step button:active { transform: scale(.94); }
.gt-step input { width: 100%; min-width: 0; padding: 7px 4px; border: 0; text-align: center; font: inherit; font-weight: 800; font-variant-numeric: tabular-nums; color: #f2f5f8; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.gt-step input::-webkit-outer-spin-button, .gt-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gt-step input:focus { outline: 0; background: rgba(255, 255, 255, .05); }
.gt-step.big { grid-template-columns: 36px minmax(54px, 1fr) 36px; }
.gt-step.big input { font-size: 1.3rem; padding: 8px 4px; }

/* personaje: puntos y estadisticas */
.gt-chars.wide { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.gt-statform { display: grid; gap: 12px; padding-top: 14px; border-top: 1px dashed color-mix(in srgb, var(--c) 30%, transparent); }
.gt-points { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gt-pbox { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c) 10%, rgba(255, 255, 255, .03)); border: 1px solid color-mix(in srgb, var(--c) 25%, transparent); }
.gt-pbox > span:first-child { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.gt-pbox .gt-step { width: 100%; }
.gt-pbox.shake { animation: gt-shake .35s ease; border-color: #ff5c7a; }
@keyframes gt-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.gt-sum { margin: 0; font-size: .76rem; color: #8995a5; }
.gt-sum b { color: #f2f5f8; font-variant-numeric: tabular-nums; }
.gt-statlist { display: grid; gap: 6px; }
.gt-stat { display: grid; grid-template-columns: minmax(0, 1fr) 48px auto; gap: 10px; align-items: center; padding: 5px 6px 5px 10px; border-radius: 10px; background: rgba(255, 255, 255, .03); transition: background .12s ease; }
.gt-stat:hover { background: rgba(255, 255, 255, .06); }
.gt-stat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; color: #d5dde7; }
.gt-stat progress { width: 100%; height: 8px; border: 0; border-radius: 99px; overflow: hidden; -webkit-appearance: none; appearance: none; background: rgba(255, 255, 255, .08); }
.gt-stat progress::-webkit-progress-bar { background: rgba(255, 255, 255, .08); border-radius: 99px; }
.gt-stat progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 55%, #fff 0%), var(--c)); }
.gt-stat progress::-moz-progress-bar { border-radius: 99px; background: var(--c); }
.gt-stat.maxed .gt-stat-name { color: var(--c); font-weight: 700; }
.gt-stat .gt-step { grid-template-columns: 26px 40px 26px; }
.gt-stat .gt-step input { padding: 5px 2px; }
.gt-spend { display: flex; gap: 8px; align-items: flex-start; font-size: .76rem; color: #9aa6b6; cursor: pointer; }
.gt-spend input { accent-color: var(--c); margin-top: 2px; }
.gt-statactions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gt-statactions .btn.primary { min-width: 120px; }
.gt-statform.dirty .gt-statactions .btn.primary { box-shadow: 0 0 0 2px #f2c14e, 0 10px 28px -10px #f2c14e; }
.gt-statactions .btn[disabled], .gt-acc .btn[disabled] { opacity: .45; cursor: not-allowed; }

@media (max-width: 960px) {
  .gt-acc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-acc-title { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .gt-acc, .gt-points { grid-template-columns: 1fr; }
  .gt-chars.wide { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .gt-head { grid-template-columns: 1fr; }
  .gt-stats { justify-content: flex-start; }
}

/* refino visible */
.gt-refine { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin: 14px 0 0; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(10, 14, 20, .8); }
.gt-refine.on { border-color: rgba(75, 224, 140, .35); background: linear-gradient(90deg, rgba(75, 224, 140, .1), rgba(10, 14, 20, .85) 45%); }
.gt-refine-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-weight: 900; color: #8995a5; background: rgba(255, 255, 255, .06); }
.gt-refine.on .gt-refine-ico { color: #4be08c; background: rgba(75, 224, 140, .14); }
.gt-refine strong { font-size: .92rem; }
.gt-refine p { margin: 2px 0 0; font-size: .78rem; color: #9aa6b6; }
@media (max-width: 520px) { .gt-refine { grid-template-columns: 1fr; } }
.gt-welcome input[type=text] { width: 100%; margin: 6px 0 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0b1016; color: #f2f5f8; font: inherit; }
.gt-welcome input[type=text]:focus { outline: 0; border-color: #4be08c; }
.gt-welcome code { padding: 1px 5px; border-radius: 5px; font-size: .74rem; color: #4be08c; background: rgba(75, 224, 140, .1); }

/* claves del panel */
.pk { padding-top: 34px; padding-bottom: 60px; }
.pk *, .pk *::before, .pk *::after { box-sizing: border-box; }
.pk-head { padding: 24px 26px; border-radius: 20px; border: 1px solid rgba(242, 193, 78, .35); background: radial-gradient(110% 140% at 0% 0%, rgba(242, 193, 78, .14), transparent 55%), linear-gradient(180deg, rgba(14, 19, 27, .9), rgba(8, 11, 16, .94)); }
.pk-eyebrow { margin: 0; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: #f2c14e; }
.pk-head h2 { margin: 6px 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.pk-head p { margin: 0; color: #a7b2c0; font-size: .92rem; max-width: 820px; }
.pk-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 18px 0; }
.pk-role { --c: #8995a5; display: grid; gap: 6px; padding: 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 60%), rgba(10, 14, 20, .9); }
.pk-role.mod { --c: #35c8e0; } .pk-role.gm { --c: #4be08c; } .pk-role.admin { --c: #8f7bff; } .pk-role.full { --c: #f2c14e; }
.pk-tag { font-weight: 800; color: var(--c); }
.pk-role p { margin: 0; font-size: .82rem; color: #cfd8e3; }
.pk-state { justify-self: start; padding: 3px 10px; border-radius: 999px; font-style: normal; font-size: .72rem; font-weight: 700; color: #ffb3c1; background: rgba(255, 92, 122, .12); }
.pk-state.on { color: #4be08c; background: rgba(75, 224, 140, .12); }
.pk-form { display: grid; gap: 12px; padding: 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 14, 20, .88); }
.pk-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pk-field { --c: #8995a5; display: grid; gap: 6px; font-size: .8rem; font-weight: 700; color: #cfd8e3; }
.pk-field.mod { --c: #35c8e0; } .pk-field.gm { --c: #4be08c; } .pk-field.admin { --c: #8f7bff; } .pk-field.full { --c: #f2c14e; grid-column: 1 / -1; }
.pk-field span { color: var(--c); }
.pk-field input { padding: 11px 13px; border-radius: 11px; border: 1px solid color-mix(in srgb, var(--c) 35%, rgba(255, 255, 255, .12)); background: #0b1016; color: #f2f5f8; font: inherit; font-weight: 500; }
.pk-field input:focus { outline: 0; border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.pk-form .btn.primary { justify-self: start; }
.pk-clear { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
@media (max-width: 760px) { .pk-fields { grid-template-columns: 1fr; } }

/* 2FA del panel */
.p2fa-card { max-width: 560px; margin: 0 auto; padding: 28px; border-radius: 22px; text-align: center; border: 1px solid rgba(75, 224, 140, .35); background: radial-gradient(120% 80% at 50% 0%, rgba(75, 224, 140, .12), transparent 60%), linear-gradient(180deg, rgba(14, 19, 27, .94), rgba(8, 11, 16, .96)); box-shadow: 0 30px 70px -40px rgba(75, 224, 140, .7); }
.p2fa-card h2 { margin: 6px 0 10px; }
.p2fa-card p { color: #a7b2c0; }
.p2fa-steps { margin: 0 auto 16px; padding-left: 20px; max-width: 420px; text-align: left; color: #cfd8e3; font-size: .9rem; line-height: 1.6; }
.p2fa-qr { width: 220px; height: 220px; margin: 0 auto 12px; padding: 0; border-radius: 14px; overflow: hidden; background: #fff; }
.p2fa-qr svg { display: block; width: 100%; height: 100%; }
.p2fa-key code { padding: 4px 8px; border-radius: 8px; font-size: .95rem; letter-spacing: .08em; color: #4be08c; background: rgba(75, 224, 140, .1); }
.p2fa-form { display: flex; gap: 10px; justify-content: center; margin-top: 14px; }
.p2fa-form input { width: 170px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(75, 224, 140, .45); background: #0b1016; color: #f2f5f8; font: inherit; font-size: 1.4rem; font-weight: 800; letter-spacing: .3em; text-align: center; }
.p2fa-form input:focus { outline: 0; border-color: #4be08c; box-shadow: 0 0 0 3px rgba(75, 224, 140, .2); }
.p2fa-list { margin-top: 18px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(10, 14, 20, .88); }
.p2fa-list h3 { margin: 0 0 4px; font-size: 1.05rem; }
.p2fa-list h3 span { margin-left: 6px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; color: #4be08c; background: rgba(75, 224, 140, .12); }
.p2fa-list ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.p2fa-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.p2fa-list li em { font-style: normal; font-size: .75rem; color: #8995a5; }

/* inicio de sesion del subdominio del panel */
.ph-body { min-height: 100vh; margin: 0; display: grid; place-items: center; background: radial-gradient(80% 60% at 50% 0%, rgba(53, 200, 224, .08), transparent 70%), #07090d; }
.ph-wrap { width: min(380px, calc(100vw - 32px)); }
.ph-card { display: grid; gap: 10px; padding: 30px 26px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(14, 19, 27, .95), rgba(8, 11, 16, .97)); box-shadow: 0 30px 80px -40px #000; }
.ph-card h1 { margin: 4px 0 8px; font-size: 1.3rem; text-align: center; }
.ph-card label { font-size: .8rem; color: #9aa6b6; }
.ph-card input { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: #0b1016; color: #f2f5f8; font: inherit; }
.ph-card input:focus { outline: 0; border-color: #35c8e0; }
.ph-card .btn { margin-top: 8px; }
.ph-lock { justify-self: center; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(53, 200, 224, .12); }
.ph-lock svg { width: 28px; height: 28px; fill: none; stroke: #35c8e0; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ph-error { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: .86rem; color: #ffb3c1; background: rgba(255, 92, 122, .12); text-align: center; }
.gt-icon-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 2px; }
.gt-icon-row label { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: #cfd8e3; }
.gt-icon-row input { width: 74px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: #0b1016; color: #f2f5f8; font: inherit; font-weight: 700; text-align: center; }