@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* =========================================================
   FUNDAMENT DESIGNU — DIARYCON DESIGN TOKENS
   Wspólny język wizualny dla całej aplikacji.
   ========================================================= */
:root {
    /* --- Kolor: paleta "Gabinet pisarza" --- */
    --bg-paper: #faf7f0;          /* Ciepły papier czerpany */
    --bg-paper-deep: #f3ede1;     /* Papier w cieniu */
    --bg-veil: rgba(250, 247, 240, 0.85);

    --ink-primary: #1a1a1a;       /* Atrament główny */
    --ink-secondary: #4a4a4a;
    --ink-muted: #7a7a7a;          /* Ton drugorzędny */
    --ink-whisper: #b8b2a7;        /* Szept */

    --accent: #8a6a3a;             /* Miedziany, jak starodruk */
    --accent-ink: #c48a4e;         /* Akcent aktywny */

    --divider: rgba(26, 26, 26, 0.08);
    --divider-strong: rgba(26, 26, 26, 0.16);

    /* --- Typografia --- */
    --font-display: 'Lora', Georgia, 'Times New Roman', serif;
    --font-body: 'Segoe UI', 'Inter', Tahoma, sans-serif;
    --font-mono: 'Courier Prime', 'IBM Plex Mono', monospace;

    --fs-mark: 11px;      /* Narożne znaczniki */
    --fs-micro: 12px;     /* Mikrocopy */
    --fs-caption: 13px;
    --fs-body: 15px;
    --fs-lead: 18px;
    --fs-h3: 22px;
    --fs-h2: 34px;
    --fs-h1: 56px;
    --fs-display: 84px;

    --tracking-wide: 0.08em;
    --tracking-wider: 0.18em;
    --tracking-widest: 0.32em;

    /* --- Przestrzeń: skala 4px --- */
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 24px;
    --s-6: 32px;
    --s-7: 48px;
    --s-8: 64px;
    --s-9: 96px;
    --s-10: 128px;

    /* --- Ruch --- */
    --ease-premium: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 180ms;
    --dur-base: 360ms;
    --dur-slow: 720ms;

    /* --- Warstwy --- */
    --z-base: 1;
    --z-raised: 10;
    --z-overlay: 100;
    --z-modal: 1000;
    --z-toast: 9999;
}

.dark-mode {
    --bg-paper: #131315;
    --bg-paper-deep: #0d0d0f;
    --bg-veil: rgba(19, 19, 21, 0.85);

    --ink-primary: #e8e4d8;
    --ink-secondary: #b5b1a6;
    --ink-muted: #7a7670;
    --ink-whisper: #3a3a3c;

    --accent: #c9a276;
    --accent-ink: #d4b181;

    --divider: rgba(232, 228, 216, 0.08);
    --divider-strong: rgba(232, 228, 216, 0.16);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    min-height: 100vh;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background-color: var(--bg-paper);
    color: var(--ink-primary);
}

/* Wymuszenie na Blazorze elastyczności na cały ekran */
#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100%;
    background-color: var(--bg-paper);
}


/* --- GŁÓWNE ŚRODOWISKO --- */
.digital-environment {
    background-image: none !important;
    background-color: var(--bg-paper);
    animation: none !important;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- CYFROWA NAWIGACJA (HUD) --- */
.digital-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--s-7);
    padding: var(--s-6) var(--s-4) var(--s-4);
    z-index: var(--z-raised);
    position: relative;
    border-bottom: 1px solid var(--divider);
}

.nav-link-retro {
    font-family: var(--font-body);
    color: var(--ink-muted);
    text-decoration: none;
    font-size: var(--fs-caption);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    transition: color var(--dur-base) var(--ease-gentle), letter-spacing var(--dur-base) var(--ease-gentle);
    padding-bottom: var(--s-1);
    border-bottom: 1px solid transparent;
    position: relative;
}

    .nav-link-retro:hover {
        color: var(--ink-primary);
    }

    .nav-link-retro.active {
        color: var(--ink-primary);
        font-weight: 500;
    }

    /* Delikatna linia pod aktywnym linkiem — animowana */
    .nav-link-retro.active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -2px;
        width: 20px;
        height: 1px;
        background: var(--accent);
        transform: translateX(-50%);
        animation: navActiveGrow 0.5s var(--ease-premium) forwards;
    }

@keyframes navActiveGrow {
    from { width: 0; }
    to { width: 20px; }
}

/* --- CENTRALNY OBSZAR ROBOCZY --- */
.notebook-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--s-6) var(--s-8);
    box-sizing: border-box;
    background-attachment: local;
}

.ink-text {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 40px;
    color: var(--ink-primary);
}

.paper-input {
    width: 100%;
    flex-grow: 1; /* KLUCZOWE: Pozwala polu naturalnie wypełnić wolną przestrzeń */
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    position: relative;
    z-index: 2;
    padding-top: 5px;
}

/* --- UKŁAD EDYTORA Z MARGINESEM --- */
.editor-layout {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    gap: var(--s-7);
    margin-top: var(--s-3);
    width: 100%;
}

.margin-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: var(--s-4);
    width: 30px;
    flex-shrink: 0;
}

.vertical-mode-btn {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-widest);
    cursor: pointer;
    white-space: nowrap;
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
    transition: clip-path var(--dur-slow) var(--ease-premium), opacity var(--dur-base) var(--ease-gentle), transform var(--dur-base) var(--ease-spring), color var(--dur-base) var(--ease-gentle);
    animation: frontispiceFade var(--dur-slow) var(--ease-premium) forwards;
}

    .vertical-mode-btn:hover {
        color: var(--ink-primary);
        transform: rotate(180deg) translateY(8px);
    }

/* Gdy panel jest OTWARTY - pionowy tekst magicznie się składa (rotuje w prawo i znika) */
.is-open .vertical-mode-btn {
    /* "Znika od dołu" - dolna krawędź wycięcia wędruje do góry */
    clip-path: inset(0% 0% 100% 0%);
    opacity: 0;
    /* Przejście dla ZNIKANIA (szybsze) */
    transition: clip-path 0.4s ease-in, opacity 0.4s ease;
    pointer-events: none;
}

/* 2. Poziomy wachlarz opcji (MENU) - domyślnie ukryty */
.mode-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--s-5);
    background: var(--bg-veil);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: var(--s-4) var(--s-6);
    border-radius: 4px;
    border-left: 1px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: 20;
    white-space: nowrap;
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-10px);
    pointer-events: none;
    transition: all var(--dur-slow) var(--ease-premium);
}

