/* DVYER API · Perfil v5
   Portal técnico / SaaS, con panel bento y credential vault. */

:root {
  --pf-bg: #060914;
  --pf-bg-soft: #0a0f1c;
  --pf-panel: #0d1422;
  --pf-panel-2: #101a2a;
  --pf-panel-3: #142033;
  --pf-elevated: #111c2d;
  --pf-line: rgba(140, 166, 201, .13);
  --pf-line-strong: rgba(140, 166, 201, .23);
  --pf-text: #f2f6ff;
  --pf-text-soft: #c5d1e3;
  --pf-muted: #8494ab;
  --pf-muted-2: #5e6f87;
  --pf-blue: #4b8dff;
  --pf-blue-strong: #2868ed;
  --pf-blue-soft: rgba(75, 141, 255, .13);
  --pf-cyan: #24d5e8;
  --pf-violet: #9875ff;
  --pf-amber: #f5ba45;
  --pf-green: #32d79b;
  --pf-red: #fb7185;
  --pf-sidebar-width: 236px;
  --pf-appbar-height: 66px;
  --pf-radius: 17px;
  --pf-radius-sm: 11px;
  --pf-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  --pf-font: "Manrope", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pf-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

body.profile-page[data-theme="light"] {
  --pf-bg: #f4f7fc;
  --pf-bg-soft: #edf2f9;
  --pf-panel: #ffffff;
  --pf-panel-2: #f7f9fd;
  --pf-panel-3: #edf3fb;
  --pf-elevated: #ffffff;
  --pf-line: rgba(23, 42, 68, .09);
  --pf-line-strong: rgba(23, 42, 68, .17);
  --pf-text: #13243a;
  --pf-text-soft: #344964;
  --pf-muted: #60738c;
  --pf-muted-2: #8795a8;
  --pf-blue-soft: rgba(37, 99, 235, .09);
  --pf-shadow: 0 18px 48px rgba(38, 61, 91, .10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--pf-appbar-height) + 30px); }
body.profile-page {
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pf-text);
  background:
    radial-gradient(circle at 88% 4%, rgba(75, 141, 255, .08), transparent 30rem),
    linear-gradient(180deg, var(--pf-bg), var(--pf-bg-soft));
  font-family: var(--pf-font);
  font-size: 14px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
code, pre, kbd { font-family: var(--pf-mono); }
h1, h2, h3, p, pre, small, code { margin: 0; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.skip-link {
  position: fixed;
  left: 14px;
  top: -90px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 9px;
  color: #fff;
  background: var(--pf-blue-strong);
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 14px; }
.scroll-progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 1000;
  width: calc(var(--progress, 0) * 100%);
  height: 2px;
  background: linear-gradient(90deg, var(--pf-blue), var(--pf-cyan), var(--pf-violet));
  box-shadow: 0 0 14px rgba(75, 141, 255, .65);
}

