/* ═══════════════════════════════════════════════════════════════════════
   DLME! — Don't Let Me Eat!
   Aesthetic: Dark premium dashboard. Clean. Bold. Widget-inspired.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    --bg-dark: #0d0f14;
    --bg-card: #151821;
    --bg-card-hover: #1c2030;
    --surface: #1a1d28;
    --border: rgba(255, 255, 255, 0.06);
    --border-glow: #ff3366;

    --hot-pink: #ff3366;
    --hot-pink-dim: #ff336630;
    --electric-green: #00ff88;
    --electric-green-dim: #00ff8825;
    --neon-yellow: #ffe234;
    --neon-yellow-dim: #ffe23425;
    --cool-blue: #4488ff;
    --cool-blue-dim: #4488ff25;
    --cyan: #00e5ff;
    --cyan-dim: #00e5ff20;
    --warning-red: #ff4444;
    --soft-purple: #9966ff;

    --text-primary: #eeeef2;
    --text-secondary: #7c7e96;
    --text-muted: #484a60;

    --font-display: 'Archivo Black', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --font-mono: 'Space Mono', monospace;

    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    --shadow-glow: 0 0 40px rgba(255, 51, 102, 0.15);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.3);
}

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

html {
    font-size: 17px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.5;
}

a { color: var(--hot-pink); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, button { font-family: inherit; }

/* ── Screen System ─────────────────────────────────────────────────── */
.screen {
    display: none;
    min-height: 100vh;
}
.screen.active { display: block; }

/* ═══════════════════════════════════════════════════════════════════════
   SPLASH / REGISTRATION
   ═══════════════════════════════════════════════════════════════════════ */
#screen-splash {
    display: none;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
#screen-splash.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.splash-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, var(--hot-pink-dim) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 20%, var(--cool-blue-dim) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, var(--neon-yellow-dim) 0%, transparent 50%),
        var(--bg-dark);
}

.noise-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 256px;
}

/* Floating food emojis */
.floating-emoji {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.12;
    animation: floatAround 20s ease-in-out infinite;
    pointer-events: none;
}
.e1 { top: 10%; left: 10%; animation-delay: 0s; }
.e2 { top: 20%; right: 15%; animation-delay: -4s; font-size: 3rem; }
.e3 { bottom: 30%; left: 20%; animation-delay: -8s; }
.e4 { top: 50%; right: 10%; animation-delay: -12s; font-size: 2rem; }
.e5 { bottom: 15%; right: 25%; animation-delay: -16s; }
.e6 { bottom: 20%; left: 5%; animation-delay: -3s; font-size: 3.5rem; }

@keyframes floatAround {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(20px, -30px) rotate(10deg); }
    50% { transform: translate(-15px, 20px) rotate(-5deg); }
    75% { transform: translate(25px, 10px) rotate(8deg); }
}

.splash-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem;
    max-width: 520px;
    width: 100%;
    animation: fadeInUp 0.8s ease-out;
}

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

/* Logo */
.logo-lockup {
    margin-bottom: 2rem;
}

.logo-icon {
    position: relative;
    display: inline-block;
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
}
.no-symbol {
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 0 15px var(--hot-pink));
}
.fork-icon {
    position: absolute;
    right: -20px;
    top: -5px;
    font-size: 2rem;
    z-index: 1;
    animation: wiggle 2s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

.logo-text {
    font-family: var(--font-display);
    font-size: 5.5rem;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(135deg, var(--hot-pink), var(--neon-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px var(--hot-pink-dim));
}

.logo-bang {
    -webkit-text-fill-color: var(--electric-green);
    animation: bangPulse 1.5s ease-in-out infinite;
}

@keyframes bangPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.logo-tagline {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.jingle-btn {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--hot-pink);
    font-size: 1.3rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s;
    padding-left: 2px;
}
.jingle-btn:hover {
    color: #fff;
}
.jingle-btn.playing {
    color: #fff;
    animation: jingle-pulse 1s ease-in-out infinite;
}
@keyframes jingle-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Pitch */
.splash-pitch {
    margin-bottom: 2.5rem;
}
.pitch-line {
    font-size: 1.15rem;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.pitch-line strong {
    color: var(--neon-yellow);
    font-weight: 700;
}
.pitch-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
}
.pitch-sub em {
    color: var(--electric-green);
    font-style: italic;
}

/* Register Form */
.register-form {
    text-align: left;
}

.form-group {
    margin-bottom: 1rem;
}
.form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 1.05rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input::placeholder { color: var(--text-muted); }
.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--hot-pink);
    box-shadow: 0 0 0 3px var(--hot-pink-dim);
}