/* Magia otwierania - rozlewanie się panelu w prawo */
.is-open .mode-menu-overlay {
    opacity: 1;
    clip-path: inset(-20% -20% -20% 0); /* Zapas nałożony w każdą stronę, by nie ucinać cienia */
    transform: translateX(10px); /* Leciutko wysuwa się od krawędzi */
    pointer-events: auto;
}

/* 3. Animacja kaskadowa poszczególnych napisów (Staggering) */
.mode-option, .mode-close {
    opacity: 0;
    transform: translateX(-15px);
    transition: all 0.4s ease;
}

/* Gdy się otwiera - napisy wskakują z płynnym przesunięciem */
.is-open .mode-option, .is-open .mode-close {
    opacity: 1;
    transform: translateX(0);
}

/* Ustalamy delikatne opóźnienia, by elementy "wyłaniały się" po kolei z rozwijanej rolety */
.is-open .mode-option:nth-child(1) { transition-delay: 0.10s; }
.is-open .mode-option:nth-child(2) { transition-delay: 0.15s; }
.is-open .mode-option:nth-child(3) { transition-delay: 0.20s; }
.is-open .mode-option:nth-child(4) { transition-delay: 0.25s; }
.is-open .mode-close { transition-delay: 0.30s; }

/* Stylizacja poszczególnych opcji */
.mode-option {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    cursor: pointer;
    letter-spacing: var(--tracking-wide);
    transition: color var(--dur-fast) var(--ease-gentle);
}

.mode-option:hover { color: var(--ink-primary); }
.mode-option.active {
    color: var(--ink-primary);
    font-weight: bold;
    border-bottom: 1px dashed var(--accent);
}

.mode-close {
    font-family: var(--font-body);
    font-size: 22px;
    color: var(--ink-whisper);
    cursor: pointer;
    margin-left: var(--s-3);
    transition: color var(--dur-fast) var(--ease-gentle);
}

.mode-close:hover { color: var(--accent-ink); }

.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 15; /* Pod menu, ale nad resztą strony */
}

/* --- ODPOWIEDŹ AI (MASZYNOPIS, PIECZĄTKI I KARTECZKI) --- */
.typewriter-text {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: var(--fs-body);
    line-height: 1.9;
    letter-spacing: 0.01em;
}

/* Subtelne, "wbite" w papier pieczątki dla ocen — w kolorze akcentowym */
.stamp {
    display: inline-block;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: bold;
    padding: var(--s-1) var(--s-3);
    margin-right: var(--s-4);
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    opacity: 0.88;
}

.saved-stamp {
    display: inline-block;
    padding: var(--s-2) var(--s-4);
    border: 2px double var(--ink-muted);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    transform: rotate(-2deg);
    animation: stampAppear var(--dur-base) var(--ease-spring);
    background: rgba(0,0,0,0.02);
}

    .saved-stamp small {
        display: block;
        font-size: 10px;
        font-weight: normal;
    }

@keyframes stampAppear {
    0% {
        transform: scale(2) rotate(10deg);
        opacity: 0;
    }

    100% {
        transform: scale(1) rotate(-2deg);
        opacity: 1;
    }
}

    .stamp.s-1 {
        transform: rotate(-3deg);
    }

    .stamp.s-2 {
        transform: rotate(2deg);
    }

    .stamp.s-3 {
        transform: rotate(-5deg);
    }

/* Karta zalecenia — elegancki wariant karteczki samoprzylepnej */
.sticky-note {
    background-color: var(--bg-paper-deep);
    padding: var(--s-5) var(--s-6);
    margin-top: var(--s-5);
    width: 100%;
    max-width: 640px;
    font-family: var(--font-body);
    color: var(--ink-secondary);
    font-size: var(--fs-body);
    line-height: 1.7;
    position: relative;
    border-radius: 2px;
    border-left: 3px solid var(--accent);
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

    .sticky-note strong {
        color: var(--ink-primary);
        font-weight: 600;
        letter-spacing: 0.02em;
    }

.writing-container {
    position: relative;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin: var(--s-5) 0;
    width: 100%;
}

/* --- RAMKA WĘŻYK (MAGIA SVG) --- */
.snake-frame {
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    pointer-events: none;
    z-index: 3;
}

    .snake-frame rect {
        fill: none;
        stroke: var(--ink-whisper);
        stroke-width: 1.5px;
        stroke-dasharray: 100;
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 2s cubic-bezier(0.45, 0, 0.15, 1);
    }

/* Gdy tekstarea jest focusowana, ramka "zjada się" — jak pióro zdejmujące kontur */
.writing-container:focus-within .snake-frame rect {
    stroke-dashoffset: -100;
}

.lines-layer {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(transparent, transparent 39px, var(--divider-strong) 39px, var(--divider-strong) 40px);
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--dur-base) var(--ease-gentle);
}

/* Styl dla dolnej sekcji z przyciskiem */
.bottom-action-area {
    margin-top: var(--s-3);
    padding-bottom: var(--s-3);
    min-height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-5);
}

/* Subtelny licznik znaków */
.char-counter {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-whisper);
    letter-spacing: var(--tracking-wide);
    transition: color var(--dur-base) var(--ease-gentle), opacity var(--dur-base) var(--ease-gentle);
    opacity: 0.6;
}

    .char-counter.is-active {
        color: var(--ink-muted);
        opacity: 1;
    }

/* ======================================================================
   PAGE HEADER — WSPÓLNY WZORZEC DLA WSZYSTKICH WIDOKÓW
   Używaj w każdej podstronie dla zachowania spójności editorialnej.
   ====================================================================== */
.page-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-6) 0 var(--s-5);
    margin-bottom: var(--s-7);
    border-bottom: 1px solid var(--divider);
    opacity: 0;
    animation: slideUpFade 0.7s var(--ease-premium) forwards;
}

.page-header-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-widest);
    color: var(--ink-muted);
    text-transform: uppercase;
}

    .page-header-eyebrow::before,
    .page-header-eyebrow::after {
        content: '';
        width: 28px;
        height: 1px;
        background: var(--divider-strong);
    }

.page-header-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: var(--ink-primary);
    letter-spacing: var(--tracking-wide);
    margin: 0;
    text-align: center;
}

.page-header-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
}

/* ======================================================================
   NAGŁÓWEK DZIENNIKA (w edytorze — tryb inline)
   ====================================================================== */
.journal-header {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    padding-top: var(--s-3);
    padding-bottom: var(--s-2);
    opacity: 0;
    animation: slideUpFade 0.7s var(--ease-premium) forwards;
}

