:root {
    /* --- NAUJA SPALVŲ PALETĖ --- */
    --deep-blue: #1D1A39;
    --deep-purple: #451952;
    --muted-purple: #662549;
    --rose-mauve: #AE445A;
    --sunset-orange: #F39F5A;
    --pale-pink: #E8BCB9;
    
    /* Teksto spalvos */
    --text-main: #ffffff;
    --text-secondary: #E8BCB9; /* Naudojame tą šviesią spalvą tekstui */
    
    --border-radius: 24px;
    --glass-border: 1px solid rgba(255, 255, 255, 0.1);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

body {
    font-family: 'Poppins', sans-serif;
    /* PEREINAMAS FONAS (Gradientas iš tamsios į šviesesnę) */
    background: linear-gradient(180deg, var(--deep-blue) 0%, var(--deep-purple) 50%, var(--muted-purple) 100%);
    background-attachment: fixed; /* Kad fonas judėtų kartu */
    margin: 0;
    padding: 0;
    color: var(--text-main);
    min-height: 100vh;
    padding-bottom: 50px; 
}

/* Konteineris turi būti permatomas, kad matytųsi fonas */
.screen-container {
    max-width: 430px;
    margin: 0 auto;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    /* Išjungiame fono spalvą, kad matytųsi gradientas */
    background-color: transparent; 
}

.hidden { display: none !important; }

/* --- PRISIJUNGIMAS --- */
.auth-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80vh;
    text-align: center;
}

