/* =========================================
   GLOBAL
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
    color: #1A1A1A;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Zakładki */
.tab {
    display: none;
}

.tab.active {
    display: block;
}

/* =========================================
   LOGO + HEADER PREMIUM
========================================= */

#app-header {
    height: 50px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    border-bottom: 1px solid #EAEAEA;
    background: #FFFFFF;
    position: sticky;
    top: 0;
    z-index: 50;
}

.app-logo {
    height: 26px;
    width: auto;
   margin-top: -1px; 
    display: block;
    object-fit: contain;
    border-radius: 6px; /* lekko zaokrąglone rogi dla premium vibe */
}

.header-title {
    font-size: 20px;
    margin-top: -1px;
    font-weight: 600;
    color: #1A1A1A;
}

/* =========================================
   BOTTOM NAVIGATION
========================================= */

#bottom-nav {
    height: 60px;
    border-top: 1px solid #E5E5E5;
 background: linear-gradient(
    180deg,
    rgba(235,245,255,0.92) 0%,
    rgba(215,235,255,0.98) 45%,
    rgba(200,225,250,1) 100%
  );

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-top: 1px solid rgba(150,190,235,1);

  box-shadow:
    0 -16px 40px rgba(80,120,180,0.28),
    0 -6px 16px rgba(80,120,180,0.20);
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: sticky;
    bottom: 0;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ========================================= */
/*         BOTTOM NAV — REAL PREMIUM         */
/* ========================================= */

#bottom-nav .nav-btn {
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 22px;

    color: #1f2a37;          /* miękka czerń */
    gap: 2px;

    transition: all 0.25s ease;
}

/* tekst pod ikonką */
#bottom-nav .nav-btn span {
    font-size: 12px;
    opacity: 1;              /* żadnego disabled look */
    color: #0f172a;   /* prawie czarny, nadal miękki */
    font-weight: 800;
    transition: all 0.25s ease;
}



#bottom-nav .nav-btn.active {
    transform: scale(1.18);   /* 1.22 było już trochę za dużo */
    color: #0b4fd6;
}

#bottom-nav .nav-btn.active span {
    opacity: 1;
    color: #0b4fd6;
    font-weight: 700;
    transform: translateY(1px);
}



#bottom-nav .nav-btn.active::after {
    content: "";
    width: 6px;
    height: 6px;
    background: #0b4fd6;
    border-radius: 50%;
    margin-top: 3px;
}
#bottom-nav .nav-btn:not(.active) {
    opacity: 0.75;
}

/* =========================================
   HOME – LAYOUT PREMIUM
======================================

/* Nagłówek na Home */
.home-title {
    font-size: 29px;
    font-weight: 700;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 25px;
     color: #0F1A29;

}

/* Tekst pod emotką – opis nastroju */
.mood-label {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #404040;
    margin-top: 30px;
    margin-bottom: 14px;
    min-height: 28px;
}


/* Cały blok „emotka + gauge” jako delikatna karta */
.home-mood-card {
    text-align: center;
    background: #FFFFFF;
    border-radius: 18px;
    padding: 20px 16px 24px 16px;
    padding-bottom: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    margin-bottom: 20px;
    margin-top: 20px
}

/* Jeśli nie masz .home-mood-card w HTML, to chociaż: */
#home .big-emoji,
#home .mood-label,
#home .gauge-wrapper {
    display: block;
}


/* =========================================================
   THANK YOU — FULLSCREEN TRUST POPUP (KEY TRUST MOMENT)
   ========================================================= */

#thankyou-popup.thankyou {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

 background: linear-gradient(
  180deg,
  rgba(242,247,252,0.96),
  rgba(235,242,249,0.94)
);
    backdrop-filter: blur(20px) saturate(110%);
  -webkit-backdrop-filter: blur(20px) saturate(110%);

  animation: tyFadeIn 0.35s ease;
}

#thankyou-popup.thankyou.hidden {
  display: none !important;
}

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

/* KARTA */
#thankyou-popup .thankyou-box {

  width: min(520px, 100%);
  border-radius: 28px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  min-height: 150px;
   padding-top: 28px;
  padding-bottom: 26px;
background: linear-gradient(
  180deg,
  rgba(238,245,252,0.96),
  rgba(230,239,247,0.94)
);
  border: 1px solid rgba(255,255,255,0.65);
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);

  text-align: center;
}

/* NAGŁÓWEK */
#thankyou-popup .thankyou-box::before {
  content: "Zapisane ✅";
  display: block;
  font-size: 19px;
  font-weight: 800;
  color: #0F1A29;
  margin-bottom: 12px;
}

/* EMOJI */
#thankyou-popup .thankyou-emoji {
  font-size: 150px;
  margin: 6px 0 10px;
}

/* TEKST */
#thankyou-popup .thankyou-text {
  font-size: 15.5px;
  font-weight: 500;
  color: #3A4A5E;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* INFO O ANONIMOWOŚCI */
#thankyou-popup .thankyou-anon {
  font-size: 13px;
  color: #6B7A8A;
  opacity: 0.9;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 6px;
}




/* =========================================
   KARTY / WSPÓLNE STYLE
========================================= */

.card {
    background: #FFFFFF;
    padding: 16px;
    border-radius: 14px;
    box-shadow: 0px 3px 10px rgba(0,0,0,0.06);
    margin-bottom: 16px;
}

.text-center {
    text-align: center;
}

.text-small {
    font-size: 13px;
    color: #8A8A8A;
}

/* Animacje */

.fade-in {
    animation: fadeIn 0.25s ease;
}

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

/* =========================================
   KALENDARZ
========================================= */

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.month-btn {
    background: none;
    border: none;
    font-size: 22px;
    cursor: pointer;
    color: #2EC7B8;
}

.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 13px;
    color: #888;
    margin-bottom: 10px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}


/* Popup szczegółów dnia */
.day-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
}

.day-popup-box {
    background: white;
    padding: 24px;
    border-radius: 16px;
    width: 80%;
    max-width: 360px;
    text-align: center;
}

.day-popup-box h3 {
    margin-bottom: 6px;
}

/* =========================================
   STATYSTYKI
========================================= */

/* =========================================
   MYZONE — FINAL PREMIUM VERSION
========================================= */

.myzone-wrapper {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 20px;
}

/* HERO VIBE */

.myzone-today-centered {
    padding: 28px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
/* Uniwersalny odstęp między kartami */
.myzone-card {
    margin-top: 10px;
}


.myzone-today-icon {
    font-size: 62px;
    width: 90px;
    height: 90px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F6F9FF;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.myzone-today-center-label {
    font-size: 14px;
    color: #666;
}

.myzone-today-center-desc {
    font-size: 18px;
    font-weight: 600;
}

/* CARDS */

.myzone-card {
    padding: 8px 16px;
    border-radius: 18px;
}

.myzone-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.myzone-week-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 2px;
}

.myzone-week-desc {
    font-size: 13px;
    color: #777;
    margin: 0;
    margin-bottom: 10px;
}

/* ========================= */
/*   OSTATNIE DNI – PREMIUM  */
/* ========================= */

/* OSTATNIE DNI – KOREKTA UKŁADU */
.myzone-section-header.column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
}

.lastdays-title {
    font-size: 17px;
    font-weight: 600;
    color: #0F1A29;
    text-align: center;
}

.lastdays-subtitle {
    font-size: 13px;
    color: #777;
    text-align: center;
    line-height: 1.3;
    max-width: 260px;
}


/* vibe colors */
.myzone-week-bubble.pos {
    background: #DFF7D8;
}
.myzone-week-bubble.neu {
    background: #FFF4C7;
}
.myzone-week-bubble.hard {
    background: #FFE1E1;
}
.myzone-week-bubble.empty {
    background: #E9EAEC;
    color: #AAA;
}

/* THINGS */

.myzone-things-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.myzone-thing-chip {
    padding: 6px 12px;
    background: #F3F4F6;
    border-radius: 999px;
    font-size: 12px;
    color: #333;
}



/* CALM EFFECT */

.myzone-calm-gradient {
    height: 110px;
    border-radius: 18px;
    position: relative;
    overflow: hidden;
    margin-bottom: 6px;
}