.journal-header-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--divider-strong), transparent);
}

.journal-header-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.journal-dayname {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-body);
    color: var(--ink-secondary);
    letter-spacing: 0.02em;
}

.journal-date {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-wider);
}

/* --- ELEGANCKA HISTORIA --- */
.elegant-history {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding-top: var(--s-5);
}

/* Legacy .history-title — teraz alias dla page-header-title */
.history-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    color: var(--ink-primary);
    text-align: center;
    margin-bottom: var(--s-7);
    font-weight: 400;
    letter-spacing: var(--tracking-wide);
}

.history-status {
    text-align: center;
    color: var(--ink-muted);
    font-style: italic;
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    padding: var(--s-8) 0;
}

.history-entry {
    margin-bottom: var(--s-8);
    opacity: 0;
    animation: slideUpFade 0.6s var(--ease-premium) forwards;
}

.entry-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--divider);
    padding-bottom: var(--s-3);
    margin-bottom: var(--s-5);
    font-size: var(--fs-caption);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-wide);
    font-family: var(--font-mono);
    text-transform: uppercase;
}

.entry-content {
    font-size: var(--fs-lead);
    line-height: 1.85;
    color: var(--ink-primary);
    margin-bottom: var(--s-6);
}

/* Karta refleksji AI — minimalistyczna, z akcentowym paskiem */
.entry-ai-insight {
    background-color: var(--bg-paper-deep);
    padding: var(--s-5) var(--s-6);
    border-radius: 2px;
    font-size: var(--fs-body);
    color: var(--ink-secondary);
    line-height: 1.7;
    border-left: 3px solid var(--accent);
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.insight-text {
    margin-bottom: var(--s-4);
}

    .insight-text strong {
        color: var(--ink-primary);
        letter-spacing: 0.02em;
    }

.entry-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}

/* Tagi wyglądające jak delikatne pastylki */
.soft-tag {
    background: transparent;
    border: 1px solid var(--divider-strong);
    padding: var(--s-1) var(--s-3);
    border-radius: 20px;
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    transition: color var(--dur-fast) var(--ease-gentle), border-color var(--dur-fast) var(--ease-gentle);
}

    .soft-tag:hover {
        color: var(--accent);
        border-color: var(--accent);
    }

/* --- WYSZUKIWARKA W PAMIĘTNIKU --- */
.search-container {
    margin-bottom: var(--s-7);
    position: relative;
}

.search-input {
    width: 100%;
    padding: var(--s-4) var(--s-6);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--ink-primary);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--divider-strong);
    outline: none;
    transition: border-color var(--dur-base) var(--ease-gentle);
    box-sizing: border-box;
}

    .search-input:focus {
        border-bottom-color: var(--accent);
    }

    .search-input::placeholder {
        color: var(--ink-muted);
        font-style: italic;
        font-family: var(--font-display);
    }

/* --- STRUKTURA OSI CZASU (TIMELINE) --- */
.timeline {
    position: relative;
    padding-left: var(--s-3);
}

/* Wielki, wyblakły tekst dla Roku */
.timeline-year {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 400;
    color: var(--ink-whisper);
    margin-top: var(--s-7);
    margin-bottom: var(--s-2);
    letter-spacing: -0.02em;
    line-height: 1;
}

.timeline-month {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-style: italic;
    color: var(--ink-secondary);
    margin-bottom: var(--s-6);
    text-transform: capitalize;
    padding-left: var(--s-5);
    border-left: 1px solid var(--divider-strong);
}

.timeline-month-entries {
    padding-left: var(--s-7);
    border-left: 1px solid var(--divider);
    margin-bottom: var(--s-8);
    margin-left: var(--s-5);
}

.timeline-entry {
    position: relative;
}

    .timeline-entry::before {
        content: '';
        position: absolute;
        left: -44.5px;
        top: 6px;
        width: 8px;
        height: 8px;
        background-color: var(--divider-strong);
        border-radius: 50%;
        transition: background-color var(--dur-base) var(--ease-gentle), transform var(--dur-base) var(--ease-spring);
    }

    .timeline-entry:hover::before {
        background-color: var(--accent);
        transform: scale(1.3);
    }

/* --- UKŁAD DWUKOLUMNOWY --- */
.history-layout {
    display: flex;
    gap: var(--s-8);
    align-items: flex-start;
}

.history-main {
    flex-grow: 1;
    min-width: 0;
}

/* --- DRZEWKO CZASU (SIDEBAR) --- */
.history-sidebar {
    flex: 0 0 180px;
}

.tree-sticky {
    position: sticky;
    top: var(--s-7);
    padding-right: var(--s-5);
}

.tree-title {
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    color: var(--ink-muted);
    letter-spacing: var(--tracking-widest);
    margin-bottom: var(--s-5);
    text-transform: uppercase;
}

.tree-nav {
    list-style: none;
    padding-left: var(--s-4);
    margin: 0;
    border-left: 1px solid var(--divider-strong);
}

.tree-year {
    margin-bottom: var(--s-4);
    position: relative;
}

    .tree-year::before, .tree-month::before {
        content: '';
        position: absolute;
        left: -16px;
        top: 10px;
        width: 10px;
        height: 1px;
        background-color: var(--divider-strong);
    }

.tree-months {
    list-style: none;
    padding-left: var(--s-4);
    margin-top: var(--s-2);
}

.tree-month {
    margin-bottom: var(--s-2);
    position: relative;
}

.tree-link {
    text-decoration: none;
    color: var(--ink-muted);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    transition: color var(--dur-fast) var(--ease-gentle);
    display: block;
}

.tree-year > .tree-link {
    font-weight: 600;
    color: var(--ink-secondary);
    font-size: var(--fs-body);
    letter-spacing: 0.02em;
}

.tree-link:hover {
    color: var(--accent);
}

/* --- LUSTRO EMOCJI (STATYSTYKI) --- */
.elegant-stats {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: var(--s-5);
}

/* Filtry na górze */
.stats-filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: var(--s-8);
    gap: var(--s-5);
}

.filter-buttons {
    display: flex;
    gap: var(--s-1);
    background: transparent;
    padding: var(--s-1);
    border-radius: 30px;
    border: 1px solid var(--divider-strong);
}