.auth-title { 
    font-size: 2.2em; 
    margin-bottom: 30px; 
    color: var(--text-main);
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* Modernūs įvesties laukai (Tamsūs su permatomumu) */
.modern-input, .clean-input, .styled-select {
    background: rgba(29, 26, 57, 0.6); /* Tamsiai mėlyna su permatomumu */
    border: var(--glass-border);
    padding: 18px;
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 15px;
    font-size: 1em;
    color: var(--text-main); /* Baltas tekstas */
    outline: none;
    backdrop-filter: blur(4px);
}
.modern-input::placeholder { color: rgba(232, 188, 185, 0.6); }

/* Pagrindinis mygtukas (Oranžinė - Sunset Orange) */
.primary-btn {
    background: linear-gradient(135deg, var(--sunset-orange), #e67e22);
    color: #fff;
    border: none;
    padding: 18px;
    border-radius: 16px;
    width: 100%;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(243, 159, 90, 0.4); /* Oranžinis šešėlis */
    margin-top: 10px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.primary-btn:active { transform: scale(0.98); }

.error-msg { 
    color: var(--rose-mauve); 
    background: rgba(0,0,0,0.2);
    padding: 10px;
    border-radius: 10px;
    margin-top: 10px; 
}

/* --- PAGRINDINIS EKRANAS --- */
.app-header {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 20px; /* Sumažinau tarpą, kad būtų kompaktiškiau */
}

/* Vartotojo vardas - sumažintas */
.user-name { 
    font-weight: 600; 
    font-size: 0.7em; /* Buvo 1.2em, dabar mažesnis */
    color: var(--pale-pink); 
    max-width: 150px; /* Apsauga, jei vardas labai ilgas */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Atsijungti mygtukas - dabar tilps tekstas */
.header-icons button { 
    background: rgba(255,255,255,0.1); 
    border: 1px solid rgba(255,255,255,0.2); /* Pridėjau rėmelį */
    border-radius: 12px; /* Jau nebe apskritimas, o užapvalintas stačiakampis */
    padding: 8px 16px; /* Svarbu: vietos tekstui */
    width: auto; /* Svarbu: plotis prisitaiko prie teksto */
    height: auto; /* Aukštis automatinis */
    font-size: 0.85em; /* Mažesnis šriftas mygtukui */
    cursor: pointer; 
    color: var(--text-main); 
    transition: background 0.3s;
}

.header-icons button:hover {
    background: rgba(255,255,255,0.2);
}

/* Konteineriai su "Glass" efektu */
.input-container {
    background: rgba(69, 25, 82, 0.4); /* Deep Purple permatomas */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: var(--border-radius);
    border: var(--glass-border);
    box-shadow: var(--card-shadow);
    margin-bottom: 20px;
    color: var(--text-main);
}
.input-container h3 { margin-top: 0; color: var(--pale-pink); }

/* --- KORTELĖS (Pritaikytos paletei) --- */

/* Hero kortelė (Fotografuoti) - Rose Mauve gradientas */
.hero-card {
    /* --- PAKEISTOS EILUTĖS --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
    /* MAŽINAME TARPUS ČIA: */
    gap: 4px;              /* Mažas tarpelis tarp eilučių */
    padding: 15px 20px;    /* Sumažintas viršutinis/apatinis tarpas (buvo 30px) */
    height: auto;
    
    /* --- SENAS STILIUS --- */
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--card-shadow);
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s;
    border: var(--glass-border);
    text-decoration: none;
}

/* --- SVARBU: Panaikiname didelius tarpus nuo tekstų viduje --- */
.hero-card h3 {
    margin: 0;             /* Nuimame antraštės paraštes */
    font-size: 1.2rem;     /* Galite šiek tiek pamažinti šriftą, jei reikia */
    line-height: 1.2;
}

.hero-card p {
    margin: 0;             /* Nuimame pastraipos paraštes */
    line-height: 1.2;
}

/* Rankos užrašo stilius */
.camera-hint {
    display: block !important;
    font-size: 0.75rem !important; /* Šiek tiek mažesnis šriftas taupo vietą */
    font-weight: normal;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9) !important;
    
    /* Sumažinti tarpai */
    margin-top: 4px !important; 
    padding: 2px 8px;      /* Mažesnis padding aplink patį tekstą */
    
    border-radius: 6px;
    text-align: center;
    width: fit-content;
    background: rgba(0, 0, 0, 0.15); /* Švelnus fonas */
}


/* Spalvų variantai kortelėms */
.card-pink { 
    /* Rose/Mauve spalva */
    background: linear-gradient(135deg, var(--rose-mauve), var(--muted-purple)); 
    color: white;
}
.card-pink h3 { color: white; margin-bottom: 5px; font-size: 1.3em;}
.card-pink p { color: rgba(255,255,255,0.8); }

.card-yellow {
    /* Orange/Gold spalva (Klausimams) */
    background: linear-gradient(135deg, var(--sunset-orange), var(--rose-mauve));
    color: white;
    padding: 25px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    box-shadow: var(--card-shadow);
}
.card-yellow h3 { margin-top: 0; color: white; }

.card-blue {
    /* Deep Purple spalva (Pasisveikinimui) */
    background: linear-gradient(135deg, var(--deep-purple), var(--deep-blue));
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
}

/* Rezultatai */
#imagePreview { max-width: 100%; border-radius: 16px; margin-bottom: 15px; display: block; border: 2px solid var(--pale-pink); }
.status-box { 
    text-align: center; padding: 15px; color: var(--pale-pink); font-weight: 500;
    background: rgba(0,0,0,0.2); border-radius: 12px; margin: 10px 0;
}

.result-card { 
    background: rgba(255, 255, 255, 0.95); /* Beveik baltas, kad tekstas būtų ryškus */
    padding: 25px; 
    height: auto;
    border-radius: var(--border-radius); 
    box-shadow: var(--card-shadow); 
    margin-bottom: 20px; 
    line-height: 1.6;
    color: var(--deep-blue); /* Tamsus tekstas ant šviesaus fono */
}

/* Istorija */
.history-toggle-btn {
    background: rgba(255, 255, 255, 0.1); 
    color: var(--text-main); 
    border: 1px solid rgba(255,255,255,0.2);
    padding: 18px;
    border-radius: 16px; 
    width: 100%; 
    text-align: left; 
    font-weight: 600;
    cursor: pointer; 
    display: flex; justify-content: space-between; align-items: center;
    backdrop-filter: blur(5px);
}

.history-container { margin-top: 15px; }

.history-card {
    background: rgba(69, 25, 82, 0.6); /* Tamsi violetinė permatoma */
    padding: 20px; 
    border-radius: 16px; 
    margin-bottom: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    font-size: 0.95em; 
    border-left: 4px solid var(--sunset-orange);
    color: var(--pale-pink);
    border: 1px solid rgba(255,255,255,0.05);
}

.history-date { 
    font-size: 0.8em; 
    color: rgba(255,255,255,0.6); 
    display: block; 
    margin-bottom: 5px; 
}
/* --- GRIEŽTAS PATAISYMAS MAISTO PAVADINIMO LAUKUI --- */
#foodNameInput {
    /* Fonas: 90% baltumo (šiek tiek prigesintas, nebe toks rėkiantis) */
    background-color: rgba(255, 255, 255, 0.9) !important; 
    padding: 10px;
    box-sizing: border-box;
    /* Tekstas: Tamsiai mėlyna iš jūsų paletės (nebe juoda) */
    color: #1D1A39 !important; 
    -webkit-text-fill-color: #1D1A39 !important; 
    
    /* Rėmelis: Plonesnis ir švelnesnis */
    border: 1px solid rgba(29, 26, 57, 0.3) !important; 
    
    font-weight: 600 !important; /* Šiek tiek plonesnis šriftas, bet vis dar ryškus */
}
/* Antrinis mygtukas (Garso skaitymui) */
.secondary-btn {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-main);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 12px;
    border-radius: 16px;
    width: 100%;
    font-size: 1em;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background 0.3s;
}
.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}
/* Slaptažodžio priminimo nuoroda */
.forgot-link {
    color: var(--text-secondary); /* Naudojame jūsų paletės šviesią spalvą */
    font-size: 0.9em;
    text-align: right; /* Stumiame į dešinę */
    margin-top: -10px;
    margin-bottom: 20px;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s;
}