.splash-disclaimer {
    margin-top: 1.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border: none;
    border-radius: var(--radius-lg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
    background: var(--hot-pink);
    color: white;
    box-shadow: 0 4px 15px var(--hot-pink-dim);
}
.btn-primary:hover {
    background: #ff4477;
    box-shadow: 0 6px 25px var(--hot-pink-dim);
    transform: translateY(-1px);
}

.btn-accent {
    background: var(--electric-green);
    color: var(--bg-dark);
}
.btn-accent:hover {
    background: #33ffaa;
    transform: translateY(-1px);
}

.btn-success {
    background: var(--electric-green);
    color: var(--bg-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-ghost:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.btn-danger {
    background: transparent;
    color: var(--warning-red);
    border: 1px solid var(--warning-red);
    padding: 0.35rem 0.65rem;
    font-size: 0.78rem;
}
.btn-danger:hover { background: var(--warning-red); color: white; }

.btn-lg { padding: 1rem 2rem; font-size: 1rem; border-radius: var(--radius-md); }
.btn-center { display: block; margin: 0 auto; }
.btn-sm { padding: 0.45rem 0.85rem; font-size: 0.75rem; }
.btn-block { width: 100%; }

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none !important;
}

.btn-icon { font-size: 1.2em; transition: transform 0.2s; }
.btn:hover .btn-icon { transform: translateX(3px); }


/* ═══════════════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════════════ */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 2rem;
    background: rgba(13, 15, 20, 0.85);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.top-logo {
    font-family: var(--font-display);
    font-size: 1.6rem;
    background: linear-gradient(135deg, var(--hot-pink), var(--neon-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.greeting {
    font-size: 0.92rem;
    color: var(--text-secondary);
}


/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
.dashboard {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 2rem 2rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   THE PANIC BUTTON
   ═══════════════════════════════════════════════════════════════════════ */
.panic-section {
    text-align: center;
    padding: 0.75rem 0 1rem;
}

.fast-status {
    margin-bottom: 0.5rem;
}

.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-card);
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 0.92rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}
.status-indicator.fasting .status-dot {
    background: var(--warning-red);
    animation: dotPulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 8px var(--warning-red);
}
.status-indicator.free .status-dot {
    background: var(--electric-green);
    box-shadow: 0 0 8px var(--electric-green);
}

@keyframes dotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

.fast-window {
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.btn-remove-fast {
    margin-top: 1.5rem;
    padding: 6px 16px;
    font-size: 0.75rem;
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.btn-remove-fast:hover {
    border-color: var(--hot-pink);
    color: var(--hot-pink);
}

.btn-share-card {
    margin: 1.5rem auto 0;
    padding: 10px 24px;
    font-size: 0.92rem;
    background: transparent;
    border: 1px solid #ffe234;
    color: #ffe234;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    display: block;
}
.btn-share-card:hover {
    background: #ffe234;
    color: #0a0a0f;
}

/* Panic wrapper for floating time */
.panic-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.5rem auto;
    width: 300px;
    height: 300px;
}

.floating-time-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.floating-time-particle {
    position: absolute;
    font-family: var(--font-mono);
    font-size: 3.2rem;
    font-weight: 700;
    color: #ff6699;
    white-space: nowrap;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: floatAway var(--float-duration, 3.6s) ease-out forwards;
}

@keyframes floatAway {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--float-x, 80px), var(--float-y, -80px)) scale(0.6);
    }
}

.floating-food {
    font-size: 2.8rem;
    color: #b3b3dd;
    font-weight: 400;
}

/* The big button */
.panic-button {
    position: relative;
    z-index: 1;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle, var(--hot-pink) 0%, #cc1144 100%);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 40px var(--hot-pink-dim),
        0 8px 30px rgba(0, 0, 0, 0.5),
        inset 0 -4px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.3s;
}
.panic-button:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow:
        0 0 60px var(--hot-pink-dim),
        0 12px 40px rgba(0, 0, 0, 0.5),
        inset 0 -4px 10px rgba(0, 0, 0, 0.3);
}
.panic-button:active:not(:disabled) {
    transform: scale(0.95);
    box-shadow:
        0 0 20px var(--hot-pink-dim),
        0 4px 15px rgba(0, 0, 0, 0.5),
        inset 0 4px 10px rgba(0, 0, 0, 0.4);
}
.panic-button:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: var(--surface);
    box-shadow: none;
}

.panic-inner {
    position: relative;
    text-align: center;
}

.panic-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.15);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ringPulse 3s ease-out infinite;
}
.ring-1 { width: 220px; height: 220px; animation-delay: 0s; }
.ring-2 { width: 260px; height: 260px; animation-delay: 0.5s; }
.ring-3 { width: 300px; height: 300px; animation-delay: 1s; }

@keyframes ringPulse {
    0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.3); }
}