.filter-btn {
    background: transparent;
    border: none;
    padding: var(--s-2) var(--s-5);
    border-radius: 20px;
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--ink-muted);
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: background var(--dur-base) var(--ease-gentle), color var(--dur-base) var(--ease-gentle);
}

    .filter-btn:hover {
        color: var(--ink-primary);
    }

    .filter-btn.active {
        background: var(--ink-primary);
        color: var(--bg-paper);
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    }

/* Niestandardowy zakres dat */
.custom-date-range {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}

.date-input {
    font-family: var(--font-mono);
    font-size: var(--fs-caption);
    padding: var(--s-2) var(--s-4);
    border: 1px solid var(--divider-strong);
    border-radius: 4px;
    background: transparent;
    color: var(--ink-primary);
    outline: none;
    transition: border-color var(--dur-base) var(--ease-gentle);
}

    .date-input:focus {
        border-color: var(--accent);
    }

.date-separator {
    color: var(--ink-muted);
    font-family: var(--font-mono);
}

/* Profil Psychologiczny — karta centralna */
.psych-state-card {
    text-align: center;
    margin-bottom: var(--s-8);
    padding: var(--s-7) var(--s-6);
    background: var(--bg-paper-deep);
    border-radius: 2px;
    border-left: 3px solid var(--accent);
    box-shadow: 0 4px 24px rgba(0,0,0,0.03);
}

.psych-subtitle {
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-widest);
    color: var(--ink-muted);
    margin-bottom: var(--s-4);
    text-transform: uppercase;
}

.psych-title {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    color: var(--ink-primary);
    margin-bottom: var(--s-4);
    letter-spacing: var(--tracking-wide);
}

.psych-desc {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.8;
    color: var(--ink-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Minimalistyczne wskaźniki */
.metrics-container {
    margin-bottom: var(--s-8);
}

.metric-row {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin-bottom: var(--s-5);
}

.metric-label {
    width: 160px;
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.metric-bar-bg {
    flex-grow: 1;
    height: 2px;
    background: var(--divider);
    border-radius: 1px;
    overflow: hidden;
}

.metric-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 1px;
    transition: width 1.2s var(--ease-premium);
}

.metric-value {
    width: 40px;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: bold;
    color: var(--ink-primary);
    font-size: var(--fs-caption);
}

/* Metryka Dziennika */
.forensics-container {
    border-top: 1px solid var(--divider);
    padding-top: var(--s-7);
    padding-bottom: var(--s-8);
}

.forensics-title {
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    color: var(--ink-muted);
    margin-bottom: var(--s-6);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.forensics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-4);
}

.forensic-item {
    background: transparent;
    padding: var(--s-4) var(--s-5);
    border-radius: 2px;
    border-left: 2px solid var(--divider-strong);
    transition: border-color var(--dur-base) var(--ease-gentle);
}

    .forensic-item:hover {
        border-left-color: var(--accent);
    }

.f-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-muted);
    margin-bottom: var(--s-1);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.f-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--fs-lead);
    color: var(--ink-primary);
    letter-spacing: 0.01em;
}

/* --- PRZYCISK: ZOSTAW WPIS --- */
.submit-entry-btn {
    background: transparent;
    border: none;
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: var(--fs-lead);
    cursor: pointer;
    padding: var(--s-3) 0;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    letter-spacing: var(--tracking-wide);
    transition: color var(--dur-base) var(--ease-gentle);
}

.submit-entry-btn .btn-label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition: transform var(--dur-base) var(--ease-spring), letter-spacing var(--dur-base) var(--ease-gentle);
}

.submit-entry-btn .btn-arrow {
    display: inline-block;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--dur-base) var(--ease-gentle), transform var(--dur-base) var(--ease-spring);
}

.submit-entry-btn:hover:not(:disabled) {
    color: var(--ink-primary);
}

    .submit-entry-btn:hover:not(:disabled) .btn-label {
        transform: translateY(-3px);
        letter-spacing: 2px;
    }

    .submit-entry-btn:hover:not(:disabled) .btn-arrow {
        opacity: 1;
        transform: translateX(0);
    }

.submit-entry-btn:disabled {
    cursor: default;
    opacity: 0.7;
    animation: pulseText 1.5s infinite;
}

/* Elegancka animowana kropka "..." podczas analizy */
.ellipsis-dots {
    display: inline-flex;
    gap: 3px;
    margin-left: 2px;
}

    .ellipsis-dots span {
        animation: dotBlink 1.4s infinite;
        opacity: 0.2;
    }

        .ellipsis-dots span:nth-child(2) { animation-delay: 0.2s; }
        .ellipsis-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dotBlink {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

/* Delikatne pulsowanie podczas analizowania */
@keyframes pulseText {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.4; }
}

/* =========================================================
   KIESZONKOWY PAMIĘTNIK (RESPONSIVE WEB DESIGN)
   Dwa breakpointy:
     — ≤ 768px (tablet/phone)
     — ≤ 480px (small phone, doprecyzowania)
   ========================================================= */

