@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
    --seafoam-dark: #3d8478;
    --seafoam: #63b8a7;
    --seafoam-light: #dff4ef;
    --seafoam-pale: #f0faf8;

    --ocean-blue: #87b9d4;
    --ocean-blue-light: #d9ecf6;
    --ocean-blue-pale: #eff8fc;

    --gold: #b7872f;
    --gold-light: #fff2d6;

    --coral: #bf6661;
    --coral-light: #fdebea;

    --background: #eef8fb;
    --surface: rgba(255, 255, 255, 0.92);
    --surface-solid: #ffffff;
    --surface-muted: #f4fafb;

    --text-primary: #29413e;
    --text-secondary: #6c817e;
    --border: #cde3eb;

    --shadow-small: 0 5px 16px rgba(67, 111, 122, 0.08);
    --shadow-medium: 0 16px 38px rgba(67, 111, 122, 0.14);

    --radius-small: 13px;
    --radius-medium: 19px;
    --radius-large: 25px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Manrope", Arial, Helvetica, sans-serif;
    background:
        radial-gradient(circle at 8% 8%, rgba(135, 185, 212, 0.38), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(99, 184, 167, 0.25), transparent 29%),
        radial-gradient(circle at 18% 88%, rgba(217, 236, 246, 0.7), transparent 30%),
        linear-gradient(180deg, #f8fcfd 0%, #eef8fb 100%);
    color: var(--text-primary);
}

body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border: 2px solid rgba(135, 185, 212, 0.22);
    border-radius: 45% 55% 60% 40%;
    pointer-events: none;
}

body::before {
    width: 330px;
    height: 330px;
    top: 90px;
    left: -190px;
    transform: rotate(18deg);
}

body::after {
    width: 390px;
    height: 390px;
    right: -230px;
    bottom: 90px;
    transform: rotate(-16deg);
}

button,
input,
select,
textarea {
    font: inherit;
}

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

.app-container {
    width: 100%;
    min-height: 100vh;
}

.hidden {
    display: none !important;
}

.launch-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 18px;
}

.launch-card {
    width: 100%;
    max-width: 430px;
    padding: 38px 30px 30px;
    background: var(--surface);
    border: 1px solid rgba(205, 227, 235, 0.95);
    border-radius: 31px;
    box-shadow: var(--shadow-medium);
    backdrop-filter: blur(18px);
}

.launch-logo {
    text-align: center;
    margin-bottom: 30px;
}

.launch-logo-icon {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 23px;
    background: linear-gradient(145deg, var(--seafoam-light), var(--ocean-blue-light));
    border: 1px solid rgba(135, 185, 212, 0.3);
    font-size: 34px;
    box-shadow: var(--shadow-small);
    transform: rotate(-3deg);
}

.launch-logo h1 {
    margin: 0;
    color: var(--seafoam-dark);
    font-size: clamp(31px, 7vw, 43px);
    line-height: 1.08;
    letter-spacing: -1.7px;
}

.launch-logo p {
    margin: 9px 0 0;
    color: var(--text-secondary);
    font-weight: 600;
}

label {
    display: block;
    margin: 17px 0 7px;
    font-size: 14px;
    font-weight: 700;
}

input,
select,
textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-small);
    outline: none;
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--seafoam);
    box-shadow: 0 0 0 4px rgba(99, 184, 167, 0.15);
    background: var(--surface-solid);
}

textarea {
    resize: vertical;
}

.checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0;
    font-weight: 600;
    cursor: pointer;
}

.checkbox-row input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--seafoam-dark);
}

.keep-signed-in-row {
    margin-bottom: 20px;
}

.primary-button,
.secondary-button {
    width: 100%;
    min-height: 48px;
    padding: 13px 18px;
    border: none;
    border-radius: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.primary-button {
    background: linear-gradient(135deg, var(--seafoam), var(--seafoam-dark));
    color: white;
    box-shadow: 0 9px 20px rgba(61, 132, 120, 0.23);
}

.primary-button:hover {
    box-shadow: 0 11px 24px rgba(61, 132, 120, 0.28);
}

.secondary-button {
    margin-top: 10px;
    background: var(--surface-muted);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.primary-button:active,
.secondary-button:active,
.bottom-nav-button:active,
.profile-button:active,
.home-logo-button:active {
    transform: scale(0.98);
}

.text-button {
    display: block;
    margin: 16px auto 0;
    padding: 6px;
    border: none;
    background: transparent;
    color: var(--seafoam-dark);
    font-weight: 700;
    cursor: pointer;
}

.inline-text-button {
    margin: 0;
    text-align: right;
    font-size: 13px;
}

.large-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 57px;
    margin-bottom: 20px;
    border-radius: 19px;
    font-size: 17px;
}

.large-action-button span {
    font-size: 22px;
}

.main-app {
    width: min(100%, 720px);
    min-height: 100vh;
    margin: 0 auto;
    padding: 84px 18px 106px;
}

.top-bar {
    position: fixed;
    z-index: 20;
    top: 0;
    left: 50%;
    width: min(100%, 720px);
    height: 70px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
    background: rgba(238, 248, 251, 0.88);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(205, 227, 235, 0.88);
}

.home-logo-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px 7px 7px;
    border: none;
    border-radius: 14px;
    background: transparent;
    color: var(--seafoam-dark);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.8px;
    cursor: pointer;
}