.forgot-link:hover {
    color: var(--text-main); /* Užvedus tampa balta */
}


/* --- RECEPTŲ STILIUS (Atnaujintas Pastelinis) --- */

.recipe-card {
    /* NAUJA: Švelnus, pastelinis persikų/oranžinis fonas su permatomumu */
    background: rgba(243, 159, 90, 0.15); /* Naudojame Sunset Orange su 15% matomumu */
    backdrop-filter: blur(10px); /* Pridedame stiklo efektą */
    border: 1px solid rgba(243, 159, 90, 0.3); /* Švelnus rėmelis */
    
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    /* Kairysis kraštas ryškesnis */
    border-left: 5px solid var(--sunset-orange);
}

.recipe-title {
    font-weight: 700;
    font-size: 1.2em;
    margin-bottom: 8px;
    /* Antraštė - šviesiai rausva iš paletės */
    color: var(--pale-pink);
}

.recipe-desc {
    font-size: 0.95em;
    margin-bottom: 15px;
    /* Aprašymas - balkšvas, kad gerai matytųsi */
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.4;
}

.recipe-toggle-btn {
    background: rgba(243, 159, 90, 0.2); /* Šiek tiek tamsesnis mygtuko fonas */
    border: 1px solid var(--sunset-orange);
    color: var(--sunset-orange); /* Tekstas oranžinis */
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 0.9em;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recipe-toggle-btn:hover {
    background: var(--sunset-orange);
    color: var(--deep-blue); /* Užvedus tekstas patamsėja */
    box-shadow: 0 0 15px rgba(243, 159, 90, 0.4);
}

/* Išskleistas receptas */
.full-recipe {
    margin-top: 20px;
    padding: 20px;
    /* Viršutinė linija punktyrinė oranžinė */
    border-top: 2px dashed rgba(243, 159, 90, 0.4);
    font-size: 0.95em;
    line-height: 1.7;
    /* Fonas šiek tiek tamsesnis už kortelę, kad išsiskirtų */
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 12px;
    color: var(--text-main); /* Baltas tekstas */
}


/* --- KROVIMO INDIKATORIUS (BŪTINA DALIS) --- */

/* 1. Pats besisukantis ratukas */
.spinner {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto 15px auto; /* Centruojame ir padarome tarpą nuo teksto */
    border: 4px solid rgba(255, 255, 255, 0.2); /* Šviesus pagrindas */
    border-radius: 50%; /* Padaro apskritimą */
    border-top: 4px solid var(--sunset-orange); /* Oranžinė besisukanti dalis */
    animation: spin 1s linear infinite; /* Sukimosi animacija */
}

/* 2. Sukimosi animacijos taisyklės */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 3. Konteinerio pataisymai, kad tekstas būtų viduryje ir matomas */
#loading {
    display: flex;
    flex-direction: column; /* Elementai vienas po kitu */
    align-items: center;
    justify-content: center;
    min-height: 120px; /* Suteikiame aukščio, kad nesispaustų */
    text-align: center;
    color: var(--text-main) !important; /* Priverstinai padarome tekstą šviesų */
    font-size: 1.1em;
}

