/* =========================================================
   Base
========================================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:
        'Segoe UI',
        Tahoma,
        Geneva,
        Verdana,
        sans-serif;
}

/* =========================================================
   Layout
========================================================= */

body.has-site-header {

    padding-top: var(--cyrus-header-height);

    padding-left:
        var(--cyrus-header-container-pad-x);

    padding-right:
        var(--cyrus-header-container-pad-x);

    padding-bottom: 24px;

    background:
    linear-gradient(
    135deg,
    #0a0e1a 0%,
    #151a2e 50%,
    #1e1b4b 100%
    );

    color: #f8fafc;

    min-height: 100vh;
}

.container {

    width: 100%;

    max-width:
        var(--cyrus-header-container-max);

    margin: 0 auto;
}

/* =========================================================
   Direction
========================================================= */

html {
    direction: ltr;
}

html[dir="rtl"] {
    direction: rtl;
}

body {
    text-align: start;
}
/* =========================================================
   Avatar Tokens
========================================================= */

:root {

    --cyrus-avatar-size: 120px;

    --cyrus-avatar-bg: #0f172a;

    --cyrus-avatar-border: #4f46e5;

    --cyrus-avatar-shadow:
        0 10px 25px rgba(0,0,0,0.35);

    --cyrus-avatar-edit-bg:
        rgba(59, 130, 246, 0.95);

    --cyrus-avatar-edit-bg-hover:
        #2563eb;

    --cyrus-avatar-edit-color:
        #ffffff;

    --cyrus-avatar-edit-border:
        rgba(255,255,255,0.95);

    --cyrus-avatar-hint-color:
        #94a3b8;
}

/* light mode support */
html[data-theme="light"] {

    --cyrus-avatar-bg: #e2e8f0;

    --cyrus-avatar-border: #818cf8;

    --cyrus-avatar-edit-bg: #2563eb;

    --cyrus-avatar-edit-bg-hover: #1d4ed8;

    --cyrus-avatar-edit-color: #ffffff;

    --cyrus-avatar-hint-color: #475569;
}


/* =========================================================
   Light Theme Overrides
========================================================= */

html[data-theme="light"] body.has-site-header {

    background: #F3E7E1;

    color: #0f172a;
}

html[data-theme="light"] .profile-card {

    background: #FFFBF8;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08);
}

html[data-theme="light"] .form-group label {

    color: #334155;
}

html[data-theme="light"] .form-group input,
html[data-theme="light"] .form-group textarea {

    background: #F1EBE5;

    border: 1px solid rgba(148,163,184,0.45);

    color: #0f172a;
}

html[data-theme="light"] .form-group input:focus,
html[data-theme="light"] .form-group textarea:focus {

    border-color: #6366f1;

    box-shadow:
        0 0 0 2px rgba(99,102,241,0.15);
}

html[data-theme="light"] .btn-secondary {

    background: #F6EFE7;

    color: #0f172a;
}

html[data-theme="light"] .btn-secondary:hover {

    background: #EADFD6;
}

html[data-theme="light"] .btn-outline {

    border-color: #6366f1;

    color: #4338ca;
}

html[data-theme="light"] .btn-outline:hover {

    background: #6366f1;

    color: white;
}

html[data-theme="light"] .connected-platforms {

    border-top: 1px solid #cbd5e1;
}

html[data-theme="light"] .platform-badge {

    background: #f8fafc;

    border: 1px solid #cbd5e1;

    color: #0f172a;
}

html[data-theme="light"] .modal-content {

    background: #ffffff;

    color: #0f172a;
}

html[data-theme="light"] .close-modal {

    color: #475569;
}
/* =========================================================
   Card
========================================================= */

.profile-card {

    background:
        rgba(21, 26, 46, 0.72);

    border:
        1px solid rgba(148,163,184,0.12);

    backdrop-filter:
        blur(12px);

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

    border-radius: 28px;

    padding: 2rem;

    box-shadow:
        0 20px 40px rgba(15,23,42,0.35);
}
/* =========================================================
   Header
========================================================= */

.card-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

    flex-wrap: wrap;

    gap: 1rem;
}

.card-header h2 {

    font-size: 1.8rem;

    font-weight: 600;

    background:
        linear-gradient(
        135deg,
        #818cf8,
        #22d3ee
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;
}

/* =========================================================
   Avatar
========================================================= */

.avatar-section {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-bottom: 2rem;
}

.avatar-wrapper {

    position: relative;

    width: var(--cyrus-avatar-size);

    height: var(--cyrus-avatar-size);

    border-radius: 999px;

    overflow: hidden;

    background:
        var(--cyrus-avatar-bg);

    border:
        3px solid
        var(--cyrus-avatar-border);

    box-shadow:
        var(--cyrus-avatar-shadow);

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;
}

.avatar-wrapper img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;
}