.top-logo-icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: linear-gradient(145deg, var(--seafoam-light), var(--ocean-blue-light));
    border: 1px solid rgba(135, 185, 212, 0.25);
}

.profile-button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--shadow-small);
    font-size: 20px;
    cursor: pointer;
}

.screen {
    animation: screenFade 0.22s ease;
}

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

.welcome-section,
.page-introduction {
    margin-bottom: 22px;
}

.time-greeting,
.eyebrow {
    margin: 0 0 5px;
    color: var(--seafoam-dark);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.welcome-section h1,
.page-introduction h1 {
    margin: 0;
    font-size: clamp(29px, 7vw, 40px);
    line-height: 1.15;
    letter-spacing: -1.25px;
}

.welcome-section > p:last-child,
.page-introduction > p:last-child {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.55;
}

.section-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.section-heading-row h2,
.goal-card h2,
.content-card h2,
.activity-history h2 {
    margin: 0;
    font-size: 19px;
    letter-spacing: -0.45px;
}

.status-badge {
    flex-shrink: 0;
    padding: 7px 10px;
    border-radius: 999px;
    background: var(--seafoam-light);
    color: var(--seafoam-dark);
    font-size: 11px;
    font-weight: 800;
}

.stats-grid,
.team-stats-grid,
.personal-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.stat-card,
.summary-card,
.goal-card,
.content-card,
.activity-history,
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-small);
    backdrop-filter: blur(12px);
}

.stat-card,
.summary-card {
    padding: 18px 10px;
    border-radius: var(--radius-medium);
    text-align: center;
}

.stat-card:nth-child(1),
.summary-card:nth-child(1) {
    background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(223,244,239,0.82));
}

.stat-card:nth-child(2),
.summary-card:nth-child(2) {
    background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(217,236,246,0.82));
}

.stat-card:nth-child(3),
.summary-card:nth-child(3) {
    background: linear-gradient(160deg, rgba(255,255,255,0.96), rgba(240,250,248,0.9));
}

.stat-icon,
.summary-card > span {
    display: block;
    margin-bottom: 8px;
    font-size: 23px;
}

.stat-card h3 {
    margin: 0 0 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
}

.stat-card p,
.summary-card strong {
    display: block;
    margin: 0;
    color: var(--seafoam-dark);
    font-size: 24px;
    font-weight: 800;
}

.summary-card p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.3;
}

.goal-card,
.content-card,
.activity-history,
.form-card {
    padding: 20px;
    border-radius: var(--radius-large);
    margin-bottom: 20px;
}

.goal-card {
    background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(239,248,252,0.95));
}

.goal-card-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.goal-card-heading > strong {
    flex-shrink: 0;
    color: var(--seafoam-dark);
}

.goal-card > p,
.content-card > p {
    margin: 12px 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.progress-track {
    width: 100%;
    height: 12px;
    margin-top: 18px;
    overflow: hidden;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--seafoam-light), var(--ocean-blue-light));
}

.progress-fill {
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--seafoam), var(--seafoam-dark));
    transition: width 0.35s ease;
}

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

.activity-card {
    padding: 14px 15px;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(239,248,252,0.85));
    border: 1px solid var(--border);
    border-left: 5px solid var(--seafoam);
    border-radius: 14px;
}

.activity-card h3 {
    margin: 0 0 7px;
}

.activity-card p {
    margin: 4px 0;
    color: var(--text-secondary);
}

.activity-time {
    font-size: 12px;
}

.empty-message {
    margin: 4px 0;
    padding: 15px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--surface-muted), var(--ocean-blue-pale));
    border: 1px solid rgba(205, 227, 235, 0.7);
    color: var(--text-secondary);
    text-align: center;
}

.form-card label:first-child {
    margin-top: 0;
}

.optional-text {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.previous-fields {
    padding: 15px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--ocean-blue-pale);
}

.form-message {
    min-height: 20px;
    margin: 10px 0;
    color: var(--coral);
    font-size: 14px;
    font-weight: 700;
}

.leaderboard-list {
    margin-top: 14px;
}

.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px;
    border-radius: 14px;
    background: linear-gradient(145deg, var(--surface-muted), var(--ocean-blue-pale));
    border: 1px solid rgba(205, 227, 235, 0.7);
}

.leaderboard-row p {
    margin: 3px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.rank-number {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gold-light);
    color: var(--gold);
    font-weight: 800;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 15px;
}

.badge-card {
    padding: 15px 10px;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--gold-light), rgba(255,255,255,0.9));
    border: 1px solid rgba(183, 135, 47, 0.16);
    text-align: center;
}

.badge-card span {
    display: block;
    margin-bottom: 8px;
    font-size: 25px;
}

.badge-card strong {
    display: block;
    font-size: 12px;
}

.badge-card p {
    margin: 5px 0 0;
    color: var(--text-secondary);
    font-size: 10px;
    line-height: 1.4;
}