/* gradienty premium */
.calm-mint {
    background: linear-gradient(135deg, #DDFEF4, #C8F4E8);
}
.calm-sunset {
    background: linear-gradient(135deg, #FFE5C7, #FFD3D3);
}
.calm-ocean {
    background: linear-gradient(135deg, #D7ECFF, #BEE1FF);
}
.calm-lilac {
    background: linear-gradient(135deg, #ECE6FF, #F3EBFF);
}

/* bubble calm */

.myzone-bubble {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.8);
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
    animation: myzoneFloat 7s ease-in-out infinite;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    cursor: pointer;
    transition: opacity 0.3s, transform 0.3s;
}

.myzone-bubble.popped {
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(0.5);
}

@keyframes myzoneFloat {
    0%   { transform: translate(-50%, -50%) translateY(4px); }
    50%  { transform: translate(-50%, -50%) translateY(-6px); }
    100% { transform: translate(-50%, -50%) translateY(4px); }
}

.myzone-calm-caption {
    font-size: 12px;
    color: #777;
    margin-top: -7px;
}

/* MINI MOMENT */

.myzone-mini-moment {
    background: #F4F5F7;
    padding: 12px;
    text-align: center;
    border-radius: 14px;
    font-size: 12px;
    color: #555;
}
.myzone-minimoment-card {
    margin-top: 14px;
    margin-bottom: 1px;
}



.hidden {
    opacity: 0;
    pointer-events: none;
}


.tools-title {
    font-size: 22px;
    margin: 20px 16px 0;
    font-weight: 600;
}

.tools-subtitle {
    font-size: 14px;
    margin: 4px 16px 20px;
    opacity: 0.7;
}

.tool-card {
    background: #f2f2f2;
    padding: 14px;
    border-radius: 16px;
    margin:40px 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.tool-icon { font-size: 28px; margin-right: 14px; }

.tool-texts h3 { margin: 0; font-size: 17px; }
.tool-texts p { margin: 0; opacity: .7; font-size: 13px; }

.tool-arrow {
    margin-left: auto;
    font-size: 22px;
    opacity: .4;
}

.tools-footer {
    text-align: center;
    opacity: .5;
    font-size: 12px;
    margin: 40px 0 40px;
}

.modal-overlay {
    position: fixed;
    top:0; left:0;
    width:100%; height:100%;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(3px);
    z-index: 99;
}

.modal-box {
    position: fixed;
    top:50%; left:50%;
    transform: translate(-50%, -50%);
    width: 80%;
    padding: 22px;
    background: #fff;
    border-radius: 18px;
    z-index: 100;
}

.modal-btn {
    width: 100%;
    padding: 10px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    margin-top: 20px;
}
/* =========================
   TOOLS – FLOW ANIMATIONS
   ========================= */

#motivationContent {
  text-align: center;
  font-size: 17px;
  line-height: 1.5;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 12px 0;
}

#motivationContent.fade-in {
  opacity: 1;
}

/* === EMOJI === */
.sheet-emoji {
  font-size: 48px;
  display: inline-block;
  transition: transform 3s ease, opacity 0.4s ease;
}

/* ODDECH */
.sheet-emoji.breath-in {
  transform: scale(1.15);
}

.sheet-emoji.breath-out {
  transform: scale(0.9);
}

/* PULS */
.sheet-emoji.pulse {
  animation: emojiPulse 2.4s ease-in-out infinite;
}

@keyframes emojiPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* PRZYCISK – pojawia się na końcu */
.sheet-close-btn {
  transition: opacity 0.4s ease;
}

/* =========================================
   POMOC / HELP
========================================= */
.help-main-card {
background: linear-gradient(
        180deg,
        rgba(255,255,255,0.97) 0%,
        rgba(240,249,255,0.92) 55%,
        rgba(225,243,255,0.87) 100%
    ) !important;

    border: 1px solid rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 6px 18px rgba(120,150,200,0.15);
  padding: 16px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.1);
}

.help-main-icon {
  font-size: 32px;
}

.help-white-card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 20px;
  margin: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.help-section {
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.45;
}

/* =========================================
   GAUGE – CZYSTY, RESPONSYWNY
========================================= */

.gauge-wrapper {
        width: 100%;
  max-width: 360px;   /* 🔑 KLUCZ */
    height: 180px;
    margin: 12px auto 0 auto;
   margin-bottom: 12px;
    position: relative;
   aspect-ratio: 2.2 / 1;
}

.gauge-emoji.active {
    background: rgba(0,0,0,0.08);
}


/* obraz półokręgu */
.gauge-bg {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    max-width: 350px;
}


/* Stan aktywny – delikatny podskok + cień */
.gauge-emoji.active {
    transform: scale(1.3);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
}

/* ========================= */
/* IGŁA NA ŁUKU (NEEDLE)     */
/* ========================= */


/* =========================================
   KOMENTARZ + PRZYCISK
========================================= */

.info-small {
    font-size: 13px;
    margin-bottom: 8px;
    color: #777;
    text-align: center;
}

.comment-box {
    width: 100%;
    min-height: 90px;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid #E9E9E9;
    background: #FFFFFF;
    font-size: 15px;
    resize: none;
    outline: none;

    /* super soft shadow – premium iOS */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.comment-box:focus {
    border-color: #D4D4D4;
    box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}
.comment-box::placeholder {
    color: #B0B0B0;
}

.info-anon {
    font-size: 12px;
    margin-top: 6px;
    color: #999;
    text-align: center;
}

/* Przycisk wysyłania */
.send-btn {
    width: 100%;
    padding: 14px 16px;
    border: none;
    border-radius: 14px;
    margin-top: 16px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background: #C9C9C9;
    cursor: not-allowed;
    transition: background 0.22s ease, box-shadow 0.18s ease, transform 0.1s ease;
}

/* stan aktywny */
.send-btn.enabled {
    cursor: pointer;
    background: linear-gradient(135deg, #2EC7B8, #57E3D3);

    box-shadow: 0 4px 12px rgba(46,199,184,0.35);
}

.send-btn.enabled:active {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(46,199,184,0.25);
}
.home-mood-card {
  position: relative;
    max-width: 420px;
    margin: 24px auto 28px auto;
    padding: 28px 24px;
    border-radius: 22px;
background: linear-gradient(
    180deg,
    rgba(255,255,255,0.98) 0%,
    rgba(245,250,255,0.96) 45%,
    rgba(232,244,255,0.94) 100%
  );    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
    text-align: center;
}

.gauge-emoji:hover {
    transform: scale(1.15);
}

.home-subtitle {
    font-size: 15px;
    color: #8F8F8F;
    max-width: 420px;
    margin: 4px auto 28px auto;
    text-align: center;
}

/* Fade-out + Fade-in mocno premium */
.fade-reset {
    animation: fadeReset 0.45s ease;
}

@keyframes fadeReset {
    0%   { opacity: 1; transform: translateY(0); }
    40%  { opacity: 0; transform: translateY(6px); }
    60%  { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Mały bounce powrotny telefonowy */
.reset-bounce {
    animation: resetBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes resetBounce {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.07); }
    100% { transform: scale(1); }
}
/* animacja Wejścia całego ekranu */
.home-premium {
    animation: homeAppear 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes homeAppear {
    0%   { opacity: 0; transform: translateY(12px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
#home {
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 80px; /* daje miejsce aby przycisk nie był ucięty */
}



/* ===================================================== */
/*                KALENDARZ – FINAL PREMIUM              */
/* ===================================================== */

/* Siatka dni */
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

/* KOMÓRKA DNIA – wygląd premium */
.day-cell-premium {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #F1F1F1;
    border-radius: 14px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: scale(0.96);
    transition: transform 0.14s ease;
    transition: all 0.18s ease;
    cursor: pointer;
}

/* Animacja hover / tap */
.day-cell-premium:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    transition: all 0.18s ease;
}
/* EMOTKA – realny wpis */
.day-emoji-premium {
    font-size: 22px;
    line-height: 22px;
    margin-bottom: 2px;
}

/* EMOTKA – placeholder */
.day-empty-premium {
    font-size: 22px;
    opacity: 0.18;
    margin-bottom: 2px;
}

/* Numer dnia – POD emotką */
.day-number-premium {
    font-size: 11px;
    color: #7A7A7A;
    margin-top: 2px;
    user-select: none;
}

/* ======= PASTEL EMOTION BACKGROUNDS (research-based) ======= */

.mood-fatalnie {
  background: rgba(231, 76, 60, 0.20);
}

.mood-stres {
  background: rgba(241, 196, 15, 0.20);
}
.mood-neutralnie {
  background: rgba(52, 152, 219, 0.16);
}

.mood-pozytywnie {
  background: rgba(39, 174, 96, 0.18);
}

.mood-rewelacyjnie {
  background: rgba(46, 204, 113, 0.22);
}

/* ======= DZISIAJ (mikro ring + glow – premium UX) ======= */
.day-today-premium {
    border: 2px solid #2EC7B8;
    box-shadow: 0 0 10px rgba(46,199,184,0.55);
}

/* ======= ANIMACJE ======= */

/* soft-entry */
.day-cell-premium {
    animation: calendarFadeIn 0.35s ease;
}

@keyframes calendarFadeIn {
    0% { opacity: 0; transform: translateY(8px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fade-month-forward {
    animation: slideForward 0.32s ease;
}

.fade-month-backward {
    animation: slideBackward 0.32s ease;
}

@keyframes slideForward {
    0% { opacity: 0; transform: translateX(20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes slideBackward {
    0% { opacity: 0; transform: translateX(-20px); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeMonth {
    0% {
        opacity: 0;
        transform: translateY(8px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Delikatne wejście kafelków – tylko fade, bez transform */
.day-cell-premium {
    animation: softEntry 0.35s ease both;
}

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

.day-cell-premium:active {
    transition: transform 0.14s cubic-bezier(.34,1.56,.64,1);
}

.day-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transform: translateZ(0);
}
/* ===== Overlay ===== */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
    z-index: 49;
}

.overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ===============================
   DAY BOTTOM SHEET – FINAL
   =============================== */
.day-sheet {
  position: fixed;
  left: 50%;
  bottom: env(safe-area-inset-bottom);

  transform: translateX(-50%) translateY(110%);
  opacity: 0;

  width: min(520px, calc(100% - 32px));
  max-height: 70vh;
  overflow-y: auto;

  padding: 22px 24px calc(32px + env(safe-area-inset-bottom));

  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.97) 0%,
    rgba(240,249,255,0.93) 60%,
    rgba(225,243,255,0.88) 100%
  );
  backdrop-filter: blur(14px);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -6px 20px rgba(0,0,0,0.18);

  transition:
    transform 0.36s cubic-bezier(.22,.9,.35,1),
    opacity 0.25s ease;

  z-index: 1000;
  -webkit-overflow-scrolling: touch;
}

.day-sheet.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}




/* Header */
.sheet-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
padding-bottom: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.sheet-emoji {
    font-size: 32px;
}

.sheet-date {
    font-size: 17px;
    font-weight: 600;
}



/* Chips */
.sheet-question {
    font-size: 15px;
    margin-bottom: 12px;
    margin-top: 8px;
	    font-weight: 600;

}

.sheet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
/* Stats */
.sheet-stats {
    font-size: 13px;
    color: #666;
    margin-bottom: 18px;
}

/* Close button */
.sheet-close-btn {
    background: linear-gradient(135deg, #00c8a8, #00a8ea) !important;
    color: #fff !important;
    padding: 12px 26px !important;
    border-radius: 16px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 16px rgba(0, 140, 200, 0.28) !important;
    margin: 20px auto 0 auto !important;
    display: block !important;
    cursor: pointer;
    border: none;
}

.sheet-chips button {
    padding: 8px 14px;
    border-radius: 18px;
    border: none;
    background: #EFEFEF;
    cursor: pointer;
    font-size: 14px;
}

.sheet-chips button.active {
    background: #2EC7B8;
    color: white;
}

.sheet-input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #DDD;
    font-size: 14px;
}

.sheet-summary {
    font-size: 13px;
    color: #444;
}

.sheet-buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}


.calm-box {
    width: 100%;
    height: 190px;
    border-radius: 20px;
    background: linear-gradient(135deg, #BBD8FF, #A6C9FF);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;    /* ❗ KLUCZOWE */
    z-index: 2;            /* ❗ żeby bąbelki były nad gradientem */
}
.calm-bubbles-container {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    pointer-events: none; /* żeby kula była klikalna */
}

.calm-bubble-float {
    position: absolute;
    bottom: -40px;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    animation: bubbleRise 6s ease-in-out forwards;
    filter: blur(1px);
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) scale(1) translateX(0);
        opacity: 0.7;
    }
    50% {
        opacity: 1;
        transform: translateY(-60px) scale(1.3) translateX(-10px);
    }
    100% {
        opacity: 0;
        transform: translateY(-120px) scale(1) translateX(10px);
    }
}

.calm-ball {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
    animation: calmBreath 5s ease-in-out infinite;
}

@keyframes calmBreath {
    0%   { transform: scale(1); opacity: 0.8; }
    50%  { transform: scale(2.4); opacity: 1; }
    100% { transform: scale(1); opacity: 0.8; }
}
/* ========================== */
/* FINAL CALM FULLSCREEN MODE */
/* ========================== */

/* WARSTWA 1 — BLUR TŁA (bez koloru!) */
.calm-fullscreen {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent; /* ❗ brak koloru */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 999;
}

.calm-fullscreen.active {
    opacity: 1;
    pointer-events: auto;
}

/* WARSTWA 2 — DELIKATNE PRZYCIEMNIENIE (bez blur!) */
.calm-fullscreen::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 25, 40, 0.25);
    pointer-events: none;
}

/* ========================== */
/* KARTA CALM (IZOLOWANA)     */
/* ========================== */

.calm-fullscreen-inner {
    position: relative;
    isolation: isolate;              /* ❗ KLUCZ: odcina od blur */
    width: 92%;
    max-width: 420px;
    height: 560px;

    background: linear-gradient(
        180deg,
        #ffffff 0%,
        #f5f9ff 65%,
        #eef6ff 100%
    );

    border-radius: 32px;
    padding-top: 80px;
    overflow: hidden;
    text-align: center;

    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    z-index: 1;
}

/* SUBTELNE ŚWIATŁO POD KULKĄ */
.calm-fullscreen-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 42%,
        rgba(170,205,255,0.55),
        transparent 65%
    );
    pointer-events: none;
}

/* ======================= */
/* KULA — FOCUS            */
/* ======================= */

.calm-fs-ball {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 170px;
    height: 170px;
    border-radius: 50%;

    background: radial-gradient(
        circle at 50% 40%,
        #EAF2FF 0%,
        #B8D6FF 45%,
        #8DBBFF 100%
    );

    animation: fsBreath 6s ease-in-out infinite;
    z-index: 5;
}

/* AURA */
.calm-fs-ball::after {
    content: "";
    position: absolute;
    inset: -40px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(140,170,255,0.4),
        transparent 70%
    );
    filter: blur(30px);
    animation: fsAura 6s ease-in-out infinite;
    z-index: 3;
}

/* POŚWIATA POD KULĄ */
.calm-fs-ball::before {
    content: "";
    position: absolute;
    width: 220px;
    height: 50px;
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(
        circle,
        rgba(120,150,255,0.35),
        transparent 75%
    );
    filter: blur(22px);
    animation: fsGlow 6s ease-in-out infinite;
    z-index: 2;
}

/* ODBICIE ŚWIATŁA */
.calm-reflection {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(
        circle,
        rgba(255,255,255,0.55),
        transparent 70%
    );
    border-radius: 50%;
    animation: fsReflect 6s ease-in-out infinite;
    z-index: 6;
}

/* ======================= */
/* TEKSTY I CTA            */
/* ======================= */

.calm-title {
    font-size: 25px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.calm-instr {
    font-size: 17px;
    line-height: 1.5;
    color: #475569;
    margin-top: 290px;
    margin-bottom: -100px;
    padding: 0 20px;
}

.calm-exit {
    margin-top: 144px;
    padding: 12px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #00c8a8, #00a8ea);
    border: none;
    color: white;
    font-size: 15px;
    cursor: pointer;
}



/* ======================= */
/*    ANIMACJE PREMIUM     */
/* ======================= */

@keyframes fsBreath {
    0%,100% { transform: translateX(-50%) scale(1); }
    50%     { transform: translateX(-50%) scale(1.35); }
}

@keyframes fsAura {
    0%,100% { opacity: .25; transform: scale(1); }
    50%     { opacity: .55; transform: scale(1.18); }
}

@keyframes fsGlow {
    0%,100% { opacity: .25; }
    50%     { opacity: .45; }
}

@keyframes fsReflect {
    0%,100% { opacity: .4; transform: translateX(-50%) scale(1); }
    50%     { opacity: .6; transform: translateX(-48%) scale(1.1); }
}

@keyframes fsBubble {
    0%,100% { transform: translateY(0) scale(.85); opacity:.4; }
    50%     { transform: translateY(-22px) scale(1.2); opacity:.9; }
}
* {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}
.myzone-minimoment-card {
    width: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0px 2px 6px rgba(0,0,0,0.06);
    margin-top: 16px;
}

.myzone-minimoment-text {
    font-size: 14px;
    color: #3A3A3A;
    line-height: 1.35;
    margin: 0;
}
#myzone-week-bubbles {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 8px;
    margin-top: 10px;
    width: 100%;
}

/* WIĘKSZA PREMIUM KULKA – FINAL */
.calm-ball {
    width: 57px !important;
    height: 57px !important;
    background: rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    animation: calmBreath 5s ease-in-out infinite;
       margin-top: 18px !important; /* opuszczamy ją niżej */

}
/* CENTROWANIE SEKCKI „Rzeczy, które zwykle Ci pomagają” */
.myzone-card .myzone-section-header {
    justify-content: center; /* wyrównanie nagłówka */
    text-align: center;
    position: relative;
font-size: 17px !important;
    font-weight: 600 !important;
    letter-spacing: 0.2px;
    color: #222;
}

/* Edytuj – wyrównany do prawej, ale nie wpływa na centrowanie tytułu */
.myzone-card .myzone-edit-btn {
    position: absolute;
    right: 0;
}

/* Chipsy na środku */
.myzone-things-list {
    justify-content: center !important;
}
/* Header MyZone z ikonką */
.myzone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: -4px;
}

.myzone-settings-icon {
    font-size: 23px;
    cursor: pointer;
    opacity: 0.65;
    transition: 0.2s ease;
    padding: 6px;
    border-radius: 10px;
}

.myzone-settings-icon:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}
/* === POPUP USTAWIEŃ MYZONE === */
.myzone-settings-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
}

.myzone-settings-popup.hidden {
    display: none;
}

.myzone-settings-box {
    width: 90%;
    max-width: 380px;
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.95),
        rgba(240,249,255,0.92)
    );
    border-radius: 24px;
    padding: 22px 20px 18px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.22);
    text-align: center;
}