.avatar-hint {

    font-size: 0.78rem;

    color:
        var(--cyrus-avatar-hint-color);

    margin-top: 0.6rem;

    text-align: center;
}

/* =========================================================
   Buttons
========================================================= */

.btn-secondary {

    background: #334155;

    border: none;

    padding: 0.5rem 1rem;

    border-radius: 40px;

    color: white;

    cursor: pointer;

    font-size: 0.9rem;

    transition: 0.2s;
}

.btn-secondary:hover {
    background: #475569;
}

.btn-outline {

    background: transparent;

    border: 1px solid #4f46e5;

    color: #a5b4fc;

    padding: 0.6rem 1rem;

    border-radius: 40px;

    cursor: pointer;

    transition: 0.2s;
}

.btn-outline:hover {

    background: #4f46e5;

    color: white;
}

.btn-primary {

    background:
    linear-gradient(
    135deg,
    #6366f1,
    #06b6d4
    );

    box-shadow:
    0 8px 24px rgba(99,102,241,0.28);

    border: none;

    padding: 0.8rem;

    border-radius: 40px;

    font-weight: bold;

    font-size: 1rem;

    cursor: pointer;

    color: white;

    transition: 0.2s;

    margin-top: 0.5rem;
}

.btn-primary:hover {

    background:
    linear-gradient(
    135deg,
    #6366f1,
    #06b6d4
    );

    transform: translateY(-2px);

    box-shadow:
    0 12px 30px rgba(99,102,241,0.35);
}

/* =========================================================
   Form
========================================================= */

.profile-form {

    display: flex;

    flex-direction: column;

    gap: 1.2rem;

    margin-bottom: 2rem;
}

.form-group {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;
}

.form-group label {

    font-weight: 500;

    color: #cbd5e1;
}

.form-group input,
.form-group textarea {

    background:
    rgba(15, 23, 42, 0.65);

    border:
    1px solid rgba(148,163,184,0.14);

    padding: 0.75rem 1rem;

    border-radius: 16px;

    color: #f8fafc;

    font-size: 1rem;

    outline: none;

    transition: 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {

    border-color: #6366f1;

    box-shadow:
        0 0 0 3px rgba(99,102,241,0.16);
}

/* =========================================================
   Phone
========================================================= */

.phone-input-group {

    display: flex;

    gap: 0.8rem;

    align-items: center;
}

.phone-input-group input {
    flex: 1;
}

/* =========================================================
   Status
========================================================= */

.field-status {

    font-size: 0.75rem;

    margin-top: 4px;
}

.verified {
    color: #4ade80;
}

.not-verified {
    color: #f87171;
}

/* =========================================================
   Platforms
========================================================= */

.connected-platforms {

    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid #334155;
}

.connected-platforms h3 {

    margin-bottom: 1rem;

    font-size: 1.2rem;
}

.platforms-grid {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;
}

.platform-badge {

    background:
    rgba(15,23,42,0.58);

    padding: 0.5rem 1rem;

    border-radius: 40px;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.9rem;

    border:
    1px solid rgba(148,163,184,0.14);
}

/* =========================================================
   Modal
========================================================= */

.modal {

    display: none;

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.7);

    align-items: center;

    justify-content: center;

    z-index: 1000;
}

.modal-content {

    background:
    rgba(21,26,46,0.92);

    border:
    1px solid rgba(148,163,184,0.14);

    backdrop-filter:
    blur(14px);

    max-width: 450px;

    width: 90%;

    padding: 1.8rem;

    border-radius: 32px;

    position: relative;
}

.close-modal {

    position: absolute;

    inset-inline-start: 20px;

    top: 15px;

    font-size: 28px;

    cursor: pointer;

    color: #94a3b8;
}

/* =========================================================
   Misc
========================================================= */

.message {

    margin-top: 1rem;

    font-size: 0.85rem;
}

.btn-success {

    background: #10b981;

    border: none;

    padding: 0.6rem 1rem;

    border-radius: 40px;

    color: white;

    cursor: pointer;

    margin-inline-end: 0.5rem;
}

/* =========================================================
   Mobile
========================================================= */

@media (max-width: 600px) {

    body.has-site-header {

        padding-left: 14px;

        padding-right: 14px;
    }

    .profile-card {

        padding: 1.5rem;
    }

    .phone-input-group {

        flex-direction: column;

        align-items: stretch;
    }

    .card-header h2 {

        font-size: 1.5rem;
    }
}
.security-section {
    margin-top: 1.5rem;
}

.security-form {
    margin-bottom: 0;
}

.profile-inline-message {
    min-height: 20px;
    font-size: 0.85rem;
    line-height: 1.5;
}

.profile-inline-message.is-error {
    color: #f87171;
}

.profile-inline-message.is-success {
    color: #4ade80;
}