.badge-card.locked {
    filter: grayscale(0.72);
    opacity: 0.58;
}

.back-button {
    margin-bottom: 14px;
    padding: 8px 0;
    border: none;
    background: transparent;
    color: var(--seafoam-dark);
    font-weight: 800;
    cursor: pointer;
}

.bottom-navigation {
    position: fixed;
    z-index: 25;
    bottom: 0;
    left: 50%;
    width: min(100%, 720px);
    min-height: 82px;
    padding: 9px 18px max(9px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: end;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(67, 111, 122, 0.09);
}

.bottom-nav-button {
    min-height: 58px;
    padding: 7px 5px;
    border: none;
    border-radius: 15px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.bottom-nav-button span {
    display: block;
}

.bottom-nav-icon {
    margin-bottom: 4px;
    font-size: 21px;
}

.bottom-nav-button.active {
    background: linear-gradient(145deg, var(--seafoam-pale), var(--ocean-blue-pale));
    color: var(--seafoam-dark);
}

.log-nav-button {
    position: relative;
    overflow: visible;
    color: var(--seafoam-dark);
}

.log-icon {
    display: grid !important;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: -24px auto 3px;
    border: 5px solid rgba(255,255,255,0.96);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--seafoam), var(--seafoam-dark));
    color: white;
    box-shadow: 0 8px 19px rgba(61, 132, 120, 0.28);
    font-size: 27px;
}

.profile-overlay {
    position: fixed;
    z-index: 40;
    inset: 0;
    background: rgba(32, 58, 60, 0.4);
    backdrop-filter: blur(4px);
}

.profile-drawer {
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    width: min(92%, 420px);
    height: 100vh;
    overflow-y: auto;
    background: linear-gradient(180deg, #ffffff 0%, #f3fafc 100%);
    box-shadow: -14px 0 36px rgba(67, 111, 122, 0.2);
    animation: drawerSlide 0.22s ease;
}

@keyframes drawerSlide {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.drawer-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(15px);
}

.profile-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-summary p {
    margin: 4px 0 0;
    max-width: 220px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    text-overflow: ellipsis;
}

.profile-avatar {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--seafoam-light), var(--ocean-blue-light));
    border: 1px solid rgba(135, 185, 212, 0.24);
    font-size: 22px;
}

.drawer-close-button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--surface-muted);
    color: var(--text-primary);
    cursor: pointer;
}

.drawer-content {
    padding: 20px;
}

.settings-section {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.settings-message {
    min-height: 18px;
    color: var(--seafoam-dark);
    font-size: 13px;
    font-weight: 700;
}

.danger-button {
    color: var(--coral);
}

body.dark-theme {
    --background: #172a2b;
    --surface: rgba(31, 49, 48, 0.96);
    --surface-solid: #1f3130;
    --surface-muted: #293d3c;
    --text-primary: #f2faf8;
    --text-secondary: #b9cbc8;
    --border: #405958;
    background:
        radial-gradient(circle at 10% 10%, rgba(135,185,212,0.15), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(99,184,167,0.15), transparent 28%),
        #172a2b;
}

@media (max-width: 560px) {
    .main-app {
        padding-inline: 13px;
    }

    .top-bar {
        padding-inline: 13px;
    }

    .stats-grid,
    .team-stats-grid,
    .personal-highlight-grid {
        gap: 8px;
    }

    .stat-card,
    .summary-card {
        padding: 16px 5px;
    }

    .stat-card p,
    .summary-card strong {
        font-size: 20px;
    }

    .badge-grid {
        grid-template-columns: 1fr;
    }

    .section-heading-row {
        align-items: flex-start;
    }

    .inline-text-button {
        max-width: 115px;
    }
}

@media (max-width: 380px) {
    .launch-card {
        padding-inline: 21px;
    }

    .home-logo-button {
        font-size: 17px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-card {
        display: grid;
        grid-template-columns: 36px 1fr auto;
        align-items: center;
        text-align: left;
    }

    .stat-icon {
        margin: 0;
    }

    .stat-card h3 {
        margin: 0;
    }
}


/* ANNOUNCEMENTS */

.announcement-card {
    margin-bottom: 20px;
    padding: 19px 20px;
    border: 1px solid rgba(135, 185, 212, 0.55);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            145deg,
            rgba(217, 236, 246, 0.92),
            rgba(223, 244, 239, 0.92)
        );
    box-shadow: var(--shadow-small);
}

.announcement-card h2 {
    margin: 0;
    font-size: 19px;
}

.announcement-card p:last-child {
    margin: 8px 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ADMIN */

.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.admin-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            var(--surface-muted),
            var(--ocean-blue-pale)
        );
}

.admin-list-item p {
    margin: 4px 0 0;
    color: var(--text-secondary);
    font-size: 12px;
}

.compact-button {
    width: auto;
    min-height: 38px;
    margin: 0;
    padding: 9px 12px;
    flex-shrink: 0;
    font-size: 12px;
}

.mini-badge {
    display: inline-block;
    margin-top: 7px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--seafoam-light);
    color: var(--seafoam-dark);
    font-size: 10px;
    font-weight: 800;
    text-transform: capitalize;
}