.myzone-settings-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.settings-section-label {
    font-size: 14px;
    font-weight: 500;
    color: #555;
    margin: 16px 0 8px;
}

.settings-main-btn {
    width: 100%;
    padding: 10px 14px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(135deg, #00c8a8, #00a8ea);
    box-shadow: 0 6px 16px rgba(0, 140, 200, 0.28);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Motywy kolorystyczne */
.color-options {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
}

.color-option {
    padding: 8px 12px;
    border-radius: 999px;
    border: none;
    background: #F1F1F1;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s ease;
}

.color-option.active {
    background: #14C6A3;
    color: #fff;
}


/* Toggles */
.settings-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #444;
    justify-content: center;
}

.settings-toggle input {
    accent-color: #14C6A3;
}

.settings-close {
    margin-top: 8px;
    padding: 8px 18px;
    border-radius: 14px;
    border: none; 
        background: linear-gradient(
        180deg,
        rgba(255,255,255,0.65) 0%,
        rgba(235,245,255,0.85) 100%
    );
    color: #0f172a;
    font-weight: 500;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(120,160,200,0.18);

    backdrop-filter: blur(10px);
    font-size: 14px;
    cursor: pointer;
}
/* MOTYWY MYZONE – możesz rozwinąć */
.myzone-wrapper.theme-gradient .calm-box {
    background: linear-gradient(135deg, #BBD8FF, #A6C9FF);
}



.theme-gradient .card {
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
}

.theme-gradient .myzone-title,
.theme-gradient .myzone-subtitle {
    color: #1a1a1a;
}

.theme-gradient .calm-box {
    background: linear-gradient(135deg, #A6C9FF, #81B9FF);
}

/* === GRADIENT PRO+ (cała aplikacja) === */



/* === KARTY Z LEKKIM GRADIENTEM PRO+ === */
.theme-gradient .card,
.theme-gradient .myzone-card,
.theme-gradient .home-mood-card,
.theme-gradient .comment-box {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(240, 249, 255, 0.92) 55%,
        rgba(225, 243, 255, 0.87) 100%
    );
    backdrop-filter: blur(14px);
    box-shadow: 0 6px 18px rgba(115, 150, 200, 0.18);
    border: 1px solid rgba(255,255,255,0.65);
}
.theme-gradient .home-mood-card {

    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(235,245,255,0.91) 60%,
        rgba(220,240,255,0.88) 100%
    );
}
.theme-gradient h1,
.theme-gradient h2,
.theme-gradient h3,
.theme-gradient .myzone-title,
.theme-gradient .home-title {
    color: #0F1A29 !important;
    font-weight: 700;
}

.theme-gradient p,
.theme-gradient span,
.theme-gradient .myzone-subtitle,
.theme-gradient .home-subtitle {
    color: #2B3A4A !important;
    font-weight: 500;
}

.theme-gradient .info-small,
.theme-gradient .myzone-calm-caption {
    color: #4A596A !important;
}

.theme-gradient .info-anon {
    color: #2B3A4A;         /* dużo bardziej czytelny ciemny pastel */
    font-weight: 500;       /* lekko pogrubione */
    opacity: 0.9;           /* mocniejsza widoczność */
}

/* Dziś raczej spokojnie */
.theme-gradient .myzone-today-center-desc {
    font-weight: 700!important;
    color: #0F1A29!important;
}

/* Ostatnie dni */
.theme-gradient .lastdays-title {
    font-weight: 700!important;
    color: #0F1A29!important;
}

/* Rzeczy, które zwykle Ci pomagają */
.theme-gradient .myzone-card .myzone-section-header span {
    font-weight: 600!important;
    color: #122435!important;
}




/* GRADIENT MODE — ciemny tekst NAV */
.theme-gradient #bottom-nav .nav-btn span {
    color: #0F1A29 !important;   /* ciemny, elegancki, czytelny */
    font-weight: 700 !important;
    letter-spacing: 0.15px;
}
w: 0 4px 14px rgba(20,198,163,0.35);
}
.theme-gradient .sheet-close {
    display: block !important;
    margin: 25px auto 10px auto !important;
    width: 130px;                /* opcjonalnie — wygląda premium */
    text-align: center;
}
.theme-gradient .sheet-close {
    background: #14C6A3 !important;
    color: #FFFFFF !important;
    border-radius: 14px;
    padding: 12px 20px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(20,198,163,0.35);
}







