/* ─────────────────────────────────────────────────────────────────────────────
   Fonts
───────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Pacifico&family=Quicksand:wght@400;500;600;700&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   Design Tokens
───────────────────────────────────────────────────────────────────────────── */
:root {
    /* Brand palette — The Wedding Journey */
    --pink:    #C8697A;   /* deep rose / garnet   */
    --yellow:  #E8A93A;   /* warm amber / gold     */
    --mint:    #5BA08A;   /* sage teal             */
    --blue:    #3A7CA5;   /* ocean blue            */
    --coral:   #D4603A;   /* terracotta            */
    --purple:  #8B5E8C;   /* dusty plum / mauve    */
    --cream:   #F7F0E6;   /* parchment             */
    --dark:    #1E2A3A;   /* deep navy             */
    --white:   #FFFDF8;   /* warm white            */
    --muted:   #4b443f;   /* warm grey-brown       */
    --border:  #E5D9C8;   /* warm beige            */

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow:    0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);

    /* Radii */
    --radius-sm: 8px;
    --radius:    16px;
    --radius-lg: 24px;
    --radius-pill: 9999px;

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;

    /* Typography */
    --font-body:    'Quicksand', sans-serif;
    --font-display: 'Pacifico', cursive;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reset & Base
───────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background-color: var(--cream);
    color: var(--dark);
    min-height: 100dvh;
    line-height: 1.6;

    /* Subtle ambient gradients — warm sunset meets ocean */
    background-image:
        radial-gradient(circle at 15% 20%,  rgba(232, 169,  58, 0.13) 0%, transparent 50%),
        radial-gradient(circle at 85% 75%,  rgba( 58, 124, 165, 0.10) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%,  rgba(200, 105, 122, 0.07) 0%, transparent 40%);
}

/* Subtle crosshatch — like old map paper */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px),
        radial-gradient(circle, var(--coral)  1.5px, transparent 1.5px),
        radial-gradient(circle, var(--yellow) 1.5px, transparent 1.5px);
    background-size: 48px 48px, 48px 48px, 192px 192px, 144px 144px;
    background-position: 0 0, 0 0, 24px 24px, 96px 72px;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Layout
───────────────────────────────────────────────────────────────────────────── */
.container {
    position: relative;
    z-index: 1;
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.container--narrow { max-width: 480px; }

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   Typography helpers
───────────────────────────────────────────────────────────────────────────── */
.gradient-text {
    color: var(--dark);
}

.muted { color: var(--muted); }
.text-center { text-align: center; }

/* ─────────────────────────────────────────────────────────────────────────────
   Site Header
───────────────────────────────────────────────────────────────────────────── */
.site-header {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--space-8) 0 var(--space-4);
}

.site-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.2;
}

.subtitle {
    font-size: 1rem;
    color: var(--muted);
    margin-top: var(--space-2);
    font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Card
───────────────────────────────────────────────────────────────────────────── */
.card {
    position: relative;
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow);
    margin-bottom: var(--space-6);
    animation: slideUp 0.4s ease forwards;
}

/* Gradient border via pseudo-element */
.card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: calc(var(--radius-lg) + 2px);
    background: linear-gradient(135deg, var(--yellow), var(--coral), var(--pink));
    z-index: -1;
    opacity: 0.40;
}

.card__title {
    font-family: var(--font-display);
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: var(--space-6);
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Buttons
───────────────────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
.btn:active { transform: translateY(0); }

.btn--primary { background: linear-gradient(135deg, var(--pink),   var(--coral));  color: var(--white); }
.btn--success { background: linear-gradient(135deg, var(--mint),   var(--blue));   color: var(--white); }
.btn--warning { background: linear-gradient(135deg, var(--yellow), #FFA500);       color: var(--dark);  }
.btn--danger  { background: linear-gradient(135deg, #ff4444, #cc0000);             color: var(--white); }
.btn--purple  { background: linear-gradient(135deg, var(--purple), var(--blue));   color: var(--white); }
.btn--ghost   { background: var(--border); color: var(--muted); }

.btn--sm  { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }
.btn--lg  { padding: var(--space-4) var(--space-8); font-size: 1.1rem; }
.btn--full { width: 100%; text-align: center; }

.btn-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   Forms
───────────────────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-5); }

.label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-2);
    color: var(--dark);
    font-size: 0.95rem;
}

.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--cream);
    transition: border-color 0.2s;
    color: var(--dark);
}