#loading p {
    margin: 5px 0;
    line-height: 1.5;
}
/* --- VIRŠUTINIAI VALDYMO ELEMENTAI PER CENTRĄ --- */

.user-controls {
    display: flex;
    align-items: center;
    justify-content: center; /* Centruoja turinį horizontaliai */
    gap: 30px; /* Padidiname tarpą tarp nuorodų, kad atrodytų erdviau */
    margin: 25px 0;
    width: 100%; /* Užtikrina, kad konteineris užimtų visą vietą */
    left: 0;
}

.control-btn {
    /* Pašaliname visus gamyklinius stilius */
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
    
    /* Neleidžia tekstui persikelti į kitą eilutę */
    white-space: nowrap; 
}

.control-btn:hover {
    opacity: 1;
    color: #ffffff;
}

/* Pridedame nedidelį pabraukimą tik užvedus, kad būtų aišku, jog tai nuoroda */
.control-btn:after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width .3s;
}

.control-btn:hover:after {
    width: 100%;
}

/* --- IŠSIPLEČIANTIS TEKSTO LAUKAS --- */
textarea.auto-expand {
    resize: none; /* Panaikina kampuką tempimui */
    overflow: hidden; /* Paslepia slankjuostę */
    min-height: 44px; /* Pradinis aukštis */
    height: auto;
    white-space: pre-wrap; /* Leidžia tekstui keltis į kitą eilutę */
    line-height: 1.5;
    padding: 10px;
    box-sizing: border-box;
    
    /* Išlaikome jūsų stilių */
    background: white;
    color: black;
    font-weight: bold;
    font-family: inherit;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #ccc;
}

textarea.auto-expand:focus {
    outline: none;
    border-color: var(--sunset-orange);
}

.container {
    max-width: 800px; /* Šitas skaičius neleidžia išsiplėsti per visą ekraną */
    margin: 0 auto;   /* Centruoja patį konteinerį */
    padding: 20px;
    box-sizing: border-box;
    width: 100%;
}
/* --- SVORIO PROGRESO JUOSTA (Sutvarkyta) --- */
#weightProgressContainer {
    background: rgba(69, 25, 82, 0.4); /* Toks pat permatomumas kaip .input-container */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: var(--border-radius);
    border: var(--glass-border);
    box-shadow: var(--card-shadow);
    
    margin: 10px auto 25px auto; /* Centruoja horizontaliai ir prideda tarpą apačioje */
    width: 100%;
    box-sizing: border-box;
    display: block; /* Užtikriname, kad tai būtų blokas, o ne kvadratas */
}

.weight-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-bottom: 12px;
}