/* Gradient */
.theme-gradient .myzone-tag {
    background:rgba(255,255,255,0.60);
    backdrop-filter: blur(10px);
    color:#1E2B40;
    border:1px solid rgba(255,255,255,0.45);
}

    .theme-gradient .myzone-thing-chip {
    background: rgba(255,255,255,0.65);
    backdrop-filter: blur(10px);
    color: #1E2B40;
    border: 1px solid rgba(255,255,255,0.45);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
}




.theme-gradient .settings-reset-btn {
    background: rgba(255,255,255,0.55);
    color: #1E2B40;
    border: 1px solid rgba(255,255,255,0.38);
    backdrop-filter: blur(12px);
}



.theme-gradient .settings-option {
    background: rgba(255,255,255,0.55);
    color: #1E2B40;
    border: 1px solid rgba(255,255,255,0.35);
    backdrop-filter: blur(10px);
}

.theme-gradient .settings-option.active {
    background: linear-gradient(135deg, #7EC8FF, #5FAEF5);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(120,170,255,0.35);
}
  body.theme-gradient .settings-reset-btn {
    background: rgba(255,255,255,0.45);
    color: #2A3A52;
    border: 1px solid rgba(255,255,255,0.32);
    backdrop-filter: blur(12px);
}


.theme-gradient .myzone-today-icon {
    background: linear-gradient(135deg, #F5FBFF, #DFF1FF) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 8px 20px rgba(190, 220, 255, 0.3) !important;
}
.theme-gradient .myzone-today-icon {
    background: linear-gradient(135deg, #F5FBFF, #DFF1FF) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 8px 20px rgba(190, 220, 255, 0.3) !important;
}
.calm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 25, 40, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== MOTYWACJA — CENTER MODAL (ŚRODEK EKRANU) ===== */

#motivationSheet {
    position: fixed;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.92);

    width: 88%;
    max-width: 420px;

    background: #ffffff;
    border-radius: 22px;
    padding: 22px 22px 28px;

    box-shadow: 0 8px 30px rgba(0,0,0,0.16);
    opacity: 0;
    transition: all 0.28s ease;
    z-index: 999;
}

#motivationSheet.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#overlay.active {
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(3px);
}

#motivationSheet .sheet-header .sheet-emoji {
    font-size: 42px;
}

#motivationSheet .sheet-buttons {
    margin-top: 42px;
    text-align: right;
}

#overlay {
    z-index: 990;  /* wyżej niż karty */
}

#motivationSheet {
    pointer-events: none;
}

#motivationSheet.active {
    pointer-events: auto;
}
/* ===== MOTYWACJA — ULTRA PREMIUM MODAL ===== */

#overlay.active {
    background: rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(12px);
}

/* Karta premium */
#motivationSheet {
    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%) scale(0.92);
    pointer-events: none;

    width: 88%;
    max-width: 430px;

    background: linear-gradient(145deg, #ffffff 0%, #f4f9ff 100%);
    border-radius: 32px;

    padding: 34px 26px 38px;

    box-shadow: 0 14px 40px rgba(0,0,0,0.22);
    opacity: 0;
    transition: all 0.32s cubic-bezier(.2,.85,.32,1.2);
    z-index: 999;
}

#motivationSheet.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

/* Ikona */
#motivationSheet .sheet-header {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 10px;
    margin-bottom: 20px;
}

#motivationSheet .sheet-header .sheet-emoji {
    font-size: 64px;
    margin-bottom: 2px;
}

/* Tytuł i opis */
#motivationTitle {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 2px;
}

#motivationDesc {
    font-size: 16px;
    color: #6f6f6f;
}

/* Treść narzędzia */
#motivationContent {
    margin-top: 22px;
    font-size: 16px;
    line-height: 1.65;
    color: #383838;
}

#motivationContent li {
    margin-bottom: 8px;
}

/* Przycisk — premium */
#motivationSheet .sheet-buttons {
    display: flex;
    justify-content: center;
    margin-top: 80px;
}

#motivationSheet .sheet-close-btn {
    background: linear-gradient(135deg, #00c8a8, #00a8ea);
    color: white;

    border: none;
    padding: 14px 38px;
    border-radius: 16px;
   margin-top: -55px !important;
    margin-bottom: 10px !important;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;

    box-shadow: 0 6px 18px rgba(0, 140, 200, 0.28);
    transition: transform 0.15s;
}

#motivationSheet .sheet-close-btn:active {
    transform: scale(0.95);
}
/* ========== ULTRA PREMIUM MODAL TŁO ========== */
#motivationSheet {
    background: rgba(255,255,255,0.55);                    /* półprzezroczyste szkło */
    backdrop-filter: blur(22px) saturate(140%);           /* rozmycie jak kulka */
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    border-radius: 32px;

    /* gradient jak w calm-mode */
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.60) 0%,
        rgba(240,245,255,0.65) 40%,
        rgba(225,238,255,0.52) 100%
    );
}

/* delikatny soft-shadow jak w calm fullscreen */
#motivationSheet {
    box-shadow:
      0 12px 45px rgba(0,0,0,0.15),
      0 4px 12px rgba(0,0,0,0.08);
}
#overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    z-index: 999;
}

#overlay.active {
    pointer-events: auto;
    opacity: 1;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(22px);
}
/* === PREMIUM WHITE INFO CARD – CENTERED === */