.panic-emoji {
    font-size: 3rem;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.panic-label {
    font-family: var(--font-display);
    font-size: 1rem;
    color: white;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.panic-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* Panic Result */
.panic-result {
    margin-top: 1.5rem;
    transition: all 0.3s;
}
.panic-result.hidden { display: none; }

.result-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 450px;
    margin: 0 auto;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.result-card.busted { border-color: var(--warning-red); }
.result-card.free { border-color: var(--electric-green); }
.result-card.champion { border-color: var(--neon-yellow); }

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

.result-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.result-message {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.result-notified {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.result-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════ */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-card);
    transition: border-color 0.2s;
}
.card:hover { border-color: #3a3a4a; }

.card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    text-align: center;
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 400;
}


/* Setup Grid */
.setup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

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


/* ── Fast Form ─────────────────────────────────────────────────────── */
.fast-form {
    text-align: center;
}

.date-picker-row {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}
.date-picker-row .time-group {
    max-width: 200px;
}

.time-picker-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.time-group {
    flex: 0 1 140px;
    text-align: center;
}
.time-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--hot-pink);
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.time-group input[type="time"],
.time-group input[type="date"] {
    width: 100%;
    padding: 0.75rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.2rem;
    text-align: center;
}
.time-group input[type="time"]:focus,
.time-group input[type="date"]:focus {
    outline: none;
    border-color: var(--hot-pink);
    box-shadow: 0 0 0 3px var(--hot-pink-dim);
}

.time-divider {
    font-size: 1.2rem;
    color: var(--text-muted);
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    padding-bottom: 0.85rem;
}

/* Toggle */
.recurring-toggle {
    margin-bottom: 1.75rem;
    text-align: center;
}

.toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.92rem;
    color: var(--text-secondary);
}
.toggle-label input[type="checkbox"] { display: none; }

.toggle-slider {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--border);
    border-radius: 999px;
    transition: background 0.2s;
}
.toggle-slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    transition: transform 0.2s;
}
.toggle-label input:checked + .toggle-slider {
    background: var(--electric-green);
}
.toggle-label input:checked + .toggle-slider::after {
    transform: translateX(18px);
}


/* ── Watcher Form & List ──────────────────────────────────────────── */
.watcher-count {
    background: var(--hot-pink);
    color: white;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    min-width: 24px;
    text-align: center;
}

.form-row {
    display: flex;
    gap: 0.75rem;
}
.flex-1 { flex: 1; }

.form-group select {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 0.9rem;
    cursor: pointer;
}
.form-group select:focus {
    outline: none;
    border-color: var(--electric-green);
    box-shadow: 0 0 0 3px var(--electric-green-dim);
}
.form-group select option {
    background: var(--bg-card);
    color: var(--text-primary);
}

.watcher-list {
    margin-top: 1rem;
}

.watcher-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-bottom: 0.5rem;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.watcher-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.watcher-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--hot-pink-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.watcher-name {
    font-weight: 600;
    font-size: 0.9rem;
}
.watcher-role {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-mono);
}


/* ═══════════════════════════════════════════════════════════════════════
   STATS
   ═══════════════════════════════════════════════════════════════════════ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

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

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.25rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
}

.stat-number {
    font-family: var(--font-display);
    font-size: 2.2rem;
    background: linear-gradient(135deg, var(--hot-pink), var(--neon-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    margin-top: 0.4rem;
}


/* ═══════════════════════════════════════════════════════════════════════
   SHAME LOG
   ═══════════════════════════════════════════════════════════════════════ */
.shame-log {
    max-height: 300px;
    overflow-y: auto;
}

.shame-log::-webkit-scrollbar { width: 4px; }
.shame-log::-webkit-scrollbar-track { background: transparent; }
.shame-log::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }

.shame-entry {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-bottom: 0.5rem;
    animation: slideIn 0.3s ease-out;
}

.shame-time {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    padding-top: 0.1rem;
}

.shame-text {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.shame-entry.wall-post {
    border-left: 3px solid #ffe234;
    background: rgba(255, 226, 52, 0.05);
}
.wall-post .shame-text {
    color: #ffe234;
}

.empty-state {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════════════ */
.toast-container {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
}

.toast {
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius-md);
    font-size: 0.92rem;
    font-weight: 500;
    animation: toastIn 0.4s ease-out;
    max-width: 380px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.toast-success {
    background: var(--electric-green);
    color: var(--bg-dark);
}
.toast-error {
    background: var(--warning-red);
    color: white;
}
.toast-info {
    background: var(--cool-blue);
    color: white;
}

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

.toast.removing {
    animation: toastOut 0.3s ease-in forwards;
}


/* ═══════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════ */
/* Leaderboard */

.top-logo-ff {
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--hot-pink), var(--neon-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s;
    position: relative;
}
.top-logo-ff:hover {
    transform: scale(1.1);
}
.top-logo-ff .logo-bang {
    -webkit-text-fill-color: var(--electric-green);
}

/* Food Fight Standalone Page */
.ff-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.ff-content {
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    width: 100%;
}
.ff-hero {
    text-align: center;
    margin-bottom: 1.5rem;
}
.ff-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.ff-title .logo-bang {
    color: var(--electric-green);
}

/* Food Fight Modal (keep for backward compat) */
.ff-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 5, 15, 0.92);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ff-overlay.hidden { display: none; }

.ff-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.75rem;
    box-shadow: var(--shadow-card);
}
.ff-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.ff-header h2 {
    font-size: 1.3rem;
    color: var(--text-primary);
    text-align: center;
    flex: 1;
}
.ff-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
    text-align: center;
}
.ff-section { margin-bottom: 1rem; }

.ff-create-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.ff-input {
    flex: 1;
    padding: 0.7rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.95rem;
}
.ff-input:focus {
    outline: none;
    border-color: var(--hot-pink);
}
.ff-pending-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ff-pending-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.75rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.92rem;
}
.ff-pending-item .ff-pending-info {
    color: var(--text-secondary);
}
.ff-pending-item .ff-pending-actions {
    display: flex;
    gap: 0.4rem;
}

