/* ============================================================
   Dobroduch.eu — štýly aplikácie
   ============================================================ */
:root {
    --brand: #7c5cff;
    --brand-dark: #6a4bec;
    --brand-soft: #ece7ff;
    --green: #4cb782;
    --green-soft: #e3f5ec;
    --yellow: #ffd166;
    --red: #e05252;
    --red-soft: #fdecec;
    --ink: #2b2350;
    --muted: #6f6a8a;
    --bg: #f4f2ff;
    --card: #ffffff;
    --line: #eceafb;
    --radius: 20px;
    --shadow: 0 10px 30px rgba(60, 40, 140, .10);
    --nav-h: 64px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { height: 100%; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
    background: var(--bg);
    color: var(--ink);
    min-height: 100%;
    font-size: 16px;
    line-height: 1.45;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--ink); }
a { color: var(--brand); }

/* ---------------- boot ---------------- */
.boot { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted); }
.boot img { animation: float 2.4s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-10px);} }

/* ---------------- layout ---------------- */
.shell { min-height: 100vh; padding-bottom: calc(var(--nav-h) + 18px); }
.page { max-width: 720px; margin: 0 auto; padding: 18px 16px 30px; }
.page h1 { font-size: 24px; margin: 6px 0 2px; }
.page .lead { color: var(--muted); font-size: 14px; margin-bottom: 16px; }

.topbar { display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto; padding: 14px 16px 0; }
.topbar img.mini { width: 40px; height: 44px; }
.topbar .who { flex: 1; }
.topbar .who b { display: block; font-size: 16px; }
.topbar .who small { color: var(--muted); font-size: 12.5px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex: none; }

/* bottom nav */
nav.bottom {
    position: fixed; left: 0; right: 0; bottom: 0; height: var(--nav-h);
    background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(60, 40, 140, .07);
    z-index: 40;
    padding-bottom: env(safe-area-inset-bottom);
}
nav.bottom .nav-mobile { display: flex; height: 100%; max-width: 520px; margin: 0 auto; }
nav.bottom .nav-desktop { display: none; }
nav.bottom button {
    flex: 1; background: none; border: none; color: #9b95b8;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10.5px; font-weight: 700; position: relative; transition: color .15s;
}
.nico { width: 23px; height: 23px; display: inline-flex; align-items: center; justify-content: center; }
.nico svg { width: 23px; height: 23px; flex: none; }
nav.bottom button .nico { width: auto; height: auto; padding: 3px 14px; border-radius: 999px; transition: background .2s; }
nav.bottom button.on { color: var(--brand); }
nav.bottom button.on .nico { background: var(--brand-soft); }
nav.bottom button.on .nlbl { font-weight: 800; }

/* bottom sheet „Viac" */
.sheet { background: var(--card); border-radius: 24px 24px 0 0; width: 100%; max-width: 540px; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    padding: 0 18px calc(18px + env(safe-area-inset-bottom)); animation: slideup .22s; }
.sheet-top { position: sticky; top: 0; background: var(--card); padding-top: 10px; z-index: 1; touch-action: none; cursor: grab; }
.sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 8px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-head b { font-size: 16px; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sheet-item { display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg); border: 2px solid transparent; border-radius: 18px; padding: 16px 6px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: none; }
.sheet-item .nico { width: 26px; height: 26px; color: var(--brand); }
.sheet-item.on { border-color: var(--brand); background: var(--brand-soft); }

/* sidebar pre tablet/desktop */
@media (min-width: 960px) {
    .shell { display: grid; grid-template-columns: 230px 1fr; padding-bottom: 0; }
    nav.bottom { position: sticky; top: 0; height: 100vh; overflow-y: auto; border-top: none; border-right: 1px solid var(--line); padding: 18px 10px; box-shadow: none; background: var(--card); }
    nav.bottom .nav-mobile { display: none; }
    nav.bottom .nav-desktop { display: flex; flex-direction: column; gap: 4px; }
    nav.bottom button { flex: none; flex-direction: row; justify-content: flex-start; gap: 12px; font-size: 15px; padding: 11px 14px; border-radius: 14px; width: 100%; }
    nav.bottom button .nico { padding: 0; }
    nav.bottom button.on { background: var(--brand-soft); }
    nav.bottom button.on .nico { background: none; }
    nav.bottom .brandline { display: flex !important; align-items: center; gap: 10px; padding: 6px 12px 18px; font-weight: 800; font-size: 18px; color: var(--brand); }
    .page { max-width: 860px; }
}
nav.bottom .brandline { display: none; }

/* ---------------- karty a prvky ---------------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.card h3 { font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.card h3 .grow { flex: 1; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand); color: #fff; border: none; border-radius: 14px;
    padding: 12px 20px; font-weight: 700; font-size: 15px;
    box-shadow: 0 6px 16px rgba(124, 92, 255, .3); transition: transform .1s;
}
.btn:active { transform: scale(.97); }
.btn.green { background: var(--green); box-shadow: 0 6px 16px rgba(76, 183, 130, .3); }
.btn.ghost { background: var(--brand-soft); color: var(--brand); box-shadow: none; }
.btn.danger { background: var(--red-soft); color: var(--red); box-shadow: none; }
.btn.small { padding: 8px 14px; font-size: 13.5px; border-radius: 11px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }
.field input, .field select, .field textarea {
    width: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: 13px;
    font-size: 16px; outline: none; background: #fff; transition: border-color .15s;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.pill { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.pill.green { background: var(--green-soft); color: #2e7d57; }
.pill.gray { background: #f0eff8; color: var(--muted); }

/* zoznamy položiek */
.item { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: none; }
.item .txt { flex: 1; min-width: 0; }
.item .txt b { display: block; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item .txt small { color: var(--muted); font-size: 12.5px; }
.item.done .txt b { text-decoration: line-through; color: var(--muted); font-weight: 500; }
.check {
    width: 28px; height: 28px; border-radius: 9px; border: 2.5px solid #cfc9ea; background: #fff;
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 16px; transition: all .15s;
}
.check.on { background: var(--green); border-color: var(--green); }
.iconbtn { background: none; border: none; color: var(--muted); font-size: 17px; padding: 6px; border-radius: 8px; }
.iconbtn:hover { background: var(--bg); }

.cat-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 14px 0 2px; }

.empty { text-align: center; color: var(--muted); padding: 26px 10px; }
.empty img { width: 90px; opacity: .9; margin-bottom: 8px; }
.empty p { font-size: 14.5px; }

/* oznamy od prevádzkovateľa */
.annbox { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 13px 14px; margin-bottom: 12px; border-left: 5px solid var(--brand); }
.annbox.success { border-left-color: var(--green); }
.annbox.warning { border-left-color: var(--yellow); }
.annbox .aico { font-size: 20px; flex: none; margin-top: 1px; }
.annbox .atxt { flex: 1; min-width: 0; }
.annbox .atxt b { font-size: 14.5px; display: block; }
.annbox .atxt p { font-size: 13.5px; color: var(--muted); margin-top: 2px; }