@media (max-width: 768px) {
    /* 1. Globalnie: odzyskujemy przestrzeń */
    .notebook-content {
        padding: var(--s-3) var(--s-4);
    }

    /* 2. Nawigacja — kompaktowy, dyskretny HUD */
    .digital-nav {
        gap: var(--s-5);
        padding: var(--s-4) var(--s-3) var(--s-3);
        flex-wrap: wrap;
    }

    .nav-link-retro {
        font-size: var(--fs-mark);
        letter-spacing: var(--tracking-wide);
        padding-bottom: 2px;
    }

    .theme-toggle {
        font-size: var(--fs-mark);
        letter-spacing: var(--tracking-wide);
        margin-left: auto;
    }

    /* 3. Page header — zmniejszona typografia i paddingi */
    .page-header {
        padding: var(--s-4) 0 var(--s-4);
        margin-bottom: var(--s-5);
        gap: var(--s-2);
    }

    .page-header-title {
        font-size: var(--fs-h3);
    }

    .page-header-eyebrow::before,
    .page-header-eyebrow::after {
        width: 20px;
    }

    /* 4. Edytor (Home) — stackowanie pionowe */
    .editor-layout {
        flex-direction: column;
        gap: var(--s-3);
    }

    .margin-sidebar {
        width: 100%;
        flex-direction: row;
        padding-top: 0;
        align-items: center;
        z-index: 25;
    }

    /* Przycisk AI wraca do normalnego, poziomego odczytu */
    .vertical-mode-btn {
        writing-mode: horizontal-tb;
        transform: none !important;
        padding: var(--s-3) 0;
        animation: none;
    }

        .vertical-mode-btn:hover {
            transform: translateY(-2px) !important;
        }

    .is-open .vertical-mode-btn {
        transform: scale(0.9) !important;
    }

    /* Menu opcji zamienia się w pionową listę opadającą w dół */
    .mode-menu-overlay {
        flex-direction: column;
        align-items: flex-start;
        top: 40px;
        left: 0;
        gap: var(--s-4);
        width: calc(100vw - 40px);
        border-left: none;
        border-top: 1px solid var(--accent);
        padding: var(--s-4) var(--s-5);
        clip-path: inset(0 0 100% 0);
        transform: translateY(-10px);
    }

    .is-open .mode-menu-overlay {
        clip-path: inset(0 0 0 0);
        transform: translateY(0);
    }

    .mode-option, .mode-close {
        transform: none;
    }

    .mode-close {
        align-self: flex-end;
        margin-top: var(--s-3);
    }

    /* 5. Historia — jednoklolumnowy, bez drzewka */
    .history-layout {
        flex-direction: column;
        gap: var(--s-5);
    }

    .history-sidebar {
        display: none;
    }

    .history-header-bar {
        flex-wrap: wrap;
        gap: var(--s-3);
    }

    .timeline-year {
        font-size: 44px;
        margin-top: var(--s-5);
    }

    .timeline-month {
        font-size: var(--fs-lead);
        padding-left: var(--s-4);
    }

    .timeline-month-entries {
        padding-left: var(--s-5);
        margin-left: var(--s-3);
        margin-bottom: var(--s-6);
    }

    .timeline-entry::before {
        left: -28.5px;
    }

    .entry-header {
        flex-wrap: wrap;
        gap: var(--s-2);
        font-size: var(--fs-micro);
    }

    .entry-content {
        font-size: var(--fs-body);
        line-height: 1.75;
    }

    .history-entry {
        margin-bottom: var(--s-7);
    }

    /* Export dropdown — na mobile menu przyczepia się do prawej krawędzi i zajmuje sensowną szerokość */
    .export-menu {
        right: 0;
        min-width: 200px;
        max-width: calc(100vw - 32px);
    }

    /* 6. Statystyki — czytelne metryki */
    .filter-buttons {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 12px;
    }

    .filter-btn {
        padding: var(--s-2) var(--s-4);
    }

    .custom-date-range {
        flex-wrap: wrap;
        justify-content: center;
    }

    .psych-state-card {
        padding: var(--s-5) var(--s-4);
    }

    .psych-title {
        font-size: var(--fs-h3);
    }

    .metric-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--s-2);
        margin-bottom: var(--s-4);
    }

    .metric-label {
        width: 100%;
        font-weight: bold;
    }

    .metric-value {
        width: 100%;
        text-align: left;
    }

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

    /* 7. Welcome canvas — mocniejsze skurczenie na małych ekranach */
    .welcome-canvas {
        padding: var(--s-4);
        min-height: 100svh; /* safe viewport — unikamy paska adresowego iOS */
    }

    .welcome-stage {
        padding: var(--s-5) var(--s-2);
    }

    .welcome-wordmark {
        font-size: clamp(36px, 12vw, 64px);
    }

    .welcome-tagline {
        font-size: var(--fs-body);
        max-width: 100%;
    }

    .welcome-ledger {
        max-width: 100%;
    }

    /* Narożne znaczniki edytorialne — zmniejszamy, by nie dotykały treści */
    .mark-tl, .mark-tr, .mark-bl, .mark-br {
        font-size: 9px;
        letter-spacing: var(--tracking-wide);
    }

    .mark-tl { top: var(--s-4); left: var(--s-4); }
    .mark-tr { top: var(--s-4); right: var(--s-4); }
    .mark-bl { bottom: var(--s-4); left: var(--s-4); }
    .mark-br { bottom: var(--s-4); right: var(--s-4); }

    .ch-tl { top: var(--s-3); left: var(--s-3); }
    .ch-tr { top: var(--s-3); right: var(--s-3); }
    .ch-bl { bottom: var(--s-3); left: var(--s-3); }
    .ch-br { bottom: var(--s-3); right: var(--s-3); }

    /* 8. Auth status corner — żeby nie nakrywał treści edytora.
          Dwa zabiegi:
            (a) treść dostaje padding-bottom rezerwujący miejsce na fixed-corner
            (b) sam corner zyskuje delikatne, blurowane tło — nawet jeśli
                user przewinie pod niego, char-counter pozostaje czytelny */
    .digital-environment {
        padding-bottom: 76px;
    }

    .auth-status-corner {
        bottom: var(--s-3);
        left: var(--s-3);
        font-size: 10px;
        padding: var(--s-2) var(--s-3);
        background: var(--bg-veil);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-left: 2px solid var(--accent);
        border-radius: 2px;
        box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    }

    /* 9. Sticky-note — na mobile bez bocznego paska (pełna szerokość) */
    .sticky-note {
        padding: var(--s-4) var(--s-5);
    }

    /* 10. AI insight divider — krótsze linie na mobile (inaczej tekst ucieka na 2 linijki) */
    .ai-insight-divider {
        gap: var(--s-3);
    }

    .ai-insight-label {
        font-size: 9px;
        letter-spacing: var(--tracking-wider);
    }
}

/* =========================================================
   MAŁE TELEFONY (≤ 480px) — ostateczne szlify
   ========================================================= */
@media (max-width: 480px) {
    .notebook-content {
        padding: var(--s-2) var(--s-3);
    }

    /* Navigacja — gdy 3 linki + theme-toggle nie mieszczą się w jednym rzędzie */
    .digital-nav {
        gap: var(--s-3);
        padding: var(--s-3) var(--s-2) var(--s-2);
    }

    .nav-link-retro {
        font-size: 10px;
    }

    /* Page header — jeszcze bardziej kompaktowe */
    .page-header {
        padding: var(--s-3) 0 var(--s-3);
        margin-bottom: var(--s-4);
    }

    .page-header-title {
        font-size: var(--fs-h4);
    }

    .page-header-meta,
    .page-header-eyebrow {
        font-size: 9px;
    }

    /* Timeline — dots jeszcze bliżej */
    .timeline-year {
        font-size: 36px;
    }

    .timeline-month-entries {
        padding-left: var(--s-4);
        margin-left: var(--s-2);
    }

    .timeline-entry::before {
        left: -22.5px;
        width: 6px;
        height: 6px;
        top: 7px;
    }

    /* Stamps na małych ekranach — układają się pionowo jeśli brak miejsca */
    .stamp {
        margin-right: var(--s-2);
        margin-bottom: var(--s-2);
        font-size: 11px;
        padding: 2px var(--s-2);
    }

    /* Toast: na mobilce przyjmuje pełną szerokość z marginesami — czytelniejszy */
    .toast-notification {
        padding: var(--s-3) var(--s-4);
        font-size: var(--fs-micro);
    }

    /* Submit button — mniejszy font na wąskich ekranach */
    .submit-entry-btn {
        font-size: var(--fs-body);
    }

    /* Forensic items: mniejszy padding */
    .forensic-item {
        padding: var(--s-3) var(--s-4);
    }

    .f-value {
        font-size: var(--fs-body);
    }
}