/* Scoreboard */
.ff-scoreboard {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.ff-player { text-align: center; min-width: 80px; }
.ff-player-name {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
}
.ff-player-score {
    font-size: 2.5rem;
    font-weight: 800;
}
.ff-you .ff-player-score { color: var(--electric-green); }
.ff-them .ff-player-score { color: var(--hot-pink); }
.ff-vs {
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* Photo columns */
.ff-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.ff-column {
    min-width: 0;
}

/* Photo rows */
.ff-row-label {
    font-size: 0.75rem;
    font-family: var(--font-mono);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
    margin-top: 0.75rem;
}
.ff-photo-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.35rem;
}
.ff-photo-cell {
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    border: 2px dashed var(--border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    background: var(--bg-card);
    min-height: 60px;
}
.ff-photo-cell:hover { border-color: var(--hot-pink); }
.ff-photo-cell.has-photo {
    border-style: solid;
    border-color: var(--border);
    cursor: default;
}
.ff-photo-cell.has-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: calc(var(--radius-sm) - 2px);
}
.ff-photo-cell .ff-day-label {
    font-size: 0.95rem;
    color: #ddddf0;
    font-family: var(--font-mono);
}
.ff-photo-cell .ff-add-icon {
    font-size: 2.08rem;
    color: #ddddf0;
}
.ff-photo-cell.missed {
    border-color: var(--warning-red);
    background: rgba(255, 51, 102, 0.05);
}
.ff-photo-cell.missed .ff-day-label { color: var(--warning-red); }

/* Vote overlay on opponent photos */
.ff-vote-buttons {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    display: flex;
    background: rgba(0, 0, 0, 0.7);
}
.ff-vote-btn {
    flex: 1;
    border: none;
    padding: 6px 0;
    font-size: 1.35rem;
    cursor: pointer;
    background: transparent;
    color: white;
    transition: background 0.2s;
}
.ff-vote-btn:hover { background: rgba(255, 255, 255, 0.1); }
.ff-vote-btn.voted {
    background: rgba(0, 255, 136, 0.2);
}
.ff-photo-cell .ff-voted-badge {
    position: absolute;
    top: 2px; right: 2px;
    font-size: 0.78rem;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    padding: 1px 3px;
}

.leaderboard-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(5, 5, 15, 0.92);
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.leaderboard-overlay.hidden { display: none; }

.leaderboard-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
}
.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}
.leaderboard-header h2 {
    font-size: 1.3rem;
    color: var(--text-primary);
}
.leaderboard-subtitle {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    font-family: var(--font-mono);
    letter-spacing: 0.05em;
}
.leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lb-row {
    display: flex;
    align-items: center;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
}
.lb-row:last-child { border-bottom: none; }
.lb-row.lb-me {
    background: rgba(255, 51, 102, 0.08);
    border-radius: var(--radius-md);
}
.lb-rank {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-muted);
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.lb-rank.gold { color: #ffe234; }
.lb-rank.silver { color: #c0c0c0; }
.lb-rank.bronze { color: #cd7f32; }
.lb-name {
    flex: 1;
    font-size: 0.95rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lb-hours {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--electric-green);
    flex-shrink: 0;
}
.lb-fasts {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
    flex-shrink: 0;
    width: 50px;
    text-align: right;
}

.app-footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    margin-top: 2rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOADING SPINNER
   ═══════════════════════════════════════════════════════════════════════ */
.spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .logo-text { font-size: 3.5rem; }
    .splash-content { padding: 1.5rem; }
    .dashboard { padding: 1rem; }
    .top-bar { padding: 0.75rem 1rem; }
    .panic-button { width: 160px; height: 160px; }
    .panic-emoji { font-size: 2.5rem; }
    .panic-label { font-size: 0.92rem; }
    .form-row { flex-direction: column; gap: 0; }
    .toast-container { right: 1rem; left: 1rem; }
    .toast { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   T1! — Track 1 Thing
   ═══════════════════════════════════════════════════════════════════════ */

.top-logo-t1 {
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--cool-blue), var(--electric-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s;
    text-decoration: none;
}
.top-logo-t1:hover { transform: scale(1.1); }
.top-logo-t1 .logo-bang { -webkit-text-fill-color: var(--neon-yellow); }

/* Nav Menu Dropdown */

/* AI Meal Cell */

/* Shame Rain Animation */
.shame-rain-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.shame-drop {
    position: absolute;
    top: -60px;
    animation: shameFall linear forwards;
    will-change: transform;
}
@keyframes shameFall {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    100% {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* AI Meal Cell */
.lb-short { display: none; }
@media (max-width: 600px) {
    .lb-full { display: none; }
    .lb-short { display: inline; }
}

/* Board button — white Archivo Black like Xport */
.btn-board {
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s;
}
.btn-board:hover {
    transform: scale(1.05);
    opacity: 0.85;
}
.ff-ai-meal {
    font-size: 0.65rem;
    font-family: var(--font-body);
    color: var(--text-primary);
    text-align: center;
    padding: 5px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--surface);
    border-radius: var(--radius-lg);
}
.ff-photo-cell img[src*="/chad/"] {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0;
}
.ff-photo-cell.has-photo img[src*="/chad/"] {
    border-radius: 12px;
}

/* Nav Menu Dropdown */
.nav-menu-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.25rem;
}
.nav-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.4rem;
    padding: 0.1rem 0.3rem;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}
.nav-toggle-btn:hover {
    transform: scale(1.15);
}
.nav-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.6rem;
    min-width: 150px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.nav-menu-item {
    display: flex;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 0.15s;
    font-size: 0.95rem;
}
.nav-menu-item:hover {
    background: var(--surface);
}
.nav-menu-item.active {
    background: var(--surface);
    border-left: 3px solid var(--electric-green);
}
.nav-menu-item span {
    pointer-events: none;
}
.nav-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.35rem 0;
}
.nav-menu-util {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: #ffffff;
    text-decoration: none;
}
.nav-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}
.nav-menu-util span {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: #ffffff;
}

@media (max-width: 600px) {
    .hide-mobile { display: none !important; }
}

/* Today Card */
.t1-today-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2.25rem 1.75rem;
    text-align: center;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-soft);
}
.t1-date {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-muted);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.t1-category-icon {
    font-size: 3.8rem;
    margin-bottom: 0.6rem;
}
.t1-category-name {
    font-family: var(--font-display);
    font-size: 1.65rem;
    color: var(--text-primary);
    margin-bottom: 0.6rem;
}
.t1-question {
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

/* Slider */
.t1-wheel-wrap { padding: 0 0.5rem; }
.t1-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 14px;
    border-radius: 7px;
    background: linear-gradient(to right, #ff3366, #ffe234, #00ff88);
    outline: none;
    cursor: pointer;
}
.t1-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 3px solid var(--bg-dark);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.5);
    cursor: grab;
}
.t1-slider::-moz-range-thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--text-primary);
    border: 3px solid var(--bg-dark);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: grab;
}
.t1-slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.25rem 0;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
}
.t1-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 800;
    color: var(--neon-yellow);
    margin-top: 0.75rem;
    transition: all 0.15s ease;
}