.feedback-item {
    align-items: flex-start;
}

.feedback-copy {
    margin-top: 9px !important;
    color: var(--text-primary) !important;
    font-size: 14px !important;
    line-height: 1.5;
}

.danger-zone {
    border-color: rgba(191, 102, 97, 0.35);
}

/* FEEDBACK MODAL */

.feedback-modal {
    position: fixed;
    z-index: 60;
    top: 50%;
    left: 50%;
    width: min(calc(100% - 28px), 480px);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 22px;
    transform: translate(-50%, -50%);
    border: 1px solid var(--border);
    border-radius: 25px;
    background: var(--surface-solid);
    box-shadow: var(--shadow-medium);
}

.modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.modal-heading h2 {
    margin: 0;
}

@media (max-width: 560px) {
    .admin-summary-grid {
        grid-template-columns: 1fr;
    }

    .admin-list-item {
        align-items: stretch;
        flex-direction: column;
    }

    .compact-button {
        width: 100%;
    }
}


/* MULTI-TEAM PHASE 1 */
.team-invitation-note{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px;padding:18px 20px;border:1px solid var(--border);border-radius:var(--radius-large);background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(217,236,246,.75));box-shadow:var(--shadow-small)}
.team-invitation-note h2{margin:0;font-size:18px}.team-invitation-note p:last-child{margin:7px 0 0;color:var(--text-secondary)}
.team-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.team-action-grid .secondary-button{margin-top:0}
.team-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px}.team-tab{flex:0 0 auto;padding:10px 13px;border:1px solid var(--border);border-radius:999px;background:var(--surface-muted);color:var(--text-secondary);font-weight:800;cursor:pointer}.team-tab.active{background:var(--seafoam-light);color:var(--seafoam-dark);border-color:var(--seafoam)}
.team-form-panel{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--ocean-blue-pale)}.team-form-panel h3{margin:0 0 12px}.team-code-card{display:flex;align-items:center;justify-content:space-between;gap:16px}.invite-code-box{text-align:right}.invite-code-box strong{display:block;font-size:18px;letter-spacing:.08em;color:var(--seafoam-dark)}.invite-code-box .text-button{margin:5px 0 0 auto}
.team-target-fieldset{margin:20px 0;padding:16px;border:1px solid var(--border);border-radius:16px}.team-target-fieldset legend{padding:0 6px;font-weight:800}.field-help{margin:0 0 10px;color:var(--text-secondary);font-size:13px}.team-checkbox-list{display:grid;gap:8px}.team-option{margin:0;padding:11px 12px;border:1px solid var(--border);border-radius:13px;background:var(--surface-muted)}
@media(max-width:560px){.team-invitation-note,.team-code-card{align-items:stretch;flex-direction:column}.team-action-grid{grid-template-columns:1fr}.invite-code-box{text-align:left}.invite-code-box .text-button{margin-left:0}}

