/* =========================================================
FINORA PROFILE
========================================================= */

:root {

--bg-dark: #0B0A0F;
--bg-dark-2: #121116;
--bg-dark-3: #18141A;

--bg-pink: #190912;
--bg-pink-2: #230A17;
--bg-pink-3: #2D0B1D;

--card: #171218;
--card-light: #211820;

--pink: #D100FF;
--pink-light: #E044FF;
--pink-soft: #B500E6;
--pink-deep: #9400BF;
--pink-glow: #F06AFF;

--gold: #C99A22;
--gold-deep: #A9790F;
--gold-light: #D9AE3A;
--gold-rich: #E0B94A;

--cream: #F1DFB0;
--cream-light: #F6E9C9;

--white: #FFFFFF;
--text: #FFFFFF;
--muted: #A9A5AD;
--dark-text: #0B0A0F;

--border: rgba(209, 0, 255, 0.20);
--border-strong: rgba(209, 0, 255, 0.32);
--gold-border: rgba(201, 154, 34, 0.28);

--shadow:
    0 18px 45px rgba(0, 0, 0, 0.55);

--radius-lg: 24px;
--radius-md: 18px;
--radius-sm: 14px;

--container: 1180px;

}

/* =========================================================
RESET
========================================================= */

* {
  box-sizing: border-box;
  }

html {
min-height: 100%;
scroll-behavior: smooth;
}

body {

margin: 0;

min-height: 100vh;

background:
    radial-gradient(
        circle at top right,
        rgba(209, 0, 255, 0.055),
        transparent 30%
    ),
    radial-gradient(
        circle at top left,
        rgba(201, 154, 34, 0.025),
        transparent 25%
    ),
    var(--bg-dark);

color: var(--text);

font-family:
    Arial,
    Helvetica,
    sans-serif;

-webkit-font-smoothing: antialiased;

}

button,
a {
-webkit-tap-highlight-color: transparent;
}

button {
font: inherit;
}

a {
color: inherit;
text-decoration: none;
}

/* =========================================================
PAGE
========================================================= */

.profile-page {

min-height: 100vh;

padding-bottom: 105px;

}

.profile-container {

width:
    min(
        calc(100% - 30px),
        var(--container)
    );

margin:
    0 auto;

}

/* =========================================================
HEADER
========================================================= */

.profile-header {

position: relative;

z-index: 20;

border-bottom:
    1px solid
    rgba(209, 0, 255, 0.12);

background:
    rgba(11, 10, 15, 0.92);

backdrop-filter:
    blur(18px);

-webkit-backdrop-filter:
    blur(18px);

}

.profile-top-header {

min-height: 82px;

display: grid;

grid-template-columns:
    48px
    1fr
    48px;

align-items: center;

gap: 20px;

position: relative;

}

.finora-brand {

justify-self: center;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 3px;

}

.finora-name {

font-family:
    "Times New Roman",
    Times,
    serif;

font-size: 31px;

line-height: 1;

font-weight: 700;

letter-spacing: -1.4px;

}

.fin-fin {
color: var(--white);
}

.fin-ora {
color: var(--gold-light);
}

.finora-tagline {

color: var(--pink);

font-size: 9px;

font-weight: 700;

letter-spacing: 3px;

margin-left: 2px;

white-space: nowrap;

}

/* =========================================================
BACK BUTTON
========================================================= */

.profile-back-button {

width: 44px;

height: 44px;

padding: 0;

justify-self: start;

display: flex;

align-items: center;

justify-content: center;

border:
    1px solid
    rgba(209, 0, 255, 0.28);

border-radius: 14px;

background:
    rgba(7, 6, 9, 0.72);

color:
    rgba(255, 255, 255, 0.86);

cursor: pointer;

transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;

}

.profile-back-button svg {

width: 21px;

height: 21px;

display: block;

}

.profile-back-button:hover {

transform:
    translateY(-1px);

background:
    rgba(209, 0, 255, 0.08);

border-color:
    rgba(209, 0, 255, 0.46);

color:
    var(--pink);

}

.header-spacer {

width: 48px;

height: 48px;

}

/* =========================================================
MAIN
========================================================= */

.profile-main {

padding-top: 44px;

}

.profile-intro {

margin-bottom: 28px;

}

.profile-kicker {

color: var(--pink);

font-size: 10px;

font-weight: 800;

letter-spacing: 2.5px;

margin-bottom: 9px;

}

.profile-intro h1 {

margin: 0;

font-size:
    clamp(
        29px,
        5vw,
        44px
    );

line-height: 1.08;

letter-spacing: -1px;

}

.profile-intro h1 span {

color: var(--gold-light);

}