/* Done state */
.t1-done {
    padding: 1.5rem 0 0;
}
.t1-done-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
.t1-done-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--electric-green);
    margin-bottom: 0.75rem;
}
.t1-done-score {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--text-secondary);
}

/* Streak */
.t1-streak {
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

/* Calendar dots */
.t1-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.t1-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-family: var(--font-mono);
    font-weight: 700;
    transition: transform 0.15s;
}
.t1-dot:hover { transform: scale(1.2); }
.t1-dot.filled {
    color: var(--bg-dark);
    cursor: default;
}
.t1-dot.filled .t1-dot-score { font-size: 0.78rem; }
.t1-dot.empty {
    background: var(--surface);
    border: 1px dashed var(--border);
}
.t1-dot.today {
    background: var(--bg-card);
    border: 2px solid var(--neon-yellow);
    font-size: 0.92rem;
    animation: t1Pulse 2s ease-in-out infinite;
}
@keyframes t1Pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 226, 52, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(255, 226, 52, 0); }
}

/* Insights */
.t1-insights {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-soft);
}

/* Chart */
.t1-chart {
    display: flex;
    align-items: flex-end;
    gap: 5px;
    height: 120px;
    margin-bottom: 1rem;
    padding: 0 0.25rem;
}
.t1-chart-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
}
.t1-bar-fill {
    width: 100%;
    border-radius: 12px 8px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}
.t1-bar-label {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--text-muted);
    margin-top: 4px;
    white-space: nowrap;
}

/* Report text */
.t1-report {
    margin-top: 1rem;
}
.t1-report-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--cool-blue);
}

/* Category Preferences */

/* ═══════════════════════════════════════════════════════════════════════
   Water Fight! — Hydration Tracker
   ═══════════════════════════════════════════════════════════════════════ */

.top-logo-wf {
    background: linear-gradient(135deg, #3a86ff, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}
.top-logo-wf:hover { transform: scale(1.1); }
.top-logo-wf .logo-bang { -webkit-text-fill-color: var(--neon-yellow); }

.wf-today-card, .wf-goal-card, .wf-month-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}
.wf-today-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.wf-today-date {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-secondary);
}
.wf-streak {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
}

/* Drop Water Fill — Panic Button Style */
.wf-drop-outer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 280px;
    height: 320px;
    margin: 0 auto 0;
}
.wf-drop-main {
    position: relative;
    z-index: 1;
    width: 220px;
    height: 280px;
    filter: drop-shadow(0 0 12px rgba(58, 134, 255, 0.0));
    transition: filter 0.6s ease;
}
.wf-drop-main.active {
    filter: drop-shadow(0 0 20px rgba(58, 134, 255, 0.4));
}
.wf-drop-main.full {
    filter: drop-shadow(0 0 30px rgba(0, 255, 136, 0.5));
}
.wf-drop-main.overflow {
    filter: drop-shadow(0 0 25px rgba(255, 200, 0, 0.5));
}
.wf-drop-svg {
    width: 100%;
    height: 100%;
}