.compact-select{width:auto;min-width:145px;padding:9px 11px}.inbox-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:17px 0 12px}.inbox-summary{padding:14px 10px;border:1px solid var(--border);border-radius:15px;text-align:center}.inbox-summary span{display:block;margin-bottom:5px;font-size:20px}.inbox-summary strong{display:block;font-size:23px}.inbox-summary p{margin:4px 0 0;color:var(--text-secondary);font-size:11px}.urgent-summary{background:var(--coral-light);border-color:rgba(191,102,97,.35)}.bug-summary{background:var(--gold-light)}.suggestion-summary{background:var(--seafoam-light)}.inbox-note,.privacy-helper{padding:11px 13px;border-radius:12px;background:var(--ocean-blue-pale);color:var(--text-secondary);font-size:12px;line-height:1.5}.developer-inbox-item{padding:15px;border:1px solid var(--border);border-radius:16px;background:var(--surface-muted)}.developer-inbox-item.security-item{border-left:6px solid var(--coral)}.developer-inbox-item.bug-item{border-left:6px solid var(--gold)}.developer-inbox-item.suggestion-item{border-left:6px solid var(--seafoam)}.inbox-item-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:11px}.inbox-kind{font-size:12px;font-weight:800}.priority-badge,.status-pill{display:inline-block;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}.urgent-priority{background:var(--coral);color:#fff}.high-priority{background:var(--gold);color:#fff}.status-pill{background:var(--ocean-blue-light)}.status-resolved{background:var(--seafoam-light);color:var(--seafoam-dark)}.inbox-meta{margin:4px 0 0;color:var(--text-secondary);font-size:11px}.inbox-actions{display:flex;gap:8px;margin-top:13px}.resolved-item{opacity:.66}@media(max-width:560px){.inbox-summary-grid{grid-template-columns:1fr}.compact-select{width:100%}.inbox-actions{flex-direction:column}}


/* ACCOUNT, PRIVACY & SECURITY */
.account-menu-section {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.account-menu-button {
    width: 100%;
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 11px;
    margin-top: 10px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 15px;
    background: var(--surface-muted);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.account-menu-button strong,
.account-menu-button small { display: block; }
.account-menu-button small {
    margin-top: 4px;
    color: var(--text-secondary);
    line-height: 1.4;
}
.account-menu-icon { font-size: 22px; }
.account-menu-arrow { color: var(--seafoam-dark); font-size: 26px; }
.privacy-promise-card {
    margin-bottom: 20px;
    padding: 22px;
    border: 1px solid rgba(99,184,167,.45);
    border-radius: var(--radius-large);
    background: linear-gradient(145deg,var(--seafoam-light),var(--ocean-blue-pale));
    box-shadow: var(--shadow-small);
}
.privacy-promise-card h2 { margin: 0; }
.privacy-promise-card > p:last-child {
    margin: 10px 0 0;
    color: var(--text-secondary);
    line-height: 1.6;
}
.data-explanation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    margin-top: 14px;
}
.data-explanation-grid > div {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-muted);
}
.data-explanation-grid p {
    margin: 7px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
}
@media (max-width:560px){
    .data-explanation-grid{grid-template-columns:1fr;}
}


/* v0.6.2 ACCOUNT ACCORDIONS & DEVELOPER PORTAL */
.account-accordion{margin-bottom:12px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-small);overflow:hidden}
.account-accordion summary{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:17px 18px;cursor:pointer;list-style:none}
.account-accordion summary::-webkit-details-marker{display:none}
.account-accordion summary::after{content:'›';font-size:24px;color:var(--seafoam-dark);transition:transform .18s ease}
.account-accordion[open] summary::after{transform:rotate(90deg)}
.account-accordion summary strong,.account-accordion summary small{display:block}
.account-accordion summary small{margin-top:3px;color:var(--text-secondary);font-size:11px}
.accordion-content{padding:0 18px 18px;border-top:1px solid var(--border)}
.field-label{margin:18px 0 7px;font-size:14px;font-weight:700}
.identity-option{display:flex;align-items:flex-start;gap:10px;padding:13px;margin:9px 0;border:1px solid var(--border);border-radius:14px;background:var(--surface-muted);cursor:pointer}
.identity-option input{width:18px;height:18px;margin-top:2px;accent-color:var(--seafoam-dark)}
.identity-option strong,.identity-option small{display:block}.identity-option small{margin-top:3px;color:var(--text-secondary)}
.generated-identity-panel{padding:16px;margin:13px 0;border:1px solid var(--border);border-radius:15px;background:linear-gradient(145deg,var(--ocean-blue-pale),var(--seafoam-pale));text-align:center}
.generated-identity-panel span,.generated-identity-panel strong{display:block}.generated-identity-panel strong{margin:7px 0 12px;color:var(--seafoam-dark);font-size:23px}
.child-privacy-notice{padding:15px;margin-top:13px;border-left:5px solid var(--seafoam);border-radius:13px;background:var(--seafoam-pale)}
.child-privacy-notice p{margin:7px 0 0;color:var(--text-secondary);line-height:1.5}
.account-mission{padding:18px;text-align:center;color:var(--text-secondary);line-height:1.6}
.diagnostic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}
.diagnostic-grid>div{padding:13px;border:1px solid var(--border);border-radius:13px;background:var(--surface-muted)}
.diagnostic-grid strong,.diagnostic-grid code{display:block}.diagnostic-grid code{margin-top:7px;overflow-wrap:anywhere;color:var(--seafoam-dark)}
body.light-theme{--surface:rgba(255,255,255,.98);--surface-solid:#fff;--surface-muted:#f7fbfc;--text-primary:#203a37;--text-secondary:#607875;--border:#d6e7ed;background:linear-gradient(180deg,#fff 0%,#f5fbfc 100%)}
@media(max-width:560px){.diagnostic-grid{grid-template-columns:1fr}.account-accordion summary{grid-template-columns:28px 1fr auto;padding:15px}}

/* v0.6.3 BRANDED THEMES & RELEASE CHECKLIST */
body.dark-theme .stat-card,
body.dark-theme .summary-card,
body.dark-theme .goal-card,
body.dark-theme .activity-card,
body.dark-theme .team-invitation-note,
body.dark-theme .badge-card,
body.dark-theme .challenge-card {
    --text-primary: #203a37;
    --text-secondary: #506966;
    color: #203a37;
}
body.dark-theme .stat-card h3,
body.dark-theme .summary-card p,
body.dark-theme .goal-card p,
body.dark-theme .activity-card p,
body.dark-theme .team-invitation-note p { color:#506966; }
.developer-tabs{display:flex;gap:8px;margin:0 0 18px;padding:6px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.developer-tab{flex:1;padding:11px 12px;border:0;border-radius:11px;background:transparent;color:var(--text-secondary);font:inherit;font-weight:800;cursor:pointer}
.developer-tab.active{background:var(--seafoam-dark);color:#fff}
.release-checklist{display:grid;gap:15px;margin:18px 0}
.release-category{padding:15px;border:1px solid var(--border);border-radius:15px;background:var(--surface-muted)}
.release-category h3{margin:0 0 10px;font-size:15px}
.release-check-item{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-top:1px solid var(--border)}
.release-check-item:first-of-type{border-top:0}
.release-check-item input{width:18px;height:18px;margin-top:2px;accent-color:var(--seafoam-dark)}
.release-check-item span{flex:1;line-height:1.4}
.release-check-item.completed span{text-decoration:line-through;color:var(--text-secondary)}
.release-delete{border:0;background:transparent;color:var(--coral);cursor:pointer;font-size:16px}
.release-task-entry{display:grid;grid-template-columns:1fr 180px auto;gap:9px;align-items:end;margin-top:18px}
@media(max-width:650px){.developer-tabs,.release-task-entry{grid-template-columns:1fr;display:grid}.developer-tab{width:100%}}


/* v0.6.4 Alpha readiness */
.alpha-registration-box{margin:1rem 0;padding:1rem;border:1px solid var(--border-color);border-radius:16px;background:var(--soft-background)}
.alpha-registration-note{margin:.25rem 0 .75rem;color:var(--muted-text);font-size:.92rem;line-height:1.45}
.legal-checkbox{align-items:flex-start;gap:.45rem;margin:.55rem 0;flex-wrap:wrap}
.inline-legal-link{border:0;background:transparent;color:var(--primary-color);padding:0;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.legal-modal{max-width:720px;max-height:88vh;overflow:auto}
.legal-document{line-height:1.55;color:var(--text-color)}
.legal-document h3{margin:1.1rem 0 .35rem}.legal-document p{margin:.25rem 0 .75rem}
.alpha-welcome-modal{text-align:center;max-width:480px}.alpha-welcome-icon{font-size:3rem;margin-bottom:.5rem}
.policy-version-card{margin-top:1rem;padding:1rem;border-radius:14px;background:var(--soft-background);border:1px solid var(--border-color)}
.policy-version-card .text-button{margin-right:.75rem}

/* v0.6.4 walkthrough corrections */
.team-overview-card{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}
.compact-invite-details{min-width:170px;padding:8px 11px;border:1px solid var(--border);border-radius:13px;background:var(--surface-muted)}
.compact-invite-details summary{cursor:pointer;font-weight:800;color:var(--text-secondary);font-size:12px}
.compact-invite-details[open] summary{margin-bottom:9px}.compact-invite-details .invite-code-box{text-align:left}.compact-invite-details .invite-code-box strong{font-size:15px}.compact-invite-details .text-button{display:inline-block;margin:5px 8px 0 0}
.drawer-profile-card{padding:15px;border:1px solid var(--border);border-radius:16px;background:var(--surface-muted);margin-bottom:14px}.drawer-profile-card p{margin:4px 0 10px}
.account-menu-section{display:grid;gap:9px}.account-menu-section>.eyebrow{margin-bottom:0}

/* River must look intentionally blue rather than duplicating Evergreen. */
body.light-theme{--seafoam-dark:#4f86a5;--seafoam:#78afd0;--seafoam-light:#dceef8;--seafoam-pale:#eef7fc;--ocean-blue:#6da8ca;--ocean-blue-light:#d6ebf7;--ocean-blue-pale:#edf7fc;--background:#eaf5fb;--border:#bfdce9;background:radial-gradient(circle at 12% 8%,rgba(109,168,202,.34),transparent 31%),radial-gradient(circle at 90% 20%,rgba(167,210,232,.30),transparent 28%),linear-gradient(180deg,#f8fcff 0%,#eaf5fb 100%)}
body.sunrise-theme{--seafoam-dark:#b85f3f;--seafoam:#ef8b61;--seafoam-light:#ffe2d4;--seafoam-pale:#fff5ef;--ocean-blue:#e9ad64;--ocean-blue-light:#ffebcc;--ocean-blue-pale:#fff8ec;--background:#fff4ec;--border:#f1cdb8;background:linear-gradient(180deg,#fffaf5 0%,#fff0e6 100%)}
body.blossom-theme{--seafoam-dark:#a54f72;--seafoam:#d37da0;--seafoam-light:#f8dce8;--seafoam-pale:#fff2f7;--ocean-blue:#c69acb;--ocean-blue-light:#eadcf0;--ocean-blue-pale:#faf3fc;--background:#fff3f8;--border:#e9c9d7;background:linear-gradient(180deg,#fffafd 0%,#fff0f6 100%)}
body.twilight-theme{--seafoam-dark:#67539c;--seafoam:#8c78c4;--seafoam-light:#e4def7;--seafoam-pale:#f4f1fc;--ocean-blue:#697fb6;--ocean-blue-light:#dce4f7;--ocean-blue-pale:#f1f4fc;--background:#f1eff9;--border:#d3cdeb;background:linear-gradient(180deg,#faf9ff 0%,#eeebf8 100%)}
body.golden-theme{--seafoam-dark:#9b7126;--seafoam:#c79a43;--seafoam-light:#f8e8bf;--seafoam-pale:#fff8e8;--ocean-blue:#d1ad65;--ocean-blue-light:#f6e7c4;--ocean-blue-pale:#fff9eb;--background:#fff8e7;--border:#e8d6a8;background:linear-gradient(180deg,#fffdf7 0%,#fff6dc 100%)}

/* Preserve Midnight palette while forcing readable text in every light surface/control. */
body.dark-theme input,body.dark-theme select,body.dark-theme textarea{background:#fff;color:#203a37;border-color:#b9cfca}
body.dark-theme input::placeholder,body.dark-theme textarea::placeholder{color:#687d79}
body.dark-theme .content-card,body.dark-theme .form-card,body.dark-theme .account-accordion,body.dark-theme .privacy-promise-card,body.dark-theme .drawer-profile-card,body.dark-theme .compact-invite-details,body.dark-theme .team-form-panel,body.dark-theme .developer-inbox-item,body.dark-theme .release-check-item{--text-primary:#203a37;--text-secondary:#506966;color:#203a37}
body.dark-theme .content-card p,body.dark-theme .form-card p,body.dark-theme .account-accordion p,body.dark-theme .privacy-promise-card p,body.dark-theme .drawer-profile-card p,body.dark-theme .compact-invite-details summary,body.dark-theme .team-form-panel p{color:#506966}
body.dark-theme .account-accordion summary,body.dark-theme .account-accordion label,body.dark-theme .content-card label,body.dark-theme .form-card label{color:#203a37}
@media(max-width:560px){.team-overview-card{flex-direction:column}.compact-invite-details{width:100%}}

/* v0.6.5 ALPHA POLISH */
.selected-team-inline{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:14px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--surface-muted)}
.selected-team-inline h3{margin:2px 0 4px;font-size:22px}.selected-team-inline p{margin:0}
@media(max-width:560px){.selected-team-inline{flex-direction:column}.compact-invite-details{width:100%}}


/* v0.6.7 NIGHT THEME RESTORATION
   Night palettes use their original dark surfaces. Only components whose
   base design is intentionally light receive dark text for contrast. */

body.dark-theme .stat-card,
body.dark-theme .summary-card,
body.dark-theme .goal-card,
body.dark-theme .activity-card,
body.evergreen-night-theme .stat-card,
body.evergreen-night-theme .summary-card,
body.evergreen-night-theme .goal-card,
body.evergreen-night-theme .activity-card,
body.river-night-theme .stat-card,
body.river-night-theme .summary-card,
body.river-night-theme .goal-card,
body.river-night-theme .activity-card,
body.sunrise-night-theme .stat-card,
body.sunrise-night-theme .summary-card,
body.sunrise-night-theme .goal-card,
body.sunrise-night-theme .activity-card,
body.blossom-night-theme .stat-card,
body.blossom-night-theme .summary-card,
body.blossom-night-theme .goal-card,
body.blossom-night-theme .activity-card,
body.twilight-night-theme .stat-card,
body.twilight-night-theme .summary-card,
body.twilight-night-theme .goal-card,
body.twilight-night-theme .activity-card,
body.golden-night-theme .stat-card,
body.golden-night-theme .summary-card,
body.golden-night-theme .goal-card,
body.golden-night-theme .activity-card {
    --text-primary:#203a37;
    --text-secondary:#506966;
    color:#203a37;
}

body.dark-theme .stat-card h3,
body.dark-theme .summary-card p,
body.dark-theme .goal-card p,
body.dark-theme .activity-card p,
body.evergreen-night-theme .stat-card h3,
body.evergreen-night-theme .summary-card p,
body.evergreen-night-theme .goal-card p,
body.evergreen-night-theme .activity-card p,
body.river-night-theme .stat-card h3,
body.river-night-theme .summary-card p,
body.river-night-theme .goal-card p,
body.river-night-theme .activity-card p,
body.sunrise-night-theme .stat-card h3,
body.sunrise-night-theme .summary-card p,
body.sunrise-night-theme .goal-card p,
body.sunrise-night-theme .activity-card p,
body.blossom-night-theme .stat-card h3,
body.blossom-night-theme .summary-card p,
body.blossom-night-theme .goal-card p,
body.blossom-night-theme .activity-card p,
body.twilight-night-theme .stat-card h3,
body.twilight-night-theme .summary-card p,
body.twilight-night-theme .goal-card p,
body.twilight-night-theme .activity-card p,
body.golden-night-theme .stat-card h3,
body.golden-night-theme .summary-card p,
body.golden-night-theme .goal-card p,
body.golden-night-theme .activity-card p {
    color:#506966;
}

/* Form controls remain light for legibility in every Night palette. */
body.dark-theme input, body.dark-theme select, body.dark-theme textarea,
body.evergreen-night-theme input, body.evergreen-night-theme select, body.evergreen-night-theme textarea,
body.river-night-theme input, body.river-night-theme select, body.river-night-theme textarea,
body.sunrise-night-theme input, body.sunrise-night-theme select, body.sunrise-night-theme textarea,
body.blossom-night-theme input, body.blossom-night-theme select, body.blossom-night-theme textarea,
body.twilight-night-theme input, body.twilight-night-theme select, body.twilight-night-theme textarea,
body.golden-night-theme input, body.golden-night-theme select, body.golden-night-theme textarea {
    background:#fff;
    color:#203a37;
    border-color:#b9cfca;
}
body.dark-theme input::placeholder, body.dark-theme textarea::placeholder,
body.evergreen-night-theme input::placeholder, body.evergreen-night-theme textarea::placeholder,
body.river-night-theme input::placeholder, body.river-night-theme textarea::placeholder,
body.sunrise-night-theme input::placeholder, body.sunrise-night-theme textarea::placeholder,
body.blossom-night-theme input::placeholder, body.blossom-night-theme textarea::placeholder,
body.twilight-night-theme input::placeholder, body.twilight-night-theme textarea::placeholder,
body.golden-night-theme input::placeholder, body.golden-night-theme textarea::placeholder {
    color:#687d79;
}


/* v0.7.0 Developer Operations */
.developer-two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.developer-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin:.75rem 0}.developer-record{border:1px solid var(--border-color,#d8ded8);border-radius:16px;padding:1rem;background:var(--card-background,#fff);margin-bottom:.75rem}.developer-record-header{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.developer-record-meta{font-size:.82rem;opacity:.75;margin:.3rem 0}.developer-record-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}.developer-record-actions button{width:auto}.history-record{opacity:.9}.developer-tabs{overflow-x:auto;white-space:nowrap}.developer-tabs .developer-tab{flex:0 0 auto}.app-content-preview{border:2px dashed var(--accent-color,#6b8f71)}@media(max-width:760px){.developer-two-column,.developer-form-grid{grid-template-columns:1fr}.developer-record-header{flex-direction:column}}

.top-bar-actions{display:flex;align-items:center;gap:.55rem}.notification-button{position:relative;border:0;background:var(--surface,#fff);border-radius:999px;width:42px;height:42px;font-size:1.15rem;cursor:pointer}.notification-count{position:absolute;right:-2px;top:-4px;background:#c62828;color:#fff;border-radius:999px;min-width:18px;height:18px;font-size:.68rem;display:grid;place-items:center;padding:0 4px}.notification-drawer{position:fixed;top:0;right:0;width:min(430px,94vw);height:100vh;z-index:1100;background:var(--background,#fff);box-shadow:-12px 0 30px rgba(0,0,0,.2);overflow:auto}.notification-list{display:grid;gap:.75rem}.notification-item{background:var(--surface,#fff);border:1px solid var(--border,#ddd);border-radius:14px;padding:1rem}.notification-item.read{opacity:.8}.notification-item p{margin:.35rem 0}.notification-item small{opacity:.72}.notification-item-actions,.notification-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.65rem}.dismiss-content-button{margin-top:.5rem}.inline-form-row{display:flex;gap:.6rem;align-items:end}.inline-form-row input{flex:1}.leave-team-button{margin-left:auto}.developer-record-actions{display:flex;gap:.4rem;flex-wrap:wrap}.content-card .admin-list{margin-top:.8rem}@media(max-width:600px){.inline-form-row{display:grid}.notification-drawer{width:100vw}.top-bar-actions{gap:.35rem}}

/* v0.7.4 account deletion and ownership continuity */
.danger-zone-card{border:1px solid rgba(174,49,49,.35);background:rgba(174,49,49,.06);border-radius:18px;padding:18px;margin:16px 0}.danger-zone-card>strong{color:#7f1d1d;font-size:1.05rem}.danger-zone-card p{margin:8px 0 14px}.ownership-notice{border-left:4px solid var(--accent);}.ownership-notice .notification-item-actions{flex-wrap:wrap}.archived-team-note{opacity:.9}

/* v0.7.5 challenge windows and usage analytics */
.analytics-summary-grid{margin-top:1rem}.analytics-summary-grid .summary-card strong{font-size:1.65rem}.analytics-summary-grid .summary-card p{margin:.25rem 0 0}


/* v0.7.5 UI polish: invitations, notifications, and team managers */
.inline-form-row>input,.inline-form-row>select{flex:1 1 auto;min-width:0}
.inline-form-row>.primary-button,.inline-form-row>.secondary-button{width:auto;flex:0 0 auto;white-space:nowrap}
.info-button{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:999px;background:var(--surface-muted);color:var(--text-primary);font-weight:900;cursor:pointer}
.manager-info-panel{margin:.75rem 0;padding:.85rem 1rem;border-radius:14px;background:var(--ocean-blue-pale);color:var(--text-primary)}
.manager-info-panel p{margin:0;line-height:1.5}
.manager-assignment-panel{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.manager-assignment-panel>p{margin-top:0}
.manager-record{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.notification-drawer{color:var(--text-primary)}
.notification-drawer .notification-item{color:var(--text-primary)}
.notification-drawer .notification-item p,.notification-drawer .notification-item small,.notification-drawer .notification-item strong{color:inherit}
body.dark-theme .notification-drawer{--text-primary:#f4f7f6;--text-secondary:#d7e2df;color:#f4f7f6}
body.dark-theme .notification-drawer .notification-item{background:#344a4c;color:#f4f7f6;border-color:rgba(255,255,255,.2)}
body.dark-theme .notification-drawer .notification-item small{color:#d7e2df;opacity:1}
@media(max-width:600px){.inline-form-row>.primary-button,.inline-form-row>.secondary-button{width:100%}.manager-record{align-items:flex-start;flex-direction:column}}