#progressPercent {
    font-weight: 700;
    color: var(--sunset-orange);
    font-size: 1.1em;
}

.progress-track {
    height: 14px; /* Šiek tiek storesnė juosta geresniam matomumui */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    position: relative;
    overflow: visible; /* Svarbu: kad markeris (burbuliukas) galėtų išlysti */
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--rose-mauve), var(--sunset-orange));
    border-radius: 20px;
    width: 0%;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1); /* Sklandesnė animacija */
}

.weight-marker {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    
    /* PADIDINAME: kad logotipas būtų įžiūrimas (buvo 18px/20px) */
    width: 28px; 
    height: 28px;
    
    /* LOGOTIPAS: nurodyk kelią iki savo ikonos */
    background-image: url('/app/icons/icon-192.png'); 
    background-size: cover;      /* Užpildo visą plotą */
    background-position: center; /* Centruoja logotipą */
    background-repeat: no-repeat;
    
    
    /* RĖMELIS: kad logotipas išsiskirtų iš juostos */
    border: 2px solid var(--sunset-orange); 
    border-radius: 50%;         /* Išlaiko logotipą apskritimo formoje */
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    transition: left 1s ease-in-out;
    z-index: 5;
}

/* --- ONBOARDING MODAL (Sutvarkytas lygiavimas ir spalvos) --- */
.modal-content {
    background: var(--deep-purple);
    padding: 30px; 
    width: 90%; 
    max-width: 380px;
    text-align: center;
    border-radius: var(--border-radius);
    border: var(--glass-border);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Visų laukelių (input, select) ir mygtuko suvienodinimas */
.modal-content input, 
.modal-content select, 
.modal-content .primary-btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 8px 0;
    border-radius: 16px;
    font-size: 16px;
}

/* Laukelių fonas ir TEKSTO SPALVA */
.modal-content input, 
.modal-content select {
    background: rgba(29, 26, 57, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    
    /* SVARBU: Nustatome kietą baltą spalvą visiems įvedimams */
    color: #ffffff !important; 
    
    outline: none;
    backdrop-filter: blur(5px);
    appearance: none; 
}

/* Pataisymas Select parinktims (kad išsiskleidus nesimatytų balta ant balto) */
.modal-content select option {
    background: #1a1625; /* Tamsus fonas išskleistam sąrašui */
    color: #ffffff;
}

/* --- PLACEHOLDER SPALVOS (Visiems vienoda) --- */

/* 1. Paprastiems laukams (svoris, lytis) */
.modal-content input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important; /* Suvienodinta su data */
}

/* 2. Datai (kalendoriaus ikonai) */
.modal-content input[type="date"] {
    color-scheme: dark;
}

.modal-content h3 {
    color: var(--sunset-orange);
    margin: 0 0 10px 0;
}

.modal-content p {
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-bottom: 15px;
}

/* --- GIMIMO DATOS FIX (Android/iOS) --- */

input[type="date"] {
    position: relative;
    color: #ffffff !important; /* Užtikriname baltą spalvą */
}

/* Ištempiame kalendoriaus ikoną per visą laukelį */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0; 
    cursor: pointer;
}

/* Paslepiame standartinį tekstą */
input[type="date"]:invalid::-webkit-datetime-edit {
    color: transparent;
}

/* 3. Rodome mūsų tekstą "Gimimo data" - SPALVA SUTAPDINTA SU PLACEHOLDER */
input[type="date"]:invalid::before {
    content: attr(data-placeholder);
    
    /* Čia ta pati spalva kaip input::placeholder */
    color: rgba(255, 255, 255, 0.5); 
    
    position: absolute;
    left: 15px;
    pointer-events: none;
    white-space: nowrap;
}

/* Kai data pasirinkta */
input[type="date"]:valid::-webkit-datetime-edit,
input[type="date"]:focus::-webkit-datetime-edit {
    color: #ffffff !important;
}

input[type="date"]:valid::before,
input[type="date"]:focus::before {
    display: none;
}