/* =========================================================
   İLK ADIM
   MAIN STYLE
   ========================================================= */

/* =========================================================
   DESIGN TOKENS
   Tum renkler/tipografi buradan besleniyor.
   Eski hardcoded degerler hala calisiyor (geriye donuk uyumlu),
   yeni bilesenler bu degiskenleri kullanmali.
   ========================================================= */

:root {
    /* Yuzeyler (koyudan acige) */
    --surface-0: #0d0d0d;
    --surface-1: #111111;
    --surface-2: #171717;
    --surface-3: #1c1b1b;
    --surface-4: #252525;
    --surface-card: rgba(255, 255, 255, 0.045);
    --surface-card-hover: rgba(255, 255, 255, 0.075);

    /* Ana metin / vurgu (mevcut sand tonu) */
    --ink: #f2eee6;
    --ink-dim: #d8d3ca;
    --ink-faint: #d5d0c7;

    /* Aksiyon rengi (mevcut altın/gold tonu) */
    --accent: #d6b36a;
    --accent-ink: #171717;

    /* Cizgi / kenar */
    --border-soft: rgba(242, 238, 230, 0.14);
    --border-strong: rgba(242, 238, 230, 0.3);

    /* Durum renkleri */
    --success: #8FAF9A;
    --success-dim: #3F5F4A;
    --error: #e7aaaa;

    /* Tipografi */
    --font-display: 'Montserrat', Arial, Helvetica, sans-serif;
    --font-body: 'Hanken Grotesk', Arial, Helvetica, sans-serif;

    /* Radius / spacing olcegi */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-full: 999px;
    --space-unit: 8px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 20%,
            #252525 0%,
            #171717 42%,
            #0d0d0d 100%
        );

    color: var(--ink);

    font-family: var(--font-body);

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
}

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

button {
    font-family: inherit;
}


/* =========================================================
   GENERAL BUTTON
   ========================================================= */

.start-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding: 15px 28px;

    border: 1px solid #f2eee6;
    border-radius: 10px;

    background: #f2eee6;
    color: #111111;

    text-decoration: none;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.8px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.start-button:hover {
    background: #ffffff;
    border-color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.25);
}

.start-button:active {
    transform: translateY(0);
}


/* =========================================================
   HERO / HOME
   ========================================================= */

.hero {
    min-height: 100vh;

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

    padding: 50px 20px;

    text-align: center;
}

.hero-logo {
    width: 220px;
    height: 220px;

    object-fit: cover;

    border-radius: 50%;

    margin-bottom: 42px;

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.35);
}

.hero-content {
    width: 100%;
    max-width: 700px;
}

.eyebrow {
    margin: 0 0 20px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;

    color: #d8d3ca;

    opacity: 0.65;
}

.hero h1 {
    margin: 0;

    font-family: var(--font-display);

    font-size: clamp(40px, 6vw, 72px);

    line-height: 1.05;

    letter-spacing: -2.5px;

    font-weight: 800;

    text-transform: uppercase;
}

.hero-description {
    max-width: 520px;

    margin: 28px auto 0;

    font-size: 18px;

    line-height: 1.6;

    color: #d5d0c7;

    opacity: 0.72;
}

.hero-info {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 14px;

    margin-top: 32px;

    font-size: 12px;

    letter-spacing: 2.5px;

    font-weight: 700;

    color: #d8d3ca;

    opacity: 0.7;
}


/* =========================================================
   HOME - CHALLENGES
   ========================================================= */

.home-challenges {
    width: 100%;
    max-width: 700px;

    margin: 55px auto 0;

    text-align: left;
}

.home-challenges-eyebrow {
    margin: 0 0 18px;

    text-align: center;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #d8d3ca;

    opacity: 0.5;
}

.home-challenge-list {
    display: flex;
    flex-direction: column;

    gap: 18px;
}

.home-challenge-card {
    width: 100%;

    padding: 26px;

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

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

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    text-align: left;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.home-challenge-count {
    display: flex;
    align-items: baseline;

    gap: 6px;

    margin: 0 0 4px;
}

.home-challenge-count .count-number {
    font-family: var(--font-display);

    font-size: 44px;
    font-weight: 800;

    line-height: 1;

    color: var(--ink);
}

.home-challenge-count .count-label {
    font-size: 13px;
    font-weight: 600;

    color: var(--ink-dim);

    opacity: 0.6;
}

.home-challenge-card:hover {
    transform: translateY(-3px);

    border-color: rgba(242, 238, 230, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.2);
}

.home-challenge-card-link {
    display: block;

    color: inherit;
    text-decoration: none;
}

.home-challenge-header {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-bottom: 18px;
}

.home-challenge-category {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    color: #d8d3ca;

    opacity: 0.6;
}

.home-challenge-days {
    font-size: 14px;

    font-weight: 700;

    color: #f2eee6;

    opacity: 0.75;
}

.home-challenge-card h2 {
    margin: 0 0 22px;

    font-size: 28px;

    line-height: 1.1;

    letter-spacing: -1px;
}


/* =========================================================
   HOME PROGRESS
   ========================================================= */

.home-challenge-progress {
    width: 100%;
}

.home-progress-bar {
    width: 100%;

    height: 9px;

    border-radius: 20px;

    background:
        rgba(242, 238, 230, 0.1);

    overflow: hidden;
}

.home-progress-fill {
    height: 100%;

    min-width: 0;

    border-radius: 20px;

    background: #f2eee6;

    transition:
        width 0.4s ease;
}

.home-progress-info {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-top: 10px;

    font-size: 12px;

    color: #d8d3ca;

    opacity: 0.55;
}


/* =========================================================
   HOME BUTTONS
   ========================================================= */

.home-challenge-card .start-button {
    display: flex;

    width: 100%;

    margin-top: 24px;
}

.home-navigation {
    width: 100%;
    max-width: 360px;

    margin: 25px auto 0;
}

.home-navigation .start-button {
    width: 100%;

    margin-top: 12px;
}

.home-secondary-button {
    background: rgba(255, 255, 255, 0.035);

    color: #f2eee6;

    border-color:
        rgba(242, 238, 230, 0.22);
}

.home-secondary-button:hover {
    background: rgba(255, 255, 255, 0.09);

    border-color:
        rgba(242, 238, 230, 0.45);
}

.home-primary-button {
    text-align: center;
}

.home-empty {
    width: 100%;
    max-width: 500px;

    margin: 55px auto 0;

    padding: 30px 25px;

    border: 1px solid
        rgba(242, 238, 230, 0.12);

    border-radius: 16px;

    background:
        rgba(255, 255, 255, 0.025);

    text-align: center;
}

.home-empty-text {
    margin: 0 0 25px;

    font-size: 16px;

    line-height: 1.5;

    color: #d8d3ca;

    opacity: 0.65;
}

.home-auth-navigation {
    width: 100%;
    max-width: 360px;

    margin: 45px auto 0;
}

.home-auth-navigation .start-button {
    width: 100%;

    margin-top: 12px;
}

.home-logout {
    display: block;

    margin: 28px auto 0;

    color: #d8d3ca;

    text-decoration: none;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    opacity: 0.4;

    transition:
        opacity 0.2s ease;
}

.home-logout:hover {
    opacity: 0.8;
}


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

.challenge-page {
    min-height: 100vh;

    padding: 30px 7%;
}

.challenge-header {
    display: flex;

    justify-content: center;
    align-items: center;
}

.challenge-logo-link {
    display: block;
}

.challenge-logo {
    width: 200px;
    height: 200px;

    object-fit: cover;

    border-radius: 50%;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.3);
}