.motivation-info-card {
    background: rgba(255, 255, 255, 0.85);
    border-radius: 26px;
    padding: 28px 24px 32px;
    width: 82%;
    max-width: 360px;

    margin: 48px auto 0;     /* ŚRODEK STRONY */
    text-align: center;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow:
        0 12px 36px rgba(0,0,0,0.08),
        0 4px 12px rgba(0,0,0,0.04);

    position: relative;
}

/* Ikonka pulsująca */
.info-icon {
    font-size: 30px;
    margin-bottom: 10px;
    opacity: 0.9;
    animation: calmPulse 4s ease-in-out infinite;
}

@keyframes calmPulse {
    0% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 0.85; }
}

/* Teksty */
.info-title {
    font-size: 16px;
    font-weight: 600;
    color: #4a5565;
    margin-bottom: 6px;
}

.info-text {
    font-size: 14px;
    line-height: 1.55;
    color: #6b7a8a;
}
.motivation-info-card {
    animation: infoFloat 6s ease-in-out infinite;
}

@keyframes infoFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}
.tools-title {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;   /* identyczny jak Home, MyZone, Kalendarz */
    margin-bottom: 6px;
    letter-spacing: -0.2px;
}

.tools-subtitle {
   font-size: 14px;
    color: #6b7a8c;  /* elegancki, pastelowy */
    margin-bottom: 22px;
}
.icon-line {
    display: flex;
    align-items: flex-start;
    gap: 12px;             /* więcej przestrzeni między ikoną a tekstem */
    margin-bottom: 14px;   /* większy odstęp między liniami = premium */
    font-size: 15px;
    line-height: 1.5;
}

.icon-line span {
    display: block;
    flex: 1;
}
.help-category-item {
    background: rgba(255,255,255,0.75);
    padding: 14px 18px;
    margin: 10px 0;
    border-radius: 16px;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.help-category-item:hover {
    transform: scale(1.02);
    transition: 0.2s;
}

.help-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 500;
    color: #4A5568; /* premium soft gray */
    background: transparent;
    padding: 4px 6px;
    margin: 12px 0 8px 4px;
    border: none;        /* USUWA obramowanie */
    outline: none;       /* USUWA podświetlenie */
    box-shadow: none;    /* USUWA wszystkie ramki */
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: opacity .15s;
}

.help-back:hover {
    opacity: 0.7;
}

.help-back:active {
    opacity: 0.45;
}

.help-white-card {
    background: rgba(255,255,255,0.9);
    padding: 22px;
    border-radius: 20px;
    margin: 20px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
}

.help-section {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.45;
}
.help-category-item {
    background: rgba(255,255,255,0.92);
    padding: 16px 20px;
    border-radius: 16px;
    margin-bottom: 12px;
    font-size: 15px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
}

.help-category-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.help-category-item {
    background: rgba(255,255,255,0.92);
    padding: 16px 20px;
    border-radius: 18px;
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 500;
    color: #0F1A29;
    display: flex;
    justify-content: space-between; /* ← dzięki temu strzałka idzie na prawą stronę */
    align-items: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    cursor: pointer;
    transition: 0.18s ease;
}

.help-category-arrow {
    opacity: 0.35;
    font-size: 20px;
    margin-left: 10px;
}

.help-category-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}
.help-main-card {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* wypycha ptaszka na koniec */
}

.help-main-arrow {
    margin-left: auto;        /* strzałka leci maksymalnie na prawo */
    font-size: 22px;          /* trochę większa = bardziej widoczna */
    opacity: 0.45;            /* mocniejsza, premium vibe */
    transform: translateX(2px); /* delikatne przesunięcie */
}
.help-category-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    padding: 16px 20px;
    border-radius: 18px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform .15s ease, box-shadow .2s ease;
}

.help-category-item:active {
    transform: scale(.97);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

.help-icon {
    font-size: 24px;
    opacity: 0.95;
}

.help-texts {
    flex: 1;
}

.help-category-title {
    font-size: 16px;
    font-weight: 600;
    color: #0F1A29;
    margin-bottom: 2px;
}

.help-sub {
    display: block;
    font-size: 13px;
    color: #6B7A8A;
    margin-top: 3px;
}

.help-category-arrow {
    font-size: 20px;
     opacity: 0.3;
    margin-left: 6px;
    margin-right: 2px;
}
.help-icon {
    font-size: 26px !important;
    opacity: 0.92;
    transform: translateY(1px); /* równe wyrównanie baseline */
}
.help-category-item:active .help-icon {
    transform: scale(0.98);
    opacity: 0.8;
      box-shadow: 0 4px 10px rgba(0,0,0,0.06);

}
.help-icon {
    transform: translateY(1px);
}
.help-detail-card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(18px);
    padding: 22px;
    margin: 20px;
    border-radius: 22px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    animation: fadeIn 0.35s ease;
}

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

.help-detail-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
}

.help-detail-lead {
    font-size: 15px;
    color: #52637a;
    margin-bottom: 26px;
}


.help-step {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 18px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.help-step:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.help-step-icon {
    font-size: 22px;
    min-width: 26px;
    opacity: 0.9;
}

.help-step-content h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}
.help-step-content p {
    margin-top: 4px;
    font-size: 14px;
    color: #3a3a3a;
    line-height: 1.44;
}
.help-detail-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
}

.help-detail-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, #94b7ff, #c8d9ff);
    border-radius: 4px;
    margin-top: 10px;
margin-bottom: 14px;
}

.help-detail-card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 28px;
    padding: 32px 26px;
    margin: 32px 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.help-view {
    background: linear-gradient(180deg, #dfeeff 0%, #e8f3ff 100%);
}
.help-detail-card {
    margin: 24px;
}
.help-step {
    animation: fadeSlide .35s ease forwards;
    opacity: 0;
    transform: translateY(8px);
}

@keyframes fadeSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 600px) {
    .help-detail-card {
        margin: 20px 14px 24px 14px !important;
        padding: 22px 18px !important;
        border-radius: 26px !important;
        margin-top: 14px !important;
        margin-bottom: 36px !important;
        background: rgba(255,255,255,0.78) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
    }
}
@media (max-width: 600px) {
    .help-detail-title {
        font-size: 20px !important;
        margin-bottom: 6px !important;
    }
    .help-detail-title::after {
        width: 60px !important;
        height: 3px !important;
        margin-top: 8px !important;
        margin-bottom: 14px !important;
    }
}
@media (max-width: 600px) {
    .help-detail-lead {
        font-size: 14px !important;
        color: #64748b !important;
        margin-bottom: 20px !important;
        line-height: 1.35 !important;
    }
}
@media (max-width: 600px) {
    .help-step {
        padding: 14px 16px !important;
        margin-bottom: 12px !important;
        border-radius: 18px !important;
        backdrop-filter: blur(12px) !important;
    }

    .help-step-icon {
        font-size: 20px !important;
        min-width: 20px !important;
        margin-top: 4px !important;
    }

    .help-step-content h3 {
        font-size: 15px !important;
    }

    .help-step-content p {
        font-size: 14px !important;
        line-height: 1.35 !important;
        color: #4a5568 !important;

    }
}
.help-detail-title {
    text-shadow: 0 1px 2px rgba(0,0,0,0.04);
     color: #0f1c2e !important;
}
.help-step {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.95) 0%,
        rgba(240,246,255,0.93) 100%
    );
    border: 1px solid rgba(255,255,255,0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 20px;
    padding: 18px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.04);
    margin-bottom: 14px;
}
.help-step-icon {
    margin-top: 2px !important;
}
.help-detail-wrapper {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(240, 249, 255, 0.92) 55%,
        rgba(225, 243, 255, 0.87) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 26px;
    padding: 26px 22px;
    margin: 20px 16px 40px 16px;
    box-shadow: 0 8px 22px rgba(120,150,200,0.15);
}
.help-detail-card {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(240, 249, 255, 0.92) 55%,
        rgba(225, 243, 255, 0.87) 100%
    ) !important;

    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;

    border-radius: 26px !important;
    padding: 26px 22px;
    box-shadow: 0 8px 22px rgba(120,150,200,0.15);
}
.help-step-card {
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 18px;
    padding: 16px 18px;
    border: 1px solid rgba(255,255,255,0.45);
    box-shadow: 0 4px 12px rgba(120,150,200,0.10);
    margin-bottom: 14px;
}
.help-category-card {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.97) 0%,
        rgba(240, 249, 255, 0.92) 55%,
        rgba(225, 243, 255, 0.87) 100%
    );
    border: 1px solid rgba(255,255,255,0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 22px;
    box-shadow: 0 6px 18px rgba(120,150,200,0.15);
    padding: 14px 18px;
    margin-bottom: 14px;
}
/* === HELP – SPÓJNY GRADIENT JAK W MYZONE === */

.help-detail-card,
.help-step,
.help-category-item {
    background: linear-gradient(
        180deg,
        rgba(255,255,255,0.97) 0%,
        rgba(240,249,255,0.92) 55%,
        rgba(225,243,255,0.87) 100%
    ) !important;

    border: 1px solid rgba(255,255,255,0.65) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    box-shadow: 0 6px 18px rgba(120,150,200,0.15) !important;
}
.help-detail-card {
    animation: helpCardEnter 0.32s ease-out;
    transform-origin: bottom center;
}