.profile-intro p {

margin:
    10px 0 0;

max-width: 580px;

color: var(--muted);

font-size: 13px;

line-height: 1.6;

}

/* =========================================================
PROFILE IDENTITY
========================================================= */

.profile-identity-card {

display: flex;

align-items: center;

gap: 20px;

padding: 25px;

border:
    1px solid
    var(--border);

border-radius:
    var(--radius-lg);

background:
    linear-gradient(
        135deg,
        rgba(33, 24, 32, 0.96),
        rgba(23, 18, 24, 0.96)
    );

box-shadow:
    var(--shadow);

}

.profile-avatar {

width: 78px;

height: 78px;

flex: 0 0 78px;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

background:
    linear-gradient(
        145deg,
        rgba(209, 0, 255, 0.25),
        rgba(201, 154, 34, 0.16)
    );

border:
    1px solid
    rgba(209, 0, 255, 0.34);

color: var(--cream-light);

font-family:
    "Times New Roman",
    Times,
    serif;

font-size: 29px;

font-weight: 700;

box-shadow:
    inset 0 0 25px
    rgba(209, 0, 255, 0.07);

}

.profile-identity-content {

min-width: 0;

}

.profile-identity-content h2 {

margin: 0;

color: var(--white);

font-size: 22px;

line-height: 1.25;

overflow-wrap: anywhere;

}

.profile-identity-content p {

margin:
    5px 0 0;

color: var(--muted);

font-size: 12px;

overflow-wrap: anywhere;

}

.profile-meta {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 10px;

margin-top: 13px;

}

.status-badge {

display: inline-flex;

align-items: center;

gap: 6px;

min-height: 26px;

padding:
    5px 10px;

border-radius: 999px;

font-size: 9px;

font-weight: 800;

letter-spacing: 1px;

}

.status-badge.inactive {

color: var(--muted);

background:
    rgba(169, 165, 173, 0.08);

border:
    1px solid
    rgba(169, 165, 173, 0.18);

}

.status-badge.active {

color: var(--gold-light);

background:
    rgba(201, 154, 34, 0.09);

border:
    1px solid
    var(--gold-border);

}

.status-dot {

width: 6px;

height: 6px;

border-radius: 50%;

background: currentColor;

}

.joined-date {

color: var(--muted);

font-size: 10px;

}

.joined-date strong {

color: var(--cream);

font-weight: 700;

}

/* =========================================================
SECTIONS
========================================================= */

.profile-section {

margin-top: 30px;

}

.section-heading {

display: flex;

align-items: flex-end;

justify-content: space-between;

gap: 15px;

margin-bottom: 13px;

}

.section-kicker {

color: var(--pink);

font-size: 9px;

font-weight: 800;

letter-spacing: 2px;

margin-bottom: 5px;

}

.section-heading h2 {

margin: 0;

color: var(--white);

font-size: 20px;

line-height: 1.2;

}

/* =========================================================
ACCOUNT INFORMATION
========================================================= */

.information-card {

overflow: hidden;

border:
    1px solid
    var(--border);

border-radius:
    var(--radius-md);

background:
    rgba(23, 18, 24, 0.92);

box-shadow:
    0 14px 35px
    rgba(0, 0, 0, 0.34);

}

.information-row {

min-height: 72px;

padding:
    13px 16px;

display: flex;

align-items: center;

gap: 13px;

}

.information-row + .information-row {

border-top:
    1px solid
    rgba(255, 255, 255, 0.055);

}

.information-icon {

width: 40px;

height: 40px;

flex: 0 0 40px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 12px;

background:
    rgba(209, 0, 255, 0.07);

border:
    1px solid
    rgba(209, 0, 255, 0.14);

color: var(--pink);

}

.information-icon svg {

width: 19px;

height: 19px;

}

.information-content {

min-width: 0;

flex: 1;

}

.information-content > span {

display: block;

color: var(--muted);

font-size: 10px;

margin-bottom: 4px;

}

.information-content > strong {

display: block;

color: var(--cream-light);

font-size: 13px;

font-weight: 700;

overflow-wrap: anywhere;

}

.referral-value {

display: flex;

align-items: center;

flex-wrap: wrap;

gap: 9px;

}

.referral-value strong {

color: var(--gold-light);

font-family:
    "Courier New",
    monospace;

letter-spacing: .5px;

}

.copy-button {

min-height: 27px;

padding:
    5px 9px;

border-radius: 8px;

border:
    1px solid
    rgba(209, 0, 255, 0.30);

background:
    rgba(209, 0, 255, 0.08);

color: var(--pink);

font-size: 8px;

font-weight: 800;

letter-spacing: 1px;

cursor: pointer;

transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;

}