.challenge-intro {
    max-width: 800px;

    margin: 100px auto 0;

    text-align: center;
}

.challenge-eyebrow {
    margin: 0 0 20px;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #d8d3ca;

    opacity: 0.55;
}

.challenge-intro h1 {
    margin: 0;

    font-size: clamp(48px, 8vw, 100px);

    line-height: 0.95;

    letter-spacing: -4px;
}

.challenge-description {
    max-width: 520px;

    margin: 35px auto 0;

    font-size: 18px;

    line-height: 1.6;

    color: #d5d0c7;

    opacity: 0.65;
}


/* =========================================================
   CATEGORY
   ========================================================= */

.category-section {
    max-width: 900px;

    margin: 100px auto 60px;

    text-align: center;
}

.category-section h2 {
    margin-bottom: 35px;

    font-size: 28px;

    letter-spacing: -1px;
}

.category-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 20px;
}

.category-card {
    width: 100%;

    padding: 30px;

    border: 1px solid
        rgba(242, 238, 230, 0.15);

    border-radius: 14px;

    background:
        rgba(255, 255, 255, 0.03);

    color: #f2eee6;

    text-align: left;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.category-card:hover {
    border-color:
        rgba(242, 238, 230, 0.35);

    background:
        rgba(255, 255, 255, 0.06);

    transform: translateY(-3px);
}

.category-card.selected {
    border-color: #f2eee6;

    background:
        rgba(242, 238, 230, 0.09);

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

.category-card h3 {
    margin: 0;

    font-size: 22px;
}

.category-card p {
    margin: 12px 0 0;

    font-size: 14px;

    line-height: 1.5;

    color: #d8d3ca;

    opacity: 0.55;
}

.category-card-check {
    position: absolute;

    top: 18px;
    right: 18px;

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

    width: 22px;
    height: 22px;

    border-radius: 50%;

    color: var(--accent-ink);

    font-size: 12px;
    font-weight: 700;

    opacity: 0;
    transform: scale(0.7);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.category-card.selected .category-card-check {
    opacity: 1;
    transform: scale(1);

    background: var(--ink);
}

.continue-button {
    display: flex;

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

    margin: 40px auto 80px;

    min-height: 52px;

    padding: 16px 35px;

    border: 1px solid #f2eee6;

    border-radius: 10px;

    background: #f2eee6;

    color: #111111;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.continue-button:hover {
    background: #ffffff;

    transform: translateY(-2px);
}


/* =========================================================
   NEW CATEGORY CREATION
   (create/join a custom category, styled to match category-card)
   ========================================================= */

.category-action {
    width: 100%;
    max-width: 480px;

    margin: 46px auto 0;
    padding-top: 34px;

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

    text-align: center;
}

.category-selection-hint {
    margin: 0 0 18px;

    font-size: 13px;

    color: var(--ink-dim);

    opacity: 0.55;
}

.category-selection-hint.selected {
    color: var(--accent);

    opacity: 0.9;
}

.new-category-section {
    width: 100%;

    margin-top: 46px;
}

.new-category-divider {
    display: flex;
    align-items: center;

    gap: 14px;

    margin: 0 0 24px;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;

    color: var(--ink-dim);

    opacity: 0.5;
}

.new-category-divider::before,
.new-category-divider::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--border-soft);
}

.new-category-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 84px;

    padding: 20px;

    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-md);

    background: transparent;

    color: var(--ink-dim);

    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.new-category-button:hover {
    border-color: var(--accent);

    background: rgba(214, 179, 106, 0.06);

    color: var(--ink);
}

.new-category-form {
    display: flex;
    flex-direction: column;

    gap: 14px;

    padding: 26px;

    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);

    background: var(--surface-card);

    text-align: left;
}

.new-category-form .text-input {
    width: 100%;

    padding: 14px 16px;

    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);

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

    color: var(--ink);

    font-family: var(--font-body);
    font-size: 15px;

    transition: border-color 0.2s ease;
}

.new-category-form .text-input::placeholder {
    color: var(--ink-dim);

    opacity: 0.5;
}

.new-category-form .text-input:focus {
    outline: none;

    border-color: var(--accent);
}

.category-exists-message {
    margin: 0;

    font-size: 13px;

    color: var(--error);
}

.new-category-form .promise-button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 50px;

    padding: 14px 20px;

    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);

    background: var(--ink);

    color: var(--accent-ink);

    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.new-category-form .promise-button:hover {
    background: #ffffff;

    transform: translateY(-2px);
}

.new-category-form #useExistingCategoryButton {
    background: transparent;

    color: var(--ink);

    border-color: var(--border-strong);
}

.new-category-form #useExistingCategoryButton:hover {
    background: rgba(255, 255, 255, 0.06);
}


/* =========================================================
   CHALLENGE STARTED
   ========================================================= */

.started-page {
    min-height: 100vh;

    padding: 40px 20px;

    display: flex;

    flex-direction: column;
}

.started-header {
    width: 100%;

    display: flex;

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

    padding-top: 20px;
}

.started-content {
    flex: 1;

    width: 100%;

    max-width: 800px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

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

    text-align: center;

    padding-bottom: 80px;
}

.started-content h1 {
    margin: 10px 0 30px;

    font-size: clamp(55px, 8vw, 100px);

    line-height: 0.95;

    letter-spacing: -4px;
}

.started-description {
    max-width: 550px;

    margin: 0 0 40px;

    font-size: 20px;

    line-height: 1.6;

    color: #d5d0c7;

    opacity: 0.65;
}

.challenge-summary {
    width: 100%;
    max-width: 600px;

    margin: 10px 0 40px;

    text-align: center;
}

.challenge-summary h2 {
    margin: 0 0 25px;

    font-size: 32px;

    font-weight: 700;
}

.challenge-summary-details {
    display: flex;

    justify-content: center;

    gap: 45px;

    flex-wrap: wrap;
}

.summary-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 5px;
}

.summary-item strong {
    font-size: 32px;
}

.summary-item span {
    font-size: 14px;

    color: #d8d3ca;

    opacity: 0.6;
}


/* =========================================================
   CHALLENGE DETAIL
   ========================================================= */

.challenge-detail-page {
    min-height: 100vh;

    padding: 40px 20px;
}

.challenge-detail-content {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;

    padding: 70px 20px;

    text-align: center;
}