@keyframes helpCardEnter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
        filter: blur(2px);
    }
    60% {
        opacity: 1;
        transform: translateY(4px) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.help-step {
    opacity: 0;
    transform: translateY(12px);
    animation: stepFade 0.45s ease-out forwards;
}

@keyframes stepFade {
    0% {
        opacity: 0;
        transform: translateY(12px);
        filter: blur(3px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* TU ustawiamy KOLEJNOŚĆ pojawiania się */
.help-step:nth-of-type(1) {
    animation-delay: 0.25s;
}
.help-step:nth-of-type(2) {
    animation-delay: 3.5s;
}
.help-step:nth-of-type(3) {
    animation-delay: 6.50s;
}
.help-step:nth-of-type(4) {
    animation-delay: 9.5s;
}
.help-step {
    opacity: 0;
    transform: translateY(14px);
    animation: stepFade 0.65s ease-out forwards, settle 1.2s ease-out forwards;
}

@keyframes settle {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(2px);
    }
}
.help-step-icon {
    animation: iconPop 0.6s ease-out forwards;
    transform-origin: center;
}

@keyframes iconPop {
    0% { transform: scale(0.85); opacity: 0; }
    60% { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); }
}
.help-detail-card {
    animation: bgFade 0.6s ease-out forwards;
}

@keyframes bgFade {
    0% { background: rgba(255,255,255,0.78); }
    100% { background: rgba(255,255,255,0.88); }
}
.help-container {
    animation: softDim 0.4s ease-out forwards;
}

@keyframes softDim {
    0% { opacity: 0.92; }
    100% { opacity: 1; }
}
.help-step {
    animation: stepFade 0.65s ease-out forwards, settle 1.4s ease-out forwards;
}

@keyframes settle {
    0% { transform: translateY(0); }
    100% { transform: translateY(2px); }
}
.help-step-icon {
    animation: iconPop 0.6s ease-out forwards;
}

@keyframes iconPop {
    0% { transform: scale(0.85); opacity: 0; }
    55% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); }
}
.help-step:first-child {
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.7));
    animation: firstFocus 1.2s ease-out forwards;
}

