* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            overflow-x: hidden;
            width: 100%;
        }
        body, button, input, select, textarea {
            font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        :root {
            --bg: #ffffff;
            --text: #0a0a0a;
            --border: #0a0a0a;
            --accent-bg: #0a0a0a;
            --accent-text: #ffffff;
            --gray-light: #f8f8f8;
            --gray: #888;
            --gray-border: #ddd;
            --success: #1a1a1a;
            --danger: #0a0a0a;
            --shadow: 0 2px 12px rgba(0,0,0,0.06);
            --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
            --hover-bg: #f0f0f0;
            --dim-text: #555;
            --muted-text: #aaa;
            --input-bg: #ffffff;
            --bar-bg: #eee;
            --drag-bg: #e8e8e8;
            --delete-hover-bg: #eee;
            --delete-hover-color: #333;
            --checkbox-bg: #ffffff;
        }

        /* === WSKAŹNIK TRENINGU === */
        .training-indicator {
            position: fixed; top: 12px; left: 12px; z-index: 997;
            font-family: inherit; font-size: 0.65rem; font-weight: 800;
            letter-spacing: 1px; padding: 0.35rem 0.7rem;
            border: 1.5px solid var(--accent-bg); border-radius: 20px;
            cursor: pointer; background: var(--accent-bg); color: var(--accent-text);
            animation: trainPulse 2s ease-in-out infinite;
        }
        @keyframes trainPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.7; } }
        .training-indicator:hover { opacity: 0.9; transform: scale(1.03); }

        /* === ASYSTENT AI === */
        .ai-toggle {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 2.5px solid var(--border);
            background: var(--accent-bg);
            color: var(--accent-text);
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 999;
            box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
            transition: all 0.15s;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .ai-toggle:hover { transform: scale(1.08); }
        .ai-toggle:active { transform: scale(0.93); }

        .ai-mic {
            position: fixed;
            bottom: 27px;
            right: 74px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid var(--border);
            background: var(--bg);
            color: var(--text);
            font-size: 0.85rem;
            cursor: pointer;
            z-index: 999;
            display: none;
            align-items: center;
            justify-content: center;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.1);
            transition: all 0.15s;
        }
        .ai-mic.show { display: flex; }
        .ai-mic:hover { transform: scale(1.08); }
        .ai-mic.listening {
            background: #e74c3c;
            color: #fff;
            border-color: #e74c3c;
            animation: micPulse 0.8s infinite;
        }
        @keyframes micPulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
            50% { box-shadow: 0 0 0 10px rgba(231,76,60,0); }
        }

        .ai-panel {
            position: fixed;
            bottom: 80px;
            right: 20px;
            width: 370px;
            height: 500px;
            border: 2.5px solid var(--border);
            border-radius: 16px 4px 16px 16px;
            background: var(--bg);
            z-index: 998;
            display: none;
            flex-direction: column;
            box-shadow: 6px 6px 0 rgba(0,0,0,0.12);
            overflow: hidden;
        }
        .ai-panel.open { display: flex; }

        .ai-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.6rem 0.8rem;
            border-bottom: 2px solid var(--border);
            font-weight: 700;
            font-size: 0.85rem;
            background: var(--gray-light);
            gap: 0.5rem;
        }
        .ai-header-btns { display: flex; gap: 0.3rem; }
        .ai-header-btn {
            background: none;
            border: 1.5px solid var(--border);
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.7rem;
            padding: 0.25rem 0.4rem;
            color: var(--text);
            transition: all 0.1s;
        }
        .ai-header-btn:hover { background: var(--hover-bg); }

        .ai-tts-btn.active { color: #2ecc71; border-color: #2ecc71; }
        .ai-tts-btn.speaking {
            color: #e74c3c;
            border-color: #e74c3c;
            animation: ttsPulse 0.6s infinite;
        }
        @keyframes ttsPulse {
            0%,100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.4); }
            50% { box-shadow: 0 0 0 5px rgba(231,76,60,0); }
        }
        .ai-tts-btn.muted { color: var(--muted-text); }

        .ai-tts-label {
            font-size: 0.7rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            cursor: pointer;
            color: var(--text);
        }
        .ai-tts-label input { cursor: pointer; }

        .ai-messages {
            flex: 1;
            overflow-y: auto;
            padding: 0.6rem;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            background: var(--bg);
        }
        .ai-msg {
            max-width: 85%;
            padding: 0.5rem 0.7rem;
            border-radius: 12px 12px 12px 2px;
            font-size: 0.78rem;
            line-height: 1.45;
            word-break: break-word;
        }
        .ai-msg-bot {
            align-self: flex-start;
            background: var(--gray-light);
            border: 1.5px solid var(--border);
            border-radius: 2px 12px 12px 12px;
        }
        .ai-msg-user {
            align-self: flex-end;
            background: var(--accent-bg);
            color: var(--accent-text);
            border: 1.5px solid var(--border);
            border-radius: 12px 2px 12px 12px;
        }
        .ai-msg, .ai-input {
            user-select: text;
        }
        .ai-msg code {
            background: rgba(0,0,0,0.08);
            padding: 0.1rem 0.3rem;
            border-radius: 3px;
            font-size: 0.75rem;
            font-family: monospace;
        }
        .ai-msg strong { font-weight: 800; }
        .ai-msg em { font-style: italic; }
        .ai-msg .streaming-cursor::after {
            content: '▊';
            animation: blink 0.6s infinite;
        }
        @keyframes blink { 50% { opacity: 0; } }

        .ai-typing-dots { display: inline-flex; gap: 4px; align-items: center; height: 1.2em; vertical-align: middle; }
        .ai-typing-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--dim-text); animation: ai-dot 1.1s infinite ease-in-out; }
        .ai-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
        .ai-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
        @keyframes ai-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-5px); opacity: 1; } }

        .ai-tool-results {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
            margin-top: 0.3rem;
        }
        .ai-tool-results.ai-tool-results-collapsed {
            display: none;
        }
        .ai-tool-toggle {
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
            margin-top: 0.4rem;
            padding: 0.1rem 0;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.62rem;
            color: var(--dim-text);
        }
        .ai-tool-toggle:hover { color: var(--text); }
        .ai-tool-toggle i { font-size: 0.55rem; }
        .ai-tool-result {
            font-size: 0.68rem;
            padding: 0.35rem 0.55rem;
            border-radius: 6px;
            border-left: 3px solid #2ecc71;
            background: rgba(46,204,113,0.08);
            color: var(--text);
            line-height: 1.35;
            white-space: pre-line;
        }
        body.dark .ai-tool-result {
            background: rgba(46,204,113,0.1);
            border-left-color: #27ae60;
        }
        body.midnight .ai-tool-result {
            background: rgba(46,204,113,0.1);
            border-left-color: #27ae60;
        }
        .ai-tool-result.ai-confirm-pending {
            border-left-color: #f39c12;
            background: rgba(243,156,18,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        body.dark .ai-tool-result.ai-confirm-pending {
            background: rgba(243,156,18,0.12);
        }
        body.midnight .ai-tool-result.ai-confirm-pending {
            background: rgba(243,156,18,0.12);
        }
        .ai-tool-result.ai-confirm-cancelled {
            border-left-color: #999;
            background: rgba(153,153,153,0.1);
            color: var(--dim-text);
        }
        .ai-confirm-btns {
            display: flex;
            gap: 0.3rem;
            flex-shrink: 0;
        }
        .ai-confirm-yes, .ai-confirm-no {
            border: none;
            border-radius: 5px;
            width: 1.4rem;
            height: 1.4rem;
            font-size: 0.7rem;
            line-height: 1;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .ai-confirm-yes {
            background: #2ecc71;
            color: #fff;
        }
        .ai-confirm-no {
            background: #e74c3c;
            color: #fff;
        }
        .ai-confirm-yes:hover { background: #27ae60; }
        .ai-confirm-no:hover { background: #c0392b; }

        .ai-input-row {
            display: flex;
            gap: 0.4rem;
            padding: 0.5rem 0.6rem;
            border-top: 2px solid var(--border);
            background: var(--gray-light);
        }
        .ai-input {
            flex: 1;
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.4rem 0.6rem;
            font-family: inherit;
            font-size: 0.8rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
        }
        .ai-send-btn {
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.4rem 0.7rem;
            background: var(--accent-bg);
            color: var(--accent-text);
            cursor: pointer;
            font-size: 0.85rem;
            transition: all 0.1s;
        }
        .ai-send-btn:hover { background: #222; }
        .ai-send-btn:disabled { opacity: 0.5; cursor: default; }

        .ai-info-panel {
            padding: 0.5rem 0.8rem;
            border-bottom: 1.5px solid var(--gray-border);
            font-size: 0.7rem;
            line-height: 1.5;
            max-height: 200px;
            overflow-y: auto;
            background: var(--gray-light);
        }
        .ai-info-panel strong { font-size: 0.72rem; }
        .ai-info-panel code {
            background: rgba(0,0,0,0.08);
            padding: 0.05rem 0.25rem;
            border-radius: 2px;
            font-size: 0.65rem;
            font-family: monospace;
        }

        @media (max-width: 420px) {
            .ai-panel { width: calc(100vw - 20px); right: 10px; height: 450px; bottom: 70px; }
        }

        /* === EKRAN LOGOWANIA === */
        .auth-overlay {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .auth-overlay.hidden {
            display: none;
        }

        .auth-box {
            width: 90%;
            max-width: 360px;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .auth-tabs {
            display: flex;
            gap: 0;
            border: 2px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
        }

        .auth-tab {
            flex: 1;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            padding: 0.5rem;
            border: none;
            cursor: pointer;
            background: var(--bg);
            color: var(--text);
            transition: all 0.15s;
        }

        .auth-tab.active {
            background: var(--accent-bg);
            color: var(--accent-text);
        }

        .auth-form {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 1rem;
        }

        .auth-input {
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.55rem 0.7rem;
            font-family: inherit;
            font-size: 0.9rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
        }

        .auth-input:focus {
            border-width: 3px;
        }

        .auth-btn {
            background: var(--accent-bg);
            color: var(--accent-text);
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.6rem;
            font-family: inherit;
            font-weight: 700;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.15s;
        }

        .auth-btn:hover {
            background: #222;
        }

        .auth-error {
            font-size: 0.75rem;
            color: #c00;
            min-height: 0;
        }

        .auth-skip {
            text-align: center;
            font-size: 0.75rem;
            color: var(--dim-text);
            cursor: pointer;
            text-decoration: underline;
        }

        .auth-skip:hover {
            color: var(--text);
        }

        /* === TRYB CIEMNY === */
        body.dark {
            --bg: #1a1a1a;
            --text: #e0e0e0;
            --border: #555;
            --accent-bg: #e0e0e0;
            --accent-text: #1a1a1a;
            --gray-light: #252525;
            --gray: #999;
            --gray-border: #444;
            --shadow: 0 2px 12px rgba(0,0,0,0.4);
            --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
            --hover-bg: #2a2a2a;
            --dim-text: #aaa;
            --muted-text: #666;
            --input-bg: #222;
            --bar-bg: #333;
            --drag-bg: #2a2a2a;
            --delete-hover-bg: #333;
            --delete-hover-color: #eee;
            --checkbox-bg: #2a2a2a;
            color-scheme: dark;
        }

        body {
            font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            background-color: var(--bg);
            background-image: radial-gradient(circle, var(--dot-color, rgba(0,0,0,0.04)) 1px, transparent 1px);
            background-size: 8px 8px;
            color: var(--text);
            padding: 1rem 5rem;
            margin: 0;
            line-height: 1.5;
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            height: 100vh;
            overflow: hidden;
            --dot-color: rgba(0,0,0,0.04);
        }

        body.dark {
            --dot-color: rgba(255,255,255,0.03);
        }

        /* === TRYB COFFEE === */
        body.coffee {
            --bg: #f5ede4;
            --text: #3b2a1e;
            --border: #3b2a1e;
            --accent-bg: #6f4e37;
            --accent-text: #f5ede4;
            --gray-light: #ece0d1;
            --gray: #8a7462;
            --gray-border: #d8c8b8;
            --success: #3b2a1e;
            --danger: #3b2a1e;
            --shadow: 0 2px 12px rgba(59,42,30,0.10);
            --shadow-lg: 0 8px 30px rgba(59,42,30,0.18);
            --hover-bg: #ece0d1;
            --dim-text: #6f5c4d;
            --muted-text: #b5a494;
            --input-bg: #fffaf5;
            --bar-bg: #ecdfd0;
            --drag-bg: #e6d7c3;
            --delete-hover-bg: #ecdfd0;
            --delete-hover-color: #3b2a1e;
            --checkbox-bg: #fffaf5;
            --dot-color: rgba(59,42,30,0.05);
            color-scheme: light;
        }

        /* === TRYB PÓŁNOC === */
        body.midnight {
            --bg: #1a1625;
            --text: #e6e0f0;
            --border: #5c4f74;
            --accent-bg: #8b6fc9;
            --accent-text: #f5f2fa;
            --gray-light: #241f33;
            --gray: #9a8fb3;
            --gray-border: #3a3350;
            --shadow: 0 2px 12px rgba(0,0,0,0.4);
            --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
            --hover-bg: #2c2640;
            --dim-text: #b8adcf;
            --muted-text: #6f6389;
            --input-bg: #211c30;
            --bar-bg: #2f2845;
            --drag-bg: #2c2640;
            --delete-hover-bg: #2f2845;
            --delete-hover-color: #f0eaf7;
            --checkbox-bg: #2c2640;
            --dot-color: rgba(230,224,240,0.04);
            color-scheme: dark;
        }

        /* Główny grid */
        .dashboard {
            display: grid;
            grid-template-columns: 1fr 340px;
            grid-template-rows: auto 1fr auto;
            gap: 1rem;
            height: 100%;
        }

        /* Główna kolumna */
        main {
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
        }

        /* Nagłówek */
        .header {
            grid-column: 1 / -1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .greeting h1 {
            font-size: clamp(1.3rem, 4vw, 1.8rem);
            font-weight: 600;
            letter-spacing: -0.5px;
        }

        .user-name {
            cursor: pointer;
            border-bottom: 2px dashed transparent;
            transition: border-color 0.15s;
        }

        .user-name:hover {
            border-bottom-color: var(--gray);
        }

        .user-name-input {
            font-family: inherit;
            font-size: inherit;
            font-weight: 600;
            letter-spacing: -0.5px;
            border: none;
            border-bottom: 2px solid var(--border);
            outline: none;
            background: transparent;
            color: var(--text);
            width: auto;
            min-width: 120px;
            padding: 0;
            margin: 0;
        }

.name-day {
            font-size: 0.75rem;
            color: var(--dim-text);
            margin-top: 0.4rem;
            margin-bottom: 0;
            font-weight: 500;
        }

        .daily-summary {
            font-size: 0.72rem;
            color: var(--dim-text);
            margin-top: 0.3rem;
            margin-bottom: 0.3rem;
            font-weight: 400;
            line-height: 1.35;
            max-width: 500px;
        }

        .header-right {
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .site-wordmark {
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: -0.02em;
            color: var(--accent-bg);
            margin-bottom: 0.25rem;
            user-select: none;
            line-height: 1;
        }
        .site-wm-tld {
            font-weight: 400;
            opacity: 0.7;
        }

        .avatar-wrapper {
            position: relative;
        }

        .avatar-menu {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            background: var(--bg);
            border: 2px solid var(--border);
            border-radius: 12px;
            padding: 0.4rem;
            display: none;
            flex-direction: column;
            gap: 2px;
            z-index: 100;
            min-width: 190px;
            box-shadow: var(--shadow-lg);
        }

        .avatar-menu.show {
            display: flex;
        }

        .avatar-menu-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-family: inherit;
            font-size: 0.8rem;
            font-weight: 500;
            padding: 0.5rem 0.7rem;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--text);
            cursor: pointer;
            transition: background 0.1s;
            text-align: left;
            white-space: nowrap;
        }

        .avatar-menu-item:hover {
            background: var(--gray-light);
        }

        .avatar-menu-icon {
            font-size: 1rem;
        }

        /* Status konta (PRO/FREE) na górze menu awatara — patrz D.applyPermissionBadges
           w js/core.js. Osobny blok nad przyciskami, nie .avatar-menu-item — nie jest klikalny.
           Ten sam żółty co .pro-menu-badge/.premium-locked-badge niżej — spójny język "PRO"
           w całej appce, tylko tu oznacza "masz", tam "nie masz". */
        .avatar-menu-status {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.3rem 0.6rem 0.6rem;
            margin-bottom: 0.3rem;
            border-bottom: 1px solid var(--border);
        }
        .account-status-badge {
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            padding: 0.15rem 0.5rem;
            border-radius: 8px;
            flex-shrink: 0;
        }
        .account-status-badge.status-pro { background: #f1c40f; color: #333; border: 1px solid #e0b000; }
        .account-status-badge.status-free { background: var(--gray-light); color: var(--dim-text); border: 1px solid var(--border); }
        .account-status-text {
            font-size: 0.68rem;
            color: var(--dim-text);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .avatar {
            width: 44px;
            height: 44px;
            background-color: var(--accent-bg);
            color: var(--accent-text);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1.1rem;
            border: 2px solid var(--border);
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.15s;
        }

        .avatar:hover {
            transform: scale(1.08);
        }

        .avatar:active {
            transform: scale(0.94);
        }

        /* Karty tygodnia */
        .week-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.5rem;
            margin-bottom: 1rem;
        }

        .day-card {
            border: 2px solid var(--border);
            padding: 0.5rem 0.25rem;
            text-align: center;
            border-radius: 14px;
            aspect-ratio: 1 / 1;
            transition: all 0.2s ease;
            background-color: var(--bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.25rem;
            cursor: pointer;
            position: relative;
            min-width: 0;
        }

        .day-card:hover {
            background-color: var(--gray-light);
            transform: translateY(-2px);
            box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
        }

        .day-card:active {
            transform: scale(0.97);
        }

        .day-card.selected {
            background-color: var(--accent-bg);
            color: var(--accent-text);
            font-weight: 600;
            box-shadow: 3px 3px 0 #888;
            border-width: 3px;
        }

        .day-card.selected .day-name {
            color: #ccc;
        }

        .day-card.today:not(.selected) {
            border-width: 3px;
            border-style: dashed;
        }

        .day-card.drag-over {
            background-color: #e8e8e8;
            border-width: 3px;
            transform: scale(1.03);
            box-shadow: 0 0 0 4px rgba(0,0,0,0.1);
        }

        .day-card.selected.drag-over {
            background-color: #333;
            box-shadow: 0 0 0 4px rgba(0,0,0,0.3);
        }

        .cal-day.drag-over {
            background-color: #e8e8e8;
            box-shadow: 0 0 0 3px rgba(0,0,0,0.15);
            transform: scale(1.12);
            z-index: 1;
        }

        .cal-day.selected-date.drag-over {
            box-shadow: 0 0 0 3px rgba(0,0,0,0.3);
        }

        body.dark .cal-day.drag-over { background-color: #333; }
        body.midnight .cal-day.drag-over { background-color: #333; }

        .day-name {
            font-weight: 600;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: #555;
        }

        .day-date {
            font-size: clamp(1.1rem, 3vw, 1.5rem);
            font-weight: 700;
            line-height: 1;
        }

        .day-task-count {
            font-size: 0.6rem;
            opacity: 0.7;
            background: rgba(0,0,0,0.06);
            border: 1px solid rgba(0,0,0,0.12);
            padding: 0.1rem 0.35rem;
            border-radius: 5px;
            font-weight: 600;
        }

        .day-task-done {
            font-size: 0.65rem;
            color: #fff;
            background: #2ecc71;
            border: 1px solid #27ae60;
            padding: 0.05rem 0.35rem;
            border-radius: 5px;
            font-weight: 700;
            line-height: 1;
        }

        .day-card.selected .day-task-count {
            background: rgba(255,255,255,0.2);
            border-color: rgba(255,255,255,0.3);
        }

        .day-card.selected .day-task-done {
            background: #27ae60;
            border-color: #219a52;
            color: #fff;
        }

        body.dark .day-task-count {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.15);
        }
        body.midnight .day-task-count {
            background: rgba(255,255,255,0.08);
            border-color: rgba(255,255,255,0.15);
        }
        body.dark .day-task-done {
            background: #27ae60;
            border-color: #219a52;
        }
        body.midnight .day-task-done {
            background: #27ae60;
            border-color: #219a52;
        }

        .weather-icon {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        @media (min-width: 769px) {
            .day-card .weather-icon {
                position: absolute;
                top: 6px;
                right: 6px;
                font-size: 1rem;
            }
        }

        .today-badge {
            position: absolute;
            top: -8px;
            left: -8px;
            background: var(--accent-bg);
            color: var(--accent-text);
            font-size: 0.6rem;
            padding: 0.15rem 0.4rem;
            border-radius: 10px;
            font-weight: 700;
            border: 1px solid var(--bg);
            display: none;
        }

        .day-card.today:not(.selected) .today-badge {
            display: block;
        }

        /* Sekcje – komiksowe tytuły */
        .section-title {
            font-size: 0.9rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 0.5rem;
            border-bottom: 3px solid var(--border);
            padding-bottom: 0.25rem;
            display: inline-block;
            background: var(--gray-light);
            padding: 0.15rem 0.6rem;
            border: 2px solid var(--border);
            border-radius: 2px 8px 2px 8px;
        }

        /* Lista zadań */
        .todo-list {
            list-style: none;
            margin-top: 0.5rem;
            flex: 1;
            overflow-y: auto;
            min-height: 0;
        }

        .todo-item {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.6rem 0.5rem;
            border-bottom: 1px dashed #ddd;
            font-size: 0.95rem;
            cursor: grab;
            transition: all 0.15s;
            border-radius: 6px;
            position: relative;
        }

        .todo-item:active {
            cursor: grabbing;
        }

        .todo-item:hover {
            background: var(--gray-light);
        }

        .todo-item:last-child {
            border-bottom: none;
        }

        .todo-item.dragging {
            opacity: 0.5;
            background: #f0f0f0;
            border: 2px dashed var(--border);
            border-radius: 8px;
        }

        .todo-item.drag-over-item {
            border-top: 3px solid var(--accent-bg);
            padding-top: calc(0.6rem + 3px);
        }

        /* Odtwarzane na konkretnym <li> po zaznaczeniu zadania jako zrobione — patrz
           checkbox change handler w ui.js (renderTasks() przebudowuje listę z opóźnieniem,
           żeby ta animacja zdążyła się pokazać na klikniętym elemencie). */
        .todo-item.todo-item-just-done {
            animation: todoItemDoneFlash 0.5s ease;
        }
        @keyframes todoItemDoneFlash {
            0%   { background: rgba(46, 204, 113, 0.32); }
            100% { background: transparent; }
        }
        .todo-item.todo-item-just-done .todo-checkbox {
            animation: todoCheckPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        @keyframes todoCheckPop {
            0%   { transform: scale(1); }
            45%  { transform: scale(1.4) rotate(-8deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        .todo-item.todo-item-just-done .todo-text {
            animation: todoTextDone 0.4s ease;
        }
        @keyframes todoTextDone {
            0%   { opacity: 1; }
            40%  { opacity: 0.4; }
            100% { opacity: 1; }
        }
        @media (prefers-reduced-motion: reduce) {
            .todo-item.todo-item-just-done,
            .todo-item.todo-item-just-done .todo-checkbox,
            .todo-item.todo-item-just-done .todo-text {
                animation: none;
            }
        }

        .drag-handle {
            color: #ccc;
            font-size: 0.85rem;
            cursor: grab;
            flex-shrink: 0;
            padding: 0 0.3rem;
        }

        .drag-handle:active {
            cursor: grabbing;
        }

        .todo-checkbox {
            appearance: none;
            -webkit-appearance: none;
            width: 20px;
            height: 20px;
            border: 2px solid var(--border);
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            transition: all 0.15s;
            flex-shrink: 0;
        }

        .todo-checkbox:checked {
            background-color: var(--accent-bg);
        }

        .todo-checkbox:checked::after {
            content: "✓";
            color: white;
            font-size: 13px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-weight: bold;
        }

        .todo-star {
            cursor: pointer;
            font-size: 1rem;
            flex-shrink: 0;
            transition: transform 0.1s;
            user-select: none;
        }

        .todo-star:hover {
            transform: scale(1.2);
        }

        .todo-star:active {
            transform: scale(0.9);
        }

        .todo-text {
            transition: all 0.2s;
            word-break: break-word;
            flex: 1;
        }

        .todo-item.priority .todo-text {
            font-weight: 700;
        }

        .todo-checkbox:checked+.todo-star+.todo-text,
        .todo-checkbox:checked+.todo-text {
            text-decoration: line-through;
            color: #aaa;
        }

        .delete-task-btn, .move-task-btn {
            background: none;
            border: none;
            color: #bbb;
            cursor: pointer;
            font-size: 0.85rem;
            padding: 0.2rem 0.35rem;
            opacity: 0;
            transition: all 0.2s;
            flex-shrink: 0;
            border-radius: 4px;
        }

        .todo-item:hover .delete-task-btn,
        .todo-item:hover .move-task-btn {
            opacity: 1;
        }

        .delete-task-btn:hover, .move-task-btn:hover {
            color: #333;
            background: #eee;
        }

        .add-task-form {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.8rem;
        }

        .add-task-input {
            flex: 1;
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.5rem 0.7rem;
            font-family: inherit;
            font-size: 0.9rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
            min-width: 0;
            transition: border-width 0.15s;
        }

        .add-task-input:focus {
            border-width: 3px;
        }

        .add-task-btn {
            background: var(--accent-bg);
            color: var(--accent-text);
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.5rem 1rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            font-size: 0.9rem;
            white-space: nowrap;
            transition: all 0.15s;
        }

        .add-task-btn:hover {
            background: #222;
        }

        .add-task-btn:active {
            background: #333;
            transform: scale(0.96);
        }

        .tasks-for-day {
            font-size: 0.8rem;
            color: #555;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }

        /* Rząd zadania + notatki */
        .tasks-notes-row {
            display: flex;
            gap: 1.2rem;
            flex: 1;
            min-height: 0;
        }

        .tasks-col {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .notes-col {
            width: 300px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
        }

        .notes-col .mini-calendar {
            flex-shrink: 0;
            margin-bottom: 0.6rem;
        }

        .notes-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .add-note-btn {
            background: var(--accent-bg);
            color: var(--accent-text);
            border: 2px solid var(--border);
            border-radius: 8px;
            width: 28px;
            height: 28px;
            font-size: 1.1rem;
            font-weight: 700;
            cursor: pointer;
            font-family: inherit;
            line-height: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }

        .add-note-btn:hover {
            background: #222;
        }

        .add-note-btn:active {
            transform: scale(0.93);
        }

        .notes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.25rem;
            margin-top: 0.5rem;
            overflow-y: auto;
            flex: 1;
            align-content: start;
        }

        .note-card {
            border: 1.5px solid var(--gray-border);
            aspect-ratio: 1 / 1;
            padding: 0.25rem 0.2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.15s;
            background: var(--bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.15rem;
            position: relative;
        }

        .note-card:hover {
            border-color: var(--border);
            box-shadow: var(--shadow);
        }

        .note-card-icon {
            font-size: 0.95rem;
            color: var(--text);
        }

        .note-card-title {
            font-size: 0.65rem;
            font-weight: 600;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-word;
            max-width: 100%;
        }

        .note-card-delete {
            position: absolute;
            top: 1px;
            right: 2px;
            background: none;
            border: none;
            font-size: 0.55rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.15s;
            color: #999;
            padding: 2px;
            line-height: 1;
        }

        .note-card:hover .note-card-delete {
            opacity: 1;
        }

        .note-card-delete:hover {
            color: #333;
        }

        .notes-empty {
            grid-column: 1 / -1;
            text-align: center;
            color: #aaa;
            font-size: 0.7rem;
            font-style: italic;
            padding: 1rem 0;
        }

        /* Aktywności */
        .activities-section {
            margin-top: 0.5rem;
        }

        .activities-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }

        .activity-tile {
            border: 1.5px solid var(--gray-border);
            border-radius: 6px;
            padding: 0.15rem 0.3rem;
            cursor: pointer;
            font-size: 0.55rem;
            font-weight: 500;
            background: var(--bg);
            color: var(--text);
            transition: all 0.12s;
            user-select: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.15rem;
            width: 80px;
            text-align: center;
        }
        .activity-tile i {
            font-size: 0.55rem;
            color: var(--accent-bg);
            width: 12px;
            text-align: center;
        }
        .activity-tile.active i {
            color: var(--accent-text);
        }

        .activity-tile:hover {
            border-color: var(--border);
            box-shadow: var(--shadow);
        }

        .activity-tile.active {
            background: var(--accent-bg);
            color: var(--accent-text);
            border-color: var(--border);
            font-weight: 700;
        }

        .activity-tile:active {
            transform: scale(0.95);
        }

        /* Modal */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.35);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
        }
        #confirmModalOverlay { z-index: 1100; }
        #adminUsersManageOverlay { z-index: 1100; }

        .modal-overlay.show {
            display: flex;
        }

        .modal-box {
            background: var(--bg);
            border: 2px solid var(--border);
            border-radius: 16px;
            padding: 1.5rem;
            width: 90%;
            max-width: 520px;
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            box-shadow: var(--shadow-lg);
        }

        /* Modal wyboru motywu */
        .theme-options {
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .theme-option-card {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.7rem 0.9rem;
            border: 2px solid var(--gray-border);
            border-radius: 12px;
            background: var(--gray-light);
            cursor: pointer;
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--text);
            transition: border-color 0.15s, transform 0.1s;
        }

        .theme-option-card:hover {
            border-color: var(--accent-bg);
            transform: translateY(-1px);
        }

        .theme-option-card:active {
            transform: scale(0.97);
        }

        .theme-option-card.active {
            border-color: var(--accent-bg);
            box-shadow: 0 0 0 2px var(--accent-bg) inset;
        }

        .theme-option-swatch {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 2px solid var(--border);
            flex-shrink: 0;
        }

        .theme-swatch-light { background: linear-gradient(135deg, #ffffff 50%, #0a0a0a 50%); }
        .theme-swatch-dark { background: linear-gradient(135deg, #1a1a1a 50%, #e0e0e0 50%); }
        .theme-swatch-coffee { background: linear-gradient(135deg, #f5ede4 50%, #6f4e37 50%); }
        .theme-swatch-midnight { background: linear-gradient(135deg, #1a1625 50%, #8b6fc9 50%); }

        .theme-option-label {
            flex: 1;
            text-align: left;
        }

        .theme-option-check {
            opacity: 0;
            color: var(--accent-bg);
        }

        .theme-option-card.active .theme-option-check {
            opacity: 1;
        }

        /* Animowane przejście między motywami (View Transitions API) */
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation: none;
            mix-blend-mode: normal;
        }
        ::view-transition-old(root) { z-index: 1; }
        ::view-transition-new(root) { z-index: 2; }

        .modal-title-input {
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.5rem 0.7rem;
            font-family: inherit;
            font-size: 1rem;
            font-weight: 600;
            outline: none;
            background: var(--bg);
            color: var(--text);
        }

        .modal-title-input:focus {
            border-width: 3px;
        }

        .modal-textarea {
            border: 2px solid var(--border);
            border-radius: 8px;
            padding: 0.6rem 0.8rem;
            font-family: inherit;
            font-size: 0.9rem;
            outline: none;
            resize: vertical;
            min-height: 330px;
            background: var(--bg);
            color: var(--text);
        }

        .modal-textarea:focus {
            border-width: 3px;
        }

        .modal-buttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 0.5rem;
        }

        .modal-buttons-right {
            display: flex;
            gap: 0.5rem;
            margin-left: auto;
        }

        .modal-save-btn,
        .modal-cancel-btn,
        .modal-delete-btn {
            font-family: inherit;
            font-size: 0.85rem;
            font-weight: 600;
            border-radius: 8px;
            padding: 0.45rem 1rem;
            cursor: pointer;
            transition: all 0.15s;
            border: 2px solid var(--border);
        }

        .modal-save-btn {
            background: var(--accent-bg);
            color: var(--accent-text);
        }

        .modal-save-btn:hover {
            background: #222;
        }

        .modal-cancel-btn {
            background: var(--bg);
            color: var(--text);
        }

        .modal-cancel-btn:hover {
            background: var(--gray-light);
        }

        .modal-delete-btn {
            background: var(--bg);
            color: #888;
            font-size: 1rem;
            padding: 0.4rem 0.6rem;
        }

        .modal-delete-btn:hover {
            color: #333;
            background: #fee;
            border-color: #c00;
        }

        .modal-copy-btn {
            background: var(--bg);
            color: #888;
            font-size: 0.8rem;
            padding: 0.4rem 0.6rem;
            font-family: inherit;
            font-weight: 600;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.15s;
            border: 2px solid var(--border);
        }
        .modal-copy-btn:hover { color: #333; background: var(--gray-light); }

        /* Modal statystyk miesięcznych */
        .monthly-stats-box {
            max-width: 380px;
            max-height: 85vh;
            overflow-y: auto;
        }

        .yearly-stats-box {
            max-width: 420px;
            max-height: 85vh;
            overflow-y: auto;
        }

        .yearly-expense-row {
            display: flex;
            justify-content: space-between;
            padding: 0.2rem 0;
            border-bottom: 1px solid var(--gray-light);
        }

        .yearly-habit-row {
            display: flex;
            justify-content: space-between;
            padding: 0.15rem 0;
        }

        .monthly-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.6rem;
        }

        .monthly-title {
            font-weight: 700;
            font-size: 1rem;
        }

        .monthly-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .monthly-activities {
            display: flex;
            flex-wrap: wrap;
            gap: 0.35rem;
            margin-bottom: 0.8rem;
        }

        .monthly-activity-badge {
            border: 1px solid var(--gray-border);
            border-radius: 8px;
            padding: 0.25rem 0.5rem;
            font-size: 0.7rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.25rem;
            background: var(--bg);
        }

        /* Nawyki w statystykach miesięcznych */
        .monthly-habits {
            margin-top: 0.8rem;
            border-top: 1.5px solid var(--gray-border);
            padding-top: 0.6rem;
        }
        .monthly-habits-title {
            font-weight: 700;
            font-size: 0.75rem;
            margin-bottom: 0.4rem;
        }
        .monthly-habits-grid {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            max-height: 150px;
            overflow-y: auto;
        }
        .mh-row {
            display: flex;
            align-items: center;
            gap: 0.15rem;
        }
        .mh-label {
            font-size: 0.6rem;
            font-weight: 600;
            width: 100px;
            flex-shrink: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 0.15rem;
        }
        .mh-days {
            display: flex;
            gap: 2px;
            flex: 1;
            justify-content: flex-end;
            padding-right: 4px;
        }
        .mh-day {
            width: 20px;
            height: 20px;
            border-radius: 3px;
            background: var(--bar-bg);
            cursor: default;
            font-size: 0.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--dim-text);
        }
        .mh-day.done {
            background: #2ecc71;
            color: #fff;
            font-weight: 700;
        }
        .mh-day.mh-day-empty {
            background: transparent;
        }
        .mh-day.mh-day-name {
            background: transparent;
            font-weight: 700;
            font-size: 0.42rem;
            height: 14px;
        }

        /* Wykres nawyków (modal): osobny kalendarzyk na nawyk, nazwa pod spodem, kwadraty tej samej wielkości co .mh-day */
        .habits-chart-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
            gap: 1rem 0.6rem;
        }
        .habit-chart-card {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .habit-chart-days {
            display: grid;
            grid-template-columns: repeat(7, 20px);
            gap: 2px;
        }
        .habit-chart-name {
            margin-top: 0.35rem;
            font-size: 0.6rem;
            font-weight: 600;
            text-align: center;
        }
        .habit-chart-count {
            font-weight: 400;
            color: var(--dim-text);
            font-size: 0.55rem;
        }

        .monthly-stat {
            border: 1.5px solid var(--gray-border);
            border-radius: 10px;
            padding: 0.5rem 0.6rem;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .monthly-stat-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .monthly-stat-icon {
            font-size: 1.2rem;
        }

        .monthly-stat-value {
            font-size: 1.4rem;
            font-weight: 800;
            line-height: 1;
        }

        .monthly-stat-sub {
            font-size: 0.65rem;
            color: var(--dim-text);
            margin-top: 0.15rem;
        }

        .monthly-stat-bar {
            margin-top: 0.3rem;
            height: 4px;
            background: var(--bar-bg);
            border-radius: 2px;
            overflow: hidden;
        }

        .monthly-stat-bar-fill {
            height: 100%;
            background: var(--accent-bg);
            border-radius: 2px;
            transition: width 0.5s ease;
        }

        /* Modal godzinowy */
        .hourly-box {
            max-width: 600px;
            padding: 1rem;
        }

        .hourly-scroll {
            display: flex;
            gap: 0.4rem;
            overflow-x: auto;
            padding-bottom: 0.3rem;
        }

        .hourly-card {
            border: 1.5px solid var(--gray-border);
            border-radius: 10px;
            padding: 0.5rem 0.6rem;
            text-align: center;
            min-width: 60px;
            flex-shrink: 0;
            background: var(--bg);
        }

        .hourly-time {
            font-size: 0.7rem;
            font-weight: 700;
            margin-bottom: 0.2rem;
        }

        .hourly-icon {
            font-size: 1.3rem;
            margin-bottom: 0.15rem;
        }

        .hourly-temp {
            font-size: 0.85rem;
            font-weight: 700;
        }

        .hourly-rain, .hourly-humidity {
            font-size: 0.6rem;
            color: var(--dim-text);
            margin-top: 0.1rem;
        }

        /* Panel boczny */
        .sidebar {
            display: flex;
            flex-direction: column;
            gap: 0.9rem;
            overflow-y: auto;
            min-height: 0;
        }
        .widgets-customizable { display: flex; flex-direction: column; gap: 0.9rem; }
        .widget-hidden { display: none !important; }

        /* Personalizacja widgetów */
        .widget-prefs-hint { font-size: 0.65rem; color: var(--dim-text); margin-bottom: 0.3rem; }
        .widget-prefs-list { display: flex; flex-direction: column; gap: 0.4rem; }
        .widget-prefs-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.7rem; border: 1.5px solid var(--gray-border); border-radius: 10px; background: var(--gray-light); transition: opacity 0.15s; }
        .widget-prefs-row.widget-prefs-row-hidden { opacity: 0.5; }
        .widget-prefs-handle { cursor: grab; color: var(--dim-text); font-size: 0.8rem; }
        .widget-prefs-handle:active { cursor: grabbing; }
        .widget-prefs-name { flex: 1; font-weight: 600; font-size: 0.8rem; }
        .widget-prefs-eye { background: none; border: none; cursor: pointer; color: var(--dim-text); font-size: 0.9rem; padding: 0.2rem 0.4rem; flex-shrink: 0; }
        .widget-prefs-eye:hover { color: var(--text); }
        .widget-prefs-row.widget-prefs-chosen { opacity: 0.6; }
        .widget-prefs-row.widget-prefs-ghost { border-style: dashed; background: transparent; }

        /* Kalendarz */
        .mini-calendar {
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.8rem;
            background: var(--bg);
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: 700;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }

        .calendar-nav {
            cursor: pointer;
            padding: 0.3rem 0.5rem;
            border-radius: 6px;
            font-size: 1.2rem;
            transition: background 0.15s;
            user-select: none;
        }

        .calendar-nav:hover {
            background: var(--gray-light);
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 0.25rem;
            text-align: center;
        }

        .cal-day-name {
            font-size: 0.65rem;
            font-weight: 700;
            color: #555;
            margin-bottom: 0.2rem;
        }

        .cal-day {
            aspect-ratio: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            border-radius: 50%;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;
            position: relative;
        }

        .cal-day:not(.empty):not(.selected-date):hover {
            background: var(--gray-light);
        }

        /* Zamiast wypełnionego kółka — obrys jak odręcznie, niedbale zakreślony długopisem.
           Promienie blisko 50% (mała asymetria) trzymają kształt wyraźnie okrągłym, ale z lekką
           organiczną nieregularnością; różna grubość ramki na bokach + obrót udają nierówny
           nacisk pióra, zamiast geometrycznie idealnego koła. Tło przezroczyste, więc kolor
           tekstu wraca do normalnego (nie białego jak przy dawnym wypełnionym kółku). */
        .cal-day.selected-date {
            background-color: transparent;
            color: var(--text);
            font-weight: 700;
            border-style: solid;
            border-color: var(--accent-bg);
            border-width: 2.5px 2px 3px 2.5px;
            border-radius: 51% 49% 52% 48% / 48% 52% 49% 51%;
            transform: rotate(-4deg);
        }

        .cal-day.selected-date:hover {
            background-color: var(--hover-bg);
        }

        .cal-day.today-date:not(.selected-date) {
            border: 2px dashed var(--border);
        }

        /* Kwadracik dla notatki */
        .cal-day.has-note::before {
            content: '';
            position: absolute;
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
            width: 8px;
            height: 8px;
            border: 2px solid var(--accent-bg);
            border-radius: 2px;
            background: transparent;
            box-sizing: border-box;
        }


        /* Kropka dla zadań */
        .cal-day.has-tasks::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            background: var(--accent-bg);
            border-radius: 50%;
        }

        /* Gdy wszystkie zadania zrobione – zielony ptaszek zamiast kropki */
        .cal-day.all-done::after {
            content: '✓';
            bottom: 1px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.7rem;
            font-weight: 900;
            /* font-weight:900 to już max wagi fontu — -webkit-text-stroke dokłada grubości ponad to */
            -webkit-text-stroke: 0.5px #2ecc71;
            color: #2ecc71;
            position: absolute;
            line-height: 1;
        }
        .cal-day.selected-date.all-done::after {
            color: #2ecc71;
        }

        /* Gdy jest i notatka i zadanie – kropka wewnątrz kwadratu */
        .cal-day.has-note.has-tasks::after {
            bottom: 2px;
            width: 4px;
            height: 4px;
        }

        /* Gdy jest notatka i wszystkie zadania zrobione – zielony ptaszek wewnątrz kwadratu
           zamiast kropki (wyższa specyficzność niż samo .all-done::after, żeby zmieścić się
           w 8×8px kwadraciku notatki zamiast wystawać poza niego). */
        .cal-day.has-note.all-done::after {
            bottom: 1.5px;
            font-size: 0.45rem;
        }

        .cal-day.empty {
            cursor: default;
        }

        /* Notatka */
        .note-area {
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.8rem;
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
            background: var(--bg);
        }

        .note-label {
            font-weight: 700;
            font-size: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .note-area textarea {
            width: 100%;
            height: 68px;
            border: none;
            resize: none;
            font-family: inherit;
            font-size: 0.85rem;
            outline: none;
            background: transparent;
            color: var(--text);
            line-height: 1.4;
        }

        .note-area textarea::placeholder {
            color: #aaa;
        }

        .note-save-indicator {
            font-size: 0.7rem;
            color: #4a4;
            text-align: right;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .note-save-indicator.visible {
            opacity: 1;
        }

        /* Pogoda */
        .weather-widget {
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.5rem 0.8rem;
            background: var(--gray-light);
            cursor: pointer;
            transition: all 0.15s;
            user-select: none;
        }

        .weather-main-row {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .weather-widget:hover {
            box-shadow: var(--shadow);
        }

        .weather-widget:active {
            transform: scale(0.97);
        }

        .weather-city-row {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }

        .weather-edit-icon {
            font-size: 0.6rem;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.15s;
            color: #888;
        }

        .weather-widget:hover .weather-edit-icon {
            opacity: 1;
        }

        .weather-edit-icon:hover {
            color: #333;
        }

        .weather-city-input-wrap {
            margin-top: 0.25rem;
        }

        .weather-city-input {
            width: 100%;
            border: 1.5px solid var(--border);
            border-radius: 6px;
            padding: 0.25rem 0.4rem;
            font-family: inherit;
            font-size: 0.65rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
        }

        .weather-city-input:focus {
            border-width: 2px;
        }

        .weather-aqi, .weather-extra {
            font-size: 0.6rem;
            margin-top: 0.15rem;
            font-weight: 500;
        }

        .weather-more {
            font-size: 0.6rem;
            margin-top: 0.2rem;
            cursor: pointer;
            text-decoration: underline;
            color: var(--dim-text);
        }

        .weather-widget .temp {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1;
            margin: 0;
        }

        /* Nawyki */
        .habits-widget {
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.6rem 0.7rem;
            background: var(--bg);
        }
        .habits-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.5rem;
        }
        .habits-title {
            font-size: 0.75rem !important;
            margin-bottom: 0 !important;
            padding: 0.1rem 0.4rem !important;
            border-width: 1.5px !important;
        }
        .add-habit-btn {
            background: var(--accent-bg);
            color: var(--accent-text);
            border: 1.5px solid var(--border);
            border-radius: 6px;
            width: 22px;
            height: 22px;
            font-size: 0.85rem;
            font-weight: 700;
            cursor: pointer;
            line-height: 1;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.12s;
        }
        .add-habit-btn:hover { transform: scale(1.1); }
        .add-habit-btn:active { transform: scale(0.9); }
        .habits-grid {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }
        .habit-row {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        .habit-row.habit-row-hidden {
            display: none;
        }
        .counter-card.counter-card-hidden {
            display: none;
        }
        .habit-label {
            font-size: 0.63rem;
            font-weight: 600;
            overflow: hidden;
            text-overflow: ellipsis;
            min-width: 90px;
            flex: 1;
            max-width: 180px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 0.2rem;
            white-space: nowrap;
        }
        .habit-icon { font-size: 0.75rem; flex-shrink: 0; }
        .habit-days {
            display: flex;
            gap: 0.18rem;
            flex: 1;
            justify-content: flex-end;
            margin-left: 0.3rem;
        }
        .habit-delete-spacer {
            width: 12px;
            flex-shrink: 0;
        }
        .habit-day-label {
            cursor: default !important;
            border: none !important;
            background: transparent !important;
        }
        .habit-day-label:hover {
            transform: none !important;
            border: none !important;
        }
        .habit-day {
            width: 18px;
            height: 18px;
            border: 1.5px solid var(--gray-border);
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.12s;
            font-size: 0.55rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg);
            flex-shrink: 0;
        }
        .habit-day:hover { border-color: var(--border); transform: scale(1.15); }
        .habit-day.done {
            background: #2ecc71;
            border-color: #27ae60;
            color: #fff;
        }
        .habit-day.done::after { content: '✓'; font-weight: 900; }
        .habit-day.future-blocked {
            background: #e74c3c !important;
            border-color: #c0392b !important;
            color: #fff !important;
            font-weight: 900;
            font-size: 0.7rem;
            animation: habitShake 0.4s ease;
        }
        @keyframes habitShake {
            0%,100% { transform: translateX(0); }
            20% { transform: translateX(-3px); }
            40% { transform: translateX(3px); }
            60% { transform: translateX(-2px); }
            80% { transform: translateX(2px); }
        }
        /* Efekt przy ZAZNACZANIU nawyku: zielony pierścień rozchodzący się z komórki.
           Nakładka position:fixed na <body> (patrz D.flashHabitDone) — odporna na
           przerenderowanie siatki nawyków, które inaczej ucięłoby animację. */
        .habit-done-burst {
            position: fixed;
            z-index: 4000;
            pointer-events: none;
            box-sizing: border-box;
            border: 2px solid #2ecc71;
            border-radius: 6px;
            box-shadow: 0 0 8px rgba(46, 204, 113, 0.65);
            animation: habit-done-burst 0.5s ease-out forwards;
        }
        @keyframes habit-done-burst {
            0%   { transform: scale(0.6); opacity: 0.95; }
            60%  { opacity: 0.55; }
            100% { transform: scale(2.4); opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .habit-done-burst { display: none; }
        }
        .habit-delete {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            font-size: 0.55rem;
            padding: 0;
            flex-shrink: 0;
            opacity: 0;
            transition: opacity 0.12s;
            line-height: 1;
            width: 12px;
            text-align: center;
        }
        .habit-row:hover .habit-delete { opacity: 1; }
        .habit-delete:hover { color: #c00; }
        /* Habit drag-and-drop */
        .habit-drag-handle { color: #ccc; cursor: grab; opacity: 0; width: 16px; text-align: center; font-size: 0.55rem; flex-shrink: 0; user-select: none; }
        .habit-row:hover .habit-drag-handle { opacity: 1; }
        .habit-drag-handle:active { cursor: grabbing; }
        .habit-row.sortable-chosen { opacity: 0.5; background: #f0f0f0; border-radius: 6px; }
        .habit-row.sortable-ghost { background: var(--accent-bg); opacity: 0.3; border-radius: 6px; }
        #habitsHeaderRow { }
        .habit-drag-spacer { width: 16px; flex-shrink: 0; }
        .add-habit-row {
            display: flex;
            gap: 0.3rem;
            margin-top: 0.4rem;
        }
        .add-habit-input {
            flex: 1;
            border: 1.5px solid var(--border);
            border-radius: 6px;
            padding: 0.2rem 0.4rem;
            font-family: inherit;
            font-size: 0.65rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
            min-width: 0;
        }
        .add-habit-confirm {
            background: var(--accent-bg);
            color: var(--accent-text);
            border: 1.5px solid var(--border);
            border-radius: 6px;
            padding: 0.2rem 0.4rem;
            cursor: pointer;
            font-size: 0.7rem;
            font-weight: 700;
            transition: all 0.1s;
        }
        .add-habit-confirm:active {
            background: #2ecc71;
            color: #fff;
            border-color: #27ae60;
        }
        .habit-icon-picker {
            display: flex;
            flex-wrap: wrap;
            gap: 0.2rem;
            margin-top: 0.3rem;
        }
        .habit-icon-option {
            width: 22px;
            height: 22px;
            border: 1.5px solid var(--gray-border);
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.6rem;
            color: var(--dim-text);
            transition: all 0.1s;
        }
        .habit-icon-option:hover { border-color: var(--border); color: var(--text); }
        .habit-icon-option.active { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent-text); }
        .habits-empty {
            text-align: center;
            color: var(--dim-text);
            font-size: 0.6rem;
            font-style: italic;
            padding: 0.3rem 0;
        }

        /* Dark mode dla nawyków */
        body.dark .habits-widget { background: var(--bg); }
        body.midnight .habits-widget { background: var(--bg); }
        body.dark .habit-day { background: var(--input-bg); border-color: var(--gray-border); }
        body.midnight .habit-day { background: var(--input-bg); border-color: var(--gray-border); }
        body.dark .habit-day.done { background: #27ae60; border-color: #219a52; }
        body.midnight .habit-day.done { background: #27ae60; border-color: #219a52; }
        body.dark .habit-delete { color: #555; }
        body.midnight .habit-delete { color: #555; }
        body.dark .habit-delete:hover { color: #e55; }
        body.midnight .habit-delete:hover { color: #e55; }
        body.dark .habit-row.sortable-chosen { background: #1a1a1a; }
        body.midnight .habit-row.sortable-chosen { background: #1a1a1a; }
        body.dark .habit-row.sortable-ghost { background: #2a2a2a; }
        body.midnight .habit-row.sortable-ghost { background: #2a2a2a; }
        body.dark .habit-drag-handle { color: #444; }
        body.midnight .habit-drag-handle { color: #444; }
        body.dark .habit-row:hover .habit-drag-handle { color: #777; }
        body.midnight .habit-row:hover .habit-drag-handle { color: #777; }
        body.dark .add-habit-input { background: var(--input-bg); color: var(--text); }
        body.midnight .add-habit-input { background: var(--input-bg); color: var(--text); }
        body.dark .add-habit-confirm { background: var(--accent-bg); color: var(--accent-text); border-color: var(--border); }
        body.midnight .add-habit-confirm { background: var(--accent-bg); color: var(--accent-text); border-color: var(--border); }
        body.dark .add-habit-confirm:active { background: #27ae60; color: #fff; border-color: #219a52; }
        body.midnight .add-habit-confirm:active { background: #27ae60; color: #fff; border-color: #219a52; }
        body.dark .habit-icon-option { border-color: var(--gray-border); color: var(--dim-text); }
        body.midnight .habit-icon-option { border-color: var(--gray-border); color: var(--dim-text); }
        body.dark .habit-icon-option:hover { border-color: #888; color: var(--text); }
        body.midnight .habit-icon-option:hover { border-color: #888; color: var(--text); }
        body.dark .habit-icon-option.active { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent-text); }
        body.midnight .habit-icon-option.active { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent-text); }

        /* Liczniki */
        .counters-widget {
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.6rem 0.7rem;
            background: transparent;
        }
        .counters-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
            margin-top: 0.3rem;
        }
        .counter-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.15rem;
            padding: 0.4rem 0.5rem;
            border: 1.5px solid var(--border);
            border-radius: 12px;
            min-width: 72px;
            background: var(--input-bg);
            position: relative;
        }
        .counter-card-icon {
            font-size: 0.85rem;
            color: var(--accent-bg);
            line-height: 1;
        }
        .counter-card-name {
            font-size: 0.55rem;
            font-weight: 600;
            text-align: center;
            color: var(--text);
            max-width: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2;
        }
        .counter-card-row {
            display: flex;
            align-items: center;
            gap: 0.12rem;
        }
        .counter-btn {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1.5px solid var(--border);
            background: var(--bg);
            color: var(--text);
            font-size: 0.7rem;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
            transition: all 0.1s;
            user-select: none;
        }
        .counter-btn:hover { border-color: var(--accent-bg); color: var(--accent-bg); }
        .counter-btn:active { background: var(--accent-bg); color: #fff; }
        .counter-value {
            font-size: 0.85rem;
            font-weight: 700;
            color: var(--text);
            min-width: 20px;
            text-align: center;
            user-select: none;
        }
        .counter-delete {
            position: absolute;
            top: 2px;
            right: 3px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: none;
            background: transparent;
            color: var(--dim-text);
            font-size: 0.5rem;
            cursor: pointer;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.15s;
        }
        .counter-card:hover .counter-delete { opacity: 1; }
        .counter-delete:hover { color: #e55; }
        .counter-drag-handle {
            position: absolute;
            top: 5px;
            left: 7px;
            color: #ccc;
            cursor: grab;
            font-size: 0.45rem;
            opacity: 0;
            transition: opacity 0.15s;
            line-height: 1;
        }
        .counter-card:hover .counter-drag-handle { opacity: 1; }
        .counter-drag-handle:active { cursor: grabbing; }
        .counter-card.counter-sortable-chosen { opacity: 0.4; }
        .counter-card.counter-sortable-ghost {
            opacity: 0.3;
            background: var(--accent-bg);
        }
        body.dark .counter-drag-handle { color: #555; }
        body.midnight .counter-drag-handle { color: #555; }
        body.dark .counter-card:hover .counter-drag-handle { color: #888; }
        body.midnight .counter-card:hover .counter-drag-handle { color: #888; }
        .counters-empty {
            text-align: center;
            color: var(--dim-text);
            font-size: 0.6rem;
            font-style: italic;
            padding: 0.3rem 0;
            width: 100%;
        }
        body.dark .counters-widget { background: var(--bg); }
        body.midnight .counters-widget { background: var(--bg); }
        body.dark .counter-card { background: var(--input-bg); }
        body.midnight .counter-card { background: var(--input-bg); }
        body.dark .counter-btn { background: var(--bg); }
        body.midnight .counter-btn { background: var(--bg); }

        /* Efekt "shadowbox": świetlista obwódka okrążająca kafelek licznika po kliknięciu +.
           Nakładka position:fixed montowana na <body> (patrz D.flashCounterGlow) — niezależna
           od przerenderowań siatki liczników, które inaczej ucięłyby animację. */
        @property --counter-glow-angle {
            syntax: '<angle>';
            initial-value: 0deg;
            inherits: false;
        }
        .counter-glow-runner {
            position: fixed;
            z-index: 4000;
            pointer-events: none;
            box-sizing: border-box;
            border-radius: 14px;              /* 12px karty + ~2px na outset */
            padding: 2.5px;                   /* grubość świetlnej obwódki */
            /* jasna "kometa" (~60°) na przezroczystym pierścieniu; obrót przez animację kąta */
            background: conic-gradient(from var(--counter-glow-angle),
                transparent 0deg 300deg,
                var(--accent-bg) 345deg,
                var(--accent-bg) 357deg,
                transparent 360deg);
            /* pokaż tylko pierścień (obszar paddingu), nie środek */
            -webkit-mask:
                linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
            mask:
                linear-gradient(#000 0 0) content-box,
                linear-gradient(#000 0 0);
            -webkit-mask-composite: xor;
                    mask-composite: exclude;
            filter: drop-shadow(0 0 5px var(--accent-bg)) drop-shadow(0 0 10px var(--accent-bg));
            animation: counter-glow-run 0.85s linear forwards;
        }
        @keyframes counter-glow-run {
            0%   { --counter-glow-angle: 0deg;   opacity: 0; }
            12%  { opacity: 1; }
            88%  { opacity: 1; }
            100% { --counter-glow-angle: 360deg; opacity: 0; }
        }
        @media (prefers-reduced-motion: reduce) {
            .counter-glow-runner { display: none; }
        }

        /* Trackery nałogów */
        .addictions-widget {
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.6rem 0.7rem;
            background: var(--bg);
        }
        .addictions-grid {
            display: flex;
            flex-direction: column;
            gap: 0.4rem;
        }
        .addiction-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            font-size: 0.65rem;
        }
        .addiction-icon {
            font-size: 0.8rem;
            width: 18px;
            text-align: center;
            flex-shrink: 0;
        }
        .addiction-info {
            flex: 1;
            min-width: 0;
        }
        .addiction-name {
            font-weight: 700;
            font-size: 0.68rem;
        }
        .addiction-timer {
            color: var(--dim-text);
            font-size: 0.6rem;
        }
        .addiction-saved {
            font-size: 0.6rem;
        }
        .addiction-saved-amount {
            color: #2ecc71;
            font-weight: 600;
        }
        .addiction-reset-btn {
            background: none;
            border: 1px solid #e74c3c;
            color: #e74c3c;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.5rem;
            padding: 0.1rem 0.3rem;
            flex-shrink: 0;
            transition: all 0.1s;
        }
        .addiction-reset-btn:hover { background: #e74c3c; color: #fff; }
        .addiction-history-btn {
            background: none;
            border: 1px solid var(--gray-border);
            color: var(--dim-text);
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.55rem;
            padding: 0.1rem 0.3rem;
            flex-shrink: 0;
            font-weight: 700;
            transition: all 0.1s;
        }
        .addiction-history-btn:hover { background: var(--hover-bg); color: var(--text); }
        .addiction-delete-btn {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            font-size: 0.5rem;
            padding: 0;
            flex-shrink: 0;
        }
        .addiction-delete-btn:hover { color: #c00; }
        .addiction-history-row {
            padding: 0.15rem 0;
            border-bottom: 1px dashed var(--gray-border);
        }
        .addiction-history-row:last-child { border-bottom: none; }

        body.dark .addictions-widget { background: var(--bg); }
        body.midnight .addictions-widget { background: var(--bg); }
        body.dark .addiction-saved { color: #27ae60; }
        body.midnight .addiction-saved { color: #27ae60; }
        body.dark .addiction-history-btn:hover { background: var(--hover-bg); }
        body.midnight .addiction-history-btn:hover { background: var(--hover-bg); }

        /* Mood tracker */
        .mood-day { border-radius: 4px !important; cursor: pointer; transition: opacity 0.12s, transform 0.1s; }
        .mood-day:hover { opacity: 0.75; transform: scale(1.15); }
        .mood-day-set { border: 1.5px solid rgba(0,0,0,0.75) !important; }
        body.dark .mood-day-set { border-color: rgba(255,255,255,0.8) !important; }
        body.midnight .mood-day-set { border-color: rgba(255,255,255,0.8) !important; }
        .mood-picker-popup { position: absolute; z-index: 9999; background: #f0f0f0; border: 1.5px solid #ccc; border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 4px 18px rgba(0,0,0,0.22); }
        body.dark .mood-picker-popup { background: #2a2a3a; border-color: var(--border); }
        body.midnight .mood-picker-popup { background: #2a2a3a; border-color: var(--border); }
        .mood-picker-sq { width: 22px; height: 22px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; transition: transform 0.1s; }
        .mood-picker-sq:hover { transform: scale(1.18); }
        .mood-picker-sq-sel { border-color: var(--text) !important; box-shadow: 0 0 0 2px var(--bg); }
        .mood-cal-grid { display: grid; grid-template-columns: repeat(7, 18px); gap: 2px; margin: 0.3rem auto 0; width: fit-content; }
        .mood-cal-hd { text-align: center; font-size: 0.5rem; color: var(--dim-text); font-weight: 600; padding-bottom: 1px; width: 18px; }
        .mood-cal-cell { width: 18px; height: 18px; border-radius: 4px; border: 1.5px solid var(--gray-border); display: flex; align-items: center; justify-content: center; font-size: 0.42rem; font-weight: 600; color: rgba(255,255,255,0.85); cursor: default; background: var(--bg); }
        .mood-cal-nodata { background: var(--bg); color: var(--dim-text); }
        body.dark .mood-cal-cell { background: var(--input-bg); border-color: var(--gray-border); }
        body.midnight .mood-cal-cell { background: var(--input-bg); border-color: var(--gray-border); }
        .mood-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; margin-top: 0.4rem; justify-content: center; }
        .mood-legend-item { display: flex; align-items: center; gap: 5px; font-size: 0.65rem; color: var(--dim-text); }
        .mood-legend-sq { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }

        /* Wydatki */
        .expenses-widget, .training-stats-widget {
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.6rem 0.7rem;
            background: var(--bg);
            position: relative;
        }
        /* Znaczek "zablokowane przez admina" na widgecie dashboardu (patrz D.applyPermissionBadges
           w js/core.js) — ten sam wzorzec co .wo-pr-badge (róg, złoty, zaokrąglony). */
        .premium-locked-badge {
            position: absolute; top: -6px; right: 1px;
            font-size: 0.5rem; font-weight: 800; letter-spacing: 0.5px;
            background: #f1c40f; color: #333; padding: 0.1rem 0.4rem;
            border-radius: 8px; border: 1px solid #e0b000;
            pointer-events: none; z-index: 5;
        }
        /* Znaczek "PRO" w menu awatara przy zablokowanej pozycji. Wstawiany jako PIERWSZE
           dziecko przycisku (nie ostatnie!), bo D.applyLanguage w core.js nadpisuje textContent
           OSTATNIEGO dziecka .avatar-menu-item przy zmianie języka — dopisanie na końcu zostałoby
           zjedzone przy najbliższym przełączeniu PL/EN. order+margin-left:auto przesuwa go
           wizualnie na prawo mimo że w DOM jest pierwszy. Wygląd (rozmiar/padding/promień/kolory)
           celowo identyczny z .account-status-badge.status-pro — ten sam "PRO" w dwóch miejscach. */
        .pro-menu-badge {
            order: 5; margin-left: auto;
            font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px;
            background: #f1c40f; color: #333; padding: 0.15rem 0.5rem; border-radius: 8px;
            border: 1px solid #e0b000;
            flex-shrink: 0;
        }
        /* Selektor ID (wyższa specyficzność niż .stats-monthly-grid) — panel Trening zawsze
           4 kwadraty w rzędzie, także na wąskim mobile. */
        #trainingStatsGrid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }
        #trainingStatsGrid .stats-card-val {
            font-size: 0.85rem;
        }
        /* Statystyki miesięczne/roczne treningu (modal): małe kwadraty wyśrodkowane, przylegające
           do siebie (bez odstępu) zamiast rozciągniętych na całą szerokość jak domyślnie. */
        #tsGrid, #tyGrid {
            display: flex;
            justify-content: center;
            gap: 0;
        }
        #tsGrid .stats-card, #tyGrid .stats-card {
            flex: none;
            width: 7rem;
            padding: 0.2rem 0.1rem;
            border-radius: 0;
        }
        #tsGrid .stats-card + .stats-card, #tyGrid .stats-card + .stats-card {
            border-left: none;
        }
        #tsGrid .stats-card:first-child, #tyGrid .stats-card:first-child {
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
        }
        #tsGrid .stats-card:last-child, #tyGrid .stats-card:last-child {
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
        }
        #tsGrid .stats-card-val, #tyGrid .stats-card-val {
            font-size: 1.5rem;
        }
        #tsGrid .stats-card-label, #tyGrid .stats-card-label {
            font-size: 0.7rem;
        }
        .expenses-list {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            max-height: 200px;
            overflow-y: auto;
            margin-top: 0.3rem;
            padding-right: 14px;
        }
        .expense-row {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            font-size: 0.6rem;
            padding: 0.15rem 0;
        }
        .expense-cat {
            font-size: 0.8rem;
            flex-shrink: 0;
            width: 16px;
            text-align: center;
        }
        .expense-cat-name {
            font-size: 0.6rem;
            font-weight: 600;
            flex-shrink: 0;
            width: 65px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .expense-desc {
            flex: 1;
            min-width: 0;
            font-size: 0.55rem;
            color: var(--dim-text);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .expense-amount {
            font-weight: 700;
            color: #e74c3c;
            width: 58px;
            text-align: right;
            flex-shrink: 0;
        }
        .expense-edit {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            font-size: 0.5rem;
            padding: 0;
            width: 16px;
            flex-shrink: 0;
            opacity: 0;
            transition: opacity 0.15s;
            text-align: center;
        }
        .expense-row:hover .expense-edit { opacity: 1; }
        .expense-edit:hover { color: var(--accent-bg); }
        .expense-del {
            background: none;
            border: none;
            color: #ccc;
            cursor: pointer;
            font-size: 0.5rem;
            padding: 0;
            width: 14px;
            flex-shrink: 0;
            text-align: center;
        }
        .expense-del:hover { color: #c00; }
        .expense-total {
            font-weight: 700;
            font-size: 0.65rem;
            padding: 0.2rem 0;
            border-top: 1px dashed var(--gray-border);
            display: flex;
            justify-content: space-between;
        }
        .expense-total-amount { color: #e74c3c; transition: color 0.15s ease; }
        .expense-total-amount.expense-total-bump { color: #ff6b52; }

        /* "Kwota" lecąca z przycisku dodawania do sumy miesiąca po dodaniu wydatku */
        .expense-fly-badge {
            position: fixed;
            z-index: 3000;
            font-weight: 800;
            font-size: 0.8rem;
            color: #e74c3c;
            background: var(--bg);
            border: 1.5px solid #e74c3c;
            border-radius: 100px;
            padding: 0.15rem 0.5rem;
            pointer-events: none;
            white-space: nowrap;
            box-shadow: var(--shadow-lg);
            transition: transform 0.55s cubic-bezier(0.32, 0, 0.55, 1), opacity 0.55s ease-in 0.05s;
            will-change: transform, opacity;
        }
        .expense-date-group {
            margin-bottom: 0.2rem;
        }
        .expense-date-label {
            font-size: 0.55rem;
            font-weight: 700;
            color: var(--dim-text);
            padding: 0.15rem 0;
            border-bottom: 1px solid var(--gray-border);
            margin-bottom: 0.1rem;
        }
        .expense-cat-select {
            position: relative;
            flex-shrink: 0;
        }
        .expense-cat-selected {
            border: 1.5px solid var(--border);
            border-radius: 6px;
            padding: 0.2rem 0.35rem;
            font-size: 0.6rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.2rem;
            background: var(--bg);
            color: var(--text);
            white-space: nowrap;
            min-width: 90px;
        }
        .expense-cat-dropdown {
            position: absolute;
            top: 100%;
            left: 0;
            background: var(--bg);
            border: 1.5px solid var(--border);
            border-radius: 6px;
            z-index: 60;
            min-width: 130px;
            box-shadow: var(--shadow-lg);
            max-height: 9rem;
            overflow-y: auto;
        }
        .expense-cat-option {
            padding: 0.2rem 0.4rem;
            font-size: 0.6rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            color: var(--text);
        }
        .expense-cat-option:hover { background: var(--hover-bg); }
        .expenses-empty {
            text-align: center;
            color: var(--dim-text);
            font-size: 0.6rem;
            font-style: italic;
        }
        /* Panel wydatków */
        .expense-panel-row {
            display: flex; align-items: center; gap: 0.4rem;
            padding: 0.25rem 0.3rem; border-bottom: 1px solid var(--gray-light);
            font-size: 0.65rem;
        }
        .expense-panel-row:hover { background: var(--hover-bg); border-radius: 4px; }
        .expense-panel-cat { min-width: 80px; flex-shrink: 0; font-weight: bold; }
        .expense-panel-amt { font-weight: 700; min-width: 55px; text-align: right; flex-shrink: 0; color: #e74c3c; }
        .expense-panel-desc { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim-text); }
        .expense-panel-date { min-width: 75px; flex-shrink: 0; color: var(--dim-text); font-size: 0.55rem; }
        .expense-edit-amount, #epAmount { -moz-appearance: textfield; }
        .expense-edit-amount::-webkit-inner-spin-button,
        .expense-edit-amount::-webkit-outer-spin-button,
        #epAmount::-webkit-inner-spin-button,
        #epAmount::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .expense-panel-edit { opacity: 0; color: var(--dim-text); cursor: pointer; background: none; border: none; font-size: 0.55rem; padding: 0 0.2rem; }
        .expense-panel-row:hover .expense-panel-edit { opacity: 1; }
        .expense-panel-edit:hover { color: var(--accent-bg); }
        .expense-panel-del { opacity: 0; color: #c00; cursor: pointer; background: none; border: none; font-size: 0.55rem; padding: 0 0.2rem; }
        .expense-panel-row:hover .expense-panel-del { opacity: 1; }
        .expense-panel-date-sep { border-top: 1px solid var(--border); margin: 0.3rem 0 0.15rem 0; padding-top: 0.2rem; font-size: 0.55rem; color: var(--dim-text); font-weight: 700; }
        .expense-panel-date-sep:first-child { border-top: none; margin-top: 0; }
        body.dark .expense-panel-row { border-color: var(--gray-border); }
        body.midnight .expense-panel-row { border-color: var(--gray-border); }
        .ep-action-btn { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; padding: 0.3rem 0.6rem; }
        @media (max-width: 768px) {
            .ep-action-btn { padding: 0.3rem 0.45rem; border-width: 1px; }
            .ep-action-label { display: none; }
        }

        /* Modal wydatków: tryb pełnoekranowy na mobile — patrz .training-box.training-fullscreen,
           ten sam wzorzec (D.openExpensesPanel / expensesFullscreenBtn w trackers.js). */
        /* min-height: gdy lista wydatków jest pusta, modal był tak niski, że rozwinięty
           dropdown kategorii (absolutny, ~9rem) wychodził poza box i był ucinany przez
           overflow-y:auto. Zapewniamy miejsce na rozwiniętą listę. */
        .expenses-panel-box { max-width: 650px; min-height: 20rem; max-height: 90vh; overflow-y: auto; position: relative; }
        .expenses-fullscreen-btn {
            display: none;
            background: none; border: none; cursor: pointer; color: var(--dim-text);
            font-size: 0.8rem; padding: 0.1rem 0.3rem;
        }
        .expenses-fullscreen-btn:hover { color: var(--text); }
        .expenses-panel-box.expenses-panel-fullscreen {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            max-width: 100vw;
            max-height: 100vh;
            border-radius: 0;
            margin: 0;
        }
        .expenses-panel-fullscreen #epList { max-height: none; }
        @media (max-width: 500px) {
            .expenses-fullscreen-btn { display: inline-flex; align-items: center; }
        }
        /* Wykres pierścieniowy wydatków */
        .expense-donut-wrap { display: flex; align-items: center; gap: 1rem; padding: 0.1rem 0; }
        .expense-donut-svg { flex-shrink: 0; width: 210px; height: 210px; }
        .expense-donut-svg-wrap { position: relative; display: inline-block; flex-shrink: 0; }
        .expense-donut-svg-wrap .expense-donut-svg { display: block; }
        .expense-donut-total-text { transition: none; }

        /* Dwa świecące pierścienie wokół wykresu po dodaniu wydatku — jeden kręci się w lewo
           (do środka), drugi w prawo (na zewnątrz), patrz D._spawnEpDonutGlow w trackers.js */
        .expense-donut-glow {
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .expense-donut-glow.expense-donut-glow-show { opacity: 1; }
        .expense-donut-glow-outer {
            inset: 9px;
            background: conic-gradient(from 0deg, transparent 0%, rgba(46, 204, 113, 0.85) 12%, transparent 26%);
            animation: expenseDonutGlowRight 1.8s linear infinite;
        }
        .expense-donut-glow-inner {
            inset: 52px;
            background: conic-gradient(from 180deg, transparent 0%, rgba(52, 152, 219, 0.85) 12%, transparent 26%);
            animation: expenseDonutGlowLeft 1.4s linear infinite;
        }
        @keyframes expenseDonutGlowRight { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        @keyframes expenseDonutGlowLeft { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
        @media (prefers-reduced-motion: reduce) {
            .expense-donut-glow-outer, .expense-donut-glow-inner { animation: none; }
        }
        .expense-donut-legend { flex: 1; min-width: 0; font-size: 0.68rem; display: flex; flex-direction: column; gap: 0; }
        .expense-donut-legend-scroll { overflow-y: auto; }
        .expense-donut-legend-overflow { display: none; }
        .expense-donut-legend-scroll .expense-donut-legend-overflow { display: flex; }
        .ep-desktop-row { display: flex; align-items: center; justify-content: center; gap: 1.2rem; }
        .ep-legend-half { flex: 1; min-width: 0; font-size: 0.68rem; }
        .ep-donut-mobile { display: none; }  /* ukryj na desktopie */
        @media (max-width: 768px) {
            .ep-donut-mobile { display: block; }
            .ep-desktop-row { display: none; }
            /* Mniejszy wykres (180px) na mobile — przeliczone inset, żeby pierścienie
               świecące nie zachodziły na kolorowy pierścień ani nie odstawały za daleko */
            .expense-donut-glow-outer { inset: 6px; }
            .expense-donut-glow-inner { inset: 46px; }
        }

        /* === SWIPE PANELU WYDATKÓW (mobile) ===
           Desktop: .ep-swipe to zwykły blok — slajd z wykresem, pod nim slajd z listą (jak dotąd),
           kropki ukryte. Mobile (≤768px): dwa slajdy obok siebie z poziomym scroll-snap —
           palcem przesuwasz między [0] wykresem+legendą a [1] listą wydatków; kropki pod spodem
           pokazują i zmieniają aktywny slajd (logika w js/trackers.js: D.initExpenseSwipe). */
        .ep-swipe { display: block; }
        .ep-slide { min-width: 0; }
        .ep-swipe-dots { display: none; }
        @media (max-width: 768px) {
            .ep-swipe {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
                scrollbar-width: none;
                height: 54vh;
                margin-top: 0.2rem;
            }
            .ep-swipe::-webkit-scrollbar { display: none; }
            .ep-slide {
                flex: 0 0 100%;
                width: 100%;
                height: 100%;
                scroll-snap-align: start;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            /* Lista wypełnia cały slajd i przewija się wewnątrz — nadpisuje inline max-height:50vh
               oraz regułę #epList{max-height:35vh} (wyższa specyficzność: 2 klasy + id). */
            .ep-swipe .ep-slide-list #epList {
                max-height: none !important;
                margin-top: 0 !important;
            }
            /* Pełny ekran: slajd bierze całą dostępną wysokość zamiast 54vh. */
            .expenses-panel-fullscreen .ep-swipe {
                height: calc(100vh - 165px);
                height: calc(100dvh - 165px);
            }
            .ep-swipe-dots {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 0.5rem;
                padding: 0.55rem 0 0.2rem;
            }
            .ep-dot {
                width: 8px; height: 8px;
                padding: 0;
                border: none;
                border-radius: 50%;
                background: var(--dim-text);
                opacity: 0.4;
                cursor: pointer;
                -webkit-appearance: none;
                appearance: none;
                transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
            }
            .ep-dot.active {
                background: var(--accent-bg);
                opacity: 1;
                transform: scale(1.35);
            }
        }
        .expense-donut-legend-item { display: flex; align-items: center; gap: 0.3rem; cursor: pointer; padding: 0.2rem 1rem 0.2rem 0.3rem; border-bottom: 1px solid var(--gray-light); font-size: 0.65rem; transition: background 0.15s; }
        .expense-donut-legend-item:hover { background: var(--hover-bg); }
        .expense-donut-legend-item.active { background: var(--accent-bg); color: var(--accent-text); border-radius: 4px; border-bottom-color: transparent; }
        .expense-donut-legend-item.active .expense-donut-legend-val { color: var(--accent-text); }
        .expense-donut-legend-item.active .expense-donut-legend-pct { color: var(--accent-text); opacity: 0.8; }
        .expense-donut-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .expense-donut-legend-cat { flex: 1; min-width: 0; font-weight: bold; }
        .expense-donut-legend-val { font-weight: 700; flex-shrink: 0; color: #e74c3c; }
        .expense-donut-legend-pct { font-weight: 400; color: var(--dim-text); font-size: 0.55rem; margin-left: 0.2rem; }
        .expense-donut-seg { cursor: pointer; transition: opacity 0.2s; }
        .expense-donut-seg:hover { opacity: 0.85; }
        .expense-row-highlight { background: rgba(46,204,113,0.15) !important; border-left: 3px solid #2ecc71 !important; border-radius: 0 6px 6px 0; }
        /* Sejf / Oszczędności */
        .savings-balance { font-size: 1.5rem; font-weight: 800; text-align: center; margin: 0.4rem 0; }
        .savings-log-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.3rem; border-bottom: 1px solid var(--gray-light); font-size: 0.65rem; }
        .savings-log-row:hover { background: var(--hover-bg); border-radius: 4px; }
        .savings-log-row .expense-panel-del { opacity: 0; }
        .savings-log-row:hover .expense-panel-del { opacity: 1; }
        .savings-log-amt { font-weight: 700; min-width: 65px; text-align: right; flex-shrink: 0; }
        .savings-log-amt.income { color: #27ae60; }
        .savings-log-amt.expense { color: #e74c3c; }
        .savings-log-desc { flex: 1; color: var(--dim-text); word-break: break-word; }
        .savings-log-date { min-width: 80px; flex-shrink: 0; color: var(--dim-text); font-size: 0.55rem; }
        body.dark .savings-log-row { border-color: var(--gray-border); }
        body.midnight .savings-log-row { border-color: var(--gray-border); }
        /* Sejf — ekran wpisywania PIN (tarcza zamka + kropki + klawiatura numeryczna) */
        .savings-vault { display: flex; justify-content: center; margin: 0.4rem 0 0.7rem; }
        .savings-vault-dial {
            width: 96px; height: 96px; border-radius: 50%;
            border: 3px solid var(--border);
            background: radial-gradient(circle at 50% 38%, var(--gray-light), var(--bg));
            box-shadow: 4px 4px 0 rgba(0,0,0,0.15), inset 0 0 0 5px var(--bg), inset 0 0 0 7px var(--border);
            display: flex; align-items: center; justify-content: center;
            position: relative;
        }
        /* Pierścień „nacięć" tarczy — subtelny, jak na pokrętle sejfu */
        .savings-vault-dial::before {
            content: ''; position: absolute; inset: 11px; border-radius: 50%;
            border: 2px dashed var(--border); opacity: 0.35;
        }
        .savings-vault-dial-inner {
            width: 52px; height: 52px; border-radius: 50%;
            background: var(--accent-bg); color: var(--accent-text);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem;
            box-shadow: inset 0 2px 5px rgba(0,0,0,0.35);
            transition: transform 0.45s cubic-bezier(0.5, 1.6, 0.4, 1);
        }
        .savings-vault-open .savings-vault-dial-inner { transform: rotate(140deg); background: var(--success); }
        .savings-vault-shake { animation: savingsVaultShake 0.4s; }
        @keyframes savingsVaultShake {
            0%,100% { transform: translateX(0); }
            20% { transform: translateX(-7px); } 40% { transform: translateX(7px); }
            60% { transform: translateX(-5px); } 80% { transform: translateX(5px); }
        }
        .savings-pin-dots { display: flex; gap: 0.75rem; justify-content: center; margin: 0.5rem 0 0.7rem; }
        .savings-pin-dot {
            width: 13px; height: 13px; border-radius: 50%;
            border: 2px solid var(--border); background: var(--bg);
            transition: transform 0.15s, background 0.15s;
        }
        .savings-pin-dot.filled { background: var(--accent-bg); transform: scale(1.15); }
        .savings-keypad {
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
            max-width: 220px; margin: 0 auto 0.7rem;
        }
        .savings-key {
            font-family: inherit; font-size: 1.2rem; font-weight: 700;
            height: 48px; border-radius: 10px;
            border: 2px solid var(--border); background: var(--bg); color: var(--text);
            cursor: pointer; transition: transform 0.1s, background 0.1s, box-shadow 0.1s;
            box-shadow: 2px 2px 0 rgba(0,0,0,0.12);
            display: flex; align-items: center; justify-content: center;
        }
        .savings-key:hover { background: var(--gray-light); }
        .savings-key:active { transform: translate(2px, 2px); box-shadow: none; background: var(--accent-bg); color: var(--accent-text); }
        .savings-key-empty { visibility: hidden; border: none; box-shadow: none; cursor: default; }
        .savings-vault-btn { margin-top: 0.2rem; }
        body.dark .expenses-widget { background: var(--bg); }
        body.midnight .expenses-widget { background: var(--bg); }
        body.dark .expense-amount { color: #e74c3c; }
        body.midnight .expense-amount { color: #e74c3c; }
        body.dark .expense-total-amount { color: #e74c3c; }
        body.midnight .expense-total-amount { color: #e74c3c; }
        body.dark .expense-cat-opt { border-color: var(--gray-border); color: var(--dim-text); }
        body.midnight .expense-cat-opt { border-color: var(--gray-border); color: var(--dim-text); }
        body.dark .expense-cat-opt:hover { border-color: #888; color: var(--text); }
        body.midnight .expense-cat-opt:hover { border-color: #888; color: var(--text); }
        body.dark .expense-cat-opt.active { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent-text); }
        body.midnight .expense-cat-opt.active { border-color: var(--accent-bg); background: var(--accent-bg); color: var(--accent-text); }

        /* Weight tracking */
        .weight-widget {
            background: var(--bg);
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.6rem;
            position: relative;
        }
        .weight-widget .section-title { font-size: 0.75rem; border-width: 1.5px; }
        body.dark .weight-widget { border-color: var(--gray-border); }
        body.midnight .weight-widget { border-color: var(--gray-border); }
        .weight-main-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.2rem;
            margin: 0.3rem 0;
        }
        .weight-side {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.1rem;
        }
        .weight-side-label {
            font-size: 0.45rem;
            color: var(--dim-text);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }
        .weight-side-val {
            font-size: 0.7rem;
            font-weight: 700;
            color: var(--text);
        }
        .weight-ring {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background 0.4s ease;
        }
        .weight-center {
            display: flex;
            align-items: center;
            background: var(--bg);
            border-radius: 50%;
            width: 56px;
            height: 56px;
            justify-content: center;
            flex-shrink: 0;
        }
        .weight-center-big {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--text);
            line-height: 1;
        }
        .weight-arrow {
            color: var(--dim-text);
            font-size: 0.7rem;
            flex-shrink: 0;
        }
        .weight-pct {
            font-weight: 700;
            font-size: 0.6rem;
            color: var(--accent-bg);
            text-align: center;
            margin-top: 0.05rem;
        }
        .weight-pct.done { color: #4caf50; }
        .weight-records-list {
            font-size: 0.6rem;
            max-height: 4.2rem;
            overflow-y: auto;
            margin-top: 0.4rem;
            border-top: 1px solid var(--gray-border);
            padding-top: 0.3rem;
        }
        .weight-record-row {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.2rem 0;
            border-bottom: 1px solid var(--gray-border);
        }
        .weight-record-date { color: var(--dim-text); min-width: 60px; }
        .weight-record-val { font-weight: 700; }
        .weight-record-del {
            margin-left: auto;
            margin-right: 10px;
            background: none;
            border: none;
            color: var(--dim-text);
            cursor: pointer;
            font-size: 0.6rem;
        }
        .weight-record-del:hover { color: #e55; }
        .weight-add-row {
            display: flex;
            gap: 0.3rem;
            align-items: center;
            margin-top: 0.3rem;
        }
        .weight-add-row input {
            font-size: 0.55rem;
            padding: 0.2rem 0.3rem;
            border: 1.5px solid var(--border);
            border-radius: 6px;
            background: var(--input-bg);
            color: var(--text);
        }
        .weight-add-row input[type="text"] { width: 55px; text-align: center; }
        .weight-add-row input[type="date"] { width: 95px; }
        .weight-confirm-btn {
            font-size: 0.5rem;
            padding: 0.15rem 0.35rem;
            border: none;
            border-radius: 6px;
            background: var(--accent-bg);
            color: var(--accent-text);
            cursor: pointer;
        }
        .weight-stepper {
            display: flex;
            align-items: center;
            gap: 0;
            margin-bottom: 0.25rem;
            border: 1.5px solid var(--border);
            border-radius: 8px;
            overflow: hidden;
        }
        .weight-stepper input {
            flex: 1;
            font-size: 0.6rem;
            font-weight: 600;
            padding: 0.3rem 0.2rem;
            border: none;
            background: var(--input-bg);
            color: var(--text);
            text-align: center;
            min-width: 0;
        }
        .weight-stepper input::placeholder {
            font-weight: 400;
            color: var(--dim-text);
        }
        .weight-step-btn {
            width: 32px;
            height: 32px;
            border: none;
            background: var(--gray-light);
            color: var(--text);
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.1s;
            line-height: 1;
        }
        .weight-step-btn:hover { background: var(--accent-bg); color: var(--accent-text); }
        .weight-step-btn:active { opacity: 0.8; }
        .weight-setup-btn {
            display: block;
            width: 100%;
            font-size: 0.6rem;
            font-weight: 600;
            padding: 0.3rem;
            border: none;
            border-radius: 8px;
            background: var(--accent-bg);
            color: var(--accent-text);
            cursor: pointer;
            transition: opacity 0.15s;
        }
        .weight-setup-btn:hover { opacity: 0.85; }
        .weight-empty {
            color: var(--dim-text);
            font-style: italic;
            text-align: center;
        }
        body.dark .weight-ring { }
        body.midnight .weight-ring { }

        /* Wykres wagi (modal) */
        .weight-chart-box { padding: 1rem; }
        .weight-chart-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            font-size: 0.6rem;
            color: var(--dim-text);
        }
        .weight-chart-legend-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            white-space: nowrap;
        }
        .weight-chart-legend-key {
            display: inline-block;
            width: 14px;
            height: 0;
            border-top-width: 2px;
            border-top-style: solid;
            flex-shrink: 0;
        }
        .weight-chart-legend-val { font-weight: 700; color: var(--text); }
        .weight-chart-wrap {
            position: relative;
            width: 100%;
            touch-action: pan-y;
        }
        .weight-chart-tooltip {
            position: absolute;
            top: 0;
            left: 0;
            transform: translate(-50%, -100%);
            background: var(--accent-bg);
            color: var(--accent-text);
            font-size: 0.6rem;
            font-weight: 600;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.1s ease;
            white-space: nowrap;
            z-index: 5;
            margin-top: -6px;
        }
        .weight-chart-tooltip.show { opacity: 1; }
        .weight-chart-tooltip-date { font-weight: 400; opacity: 0.75; margin-right: 0.3rem; }
        @media (max-width: 480px) {
            .weight-chart-box { padding: 0.7rem; }
            .weight-chart-legend { font-size: 0.55rem; gap: 0.45rem; }
        }

        /* Panel admina */
        .admin-panel-box { padding: 1rem; -webkit-overflow-scrolling: touch; }
        .admin-section-title {
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--dim-text);
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-top: 0.3rem;
        }
        .admin-stats-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
        }
        .admin-stat-card {
            border: 2px solid var(--border);
            border-radius: 10px;
            padding: 0.5rem 0.4rem;
            text-align: center;
        }
        .admin-stat-value { font-size: 1.2rem; font-weight: 700; color: var(--text); }
        .admin-stat-label { font-size: 0.55rem; color: var(--dim-text); margin-top: 0.15rem; }
        .admin-chart-wrap { position: relative; width: 100%; }
        .admin-chart-legend {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            font-size: 0.6rem;
            color: var(--dim-text);
        }
        .admin-chart-legend-item {
            display: flex;
            align-items: center;
            gap: 0.3rem;
            white-space: nowrap;
        }
        .admin-chart-legend-key {
            display: inline-block;
            width: 14px;
            height: 3px;
            border-radius: 2px;
            flex-shrink: 0;
        }
        .admin-chart-legend-val { font-weight: 700; color: var(--text); }
        .admin-users-wrap { max-height: 240px; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 2px solid var(--border); border-radius: 10px; }
        .admin-users-table { width: 100%; border-collapse: collapse; font-size: 0.65rem; }
        .admin-users-table th {
            position: sticky;
            top: 0;
            background: var(--bg);
            text-align: left;
            padding: 0.4rem 0.5rem;
            color: var(--dim-text);
            font-weight: 700;
            border-bottom: 2px solid var(--border);
        }
        .admin-users-table td {
            padding: 0.35rem 0.5rem;
            border-bottom: 1px solid var(--border);
            color: var(--text);
        }
        .admin-users-table tr:last-child td { border-bottom: none; }
        .admin-logins-list {
            max-height: 160px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border: 2px solid var(--border);
            border-radius: 10px;
            padding: 0.3rem 0.5rem;
        }
        .admin-login-row {
            display: flex;
            justify-content: space-between;
            gap: 0.5rem;
            font-size: 0.65rem;
            padding: 0.3rem 0;
            border-bottom: 1px solid var(--border);
        }
        .admin-login-row:last-child { border-bottom: none; }
        .admin-login-time { color: var(--dim-text); white-space: nowrap; }
        .admin-stat-card.clickable { cursor: pointer; transition: transform 0.1s; }
        .admin-stat-card.clickable:hover { transform: scale(1.03); border-color: var(--accent-bg); }
        .admin-users-manage-list { max-height: 320px; overflow-y: auto; border: 2px solid var(--border); border-radius: 10px; }
        .admin-user-manage-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); font-size: 0.7rem; cursor: pointer; }
        .admin-user-manage-row:last-child { border-bottom: none; }
        .admin-user-manage-row:hover { background: var(--hover-bg); }
        .admin-user-manage-email { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .admin-user-manage-date { color: var(--dim-text); white-space: nowrap; flex-shrink: 0; }
        .admin-perm-email { font-weight: 700; margin-bottom: 0.6rem; word-break: break-all; }
        .admin-trial-config-row { display: flex; gap: 0.6rem; align-items: flex-end; flex-wrap: wrap; margin: 0.4rem 0; }
        .admin-trial-config-field { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.65rem; color: var(--dim-text); }
        .admin-trial-config-field .auth-input { padding: 0.3rem; font-size: 0.7rem; width: 140px; }
        .admin-trial-config-hint { font-size: 0.6rem; color: var(--dim-text); margin-bottom: 0.3rem; min-height: 0.9em; }
        .admin-user-manage-flags { display: flex; gap: 2px; flex-shrink: 0; }
        .admin-user-flag-badge {
            display: inline-flex; align-items: center; justify-content: center;
            width: 15px; height: 15px; border-radius: 4px; font-size: 0.55rem; font-weight: 700;
            background: var(--gray-light); color: var(--dim-text);
        }
        .admin-user-flag-badge.active { background: var(--accent-bg); color: #fff; }
        .admin-perm-row { padding: 0.35rem 0; border-bottom: 1px solid var(--gray-light); }
        .admin-perm-row label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.8rem; }
        .admin-perm-limit-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.4rem 0; font-size: 0.8rem; }
        .admin-perm-limit-row .auth-input { width: 80px; text-align: center; padding: 0.3rem; }

        /* ============================================================
           PANEL ADMINA — przebudowa na profesjonalny, kartowy layout:
           kafelki KPI z ikoną, pasek szybkich akcji, karty sekcji.
           Zachowane ID (adminStatsRow, adminUsersBody, adminChart*, itd.)
           — zmienia się tylko wygląd/struktura, nie logika w js/admin.js.
           ============================================================ */
        .admin-stats-row { gap: 0.5rem; margin-bottom: 0.2rem; }
        .admin-stat-card { display: flex; align-items: center; gap: 0.55rem; text-align: left; border: 1px solid var(--gray-border); border-radius: 12px; padding: 0.6rem 0.7rem; background: var(--bg); }
        .admin-stat-icon { width: 30px; height: 30px; border-radius: 9px; background: var(--gray-light); color: var(--dim-text); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; flex-shrink: 0; }
        .admin-stat-body { min-width: 0; }
        .admin-stat-value { font-size: 1.25rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
        .admin-stat-label { font-size: 0.48rem; color: var(--dim-text); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; margin-top: 0.15rem; }
        .admin-stat-card.clickable { cursor: pointer; transition: background 0.12s, border-color 0.12s; }
        .admin-stat-card.clickable:hover { transform: none; background: var(--gray-light); border-color: var(--accent-bg); }
        .admin-stat-card.clickable:hover .admin-stat-icon { background: var(--accent-bg); color: var(--accent-text); }

        /* Pasek szybkich akcji */
        .admin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
        .admin-action-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-family: inherit; font-size: 0.72rem; font-weight: 700; padding: 0.5rem 0.85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); cursor: pointer; transition: all 0.12s; }
        .admin-action-btn i { color: var(--dim-text); }
        .admin-action-btn:hover { background: var(--gray-light); }
        .admin-action-btn.active { background: var(--gray-light); border-color: var(--accent-bg); }
        .admin-action-btn.active i { color: var(--accent-bg); }
        .admin-action-btn-primary { margin-left: auto; background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent-bg); }
        .admin-action-btn-primary i { color: var(--accent-text); }
        .admin-action-btn-primary:hover { background: var(--accent-bg); opacity: 0.88; }

        /* Karty sekcji */
        .admin-card { border: 1px solid var(--gray-border); border-radius: 12px; padding: 0.8rem 0.85rem; background: var(--bg); margin-top: 0.7rem; }
        .admin-card-head { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 800; color: var(--text); }
        .admin-card-head i { color: var(--dim-text); }
        .admin-card-sub { font-size: 0.62rem; color: var(--dim-text); margin: 0.2rem 0 0.6rem; }
        .admin-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.7rem; flex-wrap: wrap; }
        .admin-card-foot .admin-trial-config-hint { margin: 0; flex: 1; min-width: 140px; }
        .admin-chart-head { justify-content: space-between; margin-bottom: 0.4rem; }
        .admin-collapsible { animation: adminReveal 0.18s ease; }
        @keyframes adminReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
        /* Wewnątrz karty tabela/lista nie potrzebują własnej ramki — ramkę daje karta */
        .admin-card .admin-users-wrap, .admin-card .admin-logins-list { border: none; border-radius: 0; margin-top: 0.5rem; }
        .admin-card .admin-logins-list { padding: 0; max-height: 220px; }

        /* Pola formularza (Domyślny dostęp) — etykieta u góry, input pełnej szerokości */
        .admin-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.55rem 0.6rem; }
        .admin-field { display: flex; flex-direction: column; gap: 0.22rem; font-size: 0.55rem; color: var(--dim-text); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 700; }
        .admin-field .auth-input { width: 100%; padding: 0.4rem 0.45rem; font-size: 0.72rem; text-transform: none; letter-spacing: normal; font-weight: 400; }

        /* Pełny ekran panelu admina — celowo widoczny na desktopie I mobile (w odróżnieniu od
           .expenses-fullscreen-btn, ukrytego na desktopie), patrz kliknięcie na
           #adminPanelFullscreen w js/admin.js. #adminPanelBox ma width/max-width/max-height
           ustawione INLINE w index.html — zwykła reguła klasy by ich nie nadpisała (inline
           zawsze wygrywa poza !important), stąd !important tutaj. */
        .admin-fullscreen-btn {
            display: inline-flex; align-items: center;
            background: none; border: none; cursor: pointer; color: var(--dim-text);
            font-size: 0.8rem; padding: 0.1rem 0.3rem;
        }
        .admin-fullscreen-btn:hover { color: var(--text); }
        #adminPanelBox.admin-panel-fullscreen {
            position: fixed;
            inset: 0;
            width: 100vw !important;
            height: 100vh;
            max-width: 100vw !important;
            max-height: 100vh !important;
            border-radius: 0;
            margin: 0;
        }

        .admin-users-select-bar {
            display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
            padding: 0.4rem 0.5rem; margin-bottom: 0.5rem;
            background: var(--gray-light); border-radius: 8px; font-size: 0.7rem; font-weight: 700;
        }
        .admin-users-filters-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
        .admin-users-filter-field { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.6rem; color: var(--dim-text); flex: 1; min-width: 100px; }
        .admin-users-filter-field .auth-input { padding: 0.3rem; font-size: 0.68rem; width: 100%; }
        .admin-users-select-all-row {
            display: flex; align-items: center; gap: 0.4rem;
            font-size: 0.68rem; color: var(--dim-text); cursor: pointer;
            padding: 0.2rem 0.1rem 0.5rem;
        }
        .admin-users-select-all-row input { cursor: pointer; }
        .admin-user-manage-row { gap: 0.5rem; }
        .admin-user-manage-checkbox { flex-shrink: 0; cursor: pointer; }
        .admin-user-manage-until { font-size: 0.6rem; color: #e67e22; white-space: nowrap; flex-shrink: 0; }
        .admin-user-manage-until.admin-user-manage-unlimited { color: var(--dim-text); }
        .admin-user-manage-meta { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

        .admin-perm-time-section { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--gray-light); }
        .admin-perm-time-title { font-weight: 700; font-size: 0.75rem; margin-bottom: 0.3rem; }
        .admin-perm-until-display { font-size: 0.7rem; color: var(--dim-text); margin-bottom: 0.4rem; }
        .admin-perm-time-row { display: flex; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
        .admin-perm-time-row .auth-input { padding: 0.3rem; font-size: 0.7rem; }
        .admin-perm-time-presets { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .admin-perm-preset-btn {
            font-family: inherit; font-size: 0.65rem; padding: 0.25rem 0.5rem; cursor: pointer;
            border: 1.5px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text);
        }
        .admin-perm-preset-btn:hover { border-color: var(--accent-bg); color: var(--accent-bg); }
        #adminUserPermEditor .modal-buttons { margin-top: 0.8rem; }

        /* "Danger zone" — kasowanie konta, patrz D.saveAdminUserPerms / delete handlery w
           js/admin.js. Osobna, czerwona sekcja odseparowana od reszty edytora, widoczna tylko
           w trybie pojedynczego usera (nie w edycji zbiorczej — patrz openAdminBulkPermEditor). */
        .admin-perm-danger-section { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--gray-light); }
        .admin-perm-danger-btn {
            font-family: inherit; font-size: 0.7rem; font-weight: 700; padding: 0.4rem 0.6rem; cursor: pointer;
            border: 1.5px solid #e74c3c; border-radius: 8px; background: transparent; color: #e74c3c;
            display: flex; align-items: center; gap: 0.4rem; width: 100%; justify-content: center;
        }
        .admin-perm-danger-btn:hover { background: #e74c3c; color: #fff; }
        .admin-perm-danger-hint { font-size: 0.65rem; color: var(--dim-text); margin: 0.5rem 0; }
        #adminUserDeleteConfirm .auth-input { width: 100%; margin-bottom: 0.4rem; }
        .admin-perm-danger-confirm-btn {
            font-family: inherit; font-size: 0.7rem; font-weight: 700; padding: 0.4rem 0.6rem; cursor: pointer;
            border: 1.5px solid #c0392b; border-radius: 8px; background: #e74c3c; color: #fff; width: 100%;
        }
        .admin-perm-danger-confirm-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .admin-perm-danger-confirm-btn:not(:disabled):hover { background: #c0392b; }
        @media (max-width: 480px) {
            .admin-panel-box { padding: 0.7rem; }
            .admin-stats-row { grid-template-columns: repeat(2, 1fr); }
            /* Na mobile obie listy dawniej miały własny, ciasny wewnętrzny scroll (~5 wierszy) —
               dwa zagnieżdżone obszary przewijania w małym oknie robiły wrażenie "ściśniętych"
               tabel, których nie dało się swobodnie przewinąć jednym gestem. Zamiast tego niech
               renderują się w pełnej wysokości, a scrolluje się cały modal (#adminPanelBox ma
               już overflow-y:auto — patrz inline style w index.html — i działa to tak samo
               w trybie pełnoekranowym, patrz #adminPanelBox.admin-panel-fullscreen niżej). */
            .admin-users-wrap { max-height: none; overflow-y: visible; }
            .admin-logins-list { max-height: none; overflow-y: visible; }
            /* WTAO + "do kiedy"/"bez limitu" + data razem ściskały email do nieczytelności na
               wąskim ekranie (wszystkie flex-shrink:0, email jako jedyny elastyczny zostawał
               z resztek miejsca). .admin-user-manage-meta ma flex-basis:100%, więc spada na
               osobny wiersz pod checkboxem+emailem, które wtedy mają cały wiersz dla siebie. */
            .admin-user-manage-row { flex-wrap: wrap; }
            .admin-user-manage-meta { flex: 1 1 100%; justify-content: flex-end; padding-left: 1.7rem; }
        }

        /* Cytat */
        .quote-box {
            border: 2px solid var(--border);
            border-radius: 14px;
            padding: 0.7rem 0.8rem;
            font-style: italic;
            color: #333;
            font-size: 0.8rem;
            background: var(--gray-light);
            cursor: pointer;
        }

        .quote-text {
            transition: opacity 0.4s ease;
        }

        .quote-text.fade {
            opacity: 0;
        }

        .quote-author {
            margin-top: 0.4rem;
            font-weight: 700;
            font-style: normal;
            text-align: right;
            transition: opacity 0.4s ease;
        }

        .quote-author.fade {
            opacity: 0;
        }

        /* Drop zone indicator */
        .drop-zone-active {
            animation: pulse 0.6s ease-in-out infinite;
        }

        @keyframes pulse {
            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2);
            }
            50% {
                box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);
            }
        }

        /* Toast notification */
        .toast {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            max-width: calc(100vw - 2.4rem);
            background: var(--accent-bg);
            color: var(--accent-text);
            padding: 0.8rem 1.5rem;
            border-radius: 16px 4px 16px 4px;
            font-weight: 700;
            font-size: 0.9rem;
            /* Wyżej niż każdy .modal-overlay/modal (max 4000) i #trainingWorkoutView — bez tego
               przy tym samym z-index wygrywa element później w DOM-ie (modal), więc toast
               wywołany np. z tapnięcia na wo-set-prev podczas treningu chował się pod modalem. */
            z-index: 10000;
            opacity: 0;
            transition: opacity 0.3s, transform 0.3s;
            pointer-events: none;
            box-shadow: 4px 4px 0 rgba(0,0,0,0.15);
            border: 2.5px solid var(--border);
            display: flex;
            align-items: center;
            gap: 0.8rem;
            letter-spacing: 0.5px;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(-5px);
            pointer-events: auto;
        }

        .toast-undo-btn {
            background: var(--accent-text);
            color: var(--accent-bg);
            border: none;
            border-radius: 6px;
            padding: 0.3rem 0.7rem;
            font-family: inherit;
            font-weight: 700;
            font-size: 0.8rem;
            cursor: pointer;
            transition: opacity 0.15s;
        }

        .toast-undo-btn:hover {
            opacity: 0.8;
        }

        /* === DARK MODE OVERRIDES === */
        body.dark .day-name { color: var(--dim-text); }
        body.midnight .day-name { color: var(--dim-text); }
        body.dark .tasks-for-day { color: var(--dim-text); }
        body.midnight .tasks-for-day { color: var(--dim-text); }
        body.dark .cal-day-name { color: var(--dim-text); }
        body.midnight .cal-day-name { color: var(--dim-text); }
        body.dark .stat-label { color: var(--dim-text); }
        body.midnight .stat-label { color: var(--dim-text); }
        body.dark .stat-detail { color: var(--dim-text); }
        body.midnight .stat-detail { color: var(--dim-text); }
        body.dark .stat-sub { color: var(--dim-text); }
        body.midnight .stat-sub { color: var(--dim-text); }
        body.dark .quote-author { color: var(--dim-text); }
        body.midnight .quote-author { color: var(--dim-text); }
        body.dark .weather-edit-icon { color: var(--dim-text); }
        body.midnight .weather-edit-icon { color: var(--dim-text); }
        body.dark .weather-edit-icon:hover { color: var(--text); }
        body.midnight .weather-edit-icon:hover { color: var(--text); }
        body.dark .note-label { color: var(--text); }
        body.midnight .note-label { color: var(--text); }
        body.dark .note-save-indicator { color: #6c6; }
        body.midnight .note-save-indicator { color: #6c6; }
        body.dark .quote-box { color: #bbb; }
        body.midnight .quote-box { color: #bbb; }
        body.dark .drag-handle { color: #555; }
        body.midnight .drag-handle { color: #555; }
        body.dark .delete-task-btn, body.dark .move-task-btn { color: #555; }
        body.midnight .delete-task-btn, body.midnight .move-task-btn { color: #555; }
        body.dark .delete-task-btn:hover, body.dark .move-task-btn:hover { color: #ccc; background: var(--delete-hover-bg); }
        body.midnight .delete-task-btn:hover, body.midnight .move-task-btn:hover { color: #ccc; background: var(--delete-hover-bg); }
        body.dark .note-card-delete { color: #555; }
        body.midnight .note-card-delete { color: #555; }
        body.dark .note-card-delete:hover { color: #ccc; }
        body.midnight .note-card-delete:hover { color: #ccc; }
        body.dark .note-card-icon { color: var(--text); }
        body.midnight .note-card-icon { color: var(--text); }
        body.dark .todo-item { border-bottom-color: var(--gray-border); }
        body.midnight .todo-item { border-bottom-color: var(--gray-border); }
        body.dark .todo-item:last-child { border-bottom: none; }
        body.midnight .todo-item:last-child { border-bottom: none; }
        body.dark .todo-item.dragging { background: var(--drag-bg); border-color: var(--border); }
        body.midnight .todo-item.dragging { background: var(--drag-bg); border-color: var(--border); }
        body.dark .todo-checkbox { background: var(--checkbox-bg); }
        body.midnight .todo-checkbox { background: var(--checkbox-bg); }
        body.dark .todo-checkbox:checked+.todo-text { color: #777; }
        body.midnight .todo-checkbox:checked+.todo-text { color: #777; }
        body.dark .add-task-input { background: var(--input-bg); color: var(--text); }
        body.midnight .add-task-input { background: var(--input-bg); color: var(--text); }
        body.dark .add-task-input::placeholder { color: var(--muted-text); }
        body.midnight .add-task-input::placeholder { color: var(--muted-text); }
        body.dark .note-area textarea::placeholder { color: var(--muted-text); }
        body.midnight .note-area textarea::placeholder { color: var(--muted-text); }
        body.dark .stat-bar { background: var(--bar-bg); }
        body.midnight .stat-bar { background: var(--bar-bg); }
        body.dark .day-card.selected { box-shadow: 3px 3px 0 #666; }
        body.midnight .day-card.selected { box-shadow: 3px 3px 0 #666; }
        body.dark .day-card.drag-over { background: #333; }
        body.midnight .day-card.drag-over { background: #333; }
        body.dark .day-card.selected.drag-over { background: #444; box-shadow: 0 0 0 4px rgba(255,255,255,0.1); }
        body.midnight .day-card.selected.drag-over { background: #444; box-shadow: 0 0 0 4px rgba(255,255,255,0.1); }
        body.dark .modal-title-input,
        body.dark .modal-textarea,
        body.dark .weather-city-input { background: var(--input-bg); color: var(--text); }
        body.midnight .modal-title-input,
        body.midnight .modal-textarea,
        body.midnight .weather-city-input { background: var(--input-bg); color: var(--text); }
        body.dark .modal-cancel-btn:hover { background: var(--hover-bg); }
        body.midnight .modal-cancel-btn:hover { background: var(--hover-bg); }
        body.dark .modal-delete-btn:hover { background: #3a1a1a; }
        body.midnight .modal-delete-btn:hover { background: #3a1a1a; }
        body.dark .note-card:hover { background: var(--hover-bg); }
        body.midnight .note-card:hover { background: var(--hover-bg); }
        body.dark .note-card-delete:hover { color: var(--delete-hover-color); }
        body.midnight .note-card-delete:hover { color: var(--delete-hover-color); }
        body.dark .note-card-delete { color: #666; }
        body.midnight .note-card-delete { color: #666; }
        body.dark .notes-empty { color: var(--muted-text); }
        body.midnight .notes-empty { color: var(--muted-text); }
        body.dark .cal-day.selected-date:hover { background-color: #444; }
        body.midnight .cal-day.selected-date:hover { background-color: #444; }
        body.dark .add-task-btn:hover { background: #444; }
        body.midnight .add-task-btn:hover { background: #444; }
        body.dark .add-note-btn:hover { background: #444; }
        body.midnight .add-note-btn:hover { background: #444; }
        body.dark .modal-save-btn:hover { background: #444; }
        body.midnight .modal-save-btn:hover { background: #444; }
        body.dark .user-name-input { color: var(--text); }
        body.midnight .user-name-input { color: var(--text); }
        body.dark .greeting h1 { color: var(--text); }
        body.midnight .greeting h1 { color: var(--text); }
        body.dark .avatar { border-color: var(--border); }
        body.midnight .avatar { border-color: var(--border); }
        body.dark .weather-widget { background: var(--gray-light); }
        body.midnight .weather-widget { background: var(--gray-light); }
        body.dark .weather-widget .temp { color: var(--text); }
        body.midnight .weather-widget .temp { color: var(--text); }
        body.dark .todo-edit-input { color: var(--text); border-bottom-color: var(--border); }
        body.midnight .todo-edit-input { color: var(--text); border-bottom-color: var(--border); }
        body.dark .toast { box-shadow: 4px 4px 0 rgba(255,255,255,0.1); }
        body.midnight .toast { box-shadow: 4px 4px 0 rgba(255,255,255,0.1); }
        body.dark .section-title { background: var(--gray-light); }
        body.midnight .section-title { background: var(--gray-light); }
        body.dark .day-card:hover { box-shadow: 3px 3px 0 rgba(255,255,255,0.08); }
        body.midnight .day-card:hover { box-shadow: 3px 3px 0 rgba(255,255,255,0.08); }
        body.dark .ai-toggle { box-shadow: 4px 4px 0 rgba(255,255,255,0.1); }
        body.midnight .ai-toggle { box-shadow: 4px 4px 0 rgba(255,255,255,0.1); }
        body.dark .ai-panel { box-shadow: 6px 6px 0 rgba(255,255,255,0.08); }
        body.midnight .ai-panel { box-shadow: 6px 6px 0 rgba(255,255,255,0.08); }
        body.dark .ai-tts-btn.active { color: #2ecc71; border-color: #2ecc71; }
        body.midnight .ai-tts-btn.active { color: #2ecc71; border-color: #2ecc71; }
        body.dark .ai-tts-btn.speaking { color: #e74c3c; border-color: #e74c3c; }
        body.midnight .ai-tts-btn.speaking { color: #e74c3c; border-color: #e74c3c; }
        body.dark .ai-tts-btn.muted { color: #666; }
        body.midnight .ai-tts-btn.muted { color: #666; }
        body.dark .ai-msg-bot { background: var(--gray-light); border-color: var(--border); }
        body.midnight .ai-msg-bot { background: var(--gray-light); border-color: var(--border); }
        body.dark .ai-msg-user { background: var(--accent-bg); color: var(--accent-text); }
        body.midnight .ai-msg-user { background: var(--accent-bg); color: var(--accent-text); }
        body.dark .monthly-stat { border-color: var(--gray-border); }
        body.midnight .monthly-stat { border-color: var(--gray-border); }
        body.dark .monthly-stat-bar { background: #333; }
        body.midnight .monthly-stat-bar { background: #333; }
        body.dark .monthly-stat-sub { color: var(--dim-text); }
        body.midnight .monthly-stat-sub { color: var(--dim-text); }
        body.dark .yearly-expense-row { border-color: var(--gray-border); }
        body.midnight .yearly-expense-row { border-color: var(--gray-border); }
        body.dark .monthly-activity-badge { border-color: var(--gray-border); }
        body.midnight .monthly-activity-badge { border-color: var(--gray-border); }
        body.dark .mh-day { background: #333; color: var(--dim-text); }
        body.midnight .mh-day { background: #333; color: var(--dim-text); }
        body.dark .mh-day.done { background: #27ae60; color: #fff; }
        body.midnight .mh-day.done { background: #27ae60; color: #fff; }
        body.dark .mh-day.mh-day-empty { background: transparent; }
        body.midnight .mh-day.mh-day-empty { background: transparent; }
        body.dark .monthly-habits { border-color: var(--gray-border); }
        body.midnight .monthly-habits { border-color: var(--gray-border); }

        /* Wszystkie notatki */
        .notes-search {
            width: 100%;
            border: 2px solid var(--border);
            border-radius: 10px;
            padding: 0.5rem 0.7rem;
            font-family: inherit;
            font-size: 0.85rem;
            outline: none;
            background: var(--bg);
            color: var(--text);
            margin-bottom: 0.6rem;
        }
        .notes-search:focus { border-width: 3px; }
        .all-notes-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.5rem;
            max-height: 320px;
            overflow-y: auto;
        }
        .all-note-card {
            border: 1.5px solid var(--gray-border);
            border-radius: 10px;
            aspect-ratio: 1 / 1;
            padding: 0.4rem 0.3rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.12s;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.2rem;
            background: var(--bg);
        }
        .all-note-card:hover { border-color: var(--border); box-shadow: var(--shadow); }
        .all-note-icon { font-size: 1.4rem; color: var(--text); }
        .all-note-title {
            font-size: 0.65rem;
            font-weight: 600;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-word;
        }
        .all-note-date {
            font-size: 0.55rem;
            color: var(--dim-text);
        }

        /* Kolory notatek */
        .note-color-row {
            display: flex;
            align-items: center;
            gap: 0.35rem;
        }
        .note-color-label { font-size: 0.75rem; color: var(--dim-text); }
        .note-color {
            width: 20px; height: 20px; border-radius: 50%;
            border: 2px solid transparent; cursor: pointer; transition: all 0.1s;
            flex-shrink: 0;
        }
        .note-color.default { background: var(--bg); border-color: var(--gray-border); }
        .note-color.active { border-color: var(--border); box-shadow: 0 0 0 2px var(--accent-bg); }
        .note-color:hover { transform: scale(1.15); }

        .weather-quote-row {
            display: flex;
            gap: 0.5rem;
        }
        .weather-quote-row > * { flex: 1; }

        /* Urodziny */
        .birthday-form {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.4rem;
            margin-bottom: 0.6rem;
        }
        .birthday-form .auth-input {
            font-size: 0.75rem;
            padding: 0.35rem 0.4rem;
            min-width: 0;
        }
        .birthday-form .auth-btn {
            padding: 0.35rem 1rem;
            font-size: 0.8rem;
        }
        .birthday-list {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            max-height: 270px;
            overflow-y: auto;
        }
        .birthday-item {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.5rem;
            border: 1.5px solid var(--gray-border);
            border-radius: 10px;
            font-size: 0.72rem;
            width: fit-content;
        }
        .birthday-item-icon { font-size: 0.8rem; flex-shrink: 0; }
        .birthday-item-name { font-weight: 700; white-space: nowrap; }
        .birthday-item-date { font-size: 0.65rem; color: var(--dim-text); white-space: nowrap; }
        .birthday-item-countdown { font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
        .birthday-item-countdown.soon { color: #c00; }
        .birthday-item-delete {
            background: none; border: none; color: #bbb; cursor: pointer;
            font-size: 0.65rem; padding: 0.1rem; flex-shrink: 0;
        }
        .birthday-item-delete:hover { color: #333; }

        /* Responsywność - tablet */
        @media (max-width: 1100px) {
            /* Bazowy padding body (1rem 5rem = 80px z każdej strony) jest pomyślany pod szerokie
               desktopy. W tym przedziale .dashboard jest już zwężony do 1fr 300px, a wewnątrz
               main .tasks-notes-row ma DRUGĄ stałą kolumnę 300px (notes-col) — te 160px paddingu
               naliczone dwa razy (lewo+prawo) realnie zjadały kolumnę zadań do ~100-125px,
               przez co tekst zadań łamał się litera po literze zamiast zawijać na słowach. */
            body {
                padding: 1rem 2rem;
            }
            .dashboard {
                grid-template-columns: 1fr 300px;
                gap: 1rem;
            }
            .week-grid {
                gap: 0.4rem;
            }
        }

        /* Responsywność - mobilny. Próg podniesiony z 768px na 900px — .dashboard w 2-kolumnowym
           układzie (1fr + 300-340px sidebar, patrz @media max-width:1100px i baza .dashboard)
           w przedziale 769-900px zostawiał main content zbyt mało miejsca (np. iPad w pionie,
           ~768-834px szerokości) i layout się rozjeżdżał. Poniżej ten sam próg musi zostać
           spójny ze WSZYSTKIMI regułami w tym bloku (rozmiary czcionek/paddingów dla widgetów),
           nie tylko z samym stackowaniem .dashboard/main/.sidebar. */
        @media (max-width: 900px) {
            body {
                padding: 0.8rem;
                overflow-x: hidden;
                overflow-y: auto;
            }
            .habits-widget,
            .addictions-widget,
            .expenses-widget,
            .training-stats-widget,
            .weight-widget {
                grid-column: 1 / -1;
            }
            .habit-label {
                min-width: 70px;
                max-width: 120px;
            }
            .habit-day {
                width: 16px;
                height: 16px;
            }
            .dashboard {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto auto auto;
                gap: 1rem;
                height: auto;
                min-height: 100%;
            }
            main {
                overflow-y: visible;
                display: block;
            }
            .sidebar {
                overflow-y: visible;
            }
            .todo-list {
                flex: none;
                overflow-y: visible;
                min-height: 50px;
            }
            .tasks-notes-row {
                flex-direction: column;
                flex: none;
            }
            .notes-col {
                width: 100%;
            }
            .notes-grid {
                grid-template-columns: repeat(4, 1fr);
                max-height: 140px;
                overflow-y: auto;
                gap: 0.3rem;
            }
            .note-card { padding: 0.2rem 0.1rem; gap: 0.05rem; }
            .note-card-icon { font-size: 1.2rem; }
            .note-card-title { font-size: 0.48rem; -webkit-line-clamp: 2; }
            .delete-task-btn, .move-task-btn {
                opacity: 1 !important;
            }
            .header {
                gap: 0.5rem;
                position: relative;
            }
            .header-right {
                position: fixed;
                top: 0.8rem;
                right: 0.8rem;
                z-index: 100;
            }
            .greeting h1 {
                font-size: 1.2rem;
            }
            .avatar {
                width: 38px;
                height: 38px;
                font-size: 1rem;
            }
            .week-grid {
                gap: 0.35rem;
                overflow-x: auto;
                padding-top: 0.3rem;
                padding-bottom: 0.3rem;
                -webkit-overflow-scrolling: touch;
            }
            .day-card {
                padding: 0.3rem 0.15rem;
                border-radius: 12px;
                min-width: 40px;
                gap: 0.15rem;
                overflow: visible;
            }
            .today-badge {
                font-size: 0.55rem;
                top: 0;
                bottom: 0;
                left: -6px;
                right: auto;
                width: 12px;
                height: 45px;
                align-items: center;
                justify-content: center;
                writing-mode: vertical-rl;
                text-orientation: mixed;
                border-radius: 8px;
                letter-spacing: 0.5px;
            }
            .day-card.today:not(.selected) .today-badge {
                display: flex;
            }
            .day-name {
                font-size: 0.55rem;
            }
            .day-date {
                font-size: 0.85rem;
            }
            .weather-icon {
                font-size: 0.75rem;
            }
            .sidebar {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.8rem;
            }
            .note-area {
                grid-column: 1 / -1;
            }
            .weather-widget {
                grid-column: 1 / 2;
            }
            .weather-aqi span {
                font-size: 0.5rem !important;
            }
            .name-day {
                font-size: 0.5rem !important;
            }
            .quote-box {
                grid-column: 2 / 3;
            }
            .section-title {
                font-size: 0.8rem;
            }
            .todo-item {
                font-size: 0.9rem;
                padding: 0.5rem;
            }
            .add-task-input,
            .add-task-btn {
                font-size: 0.85rem;
                padding: 0.45rem 0.6rem;
            }
            .monthly-stats-box,
            .yearly-stats-box {
                max-width: 100%;
                max-height: 75vh;
                overflow-y: auto;
            }
            /* Savings panel mobile */
            #savingsOverlay .modal-box { padding: 0.8rem; max-width: 95vw; }
            #savingsFormRow { flex-wrap: wrap; }
            .savings-log-row { flex-wrap: wrap; gap: 0.2rem; font-size: 0.6rem; }
            .savings-log-amt { min-width: 55px; font-size: 0.6rem; }
            .savings-log-date { font-size: 0.5rem; min-width: 65px; }
            .savings-balance { font-size: 1.2rem; }
            .monthly-nav { margin-bottom: 0; }
            /* Donut chart na mobile — układ pionowy, większy pierścień */
            .expense-donut-wrap { flex-direction: column; align-items: center; gap: 0.4rem; }
            .expense-donut-svg { width: 180px; height: 180px; }
            .expense-donut-legend { width: 100%; font-size: 0.55rem; }
            /* Panel wydatków — pełny opis, data na prawo */
            .expense-panel-row { flex-wrap: wrap; gap: 0.2rem 0.3rem; padding: 0.3rem 0.3rem; }
            /* Stała szerokość kolumny kategorii → kwoty startują od tego samego X we wszystkich wierszach */
            .expense-panel-cat { flex: 0 0 5.5rem; width: 5.5rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6rem; }
            /* Kwota: stała szerokość + tekst do lewej (równy start), blok wyśrodkowany w wierszu */
            .expense-panel-amt { flex: 0 0 auto; width: 5rem; text-align: left; margin-left: auto; margin-right: auto; font-size: 0.62rem; }
            .expense-panel-desc { flex: 1 1 100%; order: 10; overflow: visible; text-overflow: clip; white-space: normal; font-size: 0.55rem; padding-left: 0.2rem; }
            .expense-panel-desc:empty { display: none; }
            .expense-panel-date { margin-left: auto; min-width: 0; font-size: 0.5rem; }
            .expense-panel-edit, .expense-panel-del { opacity: 1 !important; font-size: 0.6rem; }
            /* Bez margin-left:auto — o wyśrodkowanie kwoty dba margin auto na .expense-panel-amt */
            .expense-panel-edit { margin-left: 0; }
            /* Tryb edycji wydatku — węższe pole kwoty, żeby zostało miejsce na kategorię/datę/przyciski */
            .expense-edit-amount { width: 45px !important; }
            .expense-edit-desc { width: 92% !important; }
            /* Widget "Wydatki" na dashboardzie — te same zwężenia co niżej w
               @media (display-mode: standalone), która obejmuje TYLKO zainstalowaną PWA.
               Zwykła przeglądarka mobilna nigdy ich nie dostawała, więc .expense-cat-name
               (sztywne 65px) + .expense-amount (58px) wypychały wiersz poza ekran —
               stąd ucięcie po prawej widoczne tylko poza PWA. */
            .expense-cat-name { width: auto; min-width: 50px; }
            .expense-amount { width: 48px; font-size: 0.55rem; }
            .expense-cat { width: 14px; }
            .expense-edit { margin-left: auto; }
        }

        /* === TRENING === */
        .training-box { max-width: 650px; max-height: 85vh; overflow-y: auto; padding: 1rem; position: relative; }

        /* Ceremonia startu treningu — poświata wokół modalu + rosnąca ikona hantli na zasłonie
           (patrz D._playWorkoutStartIntro w training.js) */
        .training-box.wo-starting-glow {
            animation: woStartGlow 0.8s ease-in-out;
        }
        @keyframes woStartGlow {
            0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); border-color: var(--border); }
            30%  { box-shadow: 0 0 0 7px rgba(46, 204, 113, 0.35); border-color: #2ecc71; }
            100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); border-color: var(--border); }
        }
        .wo-start-intro {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--bg);
            z-index: 200;
            border-radius: 14px;
            opacity: 1;
            transition: opacity 0.25s ease;
        }
        .wo-start-intro.wo-start-intro-out { opacity: 0; pointer-events: none; }
        .wo-start-intro i {
            font-size: 2.2rem;
            color: var(--text);
            transform: scale(0.2) rotate(-25deg);
            opacity: 0;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease;
        }
        .wo-start-intro.wo-start-intro-play i {
            transform: scale(1) rotate(0deg);
            opacity: 1;
        }
        @media (prefers-reduced-motion: reduce) {
            .training-box.wo-starting-glow { animation: none; }
            .wo-start-intro, .wo-start-intro i { transition: none; }
        }
        .training-close-corner { position: absolute; top: 6px; right: 7px; background: none; border: none; color: var(--dim-text); cursor: pointer; font-size: 0.9rem; padding: 0.15rem; display: block; z-index: 30; }
        .training-close-corner:hover { color: var(--text); }
        .training-fullscreen-btn { display: none; right: 25px; }
        /* Kotwica bez wysokości (nie zajmuje miejsca w layoucie) przyklejona do góry scrolla
           .training-box (overflow-y:auto) — działa identycznie w zwykłym modalu i w fullscreen,
           dzięki czemu przyciski Zamknij/Pełny ekran nie znikają pod przewijaną zawartością. */
        .training-sticky-btns { position: sticky; top: 0; height: 0; z-index: 30; }
        .training-box.training-fullscreen {
            position: fixed;
            inset: 0;
            width: 100vw;
            height: 100vh;
            max-width: 100vw;
            max-height: 100vh;
            border-radius: 0;
            margin: 0;
        }
        .training-header { font-size: 1.05rem; font-weight: 800; text-align: left; letter-spacing: 0.5px; padding-top: 0.3rem; padding-left: 10px; margin-bottom: 0.15rem; }
        #trainingClose { display: none; }
        .training-table { width: 100%; font-size: 0.6rem; border-collapse: collapse; border: 1px solid var(--gray-border); border-radius: 8px; overflow: hidden; }
        .training-table th { background: var(--gray-light); color: var(--dim-text); font-size: 0.5rem; text-transform: uppercase; letter-spacing: 0.3px; padding: 0.2rem 0.3rem; }
        .training-table td { padding: 0.2rem 0.3rem; border-bottom: 1px solid var(--gray-border); text-align: center; }
        .training-table .num { text-align: center; }
        .training-table tr:nth-child(even) td { background: var(--input-bg); }
        .training-table tr:last-child td { border-bottom: none; }
        .num { text-align: right; font-variant-numeric: tabular-nums; }
        .ex-autocomplete-wrap { position: relative; }
        .ex-autocomplete-drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; max-height: 180px; overflow-y: auto; background: var(--bg); border: 1.5px solid var(--border); border-top: none; border-radius: 0 0 6px 6px; box-shadow: var(--shadow); display: none; list-style: none; padding: 0; margin: 0; }
        .ex-autocomplete-drop.show { display: block; }
        .ex-autocomplete-drop li { padding: 0.3rem 0.4rem; font-size: 0.62rem; cursor: pointer; border-bottom: 1px solid var(--gray-light); }
        .ex-autocomplete-drop li:hover, .ex-autocomplete-drop li.active { background: var(--accent-bg); color: var(--accent-text); }
        .training-tabs { display: flex; gap: 0.3rem; margin: 0; flex-wrap: wrap; align-items: center; }
        .training-tab { font-family: inherit; font-size: 0.7rem; font-weight: 600; padding: 0.35rem 0.7rem; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--bg); color: var(--text); transition: all 0.12s; white-space: nowrap; }
        .training-tab.active { background: var(--accent-bg); color: var(--accent-text); }
        .training-tab:hover:not(.active) { background: var(--hover-bg); }
        .training-content { margin-bottom: 0.5rem; }
        .training-input { border: 1.5px solid var(--border); border-radius: 6px; padding: 0.35rem 0.5rem; font-family: inherit; font-size: 0.75rem; outline: none; background: var(--input-bg); color: var(--text); }
        .training-input:focus { border-width: 2px; }
        .training-add-ex, .training-save-btn { font-family: inherit; font-size: 0.7rem; font-weight: 600; padding: 0.35rem 0.8rem; border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer; background: var(--bg); color: var(--text); transition: all 0.12s; }
        .training-add-ex:hover { background: var(--hover-bg); }
        .training-save-btn { background: var(--accent-bg); color: var(--accent-text); }
        .training-save-btn:hover { opacity: 0.85; }
        .training-routines-list { display: flex; flex-direction: column; gap: 0.35rem; max-height: 350px; overflow-y: auto; }
        .routine-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); }
        .routine-card-name { flex: 1; font-weight: 700; font-size: 0.75rem; }
        .routine-card-exs { font-size: 0.55rem; color: var(--dim-text); }
        .routine-card-start { font-family: inherit; font-size: 0.65rem; font-weight: 700; padding: 0.3rem 0.7rem; border: 1px solid var(--gray-border); border-radius: 8px; cursor: pointer; background: var(--bg); color: var(--text); transition: all 0.12s; white-space: nowrap; }
        .routine-card-start:hover { border-color: #2ecc71; color: #2ecc71; }

        /* Twoje ćwiczenia */
        .training-exercises-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 60vh; overflow-y: auto; padding-right: 4px; }
        .ex-card { border: 1.5px solid var(--border); border-radius: 10px; background: var(--bg); overflow: hidden; flex-shrink: 0; }
        .training-best-sets-wrap { max-height: 180px; overflow-y: auto; }
        .training-fullscreen .training-best-sets-wrap { max-height: none; overflow-y: visible; }
        .training-history-wrap { max-height: 55vh; overflow-y: auto; }
        .training-fullscreen .training-history-wrap { max-height: none; overflow-y: visible; }
        .training-fullscreen .training-exercises-list { max-height: none; overflow-y: visible; }
        .training-fullscreen .training-routines-list { max-height: none; overflow-y: visible; }
        .ex-card-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; cursor: pointer; transition: background 0.12s; flex-wrap: wrap; }
        .ex-card-header:hover { background: var(--gray-light); }
        .ex-card-name { flex: 1; min-width: 0; font-weight: 700; font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .ex-card-count { font-size: 0.6rem; color: var(--dim-text); white-space: nowrap; }
        .ex-card-last { font-size: 0.55rem; color: var(--dim-text); white-space: nowrap; }
        .ex-card-best { font-size: 0.6rem; font-weight: 700; color: var(--accent-bg); white-space: nowrap; }
        .ex-card-toggle { color: var(--dim-text); font-size: 0.6rem; flex-shrink: 0; }
        .ex-card.ex-card-open .ex-card-header { background: var(--gray-light); border-bottom: 1px solid var(--gray-border); }
        .ex-card-chart { padding: 0.4rem 0.4rem 0.2rem 0.4rem; }
        @media (max-width: 768px) {
            /* Na mobile: nazwa ćwiczenia sama w wierszu (baner), a liczba wykonań/ostatnio/rekord poniżej */
            .ex-card-name { flex-basis: 100%; white-space: normal; }
        }

        /* Routine editor */
        .ex-editor-row { display: flex; gap: 0.25rem; align-items: center; flex-wrap: wrap; padding: 0.4rem 0.5rem; border: 1px solid var(--gray-border); border-radius: 8px; background: var(--gray-light); margin-bottom: 0.3rem; }
        .ex-editor-row input, .ex-editor-row select { font-size: 0.65rem; padding: 0.2rem 0.3rem; border: 1.5px solid var(--border); border-radius: 4px; background: var(--input-bg); color: var(--text); outline: none; }
        .ex-editor-row .ex-name { flex: 1; min-width: 150px; }
        .ex-editor-row .ex-num { width: 42px; text-align: center; -moz-appearance:textfield; }
        .ex-editor-row .ex-num::-webkit-inner-spin-button, .ex-editor-row .ex-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .ex-editor-row .ex-del { background: none; border: none; color: #c00; cursor: pointer; font-size: 0.7rem; padding: 0.1rem 0.3rem; }
        .ex-lbl { font-size: 0.5rem; color: var(--dim-text); text-transform: uppercase; letter-spacing: 0.3px; }

        /* WORKOUT */
        .wo-sticky-top { position: sticky; top: -1rem; z-index: 20; background: var(--bg); margin-top: -1rem; padding-top: calc(1rem + 2px); border-bottom: 2px solid black; margin-bottom: 10px; }
        .wo-header { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0.6rem; border: 2px solid var(--border); border-radius: 12px; margin-top: 1.2rem; margin-bottom: 0.5rem; background: transparent; width: 95%; margin-left: auto; margin-right: auto; gap: 0.4rem; }
        /* Na mobile D._placeTrainingCornerBtns (training.js) przenosi tu przyciski pełny
           ekran/zamknij z rogu modala — muszą przestać być position:absolute, żeby wpasowały
           się w ten sam wiersz co Anuluj/nazwa/serie-kg/czas, zamiast się z nim nakładać. */
        .wo-header .training-close-corner {
            position: static;
            top: auto; right: auto;
            flex-shrink: 0;
        }
        .wo-header .training-fullscreen-btn { display: block; }
        .wo-cancel-top { background: none; border: none; color: var(--dim-text); cursor: pointer; font-size: 0.8rem; padding: 0.2rem 0.35rem; border-radius: 4px; line-height: 1; }
        .wo-cancel-top:hover { color: #e74c3c; background: rgba(231,76,60,0.1); }
        .wo-timer { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
        .wo-stats { font-size: 0.95rem; font-weight: 700; color: var(--dim-text); font-variant-numeric: tabular-nums; text-align: center; white-space: nowrap; }
        .wo-stats-kg { display: inline-block; color: var(--text); transition: color 0.15s ease, transform 0.15s ease; }
        .wo-stats-kg.wo-stats-kg-bump { color: #2ecc71; transform: scale(1.15); }
        .wo-rest-banner { text-align: center; padding: 0.4rem; font-size: 0.8rem; font-weight: 700; background: #3498db; color: #fff; border-radius: 8px; margin-bottom: 0.5rem; border: 2px solid #2980b9; animation: woPulse 1s ease-in-out infinite; width: 95%; margin-left: auto; margin-right: auto; }
        .wo-rest-input { -moz-appearance: textfield; }
        .wo-rest-input::-webkit-inner-spin-button,
        .wo-rest-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .wo-rest-btn { background: var(--border); color: var(--accent-text); border: 1px solid #fff; border-radius: 50%; width: 22px; height: 22px; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; cursor: pointer; padding: 0; margin: 0 0 0 0.3rem; flex-shrink: 0; }
        .wo-rest-skip-btn { font-size: 0.65rem; }
        .wo-mute-btn { background: none; border: none; cursor: pointer; font-size: 0.7rem; padding: 0; margin-left: 0.3rem; vertical-align: middle; }
        @keyframes woPulse { 0%,100%{opacity:1;} 50%{opacity:0.85;} }
        .wo-exercises { display: flex; flex-direction: column; gap: 0.5rem; }
        .wo-exercise { border: 1.5px solid var(--gray-border); border-radius: 10px; padding: 0.4rem 0.5rem; background: var(--bg); transition: all 0.2s; position: relative; }
        .wo-exercise.wo-ex-current { border-color: var(--accent-bg); border-width: 2.5px; background: var(--gray-light); }
        .wo-exercise.wo-ex-done { opacity: 0.6; border-color: #2ecc71; }
        .wo-ex-header { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; background: #000; color: #fff; padding: 0.3rem 0.5rem; border-radius: 8px 8px 0 0; margin: -0.4rem -0.5rem 0.3rem -0.5rem; }
        .wo-ex-progress { font-weight: 800; font-size: 0.8rem; min-width: 32px; color: #fff; }
        .wo-ex-name { font-weight: 700; font-size: 0.75rem; flex: 1; color: #fff; }
        .wo-ex-toggle { color: #fff; font-size: 0.6rem; }
        .wo-ex-del { background: none; border: none; color: #ccc; cursor: pointer; font-size: 0.55rem; padding: 0.1rem 0.3rem; opacity: 0; transition: opacity 0.12s; }
        .wo-ex-header:hover .wo-ex-del { opacity: 1; }
        .wo-ex-del:hover { color: #e74c3c; }

        /* Tryb coffee: nagłówek ćwiczenia brązowy zamiast czarnego */
        body.coffee .wo-ex-header { background: var(--accent-bg); }
        body.coffee .wo-ex-progress,
        body.coffee .wo-ex-name,
        body.coffee .wo-ex-toggle { color: var(--accent-text); }
        body.coffee .wo-add-set,
        body.coffee .wo-add-ex {
            background: var(--accent-bg);
            color: var(--accent-text);
            border-color: var(--accent-bg);
        }

        /* Drag handle dla ćwiczeń */
        .wo-drag-handle {
            color: #ccc; cursor: grab; opacity: 0; width: 18px; text-align: center;
            font-size: 0.7rem; flex-shrink: 0; user-select: none; transition: opacity 0.15s;
        }
        .wo-exercise:hover .wo-drag-handle { opacity: 1; }
        .wo-drag-handle:active { cursor: grabbing; }
        .wo-exercise.wo-sortable-chosen { opacity: 0.5; }
        .wo-exercise.wo-sortable-ghost {
            background: var(--accent-bg); opacity: 0.2; border-radius: 10px; border-style: dashed;
        }
        body.dark .wo-drag-handle { color: #555; }
        body.midnight .wo-drag-handle { color: #555; }
        body.dark .wo-exercise:hover .wo-drag-handle { color: #888; }
        body.midnight .wo-exercise:hover .wo-drag-handle { color: #888; }
        body.dark .wo-exercise.wo-sortable-ghost { border-color: #555; }
        body.midnight .wo-exercise.wo-sortable-ghost { border-color: #555; }

        #routineEditorExercises { display: flex; flex-direction: column; gap: 0.5rem; }

        /* 2-column exercise editor on desktop */
        @media (min-width: 650px) {
            #routineEditorExercises { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
            #routineEditorExercises .ex-editor-row { margin-bottom: 0; }
            .wo-exercises { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
            .training-box { max-width: 650px; max-height: 90vh; }
            #epList { max-height: 35vh !important; }
            #trainingWorkoutView .wo-ex-toggle { display: none; }
        }
        .wo-sets { margin-top: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; }
        .wo-set { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.35rem; border-radius: 6px; background: var(--input-bg); }
        .wo-set.wo-set-done { background: rgba(46,204,113,0.15); }
        .wo-set-num { font-weight: 700; font-size: 0.7rem; min-width: 18px; color: var(--dim-text); }
        .wo-set-reps, .wo-set-weight { width: 42px; font-size: 0.65rem; padding: 0.15rem 0.25rem; border: 1.5px solid var(--border); border-radius: 4px; text-align: center; background: var(--bg); color: var(--text); outline: none; -moz-appearance:textfield; }
        .wo-set-reps::-webkit-inner-spin-button, .wo-set-reps::-webkit-outer-spin-button,
        .wo-set-weight::-webkit-inner-spin-button, .wo-set-weight::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        #routineEditorExercises input[type="number"] { -moz-appearance:textfield; }
        #routineEditorExercises input[type="number"]::-webkit-inner-spin-button,
        #routineEditorExercises input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .wo-set-x { font-size: 0.6rem; color: var(--dim-text); }
        .wo-set-kg { font-size: 0.55rem; color: var(--dim-text); }
        .wo-set-prev { font-size: 0.5rem; color: #aaa; margin-left: 0.4rem; flex: 1; text-align: right; }
        .wo-set-prev.wo-set-up { color: #2ecc71; }
        .wo-set-prev.wo-set-down { color: #e67e22; }
        body.dark .wo-set-prev { color: #666; }
        body.midnight .wo-set-prev { color: #666; }
        body.dark .wo-set-prev.wo-set-up { color: #27ae60; }
        body.midnight .wo-set-prev.wo-set-up { color: #27ae60; }
        body.dark .wo-set-prev.wo-set-down { color: #d35400; }
        body.midnight .wo-set-prev.wo-set-down { color: #d35400; }
        /* Znacznik ↑PR/↓PR/=PR przy serii, obok wo-set-prev (patrz D._prTrendHtml w
           training.js) — ta sama seria z poprzedniej sesji co wo-set-prev, ale inna metryka:
           tu szacowany 1RM (Epley) zamiast surowej objętości (powt.×kg), więc obie strzałki
           mogą czasem wskazywać różny kierunek. */
        .wo-pr-trend { font-size: 0.5rem; margin-left: 0.25rem; flex-shrink: 0; }
        .wo-pr-trend-up { color: #2ecc71; font-weight: 700; }
        .wo-pr-trend-down { color: #e74c3c; }
        .wo-pr-trend-same { color: var(--dim-text); }
        .wo-set-done-btn { font-family: inherit; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border: 1.5px solid var(--gray-border); border-radius: 6px; cursor: pointer; background: var(--bg); color: var(--dim-text); transition: all 0.1s; }
        .wo-set-done-btn:hover { border-color: #2ecc71; color: #2ecc71; transform: scale(1.05); }
        .wo-set-done-btn:active { transform: scale(0.95); }
        .wo-set-undo-btn { font-family: inherit; font-size: 0.7rem; font-weight: 700; padding: 0.15rem 0.5rem; border: 1.5px solid #27ae60; border-radius: 6px; cursor: pointer; background: #2ecc71; color: #fff; transition: all 0.1s; }
        .wo-set-undo-btn:hover { background: #27ae60; transform: scale(1.05); }
        .wo-set-check { color: #2ecc71; font-weight: 900; font-size: 0.8rem; }
        .wo-set-del { background: none; border: none; color: #ccc; cursor: pointer; font-size: 0.5rem; padding: 0.1rem 0.2rem; margin-left: auto; opacity: 0; transition: opacity 0.12s; }
        .wo-set:hover .wo-set-del { opacity: 1; }
        .wo-set-del:hover { color: #e74c3c; }
        .wo-add-set { font-family: inherit; font-size: 0.6rem; font-weight: 600; padding: 0.2rem 0.5rem; border: 1.5px solid #000; border-radius: 6px; cursor: pointer; background: #000; color: #fff; margin-left: auto; flex-shrink: 0; }
        .wo-add-set:hover { opacity: 0.85; }
        .wo-rest-row { display: flex; align-items: center; gap: 0.3rem; margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px dashed var(--gray-border); }
        .wo-pr-badge { position: absolute; top: -6px; right: -4px; font-size: 0.5rem; font-weight: 800; background: #f1c40f; color: #333; padding: 0.1rem 0.35rem; border-radius: 8px; border: 1px solid #e0b000; }
        .wo-add-ex { font-family: inherit; font-size: 0.7rem; font-weight: 600; padding: 0.35rem; border: 1.5px solid #000; border-radius: 8px; cursor: pointer; background: #000; color: #fff; margin-top: 0.4rem; display: block; width: 100%; }
        .wo-add-ex:hover { opacity: 0.85; }
        .wo-finish-btn { display: block; width: 100%; margin-top: 0.5rem; font-family: inherit; font-size: 0.8rem; font-weight: 700; padding: 0.5rem; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; background: var(--accent-bg); color: var(--accent-text); }
        .wo-finish-btn:hover { opacity: 0.85; }
        .workout-finished-summary { padding: 0.6rem; border: 1.5px solid var(--gray-border); border-radius: 10px; font-size: 0.7rem; line-height: 1.5; }
        .workout-finished-summary h3 { margin-bottom: 0.3rem; }
        .wo-summary-ex { padding: 0.2rem 0; border-bottom: 1px solid var(--gray-border); }
        .wo-summary-ex:last-child { border-bottom: none; }
        .workout-compare.up { color: #2ecc71; font-weight: 700; }
        .workout-compare.down { color: #e74c3c; font-weight: 700; }

        /* Stats */
        .stats-monthly-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin-bottom: 0.5rem; }
        .stats-card { border: 1.5px solid var(--gray-border); border-radius: 10px; padding: 0.5rem 0.4rem; text-align: center; background: var(--bg); aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
        .stats-card-val { font-size: 1.2rem; font-weight: 800; }
        #tsGitHubGrid { display: flex; flex-direction: column; align-items: center; }
        #tyYearGrids { display: flex; flex-direction: column; align-items: center; }
        .ts-gh-cell { aspect-ratio: 1; border-radius: 3px; width: 14px; height: 14px; }
        .ts-gh-done { background: var(--accent-bg); }
        .ts-gh-empty { background: #e0e0e0; }
        body.dark .ts-gh-empty { background: #3a3a3a; }
        body.midnight .ts-gh-empty { background: #3a3a3a; }
        .stats-card-label { font-size: 0.55rem; color: var(--dim-text); margin-top: 0.1rem; }
        .stats-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
        .stats-nav-title { font-weight: 700; font-size: 0.85rem; }

        body.dark .ex-editor-row { background: var(--gray-light); }
        body.midnight .ex-editor-row { background: var(--gray-light); }
        body.dark .routine-card { background: var(--input-bg); }
        body.midnight .routine-card { background: var(--input-bg); }
        body.dark .wo-exercise { background: var(--input-bg); }
        body.midnight .wo-exercise { background: var(--input-bg); }
        .history-session { }
        .history-detail { }
        body.dark .wo-exercise.wo-ex-current { background: var(--gray-light); }
        body.midnight .wo-exercise.wo-ex-current { background: var(--gray-light); }

        /* ============================================================
           TRENING — płaski, nowoczesny redesign (na życzenie użytkownika):
           ostre rogi (bez zaokrągleń), kafelki KPI na górze, płaskie tabele.
           Zakres: modal #trainingOverlay + edytor rutyny #routineEditorOverlay.
           Wysoka specyficzność (#trainingOverlay …) nadpisuje bazowe reguły
           treningu wyżej; border-radius:0 !important bije też style inline
           (np. karty i szczegóły w Historii) bez potrzeby ruszania JS.
           ============================================================ */
        #trainingOverlay .training-box,
        #trainingOverlay .training-box *,
        #routineEditorOverlay .modal-box,
        #routineEditorOverlay .modal-box * { border-radius: 0 !important; }

        /* Zakładki — płaskie, ostre kafelki; aktywna wypełniona akcentem */
        #trainingOverlay .training-tabs { gap: 0.25rem; border-bottom: 2px solid var(--border); padding-bottom: 0.45rem; }
        #trainingOverlay .training-tab { border: 1px solid var(--gray-border); background: var(--bg); color: var(--dim-text); font-weight: 600; }
        #trainingOverlay .training-tab.active { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent-bg); }
        #trainingOverlay .training-tab:hover:not(.active) { background: var(--gray-light); color: var(--text); border-color: var(--border); }

        /* Kafelki KPI — czyste, z górnym akcentem, duża liczba tabelaryczna */
        #trainingOverlay .stats-card { border: 1px solid var(--gray-border); border-top: 3px solid var(--accent-bg); background: var(--bg); }
        #trainingOverlay .stats-card-val { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
        #trainingOverlay .stats-card-label { text-transform: uppercase; letter-spacing: 0.6px; font-size: 0.48rem; font-weight: 700; color: var(--dim-text); }
        /* Wiersz podsumowania (kafelki na górze Historii) — niższe niż kwadratowe */
        #trainingOverlay .tr-summary { margin-bottom: 0.6rem; }
        #trainingOverlay .tr-summary .stats-card { aspect-ratio: auto; padding: 0.55rem 0.4rem; gap: 0.1rem; }

        /* Tabele — płaskie, czytelne, z grubą ramką dookoła (także po bokach) */
        #trainingOverlay .training-table { border: 2px solid var(--border); font-size: 0.62rem; }
        #trainingOverlay .training-table th { background: var(--gray-light); border-bottom: 2px solid var(--border); color: var(--dim-text); font-weight: 700; padding: 0.3rem 0.35rem; }
        #trainingOverlay .training-table td { border-bottom: 1px solid var(--gray-border); padding: 0.3rem 0.35rem; }
        #trainingOverlay .training-table tr:nth-child(even) td { background: var(--gray-light); }
        #trainingOverlay .training-table .bold { font-weight: 800; }

        /* Karty (rutyny, ćwiczenia, historia) — płaskie z wyraźnym hoverem */
        #trainingOverlay .routine-card,
        #trainingOverlay .ex-card { border: 1px solid var(--gray-border); background: var(--bg); transition: background 0.12s, border-color 0.12s; }
        #trainingOverlay .routine-card:hover { border-color: var(--border); background: var(--gray-light); }
        #trainingOverlay .ex-card:hover { border-color: var(--border); }
        #trainingOverlay .routine-card-start { border-color: var(--border); }
        #trainingOverlay .routine-card-start:hover { background: #2ecc71; color: #fff; border-color: #2ecc71; }

        /* Nawigacja miesiąc/rok w statystykach + nagłówek treningu */
        #trainingOverlay .stats-nav { border-bottom: 1px solid var(--gray-border); padding-bottom: 0.3rem; margin-bottom: 0.5rem; }
        #trainingOverlay .stats-nav-title { font-weight: 800; letter-spacing: 0.3px; }
        #trainingOverlay .wo-header { border-width: 2px; }

        @media (max-width: 500px) {
            .training-box { padding: 0.5rem; }
            .training-fullscreen-btn { display: block; }
            .wo-stats { font-size: 0.7rem; }
            /* Odstęp robimy przez padding-top (wypełniony tłem --bg), a nie przez top,
               żeby pod spodem nie przebijała się przewijana treść w pustej przestrzeni */
            .wo-sticky-top { top: -0.5rem; margin-top: -0.5rem; padding-top: 0.4rem; }
            .training-fullscreen .wo-sticky-top { padding-top: 0.8rem; }
            .training-tab { font-size: 0.6rem; padding: 0.25rem 0.5rem; }
            .stats-monthly-grid { grid-template-columns: repeat(2, 1fr); }
            #tyYearGrids > div { grid-template-columns: repeat(2, 1fr) !important; }
            /* tsGrid/tyGrid (statystyki treningu miesięczne/roczne) mają na desktopie stałą
               szerokość 7rem na kartę (patrz #tsGrid .stats-card wyżej) — 4 takie karty w rzędzie
               wykraczają poza modal na wąskim mobile. Elastyczna szerokość zamiast stałej. */
            #tsGrid .stats-card, #tyGrid .stats-card { width: auto; flex: 1 1 0; }
            #tsGrid .stats-card-val, #tyGrid .stats-card-val { font-size: 1.1rem; }
            .stats-card-val { font-size: 1.1rem; }
            .wo-header { padding: 0.3rem 0.4rem; margin-top: 0; margin-bottom: 0.3rem; font-size: 0.7rem; }
            .wo-timer { font-size: 0.8rem; }
            .wo-cancel-top { font-size: 0.7rem; padding: 0.15rem 0.25rem; }
            .wo-rest-banner { padding: 0.25rem; font-size: 0.65rem; margin-bottom: 0.3rem; }
            .wo-rest-controls { display: block; margin-top: 0.25rem; }
            .wo-rest-btn { width: 16px; height: 16px; font-size: 0.55rem; margin-left: 0.2rem; }
            .wo-rest-skip-btn { font-size: 0.45rem; }
            .wo-mute-btn { font-size: 0.6rem; margin-left: 0.2rem; }
            .wo-set-del { opacity: 1; }
            .wo-ex-del { opacity: 1; }
        }

        @media (display-mode: standalone) {
            body {
                padding: 0.5rem 1rem;
                padding-top: max(0.5rem, env(safe-area-inset-top));
                padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
            }
            .expense-cat-name { width: auto; min-width: 50px; }
            .expense-amount { width: 48px; font-size: 0.55rem; }
            .expense-cat { width: 14px; }
            .expense-edit { margin-left: auto; }
        }

        @media (max-width: 400px) {
            body {
                padding: 0.5rem;
            }
            .dashboard {
                gap: 0.8rem;
            }
            .week-grid {
                gap: 0.25rem;
            }
            .day-card {
                padding: 0.2rem 0.1rem;
                border-radius: 10px;
                gap: 0.1rem;
            }
            .day-date {
                font-size: 0.75rem;
            }
            .day-name {
                font-size: 0.5rem;
            }
            .weather-icon {
                font-size: 0.65rem;
            }
            .sidebar {
                grid-template-columns: 1fr;
                gap: 0.6rem;
            }
            .weather-widget,
            .quote-box,
            .habits-widget {
                grid-column: 1;
            }
            .modal-textarea {
                min-height: 200px !important;
            }
            .add-task-form {
                flex-direction: column;
                gap: 0.4rem;
            }
            .add-task-btn {
                width: 100%;
                text-align: center;
            }
        }

/* ==========================================================================
   ANIMOWANE LOGO EKRANU LOGOWANIA (brand-logo)
   Buduje mini-dashboard: Tasks -> Habits -> Trackers -> Expenses,
   a nastepnie zbiega sie i morfuje w wordmark "anotherdashboard.com".
   Sterowane przez js/brand-logo.js (dodaje klasy .on / .bl-collapse / .bl-fade).
   Motywoswiadome (uzywa zmiennych --*), z fallbackiem statycznym (.bl-static)
   i obsluga prefers-reduced-motion.
   ========================================================================== */
.brand-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.3rem;
    min-height: 180px;
}
.bl-stage {
    position: relative;
    width: 296px;
    height: 172px;
    max-width: 100%;
}
.bl-grid {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.bl-grid.bl-collapse {
    opacity: 0;
    transform: scale(0.8) translateY(-6px);
}

/* --- Karta widgetu --- */
.bl-card {
    border: 1.5px solid var(--gray-border);
    border-radius: 10px;
    background: var(--bg);
    padding: 8px 9px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(9px) scale(0.95);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bl-card.on {
    opacity: 1;
    transform: none;
}
.bl-card-head {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 7px;
}
.bl-dot {
    width: 7px;
    height: 7px;
    border-radius: 2px;
    background: var(--accent-bg);
}
.bl-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--gray);
}

/* --- Tasks --- */
.bl-rows {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: center;
}
.bl-row {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateX(-6px);
}
.bl-card.on .bl-row {
    animation: blRowIn 0.3s ease forwards;
}
.bl-card.on .bl-row:nth-child(1) { animation-delay: 0.12s; }
.bl-card.on .bl-row:nth-child(2) { animation-delay: 0.24s; }
.bl-card.on .bl-row:nth-child(3) { animation-delay: 0.36s; }
@keyframes blRowIn { to { opacity: 1; transform: none; } }

.bl-check {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--gray);
    border-radius: 3px;
    display: grid;
    place-items: center;
    background: transparent;
}
.bl-check svg { width: 9px; height: 9px; display: block; }
.bl-check svg path {
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
}
.bl-card.on .bl-check { animation: blCheckBox 0.25s ease forwards; }
.bl-card.on .bl-check svg path { animation: blDraw 0.3s ease forwards; }
.bl-card.on .bl-row:nth-child(1) .bl-check { animation-delay: 0.62s; }
.bl-card.on .bl-row:nth-child(2) .bl-check { animation-delay: 0.86s; }
.bl-card.on .bl-row:nth-child(3) .bl-check { animation-delay: 1.10s; }
.bl-card.on .bl-row:nth-child(1) .bl-check svg path { animation-delay: 0.68s; }
.bl-card.on .bl-row:nth-child(2) .bl-check svg path { animation-delay: 0.92s; }
.bl-card.on .bl-row:nth-child(3) .bl-check svg path { animation-delay: 1.16s; }
@keyframes blCheckBox { to { background: var(--accent-bg); border-color: var(--accent-bg); } }
@keyframes blDraw { to { stroke-dashoffset: 0; } }

.bl-bar {
    position: relative;
    height: 6px;
    flex: 1;
    border-radius: 3px;
    background: var(--gray-border);
}
.bl-row:nth-child(1) .bl-bar { max-width: 82%; }
.bl-row:nth-child(2) .bl-bar { max-width: 62%; }
.bl-row:nth-child(3) .bl-bar { max-width: 74%; }
.bl-bar::after {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 100%;
    height: 1.5px;
    background: var(--gray);
    transform: scaleX(0);
    transform-origin: left;
}
.bl-card.on .bl-bar { animation: blDim 0.25s ease forwards; }
.bl-card.on .bl-bar::after { animation: blStrike 0.28s ease forwards; }
.bl-card.on .bl-row:nth-child(1) .bl-bar,
.bl-card.on .bl-row:nth-child(1) .bl-bar::after { animation-delay: 0.66s; }
.bl-card.on .bl-row:nth-child(2) .bl-bar,
.bl-card.on .bl-row:nth-child(2) .bl-bar::after { animation-delay: 0.90s; }
.bl-card.on .bl-row:nth-child(3) .bl-bar,
.bl-card.on .bl-row:nth-child(3) .bl-bar::after { animation-delay: 1.14s; }
@keyframes blDim { to { opacity: 0.45; } }
@keyframes blStrike { to { transform: scaleX(1); } }

/* --- Habits (7 kwadratów w rzędzie, nad nimi dni tygodnia) --- */
.bl-week {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 3px;
    flex: 1;
}
.bl-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
}
.bl-dname {
    font-size: 0.42rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    line-height: 1;
    color: var(--gray);
}
.bl-hd {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1.5px solid var(--gray-border);
    background: transparent;
    display: grid;
    place-items: center;
}
.bl-hd svg { width: 10px; height: 10px; display: block; }
.bl-hd svg path {
    fill: none;
    stroke: var(--accent-text);
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 16;
    stroke-dashoffset: 16;
}
.bl-card.on .bl-hd--fill { animation: blPop 0.4s cubic-bezier(0.2, 1.5, 0.4, 1) forwards; }
.bl-card.on .bl-hd--fill svg path { animation: blDraw 0.28s ease forwards; }
.bl-week .bl-day:nth-child(1) .bl-hd { animation-delay: 0.20s; }
.bl-week .bl-day:nth-child(2) .bl-hd { animation-delay: 0.34s; }
.bl-week .bl-day:nth-child(4) .bl-hd { animation-delay: 0.48s; }
.bl-week .bl-day:nth-child(5) .bl-hd { animation-delay: 0.60s; }
.bl-week .bl-day:nth-child(7) .bl-hd { animation-delay: 0.74s; }
/* ptaszek rysuje się chwilę po wypełnieniu kwadratu */
.bl-week .bl-day:nth-child(1) .bl-hd svg path { animation-delay: 0.34s; }
.bl-week .bl-day:nth-child(2) .bl-hd svg path { animation-delay: 0.48s; }
.bl-week .bl-day:nth-child(4) .bl-hd svg path { animation-delay: 0.62s; }
.bl-week .bl-day:nth-child(5) .bl-hd svg path { animation-delay: 0.74s; }
.bl-week .bl-day:nth-child(7) .bl-hd svg path { animation-delay: 0.88s; }
@keyframes blPop {
    0%   { transform: scale(0.4); background: transparent; border-color: var(--gray-border); }
    60%  { transform: scale(1.18); }
    100% { transform: scale(1); background: var(--accent-bg); border-color: var(--accent-bg); }
}

/* --- Trackers (licznik z - / +, jak .counter-card w aplikacji) --- */
.bl-counter {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
}
.bl-cbtn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1;
    display: grid;
    place-items: center;
    user-select: none;
    transition: transform 0.12s ease, background 0.12s ease,
                color 0.12s ease, border-color 0.12s ease;
}
.bl-cbtn.press {
    transform: scale(0.86);
    background: var(--accent-bg);
    color: var(--accent-text);
    border-color: var(--accent-bg);
}
.bl-cval {
    min-width: 22px;
    text-align: center;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    user-select: none;
    transition: transform 0.14s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.bl-cval.bump { transform: scale(1.28); }

/* --- Expenses (donut + suma) --- */
.bl-exp {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}
.bl-donut { width: 44px; height: 44px; flex: 0 0 auto; }
.bl-donut .bl-track { stroke: var(--gray-border); }
.bl-donut .bl-ring {
    stroke: var(--accent-bg);
    stroke-linecap: round;
    stroke-dashoffset: 100;
}
.bl-card.on .bl-donut .bl-ring { animation: blRing 0.9s ease forwards; animation-delay: 0.15s; }
@keyframes blRing { to { stroke-dashoffset: 32; } }
.bl-total {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* --- Wordmark --- */
.bl-wordmark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}
.bl-wordmark.on { opacity: 1; }
.bl-wm-main, .bl-wm-tld {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    white-space: nowrap;
}
.bl-wm-main { color: var(--text); }
.bl-wm-tld { color: var(--accent-bg); }
.bl-wordmark span {
    display: inline-block;
    opacity: 0;
    transform: translateY(11px);
}
.bl-wordmark.on span { animation: blLetter 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes blLetter { to { opacity: 1; transform: none; } }

/* Wygaszenie calej sceny na koncu cyklu (reset przed petla) */
.bl-stage.bl-fade { opacity: 0; transition: opacity 0.5s ease; }

/* --- Fallback statyczny: brak JS lub prefers-reduced-motion --- */
.bl-stage.bl-static .bl-grid { display: none; }
.bl-stage.bl-static .bl-wordmark { opacity: 1; }
.bl-stage.bl-static .bl-wordmark span { opacity: 1; transform: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
    .bl-card, .bl-row, .bl-hd, .bl-hd svg path, .bl-bar, .bl-bar::after,
    .bl-check, .bl-check svg path, .bl-donut .bl-ring,
    .bl-cbtn, .bl-cval, .bl-wordmark span, .bl-grid {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 360px) {
    .bl-stage { transform: scale(0.86); }
    .brand-logo { min-height: 158px; }
}

/* === LIMITY DARMOWEGO PROGU (Free) — baner + zablokowane elementy ponad limit === */
.limit-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    background: var(--hover-bg);
    border: 1px solid var(--gray-border);
    border-left: 3px solid var(--accent-bg);
    border-radius: 8px;
    padding: 0.45rem 0.6rem;
    margin-bottom: 0.5rem;
    font-size: 0.62rem;
    line-height: 1.35;
    color: var(--text);
}
.limit-notice .limit-notice-ico { flex: 0 0 auto; }
.limit-notice .limit-pro { font-weight: 800; }

/* Elementy ponad limit — "złapane w ramkę" i wyszarzone; interakcja zablokowana w JS. */
.habit-row-locked,
.counter-card-locked,
.addiction-item-locked {
    opacity: 0.5;
    filter: grayscale(100%);
    border: 1.5px dashed var(--gray) !important;
    border-radius: 8px;
}
.habit-row-locked .habit-day,
.counter-card-locked .counter-btn,
.addiction-item-locked .addiction-reset-btn {
    cursor: not-allowed;
}