:root {
    --coral: #ff6b6b;
    --sunny: #ffd166;
    --mint: #06d6a0;
    --sky: #4ecdc4;
    --deep: #2b2d42;
    --ink: #3a3a4a;
    --bg: #fff9f0;
    --card: #ffffff;
    --radius: 18px;
    --shadow: 0 8px 24px rgba(43, 45, 66, 0.08);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Verdana, sans-serif;
    background: linear-gradient(135deg, #fff9f0 0%, #ffe8d6 45%, #d6f5f0 100%);
    min-height: 100vh;
    color: var(--ink);
}

/* ---------- Floating settings button (bottom corner, out of the way) ---------- */
.settings-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    text-decoration: none;
    z-index: 100;
    transition: transform .15s, box-shadow .15s;
}
.settings-fab:hover {
    transform: rotate(25deg) scale(1.08);
    box-shadow: 0 10px 26px rgba(43, 45, 66, 0.16);
}

/* ---------- Site header (uploadable image, collapses on scroll) ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 260px;
    overflow: hidden;
    background-color: #ffe8d6;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    transition: height .25s ease;
    display: flex;
    align-items: flex-start;
}
.site-header.collapsed {
    height: 76px;
}
.site-header-quote {
    margin: 18px 0 0 24px;
    max-width: 480px;
    background: rgba(255, 255, 255, 0.88);
    border-radius: 14px;
    padding: 14px 18px;
    box-shadow: 0 6px 18px rgba(43, 45, 66, 0.12);
    transition: opacity .2s ease;
}
.site-header.collapsed .site-header-quote {
    opacity: 0;
    pointer-events: none;
}
.site-header-quote-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--deep);
    margin: 0 0 6px;
    white-space: pre-wrap;
}
.site-header-quote-author {
    font-size: 12px;
    color: #8a8a9a;
    margin: 0;
}

/* Background hero image on the login screen */
.auth-screen--with-hero {
    background-size: cover;
    background-position: center;
    position: relative;
}
.auth-screen--with-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 249, 240, 0.55);
}
.auth-screen--with-hero .auth-card,
.auth-screen--with-hero .site-header-quote {
    position: relative;
    z-index: 2;
}
.auth-screen--with-hero .site-header-quote {
    position: absolute;
    top: 24px;
    left: 24px;
    margin: 0;
    z-index: 3;
}