@keyframes firstFocus {
    0% { filter: drop-shadow(0 0 12px rgba(255,255,255,0.9)); }
    100% { filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
.help-detail-card {
    animation: bgFocus 0.6s ease-out forwards;
}

@keyframes bgFocus {
    0% { background: rgba(255,255,255,0.75); }
    100% { background: rgba(255,255,255,0.90); }
}
.help-detail-title {
    animation: titleFloat 0.5s ease-out forwards;
    transform-origin: left;
}

@keyframes titleFloat {
    0% { opacity: 0; transform: translateY(6px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.help-step:hover {
    background: rgba(255,255,255,0.30);
    transform: translateY(-1px);
    transition: all 0.25s ease;
}
.help-back {
    transition: transform 0.25s ease, opacity 0.2s;
}

.help-back:hover {
    transform: translateX(-3px);
    opacity: 0.7;
}
.help-detail-card {
    animation: helpCardEnter 0.45s cubic-bezier(0.17, 0.85, 0.32, 1.12);
}

@keyframes helpCardEnter {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.97);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
/* ------------------------------------------------------------------
   REFLECTME — FULL PREMIUM ANIMATIONS (v1)
   Author: ReflectMe Core Design System
   ------------------------------------------------------------------*/

/* ========== 1. GLOBAL FADE & SLIDE ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInSoft {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  0% { opacity: 0; transform: translateY(-16px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  0% { opacity: 0; transform: translateX(16px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  0% { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}


/* ========== 2. PAGE TRANSITIONS ========== */
.page-enter {
  animation: fadeUp 0.45s ease-out forwards;
}

.page-exit {
  animation: fadeDown 0.35s ease-in forwards;
}


/* ========== 3. TAB SWITCH ANIMATIONS ========== */
.tab-animate {
  animation: fadeInSoft 0.45s ease-out;
}


/* ========== 4. HELP — SEKWENCYJNE WEJŚCIA TEKSTU ========== */
.help-block {
  opacity: 0;
  animation: fadeInSoft 0.6s ease-out forwards;
}

.help-block:nth-child(1) { animation-delay: 0.15s; }
.help-block:nth-child(2) { animation-delay: 0.30s; }
.help-block:nth-child(3) { animation-delay: 0.45s; }
.help-block:nth-child(4) { animation-delay: 0.60s; }

/* animacja ikon kategorii */
.help-category-icon {
  opacity: 0;
  transform: scale(.85);
  animation: categoryPop 0.5s ease-out forwards;
}
@keyframes categoryPop {
  0% { opacity: 0; transform: scale(.7); }
  70% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}


/* ========== 5. TAP BOUNCE (Karty + Emoji + Przyciski) ========== */
.tap {
  transition: transform 0.12s ease;
}
.tap:active {
  transform: scale(.94);
}

.big-tap {
  transition: transform 0.13s cubic-bezier(.17,.67,.35,1.9);
}
.big-tap:active {
  transform: scale(.88);
}


/* ========== 6. CARDS FLOATING ENTRANCE (Home, MyZone, Help) ========== */
.card-fade {
  opacity: 0;
  animation: cardFloat 0.55s ease-out forwards;
}
@keyframes cardFloat {
  0% { opacity: 0; transform: translateY(20px) scale(.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* ========== 7. MICRO-PULSE FOR IMPORTANT ICONS (np. strzałka pomoc) ========== */
@keyframes pulseSoft {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: .85; }
  100% { transform: scale(1); opacity: 1; }
}

.pulse-soft {
  animation: pulseSoft 2.2s ease-in-out infinite;
}


/* ========== 8. CLOUD FLOATING (tła chmurowe) ========== */
@keyframes cloudFloat {
  0% { transform: translateY(0px); opacity: 0.85; }
  50% { transform: translateY(-6px); opacity: 1; }
  100% { transform: translateY(0px); opacity: 0.85; }
}

.cloud {
  animation: cloudFloat 6s ease-in-out infinite;
}


/* ========== 9. PROGRESS BAR / HEADER UNDERLINE ANIMATION ========== */
@keyframes expandLine {
  0% { width: 0%; opacity: 0; }
  100% { width: 100%; opacity: 1; }
}

.line-animate {
  animation: expandLine 1.1s cubic-bezier(.25,.1,.25,1) forwards;
}


/* ========== 10. CATEGORY REVEAL FADE ========== */
.category-reveal {
  opacity: 0;
  animation: fadeInSoft 0.5s ease-out forwards;
}


/* ========== 11. MODAL / POPUP ANIMATION ========== */
@keyframes popupIn {
  0% { opacity: 0; transform: translateY(30px) scale(.9); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.popup-animate {
  animation: popupIn .45s ease-out forwards;
}


/* ========== 12. PREMIUM BUTTON HOVER GLOW (tylko desktop) ========== */
@media (hover: hover) {
  .btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,.18);
  }
}

/* Dynamic background mood */
.mood-bg {
    transition: background .6s ease, 
                box-shadow .6s ease;
}
.gauge-emoji {
    transition: transform .25s cubic-bezier(.25,.46,.45,1), 
                opacity .25s ease,
                filter .25s ease;
}

.gauge-emoji.active {
    transform: scale(1.25);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.2));
}

.gauge-emoji:active {
    transform: scale(.9);
}
.home-screen {
    animation: pageFade 0.5s ease-out;
}

@keyframes pageFade {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
#send-btn {
    transition: background .25s ease, 
                transform .25s cubic-bezier(.25,.46,.45,1);
}

#send-btn.enabled {
    transform: scale(1.04);
    box-shadow: 0 6px 18px rgba(255, 140, 90, .35);
}

#send-btn:active {
    transform: scale(.95);
}


/* --- ANIMACJA HOME: wejście --- */
.home-enter {
    animation: homeEnter 0.9s ease forwards;
}

@keyframes homeEnter {
    0% {
        opacity: 0;
        transform: translateY(22px) scale(0.99);
        filter: blur(4px);
    }
    60% {
        opacity: 1;
        transform: translateY(0) scale(1.01);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.tab-enter {
    animation: tabFade 0.55s ease forwards;
}

@keyframes tabFade {
    0% { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(4px); }
    60% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.home-enter {
    animation: homeEnter 0.9s cubic-bezier(.25,.1,.25,1) forwards;
}

@keyframes homeEnter {
    0% { opacity: 0; transform: translateY(25px) scale(.97); filter: blur(8px); }
    40% { opacity: .9; transform: translateY(0) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: scale(1); }
}
.fade-seq {
    animation: fadeSeq .6s ease forwards;
}

@keyframes fadeSeq {
    0% { opacity: 0; transform: translateY(10px) scale(.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fade-slide {
    animation: fadeSlide .6s ease forwards;
    opacity: 0;
}

@keyframes fadeSlide {
    0% { opacity: 0; transform: translateX(-12px) scale(.97); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
.fade-up {
    animation: fadeUp .55s ease forwards;
    opacity: 0;
}

@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(12px) }
    100% { opacity: 1; transform: translateY(0) }
}
/* ANIMACJA PREMIUM: Pojawienie Pomocy */
.fade-slide-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeSlideIn 0.45s ease-out forwards;
}

@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* premium animation for Help – fade + slide up */
.fade-up {
    opacity: 0;
    transform: translateY(12px);
    animation: fadeUp 0.45s ease-out forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-up {
    opacity: 0;
    transform: translateY(14px);
    animation: fadeUp 0.45s ease-out forwards;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* BASE FADE + SLIDE */
.fade-base {
    opacity: 0;
}

/* Enter animations */
.enter-left {
    animation: enterLeft 0.45s cubic-bezier(.25, .8, .25, 1) forwards;
}
.enter-right {
    animation: enterRight 0.45s cubic-bezier(.25, .8, .25, 1) forwards;
}

/* Exit animations */
.exit-left {
    animation: exitLeft 0.35s cubic-bezier(.4, .0, .2, 1) forwards;
}
.exit-right {
    animation: exitRight 0.35s cubic-bezier(.4, .0, .2, 1) forwards;
}

/* Directional Animations */
@keyframes enterLeft {
    from { transform: translateX(25px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes enterRight {
    from { transform: translateX(-25px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes exitLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-20px); opacity: 0; }
}
@keyframes exitRight {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(20px); opacity: 0; }
}

/* STAGGER CONTENT */
.stagger-anim {
    animation: fadeSlideUp 0.55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* =====================================
   NAV – PREMIUM TRANSITIONS (iOS style)
   ===================================== */

/* Wejście zakładki z prawej (przejście w przód) */
.tab-enter-from-right {
    animation: tabEnterFromRight 0.45s cubic-bezier(.16, 1, .3, 1) both;
}

/* Wejście zakładki z lewej (przejście wstecz) */
.tab-enter-from-left {
    animation: tabEnterFromLeft 0.45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes tabEnterFromRight {
    from {
        opacity: 0;
        transform: translateX(24px) translateY(4px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}

@keyframes tabEnterFromLeft {
    from {
        opacity: 0;
        transform: translateX(-24px) translateY(4px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0) scale(1);
    }
}
/* ===== PREMIUM TRANSITIONS — GLOBAL (FIX) ===== */
.tab {
  opacity: 0;
  transform: none;                 /* <-- klucz: zero transform na bazie */
  transition: opacity .32s ease;
}

.tab.active {
  opacity: 1;
}

/* wejście z prawej/lewej zostaje na klasach animacji */
.tab-enter-from-right { transform: translateX(22px); opacity: 0; }
.tab-enter-from-left  { transform: translateX(-22px); opacity: 0; }

.tab.active.tab-enter-from-right,
.tab.active.tab-enter-from-left {
  transform: translateX(0);
  opacity: 1;
  transition: transform .32s cubic-bezier(.17,.84,.44,1), opacity .32s ease;
}



.gauge-emoji::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.4);
    transition: all .28s cubic-bezier(.25,.46,.45,1);
    filter: blur(12px);
    z-index: -1;
}

.gauge-emoji.active::after {
    opacity: 0.20;
    transform: scale(1.6);
}

/* === BIG EMOJI – ANIMACJA PREMIUM (FINAL) === */



/* Klasa uruchamiana z JS */
#big-emoji.emoji-bounce {
    animation: bigEmojiBounce 0.42s cubic-bezier(.25,1.4,.35,1) forwards;
}

/* Naturalny ruch – Inspired by iOS icon pop */
@keyframes bigEmojiBounce {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.14); }  /* wdech */
    55%  { transform: scale(0.96); }  /* odbicie w dół */
    100% { transform: scale(1); }     /* spokój */
}
.fade-seq {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeSeqIn 0.45s ease-out forwards;
}

@keyframes fadeSeqIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}
#app-loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #F7FAFF, #EAF2FF);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.4s ease;
}

#app-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Minimalistyczne kółko premium */
.loader-circle {
    width: 38px;
    height: 38px;
    border: 4px solid rgba(0,0,0,0.15);
    border-top-color: #14C6A3;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}
/* ============================================
   REFLECTME — FINAL SPLASH (PRODUCTION)
   ============================================ */

#reflectme-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;

    background: linear-gradient(
        180deg,
        #dff0ff 0%,
        #d4e9ff 40%,
        #c4dcfd 75%,
        #bdd4fb 100%
    );

    display: flex;
    justify-content: center;
    align-items: center;

    transition: opacity 0.35s ease;
}

/* BLOK ŚRODKOWY */
.splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-6%);
}

/* LOGO — STATYCZNE */
.splash-logo-img {
    width: 160px;
    max-width: 72vw;
    height: auto;

    filter: drop-shadow(0 10px 22px rgba(0,0,0,.12));
}

/* SPINNER — JEDYNY RUCH */
.splash-spinner {
    width: 40px;
    height: 40px;

    border: 4px solid rgba(0,0,0,0.15);
    border-top-color: #14C6A3;
    border-radius: 50%;

    margin-top: 16px;
    animation: spin 0.8s linear infinite;
}

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

/* ZNIKANIE */
#reflectme-splash.hidden {
    opacity: 0;
    pointer-events: none;
}

.emoji-bounce {
    animation: emojiSoft 0.36s cubic-bezier(0.25, 0.9, 0.35, 1);
}

@keyframes emojiSoft {
    0% {
        transform: scale(0.96);
    }
    55% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}
/* 1) Jedno źródło tła – tylko tutaj */

/* 2) Zakładki / wrappery NIE mogą mieć własnych gradientów */
.app,
.page,
.tab,
.screen,
#app {
  background: transparent !important;
}
/* DO NOT POLISH UNTIL FINAL UI PASS */
.app-shell {
  max-width: 100%;
  margin: 0 auto;
}
/* ================= ANONIMOWOŚĆ — MINI SHEET ================= */

.anon {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;

  background:   rgba(242,247,252,0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.anon.hidden {
  display: none;
}

.anon-box {
  width: min(520px, 92%);
  background: #ffffff;
  border-radius: 26px;
  padding: 24px 22px;

  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
  text-align: left;
}

.anon-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 12px;
  color: #0F1A29;
}

.anon-box ul {
  padding-left: 18px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: #2F3E52;   /* zamiast bardzo jasnego szaro-niebieskiego */
}

.anon-box button {
  margin-top: 18px;
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 12px;

  font-weight: 600;
    background: linear-gradient(135deg, #00c8a8, #00a8ea) !important;
  color: #fff;
}
/* ================= MIĘKKIE ZAMYKANIE OVERLAY ================= */

.overlay-exit {
  animation: overlayExit 0.28s ease forwards;
}

@keyframes overlayExit {
  to {
    opacity: 0;
    transform: scale(0.98);
  }
}
/* ===== PREMIUM POWRÓT DO HOME (Z OVERLAY) ===== */

.home-soft-return {
  animation: homeSoftReturn 0.42s cubic-bezier(.22,.9,.35,1);
}

@keyframes homeSoftReturn {
  from {
    opacity: 0.94;
    transform: scale(0.985) translateY(8px);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}
.day-snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(70px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(12px);
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
}

.day-snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* =========================
   HOME — stan po wysłaniu
   ========================= */
body.day-complete #home .info-small,
body.day-complete #home .comment-box,
body.day-complete #home .info-anon,
body.day-complete #home #send-btn {
  display: none !important;
}

body.day-complete #home .home-mood-card {
  opacity: 0.85;
}

body.day-complete #home .gauge-wrapper {
  opacity: 0.95;
}

/* blokujemy wybieranie nastroju po wysłaniu */
body.day-complete #home .gauge-emoji {
  pointer-events: none;
  opacity: 0.75;
}
.day-status {
  display: none;              /* domyślnie NIE WIDAĆ */
  margin: 14px 0 8px;
  padding: 8px 14px;

  font-size: 18px;
  font-weight: 500;
  text-align: center;

  color: #4f6b57;
  border-radius: 12px;

  backdrop-filter: blur(6px);
}
.day-status:not(.hidden) {
  display: block;
}
/* ============================= */
/* MYZONE – SELECT OVERLAY */
/* ============================= */

.myzone-select-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* karta */
.myzone-select-box {
  width: min(92%, 420px);
  max-height: 70vh;
  overflow-y: auto;

  background: #ffffff;
  border-radius: 22px;
  padding: 18px;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* przyciski z rzeczami */
.myzone-select-box button {
  border: none;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f2f2f2;
  font-size: 14px;
  cursor: pointer;
  transition: 0.15s ease;
}

.myzone-select-box button.active {
  background: #22c7a9;
  color: white;
  font-weight: 600;
}

.myzone-select-box button:active {
  transform: scale(0.97);
}

/* przycisk zapisu */
.myzone-select-box .save-btn {
  grid-column: span 2;
  margin-top: 8px;

  background: linear-gradient(135deg, #22c7a9, #3bd3b5);
  color: white;
  font-weight: 600;
}
.myzone-things-header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}


.myzone-edit-btn {
  background: rgba(255, 255, 255, 0.6);
  border: none;
  border-radius: 10px;
  padding: 6px 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.myzone-edit-btn:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.05);
}

.myzone-edit-btn:active {
  transform: scale(0.95);
}
.myzone-toast {
  position: fixed;
  bottom: 200px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s ease;
  z-index: 20000; /* ⬅️ WAŻNE */
}

.myzone-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
body {
  background: linear-gradient(
    180deg,
    #fbfdff 0%,      /* prawie czysta biel – oddech dla nagłówka */
    #f2f8ff 16%,     /* miękkie przejście */
    #e6f2ff 42%,     /* sweet spot pod karty */
    #d4e8ff 72%,     /* spokojna głębia */
    #c3dcf6 100%     /* dół – zamknięcie ekranu */
  );
  min-height: 100vh;
}
/* === FIX: calm mode ma CZYSTE, JASNE TŁO === */
body.theme-gradient .overlay,
body.theme-gradient .calm-overlay {
    background: transparent !important;
    backdrop-filter: none !important;
}
.myzone-week-bubble {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  background: rgba(255,255,255,0.55);
}
.myzone-week-bubble.mood-fatalnie {
  background: rgba(231, 76, 60, 0.20);
}

.myzone-week-bubble.mood-stres {
  background: rgba(241, 196, 15, 0.20);
}

.myzone-week-bubble.mood-neutralnie {
  background: rgba(52, 152, 219, 0.16);
}

.myzone-week-bubble.mood-pozytywnie {
  background: rgba(39, 174, 96, 0.18);
}

.myzone-week-bubble.mood-rewelacyjnie {
  background: rgba(46, 204, 113, 0.22);
}
.myzone-week-emoji-svg {
  width: 26px;
  height: 26px;
}

/* =====================================================
   HOME — RESPONSIVE HEIGHT SYSTEM (FINAL)
   Nie zmienia logiki, tylko layout
   ===================================================== */

/* ====== 1️⃣ NISKIE EKRANY (np. iPhone 12, SE, małe Androidy) ====== */
@media (max-height: 720px) {

  #home {
    padding-bottom: 64px; /* mniej miejsca na dół */
  }

  .home-title {
    font-size: 24px;
    margin-top: 18px;
    margin-bottom: 16px;
  }

 

  .mood-label {
    font-size: 16px;
    margin-top: 18px;
    margin-bottom: 8px;
  }

  .home-mood-card {
    padding: 18px 16px 16px;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .gauge-wrapper {
  max-width: 360px;   /* 🔑 KLUCZ */
    height: 150px;
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .gauge-emoji {
    font-size: 32px;
  }

  .comment-box {
    min-height: 70px;
  }

  .send-btn {
    margin-top: 12px;
    padding: 12px;
  }
}


/* ====== 2️⃣ STANDARD (większość telefonów) ====== */
@media (min-height: 721px) and (max-height: 820px) {

 

  .gauge-wrapper {
    max-width: 330px;
    height: 165px;
  }
}


/* ====== 3️⃣ DUŻE EKRANY / PRO / PLUS ====== */
@media (min-height: 821px) {

  /* Nic nie zmieniamy — zostaje premium jak teraz */
}
/* ================================
   HOME — FULL VIEWPORT (FINAL FIX)
   ================================ */

/* domyślnie: brak scrolla */
#app {
  overflow: hidden;
}

/* scroll tylko poza Home */
body:not(.home-active) #app {
  overflow-y: auto;
}

/* Home zajmuje CAŁY ekran roboczy */
body.home-active #home {
  min-height: calc(100dvh - 50px - 60px); 
  /* 50px header + 60px bottom-nav */
  display: flex;
  flex-direction: column;
}

/* karta nie wypycha ekranu */
body.home-active .home-mood-card {
  margin-bottom: 16px;
}

/* usuń sztuczne dobijanie */
body.home-active #home {
  padding-bottom: 0;
}
/* ====================================
   HOME — VISUAL PADDING (FINAL)
   ==================================== */

#home {
  padding-left: 16px;
  padding-right: 16px;
}