.copy-button:hover {

background:
    rgba(209, 0, 255, 0.15);

border-color:
    rgba(209, 0, 255, 0.46);

}

.copy-button.copied {

color: var(--gold-light);

border-color:
    var(--gold-border);

background:
    rgba(201, 154, 34, 0.08);

}

/* =========================================================
SECURITY
========================================================= */

.security-card {

display: flex;

align-items: flex-start;

gap: 15px;

padding: 20px;

border:
    1px solid
    rgba(201, 154, 34, 0.18);

border-radius:
    var(--radius-md);

background:
    linear-gradient(
        135deg,
        rgba(201, 154, 34, 0.055),
        rgba(23, 18, 24, 0.96)
    );

}

.security-icon {

width: 44px;

height: 44px;

flex: 0 0 44px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 13px;

color: var(--gold-light);

background:
    rgba(201, 154, 34, 0.08);

border:
    1px solid
    rgba(201, 154, 34, 0.18);

}

.security-icon svg {

width: 21px;

height: 21px;

}

.security-content {

min-width: 0;

}

.security-content h3 {

margin: 1px 0 6px;

color: var(--cream-light);

font-size: 14px;

}

.security-content p {

margin:
    0 0 7px;

color: var(--muted);

font-size: 11px;

line-height: 1.65;

}

.security-content p:last-child {

margin-bottom: 0;

color:
    rgba(241, 223, 176, 0.72);

}

/* =========================================================
SETTINGS
========================================================= */

.settings-card {

overflow: hidden;

border:
    1px solid
    var(--border);

border-radius:
    var(--radius-md);

background:
    rgba(23, 18, 24, 0.92);

}

.setting-item {

width: 100%;

min-height: 74px;

padding:
    12px 16px;

border: 0;

background: transparent;

color: var(--white);

display: flex;

align-items: center;

justify-content: space-between;

gap: 15px;

text-align: left;

cursor: pointer;

transition:
    background .2s ease;

}

.setting-item:hover {

background:
    rgba(209, 0, 255, 0.055);

}

.setting-left {

display: flex;

align-items: center;

gap: 13px;

min-width: 0;

}

.setting-icon {

width: 40px;

height: 40px;

flex: 0 0 40px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 12px;

color: var(--pink);

background:
    rgba(209, 0, 255, 0.07);

border:
    1px solid
    rgba(209, 0, 255, 0.14);

}

.setting-icon svg {

width: 19px;

height: 19px;

}

.setting-left strong {

display: block;

color: var(--cream-light);

font-size: 13px;

margin-bottom: 4px;

}

.setting-left span {

display: block;

color: var(--muted);

font-size: 10px;

}

.setting-arrow {

width: 19px;

height: 19px;

flex: 0 0 19px;

color:
    rgba(255, 255, 255, 0.42);

}

/* =========================================================
LOGOUT
========================================================= */

.logout-section {

margin-top: 30px;

display: flex;

justify-content: center;

}

.logout-button {

width: 100%;

max-width: 430px;

min-height: 52px;

padding:
    12px 20px;

border-radius: 15px;

border:
    1px solid
    rgba(209, 0, 255, 0.28);

background:
    rgba(209, 0, 255, 0.045);

color:
    rgba(255, 255, 255, 0.84);

display: flex;

align-items: center;

justify-content: center;

gap: 9px;

font-size: 12px;

font-weight: 800;

cursor: pointer;

transition:
    transform .2s ease,
    background .2s ease,
    border-color .2s ease;

}

.logout-button svg {

width: 19px;

height: 19px;

color: var(--pink);

}

.logout-button:hover {

transform:
    translateY(-1px);

background:
    rgba(209, 0, 255, 0.09);

border-color:
    rgba(209, 0, 255, 0.42);

}

.logout-button:disabled {

opacity: .6;

cursor: wait;

transform: none;

}

/* =========================================================
BOTTOM NAVIGATION
========================================================= */

.bottom-navigation {

position: fixed;

z-index: 100;

left: 50%;

bottom: 14px;

transform: translateX(-50%);

width:
    min(
        calc(100% - 22px),
        650px
    );

min-height: 70px;

padding:
    8px 10px;

display: grid;

grid-template-columns:
    repeat(5, 1fr);

gap: 5px;

background:
    rgba(13, 5, 10, 0.96);

border:
    1px solid
    rgba(209, 0, 255, 0.28);

border-radius: 22px;

box-shadow:
    0 18px 45px
    rgba(0, 0, 0, 0.65);

backdrop-filter:
    blur(18px);

-webkit-backdrop-filter:
    blur(18px);

}