/* ---------- Auth screens ---------- */
.auth-screen {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.auth-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 40px 36px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}
.auth-emoji { font-size: 48px; margin-bottom: 8px; }
.auth-card h1 { margin: 0 0 6px; font-size: 24px; color: var(--deep); }
.auth-subtitle { color: #7a7a8c; margin: 0 0 20px; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form input {
    padding: 12px 14px;
    border-radius: 12px;
    border: 2px solid #eee2d0;
    font-size: 15px;
    outline: none;
    transition: border-color .15s;
}
.auth-form input:focus { border-color: var(--sky); }
.auth-hint { font-size: 12px; color: #9a9aa8; margin-top: 18px; }
.auth-hint a { color: var(--sky); text-decoration: none; }
.alert {
    background: #ffe3e3; color: #c0392b; padding: 10px 14px;
    border-radius: 10px; margin-bottom: 14px; font-size: 14px;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    border: none;
    border-radius: 12px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: transform .1s, box-shadow .15s;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: linear-gradient(135deg, var(--coral), #ff8e72);
    color: white;
    box-shadow: 0 6px 16px rgba(255, 107, 107, 0.35);
}
.btn-primary:hover { box-shadow: 0 8px 20px rgba(255, 107, 107, 0.45); }
.btn-ghost {
    background: rgba(43, 45, 66, 0.06);
    color: var(--deep);
}
.btn-ghost:hover { background: rgba(43, 45, 66, 0.12); }
.btn-block { width: 100%; }
.btn-small { padding: 7px 12px; font-size: 13px; }

/* ---------- Topbar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 28px;
    flex-wrap: wrap;
    gap: 12px;
}
.topbar-title { font-size: 22px; font-weight: 700; color: var(--deep); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.hello { font-size: 16px; color: var(--deep); font-weight: 600; }

/* ---------- Praise banner ---------- */
.praise-banner {
    background: linear-gradient(135deg, var(--mint), var(--sky));
    color: white;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 14px 20px;
    border-radius: var(--radius);
    margin: 0 0 18px;
    box-shadow: 0 8px 20px rgba(6, 214, 160, 0.25);
}

/* ---------- Board / task table ---------- */
.board, .admin-board { padding: 8px 28px 60px; max-width: 1100px; margin: 0 auto; }

.task-table-wrap {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.task-table { width: 100%; border-collapse: collapse; }
.task-table tr { border-bottom: 1px solid #f2ede0; }
.task-table tr:last-child { border-bottom: none; }
.task-table tr.row-completed { background: #f5fdfa; }
.task-table tr.row-expired { background: #fafafa; opacity: .75; }

.task-table td { padding: 16px 18px; vertical-align: middle; }
.task-cell-main { min-width: 200px; }
.task-title { font-weight: 700; font-size: 16px; color: var(--deep); }
.task-meta-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.badge {
    display: inline-block; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.badge-pending { background: #fff3d6; color: #b8860b; }
.badge-completed { background: #d7f9ee; color: #0a9e75; }
.badge-expired { background: #f0f0f0; color: #888; }
.badge-recurring { font-size: 15px; }
.countdown { font-size: 12px; color: #9a9aa8; }

.task-cell-progress { width: 160px; }
.task-progress-form { display: flex; align-items: center; gap: 6px; }
.task-progress-form input[type=number] {
    width: 60px; padding: 8px; border-radius: 10px; border: 2px solid #eee2d0;
}
.progress-of { color: #9a9aa8; font-size: 13px; white-space: nowrap; }

.task-cell-note { min-width: 160px; }
.task-note-form textarea, textarea {
    font-family: inherit; padding: 8px 10px; border-radius: 10px;
    border: 2px solid #eee2d0; resize: vertical; font-size: 13px; width: 100%;
}
.task-note-readonly { font-size: 13px; color: #7a7a8c; }

.task-cell-check { width: 90px; text-align: center; }
.big-check-form { display: inline-block; }
.big-check {
    appearance: none;
    -webkit-appearance: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 3px solid #e4dccb;
    background: #fffdf8;
    cursor: pointer;
    position: relative;
    transition: background .15s, border-color .15s, transform .1s;
}
.big-check:active { transform: scale(0.94); }
.big-check:checked {
    background: linear-gradient(135deg, var(--mint), var(--sky));
    border-color: var(--mint);
}
.big-check:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 30px;
    font-weight: 700;
}
.big-check:disabled { opacity: .4; cursor: not-allowed; }

.task-rewards { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.reward-box { background: #fffaf0; border-radius: 12px; padding: 10px; }
.reward-label { font-size: 12px; font-weight: 700; color: var(--coral); margin-bottom: 6px; }
.reward-box img, .reward-box video { max-width: 260px; width: 100%; border-radius: 10px; display: block; }
.reward-box audio { width: 100%; }
.reward-text {
    margin: 0; font-size: 14px; font-weight: 600; color: var(--deep);
    background: linear-gradient(135deg, #fff3d6, #ffe8f0);
    padding: 10px 12px; border-radius: 10px; white-space: pre-wrap;
}

.empty-state { text-align: center; padding: 60px 20px; color: #9a9aa8; }
.empty-emoji { font-size: 48px; margin-bottom: 10px; }

/* ---------- Admin ---------- */
.panel {
    background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 24px; margin-bottom: 24px;
}
.panel h2 { margin-top: 0; font-size: 18px; color: var(--deep); }
.admin-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.admin-form input, .admin-form select, .admin-form textarea {
    padding: 10px 12px; border-radius: 10px; border: 2px solid #eee2d0; font-size: 14px;
}
.field-label { font-size: 12px; font-weight: 700; color: #7a7a8c; margin-top: 6px; }
.checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 14px; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #f0ece0; }
.admin-table th { color: #9a9aa8; font-weight: 600; font-size: 12px; text-transform: uppercase; }

.reward-row { padding: 14px 0; border-bottom: 1px solid #f0ece0; }
.reward-row:last-child { border-bottom: none; }
.reward-row-title { font-weight: 600; margin-bottom: 8px; }
.reward-existing-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.reward-existing-item {
    background: #fdf6ea; border-radius: 10px; padding: 6px 10px; font-size: 12px; color: #7a7a8c;
}
.reward-add-forms { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reward-upload-form { display: flex; align-items: center; gap: 8px; }
.reward-upload-form input[type=text] { padding: 8px 10px; border-radius: 10px; border: 2px solid #eee2d0; min-width: 220px; }
.muted { color: #9a9aa8; font-size: 14px; }

.theme-color-row { display: flex; align-items: center; gap: 10px; }
.theme-color-row input[type=color] { width: 48px; height: 40px; border: none; border-radius: 8px; padding: 0; cursor: pointer; }
.theme-warning { font-size: 12px; color: #b8860b; margin: 2px 0 8px; }
.header-preview { max-width: 100%; max-height: 140px; border-radius: 10px; margin-bottom: 10px; display: block; }