.input:focus        { outline: none; border-color: var(--pink); }
textarea.input      { resize: vertical; min-height: 100px; }
.input--center      { text-align: center; font-weight: 700; }

.inline-form {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    align-items: flex-end;
}

.word-inputs {
    display: flex;
    gap: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Alerts
───────────────────────────────────────────────────────────────────────────── */
.alert {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    font-weight: 600;
}

.alert--success {
    background: rgba(107, 203, 119, 0.20);
    color: #2d8a3e;
    border-left: 4px solid var(--mint);
}

.alert--error {
    background: rgba(255, 107, 107, 0.20);
    color: #8a0000;
    border-left: 4px solid var(--coral);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Badges
───────────────────────────────────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 700;
}

.badge--success { background: rgba(107, 203, 119, 0.20); color: #2d8a3e; }
.badge--warning { background: rgba(255, 217,  61, 0.30); color: #8a6d00; }

/* ─────────────────────────────────────────────────────────────────────────────
   Navigation
───────────────────────────────────────────────────────────────────────────── */
.nav {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-8);
    justify-content: center;
}

.nav__link {
    text-decoration: none;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--white);
    color: var(--dark);
    border: 2px solid var(--border);
    transition: all 0.2s;
}

.nav__link:hover,
.nav__link--active {
    background: linear-gradient(135deg, var(--coral), var(--yellow));
    color: var(--white);
    border-color: transparent;
    transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Table
───────────────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.table th {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    font-weight: 700;
}

.table th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.table th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }

.table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 2px solid #f5f5f5;
}

.table tr:hover td { background: rgba(200, 105, 122, 0.05); }

.table__link-cell {
    font-size: 0.75rem;
    color: var(--muted);
    word-break: break-all;
}

.link { color: var(--pink); }

/* ─────────────────────────────────────────────────────────────────────────────
   Word Tags
───────────────────────────────────────────────────────────────────────────── */
.word-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.word-tag {
    display: inline-block;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--pink), var(--coral));
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
}

.word-tag--groom { background: linear-gradient(135deg, var(--blue), var(--mint)); }

/* ─────────────────────────────────────────────────────────────────────────────
   Stats
───────────────────────────────────────────────────────────────────────────── */
.stats {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 130px;
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--space-5);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.stat-card__number { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }
.stat-card__label  { font-size: 0.85rem; color: var(--muted); margin-top: var(--space-1); }

/* ─────────────────────────────────────────────────────────────────────────────
   Tabs
───────────────────────────────────────────────────────────────────────────── */
.tabs {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

.tab {
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-weight: 600;
    border: 2px solid var(--border);
    background: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: all 0.2s;
}

.tab:hover,
.tab--active {
    background: linear-gradient(135deg, var(--coral), var(--yellow));
    color: var(--white);
    border-color: transparent;
}

.tab-panel         { display: none; }
.tab-panel--active { display: block; }

/* ─────────────────────────────────────────────────────────────────────────────
   Admin specifics
───────────────────────────────────────────────────────────────────────────── */
.section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    margin-bottom: var(--space-4);
    color: var(--coral);
}

.section-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--space-4);
}

.section-label--bride { color: var(--pink); }
.section-label--groom { color: var(--blue); }

.game-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--cream);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-3);
}

.game-control__player { font-weight: 700; font-size: 1.1rem; }

.info-box {
    margin-top: var(--space-6);
    padding: var(--space-4);
    background: var(--cream);
    border-radius: var(--radius-sm);
    line-height: 2;
}

