/* app.css — Phoenix single source of truth */
:root { --bg: #0e1116; --card:#151a22; --text:#e8eef8; --muted:#a9b1bd; --brand:#3aa0ff; --ok:#2ecc71; --danger:#ff4d4f; }
*{box-sizing:border-box} html,body{height:100%} body.nx-body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}

a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:none}

.nx-header{position:sticky;top:0;background:#0f141c;border-bottom:1px solid #1e2530;z-index:50}
.nx-header-inner{max-width:1100px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between}
.nx-brand{display:inline-flex;align-items:center;gap:.35rem;color:#e6f2ff}
.nx-brand-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#4db8ff,#2a8cf5);font-weight:800}
.nx-brand-name{font-weight:700;letter-spacing:.2px}
.nx-actions{display:flex;align-items:center;gap:12px}
.nx-link{padding:6px 10px;border-radius:999px;color:#e6f2ff}
.nx-chip{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:6px 12px;border:1px solid #2a3442;background:#121823}
.nx-chip.signup{background:#1b66ff;border-color:#1b66ff;color:#fff;font-weight:700}
.nx-chip.coins{background:#1a212e;border-color:#2a3442}
.nx-pill{display:inline-flex;align-items:center;gap:.35rem;padding:4px 10px;border-radius:999px;background:#141b25;border:1px solid #243042;color:#bcd0ff}
.nx-badge{display:inline-block;min-width:18px;padding:0 6px;border-radius:12px;background:#22314a;color:#cfe2ff;text-align:center}

.nx-user{position:relative}
.nx-user-btn{display:inline-flex;align-items:center;gap:.35rem;padding:6px 12px;border-radius:10px;border:1px solid #2a3442;background:#0f151f;color:#e6f2ff;cursor:pointer}
.nx-caret path{fill:#8fa8c6}
.nx-dropdown{position:absolute;right:0;top:120%;min-width:200px;background:#0f151f;border:1px solid #2a3442;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);padding:6px;display:none}
.nx-dropdown.open{display:block}
.nx-dd-link{display:block;padding:10px 12px;border-radius:8px;color:#e8eef8}
.nx-dd-link:hover{background:#162233}
.nx-dd-form{margin:6px}
.nx-dd-logout{width:100%;padding:10px 12px;border-radius:8px;border:1px solid #5b1b1b;background:#2a0f0f;color:#ffb3b3;font-weight:700;cursor:pointer}
.nx-footer{position:fixed;left:0;right:0;bottom:0;padding:10px 16px;background:#0f141c;border-top:1px solid #1e2530;text-align:center;color:#9fb1c7}

.nx-main{max-width:1100px;margin:24px auto 80px;padding:0 16px}
.nx-hero{display:grid;place-items:center;height:60vh}
.nx-hero-title{font-size:40px;font-weight:800;letter-spacing:0.5px}

.nx-auth{display:grid;place-items:start}
.nx-card{background:var(--card);border:1px solid #202733;border-radius:16px;padding:18px;margin-bottom:18px}
.nx-h2{font-size:22px;margin:0 0 10px}
.nx-h3{font-size:18px;margin:8px 0 8px}
.nx-h3.danger{color:var(--danger)}
.nx-field{margin:10px 0}
.nx-label{display:block;margin-bottom:6px;color:#c9d6e2}
.nx-input,.nx-textarea,.nx-file{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #2a3442;background:#0f151f;color:#e6f2ff}
.nx-textarea{min-height:120px;resize:vertical}
.nx-help{font-size:12px;color:var(--muted);margin-top:6px}
.nx-btn{display:inline-flex;align-items:center;gap:.4rem;padding:10px 14px;border-radius:12px;border:1px solid #2a3442;background:#121823;color:#e6f2ff;cursor:pointer}
.nx-btn.primary{background:#1b66ff;border-color:#1b66ff}
.nx-btn.danger{background:#3b1320;border-color:#5a1d2f;color:#ffb3b3}
.nx-actions-row{display:flex;gap:10px;margin-top:8px}
.nx-grid{display:grid;grid-template-columns:2fr 1.2fr;gap:16px}
.nx-avatar-preview{width:180px;height:180px;border-radius:16px;border:1px solid #2a3442;overflow:hidden;background:#0f151f;display:grid;place-items:center;margin-bottom:8px}
.nx-avatar-preview img{max-width:100%;max-height:100%}
.nx-flash.ok{margin-top:10px;padding:10px 12px;border-radius:12px;background:#0f2818;border:1px solid #1f5030;color:#b9f7c7}
@media (max-width:900px){.nx-grid{grid-template-columns:1fr}}


/* Style the existing /vouchers link as a modern pill; remove old bordered number look */
.nx-header a[href*="/vouchers"]{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;background:#1f2a38;
  text-decoration:none
}
.nx-header a[href*="/vouchers"]:hover{background:#243144}
.nx-header a[href*="/vouchers"]::before{
  content:"";width:16px;height:16px;display:block;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6a2 2 0 0 1 2-2h8.2c.3 0 .6.1.8.4l2.3 2.8H20a2 2 0 0 1 0 4h-2.4l-2.3 2.8c-.2.3-.5.4-.8.4H6a2 2 0 0 1-2-2V6z'/></svg>") no-repeat center/contain;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M4 6a2 2 0 0 1 2-2h8.2c.3 0 .6.1 .8.4l2.3 2.8H20a2 2 0 0 1 0 4h-2.4l-2.3 2.8c-.2.3-.5.4-.8.4H6a2 2 0 0 1-2-2V6z'/></svg>") no-repeat center/contain;
}
/* neutralize various number badge styles inside the link */
.nx-header a[href*="/vouchers"] .nx-badge,
.nx-header a[href*="/vouchers"] .badge,
.nx-header a[href*="/vouchers"] .count{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-width:auto
}

/* neutralize any inner badge/number borders if present */
.nx-header a.nx-pill .badge,
.nx-header a.nx-pill .nx-badge,
.nx-header a.nx-pill .count{background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-width:auto}

/* neutralize bordered number styles inside the link */
header .nx-actions a[href*="/vouchers"] .badge,
header .nx-actions a[href*="/vouchers"] .nx-badge,
header .nx-actions a[href*="/vouchers"] .count{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-width:auto
}

/* kill the old bordered number look (whatever the class is) */
header .nx-actions a:has(.nx-count) .nx-count,
header .nx-actions a:has(.nx-count) .badge,
header .nx-actions a:has(.nx-count) .nx-badge,
header .nx-actions a:has(.nx-count) .count{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-width:auto
}
/* neutralize any bordered-number styles inside the link */
header .nx-actions a[href*="/vouchers"] .badge,
header .nx-actions a[href*="/vouchers"] .nx-badge,
header .nx-actions a[href*="/vouchers"] .count,
header .nx-actions a[href*="/vouchers"] .nx-count{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-width:auto
}
/* neutralize bordered-number look */
header .nx-actions a[href*="/vouchers"] .badge,
header .nx-actions a[href*="/vouchers"] .nx-badge,
header .nx-actions a[href*="/vouchers"] .count,
header .nx-actions a[href*="/vouchers"] .nx-count{
  background:transparent;border:0;box-shadow:none;padding:0;margin:0;min-width:auto
}
/* NX_PROFILE_ONLY_SAFE */
body:has(.nx-avatar-preview) .nx-main > .nx-grid{
  max-width:1100px;   /* adjust 1040–1200 if you want tighter/wider */
  margin-left:auto; margin-right:auto;
  padding-inline:12px;
}
/* END NX_PROFILE_ONLY_SAFE */
/* NX_LIVE_FINAL */
/* center the wrapper you actually use */
.nx-main > .nx-grid{
  max-width:1100px; margin-left:auto; margin-right:auto; padding-inline:12px; box-sizing:border-box;
}

/* avatar initial overlay: show only when no <img> present */
.nx-avatar-preview{ position:relative; border-radius:12px; }
.nx-avatar-preview:not(:has(img)){
  background:#2b3443; color:#dbeafe;
}
.nx-avatar-preview:not(:has(img))::before{
  content:attr(data-initial); position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:48px; line-height:1;
}

/* vouchers: keep icon/emoji; make number clean */
.nx-header .nx-pill.vouchers{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; min-height:28px;
  border-radius:9999px; background:#1f2a38;
}
.nx-header .nx-pill.vouchers:hover{ background:#243144; }
.nx-header .nx-pill.vouchers :is(.badge,.nx-badge,.count,.nx-count){
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; min-width:auto !important; font-size:12px !important; line-height:1 !important;
}
/* END NX_LIVE_FINAL */
/* NX_FINAL_UI_2025 */

/* 1) PROFILE CENTER — center your actual wrapper: .nx-main > .nx-grid */
.nx-main > .nx-grid{
  width:min(1120px,100%);
  margin:24px auto 80px;
  padding-inline:12px;
  box-sizing:border-box;
}

/* 2) AVATAR LETTER — show the initial ONLY when the image is default/absent */
.nx-avatar-preview{ position:relative; border-radius:12px; }
/* If there is NO <img> → show initial */
.nx-avatar-preview:not(:has(img)){
  background:#2b3443; color:#dbeafe;
}
.nx-avatar-preview:not(:has(img))::before{
  content:attr(data-initial);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:48px; line-height:1;
}
/* If there IS an <img> but it’s the default favicon → hide it and show initial */
.nx-avatar-preview:has(img[src*="default-avatar"]) {
  background:#2b3443; color:#dbeafe;
}
.nx-avatar-preview:has(img[src*="default-avatar"]) img{ display:none; }
.nx-avatar-preview:has(img[src*="default-avatar"])::before{
  content:attr(data-initial);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:48px; line-height:1;
}

/* 3) VOUCHERS CHIP — modern icon (CSS mask) + clean number; keep your markup */
.nx-header .nx-pill.vouchers{
  display:inline-flex; align-items:center; gap:8px;
  padding:4px 10px; min-height:28px;
  border-radius:9999px; background:#1f2a38;
  /* Hide the legacy emoji text node by making text transparent */
  color:transparent;
}
.nx-header .nx-pill.vouchers:hover{ background:#243144; }
/* Inject a modern coupon/ticket icon via ::before (independent color) */
.nx-header .nx-pill.vouchers::before{
  content:""; width:16px; height:16px; display:inline-block;
  background-color:#9fb3c8;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 3h10a2 2 0 0 1 2 2v4.59a2 2 0 0 0 .59 1.41l.41.41-.41.41a2 2 0 0 0-.59 1.41V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3.59a2 2 0 0 0-.59-1.41L4 15.59l.41-.41A2 2 0 0 0 5 13.77V10a2 2 0 0 0-.59-1.41L4 8.18l.41-.41A2 2 0 0 0 5 6.36V5a2 2 0 0 1 2-2Zm3 5h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 3h10a2 2 0 0 1 2 2v4.59a2 2 0 0 0 .59 1.41l.41.41-.41.41a2 2 0 0 0-.59 1.41V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3.59a2 2 0 0 0-.59-1.41L4 15.59l.41-.41A2 2 0 0 0 5 13.77V10a2 2 0 0 0-.59-1.41L4 8.18l.41-.41A2 2 0 0 0 5 6.36V5a2 2 0 0 1 2-2Zm3 5h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2Z"/></svg>') center / contain no-repeat;
}
/* Make the numeric count readable (since parent text is transparent) */
.nx-header .nx-pill.vouchers :is(.badge,.nx-badge,.count,.nx-count){
  color:#cbd5e1 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; min-width:auto !important;
  font-size:12px !important; line-height:1 !important;
}

/* 4) AUTH PAGES — center single-card pages like /login & /register */
.nx-main > .nx-card:only-child{
  width:min(460px, 92%);
  margin:48px auto;
}
/* END NX_FINAL_UI_2025 */
/* NX_UI_POLISH_2 */

/* Profile wrapper centered and visually balanced */
.nx-main > .nx-grid{
  width:min(1120px,100%);
  margin:24px auto 80px;
  padding-inline:12px;
  box-sizing:border-box;
  /* re-balance the two columns so the whole block looks centered */
  grid-template-columns: 1.3fr 1fr;
  column-gap: 32px;
}

/* Avatar letter when default image or no image */
.nx-avatar-preview{ position:relative; border-radius:12px; }
.nx-avatar-preview:not(:has(img)),
.nx-avatar-preview:has(img[src*="default-avatar"]){
  background:#2b3443; color:#dbeafe;
}
.nx-avatar-preview:has(img[src*="default-avatar"]) img{ display:none; }
.nx-avatar-preview:not(:has(img))::before,
.nx-avatar-preview:has(img[src*="default-avatar"])::before{
  content:attr(data-initial);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:48px; line-height:1;
}

/* Vouchers chip: modern icon, no weird gap, clean number */
.nx-header .nx-pill.vouchers{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; min-height:28px; border-radius:9999px;
  background:#1f2a38;
  /* kill width taken by legacy emoji text node */
  font-size:0;
}
.nx-header .nx-pill.vouchers:hover{ background:#243144; }
/* ticket/coupon icon via mask */
.nx-header .nx-pill.vouchers::before{
  content:""; width:16px; height:16px; display:inline-block;
  background-color:#9fb3c8;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 3h10a2 2 0 0 1 2 2v4.59a2 2 0 0 0 .59 1.41l.41.41-.41.41a2 2 0 0 0-.59 1.41V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3.59a2 2 0 0 0-.59-1.41L4 15.59l.41-.41A2 2 0 0 0 5 13.77V10a2 2 0 0 0-.59-1.41L4 8.18l.41-.41A2 2 0 0 0 5 6.36V5a2 2 0 0 1 2-2Zm3 5h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2Z"/></svg>') center / contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 3h10a2 2 0 0 1 2 2v4.59a2 2 0 0 0 .59 1.41l.41.41-.41.41a2 2 0 0 0-.59 1.41V20a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-3.59a2 2 0 0 0-.59-1.41L4 15.59l.41-.41A2 2 0 0 0 5 13.77V10a2 2 0 0 0-.59-1.41L4 8.18l.41-.41A2 2 0 0 0 5 6.36V5a2 2 0 0 1 2-2Zm3 5h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h4a1 1 0 1 0 0-2h-4a1 1 0 1 0 0 2Zm0 4h2a1 1 0 1 0 0-2h-2a1 1 0 1 0 0 2Z"/></svg>') center / contain no-repeat;
}
/* number readable + tight */
.nx-header .nx-pill.vouchers :is(.badge,.nx-badge,.count,.nx-count){
  font-size:12px !important; line-height:1 !important; color:#cbd5e1 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; min-width:auto !important;
}

/* Auth pages: center the single card + blue links */
.nx-main > .nx-card:only-child{
  width:min(560px, 92%); margin:64px auto;
}
.nx-main > .nx-card:only-child a[href*="/register"],
.nx-main > .nx-card:only-child a[href*="/login"]{
  color:#60a5fa; text-decoration:none;
}
.nx-main > .nx-card:only-child a[href*="/register"]:hover,
.nx-main > .nx-card:only-child a[href*="/login"]:hover{
  text-decoration:underline;
}

/* Strength meter UI */
.nx-strength{ height:6px; background:#253040; border-radius:6px; overflow:hidden; margin-top:8px; display:none; }
.nx-strength > .bar{ height:100%; width:0%; background:#ef4444; transition:width .2s ease, background-color .2s ease; }
.nx-strength-label{ font-size:12px; color:#9fb3c8; margin-top:6px; display:none; }
/* NX_UI_POLISH_2 */
/* NX_UI_POLISH_3 */

/* Center everything inside main; treat the main content as one centered block */
.nx-main{
  display:flex;
  justify-content:center;
}

/* Constrain + center the internal grid wrapper on all pages */
.nx-main > .nx-grid{
  width:min(1120px,100%);
  margin:24px auto 80px;
  padding-inline:12px;
  box-sizing:border-box;
}

/* Perfectly balanced profile columns (visually centered) */
.nx-main > .nx-grid{
  grid-template-columns: 1fr 1fr;   /* <- was 2fr/1.2fr; then 1.3fr/1fr */
  column-gap:32px;
}

/* Single-card pages (login/register) — centered regardless of wrapper */
.nx-main > .nx-card:only-child{
  width:min(560px,92%); margin:64px auto;
}
.nx-main > .nx-grid:has(> .nx-card:nth-child(1):last-child){
  width:min(560px,92%); margin:64px auto;
}

/* Ensure auth links stay blue */
.nx-main :is(.nx-card) a[href*="/register"],
.nx-main :is(.nx-card) a[href*="/login"]{
  color:#60a5fa; text-decoration:none;
}
.nx-main :is(.nx-card) a[href*="/register"]:hover,
.nx-main :is(.nx-card) a[href*="/login"]:hover{
  text-decoration:underline;
}

/* Strength meter visuals (JS toggles display) */
.nx-strength{ height:6px; background:#253040; border-radius:6px; overflow:hidden; margin-top:8px; display:none; }
.nx-strength > .bar{ height:100%; width:0%; background:#ef4444; transition:width .2s ease, background-color .2s ease; }
.nx-strength-label{ font-size:12px; color:#9fb3c8; margin-top:6px; display:none; }

/* END NX_UI_POLISH_3 */
/* NX_AUTH_POLISH_4 — keep profile-centering rules above, this only touches auth pages */

/* If a .nx-card is the ONLY element child inside .nx-grid, center and size it */
.nx-main > .nx-grid > .nx-card:only-child{
  width:min(560px,92%);
  margin:64px auto;
}

/* If a single card sits directly under .nx-main (some templates do), center it too */
.nx-main > .nx-card:only-child{
  width:min(560px,92%);
  margin:64px auto;
}

/* Make sure the auth links stay blue */
.nx-main :is(.nx-card) a[href*="/register"],
.nx-main :is(.nx-card) a[href*="/login"]{
  color:#60a5fa; text-decoration:none;
}
.nx-main :is(.nx-card) a[href*="/register"]:hover,
.nx-main :is(.nx-card) a[href*="/login"]:hover{
  text-decoration:underline;
}

/* Strength meter visuals (JS toggles visibility) */
.nx-strength{ height:6px; background:#253040; border-radius:6px; overflow:hidden; margin-top:8px; display:none; }
.nx-strength > .bar{ height:100%; width:0%; background:#ef4444; transition:width .2s ease, background-color .2s ease; }
.nx-strength-label{ font-size:12px; color:#9fb3c8; margin-top:6px; display:none; }
/* END NX_AUTH_POLISH_4 */
/* NX_AUTH_EYES_ABS_V2 */
.nx-input-wrap{position:relative;display:block;width:100%;}
.nx-input-wrap .nx-input{padding-right:42px;} /* room for eye */
.nx-input-wrap .nx-eye{
  position:absolute; top:50%; right:10px; transform:translateY(-50%);
  width:32px;height:32px; display:inline-flex; align-items:center; justify-content:center;
  border:0; outline:0; background:transparent; color:#9fb3c8; cursor:pointer;
}
.nx-input-wrap .nx-eye:hover{color:#c7d6e5;}
.nx-input-wrap .nx-eye svg{width:18px;height:18px;fill:currentColor;}
/* Kill any legacy/incorrect meters */
#password-strength,.password-strength{display:none!important;}
/* Our meter (hidden until typing) */
.nx-strength{height:6px;background:#253040;border-radius:6px;overflow:hidden;margin-top:8px;display:none;}
.nx-strength>.bar{height:100%;width:0%;background:#ef4444;transition:width .2s ease,background-color .2s ease;}
.nx-strength-label{font-size:12px;color:#9fb3c8;margin-top:6px;display:none;}
/* END NX_AUTH_EYES_ABS_V2 */
/* NX_AVATAR_PREVIEW_CSS */
.nx-avatar-preview{position:relative;overflow:hidden;border-radius:16px;background:#111924}
.nx-avatar-preview img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:auto}
/* END NX_AVATAR_PREVIEW_CSS */

/* NX field-wrap & eye */
.nx-field-wrap{position:relative}
.nx-field-wrap .nx-eye{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:1px solid rgba(255,255,255,.1);
  background:#0f1217;color:#c7d2e0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center
}
.nx-meter{margin:.5rem 0 0 0;height:6px;border-radius:6px;background:#1b212a;position:relative}
.nx-meter .nx-meter-bar{height:100%;width:0;border-radius:6px;background:#6ee7a8;transition:width .15s}
.nx-meter .nx-meter-label{display:block;margin-top:.35rem;font-size:.8rem;color:#9fb0c5}
.nx-meter.lv-1 .nx-meter-bar{background:#f87171}
.nx-meter.lv-2 .nx-meter-bar{background:#fbbf24}
.nx-meter.lv-3 .nx-meter-bar{background:#34d399}
.nx-meter.lv-4 .nx-meter-bar{background:#10b981}

/* Avatar preview square, cropped */
.nx-avatar-preview{width:176px;height:176px;border-radius:18px;overflow:hidden;position:relative;background:#2a2f38;display:flex;align-items:center;justify-content:center}
.nx-avatar-preview img{width:100%;height:100%;object-fit:cover;image-rendering:auto}
.nx-avatar-initial{font:600 64px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:#dbe1ea}
.nx-btn[disabled]{opacity:.5;cursor:not-allowed}

/* NX-PATCH-UI */
.nx-field-wrap{position:relative}
.nx-field-wrap>.nx-eye{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:28px;height:28px; display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:0; border-radius:6px; color:#c9d1d9; opacity:.8;
}
.nx-field-wrap>.nx-eye:hover{opacity:1}

.nx-meter{height:6px;background:#1e2430;border-radius:6px;margin:8px 2px 4px}
.nx-meter>.nx-meter-bar{height:100%;width:0;background:#35c759;border-radius:6px;transition:width .25s ease}
.nx-meter>.nx-meter-label{font-size:.85rem;color:#9fb3c8;margin-top:2px}

/* keep header dropdown clickable */
#nx-user-dd{position:absolute;z-index:50}
#nx-user-dd.nx-open{display:block}

/* avatar pending delete hint */
.nx-avatar-preview.nx-will-delete{outline:2px dashed #e55353; outline-offset:4px}

/* ensure images scale nicely inside preview container */
.nx-avatar-preview img{max-width:100%;height:auto;display:block}

/* NX PATCH START */
.nx-field-wrap{position:relative}
.nx-field-wrap .nx-eye-btn{
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%); background:transparent;
  border:0; padding:6px; color:#AAB6CF; cursor:pointer
}
.nx-field-wrap .nx-eye-btn.on{ color:#e5ecff }
input[type="password"] + button.nx-legacy-eye-hidden{ display:none !important }

/* Strength meter bar (hidden until typing) */
.nx-meter{height:6px; background:#1c2530; border-radius:6px; margin:6px 2px 0; display:none}
.nx-meter .fill{height:100%; border-radius:6px; width:0; transition:width .2s}
.nx-meter[data-state="weak"]  .fill{background:#e67e22}
.nx-meter[data-state="ok"]    .fill{background:#f1c40f}
.nx-meter[data-state="good"]  .fill{background:#2ecc71}
.nx-meter[data-state="strong"].fill,
.nx-meter[data-state="strong"] .fill{background:#27ae60}

/* Avatar letter fallback + image */
.nx-avatar-preview{
  position:relative; width:160px; height:160px; border-radius:16px;
  background:#2b313b; display:flex; align-items:center; justify-content:center; overflow:hidden
}
.nx-avatar-preview::before{
  content:attr(data-initial); color:#dfe6f1; font-size:72px; font-weight:800; line-height:1;
}
.nx-avatar-preview.has-img::before{ display:none }
.nx-avatar-preview img{max-width:100%; max-height:100%; display:block}

/* Avoid overlays blocking header */
.nx-meter, .nx-field-wrap .nx-eye-btn{ z-index:auto }
/* NX PATCH END */

/* NX_UI_PACK v2025-09-08 */
.nx-field-wrap{position:relative}
.nx-field-wrap input[type="password"]{padding-right:42px}
.nx-field-wrap .nx-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;border:0;background:transparent;color:#c7d2e0;opacity:.85;cursor:pointer}
.nx-field-wrap .nx-eye:hover{opacity:1}
.nx-field-wrap>button:not(.nx-eye){display:none!important} /* hide any stray legacy eye buttons inside wrap */

.nx-meter{display:none;margin-top:6px}
.nx-meter-track{height:6px;border-radius:6px;overflow:hidden;background:#1b232d}
.nx-meter-fill{height:100%;width:0;background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e)}
.nx-meter-label{margin-top:4px;font-size:12px;color:#97a6ba}

/* Avatar box: crisp preview, no pixelation */
.nx-avatar-preview{position:relative;overflow:hidden;border-radius:16px;background:#12171e}
.nx-avatar-preview img{width:100%;height:100%;object-fit:cover;display:block}

/* === NX PATCH v3 === */
.nx-field-wrap{position:relative;display:block}
.nx-field-wrap input[type="password"]{padding-right:42px}
.nx-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#b3bdd1;cursor:pointer;padding:0;line-height:1}
.nx-eye.on{color:#ffffff}
#nx-meter{margin-top:.5rem}
#nx-meter.hidden{display:none}
#nx-meter .bar{height:6px;border-radius:6px;background:#2a3344;overflow:hidden;position:relative}
#nx-meter .bar:after{content:'';position:absolute;left:0;top:0;bottom:0;width:var(--w,0);background:linear-gradient(90deg,#de4b4b,#ffb04d,#5ccb5c);border-radius:6px}
#nx-meter .label{margin-top:.25rem;font-size:.85rem;color:#9fb0c8}
#nx-meter[data-level="0"] .bar:after{--w:25%}
#nx-meter[data-level="1"] .bar:after{--w:45%}
#nx-meter[data-level="2"] .bar:after{--w:70%}
#nx-meter[data-level="3"] .bar:after{--w:100%}

/* Avatar box */
.nx-avatar-preview{position:relative;overflow:hidden;border-radius:12px;background:#1b2230}
.nx-avatar-preview img{display:block;width:100%;height:100%;object-fit:cover}
.nx-avatar-preview .nx-initial{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:72px;color:#cfe2ff}
.nx-avatar-preview.has-image .nx-initial{display:none}
.nx-avatar-preview.pending-delete{filter:grayscale(.9);opacity:.6}

/* Dropdown fix */
.nx-dropdown{display:none}
.nx-dropdown.open{display:block}

/* NX banner */
.nx-banner.success{
  margin: .75rem auto 0; max-width: 1100px;
  background: #052e12; color:#a7f3d0; border:1px solid #065f46;
  padding:.75rem 1rem; border-radius:.5rem;
}





/* NX_PROFILE_LAYOUT_FINAL START */
/* Card */
.nx-main .nx-card.nx-profile{
  width:min(1200px,95vw);
  margin:36px auto;
  padding:28px 34px;
  border-radius:16px;
}
/* Grid (avatar left 360–380px, form fills) */
.nx-main .nx-card.nx-profile .nx-profile-grid{
  display:grid;
  grid-template-columns:380px minmax(700px,1fr);
  gap:36px;
  align-items:start;
}

/* Right column slightly lower to center vs avatar */
.nx-main .nx-card.nx-profile .nx-maincol{ padding-top:32px; }

/* Avatar tile and overlay (kept from prior good state) */
.nx-main .nx-card.nx-profile .nx-avatar-preview{
  position:relative; width:320px; height:320px;
  border-radius:12px; overflow:hidden; background:#2b303b;
}
.nx-main .nx-card.nx-profile .nx-avatar-preview img{ width:100%; height:100%; object-fit:cover; display:block; }
.nx-main .nx-card.nx-profile .nx-avatar-preview .nx-initial{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:120px; letter-spacing:1px; color:#e9eef7; background:rgba(255,255,255,.06); pointer-events:none;
}
.nx-main .nx-card.nx-profile .nx-avatar-preview::before,
.nx-main .nx-card.nx-profile .nx-avatar-preview::after{ content:none !important; } /* kill ghosts */

/* File row compact + Delete beside it */
.nx-main .nx-card.nx-profile .nx-avatar-actions{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; width:auto;
}
.nx-main .nx-card.nx-profile .nx-avatar-actions > *{ flex:0 0 auto !important; }
.nx-main .nx-card.nx-profile .nx-avatar-actions input[type=file],
.nx-main .nx-card.nx-profile .nx-avatar-actions .nx-file{
  width:auto !important; max-width:220px; display:inline-block;
}

/* Save row breathing room */
.nx-main .nx-card.nx-profile .nx-actions-row{ margin-top:24px; display:flex; gap:12px; }

/* Responsive: stack below 980px */
@media (max-width:980px){
  .nx-main .nx-card.nx-profile .nx-profile-grid{ grid-template-columns:1fr; gap:24px; }
  .nx-main .nx-card.nx-profile .nx-avatar-preview{ width:260px; height:260px; }
  .nx-main .nx-card.nx-profile .nx-maincol{ padding-top:12px; }
}
/* NX_PROFILE_LAYOUT_FINAL END */



/* NX_PROFILE_SAVE_RIGHT START */
/* Align the Save row to the right edge of the form */
.nx-main .nx-card.nx-profile .nx-actions-row{
  margin-top: 28px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px;
}
/* NX_PROFILE_SAVE_RIGHT END */

/* NX_PROFILE_TUNE_V5 START */
.nx-main .nx-card.nx-profile .nx-maincol{ padding-top:64px !important; }
.nx-main .nx-card.nx-profile .nx-actions-row{ margin-top:32px !important; }
@media (max-width:980px){
  .nx-main .nx-card.nx-profile .nx-maincol{ padding-top:18px !important; }
  .nx-main .nx-card.nx-profile .nx-actions-row{ margin-top:22px !important; }
}
/* NX_PROFILE_TUNE_V5 END */

/* NX_PROFILE_ACTIONS_CENTER START */
/* Keep actions visually centered under the avatar tile */
.nx-main .nx-card.nx-profile .nx-avatar-actions{
  width:320px;              /* match the avatar preview width on desktop */
  margin:10px 0 0 0;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  justify-content:center;
}
@media (max-width:980px){
  .nx-main .nx-card.nx-profile .nx-avatar-actions{ width:260px; }
}
/* NX_PROFILE_ACTIONS_CENTER END */

/* NX_AUTH_POLISH START */
.nx-auth-card{
  width:min(720px,96%) !important;
  margin:10vh auto !important;
}
.nx-auth-card form .nx-input,
.nx-auth-card form input,
.nx-auth-card form textarea,
.nx-auth-card form select{
  width:100%;
  min-height:46px;
  font-size:16px;
}
.nx-auth-card .nx-row{gap:12px}

/* Hide legacy inline eyes so only JS eyes show */
.nx-auth-card .eye,
.nx-auth-card .password-eye,
.nx-auth-card [data-eye]{
  display:none !important;
}

/* JS eye button look (if we inject one) */
.nx-auth-card .nx-eye-btn{
  position:absolute; right:.6rem; top:50%;
  transform:translateY(-50%);
  height:28px; width:28px;
  border-radius:6px;
  background:#1f2430; border:1px solid #2d3444; color:#cdd6f4;
  line-height:26px; text-align:center; cursor:pointer;
}

/* Strength meter visuals */
#nx-strength{margin:8px 0 2px 0;font-size:12px;color:var(--muted,#94a3b8)}
#nx-strength .bar{height:4px;border-radius:3px;background:#2b3140;overflow:hidden}
#nx-strength .bar i{display:block;height:100%;width:10%;background:linear-gradient(90deg,#ff6b6b,#ffd166,#06d6a0);transition:width .25s}

/* Force avatar placeholder area to gray (high specificity) */
.nx-card .nx-avatar-preview,
.nx-card .nx-avatar-preview #nx-avatar-img,
#nx-avatar-img{
  background-color:#2f3442 !important;
}
/* NX_AUTH_POLISH END */

/* === NX_ADDENDUM_SCOPED_V1 (do not remove) ============================= */
:root{ --nx-bg:#0f1115; --nx-card:#171a21; --nx-text:#e6e8ee; --nx-dim:#9aa3b2; --nx-blue:#2b6cff; --nx-red:#e23b3b; }
html,body{height:100%}
body.nx{ margin:0; background:var(--nx-bg); color:var(--nx-text); font:400 16px/1.45 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif; }
.nx a{ color:var(--nx-blue); text-decoration:none }
.nx a:hover{ text-decoration:none; filter:brightness(0.9) }
.nx-header{ position:sticky; top:0; z-index:10; background:#0e1118; border-bottom:1px solid #222; }
.nx-container{ max-width:1100px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; justify-content:space-between }
.nx-brand{ display:flex; gap:10px; align-items:center; color:#dfe6ff }
.nx-brand-icon{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:6px; background:#2f3545; font-weight:800 }
.nx-brand-text{ font-weight:700 }
.nx-nav{ display:flex; gap:12px; align-items:center }
.nx-link{ padding:8px 10px }
.nx-btn{ border:0; border-radius:10px; padding:8px 14px; background:#2a2f3b; color:#fff; cursor:pointer }
.nx-btn:hover{ filter:brightness(1.1) }
.nx-btn-primary{ background:var(--nx-blue) }
.nx-danger{ background:var(--nx-red) }
.nx-pill{ display:flex; align-items:center; gap:6px; padding:6px 10px; background:#1d2130; border-radius:999px }
.nx-badge{ background:#2b3348; padding:2px 6px; border-radius:6px }
.nx-chip{ background:#1d2538; padding:6px 10px; border-radius:999px }
.nx-user{ position:relative }
.nx-user-toggle{ background:#23273a; color:#fff; border:0; border-radius:10px; padding:8px 12px; cursor:pointer }
.nx-dropdown{ position:absolute; right:0; top:110%; width:200px; background:#111521; border:1px solid #2a2f44; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.45); overflow:hidden }
.nx-dd-item{ display:block; padding:10px 12px; color:#fff }
.nx-dd-item:hover{ background:#1a1f33 }
.nx-dd-item.nx-danger{ color:#ffd7d7 }
.nx-main{ min-height:calc(100vh - 120px); display:grid; place-items:center; padding:24px }
.nx-footer{ height:60px; display:grid; place-items:center; color:var(--nx-dim); border-top:1px solid #222 }
.nx-card{ background:var(--nx-card); border:1px solid #22283a; border-radius:16px; padding:22px; box-shadow:0 8px 30px rgba(0,0,0,.35); width:min(720px, 92vw) }
.nx-auth{ width:min(640px, 92vw) }
.nx-field{ display:grid; gap:8px; margin-bottom:16px }
.nx-input{ width:100%; background:#0f1422; border:1px solid #26304b; border-radius:10px; padding:12px 12px; color:#fff; outline:none }
.nx-input:focus{ border-color:#3b6cff; box-shadow:0 0 0 3px rgba(59,108,255,.2) }
.nx-row{ display:flex; gap:12px; align-items:center }
.nx-actions{ display:flex; gap:12px; align-items:center; margin-top:12px }
.nx-actions.nx-right{ justify-content:flex-end }
.nx-link-inline{ margin-left:8px }
.nx-has-eye{ position:relative }
.nx-eye{ position:absolute; right:8px; top:34px; width:34px; height:34px; border-radius:8px; border:0; background:#1b2132; color:#dce3ff; cursor:pointer }
.nx-eye:hover{ filter:brightness(1.1) }
.nx-strength{ margin-top:8px; height:6px; background:#1a2133; border-radius:99px; overflow:hidden; border:1px solid #28314b }
.nx-strength i{ display:block; width:0%; height:100%; background:linear-gradient(90deg,#ff6b6b,#ffd166,#06d6a0,#06d6a0) }
.nx-hero{ text-align:center; padding:80px 0 }
.nx-hero h1{ font-size:clamp(28px, 5vw, 54px); margin:0 }
.nx-profile .nx-grid{ display:grid; grid-template-columns: 380px 1fr; gap:22px }
.nx-avatar{ width:100%; aspect-ratio:1/1; background:#2a3042; border:1px solid #2e3756; border-radius:16px }
.nx-avatar-actions { justify-content:center; margin-top:12px }
.nx-success{ margin-top:12px; color:#96f2a1 }
body.nx.nx-page-login .nx-profile, body.nx.nx-page-register .nx-profile { display:none }
body.nx.nx-page-profile .nx-auth, body.nx.nx-page-settings .nx-auth { display:none }
/* === /NX_ADDENDUM_SCOPED_V1 ============================================ */

/* === NX_ADDENDUM_SCOPED_V2 (button text, eye icons, strength label, auth no-scroll) === */
.nx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; font-weight:700; line-height:1; min-height:36px; color:#fff !important; }
.nx-link{ color:#dfe6ff; opacity:.95 }
.nx-link:hover{ opacity:1 }

/* Make the header button's text always visible */
.nx-nav .nx-btn{ white-space:nowrap }

/* Eye icons (SVG via CSS) */
:root{
  --nx-eye-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --nx-eye-closed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20C5 20 1 12 1 12a21.8 21.8 0 0 1 5.06-6.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a21.8 21.8 0 0 1-3.16 4.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.nx-eye{ position:absolute; right:8px; top:34px; width:36px; height:36px; border-radius:8px; border:1px solid #26304b; background:#1b2132; display:grid; place-items:center; }
.nx-eye::before{ content:""; width:18px; height:18px; background-image:var(--nx-eye-closed); background-repeat:no-repeat; background-position:center; background-size:contain; display:block; }
.nx-eye[data-state="visible"]::before{ background-image:var(--nx-eye-open); }

/* Strength meter with label */
.nx-strength{ display:flex; align-items:center; gap:10px; }
.nx-strength i{ flex:0 0 auto }
.nx-strength-label{ font-size:12px; color:var(--nx-dim); user-select:none }

/* Disable scroll on auth pages (desktop) */
@media (min-height: 600px){
  body.nx.nx-page-login, body.nx.nx-page-register{ overflow:hidden }
}
/* === /NX_ADDENDUM_SCOPED_V2 ============================================= */

/* === NX_ADDENDUM_SCOPED_V3 (auth card width + eye centering helpers) === */
.nx-auth{ width:min(832px, 92vw) } /* 30% wider from 640 -> 832 */
.nx-has-eye{ position:relative }
.nx-has-eye .nx-input{ padding-right:52px } /* avoid text under button */
.nx-eye{ position:absolute; right:10px; width:36px; height:36px; border-radius:8px; border:1px solid #26304b; background:#1b2132; display:grid; place-items:center; }
.nx-eye::before{ content:""; width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:contain; display:block; }
:root{
  --nx-eye-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --nx-eye-closed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20C5 20 1 12 1 12a21.8 21.8 0 0 1 5.06-6.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a21.8 21.8 0 0 1-3.16 4.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.nx-eye[data-state="visible"]::before{ background-image:var(--nx-eye-open); }
.nx-eye:not([data-state="visible"])::before{ background-image:var(--nx-eye-closed); }
/* === /NX_ADDENDUM_SCOPED_V3 ============================================ */

/* === NX_ADDENDUM_SCOPED_V4 (auth width override + hard win) ============ */
body.nx.nx-page-login .nx-card.nx-auth,
body.nx.nx-page-register .nx-card.nx-auth{
  width: min(832px, 92vw) !important; /* 30% wider than 640px */
}
/* Keep inputs clear of eye buttons */
.nx-has-eye .nx-input{ padding-right:52px }
/* === /NX_ADDENDUM_SCOPED_V4 ============================================ */

/* === NX_ADDENDUM_SCOPED_V5 (20% wider auth + full-width fields) ========= */
/* 20% wider: 640px -> 768px */
body.nx.nx-page-login .nx-card.nx-auth,
body.nx.nx-page-register .nx-card.nx-auth{
  width: min(768px, 92vw) !important;
}
/* Nuke legacy max-widths and make inputs truly span the card's content box */
body.nx .nx-card.nx-auth form{ max-width: none !important; width:100% !important; }
body.nx .nx-card.nx-auth .nx-field{ width:100% !important; }
body.nx .nx-card.nx-auth .nx-input{ width:100% !important; max-width:none !important; box-sizing:border-box !important; }
/* Keep clear space for the eye button */
body.nx .nx-card.nx-auth .nx-has-eye .nx-input{ padding-right:56px !important; }
/* Eye button styling (unchanged) stays, vertical centering handled in JS */
/* === /NX_ADDENDUM_SCOPED_V5 ============================================= */

/* === NX_ADDENDUM_SCOPED_V6 (712px cap + input fit + eye mapping) ======= */
/* 20% wider (768) reduced by 45% of the delta (128*0.55 ≈ 70) → ~710px */
body.nx.nx-page-login .nx-card.nx-auth,
body.nx.nx-page-register .nx-card.nx-auth{
  width: min(712px, 92vw) !important;
}
/* Make inputs truly span the card and leave space for the eye */
body.nx .nx-card.nx-auth form{ max-width:none !important; width:100% !important; }
body.nx .nx-card.nx-auth .nx-field{ width:100% !important; }
body.nx .nx-card.nx-auth .nx-input{ width:100% !important; max-width:none !important; box-sizing:border-box !important; }
body.nx .nx-card.nx-auth .nx-has-eye .nx-input{ padding-right:56px !important; }
/* Icon mapping: show "eye-open" when hidden, "eye-closed" (slashed) when visible */
:root{
  --nx-eye-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --nx-eye-closed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20C5 20 1 12 1 12a21.8 21.8 0 0 1 5.06-6.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a21.8 21.8 0 0 1-3.16 4.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
.nx-eye{ position:absolute; right:10px; width:36px; height:36px; border-radius:8px; border:1px solid #26304b; background:#1b2132; display:grid; place-items:center; }
.nx-eye::before{ content:""; width:18px; height:18px; background-repeat:no-repeat; background-position:center; background-size:contain; display:block; }
/* default (hidden): open eye */
.nx-eye:not([data-state="visible"])::before{ background-image:var(--nx-eye-open); }
/* visible: slashed eye */
.nx-eye[data-state="visible"]::before{ background-image:var(--nx-eye-closed); }
/* === /NX_ADDENDUM_SCOPED_V6 ============================================ */

/* === NX_ADDENDUM_SCOPED_V7 (500px cap + fit + eye top override) ======== */
/* Card width: squeeze by another ~30% from 712 → 500 */
body.nx.nx-page-login .nx-card.nx-auth,
body.nx.nx-page-register .nx-card.nx-auth{
  width: min(500px, 92vw) !important;
}
/* Inputs fill the card content area */
body.nx .nx-card.nx-auth form{ max-width:none !important; width:100% !important; }
body.nx .nx-card.nx-auth .nx-field{ width:100% !important; }
body.nx .nx-card.nx-auth .nx-input{ width:100% !important; max-width:none !important; box-sizing:border-box !important; }
/* Space for the eye button */
body.nx .nx-card.nx-auth .nx-has-eye .nx-input{ padding-right:56px !important; }
/* Kill any legacy top offsets from older blocks */
.nx-eye{ top:auto !important; } /* JS sets the precise top each render */
/* === /NX_ADDENDUM_SCOPED_V7 ============================================ */

/* === NX_ADDENDUM_SCOPED_V8 (eye inside input, no border/bg, hard center) === */
/* Card width remains 500px cap from V7 */
body.nx.nx-page-login .nx-card.nx-auth,
body.nx.nx-page-register .nx-card.nx-auth{
  width: min(500px, 92vw) !important;
}
/* Inputs: full width and room for the eye */
body.nx .nx-card.nx-auth .nx-input{ width:100% !important; max-width:none !important; box-sizing:border-box !important; }
body.nx .nx-card.nx-auth .nx-has-eye .nx-input{ padding-right:48px !important; }
/* Eye button: visually just the icon (no border/background), top set by JS */
.nx-eye{ position:absolute; right:10px; width:32px; height:32px; display:grid; place-items:center;
         border:0 !important; background:transparent !important; box-shadow:none !important; top:auto !important;
         transform:translateY(-50%) !important; } /* JS sets the top to inputCenter */
.nx-eye::before{ content:""; width:18px; height:18px; display:block; background-repeat:no-repeat; background-position:center; background-size:contain; opacity:.95 }
.nx-eye:hover::before{ opacity:1 }
/* Icon mapping */
:root{
  --nx-eye-open:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --nx-eye-closed:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.94 10.94 0 0 1 12 20C5 20 1 12 1 12a21.8 21.8 0 0 1 5.06-6.94M9.9 4.24A10.94 10.94 0 0 1 12 4c7 0 11 8 11 8a21.8 21.8 0 0 1-3.16 4.19'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
/* default (hidden): open eye */
.nx-eye:not([data-state="visible"])::before{ background-image:var(--nx-eye-open); }
/* visible: slashed eye */
.nx-eye[data-state="visible"]::before{ background-image:var(--nx-eye-closed); }
/* === /NX_ADDENDUM_SCOPED_V8 ============================================ */

/* === NX_ADDENDUM_SCOPED_PROFILE_V1 ===================================== */
/* Errors in red (Invalid credentials etc.) */
.nx-error{ color:#ff6060; background:transparent; border:0; font-weight:600 }
/* Profile layout: two-column already; align avatar actions centered under avatar */
.nx-profile .nx-grid{ grid-template-columns: 380px 1fr; gap:24px }
.nx-avatar-col{ display:flex; flex-direction:column; align-items:center }
.nx-avatar{ width:100%; aspect-ratio:1/1; background:#2a3042; border:1px solid #2e3756; border-radius:16px; position:relative; overflow:hidden; image-rendering:auto }
.nx-avatar::after{ content:attr(data-initial); position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:clamp(48px, 22vw, 128px); color:#a7b1d8; opacity:.7; }
.nx-avatar[data-has-image="1"]::after{ content:""; } /* hide initial if image present */
.nx-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.nx-avatar-actions{ display:flex; gap:12px; width:100%; max-width:380px; margin-top:12px; justify-content:space-between }
.nx-file-input{ display:none } /* hide native */
.nx-file-btn{ background:#2a2f3b; } /* styled label as button */
.nx-file-name{ color:#9aa3b2; font-size:12px; align-self:center }
/* Delete button sits aligned to the right under avatar */
.nx-avatar-actions .nx-danger{ margin-left:auto }
/* Form side */
.nx-form-col textarea.nx-input{ min-height:260px } /* bigger bio */
.nx-form-col .nx-actions{ justify-content:flex-end }
/* === /NX_ADDENDUM_SCOPED_PROFILE_V1 ==================================== */

/* === NX_ADDENDUM_SCOPED_PROFILE_V2 ===================================== */
/* Errors in red (Invalid credentials etc.) */
.nx-error{ color:#ff6060; background:transparent; border:0; font-weight:600 }
/* Make avatar column ~15% smaller: 380 -> 320 */
.nx-profile .nx-grid{ grid-template-columns: 320px 1fr; gap:24px }
.nx-avatar-col{ display:flex; flex-direction:column; align-items:center }
.nx-avatar{ width:100%; aspect-ratio:1/1; background:#2a3042; border:1px solid #2e3756; border-radius:16px;
            position:relative; overflow:hidden; image-rendering:auto;
            background-size:cover; background-position:center; background-repeat:no-repeat; }
.nx-avatar::after{ content:attr(data-initial); position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:clamp(48px, 22vw, 120px); color:#a7b1d8; opacity:.7; }
.nx-avatar[data-has-image="1"]::after{ content:""; }
.nx-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.nx-avatar-actions{ display:flex; gap:12px; width:100%; max-width:320px; margin-top:12px; align-items:center }
.nx-file-input{ display:none !important } /* hide native input */
.nx-avatar-col input[type="file"]:not(#nx-avatar-file){ display:none !important } /* hide any leftovers */
.nx-file-btn{ background:#2a2f3b; }
.nx-file-name{ color:#9aa3b2; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px }
.nx-avatar-actions .nx-danger{ margin-left:auto }
/* Bigger bio */
.nx-form-col textarea.nx-input{ min-height:300px }
/* === /NX_ADDENDUM_SCOPED_PROFILE_V2 ==================================== */

/* === NX_ADDENDUM_SCOPED_PROFILE_V3 ===================================== */
/* Error text */
.nx-error{ color:#ff6060; background:transparent; border:0; font-weight:600 }
/* Avatar column ~320px and dropped a bit */
.nx-profile .nx-grid{ grid-template-columns: 320px 1fr; gap:24px }
.nx-avatar-col{ display:flex; flex-direction:column; align-items:center }
.nx-avatar{ width:100%; aspect-ratio:1/1; margin-top:12px;
            background:#2a3042; border:1px solid #2e3756; border-radius:16px;
            position:relative; overflow:hidden; image-rendering:auto;
            background-size:cover; background-position:center; background-repeat:no-repeat; }
.nx-avatar::after{ content:attr(data-initial); position:absolute; inset:0; display:grid; place-items:center; font-weight:800; font-size:clamp(48px, 22vw, 120px); color:#a7b1d8; opacity:.7; }
.nx-avatar[data-has-image="1"]::after{ content:""; }
.nx-avatar-actions{ display:flex; gap:12px; width:100%; max-width:320px; margin-top:12px; align-items:center; justify-content:space-between }
.nx-file-name{ color:#9aa3b2; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px }
/* Hide ALL file inputs in profile and rely on the styled label */
.nx-profile input[type="file"]{ display:none !important }
/* Bigger bio */
.nx-form-col textarea.nx-input{ min-height:300px }
/* Voucher icon override (modern page) */
.nx-icon-voucher, .icon-voucher, [data-icon="voucher"]{
  --nx-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
  width:20px; height:20px; display:inline-block; background: no-repeat center/contain; background-image:var(--nx-ico);
}
/* === /NX_ADDENDUM_SCOPED_PROFILE_V3 ==================================== */

/* === NX_ADDENDUM_SCOPED_PROFILE_V4 ===================================== */
/* Ensure avatar sits a bit lower, and actions row follows */
.nx-profile .nx-avatar-col .nx-avatar{ margin-top:18px !important; }
.nx-profile .nx-avatar-actions{ margin-top:14px !important; }

/* Voucher icon override (CSS fallback) */
.nx-icon-voucher, .icon-voucher, [data-icon="voucher"]{
  display:inline-block;
  width:20px; height:20px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}
/* === /NX_ADDENDUM_SCOPED_PROFILE_V4 ==================================== */