/* =========================================================
   TOASTY (POWIADOMIENIA SYSTEMOWE)
   ========================================================= */
.toast-notification {
    position: fixed;
    top: var(--s-6);
    right: -350px;
    background: var(--bg-veil);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--ink-primary);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    padding: var(--s-4) var(--s-5);
    border-left: 3px solid var(--accent);
    border-radius: 2px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    z-index: var(--z-toast);
    transition: right var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-gentle);
    opacity: 0;
    pointer-events: none;
}

    .toast-notification.show {
        right: var(--s-6);
        opacity: 1;
    }

/* Dostosowanie dla telefonów (pojawia się na górze, na środku) */
@media (max-width: 768px) {
    .toast-notification {
        top: -100px; /* Ukryte na górze */
        right: 50%;
        transform: translateX(50%); /* Centrowanie na telefonie */
        width: 90%;
        transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.5s ease;
    }

        .toast-notification.show {
            top: 20px; /* Zjeżdża z góry na dół */
        }
}

/* =========================================================
   EKRAN POWITALNY — EDITORIAL FRONTISPICE
   Kompozycja inspirowana kartą tytułową dziennika.
   ========================================================= */

/* Uniwersalna warstwa ziarna papieru */
.noise-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.dark-mode .noise-overlay {
    opacity: 0.06;
}

/* Kanwa welcome — zajmuje cały dostępny viewport */
.welcome-canvas {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-paper);
    padding: clamp(var(--s-6), 5vw, var(--s-8));
    box-sizing: border-box;
    overflow: hidden;
}

/* --- NAROŻNE ZNACZNIKI EDYTORIALNE --- */
.canvas-mark {
    position: absolute;
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-widest);
    color: var(--ink-muted);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 2;
    opacity: 0;
    animation: frontispiceFade 1.2s var(--ease-premium) 0.1s forwards;
}

.mark-tl { top: var(--s-6); left: var(--s-7); }
.mark-tr { top: var(--s-6); right: var(--s-7); }
.mark-bl { bottom: var(--s-6); left: var(--s-7); }
.mark-br { bottom: var(--s-6); right: var(--s-7); }

/* --- NAROŻNE "KRZYŻE PASOWANIA" (registration marks) --- */
.crosshair {
    position: absolute;
    width: 14px;
    height: 14px;
    z-index: 2;
    opacity: 0;
    animation: frontispiceFade 1.2s var(--ease-premium) 0.3s forwards;
}

    .crosshair::before,
    .crosshair::after {
        content: '';
        position: absolute;
        background: var(--ink-whisper);
    }

    .crosshair::before {
        top: 50%;
        left: 0;
        right: 0;
        height: 1px;
        transform: translateY(-50%);
    }

    .crosshair::after {
        left: 50%;
        top: 0;
        bottom: 0;
        width: 1px;
        transform: translateX(-50%);
    }

.ch-tl { top: var(--s-5); left: var(--s-5); }
.ch-tr { top: var(--s-5); right: var(--s-5); }
.ch-bl { bottom: var(--s-5); left: var(--s-5); }
.ch-br { bottom: var(--s-5); right: var(--s-5); }

/* --- GŁÓWNY OBSZAR TYPOGRAFII --- */
.welcome-stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: var(--s-8) var(--s-4);
}

/* Eyebrow: "— ROZDZIAŁ PIERWSZY —" */
.welcome-eyebrow {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    margin-bottom: var(--s-7);
    opacity: 0;
    animation: frontispiceRise 0.9s var(--ease-premium) 0.2s forwards;
}

    .welcome-eyebrow::before,
    .welcome-eyebrow::after {
        content: '';
        width: 40px;
        height: 1px;
        background: var(--divider-strong);
    }

.welcome-eyebrow-label {
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-widest);
    color: var(--ink-muted);
    text-transform: uppercase;
}

/* Wordmark: DIARYCON */
.welcome-wordmark {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(48px, 8vw, var(--fs-display));
    letter-spacing: var(--tracking-wide);
    color: var(--ink-primary);
    margin: 0;
    line-height: 1;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.6);
    opacity: 0;
    animation: frontispiceRise 1s var(--ease-premium) 0.35s forwards;
}

/* Mała ozdoba: romb między wordmarkiem a tagline */
.welcome-divider-glyph {
    margin: var(--s-5) 0 var(--s-5);
    color: var(--accent);
    font-size: 10px;
    letter-spacing: var(--tracking-widest);
    opacity: 0;
    animation: frontispiceFade 1s var(--ease-premium) 0.55s forwards;
}

/* Tagline poetycki */
.welcome-tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-size: var(--fs-lead);
    line-height: 1.7;
    color: var(--ink-secondary);
    max-width: 480px;
    margin: 0 0 var(--s-8);
    font-weight: 400;
    opacity: 0;
    animation: frontispiceRise 1s var(--ease-premium) 0.65s forwards;
}

/* Lista atrybutów w stylu redakcyjnym */
.welcome-ledger {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-8);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    text-align: left;
    max-width: 380px;
    width: 100%;
    opacity: 0;
    animation: frontispiceRise 1s var(--ease-premium) 0.8s forwards;
}

.welcome-ledger li {
    display: flex;
    align-items: baseline;
    gap: var(--s-4);
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--divider);
}

    .welcome-ledger li:last-child {
        border-bottom: none;
    }

.ledger-num {
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-wider);
    color: var(--accent);
    flex-shrink: 0;
    width: 24px;
}

.ledger-text {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--ink-secondary);
    letter-spacing: 0.02em;
}

/* --- PRIMARY CTA --- */
.welcome-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
    opacity: 0;
    animation: frontispiceRise 1s var(--ease-premium) 0.95s forwards;
}