/* Loader */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #060914;
  transition: opacity .3s ease, visibility .3s ease;
}
body:not(.is-booting) .page-loader,
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-core { display: grid; justify-items: center; gap: 8px; color: #eff5ff; }
.loader-core strong { margin-top: 3px; font-size: 13px; letter-spacing: .15em; }
.loader-core > span:last-child { color: #71839d; font-size: 11px; }
.loader-orbit {
  position: relative;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(75, 141, 255, .25);
  border-radius: 50%;
  animation: pf-spin 1.1s linear infinite;
}
.loader-orbit::before,
.loader-orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.loader-orbit::before { inset: 8px; border: 1px solid rgba(36, 213, 232, .35); }
.loader-orbit::after { width: 7px; height: 7px; top: -3px; left: 18px; background: var(--pf-blue); box-shadow: 0 0 14px var(--pf-blue); }
.loader-orbit i { position: absolute; inset: 17px; border-radius: 50%; background: var(--pf-cyan); box-shadow: 0 0 12px rgba(36, 213, 232, .8); }
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Shared */
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.button svg { width: 16px; height: 16px; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .4; cursor: not-allowed; }
.button-primary {
  color: #fff;
  background: linear-gradient(135deg, #4b8dff 0%, #2868ed 100%);
  box-shadow: 0 12px 26px rgba(40, 104, 237, .22), inset 0 1px 0 rgba(255,255,255,.16);
}
.button-primary:hover:not(:disabled) { box-shadow: 0 16px 34px rgba(40, 104, 237, .3), inset 0 1px 0 rgba(255,255,255,.2); }
.button-secondary { color: var(--pf-text-soft); border-color: var(--pf-line-strong); background: rgba(255, 255, 255, .025); }
.button-secondary:hover:not(:disabled) { color: var(--pf-text); border-color: rgba(75, 141, 255, .42); background: var(--pf-blue-soft); }
.button-danger-soft { color: #ff9aaa; border-color: rgba(251, 113, 133, .24); background: rgba(251, 113, 133, .075); }
body[data-theme="light"] .button-danger-soft { color: #be123c; }
.button-small { min-height: 37px; padding: 0 13px; font-size: 11px; }
.button-wide { width: 100%; }
.icon-button,
.icon-copy-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--pf-line);
  color: var(--pf-muted);
  background: rgba(255, 255, 255, .025);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.icon-button { width: 39px; height: 39px; border-radius: 10px; }
.icon-copy-button { width: 39px; height: 39px; border-radius: 10px; }
.icon-button:hover,
.icon-copy-button:hover { color: var(--pf-text); border-color: rgba(75, 141, 255, .42); background: var(--pf-blue-soft); transform: translateY(-1px); }
.icon-button svg,
.icon-copy-button svg { width: 17px; height: 17px; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 3px solid rgba(75, 141, 255, .28); outline-offset: 2px; }

/* Auth */
.auth-gate {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  color: #eef5ff;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    #060914;
  background-size: 42px 42px;
}
.auth-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(6,9,20,.15), rgba(6,9,20,.78) 70%, #060914);
}
.auth-ambient { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .5; }
.auth-ambient-one { width: 430px; height: 430px; left: -160px; top: 12%; background: rgba(40, 104, 237, .26); }
.auth-ambient-two { width: 340px; height: 340px; right: -150px; bottom: 0; background: rgba(152, 117, 255, .16); }
.auth-shell { position: relative; z-index: 1; width: min(1320px, calc(100% - 52px)); min-height: 100vh; margin: 0 auto; padding: 22px 0 42px; }
.auth-topbar { min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.auth-brand,
.sidebar-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.auth-brand > span:last-child,
.brand-copy { display: grid; line-height: 1.12; }
.auth-brand strong,
.brand-copy strong { font-size: 13px; letter-spacing: .12em; }
.auth-brand small,
.brand-copy small { margin-top: 4px; color: #71839d; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.brand-symbol {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  flex: 0 0 39px;
  overflow: hidden;
  border: 1px solid rgba(75, 141, 255, .38);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(75, 141, 255, .18), rgba(36, 213, 232, .06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.18);
}
.brand-symbol img { width: 33px; height: 33px; object-fit: contain; }
.auth-topbar nav { display: flex; align-items: center; gap: 28px; }
.auth-topbar nav a { color: #8494ab; font-size: 11px; font-weight: 700; text-decoration: none; transition: color .18s ease; }
.auth-topbar nav a:hover { color: #f3f7ff; }
.auth-layout { min-height: calc(100vh - 120px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(400px, .72fr); align-items: center; gap: clamp(42px, 6vw, 92px); padding: 38px 0 24px; }
.auth-showcase { min-width: 0; }
.auth-copy { max-width: 650px; }
.auth-eyebrow,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #70a5ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.auth-eyebrow i,
.eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--pf-blue); box-shadow: 0 0 0 5px rgba(75,141,255,.1), 0 0 16px rgba(75,141,255,.6); }
.auth-copy h1 { max-width: 640px; margin-top: 20px; font-size: clamp(42px, 5.4vw, 72px); line-height: .99; letter-spacing: -.055em; }
.auth-copy h1 span { color: #69a1ff; }
.auth-copy > p { max-width: 580px; margin-top: 22px; color: #90a0b8; font-size: 15px; line-height: 1.75; }
.workspace-preview {
  width: min(650px, 100%);
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(123, 154, 197, .17);
  border-radius: 16px;
  background: rgba(9, 15, 27, .82);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.035);
  backdrop-filter: blur(14px);
  transform: perspective(900px) rotateY(2deg);
}
.preview-windowbar { height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 15px; border-bottom: 1px solid rgba(123,154,197,.13); background: rgba(255,255,255,.018); }
.preview-windowbar > span { display: flex; gap: 6px; }
.preview-windowbar > span i { width: 7px; height: 7px; border-radius: 50%; background: #34445b; }
.preview-windowbar > span i:first-child { background: #fb7185; }
.preview-windowbar > span i:nth-child(2) { background: #f5ba45; }
.preview-windowbar > span i:last-child { background: #32d79b; }
.preview-windowbar code { color: #7788a2; font-size: 9px; }
.preview-windowbar b { color: #32d79b; font-family: var(--pf-mono); font-size: 8px; letter-spacing: .12em; }
.preview-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 10px; padding: 13px; }
.preview-profile,
.preview-key,
.preview-stat,
.preview-chart { border: 1px solid rgba(123,154,197,.12); border-radius: 11px; background: rgba(255,255,255,.018); }
.preview-profile { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px; }
.preview-avatar { width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(75,141,255,.35); border-radius: 12px; background: rgba(75,141,255,.09); }
.preview-avatar img { width: 39px; height: 39px; }
.preview-profile > div { display: grid; }
.preview-profile small { color: #60738d; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.preview-profile strong { margin-top: 2px; font-size: 12px; }
.preview-profile div span { color: #67a0ff; font-size: 9px; }
.preview-profile em { padding: 5px 8px; border: 1px solid rgba(152,117,255,.24); border-radius: 7px; color: #b9a5ff; background: rgba(152,117,255,.09); font-size: 8px; font-style: normal; font-weight: 800; }
.preview-key { grid-column: 1 / -1; position: relative; padding: 12px 14px; overflow: hidden; }
.preview-key span { color: #60738d; font-size: 7px; font-weight: 800; letter-spacing: .14em; }
.preview-key code { display: block; margin-top: 5px; color: #a9bad0; font-size: 10px; }
.preview-key i { position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, var(--pf-blue), var(--pf-cyan)); opacity: .7; }
.preview-stat { padding: 12px; }
.preview-stat small { color: #60738d; font-size: 7px; text-transform: uppercase; letter-spacing: .1em; }
.preview-stat strong { display: block; margin: 3px 0 1px; font-family: var(--pf-mono); font-size: 17px; }
.preview-stat span { color: #63748d; font-size: 8px; }
.preview-chart { grid-column: 1 / -1; height: 55px; display: flex; align-items: end; gap: 7px; padding: 10px 13px; }
.preview-chart span { flex: 1; min-height: 8px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, rgba(75,141,255,.9), rgba(75,141,255,.18)); }
.preview-chart span:nth-child(1) { height: 34%; }.preview-chart span:nth-child(2) { height: 52%; }.preview-chart span:nth-child(3) { height: 44%; }.preview-chart span:nth-child(4) { height: 76%; }.preview-chart span:nth-child(5) { height: 60%; }.preview-chart span:nth-child(6) { height: 88%; }.preview-chart span:nth-child(7) { height: 70%; }
.auth-benefits { width: min(650px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.auth-benefits article { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 13px; border: 1px solid rgba(123,154,197,.11); border-radius: 11px; background: rgba(255,255,255,.016); }
.benefit-icon { width: 28px; height: 28px; display: grid; place-items: center; flex: 0 0 28px; border-radius: 8px; font-family: var(--pf-mono); font-size: 8px; font-weight: 700; }
.benefit-icon.blue { color: #7babff; background: rgba(75,141,255,.11); }.benefit-icon.cyan { color: #64e8f5; background: rgba(36,213,232,.09); }.benefit-icon.violet { color: #b7a3ff; background: rgba(152,117,255,.1); }
.auth-benefits div { min-width: 0; display: grid; }
.auth-benefits strong { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auth-benefits small { margin-top: 2px; color: #667892; font-size: 8px; line-height: 1.45; }
.auth-platform-stats { width: min(650px, 100%); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 13px; overflow: hidden; border: 1px solid rgba(123,154,197,.12); border-radius: 11px; background: rgba(255,255,255,.015); }
.auth-platform-stats div { min-height: 58px; display: grid; align-content: center; padding: 0 14px; border-right: 1px solid rgba(123,154,197,.1); }
.auth-platform-stats div:last-child { border-right: 0; }
.auth-platform-stats strong { font-family: var(--pf-mono); font-size: 14px; }
.auth-platform-stats span { margin-top: 1px; color: #65768f; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.auth-panel-wrap { position: relative; display: grid; place-items: center; }
.auth-panel-wrap::before { content: ""; position: absolute; inset: 10% -8%; border-radius: 50%; background: rgba(75,141,255,.09); filter: blur(70px); }
.auth-panel {
  position: relative;
  width: min(520px, 100%);
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid rgba(139,169,210,.18);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(17,27,45,.94), rgba(10,16,29,.96));
  box-shadow: 0 32px 90px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(18px);
}
.auth-panel::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 85% 0%, rgba(75,141,255,.1), transparent 35%); }
.auth-panel > * { position: relative; }
.auth-panel-label { color: #6fa4ff; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.auth-panel-kicker { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-secure-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid rgba(50,215,155,.18); border-radius: 999px; color: #7ee7c1; background: rgba(50,215,155,.055); font-size: 7px; font-weight: 800; letter-spacing: .04em; }
.auth-secure-badge i { width: 5px; height: 5px; border-radius: 50%; background: #32d79b; box-shadow: 0 0 8px rgba(50,215,155,.8); }
.auth-panel-head h2 { margin-top: 9px; font-size: 27px; letter-spacing: -.035em; }
.auth-panel-head p { margin-top: 5px; color: #8394ab; font-size: 11px; }
.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 22px; padding: 4px; border: 1px solid rgba(139,169,210,.13); border-radius: 11px; background: rgba(3,8,16,.38); }
.auth-tabs button { min-height: 37px; border: 0; border-radius: 8px; color: #71839b; background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; transition: color .18s ease, background .18s ease, box-shadow .18s ease; }
.auth-tabs button:hover { color: #dce7f8; }
.auth-tabs button.is-active { color: #f6f9ff; background: #17243a; box-shadow: 0 5px 16px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.035); }
.auth-feedback { min-height: 36px; display: flex; align-items: center; margin-top: 11px; padding: 0 11px; border: 1px solid rgba(139,169,210,.11); border-radius: 9px; color: #7789a2; background: rgba(3,8,16,.25); font-size: 9px; }
.auth-feedback.is-success { color: #61e5b5; border-color: rgba(50,215,155,.25); background: rgba(50,215,155,.06); }
.auth-feedback.is-error { color: #ff9aaa; border-color: rgba(251,113,133,.25); background: rgba(251,113,133,.06); }
.auth-oauth-row { margin-top: 11px; }
.firebase-provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.firebase-auth-button { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; padding: 0 12px; border: 1px solid rgba(139,169,210,.16); border-radius: 11px; color: #d7e0ed; background: rgba(255,255,255,.025); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease; }
.firebase-auth-button:hover { transform: translateY(-1px); color: #fff; border-color: rgba(75,141,255,.45); background: rgba(75,141,255,.075); }
.firebase-auth-button span { display: grid; gap: 1px; text-align: left; }
.firebase-auth-button small { color: #667892; font-size: 7px; font-weight: 600; }
.firebase-auth-button:disabled, .firebase-auth-button.is-disabled { opacity: .48; cursor: not-allowed; }
.firebase-auth-button svg, .provider-mark { width: 17px; height: 17px; flex: 0 0 17px; }
.provider-mark { display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 900; }
.google-mark { color: #4285f4; background: #fff; }
.github-auth-button { min-height: 43px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid rgba(139,169,210,.15); border-radius: 10px; color: #b9c5d7; background: rgba(255,255,255,.02); font-size: 11px; font-weight: 800; text-decoration: none; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.github-auth-button:hover { color: #fff; border-color: rgba(75,141,255,.4); background: rgba(75,141,255,.07); }
.github-auth-button svg { width: 17px; height: 17px; }
.auth-oauth-note { display: block; margin-top: 5px; color: #56677f; font-size: 8px; text-align: center; }
.auth-separator { display: flex; align-items: center; gap: 10px; margin: 15px 0 12px; color: #55667e; font-size: 7px; letter-spacing: .1em; text-transform: uppercase; }
.auth-separator::before,
.auth-separator::after { content: ""; flex: 1; height: 1px; background: rgba(139,169,210,.11); }
.auth-form { display: grid; gap: 10px; }
.auth-form label,
.profile-form label,
.policy-controls label { display: grid; gap: 6px; color: #93a3b9; font-size: 9px; font-weight: 700; }
.auth-form input,
.profile-form input,
.profile-form textarea,
.policy-controls select,
.policy-controls textarea {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid rgba(139,169,210,.16);
  border-radius: 9px;
  color: #eaf2ff;
  background: rgba(3,8,16,.36);
  outline: 0;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.auth-form input::placeholder,
.profile-form input::placeholder,
.profile-form textarea::placeholder,
.policy-controls textarea::placeholder { color: #53657e; }
.auth-form input:focus,
.profile-form input:focus,
.profile-form textarea:focus,
.policy-controls select:focus,
.policy-controls textarea:focus { border-color: rgba(75,141,255,.58); background: rgba(6,13,25,.58); box-shadow: 0 0 0 3px rgba(75,141,255,.08); }
.form-grid { display: grid; gap: 10px; }
.form-grid.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 62px; }
.password-field button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); min-width: 42px; padding: 5px 7px; border: 0; border-radius: 6px; color: #6f86a5; background: rgba(111,134,165,.08); font: inherit; font-size: 7px; font-weight: 800; cursor: pointer; }
.password-field button:hover { color: #dbe9ff; background: rgba(75,141,255,.13); }
.password-strength { display: grid; gap: 6px; margin-top: -2px; }
.password-strength div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.password-strength i { height: 3px; border-radius: 4px; background: rgba(139,169,210,.12); transition: background .2s ease, box-shadow .2s ease; }
.password-strength span { color: #60738e; font-size: 7px; }
.password-strength[data-score="1"] i:nth-child(-n+1) { background: #fb7185; }
.password-strength[data-score="2"] i:nth-child(-n+2) { background: #f5ba45; }
.password-strength[data-score="3"] i:nth-child(-n+3) { background: #60a5fa; }
.password-strength[data-score="4"] i:nth-child(-n+4) { background: #32d79b; box-shadow: 0 0 8px rgba(50,215,155,.25); }
.auth-main-action { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 47px; }
.auth-main-action b { font-size: 16px; transition: transform .18s ease; }
.auth-main-action:hover b { transform: translateX(3px); }
.auth-trust-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; color: #63758e; font-size: 7px; }
.auth-trust-row span { white-space: nowrap; }
.check-row { grid-template-columns: auto 1fr !important; align-items: center; gap: 8px !important; cursor: pointer; }
.check-row input { width: 15px; min-height: 15px; height: 15px; accent-color: var(--pf-blue); }
.auth-captcha-wrap { padding: 10px; border: 1px solid rgba(139,169,210,.13); border-radius: 9px; background: rgba(3,8,16,.25); }
.auth-captcha-wrap small { display: block; margin-top: 5px; color: #71839b; font-size: 8px; }
.auth-legal { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 13px; color: #52637b; font-size: 8px; text-align: center; }
.auth-legal i { width: 6px; height: 6px; border-radius: 50%; background: var(--pf-green); box-shadow: 0 0 9px rgba(50,215,155,.5); }

/* Shell */
.auth-locked .profile-shell { display: none; }
.profile-shell { min-height: 100vh; display: grid; grid-template-columns: var(--pf-sidebar-width) minmax(0, 1fr); }
.profile-sidebar {
  position: sticky;
  top: 0;
  z-index: 55;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--pf-line);
  background: rgba(5, 9, 17, .96);
  backdrop-filter: blur(20px);
}
body[data-theme="light"] .profile-sidebar { background: rgba(255,255,255,.95); }
.sidebar-brand { min-height: 48px; padding: 4px 7px; }
.sidebar-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 16px 7px 21px; padding: 9px 10px; border: 1px solid var(--pf-line); border-radius: 10px; background: rgba(255,255,255,.025); }
.sidebar-status > small { color: var(--pf-muted-2); font-family: var(--pf-mono); font-size: 9px; }
.status-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--pf-green); font-size: 9px; font-weight: 800; }
.status-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(50,215,155,.08), 0 0 10px rgba(50,215,155,.3); }
.status-badge[data-state="error"] { color: var(--pf-red); }
.sidebar-nav { display: grid; gap: 4px; }
.sidebar-nav + .sidebar-nav { margin-top: 22px; }
.sidebar-nav p { margin: 0 9px 7px; color: var(--pf-muted-2); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sidebar-nav a { min-height: 39px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 1px solid transparent; border-radius: 9px; color: var(--pf-muted); font-size: 10px; font-weight: 700; text-decoration: none; transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease; }
.sidebar-nav a:hover { color: var(--pf-text); background: rgba(255,255,255,.025); transform: translateX(2px); }
.sidebar-nav a[aria-current="page"] { color: #f5f8ff; border-color: rgba(75,141,255,.22); background: linear-gradient(90deg, rgba(75,141,255,.17), rgba(75,141,255,.045)); box-shadow: inset 3px 0 0 var(--pf-blue); }
body[data-theme="light"] .sidebar-nav a[aria-current="page"] { color: #1d4f9e; }
.sidebar-nav a[data-active="true"] { color: var(--pf-text-soft); background: rgba(255,255,255,.022); }
.sidebar-nav svg { width: 16px; height: 16px; flex: 0 0 16px; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 10%, transparent); }
.dot-blue { color: var(--pf-blue); background: currentColor; }.dot-cyan { color: var(--pf-cyan); background: currentColor; }.dot-violet { color: var(--pf-violet); background: currentColor; }.dot-amber { color: var(--pf-amber); background: currentColor; }.dot-green { color: var(--pf-green); background: currentColor; }
.sidebar-help-card { margin-top: auto; padding: 13px; border: 1px solid var(--pf-line); border-radius: 12px; background: linear-gradient(145deg, rgba(75,141,255,.08), rgba(152,117,255,.035)); }
.sidebar-help-card > span { color: var(--pf-text-soft); font-size: 10px; font-weight: 800; }
.sidebar-help-card p { margin-top: 3px; color: var(--pf-muted); font-size: 8px; }
.sidebar-help-card a { display: flex; justify-content: space-between; margin-top: 10px; color: #72a7ff; font-size: 9px; font-weight: 800; text-decoration: none; }
.sidebar-backdrop { display: none; }
.profile-stage { min-width: 0; }
.profile-appbar {
  position: sticky;
  top: 0;
  z-index: 45;
  height: var(--pf-appbar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(20px, 3vw, 42px);
  border-bottom: 1px solid var(--pf-line);
  background: rgba(6, 9, 20, .82);
  backdrop-filter: blur(20px);
}
body[data-theme="light"] .profile-appbar { background: rgba(244,247,252,.86); }
.appbar-left,
.appbar-actions { display: flex; align-items: center; gap: 11px; }
.appbar-title { display: grid; line-height: 1.15; }
.appbar-title span { color: var(--pf-muted-2); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.appbar-title strong { margin-top: 2px; font-size: 12px; }
.mobile-brand,
.menu-toggle { display: none; }
.appbar-test-link { min-height: 36px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(50,215,155,.16); border-radius: 9px; color: #68e4b7; background: rgba(50,215,155,.055); font-size: 9px; font-weight: 800; text-decoration: none; }
.appbar-test-link i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 9px currentColor; }
.account-button { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid rgba(251,113,133,.2); border-radius: 10px; color: #ff9aaa; background: rgba(251,113,133,.055); font-size: 9px; font-weight: 800; cursor: pointer; }
.account-button svg { width: 15px; height: 15px; }
.theme-icon-sun { display: none; }
body[data-theme="light"] .theme-icon-moon { display: none; }
body[data-theme="light"] .theme-icon-sun { display: block; }

/* Content */
.profile-content { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0 24px; }
.account-guest,
.auth-locked-note { margin-bottom: 14px; padding: 12px 15px; border: 1px solid rgba(245,186,69,.2); border-radius: 11px; color: var(--pf-amber); background: rgba(245,186,69,.055); font-size: 10px; }
.dashboard-hero {
  position: relative;
  min-height: 278px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(350px, .72fr);
  align-items: center;
  gap: 34px;
  padding: clamp(26px, 3.5vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(112,151,207,.18);
  border-radius: 21px;
  background:
    linear-gradient(120deg, rgba(15,25,43,.97), rgba(9,15,27,.92)),
    var(--pf-panel);
  box-shadow: var(--pf-shadow), inset 0 1px 0 rgba(255,255,255,.045);
}
body[data-theme="light"] .dashboard-hero { background: linear-gradient(120deg, #ffffff, #f3f7fd); }
.dashboard-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to right, black, transparent 70%); }
.dashboard-hero::after { content: ""; position: absolute; right: -60px; top: -80px; width: 390px; height: 390px; border: 1px solid rgba(75,141,255,.08); border-radius: 50%; box-shadow: 0 0 0 45px rgba(75,141,255,.025), 0 0 0 90px rgba(75,141,255,.015); }
.dashboard-hero-glow { position: absolute; width: 360px; height: 260px; left: 22%; bottom: -200px; border-radius: 50%; background: rgba(40,104,237,.28); filter: blur(80px); }
.hero-identity,
.hero-command-center { position: relative; z-index: 1; }
.hero-identity { display: flex; align-items: center; gap: 22px; min-width: 0; }
.hero-avatar-wrap { position: relative; flex: 0 0 auto; }
.avatar-frame { display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(75,141,255,.35); border-radius: 16px; background: rgba(75,141,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 35px rgba(0,0,0,.22); }
.hero-avatar { width: 98px; height: 98px; }
.hero-avatar img { width: 88px; height: 88px; object-fit: cover; border-radius: 13px; }
.avatar-online { position: absolute; right: -2px; bottom: 3px; width: 18px; height: 18px; border: 4px solid #101a2a; border-radius: 50%; background: var(--pf-green); box-shadow: 0 0 12px rgba(50,215,155,.45); }
.hero-user-copy { min-width: 0; }
.hero-user-copy h1 { margin-top: 9px; font-size: clamp(29px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.045em; }
.hero-user-copy h1 span { display: inline; }
.hero-handle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 8px; }
.hero-handle strong { color: #72a7ff; font-size: 11px; }
.hero-handle span { color: var(--pf-muted); font-size: 10px; }
.profile-auth-providers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.auth-provider-badge { min-height: 28px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 8px 4px 5px; border: 1px solid rgba(139,169,210,.14); border-radius: 999px; color: #8fa1b8; background: rgba(255,255,255,.025); font-size: 8px; }
.auth-provider-badge strong { color: #dce7f8; }
.auth-provider-badge > i { width: 14px; height: 14px; display: grid; place-items: center; margin-left: 2px; border-radius: 50%; color: #32d79b; background: rgba(50,215,155,.1); font-size: 7px; font-style: normal; }
.auth-provider-badge.legacy { color: #71839b; }
.provider-icon { width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; font-size: 9px; }
.provider-icon.google { color: #4285f4; background: #fff; }
.provider-icon.github { color: #fff; background: #111827; }
.provider-icon.github svg { width: 13px; height: 13px; }
.provider-icon.email { color: #7aa8f8; background: rgba(75,141,255,.12); }
.hero-user-copy > p { margin-top: 5px; color: var(--pf-muted-2); font-size: 9px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.hero-command-center { padding: 15px; border: 1px solid rgba(123,154,197,.16); border-radius: 15px; background: rgba(3,8,17,.43); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
body[data-theme="light"] .hero-command-center { background: rgba(245,248,253,.75); }
.command-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 11px; }
.command-head span { color: var(--pf-muted); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.command-head strong { display: inline-flex; align-items: center; gap: 6px; color: var(--pf-green); font-size: 8px; }
.command-head strong i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.command-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); overflow: hidden; border: 1px solid rgba(123,154,197,.12); border-radius: 11px; }
.command-grid article { min-height: 72px; display: grid; align-content: center; padding: 12px; border-right: 1px solid rgba(123,154,197,.1); border-bottom: 1px solid rgba(123,154,197,.1); }
.command-grid article:nth-child(2n) { border-right: 0; }
.command-grid article:nth-child(n+3) { border-bottom: 0; }
.command-grid small { color: var(--pf-muted-2); font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.command-grid strong { margin-top: 4px; overflow: hidden; color: var(--pf-text-soft); font-family: var(--pf-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-subnav { position: sticky; top: calc(var(--pf-appbar-height) + 10px); z-index: 30; display: flex; align-items: center; gap: 3px; width: fit-content; max-width: 100%; margin: 16px 0; padding: 4px; overflow-x: auto; border: 1px solid var(--pf-line); border-radius: 12px; background: color-mix(in srgb, var(--pf-panel) 90%, transparent); box-shadow: 0 10px 28px rgba(0,0,0,.1); backdrop-filter: blur(18px); scrollbar-width: none; }
.account-subnav::-webkit-scrollbar { display: none; }
.account-subnav a { min-height: 34px; display: inline-flex; align-items: center; gap: 7px; padding: 0 11px; border-radius: 8px; color: var(--pf-muted); font-size: 9px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.account-subnav a span { color: var(--pf-muted-2); font-family: var(--pf-mono); font-size: 7px; }
.account-subnav a:hover,
.account-subnav a.is-active { color: var(--pf-text); background: var(--pf-blue-soft); }
.account-subnav a.is-active span { color: var(--pf-blue); }
.panel { border: 1px solid var(--pf-line); border-radius: var(--pf-radius); background: linear-gradient(145deg, color-mix(in srgb, var(--pf-panel) 98%, transparent), color-mix(in srgb, var(--pf-panel-2) 96%, transparent)); box-shadow: inset 0 1px 0 rgba(255,255,255,.025); }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-heading.compact-heading { align-items: center; }
.panel-kicker { display: block; color: var(--pf-blue); font-size: 8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.panel-heading h2,
.credentials-heading h2,
.section-title-row h2 { margin-top: 5px; font-size: 19px; letter-spacing: -.025em; }
.panel-heading h3 { margin-top: 5px; font-size: 16px; letter-spacing: -.02em; }
.panel-heading p,
.credentials-heading p,
.section-title-row p { max-width: 620px; margin-top: 4px; color: var(--pf-muted); font-size: 9px; }
.panel-heading > a { color: #72a7ff; font-size: 9px; font-weight: 800; text-decoration: none; }
.heading-icon,
.quick-icon,
.platform-icon { display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.heading-icon { width: 37px; height: 37px; }
.heading-icon svg { width: 17px; height: 17px; }
.heading-icon.blue,.quick-icon.blue,.platform-icon.blue { color: #78aaff; background: rgba(75,141,255,.1); }.heading-icon.violet,.quick-icon.violet,.platform-icon.violet { color: #b5a1ff; background: rgba(152,117,255,.1); }.heading-icon.amber,.quick-icon.amber,.platform-icon.amber { color: #ffd170; background: rgba(245,186,69,.1); }.quick-icon.cyan,.platform-icon.cyan { color: #62e6f2; background: rgba(36,213,232,.09); }
.overview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .65fr); gap: 14px; }
.quota-panel,
.quick-actions-panel { padding: 20px; }
.quota-content { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 30px; margin-top: 25px; padding: 15px 0; }
/* === RADAR / REACTOR QUOTA RING === */
.quota-ring {
  --quota-progress: 0%;
  position: relative;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--pf-plan-accent, #3b82f6) var(--quota-progress), transparent 0);
  box-shadow: 0 0 50px color-mix(in srgb, var(--pf-plan-accent, #3b82f6) 40%, transparent);
  border: 1px solid rgba(255,255,255,0.05);
  z-index: 1;
}
.quota-ring::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #02040a 40%, #0a1122 100%);
  border: 2px solid color-mix(in srgb, var(--pf-plan-accent, #3b82f6) 30%, transparent);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.9);
  z-index: -1;
}
.quota-ring::after {
  content: "";
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--pf-plan-accent, #3b82f6) 50%, transparent);
  animation: spinRing 12s linear infinite;
  z-index: -2;
  opacity: 0.5;
}
.quota-ring > div {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.quota-ring > div::before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, color-mix(in srgb, var(--pf-plan-accent, #3b82f6) 15%, transparent) 0%, transparent 70%);
  border-radius: 50%;
  animation: pulseCore 2s ease-in-out infinite alternate;
  z-index: -1;
}
.quota-ring strong {
  font-family: var(--pf-mono);
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 20px var(--pf-plan-accent, #3b82f6), 0 0 40px var(--pf-plan-accent, #3b82f6);
  line-height: 1;
}
.quota-ring span {
  margin-top: 8px;
  color: #8fa0ba;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 800;
  text-shadow: 0 0 10px rgba(255,255,255,0.2);
}
@keyframes pulseCore { 0% { transform: scale(0.8); opacity: 0.5; } 100% { transform: scale(1.1); opacity: 1; } }
@keyframes spinRing { 100% { transform: rotate(360deg); } }
/* === HIGH-TECH STAT CARDS === */
.quota-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }
.quota-stats article {
  position: relative;
  min-height: 100px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20, 25, 40, 0.7), rgba(5, 10, 20, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.03);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.quota-stats article::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--pf-plan-accent, #3b82f6);
  box-shadow: 0 0 15px var(--pf-plan-accent, #3b82f6);
  opacity: 0.7;
  transition: opacity 0.3s, width 0.3s;
}
.quota-stats article::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, color-mix(in srgb, var(--pf-plan-accent, #3b82f6) 15%, transparent), transparent 60%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.quota-stats article:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 40px rgba(0,0,0,0.8), 0 0 20px color-mix(in srgb, var(--pf-plan-accent, #3b82f6) 20%, transparent);
}
.quota-stats article:hover::before { width: 6px; opacity: 1; }
.quota-stats article:hover::after { opacity: 1; }
.quota-stats small {
  color: #64748b;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2; position: relative;
}
.quota-stats small::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--pf-plan-accent, #3b82f6);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--pf-plan-accent, #3b82f6);
}
.quota-stats strong {
  display: block;
  margin-top: 10px;
  font-family: var(--pf-mono);
  font-size: 24px;
  font-weight: 900;
  color: #f8fafc;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8);
  letter-spacing: -0.02em;
  z-index: 2; position: relative;
}
.quota-stats span {
  display: block;
  margin-top: 6px;
  color: #94a3b8;
  font-size: 9px;
  line-height: 1.5;
  z-index: 2; position: relative;
}
.quota-stats span b { color: #e2e8f0; font-family: var(--pf-mono); font-weight: 800; }
#profile-plan-days-left { color: #6ea6ff; }
#profile-plan-expires { font-size: 12px; line-height: 1.35; }
#profile-plan-status { color: #55dca8; }
.quota-heading-actions { display: flex; align-items: center; gap: 10px; }
.quota-heading-actions a { color: #72a7ff; font-size: 9px; font-weight: 800; text-decoration: none; }
.text-action-button { min-height: 30px; padding: 0 10px; border: 1px solid var(--pf-line); border-radius: 8px; color: var(--pf-muted); background: rgba(255,255,255,.018); font: 800 8px/1 var(--pf-font); cursor: pointer; }
.text-action-button:hover { color: var(--pf-text); border-color: rgba(75,141,255,.38); background: var(--pf-blue-soft); }
.quota-details { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--pf-line); color: var(--pf-muted); font-size: 8px; }
.quota-details strong { margin-left: 5px; color: var(--pf-text-soft); font-family: var(--pf-mono); font-size: 8px; }
/* === CYBERPUNK QUICK ACTIONS === */
.quick-action-list { display: grid; gap: 15px; margin-top: 25px; }
.quick-action-list a {
  position: relative;
  min-height: 85px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 15px 25px;
  border-radius: 16px;
  color: inherit;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.8), rgba(2, 6, 23, 0.9));
  border: 1px solid rgba(255,255,255,0.05);
  text-decoration: none;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}
.quick-action-list a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, currentColor 15%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.4s;
  z-index: 0;
}
.quick-action-list a::after {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0; width: 0;
  background: currentColor;
  box-shadow: 0 0 20px currentColor;
  transition: width 0.3s;
  z-index: 1;
}
.quick-action-list a:hover {
  transform: translateX(10px);
  border-color: color-mix(in srgb, currentColor 50%, transparent);
  box-shadow: 0 15px 35px rgba(0,0,0,0.6), 0 0 30px color-mix(in srgb, currentColor 10%, transparent);
}
.quick-action-list a:hover::before { opacity: 1; }
.quick-action-list a:hover::after { width: 5px; }

.quick-icon {
  position: relative;
  z-index: 2;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 5px 15px rgba(0,0,0,0.5);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.quick-action-list a:hover .quick-icon {
  transform: scale(1.15) rotate(8deg);
  box-shadow: inset 0 0 0 1px currentColor, 0 0 25px currentColor;
  background: rgba(0,0,0,0.8);
  color: #fff;
}
.quick-icon svg { width: 24px; height: 24px; filter: drop-shadow(0 0 2px currentColor); }

.quick-action-list div { position: relative; z-index: 2; display: grid; gap: 6px; }
.quick-action-list strong { font-size: 15px; font-weight: 900; letter-spacing: 0.03em; color: #f8fafc; text-shadow: 0 2px 4px rgba(0,0,0,0.5); transition: color 0.3s; }
.quick-action-list a:hover strong { color: #fff; text-shadow: 0 0 10px currentColor; }
.quick-action-list small { color: #94a3b8; font-size: 10px; line-height: 1.4; font-weight: 500; }

.quick-action-list b {
  position: relative; z-index: 2;
  color: #475569;
  font-size: 20px;
  font-weight: 300;
  transition: all 0.4s;
  opacity: 0.5;
}
.quick-action-list a:hover b {
  transform: translateX(8px) scale(1.2);
  color: currentColor;
  opacity: 1;
  text-shadow: 0 0 15px currentColor;
}

/* Credentials */
.credentials-panel { margin-top: 14px; padding: clamp(20px, 2.5vw, 28px); overflow: hidden; }
.credentials-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.security-chip { min-height: 30px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(50,215,155,.18); border-radius: 999px; color: #65dfb2; background: rgba(50,215,155,.055); font-size: 8px; font-weight: 800; white-space: nowrap; }
.security-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.credentials-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; margin-top: 20px; }
.key-vault { overflow: hidden; border: 1px solid rgba(123,154,197,.16); border-radius: 14px; background: #050914; box-shadow: 0 18px 42px rgba(0,0,0,.2); }
.vault-topbar { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 13px; border-bottom: 1px solid rgba(123,154,197,.12); background: rgba(255,255,255,.018); }
.vault-topbar > span { display: flex; gap: 5px; }
.vault-topbar > span i { width: 6px; height: 6px; border-radius: 50%; background: #37475e; }
.vault-topbar > span i:first-child { background: #fb7185; }.vault-topbar > span i:nth-child(2) { background: #f5ba45; }.vault-topbar > span i:last-child { background: #32d79b; }
.vault-topbar code { color: #71849e; font-size: 8px; }
.vault-topbar strong { color: #5ee3b1; font-size: 8px; }
.vault-key-row { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px; }
.vault-key-copy { min-width: 0; display: grid; }
.vault-key-copy small { color: #60738d; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.vault-key-copy code { max-width: 100%; margin-top: 8px; overflow: hidden; color: #d9e5f6; font-size: clamp(11px, 1.5vw, 15px); text-overflow: ellipsis; white-space: nowrap; }
.vault-actions { display: flex; gap: 7px; }
.vault-example { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 11px 18px; border-top: 1px solid rgba(123,154,197,.1); background: rgba(255,255,255,.014); }
.vault-example span { color: #60738d; font-size: 8px; }
.vault-example code { color: #7f92aa; font-size: 8px; }
.vault-example b { color: #67a0ff; font-weight: 500; }
.credential-health { display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 12px; padding: 18px; border: 1px solid rgba(50,215,155,.13); border-radius: 14px; background: linear-gradient(145deg, rgba(50,215,155,.055), rgba(36,213,232,.025)); }
.health-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 11px; color: #65dfb2; background: rgba(50,215,155,.1); }
.health-icon svg { width: 18px; height: 18px; }
.credential-health > div { display: grid; }
.credential-health small { color: var(--pf-muted-2); font-size: 7px; text-transform: uppercase; letter-spacing: .09em; }
.credential-health strong { margin-top: 3px; font-size: 15px; }
.credential-health p { margin-top: 3px; color: var(--pf-muted); font-size: 8px; }
.health-status { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-top: 4px; color: var(--pf-green); font-family: var(--pf-mono); font-size: 8px; }
.health-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.policy-card { display: grid; grid-template-columns: minmax(260px,.65fr) minmax(320px,1fr); align-items: center; gap: 28px; margin-top: 12px; padding: 18px; border: 1px solid var(--pf-line); border-radius: 14px; background: rgba(255,255,255,.012); }
.policy-copy h3 { margin-top: 5px; font-size: 15px; }
.policy-copy p { max-width: 440px; margin-top: 5px; color: var(--pf-muted); font-size: 9px; }
.plan-requirement { display: inline-flex; margin-top: 10px; padding: 5px 7px; border: 1px solid rgba(245,186,69,.18); border-radius: 6px; color: #eac05f; background: rgba(245,186,69,.06); font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.policy-controls { display: grid; grid-template-columns: minmax(180px,.75fr) minmax(220px,1fr); gap: 10px; }
.policy-mode-control { display: grid; align-content: start; gap: 7px; }
.policy-edit-ips-button { min-height: 34px; padding: 0 11px; border: 1px solid rgba(75,141,255,.25); border-radius: 9px; color: #8fb8ff; background: rgba(75,141,255,.07); font: 700 8px/1 var(--pf-font); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.policy-edit-ips-button:hover { border-color: rgba(75,141,255,.5); background: rgba(75,141,255,.12); transform: translateY(-1px); }
.policy-edit-ips-button:focus-visible { outline: 3px solid rgba(75,141,255,.16); outline-offset: 2px; }
.api-key-ips-field small { color: var(--pf-muted-2); font-size: 7px; line-height: 1.45; }
.policy-controls select,
.policy-controls textarea,
.profile-form input,
.profile-form textarea { color: var(--pf-text); background: rgba(0,0,0,.13); border-color: var(--pf-line-strong); }
body[data-theme="light"] .policy-controls select,
body[data-theme="light"] .policy-controls textarea,
body[data-theme="light"] .profile-form input,
body[data-theme="light"] .profile-form textarea { background: #f8fafc; }
.policy-controls textarea { min-height: 70px; padding: 10px 12px; resize: vertical; }
.panel-action-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--pf-line); }
.panel-action-row > small { color: var(--pf-muted); font-size: 8px; }
.panel-action-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

/* Settings */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; align-items: start; }
.settings-panel { padding: clamp(20px, 2.5vw, 26px); }
.profile-form { display: grid; gap: 12px; margin-top: 18px; }
.profile-form label { color: var(--pf-muted); }
.profile-form input,
.profile-form textarea { min-height: 44px; padding: 0 12px; border-radius: 10px; outline: 0; }
.profile-form textarea { min-height: 94px; padding: 11px 12px; resize: vertical; }
.avatar-upload-box { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px dashed var(--pf-line-strong); border-radius: 12px; background: rgba(255,255,255,.012); }
.upload-preview { width: 52px; height: 52px; display: grid; place-items: center; flex: 0 0 52px; overflow: hidden; border: 1px solid rgba(75,141,255,.27); border-radius: 13px; background: var(--pf-blue-soft); }
.upload-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 11px; }
.file-field { position: relative; flex: 1; cursor: pointer; }
.file-field > span { display: grid; }
.file-field strong { color: var(--pf-text-soft); font-size: 10px; }
.file-field small { margin-top: 2px; color: var(--pf-muted-2); font-size: 8px; }
.file-field input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.avatar-remove-button { min-height: 34px; padding: 0 10px; border: 1px solid rgba(251,113,133,.22); border-radius: 8px; color: #fda4af; background: rgba(251,113,133,.06); font: 800 8px/1 var(--pf-font); cursor: pointer; }
.avatar-remove-button:hover { border-color: rgba(251,113,133,.48); background: rgba(251,113,133,.12); }
.field-counter { display: block; margin-top: 5px; text-align: right; color: var(--pf-muted-2); font-size: 7px; }
.field-counter b { color: var(--pf-text-soft); font-family: var(--pf-mono); }
.profile-save-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.profile-save-row > div { display: flex; gap: 8px; }
.profile-draft-status { color: var(--pf-muted); font-size: 8px; }
.profile-draft-status.is-dirty { color: #ffd170; }
.profile-draft-status.is-saving { color: #72a7ff; }
.profile-draft-status.is-saved { color: #65dfb2; }
.profile-edit-panel.is-dirty { border-color: rgba(245,186,69,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 0 0 1px rgba(245,186,69,.04); }
.security-block { margin-top: 18px; }
.security-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.security-block-head > div { position: relative; padding-left: 34px; }
.security-step { position: absolute; left: 0; top: -1px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--pf-line); border-radius: 7px; color: var(--pf-blue); background: var(--pf-blue-soft); font-family: var(--pf-mono); font-size: 7px; }
.security-block h3 { font-size: 12px; }
.security-block p { margin-top: 3px; color: var(--pf-muted); font-size: 8px; }
.security-note { margin-top: 12px !important; padding: 10px 11px; border: 1px solid var(--pf-line); border-radius: 9px; background: rgba(255,255,255,.014); }
.recovery-key-card { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding: 9px; border: 1px solid rgba(75,141,255,.22); border-radius: 10px; background: var(--pf-blue-soft); }
.recovery-key-card code { flex: 1; overflow: hidden; color: var(--pf-text-soft); font-size: 10px; text-overflow: ellipsis; }
.security-divider { height: 1px; margin: 19px 0; background: var(--pf-line); }
.password-form { margin-top: 13px; }

/* Activity */
.activity-section { margin-top: 26px; }
.section-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 13px; padding: 0 3px; }
.live-label { display: inline-flex; align-items: center; gap: 7px; color: var(--pf-green); font-size: 8px; font-weight: 800; }
.live-label i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.activity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.leaderboard-panel { min-height: 220px; padding: 20px; }
.leaderboard-panel .panel-heading small { color: var(--pf-muted-2); font-size: 8px; }
.leaderboard-list { display: grid; gap: 8px; margin-top: 15px; }
.leaderboard-item { min-height: 58px; display: grid; grid-template-columns: 28px auto 1fr auto; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--pf-line); border-radius: 10px; background: rgba(255,255,255,.012); }
.leaderboard-rank { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; color: var(--pf-muted); background: rgba(255,255,255,.025); font-family: var(--pf-mono); font-size: 8px; }
.leaderboard-avatar { width: 32px; height: 32px; overflow: hidden; border: 1px solid var(--pf-line-strong); border-radius: 9px; }
.leaderboard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.leaderboard-copy { min-width: 0; display: grid; }
.leaderboard-copy > strong { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 9px; }
.leaderboard-copy > span { margin-top: 1px; overflow: hidden; color: var(--pf-muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.pf-vip-icon { width: 14px; height: 14px; border-radius: 50%; mix-blend-mode: screen; filter: drop-shadow(0 0 2px rgba(255,255,255,0.8)); margin-right: 4px; vertical-align: middle; }
.is-ultra .pf-vip-icon, .is-pro .pf-vip-icon, .is-plus .pf-vip-icon { animation: spinAdmin 4s linear infinite; }
.is-admin .pf-vip-icon { animation: spinAdmin 2s linear infinite; }

.leaderboard-badge { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: 5px; color: #9fc0ff; background: rgba(75,141,255,.1); font-size: 8px; font-weight: bold; }
.role-ultra { color: #fbbf24; background: #1a1000; border: 1px solid #fbbf24; box-shadow: 0 0 10px rgba(245,158,11,0.5); }
.role-pro { color: #d8b4fe; background: #140026; border: 1px solid #d8b4fe; box-shadow: 0 0 10px rgba(168,85,247,0.5); }
.role-plus { color: #93c5fd; background: #001026; border: 1px solid #93c5fd; box-shadow: 0 0 10px rgba(59,130,246,0.5); }
.role-admin { color: #fca5a5; background: #1a0000; border: 1px solid #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.5); animation: pulseNeon 1s infinite alternate; }

.leaderboard-item.is-ultra { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.08); box-shadow: inset 0 0 15px rgba(245,158,11,.1); }
.leaderboard-item.is-pro { border-color: rgba(168,85,247,.5); background: rgba(168,85,247,.08); box-shadow: inset 0 0 15px rgba(168,85,247,.1); }
.leaderboard-item.is-plus { border-color: rgba(59,130,246,.5); background: rgba(59,130,246,.08); box-shadow: inset 0 0 15px rgba(59,130,246,.1); }
.leaderboard-item.is-admin { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); box-shadow: inset 0 0 15px rgba(239,68,68,.1); }

@keyframes spinAdmin { 100% { transform: rotate(360deg); } }
@keyframes pulseNeon { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5); } }
.route-item { grid-template-columns: 28px 1fr auto; }
.route-pill { overflow: hidden; color: #81adff; font-family: var(--pf-mono); text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-metric { color: var(--pf-text-soft); font-family: var(--pf-mono); font-size: 9px; }
.leaderboard-empty { min-height: 96px; display: grid; place-items: center; padding: 18px; border: 1px dashed var(--pf-line-strong); border-radius: 10px; color: var(--pf-muted-2); font-size: 8px; text-align: center; }

/* Platform and footer */
.platform-status-panel { margin-top: 14px; padding: 22px; }
.platform-metrics { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-top: 17px; }
.platform-metrics article { min-height: 92px; display: flex; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--pf-line); border-radius: 11px; background: rgba(255,255,255,.012); }
.platform-icon { width: 36px; height: 36px; }
.platform-icon svg { width: 16px; height: 16px; }
.platform-metrics article > div { min-width: 0; display: grid; }
.platform-metrics small { color: var(--pf-muted-2); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.platform-metrics strong { margin-top: 3px; font-family: var(--pf-mono); font-size: 15px; }
.platform-metrics span { margin-top: 1px; color: var(--pf-muted); font-size: 7px; }
.status-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 11px; padding: 9px 11px; border: 1px solid var(--pf-line); border-radius: 9px; color: var(--pf-muted); background: rgba(255,255,255,.01); font-size: 7px; }
.status-meta strong { margin-left: 4px; color: var(--pf-text-soft); font-family: var(--pf-mono); }
.support-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; margin-top: 14px; padding: 20px 22px; overflow: hidden; border: 1px solid rgba(75,141,255,.2); border-radius: 17px; background: linear-gradient(110deg, rgba(75,141,255,.09), rgba(36,213,232,.035), rgba(152,117,255,.06)); }
.support-icon { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(75,141,255,.18); border-radius: 13px; color: #7aaaff; background: rgba(75,141,255,.1); }
.support-icon svg { width: 21px; height: 21px; }
.support-copy h2 { margin-top: 4px; font-size: 16px; }
.support-copy p { margin-top: 3px; color: var(--pf-muted); font-size: 9px; }
.support-actions { display: flex; gap: 8px; }
.profile-footer { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; color: var(--pf-muted-2); font-size: 8px; }
.profile-footer > div { display: flex; gap: 18px; }
.profile-footer a { text-decoration: none; }
.profile-footer a:hover { color: var(--pf-text); }

/* Light adjustments */
body[data-theme="light"] .key-vault { background: #0a1020; }
body[data-theme="light"] .vault-key-copy code { color: #d9e5f6; }
body[data-theme="light"] .auth-gate { color-scheme: dark; }
body[data-theme="light"] .hero-command-center .command-grid { background: rgba(255,255,255,.45); }

/* Responsive */
@media (max-width: 1180px) {
  :root { --pf-sidebar-width: 218px; }
  .profile-content { width: min(100% - 36px, 1120px); }
  .dashboard-hero { grid-template-columns: 1fr 340px; gap: 24px; }
  .overview-grid { grid-template-columns: 1fr; }
  .quota-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quick-action-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .quick-action-list a { grid-template-columns: auto 1fr; }
  .quick-action-list a b { display: none; }
  .credentials-layout { grid-template-columns: 1fr 240px; }
}

@media (max-width: 980px) {
  .auth-shell { width: min(100% - 32px, 760px); }
  .auth-layout { grid-template-columns: 1fr; gap: 34px; padding-top: 56px; }
  .auth-showcase { text-align: center; }
  .auth-copy,
  .workspace-preview,
  .auth-benefits,
  .auth-platform-stats { margin-left: auto; margin-right: auto; }
  .auth-copy h1 { margin-left: auto; margin-right: auto; font-size: clamp(39px, 8vw, 62px); }
  .auth-copy > p { margin-left: auto; margin-right: auto; }
  .workspace-preview { transform: none; }
  .auth-panel-wrap { padding-bottom: 28px; }
  .profile-shell { grid-template-columns: 1fr; }
  .profile-sidebar { position: fixed; left: 0; top: 0; width: min(285px, 84vw); transform: translateX(-105%); transition: transform .24s ease; box-shadow: 24px 0 60px rgba(0,0,0,.32); }
  body.profile-menu-open .profile-sidebar { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 50; display: block; border: 0; opacity: 0; visibility: hidden; background: rgba(2,6,13,.66); backdrop-filter: blur(4px); transition: opacity .22s ease, visibility .22s ease; }
  body.profile-menu-open .sidebar-backdrop { opacity: 1; visibility: visible; }
  .menu-toggle,
  .mobile-brand { display: inline-flex; }
  .mobile-brand { align-items: center; gap: 8px; font-size: 10px; text-decoration: none; }
  .mobile-brand img { width: 28px; height: 28px; }
  .appbar-title { display: none; }
  .dashboard-hero { grid-template-columns: 1fr; }
  .hero-command-center { width: 100%; }
  .credentials-layout { grid-template-columns: 1fr; }
  .credential-health { grid-template-columns: auto 1fr auto; }
  .health-status { grid-column: auto; margin: 0; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --pf-appbar-height: 62px; }
  .auth-shell { width: min(100% - 24px, 580px); padding-top: 14px; }
  .auth-topbar nav { gap: 15px; }
  .auth-topbar nav a { font-size: 9px; }
  .auth-layout { padding-top: 38px; }
  .auth-copy h1 { font-size: clamp(38px, 11vw, 54px); }
  .workspace-preview { display: none; }
  .auth-benefits { grid-template-columns: 1fr; text-align: left; }
  .auth-benefits strong { font-size: 10px; }
  .auth-benefits small { font-size: 8px; }
  .auth-panel { width: 100%; }
  .profile-appbar { padding: 0 14px; }
  .appbar-test-link { display: none; }
  .profile-content { width: calc(100% - 24px); padding-top: 20px; }
  .dashboard-hero { min-height: 0; padding: 22px; }
  .hero-identity { align-items: flex-start; gap: 15px; }
  .hero-avatar { width: 72px; height: 72px; border-radius: 14px; }
  .hero-avatar img { width: 64px; height: 64px; }
  .avatar-online { width: 16px; height: 16px; }
  .hero-user-copy h1 { font-size: 29px; }
  .hero-actions .button { min-height: 40px; padding: 0 13px; }
  .account-subnav { top: calc(var(--pf-appbar-height) + 7px); width: 100%; }
  .quota-content { grid-template-columns: 1fr; justify-items: center; }
  .quota-stats { width: 100%; }
  .quick-action-list { grid-template-columns: 1fr; }
  .credentials-heading { align-items: flex-start; }
  .policy-card { grid-template-columns: 1fr; gap: 16px; }
  .policy-controls { grid-template-columns: 1fr; }
  .panel-action-row { align-items: flex-start; flex-direction: column; }
  .panel-action-row > div { width: 100%; justify-content: flex-start; }
  .activity-grid { grid-template-columns: 1fr; }
  .platform-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .support-banner { grid-template-columns: auto 1fr; }
  .support-actions { grid-column: 1 / -1; }
  .profile-footer { flex-direction: column; justify-content: center; padding: 20px 0; }
}

@media (max-width: 540px) {
  .auth-topbar nav a:nth-child(2) { display: none; }
  .auth-layout { padding-top: 26px; }
  .auth-copy h1 { font-size: 40px; }
  .auth-copy > p { font-size: 13px; }
  .auth-platform-stats div { padding: 0 9px; }
  .auth-platform-stats strong { font-size: 12px; }
  .auth-panel { padding: 20px 16px; border-radius: 16px; }
  .form-grid.two-columns { grid-template-columns: 1fr; }
  .account-button { width: 38px; padding: 0; justify-content: center; }
  .account-button span { display: none; }
  .dashboard-hero { padding: 18px; border-radius: 17px; }
  .hero-identity { display: grid; grid-template-columns: auto 1fr; }
  .hero-actions { grid-column: 1 / -1; }
  .hero-actions .button:first-child { flex: 1; }
  .hero-handle { display: grid; gap: 2px; }
  .command-grid article { min-height: 64px; padding: 10px; }
  .command-grid strong { font-size: 8px; }
  .quota-panel,
  .quick-actions-panel,
  .credentials-panel,
  .settings-panel,
  .leaderboard-panel,
  .platform-status-panel { padding: 17px; }
  .quota-stats { grid-template-columns: 1fr; }
  .quota-stats article { min-height: 70px; }
  .quota-details { align-items: flex-start; flex-direction: column; gap: 5px; }
  .credentials-heading { display: grid; }
  .security-chip { justify-self: start; }
  .vault-key-row { align-items: flex-start; flex-direction: column; }
  .vault-actions { align-self: flex-end; }
  .vault-example { align-items: flex-start; flex-direction: column; gap: 5px; }
  .credential-health { grid-template-columns: auto 1fr; }
  .health-status { grid-column: 1 / -1; }
  .panel-action-row > div { display: grid; grid-template-columns: 1fr 1fr; }
  .panel-action-row .button-danger-soft { grid-column: 1 / -1; }
  .avatar-upload-box { align-items: flex-start; flex-wrap: wrap; }
  .profile-save-row { align-items: stretch; flex-direction: column; }
  .profile-save-row > div { display: grid; grid-template-columns: 1fr 1fr; }
  .security-block-head { flex-direction: column; }
  .security-block-head .button { margin-left: 34px; }
  .section-title-row { align-items: flex-start; flex-direction: column; }
  .platform-metrics { grid-template-columns: 1fr; }
  .support-banner { grid-template-columns: 1fr; text-align: left; }
  .support-icon { display: none; }
  .support-actions { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ========================================================================== 
   DVYER Perfil v8 · Experience polish
   Capas visuales adicionales sin cambiar IDs ni contratos de app.js.
   ========================================================================== */

body.profile-page {
  --pf-plan-accent: var(--pf-blue);
  --pf-plan-accent-2: var(--pf-cyan);
  --pf-plan-soft: rgba(75, 141, 255, .13);
  --pf-plan-glow: rgba(75, 141, 255, .22);
  background:
    radial-gradient(circle at 84% -6%, color-mix(in srgb, var(--pf-plan-accent) 15%, transparent), transparent 32rem),
    radial-gradient(circle at 16% 72%, rgba(152, 117, 255, .055), transparent 30rem),
    linear-gradient(180deg, var(--pf-bg), var(--pf-bg-soft));
}
body.profile-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .25;
  background-image:
    linear-gradient(rgba(148, 163, 184, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, .025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}
body.profile-page[data-account-plan="plus"] {
  --pf-plan-accent: #37b6ff;
  --pf-plan-accent-2: #39e2d0;
  --pf-plan-soft: rgba(55, 182, 255, .13);
  --pf-plan-glow: rgba(55, 182, 255, .24);
}
body.profile-page[data-account-plan="pro"] {
  --pf-plan-accent: #9875ff;
  --pf-plan-accent-2: #4b8dff;
  --pf-plan-soft: rgba(152, 117, 255, .14);
  --pf-plan-glow: rgba(152, 117, 255, .25);
}
body.profile-page[data-account-plan="ultra"] {
  --pf-plan-accent: #f3b94f;
  --pf-plan-accent-2: #ff7b8d;
  --pf-plan-soft: rgba(243, 185, 79, .13);
  --pf-plan-glow: rgba(243, 185, 79, .24);
}
body.profile-page[data-account-plan="admin"] {
  --pf-plan-accent: #39dfac;
  --pf-plan-accent-2: #39d6d0;
  --pf-plan-soft: rgba(57, 223, 172, .13);
  --pf-plan-glow: rgba(57, 223, 172, .23);
}

.profile-sidebar {
  border-right-color: color-mix(in srgb, var(--pf-plan-accent) 13%, var(--pf-line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--pf-bg-soft) 95%, transparent), color-mix(in srgb, var(--pf-bg) 97%, transparent));
  box-shadow: 18px 0 60px rgba(0, 0, 0, .08);
}
.sidebar-brand .brand-symbol {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 34%, var(--pf-line));
  background: linear-gradient(145deg, var(--pf-plan-soft), rgba(152, 117, 255, .08));
  box-shadow: 0 10px 28px var(--pf-plan-glow);
}
.sidebar-status {
  position: relative;
  overflow: hidden;
}
.sidebar-status::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pf-plan-accent), transparent);
  opacity: .55;
}
.sidebar-nav a[aria-current="page"],
.sidebar-nav a[data-active="true"] {
  color: var(--pf-text);
  border-color: color-mix(in srgb, var(--pf-plan-accent) 28%, transparent);
  background: linear-gradient(90deg, var(--pf-plan-soft), transparent);
  box-shadow: inset 3px 0 0 var(--pf-plan-accent);
}
.sidebar-help-card {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 24%, var(--pf-line));
  background:
    radial-gradient(circle at 100% 0, var(--pf-plan-soft), transparent 55%),
    var(--pf-panel);
}

.profile-appbar {
  border-bottom-color: color-mix(in srgb, var(--pf-plan-accent) 10%, var(--pf-line));
  background: color-mix(in srgb, var(--pf-bg) 82%, transparent);
  box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
  backdrop-filter: blur(22px) saturate(1.15);
}
.appbar-test-link {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 28%, var(--pf-line));
  background: var(--pf-plan-soft);
}
.appbar-test-link i { background: var(--pf-plan-accent); box-shadow: 0 0 0 5px var(--pf-plan-soft); }

.profile-content { max-width: 1460px; }
.dashboard-hero {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--pf-plan-accent) 24%, var(--pf-line));
  background:
    radial-gradient(circle at 88% 20%, var(--pf-plan-soft), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--pf-panel) 96%, var(--pf-plan-accent) 4%), var(--pf-panel-2));
  box-shadow: 0 30px 90px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.045);
}
.dashboard-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.025) 40% 40.5%, transparent 40.5% 100%),
    linear-gradient(90deg, var(--pf-plan-accent), var(--pf-plan-accent-2));
  background-size: auto, 100% 3px;
  background-repeat: no-repeat;
  background-position: center, left top;
}
.dashboard-hero-glow {
  background: radial-gradient(circle, var(--pf-plan-glow), transparent 68%);
  filter: blur(8px);
}
.hero-avatar {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 45%, var(--pf-line));
  box-shadow: 0 0 0 6px var(--pf-plan-soft), 0 22px 48px rgba(0,0,0,.28);
}
.avatar-online { background: var(--pf-green); box-shadow: 0 0 0 4px var(--pf-panel), 0 0 18px rgba(50,215,155,.6); }
.hero-user-copy .eyebrow i { background: var(--pf-plan-accent); box-shadow: 0 0 0 5px var(--pf-plan-soft); }
.hero-user-copy h1 span {
  background: linear-gradient(90deg, var(--pf-plan-accent), var(--pf-plan-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-command-center {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 20%, var(--pf-line));
  background: color-mix(in srgb, var(--pf-panel-2) 84%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.command-grid article {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.command-grid article::after {
  content: "";
  position: absolute;
  inset: auto -18px -24px auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--pf-plan-soft);
  filter: blur(2px);
}
.command-grid article:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--pf-plan-accent) 28%, var(--pf-line)); }

.account-subnav {
  width: 100%;
  justify-content: center;
  border-color: color-mix(in srgb, var(--pf-plan-accent) 16%, var(--pf-line));
  background: color-mix(in srgb, var(--pf-panel) 88%, transparent);
  box-shadow: 0 14px 42px rgba(0,0,0,.12);
}
.account-subnav a { flex: 1 0 auto; justify-content: center; }
.account-subnav a:hover,
.account-subnav a.is-active {
  background: linear-gradient(135deg, var(--pf-plan-soft), rgba(255,255,255,.025));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf-plan-accent) 18%, transparent);
}
.account-subnav a.is-active span { color: var(--pf-plan-accent); }

.workspace-health-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 18px;
}
.workspace-health-card {
  min-width: 0;
  min-height: 96px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--pf-line);
  border-radius: 15px;
  color: var(--pf-text);
  background:
    linear-gradient(145deg, rgba(255,255,255,.025), transparent),
    var(--pf-panel);
  box-shadow: 0 14px 36px rgba(0,0,0,.10);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.workspace-health-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--pf-plan-accent) 34%, var(--pf-line));
  box-shadow: 0 20px 45px rgba(0,0,0,.16);
}
.workspace-health-card > div { min-width: 0; display: grid; gap: 2px; }
.workspace-health-card small {
  color: var(--pf-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.workspace-health-card strong {
  overflow: hidden;
  color: var(--pf-text);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-health-card div > span { color: var(--pf-muted); font-size: 10px; }
.workspace-health-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  background: var(--pf-panel-2);
}
.workspace-health-icon svg { width: 18px; height: 18px; }
.workspace-health-card.is-plan .workspace-health-icon { color: var(--pf-plan-accent); background: var(--pf-plan-soft); border-color: color-mix(in srgb, var(--pf-plan-accent) 22%, var(--pf-line)); }
.workspace-health-card.is-quota .workspace-health-icon { color: var(--pf-cyan); background: rgba(36,213,232,.10); }
.workspace-health-card.is-security .workspace-health-icon { color: var(--pf-green); background: rgba(50,215,155,.10); }
.workspace-health-card.is-action {
  position: relative;
  border-color: color-mix(in srgb, var(--pf-plan-accent) 28%, var(--pf-line));
  background:
    radial-gradient(circle at 100% 0, var(--pf-plan-soft), transparent 64%),
    var(--pf-panel);
}
.workspace-health-card.is-action b { margin-left: auto; color: var(--pf-plan-accent); font-size: 18px; }

.panel {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 8%, var(--pf-line));
  box-shadow: 0 18px 55px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.025);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.panel:hover {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 18%, var(--pf-line));
  box-shadow: 0 24px 65px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.035);
}
.panel-kicker { color: var(--pf-plan-accent); }
.text-action-button { color: var(--pf-plan-accent); }
.quota-ring {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pf-plan-accent) 16%, transparent), 0 22px 48px rgba(0,0,0,.18);
}
.quota-ring::before { background: conic-gradient(var(--pf-plan-accent) var(--quota-progress), rgba(132,148,171,.13) 0); }
.quota-ring[data-level="warning"]::before { background: conic-gradient(var(--pf-amber) var(--quota-progress), rgba(132,148,171,.13) 0); }
.quota-ring[data-level="critical"]::before { background: conic-gradient(var(--pf-red) var(--quota-progress), rgba(132,148,171,.13) 0); }
.quota-ring[data-level="warning"] strong { color: var(--pf-amber); }
.quota-ring[data-level="critical"] strong { color: var(--pf-red); }
.quota-stats article {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 8%, var(--pf-line));
  background: linear-gradient(145deg, color-mix(in srgb, var(--pf-panel-2) 96%, var(--pf-plan-accent) 4%), var(--pf-panel-2));
}
.quota-stats article:hover { border-color: color-mix(in srgb, var(--pf-plan-accent) 24%, var(--pf-line)); }
.quick-action-list a:hover { border-color: color-mix(in srgb, var(--pf-plan-accent) 30%, var(--pf-line)); background: var(--pf-plan-soft); }

.credentials-panel {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 22%, var(--pf-line));
  background:
    radial-gradient(circle at 92% 6%, var(--pf-plan-soft), transparent 28rem),
    var(--pf-panel);
}
.security-chip,
.health-status { color: var(--pf-green); border-color: rgba(50,215,155,.22); background: rgba(50,215,155,.08); }
.key-vault {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 28%, var(--pf-line));
  box-shadow: 0 22px 55px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.035);
}
.vault-topbar strong { color: var(--pf-plan-accent); background: var(--pf-plan-soft); }
.vault-key-copy code { color: color-mix(in srgb, var(--pf-plan-accent) 78%, var(--pf-text)); }
.policy-card { border-color: color-mix(in srgb, var(--pf-plan-accent) 15%, var(--pf-line)); }
.plan-requirement { color: var(--pf-plan-accent); background: var(--pf-plan-soft); border-color: color-mix(in srgb, var(--pf-plan-accent) 24%, var(--pf-line)); }

.settings-panel { min-height: 100%; }
.avatar-upload-box {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 16%, var(--pf-line));
  background: linear-gradient(135deg, var(--pf-panel-2), color-mix(in srgb, var(--pf-panel-2) 92%, var(--pf-plan-accent) 8%));
}
.profile-form input:focus,
.profile-form textarea:focus,
.policy-controls select:focus,
.policy-controls textarea:focus {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 65%, transparent);
  box-shadow: 0 0 0 4px var(--pf-plan-soft);
}
.security-step { color: var(--pf-plan-accent); border-color: color-mix(in srgb, var(--pf-plan-accent) 25%, var(--pf-line)); background: var(--pf-plan-soft); }
.activity-section { position: relative; }
.leaderboard-panel { overflow: hidden; }
.platform-status-panel {
  background:
    radial-gradient(circle at 90% 0, var(--pf-plan-soft), transparent 30rem),
    var(--pf-panel);
}
.support-banner {
  border-color: color-mix(in srgb, var(--pf-plan-accent) 28%, var(--pf-line));
  background:
    radial-gradient(circle at 100% 0, var(--pf-plan-soft), transparent 24rem),
    linear-gradient(135deg, var(--pf-panel), var(--pf-panel-2));
  box-shadow: 0 20px 60px rgba(0,0,0,.14);
}
.support-icon { color: var(--pf-plan-accent); background: var(--pf-plan-soft); border-color: color-mix(in srgb, var(--pf-plan-accent) 24%, var(--pf-line)); }

body.profile-page[data-theme="light"] .workspace-health-card,
body.profile-page[data-theme="light"] .dashboard-hero,
body.profile-page[data-theme="light"] .panel {
  box-shadow: 0 18px 50px rgba(36, 62, 96, .09), inset 0 1px 0 rgba(255,255,255,.7);
}
body.profile-page[data-theme="light"]::before { opacity: .14; }

@media (max-width: 1180px) {
  .workspace-health-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .dashboard-hero { padding: 22px 18px; }
  .workspace-health-strip { gap: 8px; }
  .workspace-health-card { min-height: 88px; padding: 13px; }
  .account-subnav { justify-content: flex-start; }
  .account-subnav a { flex: 0 0 auto; }
}
@media (max-width: 520px) {
  .workspace-health-strip { grid-template-columns: 1fr; }
  .workspace-health-card { min-height: 82px; }
  .hero-command-center { border-radius: 14px; }
  .command-grid { grid-template-columns: 1fr 1fr; }
  .quota-ring { width: 142px; height: 142px; }
}


/* === FUTURISTIC PANELS === */
.quota-panel, .quick-actions-panel {
  position: relative;
  background: #020617 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 40px rgba(255,255,255,0.02) !important;
  border-radius: 20px !important;
  overflow: hidden;
}
.quota-panel::before, .quick-actions-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
}
.quota-panel { border-top: 1px solid color-mix(in srgb, var(--pf-plan-accent, #3b82f6) 50%, transparent) !important; }
.quick-actions-panel { border-top: 1px solid rgba(56, 189, 248, 0.5) !important; }
.developer-center { margin-top: 28px; overflow: hidden; }
.developer-center-grid { display: grid; grid-template-columns: 1.35fr 1fr .8fr; gap: 16px; }
.developer-tool-card { min-width: 0; border: 1px solid var(--profile-border, rgba(148,163,184,.16)); border-radius: 20px; padding: 20px; background: linear-gradient(145deg, rgba(14,24,40,.88), rgba(8,15,27,.72)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.developer-tool-card > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.developer-tool-card > header span, .developer-tool-card > span + div > span { color:#a7f3d0; font-size:.74rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.developer-tool-card header small { display:block; margin-top:4px; color:#8290a6; }
.code-tabs { display:flex; padding:3px; gap:3px; border:1px solid rgba(148,163,184,.16); border-radius:10px; }
.code-tabs button { border:0; border-radius:7px; padding:6px 9px; background:transparent; color:#94a3b8; cursor:pointer; font-weight:700; }
.code-tabs button.is-active { background:#10b981; color:#03130d; }
.quickstart-card pre { min-height:190px; overflow:auto; margin:0 0 14px; padding:18px; border-radius:14px; background:#030914; border:1px solid rgba(56,189,248,.15); color:#d6f7ea; font:500 .78rem/1.7 "JetBrains Mono",monospace; white-space:pre-wrap; }
.favorite-card header strong { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#fbbf24; background:rgba(251,191,36,.1); }
.profile-favorite-list { display:grid; gap:8px; min-height:190px; align-content:start; }
.profile-favorite-list a { display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:11px; color:#dbeafe; background:rgba(148,163,184,.07); text-decoration:none; }
.profile-favorite-list a:hover { background:rgba(16,185,129,.12); transform:translateX(2px); }
.profile-favorite-list a span { color:#6ee7b7; font-size:.78rem; }
.favorite-empty { display:grid; place-items:center; align-content:center; min-height:180px; text-align:center; color:#8290a6; }
.favorite-empty span { color:#fbbf24; font-size:2rem; }
.favorite-empty p { max-width:240px; line-height:1.55; }
.favorite-card > a { color:#6ee7b7; font-weight:700; text-decoration:none; }
.report-card { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px; }
.report-card .report-icon { display:grid; place-items:center; width:58px; height:58px; border-radius:18px; background:linear-gradient(135deg,#059669,#22c55e); color:#fff; font-weight:900; box-shadow:0 12px 30px rgba(16,185,129,.2); }
.report-card h3 { margin:6px 0; color:#f8fafc; }
.report-card p { margin:0; color:#94a3b8; line-height:1.55; }
[data-theme="light"] .developer-tool-card { background:#fff; border-color:#dbe4ee; }
[data-theme="light"] .quickstart-card pre { background:#0a1220; }
[data-theme="light"] .report-card h3 { color:#102033; }
@media (max-width:1100px) { .developer-center-grid { grid-template-columns:1fr 1fr; } .report-card { grid-column:1/-1; } }
@media (max-width:700px) { .developer-center-grid { grid-template-columns:1fr; } .report-card { grid-column:auto; } .developer-tool-card { padding:16px; } }
.invoices-section{margin-top:28px}.invoice-secure-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(52,211,153,.2);border-radius:999px;color:#6ee7b7;background:rgba(16,185,129,.08);font-size:.76rem;font-weight:800}.invoice-secure-badge i{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 12px #34d399}.invoice-empty-state{display:flex;align-items:center;gap:16px;min-height:150px;padding:24px;border:1px dashed rgba(148,163,184,.2);border-radius:18px;background:rgba(148,163,184,.035)}.invoice-empty-state[hidden]{display:none}.invoice-empty-state strong{color:#eef6f3}.invoice-empty-state p{margin:5px 0;color:#8d9aae}.invoice-empty-state a{color:#6ee7b7;text-decoration:none;font-weight:700}.invoice-loader{width:34px;height:34px;border:3px solid rgba(16,185,129,.18);border-top-color:#34d399;border-radius:50%;animation:invoice-spin .8s linear infinite}.invoice-empty-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;background:rgba(148,163,184,.08);color:#94a3b8;font-size:1.5rem}@keyframes invoice-spin{to{transform:rotate(360deg)}}.profile-invoice-list{display:grid;gap:14px}.profile-invoice-list[hidden]{display:none}.profile-invoice-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:20px;border:1px solid rgba(148,163,184,.16);border-radius:20px;background:linear-gradient(145deg,rgba(14,24,40,.9),rgba(8,15,27,.72))}.invoice-document-icon{position:relative;display:grid;place-items:center;width:58px;height:70px;border-radius:10px 16px 10px 10px;background:linear-gradient(145deg,#ef4444,#b91c1c);box-shadow:0 12px 28px rgba(239,68,68,.18)}.invoice-document-icon span{color:#fff;font-size:.74rem;font-weight:900}.invoice-document-icon i{position:absolute;right:0;top:0;border-top:13px solid rgba(255,255,255,.8);border-left:13px solid transparent}.invoice-title-row{display:flex;justify-content:space-between;gap:12px}.invoice-title-row small{color:#7f8da1;font:600 .68rem JetBrains Mono,monospace}.invoice-title-row h3{margin:5px 0 14px;color:#f3faf7}.invoice-status{height:max-content;padding:5px 9px;border-radius:999px;font-size:.68rem;font-weight:900;text-transform:uppercase}.invoice-status.is-paid{color:#6ee7b7;background:rgba(16,185,129,.12)}.invoice-status.is-expired{color:#fca5a5;background:rgba(239,68,68,.12)}.invoice-meta{display:grid;grid-template-columns:repeat(4,minmax(90px,1fr));gap:12px}.invoice-meta span{display:grid;gap:3px}.invoice-meta small{color:#7f8da1;font-size:.7rem}.invoice-meta strong{color:#dbe8e3;font-size:.85rem}.invoice-actions{display:grid;gap:8px;min-width:110px}.invoice-actions a{text-align:center;text-decoration:none}[data-theme="light"] .profile-invoice-card{background:#fff;border-color:#dbe4ee}[data-theme="light"] .invoice-title-row h3,[data-theme="light"] .invoice-empty-state strong{color:#102033}[data-theme="light"] .invoice-meta strong{color:#334155}@media(max-width:850px){.profile-invoice-card{grid-template-columns:auto 1fr}.invoice-actions{grid-column:1/-1;grid-template-columns:1fr 1fr}.invoice-meta{grid-template-columns:1fr 1fr}}@media(max-width:560px){.profile-invoice-card{grid-template-columns:1fr}.invoice-document-icon{width:48px;height:58px}.invoice-meta{grid-template-columns:1fr 1fr}.invoice-actions{grid-column:auto}.invoice-title-row{align-items:flex-start}}