.submission-card {
    border: 2px solid #f0f0f0;
    border-radius: var(--radius);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.submission-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.submission-card__photo {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    margin-top: var(--space-3);
}

.photo-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.caption { font-style: italic; color: #666; }

.logout-wrap { display: flex; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }

/* ─────────────────────────────────────────────────────────────────────────────
   Home page
───────────────────────────────────────────────────────────────────────────── */
.home-container { max-width: 900px; }

.rings {
    font-size: 4rem;
    display: inline-block;
    animation: swing 2s ease-in-out infinite;
}

@keyframes swing {
    0%, 100% { transform: rotate(-5deg); }
    50%       { transform: rotate( 5deg); }
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-5);
    margin-top: var(--space-8);
}

.home-card {
    position: relative;
    overflow: hidden;
    background: var(--white);
    border-radius: var(--radius);
    padding: var(--space-8) var(--space-6);
    text-align: center;
    box-shadow: var(--shadow);
    text-decoration: none;
    color: var(--dark);
    border: 3px solid transparent;
    transition: all 0.3s ease;
}

.home-card__pending {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ff9500, #ff6b00);
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    box-shadow: 0 -2px 8px rgba(255, 107, 0, 0.4);
    animation: pendingPulse 1.8s ease-in-out infinite;
}

@keyframes pendingPulse {
    0%, 100% { opacity: 1;    box-shadow: 0 -2px 8px  rgba(255, 107, 0, 0.4); }
    50%       { opacity: 0.82; box-shadow: 0 -2px 16px rgba(255, 107, 0, 0.7); }
}

/* push card content up so the band doesn't overlap text */
.home-card:has(.home-card__pending) {
    padding-bottom: calc(var(--space-8) + 24px);
}

.home-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.home-card--bride   { border-color: var(--pink);   }
.home-card--groom   { border-color: var(--blue);   }
.home-card--admin   { border-color: var(--yellow); }
.home-card--profile { border-color: var(--purple); }

.home-card--closed {
    opacity: 0.55;
    filter: grayscale(0.6);
    pointer-events: none;
    border-color: var(--border);
}
.home-card--closed:hover { transform: none; box-shadow: var(--shadow); }

.home-card__closed {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--muted);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    border-radius: 0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
}

.home-card:has(.home-card__closed) {
    padding-bottom: calc(var(--space-8) + 24px);
}

.home-card__icon  { font-size: 3rem; display: block; margin-bottom: var(--space-3); cursor: default; }
.home-card__title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: var(--space-2); }
.home-card__desc  { font-size: 0.9rem; color: var(--muted); }

.site-footer {
    text-align: center;
    margin-top: var(--space-12);
    color: #ccc;
    font-size: 0.85rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Submit page
───────────────────────────────────────────────────────────────────────────── */
.heart-divider {
    text-align: center;
    margin: var(--space-6) 0;
    font-size: 1.5rem;
    letter-spacing: 4px;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.15); }
}

.photo-preview { margin-top: var(--space-3); }
.photo-preview img { max-width: 200px; border-radius: var(--radius-sm); }

.success-screen { text-align: center; padding: var(--space-12) var(--space-4); }

.floating { animation: float 3s ease-in-out infinite; }

@keyframes float {
    0%, 100% { transform: translateY(0);     }
    50%       { transform: translateY(-10px); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Game page
───────────────────────────────────────────────────────────────────────────── */
.game-wrapper {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-4) var(--space-6) 4rem;
}

.game-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    text-align: center;
    margin-bottom: var(--space-1);
}

/* Slides */
.slide          { display: none; }
.slide--active  {
    display: block;
    animation: slideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes slideIn {
    from { opacity: 0; transform: scale(0.95) translateY(20px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* Progress */
.progress-wrap  { margin-bottom: var(--space-6); }
.progress-label { font-size: 0.85rem; color: var(--muted); margin-bottom: var(--space-2); font-weight: 600; }
.progress-bar   { height: 8px; background: var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--yellow), var(--coral), var(--pink));
    transition: width 0.4s ease;
}

/* Mystery label */
.mystery-label {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

/* Big word pills */
.big-words {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-6) 0;
    justify-content: center;
}

.big-word {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 4vw, 2rem);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--pink), var(--coral));
    color: var(--white);
}

.big-word--groom { background: linear-gradient(135deg, var(--blue), var(--mint)); }

/* Guess area */
.guess-area         { margin: var(--space-6) 0; }
.guess-area__prompt { font-weight: 700; font-size: 1.1rem; margin-bottom: var(--space-3); }