.btn-journal-open {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    background: transparent;
    border: 1px solid var(--ink-primary);
    color: var(--ink-primary);
    padding: var(--s-4) var(--s-7);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    font-weight: 500;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--dur-base) var(--ease-gentle), color var(--dur-base) var(--ease-gentle), transform var(--dur-base) var(--ease-gentle), box-shadow var(--dur-base) var(--ease-gentle);
    overflow: hidden;
}

.btn-journal-open .btn-label {
    position: relative;
    z-index: 1;
    transition: transform var(--dur-base) var(--ease-premium);
}

.btn-journal-open .btn-arrow {
    position: relative;
    z-index: 1;
    font-size: 16px;
    transition: transform var(--dur-base) var(--ease-spring);
}

.btn-journal-open:hover {
    background: var(--ink-primary);
    color: var(--bg-paper);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

    .btn-journal-open:hover .btn-arrow {
        transform: translateX(4px);
    }

/* Shimmer: przemknięcie światła po przycisku co kilka sekund */
.btn-journal-open::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-25deg);
    animation: shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

.welcome-actions-note {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: var(--tracking-wide);
    color: var(--ink-muted);
}

/* --- STOPKA KANWY --- */
.welcome-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--s-6);
    display: flex;
    justify-content: space-between;
    padding: 0 var(--s-7);
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-wider);
    color: var(--ink-muted);
    text-transform: uppercase;
    z-index: 2;
    opacity: 0;
    animation: frontispiceFade 1.2s var(--ease-premium) 1.1s forwards;
}

.welcome-footer-status {
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5a8f4f;
    animation: statusPulse 2.4s ease-in-out infinite;
}

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

/* --- Animacje wejścia --- */
@keyframes frontispiceFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Alias reużywany w innych częściach aplikacji (journal-header, ai-insight) */
@keyframes slideUpFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
    0% { left: -100%; }
    18% { left: 200%; }
    100% { left: 200%; }
}

/* --- Responsywność welcome canvas --- */
@media (max-width: 768px) {
    .mark-tl, .mark-tr { top: var(--s-4); }
    .mark-tl { left: var(--s-4); }
    .mark-tr { right: var(--s-4); }
    .mark-bl, .mark-br { bottom: var(--s-4); }
    .mark-bl { left: var(--s-4); }
    .mark-br { right: var(--s-4); }

    .ch-tl, .ch-tr { top: 8px; }
    .ch-bl, .ch-br { bottom: 8px; }
    .ch-tl, .ch-bl { left: 8px; }
    .ch-tr, .ch-br { right: 8px; }

    .welcome-stage {
        padding: var(--s-7) var(--s-4);
    }

    .welcome-footer {
        flex-direction: column;
        gap: var(--s-2);
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .mark-br, .mark-tr { display: none; }
}

/* --- THEME TOGGLE W TRYBIE GOŚCIA (zajmuje miejsce mark-tr) --- */
.canvas-theme-toggle {
    position: fixed;
    top: var(--s-6);
    right: var(--s-7);
    background: transparent;
    border: none;
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-widest);
    color: var(--ink-muted);
    text-transform: uppercase;
    cursor: pointer;
    padding: var(--s-2) var(--s-3);
    transition: color var(--dur-base) var(--ease-gentle), letter-spacing var(--dur-base) var(--ease-gentle);
    z-index: 3;
    opacity: 0;
    animation: frontispiceFade 1.2s var(--ease-premium) 0.5s forwards;
}

    .canvas-theme-toggle:hover {
        color: var(--ink-primary);
        letter-spacing: calc(var(--tracking-widest) + 0.04em);
    }

@media (max-width: 768px) {
    .canvas-theme-toggle {
        top: var(--s-4);
        right: var(--s-4);
    }
}


/* =========================================================
   CENTRUM EKSPORTU
   ========================================================= */
.history-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: var(--s-5);
}

.export-dropdown {
    position: relative;
}

.export-btn {
    background: transparent;
    border: none;
    font-family: var(--font-mono);
    color: var(--ink-muted);
    font-size: var(--fs-caption);
    letter-spacing: var(--tracking-wider);
    cursor: pointer;
    padding: var(--s-2) var(--s-3);
    text-transform: uppercase;
    transition: color var(--dur-base) var(--ease-gentle);
}

    .export-btn:hover {
        color: var(--ink-primary);
    }

.export-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--s-3);
    background: var(--bg-veil);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 2px;
    border-top: 1px solid var(--accent);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    min-width: 220px;
    z-index: 50;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-10px);
    pointer-events: none;
    transition: all var(--dur-base) var(--ease-premium);
}

.export-dropdown.open .export-menu {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
    pointer-events: auto;
}

.export-menu button {
    background: transparent;
    border: none;
    text-align: left;
    padding: var(--s-3) var(--s-5);
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-gentle), color var(--dur-fast) var(--ease-gentle);
    border-bottom: 1px solid var(--divider);
}

    .export-menu button:hover {
        background: rgba(0,0,0,0.04);
        color: var(--ink-primary);
    }

.dark-mode .export-menu button:hover {
    background: rgba(255,255,255,0.04);
}

.export-menu button.pdf-btn {
    font-style: italic;
    color: var(--ink-muted);
}

/* Kontener w lewym dolnym rogu (zalogowany user) */
.auth-status-corner {
    position: fixed;
    bottom: var(--s-5);
    left: var(--s-5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    z-index: var(--z-modal);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
}

/* Etykieta z nazwą użytkownika */
.user-id-label {
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Przycisk logowania/wylogowania */
.auth-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    transition: color var(--dur-base) var(--ease-gentle), opacity var(--dur-base) var(--ease-gentle);
    color: var(--ink-muted);
    opacity: 0.7;
}

.logout-btn:hover {
    opacity: 1;
    color: var(--accent-ink);
}

/* =========================================================
   AWAKENING OVERLAY (otwieranie pamiętnika / budzenie serwera)
   ========================================================= */
.awakening-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-veil);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: var(--z-toast);
    animation: awakeningFadeIn 0.5s ease forwards;
}

@keyframes awakeningFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.awakening-card {
    text-align: center;
    padding: var(--s-8) var(--s-8);
    max-width: 440px;
}

.awakening-glyph {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto var(--s-6);
}

.awakening-ring {
    position: absolute;
    inset: 0;
    border: 1px solid var(--divider);
    border-top-color: var(--ink-primary);
    border-radius: 50%;
    animation: awakeningSpin 2.5s linear infinite;
}

.awakening-ring-2 {
    inset: 15px;
    border-top-color: transparent;
    border-left-color: var(--accent);
    animation-duration: 1.8s;
    animation-direction: reverse;
}