.challenge-detail-content h1 {
    margin: 10px 0 50px;

    font-size: clamp(55px, 8vw, 100px);

    line-height: 0.95;

    letter-spacing: -4px;
}

.challenge-detail-stats {
    display: flex;

    justify-content: center;

    gap: 70px;

    flex-wrap: wrap;

    margin-bottom: 80px;
}

.detail-stat {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;
}

.detail-stat strong {
    font-size: 42px;
}

.detail-stat span {
    font-size: 15px;

    color: #d8d3ca;

    opacity: 0.6;
}

.today-section {
    max-width: 600px;

    margin: 0 auto;
}

.today-section h2 {
    margin-bottom: 15px;

    font-size: 32px;
}

.today-section p {
    margin-bottom: 30px;

    font-size: 18px;

    color: #d8d3ca;

    opacity: 0.65;
}


/* =========================================================
   DETAIL PROGRESS
   ========================================================= */

.detail-progress {
    width: 100%;

    max-width: 650px;

    margin: 0 auto 70px;
}

.detail-progress-text {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;

    font-size: 14px;

    color: #d8d3ca;

    opacity: 0.6;
}

.detail-progress-text strong {
    font-size: 16px;

    color: #f2eee6;

    opacity: 1;
}

.detail-progress-bar {
    width: 100%;

    height: 12px;

    border-radius: 20px;

    background:
        rgba(242, 238, 230, 0.12);

    overflow: hidden;
}

.detail-progress-fill {
    height: 100%;

    border-radius: 20px;

    background: #f2eee6;

    transition:
        width 0.4s ease;
}

.detail-progress-percent {
    margin-top: 10px;

    font-size: 13px;

    color: #d8d3ca;

    opacity: 0.5;
}

.progress-percent {
    margin-top: 10px;

    font-size: 13px;

    opacity: 0.5;
}


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

.today-page {
    min-height: 100vh;

    padding: 40px 20px;
}

.today-content {
    display: block;

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding: 70px 20px;

    text-align: center;
}

.today-content .challenge-eyebrow {
    display: block;
}

.today-content h1 {
    display: block;

    margin: 10px 0 20px;

    font-size: clamp(60px, 10vw, 110px);

    line-height: 0.9;

    letter-spacing: -5px;
}

.today-subtitle {
    display: block;

    margin: 0 0 55px;

    font-size: 20px;

    color: #d8d3ca;

    opacity: 0.7;
}

.today-subtitle strong {
    color: #f2eee6;

    opacity: 1;
}

.progress-info {
    display: block;

    width: 100%;

    max-width: 550px;

    margin: 0 auto 70px;
}

.progress-text {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;
}

.progress-text span {
    color: #d8d3ca;

    opacity: 0.6;
}

.progress-text strong {
    font-size: 18px;
}

.progress-bar {
    width: 100%;

    height: 12px;

    border-radius: 20px;

    background:
        rgba(242, 238, 230, 0.12);

    overflow: hidden;
}

.progress-fill {
    display: block;

    height: 100%;

    border-radius: 20px;

    background: #f2eee6;

    transition:
        width 0.4s ease;
}

.today-action {
    width: 100%;

    max-width: 500px;

    margin: 0 auto;
}

.today-action p {
    margin-bottom: 25px;

    font-size: 16px;

    color: var(--ink-dim);

    opacity: 0.6;
}

.today-completed {
    width: 100%;

    max-width: 500px;

    margin: 0 auto;

    padding: 35px 25px;

    border-radius: 20px;

    background:
        rgba(242, 238, 230, 0.05);

    border: 1px solid
        rgba(242, 238, 230, 0.12);
}

.completed-icon {
    font-size: 42px;

    margin-bottom: 10px;
}

.today-completed h2 {
    margin-bottom: 10px;
}

.today-completed p {
    color: #d8d3ca;

    opacity: 0.6;
}


/* =========================================================
   WEEKLY PROGRESS
   ========================================================= */

.weekly-progress {
    margin-top: 18px;

    font-size: 14px;

    color: #d8d3ca;

    opacity: 0.6;
}

.weekly-progress strong {
    color: #f2eee6;

    opacity: 1;
}

.weekly-completed {
    opacity: 1;

    font-weight: 700;
}


/* =========================================================
   CHALLENGE DAYS
   ========================================================= */

.challenge-days {
    width: 100%;

    max-width: 700px;

    margin: 80px auto 0;

    text-align: left;
}

.challenge-days h2 {
    margin-bottom: 25px;

    text-align: center;

    font-size: 30px;

    letter-spacing: -1px;
}

.challenge-day-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 12px;
}