.guest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2);
}

.guest-btn {
    padding: var(--space-2) var(--space-4);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.2s;
    text-align: center;
}

.guest-btn:hover                { border-color: var(--pink); color: var(--pink); transform: translateY(-2px); }
.guest-btn--correct             { border-color: var(--mint);  background: var(--mint);  color: var(--white); }
.guest-btn--groom-correct       { border-color: var(--mint);  background: var(--mint);  color: var(--white); }
.guest-btn--wrong               { border-color: var(--coral); background: var(--coral); color: var(--white); opacity: 0.6; }

/* Reveal box */
.reveal-box {
    padding: var(--space-6);
    border-radius: var(--radius);
    margin-top: var(--space-4);
    text-align: center;
    animation: popIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}

.reveal-box--correct { background: rgba(107, 203, 119, 0.15); border: 2px solid var(--mint); }
.reveal-box--wrong   { background: rgba(200, 105, 122, 0.10); border: 2px solid var(--pink); }

.reveal-box__emoji { font-size: 2.5rem; margin-bottom: var(--space-2); }
.reveal-box__text  { color: var(--muted); margin-bottom: var(--space-2); }
.reveal-box__name  { font-family: var(--font-display); font-size: 1.8rem; margin-bottom: var(--space-5); }

/* Photo frame */
.photo-frame {
    border-radius: var(--radius);
    overflow: hidden;
    margin: var(--space-4) 0;
    box-shadow: var(--shadow);
}

.photo-frame img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

/* Caption box inside reveal */
.caption-box {
    padding: var(--space-4);
    background: rgba(200, 105, 122, 0.1);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--pink);
    font-style: italic;
    color: #666;
    margin: var(--space-3) 0;
}

/* Misc game */
.emoji-big { font-size: 5rem; display: block; text-align: center; margin-bottom: var(--space-4); }

.spinner {
    font-size: 3rem;
    display: inline-block;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Challenge 1 – Three Words list
───────────────────────────────────────────────────────────────────────────── */
.c1-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 2px solid var(--border);
    flex-wrap: wrap;
}

.c1-row:last-child { border-bottom: none; }

.c1-row__words {
    display: flex;
    gap: var(--space-2);
    flex: 1;
    flex-wrap: wrap;
}

.c1-row__form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.c1-row__select { width: auto; padding: var(--space-2) var(--space-3); }

.c1-row__result {
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.c1-row__result--correct { color: #2d8a3e; }
.c1-row__result--wrong   { color: #c0392b; }

.c1-row__wrong-guess {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.85rem;
}

.c1-row__tries {
    font-weight: 400;
    color: var(--muted);
    font-size: 0.8rem;
    margin-left: var(--space-2);
}

.c1-row__action {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Challenge 2 – Poem
───────────────────────────────────────────────────────────────────────────── */
.c2-last-line {
    margin-bottom: var(--space-5);
}

.c2-last-line__label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--muted);
    margin-bottom: var(--space-2);
}

.c2-blockquote {
    border-left: 4px solid var(--pink);
    padding: var(--space-3) var(--space-5);
    background: rgba(200, 105, 122, 0.06);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--dark);
    margin: 0;
}

.c2-poem {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: poem-line;
}

.c2-poem__line {
    counter-increment: poem-line;
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border);
}

.c2-poem__line:last-child { border-bottom: none; }

.c2-poem__line::before {
    content: counter(poem-line);
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 700;
    min-width: 1.5rem;
    text-align: right;
    flex-shrink: 0;
}

.c2-poem__text {
    font-style: italic;
    flex: 1;
}

.c2-poem__author {
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Profile page
───────────────────────────────────────────────────────────────────────────── */
.profile-avatar {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-6);
}

.profile-avatar__img {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow);
    border: 4px solid var(--pink);
}

.profile-avatar__placeholder {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--coral), var(--pink));
    color: var(--white);
    font-family: var(--font-display);
    font-size: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow);
}

.profile-name {
    font-family: var(--font-display);
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: var(--space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Utilities
───────────────────────────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    color: var(--muted);
    padding: var(--space-8);
}