/* karta wygląda "pływająco" */
.home-mood-card {
  margin-left: auto;
  margin-right: auto;
  max-width: 480px;
}
/* ====================================
   FINAL: GAUGE FULL-BLEED (CORRECT)
   ==================================== */


/* tylko sekcja gauge wychodzi na pełną szerokość */
.home-mood-card .gauge-wrapper {
  margin-left: -16px;
  margin-right: -16px;

  /* KLUCZ: NIE ruszamy width ani transform */
}
/* ====================================
   FINAL: CENTER GAUGE INSIDE CARD
   ==================================== */

/* karta zarządza osiami */
.home-mood-card {
  display: flex;
  flex-direction: column;
  align-items: center; /* 🔑 TO JEST KLUCZ */
  overflow: visible;

}

/* gauge ma naturalną szerokość */
.home-mood-card .gauge-wrapper {
  width: 100%;
  max-width: 360px; /* dopasuj do swojego gauge */
  margin-left: auto;
  margin-right: auto;
}
/* =========================
   GLOBAL VIEW HEIGHT FIX
   ========================= */

/* każdy widok (Home, Kalendarz, MyZone, Pomoc) */
.view,
.tab,
.page {
  min-height: calc(100dvh - 64px); 
  /* 64px = bottom nav */
  box-sizing: border-box;
}
/* =========================
   GLOBAL CONTENT PADDING
   ========================= */

#home,
#calendar,
#stats,
#help {
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}
.gauge-wrap {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 12px auto 0;
}

.mood-gauge {
  display: block;
  width: 100%;
  height: auto;
}
.mood-gauge {
  position: relative;
  z-index: 2;        /* ⬅️ NAD kolorami */
}
.gauge-wrap {
  position: relative;
  overflow: visible; /* 🔑 MUSI BYĆ visible */
}
.gauge-emojis {
  position: absolute;
  inset: 0;          /* ⬅️ MUSI pokrywać cały gauge-wrap */
  z-index: 3;        /* ⬅️ NAD łukiem */
  pointer-events: auto;
  font-size: 42px;
  background: none;
}

.gauge-emoji {
  position: absolute;
  font-size: 42px;
  background: none;
  border: none;
  pointer-events: auto;
}
/* === GAUGE EMOJI: CLEAN (NO GREY BOX) === */
.gauge-emoji{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}

.gauge-emoji:focus{ outline:none !important; }
.gauge-emoji:active{ background: transparent !important; }

/* =========================
   GAUGE — 5 KOLOROWYCH SEKCJI (SVG)
   ========================= */

.gauge-track {
  opacity: 1;
}

.gauge-seg {
  /* premium: kolor ma być “czysty”, ale nie agresywny */
  opacity: 0.92;
}

/* Kolory (spokojne, edukacyjne) */
.gauge-seg.seg-1 { stroke: #D96A5E; } /* bardzo źle */
.gauge-seg.seg-2 { stroke: #F0B36A; } /* źle / stres */
.gauge-seg.seg-3 { stroke: #F3D8A4; } /* neutralnie */
.gauge-seg.seg-4 { stroke: #77DD77; } /* dobrze */
.gauge-seg.seg-5 { stroke: #2FBF8F; } /* bardzo dobrze */
/* =========================
   NEEDLE – PRO (SAFE)
   ========================= */
.gauge-wrap {
  position: relative;
}

/* =========================
   NEEDLE — FINAL / JEDYNA
   ========================= */

.needle-wrap {
  position: absolute;
  left: 50%;
  bottom: -65px;
  transform: translateX(-50%);
  width: 130px;
  height: 200px;
  z-index: 10;
  pointer-events: none;
}

.needle-svg {
  display: block;
  width: 130px;
  height: 200px;

  transform-box: fill-box;
  transform-origin: 50% 69.23%;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
/* SVG w przyciskach: klik ma być na button, nie na img */
.mood-emoji { 
 width: 43px;
  height: 43px;
  display: block;
  pointer-events: none;
  object-fit: contain;
}

/* Ukryj fallback tekst emoji (zostaje dla JS/awaryjnie) */
.emoji-fallback {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.big-emoji-wrapper {
  position: relative;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}


#big-emoji {
    font-size: 200px; /* było 130px */
   position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* === BIG EMOJI (CENTER + SIZE) === */

.big-emoji {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  margin: 12px 0 8px;   /* odstęp od góry i labela */
}

.big-emoji-img {
   width: 148px;
  height: 148px;
  display: block;
}

#big-emoji-char {
  font-size: 96px;
  line-height: 1;
}
/* === BIG EMOJI – BOUNCE NA IMG (FINAL, SAFE) === */

.big-emoji-img {
  transform-origin: center;
  will-change: transform;
}

.big-emoji-img.emoji-bounce {
  animation: bigEmojiBounce 0.38s cubic-bezier(.25, 1.4, .35, 1);
}

@keyframes bigEmojiBounce {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.14);
  }
  55% {
    transform: scale(0.96);
  }
  100% {
    transform: scale(1);
  }
}
.gauge-emoji svg {
  pointer-events: none;
}
.myzone-today-icon img.myzone-emoji-svg {
  width: 86px;
  height: 86px;
}
.day-emoji-disabled {
  opacity: 0.28;
  filter: grayscale(100%) blur(0.2px);
}
:root {
  --bottom-nav-height: 72px; /* fallback */
}
.page,
.page-content,
.main-content {
  padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
}
.bottom-nav {
  padding-bottom: env(safe-area-inset-bottom);
}
#bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 72px; /* JEDNA wartość */
  z-index: 100;
}