.bottom-nav-item {

min-width: 0;

padding:
    8px 4px;

border-radius: 15px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

gap: 5px;

color:
    rgba(255, 255, 255, 0.58);

transition:
    background .2s ease,
    color .2s ease,
    transform .2s ease;

}

.bottom-nav-item svg {

width: 25px;

height: 25px;

color: currentColor;

}

.bottom-nav-item span {

font-size: 10px;

font-weight: 700;

white-space: nowrap;

}

.bottom-nav-item.active {

background:
    rgba(209, 0, 255, 0.17);

color: var(--pink);

box-shadow:
    inset 0 0 0 1px
    rgba(209, 0, 255, 0.14);

}

.bottom-nav-item:hover {

color: var(--pink-light);

transform:
    translateY(-1px);

}

/* =========================================================
FOOTER
========================================================= */

.site-footer {

margin-top: 55px;

padding:
    40px 0 35px;

border-top:
    1px solid
    rgba(209, 0, 255, 0.16);

text-align: center;

}

.footer-brand {

font-family:
    "Times New Roman",
    Times,
    serif;

font-size: 35px;

font-weight: 700;

letter-spacing: -1.5px;

}

.footer-brand .fin {

color: var(--white);

}

.footer-brand .ora {

color: var(--gold-light);

}

.footer-tagline {

margin-top: 7px;

color: var(--pink);

font-size: 8px;

font-weight: 800;

letter-spacing: 2.5px;

text-transform: uppercase;

}

.footer-text {

max-width: 530px;

margin:
    14px auto 0;

color: var(--muted);

font-size: 12px;

line-height: 1.6;

}

.footer-copy {

margin-top: 20px;

color:
    rgba(169, 165, 173, 0.65);

font-size: 10px;

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 650px) {

.profile-container {

    width:
        calc(100% - 22px);

}


.profile-page {

    padding-bottom: 96px;

}


.profile-top-header {

    min-height: 74px;

    grid-template-columns:
        44px
        1fr
        44px;

}


.profile-back-button {

    width: 40px;

    height: 40px;

    border-radius: 12px;

}


.profile-back-button svg {

    width: 20px;

    height: 20px;

}


.header-spacer {

    width: 44px;

    height: 44px;

}


.finora-name {

    font-size: 28px;

}


.finora-tagline {

    font-size: 8px;

    letter-spacing: 2.5px;

}


.profile-main {

    padding-top: 34px;

}


.profile-intro {

    margin-bottom: 22px;

}


.profile-intro h1 {

    font-size: 30px;

}


.profile-intro p {

    font-size: 12px;

}


.profile-identity-card {

    padding: 19px;

    gap: 14px;

}


.profile-avatar {

    width: 62px;

    height: 62px;

    flex-basis: 62px;

    font-size: 24px;

}


.profile-identity-content h2 {

    font-size: 18px;

}


.profile-identity-content p {

    font-size: 11px;

}


.profile-section {

    margin-top: 25px;

}


.section-heading h2 {

    font-size: 18px;

}


.information-row {

    min-height: 68px;

    padding:
        11px 12px;

}


.information-icon {

    width: 36px;

    height: 36px;

    flex-basis: 36px;

}


.information-icon svg {

    width: 18px;

    height: 18px;

}


.information-content > span {

    font-size: 9px;

}


.information-content > strong {

    font-size: 12px;

}


.security-card {

    padding: 16px;

    gap: 12px;

}


.security-icon {

    width: 39px;

    height: 39px;

    flex-basis: 39px;

}


.security-icon svg {

    width: 19px;

    height: 19px;

}


.security-content h3 {

    font-size: 13px;

}


.security-content p {

    font-size: 10px;

}


.setting-item {

    min-height: 68px;

    padding:
        10px 12px;

}


.setting-icon {

    width: 36px;

    height: 36px;

    flex-basis: 36px;

}


.setting-left strong {

    font-size: 12px;

}


.setting-left span {

    font-size: 9px;

}


.logout-button {

    min-height: 50px;

}


.bottom-navigation {

    bottom: 8px;

    width:
        calc(100% - 14px);

    min-height: 67px;

    border-radius: 19px;

    padding:
        7px 5px;

}


.bottom-nav-item {

    padding:
        7px 2px;

    gap: 4px;

}


.bottom-nav-item svg {

    width: 23px;

    height: 23px;

}


.bottom-nav-item span {

    font-size: 8px;

}


.site-footer {

    margin-top: 42px;

}

}

@media (max-width: 390px) {

.profile-container {

    width:
        calc(100% - 18px);

}


.bottom-nav-item span {

    font-size: 7px;

}


.profile-identity-card {

    padding: 15px;

}


.profile-avatar {

    width: 56px;

    height: 56px;

    flex-basis: 56px;

    font-size: 21px;

}

}