/* Pulsing rings */
.wf-drop-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -48%);
    border-radius: 50%;
    border: 2px solid rgba(58, 134, 255, 0.0);
    pointer-events: none;
    transition: border-color 0.6s ease;
}
.wf-drop-ring.visible {
    animation: wfRingPulse 3s ease-out infinite;
}
.wf-ring-1 { width: 240px; height: 300px; }
.wf-ring-2 { width: 270px; height: 330px; animation-delay: 0.5s; }
.wf-ring-3 { width: 300px; height: 360px; animation-delay: 1s; }
@keyframes wfRingPulse {
    0% { opacity: 0.5; transform: translate(-50%, -48%) scale(0.95); }
    100% { opacity: 0; transform: translate(-50%, -48%) scale(1.15); }
}

/* Floating burst emojis */
.wf-float-container {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 0;
}
.wf-float-particle {
    position: absolute;
    font-size: 2rem;
    pointer-events: none;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    animation: wfFloatAway var(--wf-float-dur, 3.5s) ease-out forwards;
}
@keyframes wfFloatAway {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--wf-fx, 80px), var(--wf-fy, -80px)) scale(0.5);
    }
}

.wf-drop-metrics {
    text-align: center;
    margin-bottom: 0.75rem;
}
.wf-ring-amount {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}
.wf-ring-unit {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.wf-ring-goal {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Quick Add */
.wf-quick-adds {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}
.wf-add-btn {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.75rem 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
}
.wf-add-btn:hover {
    background: rgba(58, 134, 255, 0.15);
    border-color: #3a86ff;
}
.wf-add-btn:active { transform: scale(0.95); }
.wf-add-gal { font-size: 0.72rem; }

/* Slider */
.wf-slider-wrap { margin-top: 0.25rem; }
.wf-slider-track-wrap {
    position: relative;
    padding-top: 40px;
}
.wf-slider-bubble {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, #3a86ff, #00d4ff);
    color: white;
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 12px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(58, 134, 255, 0.4);
    will-change: transform;
}
.wf-slider-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #00b8ff;
}
.wf-slider {
    width: 100%;
    -webkit-appearance: none;
    height: 12px;
    border-radius: 10px;
    background: linear-gradient(90deg, #3a86ff, #00d4ff, #00ff88);
    outline: none;
}
.wf-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: white;
    border: 3px solid #3a86ff;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.wf-slider-labels {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Goal */
.wf-goal-label {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.wf-goal-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.wf-goal-btn {
    flex: 1;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.6rem 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
}
.wf-goal-btn:hover { border-color: #3a86ff; }
.wf-goal-btn.active {
    border-color: var(--electric-green);
    background: rgba(0, 255, 136, 0.1);
}
.wf-goal-custom-row {
    display: flex;
    gap: 0.5rem;
}
.wf-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.6rem 0.85rem;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
}

/* Month Calendar */
.wf-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.wf-month-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
}
.wf-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}
.wf-cal-header {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--text-muted);
    padding: 2px;
}
.wf-cal-day {
    text-align: center;
    padding: 5px 2px;
    border-radius: 10px;
    min-height: 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
}
.wf-cal-day.empty { min-height: 0; }
.wf-cal-day.hit {
    background: rgba(0, 255, 136, 0.15);
    border: 1px solid rgba(0, 255, 136, 0.3);
}
.wf-cal-day.partial {
    background: rgba(58, 134, 255, 0.1);
    border: 1px solid rgba(58, 134, 255, 0.2);
}
.wf-cal-day.today {
    border: 2px solid var(--neon-yellow) !important;
}
.wf-cal-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
}
.wf-cal-oz {
    font-family: var(--font-mono);
    font-size: 0.5rem;
    color: var(--text-muted);
}
.wf-month-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════
   Xport! — Export Data
   ═══════════════════════════════════════════════════════════════════════ */

.top-logo-xport {
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: all 0.2s;
    text-decoration: none;
}
.top-logo-xport:hover { transform: scale(1.1); }
.top-logo-xport .logo-bang { color: var(--electric-green); }