/* villain karty na dashboarde */
.villains { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vcard { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: flex; gap: 10px; align-items: center; cursor: pointer; min-width: 0; }
.vcard img { width: 52px; height: 57px; flex: none; }
.vcard > div { min-width: 0; }
.vcard b { font-size: 14px; display: block; overflow-wrap: break-word; hyphens: auto; }
.vcard small { color: var(--muted); font-size: 12px; display: block; line-height: 1.3; margin-top: 2px; }
/* ---------------- Dobroduch a zloduchovia na nástenke ----------------
   Zloduchovia sú vždy vo svojich kolónkach, mení sa im len nálada:
   .free = má voľno a teší sa · .busy = bežná robota · .sad = je toho priveľa   */
.duchbar {
    display: flex; gap: 12px; align-items: center; padding: 10px 14px; margin-bottom: 12px;
    border-radius: var(--radius); box-shadow: var(--shadow); background: var(--card);
}
.duchbar img { width: 48px; height: 53px; flex: none; transform-origin: 50% 100%; }
.duchbar b { display: block; font-size: 15px; }
.duchbar small { color: var(--muted); font-size: 12.5px; line-height: 1.35; display: block; margin-top: 2px; }
.duchbar.happy { background: linear-gradient(135deg, #ece7ff, #e3f5ec); }
.duchbar.happy img { animation: duchhappy 1.1s ease-in-out infinite; }
.duchbar.work { background: linear-gradient(135deg, #fff4e6, #ffffff); }
.duchbar.work img { animation: duchwork 1.6s ease-in-out infinite; }
.duchbar.calm img { animation: duchcalm 3.4s ease-in-out infinite; }
@keyframes duchhappy { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
@keyframes duchwork { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.04); } }
@keyframes duchcalm { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.vcard .vwrap { position: relative; flex: none; display: inline-block; }
.vcard .vbadge { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(60,40,140,.22); display: inline-flex; align-items: center; justify-content: center; color: #2e9b5a; }
.vcard.sad .vbadge { color: #d9534f; }
.vcard img { transform-origin: 50% 90%; }

/* má voľno — pohupuje sa a usmieva */
.vcard.free { background: linear-gradient(135deg, #fff 55%, #e9f7f0); }
.vcard.free img { animation: vfree 2.4s ease-in-out infinite; }
.vcard.free small { color: #2e7d57; }
@keyframes vfree { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }

/* bežná robota — základné, pokojné zobrazenie */
.vcard.busy img { animation: vbusy 4s ease-in-out infinite; }
@keyframes vbusy { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

/* je toho priveľa — obesí hlavu */
.vcard.sad { background: linear-gradient(135deg, #fff 55%, #ffeef0); }
.vcard.sad img { animation: vsad 2.8s ease-in-out infinite; filter: saturate(.85); }
.vcard.sad small { color: var(--red); font-weight: 600; }
@keyframes vsad { 0%, 100% { transform: translateY(2px) rotate(-7deg); } 50% { transform: translateY(4px) rotate(-4deg); } }

@media (prefers-reduced-motion: reduce) {
    .duchbar img, .vcard.free img, .vcard.busy img, .vcard.sad img { animation: none; }
}

@media (min-width: 960px) { .villains { grid-template-columns: 1fr 1fr 1fr 1fr; } }
@media (max-width: 430px) { .vcard img { width: 42px; height: 46px; } .vcard b { font-size: 13px; } .vcard small { font-size: 11.5px; } }

/* ---------------- modály ---------------- */
.modal-back { position: fixed; inset: 0; background: rgba(43, 35, 80, .45); z-index: 90; display: flex; align-items: flex-end; justify-content: center; animation: fadein .15s; }
@media (min-width: 700px) { .modal-back { align-items: center; } }
.modal { background: var(--card); border-radius: 22px 22px 0 0; width: 100%; max-width: 540px; max-height: 92vh; overflow-y: auto; padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); animation: slideup .2s; }
@media (min-width: 700px) { .modal { border-radius: 22px; } }
.modal h2 { font-size: 19px; margin-bottom: 16px; }
@keyframes fadein { from { opacity: 0; } }
@keyframes slideup { from { transform: translateY(40px); opacity: .5; } }

/* ---------------- toasty a pochvala ---------------- */
#toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); }
.toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; box-shadow: var(--shadow); animation: slideup .2s; }
.toast.err { background: var(--red); }

#praise-layer { position: fixed; inset: 0; pointer-events: none; z-index: 300; }
.praise { position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 10px; animation: praise-in .35s cubic-bezier(.2, 1.4, .5, 1); }
.praise img { width: 92px; animation: float 2s ease-in-out infinite; filter: drop-shadow(0 8px 16px rgba(124,92,255,.35)); }
.praise .bubble { background: #fff; border-radius: 18px 18px 18px 4px; box-shadow: var(--shadow); padding: 12px 16px; font-weight: 700; font-size: 15px; max-width: 240px; margin-bottom: 30px; }
@keyframes praise-in { from { transform: translate(-50%, 60px) scale(.6); opacity: 0; } }
.praise.out { animation: praise-out .3s forwards; }
@keyframes praise-out { to { transform: translate(-50%, 40px) scale(.8); opacity: 0; } }
.confetti { position: absolute; width: 10px; height: 10px; border-radius: 3px; animation: conf 1.3s ease-out forwards; }
@keyframes conf { to { transform: translateY(85vh) rotate(540deg); opacity: 0; } }

/* ---------------- prihlásenie ---------------- */
.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 22px 16px; }
.auth-card { width: 100%; max-width: 430px; background: var(--card); border-radius: 26px; box-shadow: var(--shadow); padding: 30px 26px; }
.auth-card .hero { text-align: center; margin-bottom: 18px; }
.auth-card .hero img { width: 92px; }
.auth-card h1 { font-size: 23px; text-align: center; }
.auth-card h1 span { color: var(--brand); }
.auth-card .sub { text-align: center; color: var(--muted); font-size: 14px; margin: 4px 0 18px; }
.tabs { display: flex; background: var(--bg); border-radius: 13px; padding: 4px; margin-bottom: 18px; }
.tabs button { flex: 1; border: none; background: none; padding: 9px 4px; border-radius: 10px; font-weight: 700; font-size: 13px; color: var(--muted); }
.tabs button.on { background: #fff; color: var(--brand); box-shadow: 0 2px 8px rgba(60,40,140,.12); }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 12px 0; }
.member-tile { background: var(--bg); border: 2.5px solid transparent; border-radius: 16px; padding: 12px 6px; text-align: center; cursor: pointer; }
.member-tile.on { border-color: var(--brand); background: var(--brand-soft); }
.member-tile .avatar { margin: 0 auto 6px; width: 46px; height: 46px; font-size: 24px; }
.member-tile b { font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- mikrofón ---------------- */
.micbar { position: sticky; bottom: calc(var(--nav-h) + 10px); display: flex; justify-content: center; margin-top: 16px; z-index: 30; pointer-events: none; }
@media (min-width: 960px) { .micbar { bottom: 20px; } }
.micbtn {
    pointer-events: auto;
    width: 72px; height: 72px; border-radius: 50%; border: none;
    background: var(--brand); color: #fff; font-size: 30px;
    box-shadow: 0 10px 26px rgba(124, 92, 255, .45);
    display: flex; align-items: center; justify-content: center;
}
.micbtn.rec { background: var(--red); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,82,82,.5);} 50% { box-shadow: 0 0 0 18px rgba(224,82,82,0);} }
.mic-hint { text-align: center; color: var(--muted); font-size: 13px; margin-top: 6px; }

/* ---------------- kalendár ---------------- */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cal-head b { flex: 1; text-align: center; font-size: 16.5px; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-grid .dow { text-align: center; font-size: 11px; font-weight: 800; color: var(--muted); padding: 4px 0; }
.cal-day { aspect-ratio: 1; border-radius: 12px; background: var(--bg); border: none; font-size: 14px; font-weight: 600; color: var(--ink); position: relative; display: flex; align-items: center; justify-content: center; }
.cal-day.other { opacity: .35; }
.cal-day.today { outline: 2.5px solid var(--yellow); }
.cal-day.sel { background: var(--brand); color: #fff; }
.cal-day .dots { position: absolute; bottom: 5px; display: flex; gap: 2px; }
.cal-day .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.cal-day.sel .dots i { background: #fff; }

/* ---------------- jedálniček ---------------- */
.week-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.week-nav b { flex: 1; text-align: center; font-size: 15px; }
.meal-day { display: flex; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.meal-day .dcol { width: 52px; flex: none; text-align: center; background: var(--brand-soft); border-radius: 14px; padding: 8px 2px; }
.meal-day .dcol b { display: block; font-size: 16px; }
.meal-day .dcol small { font-size: 11px; color: var(--brand); font-weight: 700; text-transform: uppercase; }
.meal-day.today .dcol { background: var(--brand); color: #fff; }
.meal-day.today .dcol small { color: #fff; }
/*
 * Riadky jedálnička sú tabuľka: deň · druh jedla · názov · tlačidlá.
 * Bez min-width:0 sa flex položka nezmenší pod šírku svojho obsahu — dlhý
 * názov receptu preto celý riadok roztiahol za okraj obrazovky a každý deň
 * bol inak široký (tlačidlá Variť a × nesedeli v jednom stĺpci).
 */
.meal-slots { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.meal-slot { background: var(--card); border-radius: 13px; box-shadow: var(--shadow); padding: 8px 10px 8px 12px; display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 0; }
.meal-slot small.mt { color: var(--muted); font-size: 10.5px; font-weight: 800; text-transform: uppercase; width: 54px; flex: none; }
.meal-slot .mtitle { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow-wrap: break-word; }
.meal-slot .mact { flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* na telefóne nechávame názvu čo najviac miesta: Variť je len ikona, kalórie vidno v recepte */
@media (max-width: 560px) {
    .meal-slot .mact .pill { display: none; }
    .meal-slot .mact .btn .btxt { display: none; }
    .meal-slot .mact .btn.small { padding: 7px 9px; }
}
.meal-slot .btn.small { padding: 7px 10px; font-size: 12.5px; }
.meal-slot .iconbtn { width: 30px; height: 30px; }
.meal-slot .mtitle.none { color: #b9b4d4; font-weight: 500; }

/* režim varenia */
/*
 * Režim varenia má dve tváre: na telefóne v ruke je to bežná obrazovka
 * (text zhora, dá sa rolovať), na kuchynskom tablete cez pol kuchyne veľké
 * písmo v strede. Predtým platilo tabletové nastavenie aj na telefóne —
 * krátky krok plával uprostred prázdna a dlhý sa nezmestil.
 */
.cookmode { position: fixed; inset: 0; background: linear-gradient(160deg, #f4f2ff, #e8f7ef); z-index: 100; display: flex; flex-direction: column; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.cookmode .ctop { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cookmode .ctop h2 { flex: 1; min-width: 0; font-size: 17px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cookmode .cstep { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; text-align: left; gap: 10px; padding-bottom: 8px; }
.cookmode .cstep .snum { color: var(--brand); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; }
.cookmode .cstep .ctext { font-size: 19px; font-weight: 700; line-height: 1.4; }
.cookmode .cstep .cmeta { font-size: 13px; color: var(--muted); }
.cookmode .cinglist { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15.5px; }
.cookmode .cinglist li { background: var(--card); border-radius: 12px; padding: 9px 13px; box-shadow: var(--shadow); }
.cookmode .cuse { margin: 2px 0; }
.cookmode .cuse ul { padding-left: 18px; font-size: 15px; line-height: 1.55; }
.cookmode .ctip { font-size: 14px; }
.cookmode .btn.timer-big { font-size: 16px; padding: 13px 18px; align-self: flex-start; }
.cookmode .cbot { display: flex; gap: 10px; justify-content: center; align-items: center; padding-top: 10px; }
.cookmode .cbot .btn { flex: 1; font-size: 16px; padding: 14px 16px; }
/* kuchynský tablet / veľká obrazovka — pôvodný „cez pol kuchyne" režim */
@media (min-width: 820px) and (min-height: 620px) {
    .cookmode { padding: 26px; }
    .cookmode .ctop h2 { font-size: clamp(22px, 3.5vw, 30px); -webkit-line-clamp: 1; }
    .cookmode .cstep { align-items: center; justify-content: center; text-align: center; gap: 18px; }
    .cookmode .cstep .snum { font-size: 14px; }
    .cookmode .cstep .ctext { font-size: clamp(26px, 4.2vw, 40px); max-width: 900px; }
    .cookmode .cstep .cmeta { font-size: 17px; }
    .cookmode .cinglist { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; font-size: clamp(18px, 2.6vw, 26px); max-width: 900px; }
    .cookmode .cinglist li { border-radius: 999px; padding: 8px 18px; }
    .cookmode .cuse, .cookmode .ctip { width: min(720px, 100%); text-align: left; }
    .cookmode .cuse { padding: 14px 20px; }
    .cookmode .cuse b { font-size: 15px; }
    .cookmode .cuse ul { font-size: 20px; line-height: 1.5; }
    .cookmode .ctip { font-size: 18px; padding: 14px 20px; }
    .cookmode .btn.timer-big { font-size: clamp(17px, 3.4vw, 22px); padding: 16px 26px; align-self: center; }
    .cookmode .cbot .btn { flex: none; font-size: 18px; padding: 16px 30px; }
}
.cook-timer { font-variant-numeric: tabular-nums; font-size: clamp(44px, 9vw, 84px); font-weight: 800; color: var(--brand); }
.cook-timer.timer-done { color: var(--red); animation: timerdone .7s ease-in-out infinite alternate; }
@keyframes timerdone { from { transform: scale(1); } to { transform: scale(1.08); } }
.cook-progress { height: 8px; background: #e6e2f7; border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.cook-progress i { display: block; height: 100%; background: var(--green); border-radius: 4px; transition: width .3s; }

/* ---------------- rozpočet (grafy) ---------------- */
.stat-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.stat { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.stat small { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.stat b { display: block; font-size: 24px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hbar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.hbar-row .lbl { width: 108px; flex: none; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-row .track { flex: 1; height: 14px; background: var(--bg); border-radius: 7px; overflow: hidden; }
.hbar-row .track i { display: block; height: 100%; background: var(--brand); border-radius: 0 4px 4px 0; min-width: 2px; transition: width .4s; }
.hbar-row .val { width: 74px; flex: none; text-align: right; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.daychart { display: flex; align-items: flex-end; gap: 2px; height: 110px; margin-top: 6px; }
.daychart i { flex: 1; background: var(--brand); border-radius: 4px 4px 0 0; min-height: 2px; opacity: .85; }
.daychart i:hover { opacity: 1; }
.tipbox { display: flex; gap: 12px; align-items: center; background: var(--green-soft); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; }
.tipbox img { width: 54px; flex: none; }
.tipbox p { font-size: 14px; font-weight: 600; }
.tipbox.accnotice { display: block; }
.tipbox.accnotice p { margin-bottom: 6px; }
.tipbox.accnotice p.small { font-weight: 500; color: var(--ink); }

/* Štýly rodinnej centrály (tablet) sú v tablet.css. */

/* ---------------- rôzne ---------------- */
.codebox { font-family: ui-monospace, monospace; font-size: 21px; font-weight: 800; letter-spacing: 3px; color: var(--brand); background: var(--brand-soft); border-radius: 12px; padding: 8px 14px; display: inline-block; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 700; color: var(--muted); }
.seg button.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.minimic { border: none; background: var(--brand); color: #fff; border-radius: 999px; width: 38px; height: 38px; font-size: 17px; box-shadow: 0 4px 12px rgba(124,92,255,.35); }
.minimic.rec { background: var(--red); animation: pulse 1s infinite; }
.item.prio-high { background: linear-gradient(90deg, rgba(224,82,82,.06), transparent); border-radius: 10px; }
.prio-flag { color: var(--red); margin-right: 3px; }
.fab { position: fixed; right: 18px; bottom: calc(var(--nav-h) + 18px); min-width: 60px; height: 60px; border-radius: 999px; border: none; background: var(--brand); color: #fff; font-size: 26px; box-shadow: 0 10px 26px rgba(124,92,255,.5); z-index: 35; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 17px; animation: fab-pop .4s cubic-bezier(.2,1.4,.5,1), fab-glow 2.6s ease-in-out 1s 2; }
.fab .flabel { display: none; font-size: 15.5px; font-weight: 800; white-space: nowrap; }
@media (min-width: 480px) { .fab .flabel { display: inline; } }
@media (min-width: 960px) { .fab { bottom: 26px; } }
@keyframes fab-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes fab-glow { 0%,100% { box-shadow: 0 10px 26px rgba(124,92,255,.5); } 50% { box-shadow: 0 10px 26px rgba(124,92,255,.5), 0 0 0 12px rgba(124,92,255,.18); } }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; }
.center { text-align: center; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex > input { min-width: 0; }
.grow { flex: 1; }
hr.soft { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---------------- prehľadné sekcie v preferenciách ---------------- */
.prefsec { background: #faf9ff; border: 1px solid #ece9f8; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.prefsec h4 { margin: 0 0 10px; font-size: 14px; color: var(--brand); letter-spacing: .2px; }
.prefsec .field { margin-bottom: 10px; }
.prefsec .field:last-child { margin-bottom: 0; }
.prefcheck { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; cursor: pointer; font-size: 13.5px; }
.prefcheck input { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.prefcheck b { font-weight: 700; }
.favbtn { font-size: 20px; line-height: 1; color: #cfc9ea; background: none; border: none; }
.favbtn.on { color: #f5b731; }
.seg button.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.recrow .txt b { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.recrow { align-items: flex-start; }
.recrow .btn.small { flex: none; }
.progline { height: 6px; border-radius: 3px; background: var(--brand-soft); overflow: hidden; margin: 12px 0 6px; }
.progline i { display: block; height: 100%; width: 40%; border-radius: 3px; background: var(--brand); animation: progslide 1.6s ease-in-out infinite; }
@keyframes progslide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }

/* ---------------- čítanie bločka: Dobroduch skenuje doklad ---------------- */
.receipt-scan { position: relative; height: 210px; border-radius: 16px; overflow: hidden; background: #f3f1fb; display: flex; align-items: center; justify-content: center; }
.receipt-scan .rs-photo { max-height: 100%; max-width: 100%; object-fit: contain; filter: saturate(.9); }
.receipt-scan .rs-beam {
    position: absolute; left: 0; right: 0; height: 26%;
    background: linear-gradient(180deg, rgba(124,92,255,0) 0%, rgba(124,92,255,.35) 50%, rgba(124,92,255,0) 100%);
    animation: rsbeam 2.1s ease-in-out infinite;
}
.receipt-scan .rs-hero { position: absolute; right: 10px; bottom: 6px; width: 62px; height: 68px; animation: rshero 1.5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes rsbeam { 0% { top: -26%; } 100% { top: 100%; } }
@keyframes rshero { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-7px) rotate(5deg); } }
@media (prefers-reduced-motion: reduce) { .receipt-scan .rs-beam, .receipt-scan .rs-hero { animation: none; } }

.receipt-thumb { width: 38px; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--line); background: #fff; padding: 0; flex: none; }
.receipt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.receipt-full { border-radius: 14px; overflow: hidden; background: #f3f1fb; max-height: 60vh; display: flex; align-items: center; justify-content: center; }
.receipt-full img { max-width: 100%; max-height: 60vh; object-fit: contain; cursor: zoom-in; display: block; }

/* ---------------- varenie: suroviny na krok + bežiace časovače ---------------- */
.cook-progress { height: 6px; border-radius: 3px; background: var(--brand-soft); overflow: hidden; margin: 10px 0 14px; }
.cook-progress i { display: block; height: 100%; background: var(--brand); border-radius: 3px; transition: width .3s; }
.cing { padding-left: 20px; font-size: 15px; line-height: 1.6; }   /* recept v okne (rýchly obed, náhľad) */
.cuse { background: var(--brand-soft); border-radius: 14px; padding: 12px 16px; margin: 14px 0; }
.cuse b { display: block; font-size: 13px; color: var(--brand); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.cuse ul { padding-left: 18px; font-size: 16px; line-height: 1.6; }
.ctip { background: #fff7ec; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 12px 0; }

.timerbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.timerbar:empty { display: none; }
.tchip {
    display: inline-flex; align-items: center; gap: 8px; background: var(--brand-soft); color: var(--brand);
    border-radius: 999px; padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 700;
}
.tchip .tleft { font-variant-numeric: tabular-nums; background: #fff; border-radius: 999px; padding: 2px 9px; }
.tchip button { background: none; border: none; color: inherit; font-size: 14px; opacity: .6; padding: 0 4px; }
.tchip.done { background: var(--green-soft); color: #2e7d57; animation: tdone 1s ease-in-out infinite alternate; }
@keyframes tdone { from { transform: scale(1); } to { transform: scale(1.04); } }
.timerfloat {
    position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 10px); z-index: 45;
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
    border-radius: 999px; padding: 8px 10px; box-shadow: var(--shadow);
}
.timerfloat:empty { display: none; }

/* ---------------- sprievodca preferenciami ---------------- */
.wizhead { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.wizhead img { width: 52px; height: 58px; flex: none; animation: duchcalm 3s ease-in-out infinite; }
.wizhead b { display: block; font-size: 17px; }
.wizhead small { color: var(--muted); font-size: 12.5px; line-height: 1.35; display: block; margin-top: 2px; }
.wizdots { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.wizdots i { width: 24px; height: 5px; border-radius: 3px; background: #e6e2f7; transition: background .2s; }
.wizdots i.on { background: var(--brand); }
.wizdots i.done { background: #c3b6ff; }
.wizbody { min-height: 230px; }
.seg.segbig button { flex: 1; padding: 12px 6px; font-size: 14px; }
.seg.segnum { flex-wrap: wrap; }
.seg.segnum button { min-width: 46px; padding: 10px 8px; font-weight: 700; }
.pickgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pickgrid button {
    text-align: left; background: var(--bg); border: 2px solid transparent; border-radius: 14px;
    padding: 10px 12px; color: var(--ink);
}
.pickgrid button b { display: block; font-size: 14px; }
.pickgrid button small { color: var(--muted); font-size: 11.5px; }
.pickgrid button.on { border-color: var(--brand); background: var(--brand-soft); }

/* zoznam noviniek v okne „Čo je nové" po aktualizácii */
.newslist { list-style: none; padding: 0; margin: 0; }
.newslist li {
    padding: 9px 12px;
    margin-bottom: 7px;
    background: var(--bg);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.45;
}

/* ---------------- 🌙 Hormón (skryté, iba rodič) ---------------- */
.hormon-card { border-left: 4px solid #c96f9b; }
.hormonbar {
    display: flex; align-items: center; gap: 12px; cursor: pointer;
    background: linear-gradient(135deg, #fdf1f7, #f7f0ff);
    border: 1px solid #f0d8e6; border-radius: var(--radius);
    padding: 11px 14px; margin-bottom: 12px; transition: transform .12s;
}
.hormonbar:active { transform: scale(.99); }
.hormonbar img { width: 40px; flex: 0 0 auto; }
.hormonbar b { display: block; font-size: 14.5px; }
.hormonbar small { color: var(--muted); font-size: 12.5px; display: block; line-height: 1.35; }
.hormonphase {
    background: var(--bg); border-radius: 16px; padding: 14px; margin-bottom: 12px;
    border-left: 4px solid #c96f9b;
}
.hormonphase.shared { border-left-color: var(--brand); }
.hormonphase h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hph { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.hph b { font-size: 16px; display: block; }
.hph small { color: var(--muted); font-size: 12.5px; }
.hpico { font-size: 30px; line-height: 1; }
.hormonlist { list-style: none; padding: 0; margin: 6px 0 0; }
.hormonlist li {
    position: relative; padding: 7px 0 7px 20px; font-size: 14px; line-height: 1.45;
    border-bottom: 1px solid var(--line);
}
.hormonlist li:last-child { border-bottom: none; }
.hormonlist li::before { content: '·'; position: absolute; left: 6px; font-weight: 800; color: #c96f9b; }

/* ---------------- výber farby člena ----------------
   Farebné koliesko má vlastnú vybranú podobu: pozadie aj okraj nesie farba
   samotná (inline štýl), takže označenie musí ísť cez prstenec a fajku —
   inak by na kolieskach nebolo vôbec vidieť, ktoré je zvolené. */
.seg button.colorpick {
    position: relative; width: 36px; height: 36px; padding: 0;
    border-radius: 50%; border: 2px solid rgba(0, 0, 0, .08);
    cursor: pointer; transition: transform .12s;
}
.seg button.colorpick:hover { transform: scale(1.08); }
.seg button.colorpick.on {
    border-color: #fff;
    box-shadow: 0 0 0 3px var(--brand), 0 4px 10px rgba(0, 0, 0, .18);
    transform: scale(1.08);
}
.seg button.colorpick.on::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 17px; font-weight: 800;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* suroviny priamo v náhľade návrhu — nech je vidieť celé jedlo, nie len názov */
.wzings { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.wzings span {
    background: var(--bg); border-radius: 999px; padding: 3px 9px;
    font-size: 11.5px; color: var(--muted); line-height: 1.4;
}
.wzmeal .txt { min-width: 0; }

/* Názvy jedál sa nesmú orezávať — v zoznamoch je ellipsis v poriadku,
   ale pri jedálničku potrebuje rodina prečítať celý názov receptu. */
.wzmeal .txt b,
.meal-slot .mtitle,
.kdinfo b {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}
.wzmeal { align-items: flex-start; }
.wzmeal .btn { flex: none; align-self: center; }

/* upozornenie v okne bločka — súčet nesedí, doklad je zle čitateľný */
.warnbox { background: #fff7e0; border: 1.5px solid #f0c860; color: #6b4d00; border-radius: 12px; padding: 9px 12px; font-size: 13px; line-height: 1.45; margin: 0 0 10px; }
.warnbox b { color: #7a4a00; }

/* ---- rozpočet: veľké akčné dlaždice nad prehľadom (mobil, jedna ruka) ---- */
.actgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 12px; }
.act {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    background: #fff; border: 2px solid var(--line); border-radius: 18px; padding: 14px 14px 12px;
    text-align: left; cursor: pointer; min-height: 96px; box-shadow: 0 2px 10px rgba(60,40,140,.06);
    color: var(--text); font: inherit;
}
.act:active { transform: scale(.98); }
.act:hover { border-color: var(--brand); }
.act .ico { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.act b { font-size: 15.5px; }
.act small { color: var(--muted); font-size: 12.5px; line-height: 1.3; }
@media (min-width: 700px) { .actgrid { grid-template-columns: repeat(4, 1fr); } }

/* okruhy v prehľade — riadok okruhu sa rozbalí na kategórie */
.grp-head { cursor: pointer; }
.grp-head .chev { color: var(--muted); font-size: 14px; margin-left: 6px; transition: transform .15s; }
.grp.open .grp-head .chev { transform: rotate(180deg); }
.grp-body { padding-left: 14px; border-left: 2px solid var(--line); margin: 2px 0 8px 6px; }
.hbar-row.sub .lbl { font-weight: 500; color: var(--muted); }
.grp-head .lbl { width: 132px; }
@media (max-width: 380px) { .grp-head .lbl { width: 112px; } }

/* AI kredity */
.credbar { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.credbig { flex: none; background: var(--brand-soft); border-radius: 16px; padding: 10px 16px; text-align: center; min-width: 88px; }
.credbig b { display: block; font-size: 28px; color: var(--brand); line-height: 1; }
.credbig small { color: var(--muted); font-size: 11.5px; font-weight: 700; }
a.accopt { text-decoration: none; color: inherit; display: block; }
/* piaty zloduch nesmie ostať sám v rade */
.villains .vcard:nth-child(5):last-child { grid-column: 1 / -1; }
@media (min-width: 720px) { .villains { grid-template-columns: repeat(3, 1fr); } .villains .vcard:nth-child(5):last-child { grid-column: auto; } }
/* termíny */
.dlrow .txt b { white-space: normal; }
.dlrow .txt { min-width: 0; flex: 1; }
.dlrow .dl-ok { flex: 0 0 auto; padding: 8px 14px; font-size: 16px; }
.dlrow.done .txt { opacity: .55; text-decoration: line-through; }
.dl-over { color: var(--red); font-weight: 800; }
.dl-soon { color: #b36b00; font-weight: 800; }

/* ================================================================
   RÝCHLOSŤ: pásik „pracujem" a kostra pohľadu
   Appka po ťuknutí reaguje okamžite — buď poslednou známou podobou
   pohľadu, alebo kostrou. Tenký pásik hore hovorí, že sa ešte niečo
   dopĺňa zo servera.
   ================================================================ */
#ddbar {
    position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 900;
    pointer-events: none; opacity: 0; transition: opacity .18s;
}
#ddbar.on { opacity: 1; }
#ddbar i {
    display: block; height: 100%; width: 40%; border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, var(--brand), #9b82ff, var(--green));
    animation: ddbar 1.1s cubic-bezier(.5, 0, .4, 1) infinite;
}
@keyframes ddbar {
    0%   { transform: translateX(-100%) scaleX(.6); }
    60%  { transform: translateX(120%) scaleX(1); }
    100% { transform: translateX(260%) scaleX(.5); }
}

.skel { padding-top: 4px; }
.skel .card { padding: 14px 16px; margin-bottom: 12px; }
.skttl { height: 30px; width: 58%; border-radius: 10px; margin: 6px 0 16px; }
.skrow { height: 16px; border-radius: 8px; margin: 12px 0; }
.skrow:nth-child(2) { width: 82%; }
.skrow:nth-child(3) { width: 64%; }
.skttl, .skrow {
    background: linear-gradient(90deg, #eeebfb 25%, #f7f5ff 50%, #eeebfb 75%);
    background-size: 400% 100%;
    animation: skshine 1.4s ease-in-out infinite;
}
@keyframes skshine { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.skwait { margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
    #ddbar i, .skttl, .skrow { animation: none; }
    #ddbar i { width: 100%; }
}

/* zmazaný riadok zmizne hneď po potvrdení, server to len dobehne */
.item.gone { opacity: 0; transform: translateX(-14px); transition: opacity .18s, transform .18s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .item.gone { transition: none; } }

/* ---------------- QR kód na dar ---------------- */
.dnqr { min-height: 220px; display: flex; align-items: center; justify-content: center; padding: 10px 0; }
.dnqr svg.qr { width: min(260px, 70vw); height: auto; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.seg.segbig button small { display: block; font-weight: 600; opacity: .75; font-size: 12px; }
.item .txt b.mono { white-space: normal; overflow-wrap: anywhere; }

/* ---------------- Hormónov nápad na dnes (AI) ---------------- */
.hormonai { margin-top: 10px; }
.hmtip { background: linear-gradient(150deg, #fdf1f7, #f4f0ff); border-radius: 14px; padding: 12px 14px; border: 1px solid #f0e4f1; }
.hmtip p { font-size: 14px; margin-bottom: 6px; }
.hmtip p:last-child { margin-bottom: 0; }
.hmwink { font-style: italic; }

/* ---------------- ploché ikony (SVG) ----------------
   Dedia farbu textu, majú pevnú veľkosť a sedia na účaří — na rozdiel od emoji,
   ktoré každé zariadenie kreslí inak a v kruhových tlačidlách vytŕčajú. */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; flex: none; display: inline-block; }
h1 .ic, h2 .ic { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: .3em; color: var(--brand); }
h3 .ic, h4 .ic { width: 1.1em; height: 1.1em; margin-right: .1em; color: var(--brand); }
.btn .ic { width: 1.2em; height: 1.2em; }
.ic-lg { width: 1.6em; height: 1.6em; }
.ic-xl { width: 2.2em; height: 2.2em; }
.ic-muted { color: var(--muted); }
.ic-green { color: var(--green); }
.ic-red { color: var(--red); }
.ic-gold { color: #e0a800; }
/* mikrofón a okrúhle tlačidlá: ikona presne v strede, nikdy mimo kruhu */
.micbtn .ic { width: 32px; height: 32px; vertical-align: 0; }
.minimic { display: inline-flex; align-items: center; justify-content: center; }
.minimic .ic { width: 20px; height: 20px; vertical-align: 0; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; }
.iconbtn .ic { width: 20px; height: 20px; vertical-align: 0; }
.fab .ic { width: 28px; height: 28px; vertical-align: 0; }
.check .ic { width: 18px; height: 18px; vertical-align: 0; }
.tile .ic, .act .ic { width: 30px; height: 30px; color: var(--brand); }
.cat-head .ic { width: 1.1em; height: 1.1em; margin-right: .3em; vertical-align: -.2em; }
.pill .ic { width: 1em; height: 1em; vertical-align: -.15em; }
.vbadge .ic { width: 14px; height: 14px; vertical-align: 0; }
.act .ico .ic { width: 30px; height: 30px; color: var(--brand); vertical-align: 0; }
.hpico .ic { width: 30px; height: 30px; color: #c96f9b; vertical-align: 0; }
.prio-flag .ic { width: 16px; height: 16px; }
.chev .ic { width: 16px; height: 16px; }
.cat-head .ic { color: var(--brand); }
.tipbox .ic, .lead .ic, .small .ic { vertical-align: -.2em; }
.hormonbar b .ic { color: #c96f9b; }
.wzings .ic, .item small .ic { width: 1em; height: 1em; vertical-align: -.15em; }
.avatar .ic { width: 20px; height: 20px; vertical-align: 0; color: #fff; }

/* ================================================================
   SPRIEVODCOVIA — tmavý závoj s dierou nad ukazovaným prvkom a bublina
   ================================================================ */
.tour { position: fixed; inset: 0; z-index: 950; }
.tour-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(36, 29, 71, .62), 0 0 0 3px rgba(255,255,255,.85); pointer-events: none; }
.tour-hole.anim { transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.tour { touch-action: none; overscroll-behavior: contain; }
.tour-card { max-height: calc(100vh - 20px); overflow-y: auto; box-sizing: border-box; }
.tour-card { position: fixed; background: #fff; border-radius: 18px; padding: 16px 18px 14px; box-shadow: 0 18px 50px rgba(20, 10, 60, .35); animation: tourin .22s ease; }
.tour-card .tour-step { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.tour-card h3 { font-size: 17px; margin-bottom: 6px; }
.tour-card p { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.tour-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.tour-btns .grow { flex: 1; }
@keyframes tourin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* hlavička pohľadu: názov, popis a tlačidlo „?" so sprievodcom */
.phead { display: flex; align-items: flex-start; gap: 10px; }
.phead h1 { flex: 1; min-width: 0; }
.helpbtn { flex: none; margin-top: 8px; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--brand-soft); background: #fff; color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.helpbtn .ic { width: 20px; height: 20px; vertical-align: 0; }
.helpbtn:hover { background: var(--brand-soft); }

.memrow { align-items: flex-start; }
.memrow .avatar { margin-top: 2px; }
.memacts { display: flex; gap: 4px; flex: none; }
.memrow .memacts { flex-direction: column; }
.memacts .iconbtn { width: 34px; height: 34px; }

.tour-btns .btn:focus { outline: none; }
.tour-btns .btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------------- Míňošov report a príjmy ---------------- */
.stat-tiles.three { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.stat-tiles.three .stat { padding: 12px 12px; }
.stat-tiles.three .stat b { font-size: 17px; white-space: nowrap; letter-spacing: -.01em; }
@media (max-width: 460px) { .stat-tiles.three .stat, .rbal .stat { padding: 10px 9px; } .stat-tiles.three .stat b, .rbal .stat b { font-size: 14.5px; } .stat-tiles.three .stat small, .rbal .stat small { font-size: 11px; } }
.stat-in b { color: #2e9b5a; }
.stat-pos b { color: #2e9b5a; }
.stat-neg b { color: var(--red); }
.act-green .ico { color: #2e9b5a; }
.act-brand { border-color: var(--brand-soft); background: linear-gradient(135deg, #fff 60%, #f1edff); }
.inc-ico { width: 38px; text-align: center; color: #2e9b5a; flex: none; }
.inc-ico .ic { width: 22px; height: 22px; }
.inc-amt { color: #2e9b5a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 10px 0 4px; line-height: 1.4; }
.chk input { width: 20px; height: 20px; flex: none; margin-top: 1px; }

.rseg { display: flex; gap: 6px; margin-bottom: 12px; }
.rseg button { flex: 1; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 9px 4px; font-weight: 700; font-size: 13.5px; color: var(--muted); }
.rseg button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.rbal { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.rbal .stat b { font-size: 17px; white-space: nowrap; letter-spacing: -.01em; }
.rsub { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: -4px 0 12px; }
.rsub b { color: var(--ink); }

/* mesačný graf: príjmy (zelená) vs. výdavky (fialová) */
.mchart { display: flex; gap: 8px; align-items: flex-end; height: 140px; padding-top: 6px; }
.mchart .mcol { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.mchart .mbars { flex: 1; width: 100%; display: flex; gap: 3px; align-items: flex-end; justify-content: center; }
.mchart .mbars i { display: block; width: 42%; max-width: 26px; border-radius: 5px 5px 0 0; min-height: 2px; }
.mchart .mbars i.inc { background: #4cb782; }
.mchart .mbars i.exp { background: var(--brand); }
.mchart .mlbl { font-size: 11px; color: var(--muted); margin-top: 6px; white-space: nowrap; text-transform: capitalize; }
.mlegend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.mlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.mlegend i.inc { background: #4cb782; } .mlegend i.exp { background: var(--brand); }

.rtip { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.rtip:first-of-type { border-top: none; }
.rtip .rico { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex: none; background: var(--brand-soft); color: var(--brand); }
.rtip .rico .ic { width: 18px; height: 18px; }
.rtip-save .rico { background: var(--green-soft); color: #2e7d57; }
.rtip-warn .rico { background: var(--red-soft); color: var(--red); }
.rtip-ok .rico { background: var(--green-soft); color: #2e7d57; }
.rtip-trend .rico { background: #fff3cd; color: #7a5a00; }
.rtip b { display: block; font-size: 15px; }
.rtip p { font-size: 13.5px; color: var(--ink); margin-top: 3px; line-height: 1.45; }
.rtip .rsave { flex: none; text-align: right; font-size: 12px; color: var(--muted); }
.rtip .rsave b { color: #2e7d57; font-size: 15px; white-space: nowrap; }
.rshare { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-left: 4px; }
.rdiff { font-size: 11.5px; font-weight: 800; margin-left: 4px; }
.rdiff.up { color: var(--red); } .rdiff.down { color: #2e7d57; }
.hbar-row .lbl.wide { width: 150px; }
.rrow { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.rrow:first-of-type { border-top: none; }
.rrow .n { width: 22px; flex: none; color: var(--muted); font-weight: 800; font-size: 12.5px; }
.rrow .txt { flex: 1; min-width: 0; }
.rrow .txt b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.rrow .txt small { color: var(--muted); font-size: 12px; }
.rrow .amt { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 800; }
.aibox { background: linear-gradient(135deg, #f4f1ff, #e8f7ef); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; }
.aibox .intro { display: flex; gap: 12px; align-items: center; }
.aibox .intro img { width: 54px; height: 60px; flex: none; }
.aibox .intro p { font-size: 14px; font-style: italic; }
.rtip .grow { min-width: 0; }

/* limity a ciele */
.limrow, .goalrow { padding: 10px 0; border-top: 1px solid var(--line); }
.limrow:first-of-type, .goalrow:first-of-type { border-top: none; }
.limbar { position: relative; height: 10px; border-radius: 5px; background: var(--bg); margin: 6px 0 4px; overflow: hidden; }
.limbar i { display: block; height: 100%; background: var(--brand); border-radius: 5px; transition: width .4s; }
.limrow.warn .limbar i, .limrow.pace .limbar i { background: #f2b134; }
.limrow.over .limbar i { background: var(--red); }
.limbar em { position: absolute; left: 0; top: 0; height: 100%; background: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 4px, transparent 4px 8px); }
.limbar.goal i { background: #4cb782; }
.goalrow.behind .limbar i { background: #f2b134; }
.goalrow.late .limbar i { background: var(--red); }
.exprow .exp-amt { border: 1px solid var(--line); border-radius: 10px; font-size: 14px; font-weight: 700; }

/* tlač reportu (Uložiť ako PDF) */
.print-only { display: none; }
@media print {
    body { background: #fff; color: #111; }
    nav.bottom, .topbar, .helpbtn, .rseg, .iconbtn, .btn, #ddbar, #toasts, #praise-layer, .tour, .modal-back, .mlegend, #rp-ai-go { display: none !important; }
    .shell { display: block; padding: 0; }
    .page { max-width: none; padding: 0; }
    .print-only { display: block; font-size: 12px; color: #555; margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 6px; }
    .card, .stat { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; page-break-inside: avoid; }
    .grp-body { display: block !important; }
    .grp .chev { display: none; }
    .mchart .mbars i.inc { background: #4cb782 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .mchart .mbars i.exp { background: #7c5cff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .hbar-row .track i, .limbar i { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rtip .rico { border: 1px solid #ddd; }
    a { text-decoration: none; color: inherit; }
}

/* cena jedálnička, špajza */
.costbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.costbar .pill { font-size: 13.5px; }
.costbar .costnote { flex-basis: 100%; line-height: 1.35; }
.costbar .btn { margin-left: auto; }
.pantryrow .pdot { width: 12px; height: 12px; border-radius: 50%; background: #cfc8ee; flex: none; margin: 0 6px; }
.pantryrow.ok .pdot { background: #4cb782; } .pantryrow.warn .pdot { background: #f2b134; } .pantryrow.red .pdot { background: var(--red); }
.pantrybar { display: flex; align-items: center; gap: 10px; background: #fff3e2; border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; cursor: pointer; }
.pantrybar img { width: 40px; height: 44px; flex: none; }
.pantrybar b { font-size: 14px; display: block; } .pantrybar small { color: var(--muted); font-size: 12.5px; }

/* Domov: týždenný prehľad + mikrofón hore */
.weekcard .wkrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); cursor: pointer; }
.weekcard .wkrow:first-of-type { border-top: none; }
.weekcard .wkico { width: 32px; height: 32px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.weekcard .wkico .ic { width: 17px; height: 17px; }
.weekcard .txt { min-width: 0; }
.weekcard .txt b { display: block; font-size: 14.5px; }
.weekcard .txt small { color: var(--muted); font-size: 12.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.micbtn-top { background: var(--brand); color: #fff; }
.micbtn-top.rec { animation: micpulse 1s infinite; }
@keyframes micpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(124,92,255,.5); } 50% { box-shadow: 0 0 0 8px rgba(124,92,255,0); } }

/* ============================================================
   Tmavý režim — prepína sa atribútom data-theme na <html>
   (auto = podľa systému; tablet v kuchyni sa večer stmaví sám)
   ============================================================ */
:root[data-theme="dark"] {
    --brand: #9d86ff; --brand-dark: #7c5cff; --brand-soft: #2a2450;
    --green: #4cb782; --green-soft: #17362a; --yellow: #d9b04a; --red: #ef6b6b; --red-soft: #3d2222;
    --ink: #eae7ff; --muted: #a8a3c6; --bg: #14121f; --card: #1f1c2e; --line: #2d2942;
    --shadow: 0 10px 30px rgba(0, 0, 0, .35);
    --surface: #26223a; --warm: #33291f; --warm2: #3a2f1a;
    color-scheme: dark;
}
:root[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
:root[data-theme="dark"] .field input, :root[data-theme="dark"] .field select, :root[data-theme="dark"] .field textarea,
:root[data-theme="dark"] input, :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: var(--surface); color: var(--ink); border-color: var(--line); }
:root[data-theme="dark"] .check { background: var(--surface); border-color: #4a4468; }
:root[data-theme="dark"] .seg button, :root[data-theme="dark"] .tabs button.on, :root[data-theme="dark"] .tchip .tleft,
:root[data-theme="dark"] .praise .bubble, :root[data-theme="dark"] .tour-card, :root[data-theme="dark"] .act,
:root[data-theme="dark"] .cookmode .cstep ul li, :root[data-theme="dark"] .vcard .vbadge, :root[data-theme="dark"] .rseg button,
:root[data-theme="dark"] .exprow .exp-amt { background: var(--surface); color: var(--ink); }
:root[data-theme="dark"] .seg button.on, :root[data-theme="dark"] .rseg button.on { background: var(--brand); color: #fff; }
:root[data-theme="dark"] .vcard.free, :root[data-theme="dark"] .vcard.sad, :root[data-theme="dark"] .vcard { background: var(--card); }
:root[data-theme="dark"] nav.bottom { background: rgba(31, 28, 46, .94); border-color: var(--line); }
:root[data-theme="dark"] .duchbar.happy { background: linear-gradient(135deg, #2a2450, #17362a); }
:root[data-theme="dark"] .duchbar.work, :root[data-theme="dark"] .ctip, :root[data-theme="dark"] .pantrybar, :root[data-theme="dark"] .warnbox { background: var(--warm); color: var(--ink); border-color: #5a4a2a; }
:root[data-theme="dark"] .hmtip, :root[data-theme="dark"] .hormonbar, :root[data-theme="dark"] .aibox, :root[data-theme="dark"] .act-brand { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .pill.gray, :root[data-theme="dark"] .rtip-trend .rico { background: var(--surface); color: var(--muted); }
:root[data-theme="dark"] .cookmode { background: linear-gradient(160deg, #1a1730, #14261e); }
:root[data-theme="dark"] .modal-back { background: rgba(0, 0, 0, .55); }
:root[data-theme="dark"] .hbar-row .track, :root[data-theme="dark"] .limbar { background: var(--surface); }
:root[data-theme="dark"] .stat-tiles.three .stat, :root[data-theme="dark"] .rbal .stat { background: var(--card); }
:root[data-theme="dark"] .helpbtn { background: var(--card); }
:root[data-theme="dark"] .dnqr svg.qr { background: #fff; padding: 8px; }
:root[data-theme="dark"] img.receipt-img { filter: brightness(.9); }
:root[data-theme="dark"] .prefsec { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .tipbox.accnotice, :root[data-theme="dark"] .tipbox[style*="fff3d6"] { background: var(--warm) !important; }
:root[data-theme="dark"] .card[style*="linear-gradient"], :root[data-theme="dark"] .duchbar[style*="linear-gradient"] { background: var(--surface) !important; }
:root[data-theme="dark"] .seg.segbig button { background: var(--surface); }
:root[data-theme="dark"] .seg.segbig button.on { background: var(--brand); }
:root[data-theme="dark"] .empty img, :root[data-theme="dark"] .hero img { filter: brightness(.92); }
:root[data-theme="dark"] .goalrow .limbar.goal { background: var(--surface); }

/* Míňoš: dve hlavné akcie farebné, ostatné malé */
.actgrid-main { margin-bottom: 8px; }
.act-fill-brand, .act-fill-green { color: #fff; border-color: transparent; }
.act-fill-brand { background: linear-gradient(135deg, #7c5cff, #6a4bec); box-shadow: 0 10px 24px rgba(124,92,255,.35); }
.act-fill-green { background: linear-gradient(135deg, #4cb782, #3a9d6c); box-shadow: 0 10px 24px rgba(76,183,130,.35); }
.act-fill-brand .ico, .act-fill-green .ico, .act-fill-brand .ico .ic, .act-fill-green .ico .ic, .act-fill-brand small, .act-fill-green small { color: rgba(255,255,255,.95); }
.act-fill-brand b, .act-fill-green b { color: #fff; }
.actrow { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.actrow .btn { flex: 1 1 auto; justify-content: center; }
.actrow label.btn { display: inline-flex; align-items: center; cursor: pointer; }
:root[data-theme="dark"] .act-fill-brand, :root[data-theme="dark"] .act-fill-green { color: #fff; }
.villains { margin-bottom: 12px; }
.vcard { padding: 11px 12px; gap: 8px; }

/* 5.8: veľký mikrofón na Domove (v strede pod pozdravom) a „?" v hornej lište */
.micbig-wrap { text-align: center; margin: 0 0 12px; }
.micbig { width: 66px; height: 66px; border-radius: 50%; border: 0; background: linear-gradient(135deg, #7c5cff, #6a4bec); color: #fff; box-shadow: 0 12px 28px rgba(124,92,255,.38); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .12s; }
.micbig .ic { width: 34px; height: 34px; vertical-align: 0; color: #fff; }
.micbig:active { transform: scale(.94); }
.micbig.rec { animation: micpulse 1s infinite; background: linear-gradient(135deg, #e0475a, #c9333f); box-shadow: 0 12px 28px rgba(201,51,63,.4); }
.micbig-wrap p { margin: 6px auto 0; max-width: 360px; line-height: 1.3; font-size: 12.5px; }
.topbar .helpbtn { margin-top: 0; width: 36px; height: 36px; }
/* nízke displeje (iPhone SE/8): mikrofón menší a bez nápovedy, nech sú všetci zloduchovia nad dolnou ponukou */
@media (max-height: 720px) {
    .micbig { width: 54px; height: 54px; }
    .micbig .ic { width: 28px; height: 28px; }
    .micbig-wrap { margin-bottom: 8px; }
    .micbig-wrap p { display: none; }
    .duchbar { padding: 8px 12px; margin-bottom: 10px; }
    .duchbar img { width: 42px; height: 46px; }
}

/* 5.9: prihlásenie — „Kto sa prihlasuje?“ */
.whoami-q { font-weight: 800; font-size: 14px; margin: 14px 0 8px; color: var(--ink); }
.whoami { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.whoami .who { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; border: 2px solid var(--line); background: var(--card); border-radius: 14px; padding: 10px 12px; cursor: pointer; color: var(--ink); }
.whoami .who .wico { flex: none; width: 38px; height: 38px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.whoami .who .wico .ic { width: 22px; height: 22px; vertical-align: 0; }
.whoami .who .wtxt { flex: 1; min-width: 0; }
.whoami .who .wtxt b { display: block; font-size: 14.5px; }
.whoami .who .wtxt small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; margin-top: 1px; }
.whoami .who .wchk { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.whoami .who .wchk .ic { width: 14px; height: 14px; vertical-align: 0; }
.whoami .who.on { border-color: var(--brand); background: linear-gradient(135deg, #f3efff, #ffffff); }
.whoami .who.on .wchk { background: var(--brand); border-color: var(--brand); }
.whoami-form { border: 1px dashed var(--line); border-radius: 14px; padding: 12px; margin-bottom: 14px; }
.newfam { background: var(--brand-soft); border-radius: 14px; padding: 12px; }
.newfam b { display: block; font-size: 14px; }
.newfam small { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; line-height: 1.35; }
:root[data-theme="dark"] .whoami .who.on { background: var(--card); }
:root[data-theme="dark"] .newfam { background: rgba(124,92,255,.14); }
/* „Počul som…“ — kontrola nadiktovaného nákupu */
.vc-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.vc-row .vc-name { flex: 1; min-width: 0; width: auto; }
.vc-row .vc-qty { flex: none; width: 92px; }
.vc-row .iconbtn { flex: none; }

/* 6.0: rozpočet — panel import/export a rýchly prehľad mesiaca */
.iopanel[hidden] { display: none; }
.iopanel { display: flex; flex-direction: column; gap: 6px; padding: 10px; margin: -4px 0 12px; border: 1px dashed var(--line); border-radius: 14px; background: var(--card); }
.iopanel .btn.block { margin: 0; }
#b-more.open .ic:last-child { transform: rotate(180deg); }
#b-more .ic:last-child { transition: transform .15s; }
.quickrep .tipbox { margin: 6px 0 10px; }
.quickrep h3 { margin-bottom: 4px; }

/* postup receptu v detaile: krok, jeho suroviny a tip pod sebou */
.rsteps { padding-left: 20px; font-size: 14.5px; line-height: 1.5; }
.rsteps li { margin-bottom: 9px; }
.rsteps li small { display: block; font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.rsteps li small.tip { color: var(--brand); }
.rsteps .pill { font-size: 11.5px; vertical-align: 1px; }

/* mikrofón sa ovláda aj podržaním — prehliadač nesmie gesto zobrať ako rolovanie */
.micbig, .micbtn, .minimic, .kmic { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* čítanie krokov nahlas */
.cookmode .ctop .iconbtn { flex: none; background: var(--card); box-shadow: var(--shadow); }
.cookmode .ctop .ck-tts.on { background: var(--brand); color: #fff; }
.cookmode .ctop .ck-tts.on .ic { color: #fff; }

/* ============================================================
   6.3: okno „Počúvam“ — jednotné diktovanie na celom webe
   ============================================================ */
.vpanel { position: fixed; inset: 0; z-index: 150; background: rgba(43, 35, 80, .5); display: flex; align-items: flex-end; justify-content: center; animation: fadein .15s; }
.vp-card { background: var(--card); color: var(--ink); width: 100%; max-width: 520px; border-radius: 22px 22px 0 0; padding: 14px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -12px 40px rgba(0,0,0,.22); text-align: center; }
@media (min-width: 700px) { .vpanel { align-items: center; } .vp-card { border-radius: 22px; } }
.vp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vp-head b { font-size: 17px; }
.vp-mic { width: 92px; height: 92px; border-radius: 50%; border: 0; margin: 6px auto 8px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: linear-gradient(135deg, #7c5cff, #6a4bec); color: #fff; box-shadow: 0 12px 28px rgba(124,92,255,.38); transition: transform .12s, background .2s; }
.vp-mic .ic { width: 42px; height: 42px; color: #fff; vertical-align: 0; }
.vp-mic:active { transform: scale(.95); }
.vpanel.listening .vp-mic { background: linear-gradient(135deg, #e0475a, #c9333f); animation: vppulse 1.3s ease-out infinite; }
.vpanel.starting .vp-mic { opacity: .75; }
.vpanel.typing .vp-mic { display: none; }
@keyframes vppulse { 0% { box-shadow: 0 0 0 0 rgba(224,71,90,.45); } 70% { box-shadow: 0 0 0 24px rgba(224,71,90,0); } 100% { box-shadow: 0 0 0 0 rgba(224,71,90,0); } }
.vp-state { font-weight: 800; font-size: 16px; margin: 0 0 2px; font-variant-numeric: tabular-nums; }
.vpanel.listening .vp-state { color: #c9333f; }
.vp-ex { font-size: 13px; color: var(--muted); margin: 0 0 10px; line-height: 1.35; }
.vp-ex:empty { display: none; }
.vp-text { width: 100%; min-height: 86px; font-size: 16px; line-height: 1.4; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; resize: none; text-align: left; background: var(--bg); color: var(--ink); }
.vp-text:focus { outline: none; border-color: var(--brand); }
.vp-actions { display: flex; gap: 10px; margin-top: 12px; }
.vp-actions .btn { flex: 1; padding: 14px 10px; font-size: 16px; }
.vpanel.finishing .vp-actions .btn, .vpanel.finishing .vp-mic { opacity: .5; pointer-events: none; }

/* 6.4: voľby v okne „Dať prístup“ — musia vyzerať ako tlačidlá */
.accopt { display: block; width: 100%; text-align: left; background: var(--card); color: var(--ink);
    border: 2px solid var(--line); border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; cursor: pointer; font: inherit; }
.accopt > b { display: block; font-size: 15px; margin-bottom: 2px; }
.accopt > small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.accopt.accrow { display: flex; align-items: center; gap: 12px; }
.accopt:hover, .accopt:focus-visible { border-color: var(--brand); background: var(--brand-soft); }
.accopt:active { transform: scale(.99); }
.accopt .accico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; }
.accopt .accico .ic { width: 22px; height: 22px; vertical-align: 0; }
.accopt .acctxt { flex: 1; min-width: 0; }
.accopt .acctxt > b { display: block; font-size: 15px; margin-bottom: 2px; }
.accopt .acctxt small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.accopt .accgo { flex: none; color: var(--brand); }

/* 6.4: iPhone — okno hore (klávesnica ho nezakryje) a návod na mikrofón klávesnice */
.vpanel.ios { align-items: flex-start; }
.vpanel.ios .vp-card { border-radius: 0 0 22px 22px; padding-top: calc(12px + env(safe-area-inset-top)); max-height: 100vh; overflow-y: auto; }
.vpanel.ios .vp-text { min-height: 64px; }
.vp-ioshelp { text-align: left; background: var(--brand-soft); border-radius: 14px; padding: 10px 12px; margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; }
.vp-ioshelp ol { margin: 8px 0 4px 18px; padding: 0; }
.vp-ioshelp li { margin-bottom: 4px; }
.vp-ioshelp .ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--brand); }
.vp-ioshelp details { margin-top: 4px; }
.vp-ioshelp summary { cursor: pointer; color: var(--brand); font-weight: 700; font-size: 12.5px; }
.vp-ioshelp details p { margin: 6px 0 0; font-size: 12.5px; }
/* malý obrázok spodku klávesnice iPhonu so zvýrazneným mikrofónom */
.kbd { background: #d1d4db; border-radius: 10px; padding: 6px 6px 4px; max-width: 280px; margin: 0 auto; }
.kbd-row { display: flex; gap: 4px; margin-bottom: 4px; }
.kbd-row i { flex: 1; height: 18px; background: #fff; border-radius: 4px; font-style: normal; font-size: 9px; color: #333; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 0 #888; }
.kbd-row i.w2 { flex: 1.4; background: #adb1ba; }
.kbd-row i.glob { flex: .9; background: #adb1ba; }
.kbd-row i.glob .ic { width: 11px; height: 11px; color: #333; }
.kbd-row i.space { flex: 4; }
.kbd-bar { display: flex; justify-content: space-between; align-items: center; padding: 3px 8px 1px; color: #555; font-size: 14px; }
.kb-mic { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 4px rgba(124,92,255,.35); animation: vppulse 1.6s ease-out infinite; }
.kb-mic .ic { width: 17px !important; height: 17px !important; color: #fff !important; vertical-align: 0 !important; }

.iosnote { text-align: left; margin-top: 12px; }
.iosshare .ic { width: 16px; height: 16px; vertical-align: -3px; color: #0a84ff; }

#il-url, #ii-url, #sh-url { width: 100%; box-sizing: border-box; }

/* 6.4: krížik v každom okne */
.modal-x { position: sticky; top: -6px; float: right; z-index: 3; margin: -10px -8px 4px 10px; width: 38px; height: 38px; border-radius: 50%; border: 0;
    background: var(--bg); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.modal-x:hover { color: var(--ink); background: var(--brand-soft); }
.modal-x .ic { width: 20px; height: 20px; vertical-align: 0; }
/* 6.4: tri dlaždice (príjmy · výdavky · ostáva) sa nesmú roztiahnuť za okraj ani pri 5-ciferných sumách */
.stat-tiles.three > .stat, .rbal > .stat { min-width: 0; }
.stat-tiles.three .stat b, .rbal .stat b { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .stat-tiles.three .stat b, .rbal .stat b { font-size: 13px; } .stat-tiles.three, .rbal { gap: 6px; } }