.awakening-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--accent);
    animation: awakeningPulse 2s ease-in-out infinite;
}

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

@keyframes awakeningPulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.4); }
}

.awakening-title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    color: var(--ink-primary);
    letter-spacing: var(--tracking-wide);
    margin: 0 0 var(--s-2);
}

.awakening-subtitle {
    font-family: var(--font-body);
    font-size: var(--fs-caption);
    color: var(--ink-muted);
    letter-spacing: 0.02em;
    line-height: 1.7;
    margin: 0 0 var(--s-6);
}

.awakening-progress {
    position: relative;
    width: 100%;
    height: 1px;
    background: var(--divider);
    overflow: hidden;
}

    .awakening-progress::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 40%;
        background: linear-gradient(to right, transparent, var(--accent), transparent);
        animation: awakeningSweep 2.2s ease-in-out infinite;
    }

@keyframes awakeningSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* =========================================================
   AUTH CHECK VEIL (zapobiega flashowi podczas sprawdzania auth)
   ========================================================= */
.auth-check-veil {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
}

.auth-check-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.5;
    animation: authCheckBreath 1.6s ease-in-out infinite;
}

@keyframes authCheckBreath {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.6); }
}

/* =========================================================
   SEKCJA ECHO DNIA (odpowiedź AI)
   ========================================================= */
.ai-insight-section {
    margin-top: var(--s-5);
    padding-top: var(--s-3);
    animation: slideUpFade 0.7s var(--ease-premium);
}

.ai-insight-divider {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    margin-bottom: var(--s-6);
}

    .ai-insight-divider::before,
    .ai-insight-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--divider-strong), transparent);
    }

.ai-insight-label {
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-widest);
    color: var(--ink-muted);
    white-space: nowrap;
    text-transform: uppercase;
}

.ai-insight-stamps {
    margin-bottom: var(--s-5);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3) 0;
}

/* =========================================================
   TRYB NOCNY (DARK MODE)
   Większość przejść obsługują tokens CSS (--ink-*, --bg-*, --accent, --divider*).
   Tu trzymamy tylko te nadpisania, które wymagają specyficznych wartości
   niepokrywanych przez tokens (np. zachowanie formularzy systemowych, aktywne tła).
   ========================================================= */

/* Szare tło głębi: dla elementów które potrzebują kontrastu względem --bg-paper */
.dark-mode .filter-btn.active {
    background: var(--ink-primary);
    color: var(--bg-paper);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/* Kalendarzyki — native date input potrzebuje color-scheme hint */
.dark-mode .date-input {
    color-scheme: dark;
}

/* Bootstrap .text-muted — rozjaśniamy, żeby data była czytelna */
.dark-mode .text-muted {
    color: var(--ink-muted) !important;
}

/* Theme toggle w nawigacji (dla zalogowanych) */
.theme-toggle {
    background: none;
    border: none;
    font-family: var(--font-mono);
    color: var(--ink-muted);
    font-size: var(--fs-caption);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--dur-base) var(--ease-gentle);
    padding: var(--s-1) var(--s-2);
}

    .theme-toggle:hover {
        color: var(--ink-primary);
    }

/* =========================================================
   DRAFT INDICATOR (auto-save status pod licznikiem znaków)
   ========================================================= */
.counter-group {
    display: inline-flex;
    align-items: baseline;
    gap: var(--s-3);
    flex-wrap: wrap;
}

.draft-indicator {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--ink-whisper);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    transition: color var(--dur-base) var(--ease-gentle), opacity var(--dur-base) var(--ease-gentle);
    opacity: 0;
}

    .draft-indicator.is-visible {
        opacity: 1;
    }

    .draft-indicator.is-saving {
        color: var(--ink-muted);
    }

    .draft-indicator.is-saved {
        color: var(--accent);
    }

    .draft-indicator .draft-dot {
        display: inline-block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: currentColor;
        margin-right: var(--s-2);
        vertical-align: middle;
        animation: draftPulse 1.5s ease-in-out infinite;
    }

    .draft-indicator.is-saved .draft-dot {
        animation: none;
    }

@keyframes draftPulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* =========================================================
   GREETING — czas dnia (Welcome i journal-header)
   ========================================================= */
.journal-greeting {
    text-align: center;
    margin-bottom: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-mark);
    letter-spacing: var(--tracking-widest);
    color: var(--accent);
    text-transform: uppercase;
    opacity: 0;
    animation: greetFade 0.8s var(--ease-premium) 0.1s forwards;
}

@keyframes greetFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   ACCESSIBILITY: REDUCED MOTION
   Respektujemy systemowy wybór "minimize motion" (iOS, Windows, macOS).
   Wyłączamy wszystkie nieesencjalne animacje, ale zachowujemy
   końcowe stany dla elementów, które używają `animation: ... forwards`
   do kontrolowania pojawiania się (np. welcome-stage, page-header).
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    /* 1. Globalnie skracamy każdy ruch do natychmiastowego skoku.
          To eliminuje migotanie, ale nie usuwa końcowego stanu. */
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* 2. Elementy, które domyślnie startują z opacity:0 i czekają na
          animację `forwards`, muszą zostać wymuszone na widoczne —
          inaczej nie zobaczyłaby ich osoba z włączonym RM. */
    .welcome-canvas .welcome-eyebrow,
    .welcome-canvas .welcome-wordmark,
    .welcome-canvas .welcome-divider-glyph,
    .welcome-canvas .welcome-tagline,
    .welcome-canvas .welcome-ledger,
    .welcome-canvas .welcome-actions,
    .welcome-canvas .welcome-footer,
    .welcome-canvas .canvas-mark,
    .welcome-canvas .crosshair,
    .canvas-theme-toggle,
    .history-entry,
    .ai-insight-section,
    .journal-greeting,
    .page-header > * {
        opacity: 1 !important;
        transform: none !important;
    }

    /* 3. Pulsujące/kręcące się elementy, które bez animacji wyglądają
          dziwnie (status-dot, awakening-ring, draft-dot) — pozostawiamy
          widoczne, ale statyczne. */
    .status-dot,
    .awakening-ring,
    .awakening-core,
    .draft-dot,
    .auth-check-dot,
    .pre-glyph,
    .pre-progress::after,
    .awakening-progress::after {
        opacity: 0.6 !important;
    }

    /* 4. Hover-only animacje (translate, scale) zostają — to feedback
          do akcji użytkownika, nie ruch dekoracyjny. CSS już ich
          nie odpala bez interakcji, więc nie trzeba ich nadpisywać. */
}