:root{--bg:#fff;--surface:#fff;--surface-2:#f7f5f1;--text:#24211e;--muted:#7d776f;--line:#e4ded5;--gold:#d6a84f;--gold-2:#c99745;--gold-soft:#f5ead3;--shadow:0 18px 55px rgba(40,33,25,.09)}
html[data-theme="dark"]{--bg:rgb(28,28,28);--surface:#232323;--surface-2:#202020;--text:#f3eee6;--muted:#aaa39a;--line:#3a3835;--gold:#d6a84f;--gold-2:#c99745;--gold-soft:#2d271e;--shadow:0 20px 55px rgba(0,0,0,.25)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:background .22s ease,color .22s ease}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--gold);color:#1b1814;font-weight:900}.theme-toggle,.ghost-button{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:9px 12px;cursor:pointer}.theme-toggle{display:inline-flex;align-items:center;gap:8px}.gold-button,.primary{border:0;border-radius:10px;background:var(--gold);color:#1b1814;font-weight:800;padding:14px 20px;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer}.outline-button,.secondary{border:1px solid var(--line);background:transparent;color:var(--text);border-radius:10px;padding:13px 18px;display:inline-flex;align-items:center;justify-content:center;font-weight:700}.link-button{display:inline-flex}.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.asset-box{border:1px solid var(--line);border-radius:14px;padding:18px;display:grid;gap:12px}.asset-box img{width:100%;height:220px;object-fit:cover;border-radius:10px}.key-status{display:flex;gap:12px;flex-wrap:wrap}.key-status span{padding:10px 12px;border:1px solid var(--line);border-radius:10px}code{background:var(--surface-2);padding:2px 6px;border-radius:5px}@media(max-width:700px){.admin-grid{grid-template-columns:1fr}}

.account-modal-switch{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid #45413d;
  text-align:center;
  font-size:13px;
  color:#aaa29a;
}

.account-modal-switch span{
  display:block;
  margin-bottom:7px;
}

.account-modal-switch button{
  border:0;
  background:transparent;
  color:var(--gold);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  padding:3px 6px;
}

.account-modal-switch button:hover{
  text-decoration:underline;
}

.account-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.account-modal.is-open{
  display:flex;
}

.account-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.68);
  backdrop-filter:blur(5px);
}

.account-modal-card{
  position:relative;
  z-index:1;
  width:min(490px,100%);
  padding:34px;
  border:1px solid rgba(214,168,79,.25);
  border-radius:18px;
  background:#242424;
  color:#f5efe6;
  box-shadow:0 30px 90px rgba(0,0,0,.45);
}

.account-modal-card h2{
  margin:0 0 10px;
  font-size:30px;
}

.account-modal-card p{
  margin:0 0 24px;
  line-height:1.6;
  color:#c7c0b7;
}

.account-modal-card label{
  display:block;
  margin:15px 0 7px;
  font-size:14px;
}


.account-modal-card input{
  width:100%;
  box-sizing:border-box;
  padding:13px 14px;
  border:1px solid #55504a;
  border-radius:9px;
  background:#202020;
  color:#fff;
  font:inherit;
}

.account-modal-card input:focus{
  outline:none;
  border-color:var(--gold);
}

.account-modal-primary,
.account-modal-secondary{
  width:100%;
  margin-top:16px;
  padding:13px 16px;
  border-radius:9px;
  font-weight:800;
  cursor:pointer;
}

.account-modal-primary{
  border:1px solid var(--gold);
  background:var(--gold);
  color:#1b1814;
}

.account-modal-secondary{
  margin-top:10px;
  border:1px solid #55504a;
  background:transparent;
  color:#f5efe6;
}

.account-modal-close{
  position:absolute;
  top:13px;
  right:15px;
  border:0;
  background:transparent;
  color:#aaa29a;
  font-size:27px;
  cursor:pointer;
}

.account-modal-error{
  margin-top:15px;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(180,50,50,.15);
  color:#ffb7b7;
  font-size:13px;
}

.account-button{
  border:1px solid #49433e;
  background:transparent;
  color:#d6cec5;
  font:inherit;
  cursor:pointer;
  padding:8px 11px;
  border-radius:9px;
  transition:
    color .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.account-button:hover{
  color:#fff;
  border-color:#716960;
  background:rgba(255,255,255,.025);
}

.account-button.is-authenticated{
  padding:8px 12px;
  border:1px solid rgba(214,168,79,.45);
  color:#f3d79d;
  background:rgba(214,168,79,.07);
  box-shadow:
    0 0 0 1px rgba(214,168,79,.04),
    0 0 16px rgba(214,168,79,.12);
}

.account-button.is-authenticated:hover{
  color:#fff1cc;
  border-color:rgba(214,168,79,.7);
  box-shadow:0 0 20px rgba(214,168,79,.2);
}
/* =========================
   Reset flow modal
   ========================= */

.reset-modal[hidden] {
    display: none;
}

.reset-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;

    display: grid;
    place-items: center;

    padding: 24px;
}

.reset-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(4px);
}

.reset-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(460px, 100%);

    border: 1px solid rgba(214, 168, 79, .35);
    border-radius: 18px;

    padding: 30px 28px 26px;

    background: var(--surface);
    color: var(--text);

    box-shadow:
        0 24px 70px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(214, 168, 79, .05);

    text-align: center;
}

.reset-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;

    width: 36px;
    height: 36px;

    border: 0;
    background: transparent;
    color: var(--muted);

    font-size: 25px;
    line-height: 1;

    cursor: pointer;
}

.reset-modal-close:hover {
    color: var(--text);
}

.reset-modal-icon {
    width: 58px;
    height: 58px;

    margin: 0 auto 18px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(214, 168, 79, .35);
    border-radius: 50%;

    background: var(--gold-soft);
    color: var(--gold);

    font-size: 28px;
}

.reset-modal-dialog h2 {
    margin: 0 0 12px;

    font-size: 25px;
}

.reset-modal-text {
    margin: 0;

    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}

.reset-modal-note {
    margin: 8px 0 0;

    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;
}

.reset-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-top: 24px;
}

.reset-modal-actions button {
    min-height: 50px;
}

@media (max-width: 520px) {
    .reset-modal-dialog {
        padding: 28px 20px 22px;
    }

    .reset-modal-actions {
        grid-template-columns: 1fr;
    }
}


/* AUTH PASSWORD TOGGLE */

.account-password-wrap {
  position: relative;
  width: 100%;
}

.account-password-wrap input {
  width: 100%;
  padding-right: 48px;
  box-sizing: border-box;
}

.account-password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 34px;
  height: 34px;

  padding: 0;
  margin: 0;

  border: 0;
  background: transparent;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
  line-height: 1;

  opacity: .72;
}

.account-password-toggle:hover {
  opacity: 1;
}

.account-password-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* Hidden debe ganar sobre estilos visuales del modal */
.account-modal [hidden] {
  display: none !important;
}