.top-logo-nuke {
    background: linear-gradient(135deg, #ff3366, #ff6600);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}
.top-logo-nuke:hover { transform: scale(1.1); }

.top-logo-st {
    background: linear-gradient(135deg, #ff6b35, #ffc233);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}
.top-logo-st:hover { transform: scale(1.1); }
.top-logo-st .logo-bang { color: var(--electric-green); -webkit-text-fill-color: var(--electric-green); }

/* ST slider gradient */
.st-slider {
    background: linear-gradient(90deg, #ff6b35, #ffc233, #00ff88) !important;
}
.st-slider::-webkit-slider-thumb {
    border-color: #ff6b35 !important;
}

/* HealthKit sync bar */
.st-sync-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    background: var(--surface);
    margin-bottom: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.st-sync-active {
    background: rgba(0, 255, 136, 0.08);
    border: 1px solid rgba(0, 255, 136, 0.15);
    color: var(--electric-green);
}
.st-sync-manual {
    background: rgba(255, 194, 51, 0.08);
    border: 1px solid rgba(255, 194, 51, 0.15);
    color: #ffc233;
}

.top-logo-st {
    background: linear-gradient(135deg, #ff6b35, #ffc233);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}
.top-logo-st:hover { transform: scale(1.1); }
.top-logo-st .logo-bang {
    background: linear-gradient(135deg, #00ff88, #ffc233);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ST slider gradient */
.st-slider {
    background: linear-gradient(90deg, #ff6b35, #ffc233, #00ff88) !important;
}
.st-slider::-webkit-slider-thumb {
    border-color: #ff6b35 !important;
}
.st-bubble {
    background: linear-gradient(135deg, #ff6b35, #ffc233) !important;
    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4) !important;
}
.st-bubble::after {
    border-top-color: #ffc233 !important;
}

/* HealthKit status bar */
.st-health-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.nuke-btn {
    background: linear-gradient(135deg, #ff3366, #cc1144);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
}
.nuke-btn:hover:not(:disabled) {
    box-shadow: 0 0 20px rgba(255, 51, 102, 0.4);
    transform: scale(1.02);
}
.nuke-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.nuke-option input[type="checkbox"] { display: none; }
.nuke-option input[type="checkbox"]:checked + .nuke-check {
    background: #ff3366;
    border-color: #ff3366;
}
.nuke-option input[type="checkbox"]:checked + .nuke-check::after {
    content: "✓";
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
}

/* ST! — Step Up */
.top-logo-st {
    background: linear-gradient(135deg, #ff6b35, #ffc233);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}
.top-logo-st:hover { transform: scale(1.1); }
.top-logo-st .logo-bang { -webkit-text-fill-color: var(--electric-green); }

.st-shoe-outer {
    width: 300px;
    height: 200px;
}
.st-shoe-main {
    width: 260px;
    height: 160px;
}
.st-ring-1, .st-ring-2, .st-ring-3 {
    border-radius: 45%;
}
.st-ring-1 { width: 280px; height: 180px; }
.st-ring-2 { width: 310px; height: 200px; animation-delay: 0.5s; }
.st-ring-3 { width: 340px; height: 220px; animation-delay: 1s; }

.st-sensor-section {
    margin: 0.75rem 0;
    text-align: center;
}
.st-sensor-btn {
    background: linear-gradient(135deg, #ff6b35, #ffc233);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.6rem 1.2rem;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s;
}
.st-sensor-btn:hover { box-shadow: 0 0 20px rgba(255, 107, 53, 0.4); transform: scale(1.02); }

.st-sensor-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.75rem;
    margin-top: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--text-secondary);
}
.st-pulse-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #00ff88;
    animation: stPulse 1.2s ease-in-out infinite;
}
@keyframes stPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.st-slider {
    background: linear-gradient(90deg, #ff6b35, #ffc233, #00ff88) !important;
}
.st-slider::-webkit-slider-thumb {
    border-color: #ff6b35 !important;
}
.st-bubble {
    background: linear-gradient(135deg, #ff6b35, #ffc233) !important;
}
.st-bubble::after {
    border-top-color: #ffc233 !important;
}

.xport-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.xport-label {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}
.xport-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.xport-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
}
.xport-option:hover {
    background: var(--surface);
    border-color: var(--text-muted);
}
.xport-option input[type="radio"] {
    display: none;
}
.xport-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border);
    flex-shrink: 0;
    transition: all 0.15s;
    position: relative;
}
.xport-option input[type="radio"]:checked ~ .xport-radio {
    border-color: var(--electric-green);
    background: var(--electric-green);
    box-shadow: inset 0 0 0 3px var(--bg-card);
}
.xport-option input[type="radio"]:checked ~ .xport-radio::after {
    content: '';
}
.xport-desc {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-left: auto;
}
.xport-status {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    margin-top: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   User Profile Avatar & Dropdown
   ═══════════════════════════════════════════════════════════════════════ */
.user-profile-wrap {
    position: relative;
}
.user-avatar-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform 0.15s;
}
.user-avatar-btn:hover { transform: scale(1.1); }
.user-avatar-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    font-size: 1.2rem;
    overflow: hidden;
}
.avatar-img-sm {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.user-profile-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem;
    min-width: 160px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.profile-greeting {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.profile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-primary);
    transition: background 0.15s;
}
.profile-menu-item:hover { background: var(--surface); }
.profile-menu-item.active { background: var(--surface); }

/* Profile Page */
.profile-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.profile-avatar-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.profile-big-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--surface);
    border: 3px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    overflow: hidden;
}
.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-primary);
}
.profile-email {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}
.profile-section {
    margin-top: 1.25rem;
}
.profile-section-label {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.emoji-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.emoji-pick-btn {
    background: var(--surface);
    border: 2px solid transparent;
    border-radius: 12px;
    font-size: 1.3rem;
    padding: 6px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.emoji-pick-btn:hover {
    background: var(--bg-card);
    border-color: var(--text-muted);
    transform: scale(1.15);
}
.emoji-pick-btn.selected {
    border-color: var(--electric-green);
    background: rgba(0, 255, 136, 0.1);
}

/* Category Preferences (below) */
.t1-prefs-panel {
    margin-top: 0.75rem;
}
.t1-prefs-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
}
.t1-pref-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
    user-select: none;
}
.t1-pref-item:hover {
    background: var(--surface);
}
.t1-pref-check {
    width: 20px;
    height: 20px;
    border-radius: 12px;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
    transition: all 0.15s;
}
.t1-pref-item.active .t1-pref-check {
    background: var(--electric-green);
    border-color: var(--electric-green);
    color: var(--bg-dark);
}
.t1-pref-emoji {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.t1-pref-name {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--text-primary);
}
.t1-pref-item:not(.active) .t1-pref-name {
    color: var(--text-muted);
}


/* ═══════════════════════════════════════════════════════════════════════
   CT! — CYCLE TRACKER
   ═══════════════════════════════════════════════════════════════════════ */

.top-logo-ct {
    background: none;
    border: none;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #e85d75, #9b7dd4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    cursor: pointer;
    margin-left: 0.75rem;
    padding: 0.25rem 0.5rem;
    transition: all 0.2s;
}
.top-logo-ct:hover { transform: scale(1.1); }
.top-logo-ct .logo-bang { -webkit-text-fill-color: var(--neon-yellow); }

.ct-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.ct-content {
    flex: 1;
    max-width: 520px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 3rem;
    width: 100%;
}

/* Setup Card */
.ct-setup-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--shadow-soft);
}
.ct-setup-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.ct-setup-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}
.ct-setup-sub {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.ct-form-group {
    text-align: left;
    margin-bottom: 1.25rem;
}
.ct-form-group label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.ct-form-group input[type="date"] {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1.05rem;
    text-align: center;
}
.ct-form-group input[type="date"]:focus {
    outline: none;
    border-color: #e85d75;
    box-shadow: 0 0 0 3px rgba(232, 93, 117, 0.2);
}
.ct-cycle-btns {
    display: flex;
    gap: 0.4rem;
}
.ct-len-btn, .ct-plen-btn {
    flex: 1;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0.65rem 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
}
.ct-len-btn:hover, .ct-plen-btn:hover {
    border-color: rgba(232, 93, 117, 0.4);
}
.ct-len-btn.active, .ct-plen-btn.active {
    background: rgba(232, 93, 117, 0.15);
    border-color: #e85d75;
    color: #e85d75;
}
.ct-save-btn {
    margin-top: 0.5rem;
    background: linear-gradient(135deg, #e85d75, #9b7dd4) !important;
    border-radius: var(--radius-xl) !important;
    font-size: 1rem !important;
    padding: 1rem !important;
}

/* Hero Card */
.ct-hero-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s;
}
.ct-hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}
.ct-cycle-day-wrap { text-align: left; }
.ct-cycle-day-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    display: block;
}
.ct-cycle-day-num {
    font-family: var(--font-display);
    font-size: 3.5rem;
    color: var(--text-primary);
    line-height: 1;
}
.ct-until-wrap {
    text-align: right;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ct-until-num {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--text-secondary);
    line-height: 1;
}
.ct-until-label {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.4;
}
.ct-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-xl);
    border: 1px solid;
    margin-bottom: 0.5rem;
}
.ct-phase-icon { font-size: 1.5rem; }
.ct-phase-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    color: var(--text-primary);
}
.ct-phase-theme {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Calendar */
.ct-month-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}
.ct-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ct-month-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
}
.ct-month-nav {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-md);
    transition: all 0.15s;
}
.ct-month-nav:hover {
    background: var(--surface);
    color: var(--text-primary);
}
.ct-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.ct-cal-header {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    color: var(--text-muted);
    padding: 4px;
    letter-spacing: 0.05em;
}
.ct-cal-day {
    text-align: center;
    padding: 6px 2px;
    border-radius: 12px;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.ct-cal-day.empty { min-height: 0; }
.ct-cal-day.today {
    border-width: 2px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.08);
}
.ct-cal-num {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ct-cal-phase {
    font-size: 0.6rem;
    line-height: 1;
}

/* Legend */
.ct-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.75rem;
    justify-content: center;
}
.ct-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    color: var(--text-muted);
    letter-spacing: 0.05em;
}
.ct-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.ct-dot-menses { background: #e85d75; }
.ct-dot-follicular { background: #5bbf8e; }
.ct-dot-ovulation { background: #f0b742; }
.ct-dot-luteal { background: #9b7dd4; }

/* Expectation Levels */
.ct-levels-card, .ct-suggest-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow-soft);
}
.ct-card-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
}
.ct-levels-grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.ct-level-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.ct-level-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
}
.ct-level-info { flex: 1; }
.ct-level-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.35rem;
}
.ct-level-bars {
    display: flex;
    gap: 5px;
    margin-bottom: 0.2rem;
}
.ct-level-bar {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: var(--surface);
    transition: background 0.3s;
}
.ct-level-bar.filled {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
}
.ct-level-text {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
}

/* Suggestions */
.ct-suggest-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.ct-suggest-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    color: var(--text-primary);
    padding: 0.6rem 0.85rem;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
}
.ct-suggest-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Log Section */
.ct-log-section {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

@media (max-width: 400px) {
    .ct-content { padding: 1rem; }
    .ct-cycle-day-num { font-size: 2.8rem; }
    .ct-until-num { font-size: 1.6rem; }
}