.challenge-day {
    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    padding: 18px;

    border: 1px solid
        rgba(242, 238, 230, 0.12);

    border-radius: 10px;

    background:
        rgba(255, 255, 255, 0.025);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.challenge-day-number {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(242, 238, 230, 0.08);

    font-size: 14px;

    font-weight: 700;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.challenge-day-info {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.challenge-day-info strong {
    font-size: 15px;
}

.challenge-day-info span {
    font-size: 12px;

    color: #d8d3ca;

    opacity: 0.5;
}


/* COMPLETED */

.challenge-day.completed {
    border-color:
        rgba(242, 238, 230, 0.28);

    opacity: 0.75;
}

.challenge-day.completed
.challenge-day-number {
    background: #f2eee6;

    color: #111111;

    font-size: 16px;
}


/* CURRENT */

.challenge-day.current {
    border-color: #f2eee6;

    background:
        rgba(242, 238, 230, 0.07);

    transform: translateY(-2px);
}

.challenge-day.current
.challenge-day-number {
    background: #f2eee6;

    color: #111111;

    transform: scale(1.08);
}


/* UPCOMING */

.challenge-day.upcoming {
    opacity: 0.35;
}


/* =========================================================
   CHALLENGE FINISHED
   ========================================================= */

.challenge-finished {
    max-width: 550px;

    margin: 0 auto;

    padding: 45px 30px;

    border-radius: 20px;

    background:
        rgba(242, 238, 230, 0.05);

    border: 1px solid
        rgba(242, 238, 230, 0.12);

    text-align: center;
}

.finished-icon {
    width: 60px;
    height: 60px;

    margin: 0 auto 20px;

    display: flex;

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

    border-radius: 50%;

    background: #f2eee6;

    color: #111111;

    font-size: 28px;

    font-weight: 700;
}

.challenge-finished h2 {
    margin: 0 0 15px;

    font-size: 30px;
}

.challenge-finished p {
    margin: 0;

    font-size: 17px;

    line-height: 1.6;

    color: #d8d3ca;

    opacity: 0.6;
}

.completed-badge {
    display: inline-flex;

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

    margin-bottom: 25px;

    padding: 9px 14px;

    border-radius: 8px;

    background:
        rgba(242, 238, 230, 0.08);

    border: 1px solid
        rgba(242, 238, 230, 0.12);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* =========================================================
   MY CHALLENGES
   ========================================================= */

.my-challenges-page {
    min-height: 100vh;

    padding: 40px 20px 80px;
}

.my-challenges-content {
    width: 100%;

    max-width: 1000px;

    margin: 0 auto;

    padding: 70px 20px;

    text-align: center;
}

.my-challenges-content h1 {
    margin: 10px 0 70px;

    font-size: clamp(50px, 8vw, 90px);

    line-height: 0.95;

    letter-spacing: -4px;
}

.challenge-list-section {
    margin-bottom: 80px;
}

.challenge-list-section h2 {
    margin-bottom: 30px;

    font-size: 28px;

    letter-spacing: -1px;
}

.completed-challenges-section {
    margin-top: 20px;
}

.my-challenge-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );

    gap: 20px;

    text-align: left;
}

/* =========================
CHALLENGE CARD
========================= */

.my-challenge-card {
    position: relative;

    min-height: 260px;

    padding: 30px;

    border: 1px solid rgba(242, 238, 230, 0.16);
    border-radius: 16px;

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

    color: #f2eee6;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.my-challenge-card:hover {
    transform: translateY(-5px);

    border-color: rgba(242, 238, 230, 0.4);

    background: rgba(255, 255, 255, 0.075);

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

.my-challenge-card-link {
    display: block;

    color: inherit;

    text-decoration: none;
}

.my-challenge-category {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 22px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 3px;

    opacity: 0.65;
}

.my-challenge-category span {
    font-size: 25px;

    opacity: 0.7;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.my-challenge-card:hover .my-challenge-category span {
    transform: translateX(5px);

    opacity: 1;
}

.my-challenge-card h3 {
    margin: 0 0 15px;

    font-size: 30px;

    line-height: 1.1;

    letter-spacing: -1px;
}

.my-challenge-meta {
    margin: 0;

    font-size: 14px;

    line-height: 1.6;

    opacity: 0.55;
}

/* =========================
PROGRESS
========================= */

.my-challenge-progress {
    width: 100%;

    margin-top: 30px;
}

.my-challenge-progress-text {
    display: flex;

    justify-content: space-between;
    align-items: center;

    width: 100%;

    margin-bottom: 9px;

    font-size: 13px;

    opacity: 0.65;
}

.my-challenge-progress-text strong {
    font-size: 14px;

    opacity: 1;
}

.my-challenge-progress-bar {
    display: block;

    width: 100%;

    height: 10px;

    border-radius: 20px;

    background: rgba(242, 238, 230, 0.12);

    overflow: hidden;
}

.my-challenge-progress-fill {
    display: block;

    height: 100%;

    min-width: 0;

    border-radius: 20px;

    background: #f2eee6;

    transition: width 0.4s ease;
}

.my-challenge-progress p {
    margin: 9px 0 0;

    font-size: 12px;

    opacity: 0.45;
}

/* =========================
COMPLETED CHALLENGE
========================= */

.completed-challenge-card {
    opacity: 0.9;
}

.completed-challenge-card .my-challenge-progress-fill {
    opacity: 0.7;
}

.completed-badge {
    display: inline-flex;

    align-items: center;

    margin: 22px 0 0;

    padding: 8px 13px;

    border: 1px solid rgba(242, 238, 230, 0.15);
    border-radius: 6px;

    background: rgba(242, 238, 230, 0.08);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.5px;

    opacity: 0.8;
}

/* =========================
BUGÜNE BAŞLA BUTONU
========================= */

.my-challenge-today-button {
    display: block;

    width: 100%;

    margin-top: 25px;

    padding: 15px 20px;

    border-radius: 6px;

    background: #f2eee6;

    color: #111111;

    text-align: center;

    text-decoration: none;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.my-challenge-today-button:hover {
    background: #ffffff;

    transform: translateY(-2px);
}

/* =========================
BOŞ DURUM
========================= */

.no-challenges {
    max-width: 600px;

    margin: 50px auto 0;

    padding: 55px 30px;

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.04);

    border: 1px solid rgba(242, 238, 230, 0.14);

    text-align: center;
}

.no-challenges h2 {
    margin: 0 0 15px;
}

.no-challenges p {
    margin-bottom: 30px;

    color: #d8d3ca;

    opacity: 0.55;
}

.no-challenges .start-button {
    display: flex;

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

    width: 100%;
    max-width: 400px;

    min-height: 58px;

    margin: 30px auto 0;
}

/* =========================
YENİ CHALLENGE BUTONU
========================= */

.my-challenges-navigation {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 45px;
}

.new-challenge-button {
    display: inline-flex;

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

    min-width: 260px;

    padding: 15px 24px;

    border: 1px solid rgba(242, 238, 230, 0.25);

    border-radius: 6px;

    background: rgba(242, 238, 230, 0.04);

    color: #f2eee6;

    text-decoration: none;

    text-align: center;

    font-size: 12px;
    font-weight: bold;

    letter-spacing: 2px;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.new-challenge-button:hover {
    background: rgba(242, 238, 230, 0.10);

    border-color: rgba(242, 238, 230, 0.45);

    transform: translateY(-2px);
}

.my-challenges-navigation {
    flex-wrap: wrap;
    gap: 12px;
}

.my-challenges-navigation .new-challenge-button {
    min-width: 0;
}

.join-challenge-button {
    display: block;
    width: min(100% - 40px, 420px);
    min-height: 50px;
    margin: 24px auto 40px;
    padding: 14px 20px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    cursor: pointer;
}

.challenge-invitation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.challenge-invitation-actions button {
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
}

.friend-card-identity a {
    color: inherit;
    text-decoration: none;
}

/* =========================
MOBİL
========================= */

@media (max-width: 600px) {

    .my-challenges-content {
        padding-left: 10px;
        padding-right: 10px;
    }

    .my-challenge-list {
        grid-template-columns: 1fr;
    }

    .my-challenge-card {
        min-height: auto;

        padding: 24px;
    }

    .my-challenge-card h3 {
        font-size: 26px;
    }

    .my-challenge-category {
        margin-bottom: 18px;
    }

    .my-challenge-progress {
        margin-top: 25px;
    }

    .my-challenge-today-button {
        padding: 16px 20px;
    }

    .new-challenge-button {
        width: 100%;

        min-width: 0;
    }

}

/* =========================
TAMAMLANAN GÜNLER - ADAÇAYI YEŞİLİ
========================= */

.challenge-day.completed {
border-color: rgba(63, 95, 74, 0.65);

background: rgba(63, 95, 74, 0.08);

}

.challenge-day.completed .challenge-day-number {
background: #3F5F4A;

color: #f2eee6;

}

.challenge-day.completed .challenge-day-info span {
color: #8FAF9A;

opacity: 0.9;

}

.challenge-day.completed:hover {
background: rgba(63, 95, 74, 0.12);

border-color: rgba(63, 95, 74, 0.85);

}

/* =========================
SIRADAKİ GÜN - ANA AKSİYON
========================= */

.challenge-day.current {
border-color: rgba(242, 238, 230, 0.55);

background: rgba(242, 238, 230, 0.06);

box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);

cursor: pointer;

text-decoration: none;

color: inherit;

transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;

}

.challenge-day.current:hover {
transform: translateY(-3px);

border-color: rgba(242, 238, 230, 0.85);

background: rgba(242, 238, 230, 0.09);

box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);

}

.challenge-day.current .challenge-day-number {
background: #f2eee6;

color: #111111;

transform: scale(1.08);

}

.challenge-day.current .challenge-day-info span {
opacity: 0.75;
}

.challenge-day-action {
margin-left: auto;

padding: 7px 11px;

border: 1px solid rgba(242, 238, 230, 0.25);

border-radius: 4px;

font-size: 10px;

font-weight: bold;

letter-spacing: 1.5px;

opacity: 0.7;

white-space: nowrap;

}

.challenge-day.current:hover .challenge-day-action {
opacity: 1;

border-color: rgba(242, 238, 230, 0.55);

}

/* MOBİL */

@media (max-width: 600px) {

.challenge-day-action {
    padding: 6px 9px;

    font-size: 9px;
}

}

/* =========================
CHALLENGE DETAIL NAVIGATION
========================= */

.challenge-detail-action {
width: 100%;
max-width: 550px;

margin: 55px auto 0;

text-align: center;

}

.challenge-main-button {
display: block;

width: 100%;

max-width: 420px;

margin: 0 auto;

text-align: center;

}

.challenge-back-button {
display: inline-flex;

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

min-height: 46px;

margin-top: 35px;

padding: 12px 22px;

border: 1px solid rgba(242, 238, 230, 0.18);

border-radius: 6px;

background: rgba(255, 255, 255, 0.025);

color: #f2eee6;

text-decoration: none;

font-size: 11px;

font-weight: bold;

letter-spacing: 1.5px;

transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;

}

.challenge-back-button:hover {
background: rgba(255, 255, 255, 0.07);

border-color: rgba(242, 238, 230, 0.4);

transform: translateY(-2px);

}

/* TAMAMLANAN CHALLENGE */

.challenge-detail-action .challenge-finished {
margin-bottom: 0;
}

/* MOBİL */

@media (max-width: 600px) {

.challenge-detail-action {
    margin-top: 45px;
}


.challenge-main-button {
    max-width: none;
}


.challenge-back-button {
    width: 100%;

    margin-top: 28px;

    padding: 13px 18px;
}

}

/* =========================
CATEGORY SELECTION UX
========================= */

.category-card {
position: relative;

min-height: 150px;

display: flex;
flex-direction: column;
justify-content: center;

padding: 30px;

border: 1px solid rgba(242, 238, 230, 0.14);
border-radius: 14px;

background: rgba(255, 255, 255, 0.035);

color: #f2eee6;

text-align: left;

cursor: pointer;

transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;

}

.category-card:hover {
transform: translateY(-3px);

border-color: rgba(242, 238, 230, 0.35);

background: rgba(255, 255, 255, 0.06);

}

.category-card.selected {
transform: translateY(-2px);

border-color: #9b8cff;

background: rgba(155, 140, 255, 0.10);

box-shadow:
    0 0 0 1px rgba(155, 140, 255, 0.15);

}

.category-card.selected h3 {
color: #b8adff;
}

.category-card h3 {
margin: 0;

font-size: 24px;

letter-spacing: -0.5px;

transition: color 0.2s ease;

}

.category-card p {
margin: 12px 0 0;

font-size: 14px;

line-height: 1.5;

opacity: 0.55;

}

/* =========================
DEVAM ET BUTONU
========================= */

.continue-button {
min-width: 220px;

margin: 40px auto 80px;

padding: 17px 35px;

border: 1px solid rgba(242, 238, 230, 0.18);

border-radius: 8px;

background: rgba(242, 238, 230, 0.08);

color: rgba(242, 238, 230, 0.4);

font-size: 13px;

font-weight: bold;

letter-spacing: 2px;

cursor: not-allowed;

transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;

}

/* Kategori seçildikten sonra */

.category-card.selected
~ .continue-button {
background: #f2eee6;

color: #111111;

border-color: #f2eee6;

cursor: pointer;

}

/* Aktif buton hover */

.category-card.selected
~ .continue-button:hover {
background: #ffffff;

border-color: #ffffff;

transform: translateY(-2px);

}

/* =========================
MOBİL
========================= */

@media (max-width: 600px) {

.category-section {
    margin-top: 70px;
}

.category-list {
    grid-template-columns: 1fr;

    gap: 14px;
}

.category-card {
    min-height: 130px;

    padding: 25px 22px;
}

.category-card h3 {
    font-size: 22px;
}

.continue-button {
    width: 100%;

    max-width: 360px;

    margin-top: 30px;
}

}

/* =========================
CATEGORY BUTTON FIX
========================= */

.category-card {
appearance: none;
-webkit-appearance: none;

display: block;

width: 100%;
min-height: 150px;

padding: 30px;

border: 1px solid rgba(242, 238, 230, 0.15);
border-radius: 12px;

background: rgba(255, 255, 255, 0.03);

color: #f2eee6;

font-family: Arial, sans-serif;
font-size: inherit;

text-align: left;

cursor: pointer;

transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;

}

/* ÜZERİNE GELİNCE */

.category-card:hover {
background: rgba(255, 255, 255, 0.07);

border-color: rgba(242, 238, 230, 0.4);

color: #f2eee6;

transform: translateY(-3px);

}

/* SEÇİLİNCE */

.category-card.selected {
background: #d6b36a;

border-color: #d6b36a;

color: #111111;

transform: translateY(-2px);

}

/* SEÇİLİ KARTIN BAŞLIĞI */

.category-card.selected h3 {
color: #111111;
}

/* SEÇİLİ KARTIN AÇIKLAMASI */

.category-card.selected p {
color: #111111;
opacity: 0.7;
}

/* KLAVYE İLE ODAKLANINCA */

.category-card:focus {
outline: none;
}

/* KLAVYE ODAĞI */

.category-card:focus-visible {
outline: 2px solid #d6b36a;
outline-offset: 3px;
}

/* MOBİL */

@media (max-width: 600px) {

.category-card {
    min-height: 130px;
    padding: 24px;
}

}

.continue-button {
cursor: pointer !important;
}

.continue-button:hover {
cursor: pointer !important;
}

/* =========================
   CATEGORY / CONTINUE BUTTON
   ========================= */

.continue-button {
    display: block;

    width: 100%;
    max-width: 280px;

    margin: 40px auto 80px;
    padding: 16px 30px;

    border: 1px solid #f2eee6;
    border-radius: 8px;

    background: #f2eee6;
    color: #111111;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.continue-button:hover {
    background: #111111;
    color: #f2eee6;

    border-color: #f2eee6;

    transform: translateY(-2px);
}

.continue-button:active {
    transform: translateY(0);
}

.continue-button:focus {
    outline: none;
}

.continue-button:focus-visible {
    outline: 2px solid #f2eee6;
    outline-offset: 4px;
}

.continue-button:disabled {
    background: rgba(242, 238, 230, 0.08);
    border-color: rgba(242, 238, 230, 0.18);

    color: rgba(242, 238, 230, 0.4);

    cursor: not-allowed;

    transform: none;
}

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

.challenge-settings-page {
min-height: 100vh;

padding: 60px 20px 100px;

}

.settings-intro {
width: 100%;
max-width: 700px;

margin: 0 auto 70px;

text-align: center;

}

.settings-intro h1 {
margin: 10px 0 25px;

font-size: clamp(48px, 8vw, 80px);

line-height: 0.95;

letter-spacing: -3px;

}

.settings-intro .challenge-description {
margin: 0 auto;

max-width: 500px;

}

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

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

.challenge-settings-page {
    width: 100%;
    min-height: 100vh;
}

.settings-intro {
    width: 100%;

    text-align: center;
}

.settings-form {
    width: 100%;
    max-width: 700px;

    margin: 0 auto;

    text-align: center;
}

/* =========================
SETTING ITEM
========================= */

.setting-item {
    width: 100%;

    margin-bottom: 25px;

    padding: 30px;

    border: 1px solid rgba(242, 238, 230, 0.13);

    border-radius: 16px;

    background: rgba(255, 255, 255, 0.035);

    text-align: center;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.setting-item:hover {
    border-color: rgba(242, 238, 230, 0.25);

    background: rgba(255, 255, 255, 0.045);
}

.setting-item h2 {
    margin: 0 0 10px;

    font-size: 25px;

    letter-spacing: -0.5px;
}

.setting-item > p {
    max-width: 430px;

    margin: 0 auto 25px;

    font-size: 14px;

    line-height: 1.5;

    opacity: 0.5;
}

/* =========================
NUMBER SELECTOR
========================= */

.number-selector {
    display: flex;

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

    gap: 25px;

    margin-left: auto;
    margin-right: auto;
}

.number-selector span {
    min-width: 130px;

    font-size: 34px;

    font-weight: bold;

    letter-spacing: -1px;
}

.minus-button,
.plus-button {
    width: 52px;
    height: 52px;

    display: flex;

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

    padding: 0;

    border: 1px solid rgba(242, 238, 230, 0.22);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    color: #f2eee6;

    font-family: Arial, sans-serif;

    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.minus-button:hover,
.plus-button:hover {
    background: rgba(255, 255, 255, 0.10);

    border-color: rgba(242, 238, 230, 0.45);

    transform: scale(1.05);
}

.minus-button:active,
.plus-button:active {
    transform: scale(0.96);
}

.minus-button:focus,
.plus-button:focus {
    outline: none;
}

.minus-button:focus-visible,
.plus-button:focus-visible {
    outline: 2px solid #d6b36a;

    outline-offset: 3px;
}

/* =========================
PROMISE BOX
========================= */

.promise-box {
    width: 100%;

    margin: 55px auto 35px;

    padding: 35px 30px;

    border: 1px solid rgba(214, 179, 106, 0.30);

    border-radius: 18px;

    background: rgba(214, 179, 106, 0.06);

    text-align: center;
}

.promise-label {
    margin: 0 0 20px;

    font-size: 11px;

    font-weight: bold;

    letter-spacing: 3px;

    color: #d6b36a;
}

.promise-text {
    margin: 0;

    font-size: 18px;

    line-height: 1.8;

    opacity: 0.75;
}

.promise-text strong {
    color: #d6b36a;

    font-weight: bold;

    opacity: 1;
}

/* =========================
PROMISE BUTTON
========================= */

.settings-form .promise-button {
    display: block;

    width: 100%;

    max-width: 420px;

    min-height: 58px;

    margin: 35px auto 0;

    padding: 17px 25px;

    border: 1px solid #f2eee6;

    border-radius: 8px;

    background: #f2eee6;

    color: #111111;

    font-family: Arial, sans-serif;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.settings-form .promise-button:hover {
    background: #111111;

    color: #f2eee6;

    transform: translateY(-2px);
}

.settings-form .promise-button:active {
    transform: translateY(0);
}

.settings-form .promise-button:focus {
    outline: none;
}

.settings-form .promise-button:focus-visible {
    outline: 2px solid #d6b36a;

    outline-offset: 4px;
}

#challenge-form {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#challenge-form .promise-button {
    margin-left: auto;
    margin-right: auto;
}

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

@media (max-width: 600px) {

.challenge-settings-page {
    padding: 40px 16px 70px;
}


.settings-intro {
    margin-bottom: 50px;
}


.settings-intro h1 {
    font-size: 48px;

    letter-spacing: -2px;
}


.setting-item {
    padding: 25px 18px;
}


.setting-item h2 {
    font-size: 22px;
}


.number-selector {
    gap: 18px;
}


.number-selector span {
    min-width: 105px;

    font-size: 30px;
}


.minus-button,
.plus-button {
    width: 48px;
    height: 48px;

    font-size: 25px;
}


.promise-box {
    margin-top: 45px;

    padding: 28px 20px;
}


.promise-text {
    font-size: 16px;

    line-height: 1.7;
}


.settings-form .promise-button {
    max-width: none;

    min-height: 56px;
}

}
/* =========================================================
   AUTH PAGES
   LOGIN / SIGNUP
   ========================================================= */

.auth-page {
    width: 100%;
    min-height: 100vh;

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

    padding: 50px 20px;
}


/* =========================================================
   AUTH CARD
   ========================================================= */

.auth-card {
    width: 100%;
    max-width: 440px;

    padding: 42px 40px 36px;

    border: 1px solid rgba(242, 238, 230, 0.12);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(10px);

    text-align: center;
}


/* =========================================================
   AUTH LOGO
   ========================================================= */

.auth-logo-link {
    display: inline-flex;

    margin-bottom: 28px;

    text-decoration: none;
}

.auth-logo {
    display: block;

    width: 120px;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    margin: 0 auto;

    border-radius: 50%;
    clip-path: circle(50%);

    box-shadow: none;
}


/* =========================================================
   AUTH HEADING
   ========================================================= */

.auth-heading {
    margin-bottom: 30px;
}

.auth-eyebrow {
    margin: 0 0 13px;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #d6b36a;

    opacity: 0.9;
}

.auth-heading h1 {
    margin: 0;

    font-size: clamp(38px, 7vw, 52px);

    line-height: 0.98;

    letter-spacing: -2px;

    font-weight: 700;

    color: #f2eee6;
}

.auth-description {
    margin: 18px auto 0;

    font-size: 14px;

    line-height: 1.5;

    color: #d8d3ca;

    opacity: 0.55;
}


/* =========================================================
   AUTH FORM
   ========================================================= */

.auth-form {
    width: 100%;

    text-align: left;
}


/* =========================================================
   AUTH FIELD
   ========================================================= */

.auth-field {
    width: 100%;

    margin-bottom: 18px;
}

.auth-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;

    color: #d8d3ca;

    opacity: 0.65;
}

.auth-field input,
.auth-field select,
.auth-field textarea {
    width: 100%;

    min-height: 52px;

    padding: 14px 16px;

    border: 1px solid rgba(242, 238, 230, 0.15);

    border-radius: 10px;

    outline: none;

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

    color: #f2eee6;

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

    font-size: 15px;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.auth-field input::placeholder {
    color: #d8d3ca;

    opacity: 0.3;
}

.auth-field input:focus {
    border-color: rgba(214, 179, 106, 0.65);

    background:
        rgba(255, 255, 255, 0.065);

    box-shadow:
        0 0 0 3px rgba(214, 179, 106, 0.08);
}


/* =========================================================
   CHECKBOX / OPTIONS
   ========================================================= */

.auth-options {
    display: flex;

    justify-content: flex-start;

    margin: -3px 0 20px;
}

.auth-checkbox {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 12px;

    color: #d8d3ca;

    opacity: 0.65;

    cursor: pointer;
}

.auth-checkbox input {
    width: 15px;
    height: 15px;

    accent-color: #d6b36a;
}


/* =========================================================
   PRIMARY BUTTON
   ========================================================= */

.auth-primary-button {
    display: flex;

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

    width: 100%;

    min-height: 54px;

    margin-top: 8px;

    padding: 15px 20px;

    border: 1px solid #f2eee6;

    border-radius: 10px;

    background: #f2eee6;

    color: #111111;

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

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.auth-primary-button:hover {
    background: #ffffff;

    border-color: #ffffff;

    transform: translateY(-2px);

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

.auth-primary-button:active {
    transform: translateY(0);
}


/* =========================================================
   DIVIDER
   ========================================================= */

.auth-divider {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    margin: 27px 0 22px;
}

.auth-divider span {
    flex: 0 0 auto;

    height: auto;

    background: none;

    font-size: 11px;

    letter-spacing: 1px;

    color: #d8d3ca;

    opacity: 0.4;
}

.auth-divider p {
    margin: 0;

    font-size: 11px;

    letter-spacing: 1px;

    color: #d8d3ca;

    opacity: 0.4;
}


/* =========================================================
   GOOGLE BUTTON
   ========================================================= */

.auth-google-button {
    display: flex;

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

    width: 100%;

    min-height: 52px;

    padding: 13px 18px;

    box-sizing: border-box;

    border: 1px solid rgba(242, 238, 230, 0.16);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.035);

    color: #f2eee6;

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

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.auth-google-button:hover {
    background: rgba(255, 255, 255, 0.075);

    border-color: rgba(242, 238, 230, 0.3);

    transform: translateY(-2px);

    text-decoration: none;
}

.auth-google-button:active {
    transform: translateY(0);
}


/* =========================================================
   ACCOUNT SWITCH
   ========================================================= */

/* =========================================================
   ACCOUNT SWITCH
   ========================================================= */

.auth-switch {
    margin: 25px 0 0;

    font-size: 13px;

    line-height: 1.5;

    color: #d8d3ca;

    opacity: 0.55;
}

.auth-switch a {
    color: #d6b36a;

    font-weight: 700;

    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}


/* =========================================================
   ERRORS
   ========================================================= */

.auth-error {
    width: 100%;

    margin-bottom: 20px;

    padding: 13px 15px;

    border: 1px solid rgba(220, 90, 90, 0.25);

    border-radius: 10px;

    background:
        rgba(220, 90, 90, 0.08);

    color: #e7aaaa;

    font-size: 12px;

    line-height: 1.5;

    text-align: left;
}

.auth-field-error {
    margin-top: 7px;

    color: #e7aaaa;

    font-size: 11px;

    line-height: 1.4;
}

.auth-help {
    margin-top: 7px;

    color: #d8d3ca;

    font-size: 10px;

    line-height: 1.5;

    opacity: 0.4;
}


/* =========================================================
   AUTH LISTS
   ========================================================= */

.auth-field ul {
    margin: 8px 0 0;
    padding-left: 18px;

    color: #d8d3ca;

    font-size: 10px;

    line-height: 1.5;

    opacity: 0.45;
}


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

@media (max-width: 600px) {

    .auth-page {
        align-items: flex-start;

        padding:
            25px
            15px
            45px;
    }


    .auth-card {
        max-width: 440px;

        padding:
            32px
            22px
            28px;

        border-radius: 18px;
    }


    .auth-logo-link {
        margin-bottom: 23px;
    }


    .auth-logo {
    width: 120px;
    height: auto;
}


    .auth-heading {
        margin-bottom: 26px;
    }


    .auth-heading h1 {
        font-size: 40px;

        letter-spacing: -1.5px;
    }


    .auth-description {
        margin-top: 15px;

        font-size: 13px;
    }


    .auth-field {
        margin-bottom: 16px;
    }


    .auth-field input {
        min-height: 50px;

        font-size: 16px;
    }


    .auth-primary-button {
        min-height: 53px;
    }




    .auth-switch {
        margin-top: 22px;

        font-size: 12px;
    }

}


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

.friends-page {
    min-height: 100vh;
    padding: 70px 20px 60px;
}

.friends-content {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}

.friends-header {
    text-align: center;
    margin-bottom: 65px;
}

.friends-header h1 {
    margin: 0;

    font-family: var(--font-display);
    font-size: clamp(44px, 7vw, 72px);
    line-height: 1;
    letter-spacing: -3px;
    font-weight: 800;
    text-transform: uppercase;
}

.friends-description {
    max-width: 500px;

    margin: 28px auto 0;

    font-size: 17px;
    line-height: 1.6;

    color: var(--ink-dim);
    opacity: 0.7;
}


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

.friends-section {
    width: 100%;
    margin-top: 50px;
}

.friends-section-eyebrow {
    margin: 0 0 18px;

    text-align: center;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;

    color: var(--ink-dim);
    opacity: 0.5;
}

.friends-section-heading {
    margin-bottom: 14px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;

    color: var(--ink-dim);
    opacity: 0.5;
}


/* =========================================================
   SEARCH
   ========================================================= */

.friends-search {
    display: flex;
    gap: 10px;

    width: 100%;
}

.friends-search input {
    flex: 1;
    min-width: 0;

    padding: 16px 18px;

    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);

    background: rgba(255, 255, 255, 0.035);

    color: var(--ink);

    font-family: var(--font-body);
    font-size: 15px;

    outline: none;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}

.friends-search input::placeholder {
    color: var(--ink-dim);
    opacity: 0.45;
}

.friends-search input:focus {
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.055);
}

.friends-search button {
    min-width: 100px;

    padding: 0 22px;

    border: 1px solid var(--ink);
    border-radius: var(--radius-sm);

    background: var(--ink);
    color: var(--accent-ink);

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.friends-search button:hover {
    background: #ffffff;
    transform: translateY(-2px);
}


/* =========================================================
   FRIEND LIST
   ========================================================= */

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.friend-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    width: 100%;

    padding: 18px 20px;

    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.friend-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(242, 238, 230, 0.3);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.025)
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   USER IDENTITY
   ========================================================= */

.friend-card-identity {
    display: flex;
    align-items: center;

    gap: 14px;

    min-width: 0;
}

.friend-avatar {
    flex: 0 0 auto;

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

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: rgba(242, 238, 230, 0.09);

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

    color: var(--ink);

    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
}

.friend-card-identity strong {
    display: block;

    overflow: hidden;

    font-size: 16px;
    font-weight: 600;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-card-identity span {
    display: block;

    margin-top: 4px;

    color: var(--ink-dim);

    font-size: 12px;

    opacity: 0.5;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.friend-actions {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;
}

.friend-card form {
    margin: 0;
}

.friend-action-button {
    min-height: 40px;

    padding: 10px 14px;

    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);

    background: transparent;
    color: var(--ink);

    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.friend-action-button:hover {
    transform: translateY(-1px);
}

.friend-action-primary {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--accent-ink);
}

.friend-action-primary:hover {
    background: #ffffff;
    border-color: #ffffff;
}

.friend-action-muted {
    color: var(--ink-dim);
    opacity: 0.65;
}

.friend-action-muted:hover {
    border-color: var(--error);
    color: var(--error);
    opacity: 1;
}


/* =========================================================
   STATUS
   ========================================================= */

.friend-status {
    flex-shrink: 0;

    padding: 8px 12px;

    border: 1px solid var(--border-soft);
    border-radius: var(--radius-full);

    color: var(--ink-dim);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;

    opacity: 0.6;
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.friends-empty {
    display: flex;
    flex-direction: column;

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

    gap: 7px;

    min-height: 100px;

    padding: 24px;

    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);

    background: rgba(255, 255, 255, 0.025);

    text-align: center;
}

.friends-empty strong {
    font-size: 14px;
    font-weight: 600;
}

.friends-empty span {
    color: var(--ink-dim);

    font-size: 13px;

    opacity: 0.5;
}


/* =========================================================
   SEARCH RESULTS
   ========================================================= */

.friends-results {
    margin-top: 28px;
}


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

.friends-navigation {
    margin-top: 65px;
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.profile-stats > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 12px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-card);
    text-align: center;
}

.profile-stats span {
    color: var(--ink-dim);
    font-size: 11px;
    opacity: 0.65;
}

.profile-stats strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 28px;
}

.read-only-notice {
    margin: -28px auto 36px;
    color: var(--accent);
    font-size: 13px;
    opacity: 0.85;
}

.new-category-form .text-input,
.today-action .text-input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: rgba(0, 0, 0, 0.25);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
}

.new-category-form .text-input:focus,
.today-action .text-input:focus {
    outline: none;
    border-color: var(--accent);
}

.today-action label {
    display: block;
    margin-bottom: 8px;
    color: var(--ink-dim);
    font-size: 12px;
    font-weight: 700;
}

.today-action ul.errorlist {
    margin: 8px 0 0;
    padding: 0;
    color: var(--error);
    list-style: none;
    font-size: 12px;
}

.completed-page,
.completed-content,
.completed-header,
.share-card-wrapper,
.share-card,
.share-actions,
.share-button,
.download-button,
.back-button {
    box-sizing: border-box;
}

.completed-page {
    min-height: 100vh;
    padding: 40px 20px 80px;
}

.completed-header,
.completed-content {
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.completed-logo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
}

.completed-content {
    padding: 65px 20px 0;
}

.completed-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(48px, 8vw, 90px);
    line-height: 0.95;
    text-transform: uppercase;
}

.completed-description {
    max-width: 500px;
    margin: 24px auto 0;
    color: var(--ink-dim);
    font-size: 17px;
    line-height: 1.6;
}

.share-card-wrapper {
    width: 100%;
    max-width: 420px;
    margin: 42px auto 0;
}

.share-card {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--surface-card);
}

.share-card canvas {
    display: block;
    width: 100%;
    height: auto;
}

.share-actions {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.share-button,
.download-button,
.back-button {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-decoration: none;
    cursor: pointer;
}

@media (max-width: 600px) {
    .profile-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .read-only-notice {
        margin-top: -12px;
    }
}


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

@media (max-width: 600px) {

    .friends-page {
        padding:
            45px 16px 45px;
    }

    .friends-header {
        margin-bottom: 48px;
    }

    .friends-header h1 {
        font-size: clamp(40px, 13vw, 58px);
        letter-spacing: -2px;
    }

    .friends-description {
        font-size: 15px;
    }

    .friends-section {
        margin-top: 42px;
    }

    .friends-search {
        flex-direction: column;
    }

    .friends-search button {
        width: 100%;
        min-height: 48px;
    }

    .friend-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;

        padding: 17px;
    }

    .friend-card-identity {
        width: 100%;
    }

    .friend-actions {
        width: 100%;
    }

    .friend-actions form {
        flex: 1;
    }

    .friend-action-button {
        width: 100%;
    }

    .friend-status {
        align-self: flex-start;
    }
}

/* =========================================================
   CHALLENGE INVITATIONS
   ========================================================= */

.challenge-invite-section {
    margin-top: 48px;
    padding: 28px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 18px;
    background: #fff;
}

.challenge-invite-header {
    margin-bottom: 22px;
}

.challenge-invite-eyebrow {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.challenge-invite-header h2 {
    margin: 0 0 8px;
}

.challenge-invite-header p:last-child {
    margin: 0;
    opacity: 0.7;
}

.challenge-invite-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.challenge-invite-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
}

.challenge-invite-user {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.challenge-invite-avatar {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 700;
}

.challenge-invite-user-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.challenge-invite-user-info strong {
    font-size: 15px;
}

.challenge-invite-user-info span {
    font-size: 12px;
    opacity: 0.6;
}

.challenge-invite-button {
    border: 0;
    border-radius: 10px;
    padding: 10px 16px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .challenge-invite-section {
        padding: 20px;
    }

    .challenge-invite-item {
        align-items: flex-start;
    }

    .challenge-invite-button {
        padding: 9px 12px;
    }
}

.challenge-member-profile-link {
    color: inherit;
    text-decoration: none;
}

.challenge-member-profile-link:hover {
    color: var(--accent);
}

.settings-no-script {
    margin: 0 auto 24px;
    padding: 14px 18px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--ink-dim);
    font-size: 13px;
    text-align: center;
}

.started-content form {
    width: 100%;
    max-width: 440px;
}

.started-content form input {
    width: 100%;
    min-height: 52px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--ink);
    font: inherit;
}

.started-content form input:focus {
    outline: none;
    border-color: var(--accent);
}