/* ============================================
   Rodinný Hub - Hlavní styly
   Mobile-First přístup, čisté CSS bez frameworků
   ============================================ */

/* --- Google Fonts importovány v HTML --- */

/* ============================================
   CSS CUSTOM PROPERTIES (Proměnné)
   ============================================ */
:root {
    /* Světlé téma (výchozí) */
    --bg-app:         #f0ede8;
    --bg-card:        #ffffff;
    --bg-card-hover:  #f8f6f3;
    --bg-input:       #f5f3ef;
    --bg-tab-bar:     #ffffff;
    --bg-header:      #1a1a2e;

    --text-primary:   #1a1a2e;
    --text-secondary: #6b6876;
    --text-muted:     #a09cab;
    --text-on-dark:   #ffffff;

    --accent-primary: #e07b4a;
    --accent-blue:    #4f8ef7;
    --accent-green:   #4fc97a;
    --accent-red:     #e05f4a;

    --border:         #e8e4de;
    --border-strong:  #d0cbc3;

    --shadow-sm:      0 2px 8px rgba(26, 26, 46, 0.06);
    --shadow-md:      0 4px 20px rgba(26, 26, 46, 0.10);
    --shadow-lg:      0 8px 40px rgba(26, 26, 46, 0.15);

    --radius-sm:      8px;
    --radius-md:      14px;
    --radius-lg:      20px;
    --radius-xl:      28px;

    --font-sans:      'Nunito', sans-serif;
    --font-display:   'Fraunces', serif;

    --transition:     0.18s ease;
    --header-height:  60px;
    --tabbar-height:  68px;
}

/* Tmavé téma */
[data-theme="dark"] {
    --bg-app:         #0f0e17;
    --bg-card:        #1a1928;
    --bg-card-hover:  #22213a;
    --bg-input:       #13121f;
    --bg-tab-bar:     #1a1928;
    --bg-header:      #0f0e17;

    --text-primary:   #f0ede8;
    --text-secondary: #9d9ab0;
    --text-muted:     #5c5a72;

    --border:         #2a2840;
    --border-strong:  #3a3858;

    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:      0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg:      0 8px 40px rgba(0, 0, 0, 0.5);
}

/* ============================================
   RESET & ZÁKLADY
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-app);
    color: var(--text-primary);
    min-height: 100vh;
    min-height: -webkit-fill-available;
    overflow-x: hidden;
    transition: background var(--transition), color var(--transition);
}

button {
    font-family: var(--font-sans);
    cursor: pointer;
    border: none;
    background: none;
}

input, select, textarea {
    font-family: var(--font-sans);
}

/* ============================================
   LAYOUT
   ============================================ */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-header);
    z-index: 100;
    box-shadow: var(--shadow-md);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;
    max-width: 680px;
    margin: 0 auto;
}

.app-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 22px;
    line-height: 1;
}

.logo-text {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-on-dark);
    letter-spacing: -0.3px;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: background var(--transition), transform var(--transition);
}

.theme-toggle:hover {
    background: rgba(255,255,255,0.22);
    transform: rotate(15deg);
}

/* Tab navigace (spodní lišta) */
.tab-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--tabbar-height);
    background: var(--bg-tab-bar);
    border-top: 1px solid var(--border);
    display: flex;
    z-index: 100;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}

.tab-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    transition: color var(--transition), transform var(--transition);
    padding: 8px 0 4px;
    position: relative;
}

.tab-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 3px;
    background: var(--accent-primary);
    border-radius: 0 0 4px 4px;
    transform: scaleX(0);
    transition: transform var(--transition);
}

.tab-btn.active {
    color: var(--accent-primary);
}

.tab-btn.active::before {
    transform: scaleX(1);
}

.tab-btn:active {
    transform: scale(0.92);
}

.tab-icon {
    font-size: 22px;
    line-height: 1;
}

.tab-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hlavní obsah */
.app-main {
    padding-top: calc(var(--header-height) + 16px);
    padding-bottom: calc(var(--tabbar-height) + 16px);
    padding-left: 16px;
    padding-right: 16px;
    max-width: 680px;
    margin: 0 auto;
}

/* Záložky obsahu */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.25s ease;
}

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

/* ============================================
   KARTA (Card)
   ============================================ */
.card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: background var(--transition), border-color var(--transition);
}

/* ============================================
   HLAVIČKA SEKCE
   ============================================ */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-top: 4px;
}

.section-title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.5px;
}

/* ============================================
   FORMULÁŘE
   ============================================ */
.add-item-form {
    padding: 16px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.form-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input {
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 16px; /* 16px zabrání zoomu na iOS */
    color: var(--text-primary);
    flex: 1;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    -webkit-appearance: none;
}

.form-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(224, 123, 74, 0.15);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-input--small {
    flex: 0 0 70px;
    text-align: center;
}

.form-select {
    background: var(--bg-input);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text-primary);
    flex: 1;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M6 8L0 0h12z' fill='%23a09cab'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    transition: border-color var(--transition);
}

.form-select:focus {
    border-color: var(--accent-primary);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}

/* ============================================
   TLAČÍTKA
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 18px;
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-weight: 700;
    transition: all var(--transition);
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.btn:active {
    transform: scale(0.95);
}

.btn-primary {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 3px 12px rgba(224, 123, 74, 0.35);
}

.btn-primary:hover {
    background: #d06838;
    box-shadow: 0 4px 16px rgba(224, 123, 74, 0.45);
}

.btn-primary-soft {
    background: rgba(224, 123, 74, 0.12);
    color: var(--accent-primary);
}

.btn-primary-soft:hover {
    background: rgba(224, 123, 74, 0.2);
}

.btn-danger-soft {
    background: rgba(224, 95, 74, 0.10);
    color: var(--accent-red);
    font-size: 14px;
    padding: 8px 12px;
}

.btn-danger-soft:hover {
    background: rgba(224, 95, 74, 0.18);
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-card-hover);
}

.btn-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--bg-input);
    color: var(--text-secondary);
    transition: all var(--transition);
    flex-shrink: 0;
}

.btn-icon:hover {
    background: rgba(224, 95, 74, 0.1);
    color: var(--accent-red);
}

/* ============================================
   FILTR
   ============================================ */
.filter-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
}

.filter-bar::-webkit-scrollbar { display: none; }

.filter-btn {
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all var(--transition);
}

.filter-btn.active {
    background: var(--text-primary);
    color: var(--bg-app);
    border-color: var(--text-primary);
}

/* ============================================
   NÁKUPNÍ SEZNAM
   ============================================ */
.shopping-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Jedna položka */
.shopping-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    transition: all var(--transition);
    cursor: pointer;
    animation: slideIn 0.25s ease;
    user-select: none;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}

.shopping-item:active {
    transform: scale(0.98);
}

.shopping-item.koupena {
    opacity: 0.5;
    background: var(--bg-card-hover);
}

/* Checkbox (vlastní design) */
.item-checkbox {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2.5px solid var(--border-strong);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
    background: transparent;
}

.shopping-item.koupena .item-checkbox {
    background: var(--accent-green);
    border-color: var(--accent-green);
}

.item-checkbox-tick {
    opacity: 0;
    color: white;
    font-size: 13px;
    font-weight: 900;
    transition: opacity var(--transition);
}

.shopping-item.koupena .item-checkbox-tick {
    opacity: 1;
}

/* Text položky */
.item-body {
    flex: 1;
    min-width: 0;
}

.item-nazev {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    transition: all var(--transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.shopping-item.koupena .item-nazev {
    text-decoration: line-through;
    color: var(--text-muted);
}

.item-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.item-clen-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ============================================
   KALENDÁŘ
   ============================================ */
.calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.cal-nav-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.cal-nav-btn:hover {
    background: var(--accent-primary);
    color: white;
}

.cal-nav-btn:active {
    transform: scale(0.92);
}

.cal-month-label {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

/* Mřížka kalendáře */
.calendar-grid-wrapper {
    padding: 14px;
    margin-bottom: 16px;
}

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

.calendar-weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0;
}

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

/* Jeden den v mřížce */
.cal-day {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all var(--transition);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
}

.cal-day:hover {
    background: var(--bg-card-hover);
}

.cal-day:active {
    transform: scale(0.9);
}

.cal-day.dnes {
    background: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 8px rgba(224, 123, 74, 0.4);
}

.cal-day.vybrano {
    background: var(--text-primary);
    color: var(--bg-app);
    box-shadow: var(--shadow-sm);
}

.cal-day.vybrano.dnes {
    background: var(--accent-primary);
}

.cal-day.jiny-mesic {
    color: var(--text-muted);
    opacity: 0.4;
}

/* Tečky událostí pod číslem dne */
.cal-day-dots {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    position: absolute;
    bottom: 4px;
}

.cal-day-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Události pod kalendářem */
.events-list-section {
    margin-top: 4px;
}

.events-list-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-left: 4px;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Jedna událost */
.event-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border);
    animation: slideIn 0.25s ease;
}

.event-color-bar {
    width: 4px;
    min-height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
    align-self: stretch;
}

.event-body {
    flex: 1;
    min-width: 0;
}

.event-nazev {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.event-meta {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.event-datum-badge {
    background: var(--bg-input);
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
}

.event-clen-badge {
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 12px;
    color: white;
}

/* ============================================
   SPRÁVA RODINY
   ============================================ */
.rodina-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.clen-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1.5px solid var(--border);
    animation: slideIn 0.25s ease;
}

.clen-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    border: 3px solid transparent;
}

.clen-info {
    flex: 1;
    min-width: 0;
}

.clen-jmeno {
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

.clen-stats {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 3px;
    display: flex;
    gap: 10px;
}

.clen-stat {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ============================================
   MODÁLNÍ OKNA
   ============================================ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: flex;
    align-items: flex-end; /* Na mobilu se otevírá zdola */
    justify-content: center;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-overlay.aktivni {
    opacity: 1;
    pointer-events: all;
}

.modal {
    width: 100%;
    max-width: 600px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 0;
    transform: translateY(30px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: 92dvh;
    overflow-y: auto;
}

.modal-overlay.aktivni .modal {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 0;
}

.modal-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.modal-close:hover {
    background: rgba(224, 95, 74, 0.12);
    color: var(--accent-red);
}

.modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 0 20px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0));
}

.modal-footer .btn {
    flex: 1;
}

/* ============================================
   VÝBĚR EMOJI
   ============================================ */
.emoji-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.emoji-btn {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--bg-input);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
}

.emoji-btn:hover {
    border-color: var(--accent-primary);
    transform: scale(1.1);
}

.emoji-btn.vybrano {
    border-color: var(--accent-primary);
    background: rgba(224, 123, 74, 0.12);
    box-shadow: 0 0 0 3px rgba(224, 123, 74, 0.2);
}

/* ============================================
   VÝBĚR BARVY
   ============================================ */
.color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    border: none;
    padding: 0;
    cursor: pointer;
    background: none;
    -webkit-appearance: none;
}

.color-picker::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: var(--radius-sm);
}

.color-picker::-webkit-color-swatch {
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
}

.color-preview {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background var(--transition);
    border: 2px solid var(--border);
}

.color-hint {
    font-size: 13px;
    color: var(--text-muted);
}

/* ============================================
   TOAST NOTIFIKACE
   ============================================ */
.toast-container {
    position: fixed;
    bottom: calc(var(--tabbar-height) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    width: calc(100% - 32px);
    max-width: 380px;
}

.toast {
    padding: 12px 18px;
    border-radius: var(--radius-md);
    background: var(--text-primary);
    color: var(--bg-app);
    font-size: 14px;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 8px;
}

.toast.success { background: var(--accent-green); color: white; }
.toast.error   { background: var(--accent-red); color: white; }
.toast.info    { background: var(--accent-blue); color: white; }

@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px) scale(0.9); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.9); }
}

/* ============================================
   LOADING / PRÁZDNÉ STAVY
   ============================================ */
.loading-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--border);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--text-muted);
    text-align: center;
}

.empty-state-icon {
    font-size: 48px;
    opacity: 0.5;
}

.empty-state-text {
    font-size: 15px;
    font-weight: 600;
}

.empty-state-hint {
    font-size: 13px;
    opacity: 0.8;
}

/* ============================================
   DESKTOP ÚPRAVY (pro širší obrazovky)
   ============================================ */
@media (min-width: 600px) {
    .app-main {
        padding-left: 24px;
        padding-right: 24px;
    }

    .modal-overlay {
        align-items: center;
    }

    .modal {
        border-radius: var(--radius-xl);
        max-width: 480px;
    }

    .modal-footer {
        padding-bottom: 24px;
    }

    .tab-label {
        font-size: 11px;
    }

    .cal-day {
        font-size: 15px;
    }
}

/* ============================================
   DESIGN UPGRADE 2026 – útulný prémiový kabátek
   Zachovává původní HTML/JS, mění pouze vizuální vrstvu.
   ============================================ */
:root {
    --bg-app: #f7f1e8;
    --bg-card: rgba(255, 255, 255, 0.82);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-input: rgba(255, 255, 255, 0.72);
    --bg-tab-bar: rgba(255, 255, 255, 0.78);
    --bg-header: rgba(35, 31, 45, 0.78);

    --text-primary: #251f2f;
    --text-secondary: #756b7d;
    --text-muted: #a299a9;
    --text-on-dark: #fffaf3;

    --accent-primary: #ff7a59;
    --accent-blue: #6b8cff;
    --accent-green: #39c986;
    --accent-red: #ff5f5f;
    --accent-yellow: #ffc857;
    --accent-purple: #9b7cff;

    --border: rgba(73, 58, 42, 0.10);
    --border-strong: rgba(73, 58, 42, 0.20);

    --shadow-sm: 0 8px 24px rgba(79, 58, 38, 0.08);
    --shadow-md: 0 16px 38px rgba(79, 58, 38, 0.12);
    --shadow-lg: 0 30px 80px rgba(55, 39, 30, 0.22);

    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 24px;
    --radius-xl: 34px;
    --transition: 0.22s cubic-bezier(.2,.8,.2,1);
    --header-height: 74px;
    --tabbar-height: 78px;
}

[data-theme="dark"] {
    --bg-app: #11111b;
    --bg-card: rgba(31, 30, 45, 0.78);
    --bg-card-hover: rgba(43, 41, 62, 0.92);
    --bg-input: rgba(19, 18, 31, 0.82);
    --bg-tab-bar: rgba(25, 24, 36, 0.82);
    --bg-header: rgba(15, 14, 23, 0.78);

    --text-primary: #fff7ee;
    --text-secondary: #bbb2c7;
    --text-muted: #77708a;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --shadow-sm: 0 10px 30px rgba(0,0,0,0.28);
    --shadow-md: 0 18px 44px rgba(0,0,0,0.36);
    --shadow-lg: 0 34px 90px rgba(0,0,0,0.50);
}

html {
    background: var(--bg-app);
}

body {
    position: relative;
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 122, 89, 0.22), transparent 28rem),
        radial-gradient(circle at 86% 4%, rgba(107, 140, 255, 0.16), transparent 26rem),
        radial-gradient(circle at 50% 96%, rgba(57, 201, 134, 0.13), transparent 30rem),
        var(--bg-app);
    letter-spacing: -0.01em;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255,255,255,.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.32), transparent 55%);
}

[data-theme="dark"] body::before {
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
}

.app-header {
    top: 12px;
    left: 12px;
    right: 12px;
    height: var(--header-height);
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(37,31,47,.90), rgba(49,40,66,.78)),
        var(--bg-header);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 22px 60px rgba(37,31,47,.22);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.header-inner {
    max-width: 820px;
    padding: 0 18px 0 20px;
}

.app-logo {
    gap: 12px;
}

.logo-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 22px rgba(0,0,0,.12);
}

.logo-text {
    font-size: 22px;
    letter-spacing: -0.55px;
    text-shadow: 0 1px 0 rgba(0,0,0,.08);
}

.theme-toggle,
.logout-btn {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.theme-toggle:hover,
.logout-btn:hover {
    background: rgba(255,255,255,0.24);
    transform: translateY(-1px);
}

.app-main {
    max-width: 820px;
    padding-top: calc(var(--header-height) + 36px);
    padding-left: 18px;
    padding-right: 18px;
}

.section-header {
    margin-bottom: 18px;
    align-items: flex-end;
}

.section-title {
    position: relative;
    font-size: clamp(28px, 7vw, 42px);
    line-height: 1.02;
    letter-spacing: -1.25px;
}

.section-title::after {
    content: '';
    display: block;
    width: 54px;
    height: 5px;
    margin-top: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-yellow));
    box-shadow: 0 8px 18px rgba(255, 122, 89, .28);
}

.card,
.shopping-item,
.event-item,
.clen-card,
.filter-btn {
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}

.card {
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.62);
}

.add-item-form,
.calendar-nav,
.calendar-grid-wrapper {
    position: relative;
    overflow: hidden;
}

.add-item-form::before,
.calendar-nav::before,
.calendar-grid-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.42), transparent 45%);
}

.form-row {
    gap: 12px;
}

.form-input,
.form-select {
    min-height: 52px;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 8px 20px rgba(45,32,20,.04);
}

.form-input:focus,
.form-select:focus {
    border-color: rgba(255,122,89,.72);
    box-shadow: 0 0 0 5px rgba(255, 122, 89, 0.14), inset 0 1px 0 rgba(255,255,255,.76);
    background: var(--bg-card-hover);
}

.btn {
    min-height: 46px;
    border-radius: 18px;
    transform: translateZ(0);
}

.btn-primary {
    background: linear-gradient(135deg, #ff8a63, #ff684f);
    color: #fff;
    box-shadow: 0 14px 26px rgba(255, 104, 79, 0.30), inset 0 1px 0 rgba(255,255,255,.28);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ff9875, #ff604a);
    box-shadow: 0 18px 34px rgba(255, 104, 79, 0.38), inset 0 1px 0 rgba(255,255,255,.32);
    transform: translateY(-1px);
}

.btn-primary-soft,
.btn-danger-soft,
.btn-ghost {
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.btn-primary-soft {
    background: rgba(255, 122, 89, 0.13);
}

.btn-danger-soft {
    background: rgba(255, 95, 95, 0.11);
}

.filter-bar {
    gap: 10px;
    margin-bottom: 18px;
    padding: 2px 2px 8px;
}

.filter-btn {
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 8px 18px rgba(79,58,38,.05), inset 0 1px 0 rgba(255,255,255,.66);
}

.filter-btn.active {
    background: linear-gradient(135deg, var(--text-primary), #4b3a5b);
    color: #fffaf3;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(37,31,47,.18);
}

.shopping-list,
.events-list,
.rodina-grid {
    gap: 12px;
}

.shopping-item,
.event-item,
.clen-card {
    position: relative;
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.62);
}

.shopping-item:hover,
.event-item:hover,
.clen-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255,122,89,.22);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.72);
}

.shopping-item {
    padding: 16px;
    border-radius: 22px;
}

.shopping-item.koupena {
    opacity: .64;
    background: rgba(255,255,255,.52);
}

.item-checkbox {
    width: 30px;
    height: 30px;
    border: 2px solid rgba(117,107,125,.26);
    background: rgba(255,255,255,.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.shopping-item.koupena .item-checkbox {
    background: linear-gradient(135deg, #39c986, #28a96e);
    border-color: transparent;
    box-shadow: 0 8px 18px rgba(57,201,134,.26);
}

.item-nazev {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.item-meta,
.event-meta,
.clen-stats {
    font-weight: 700;
}

.item-clen-dot,
.cal-day-dot {
    box-shadow: 0 0 0 3px rgba(255,255,255,.75);
}

.calendar-nav {
    padding: 14px 16px;
    border-radius: 24px;
}

.cal-nav-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: rgba(255,255,255,.54);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.cal-month-label {
    font-size: 21px;
    letter-spacing: -0.45px;
}

.calendar-grid-wrapper {
    padding: 16px;
    border-radius: 28px;
}

.calendar-weekdays span {
    font-size: 12px;
    color: var(--text-secondary);
}

.calendar-grid {
    gap: 7px;
}

.cal-day {
    border-radius: 17px;
    background: rgba(255,255,255,.36);
    border: 1px solid transparent;
}

.cal-day:hover {
    background: rgba(255,255,255,.78);
    border-color: var(--border);
}

.cal-day.dnes {
    background: linear-gradient(135deg, #ff8a63, #ff684f);
    box-shadow: 0 14px 24px rgba(255,104,79,.30);
}

.cal-day.vybrano:not(.dnes) {
    background: linear-gradient(135deg, #251f2f, #4b3a5b);
    color: #fffaf3;
    box-shadow: 0 14px 24px rgba(37,31,47,.20);
}

.events-list-title {
    margin-top: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.event-item {
    padding: 16px;
    border-radius: 22px;
}

.event-color-bar {
    width: 6px;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(255,255,255,.60);
}

.event-nazev {
    font-size: 16px;
    font-weight: 850;
}

.event-datum-badge,
.event-clen-badge {
    padding: 5px 10px;
    border-radius: 999px;
}

.event-datum-badge {
    background: rgba(255,255,255,.58);
    border: 1px solid var(--border);
}

.clen-card {
    padding: 18px;
    border-radius: 26px;
}

.clen-avatar {
    width: 60px;
    height: 60px;
    border-width: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 16px 28px rgba(79,58,38,.10);
}

.clen-avatar span {
    filter: drop-shadow(0 3px 5px rgba(0,0,0,.10));
}

.clen-jmeno {
    font-size: 19px;
    letter-spacing: -0.35px;
}

.clen-stats {
    gap: 8px;
    flex-wrap: wrap;
}

.clen-stat {
    background: rgba(255,255,255,.54);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 9px;
}

.btn-icon {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(255,255,255,.54);
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.btn-icon:hover {
    transform: translateY(-1px) rotate(-4deg);
}

.modal-overlay {
    background: rgba(37,31,47,.42);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.modal {
    border: 1px solid var(--border);
    background: var(--bg-card);
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.60);
}

.modal-header {
    padding: 24px 24px 0;
}

.modal-title {
    font-size: 24px;
    letter-spacing: -0.55px;
}

.modal-body {
    padding: 22px 24px;
}

.modal-footer {
    padding-left: 24px;
    padding-right: 24px;
}

.modal-close {
    width: 40px;
    height: 40px;
    border-radius: 16px;
}

.emoji-btn {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background: rgba(255,255,255,.56);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.62);
}

.emoji-btn.vybrano {
    background: rgba(255, 122, 89, .16);
    box-shadow: 0 0 0 5px rgba(255, 122, 89, 0.13), inset 0 1px 0 rgba(255,255,255,.72);
}

.toast-container {
    bottom: calc(var(--tabbar-height) + 24px);
}

.toast {
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(18px);
}

.spinner {
    width: 34px;
    height: 34px;
    border-width: 4px;
}

.empty-state {
    background: rgba(255,255,255,.36);
    border: 1px dashed var(--border-strong);
    border-radius: 28px;
}

.tab-nav {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    height: var(--tabbar-height);
    max-width: 560px;
    margin: 0 auto;
    border-radius: 30px;
    border: 1px solid var(--border);
    background: var(--bg-tab-bar);
    box-shadow: 0 24px 70px rgba(55,39,30,.18), inset 0 1px 0 rgba(255,255,255,.62);
    backdrop-filter: blur(24px) saturate(150%);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    overflow: hidden;
}

.tab-btn {
    border-radius: 24px;
    margin: 8px;
    padding: 8px 6px;
}

.tab-btn::before {
    display: none;
}

.tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #251f2f, #4b3a5b);
    box-shadow: 0 12px 28px rgba(37,31,47,.20), inset 0 1px 0 rgba(255,255,255,.18);
}

.tab-icon {
    font-size: 23px;
}

.tab-label {
    font-size: 11px;
    letter-spacing: .65px;
}

[data-theme="dark"] .app-header,
[data-theme="dark"] .tab-nav,
[data-theme="dark"] .card,
[data-theme="dark"] .shopping-item,
[data-theme="dark"] .event-item,
[data-theme="dark"] .clen-card,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .btn-icon,
[data-theme="dark"] .cal-nav-btn,
[data-theme="dark"] .cal-day,
[data-theme="dark"] .event-datum-badge,
[data-theme="dark"] .clen-stat {
    box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.06);
}

[data-theme="dark"] .cal-day:hover,
[data-theme="dark"] .filter-btn,
[data-theme="dark"] .event-datum-badge,
[data-theme="dark"] .clen-stat,
[data-theme="dark"] .btn-icon,
[data-theme="dark"] .cal-nav-btn {
    background: rgba(255,255,255,.055);
}

@media (max-width: 430px) {
    :root {
        --header-height: 68px;
        --tabbar-height: 74px;
    }

    .app-header {
        top: 8px;
        left: 8px;
        right: 8px;
        border-radius: 24px;
    }

    .logo-icon {
        width: 40px;
        height: 40px;
        border-radius: 16px;
    }

    .logo-text {
        font-size: 19px;
    }

    .theme-toggle,
    .logout-btn {
        width: 38px;
        height: 38px;
        border-radius: 15px;
    }

    .app-main {
        padding-left: 14px;
        padding-right: 14px;
        padding-top: calc(var(--header-height) + 30px);
    }

    .section-header {
        align-items: flex-start;
        gap: 12px;
    }

    .section-header .btn {
        padding-left: 12px;
        padding-right: 12px;
        font-size: 13px;
    }

    .form-row:first-child {
        align-items: stretch;
    }

    .form-input--small {
        flex-basis: 78px;
    }

    .tab-nav {
        left: 8px;
        right: 8px;
        bottom: 8px;
        border-radius: 26px;
    }

    .tab-btn {
        margin: 7px 4px;
    }
}

@media (min-width: 760px) {
    .app-main {
        padding-left: 28px;
        padding-right: 28px;
    }

    .shopping-list,
    .events-list,
    .rodina-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .shopping-item,
    .event-item,
    .clen-card {
        min-height: 88px;
    }

    .add-item-form {
        padding: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================
   V3 PREMIUM MAKEOVER – výraznější kabátek + cache-bust 2026
   ========================================================== */
:root {
    --bg-app: #fff8ef;
    --bg-card: rgba(255,255,255,.88);
    --bg-card-hover: #ffffff;
    --bg-input: rgba(255,255,255,.82);
    --bg-tab-bar: rgba(255,255,255,.86);
    --bg-header: transparent;
    --text-primary: #21172d;
    --text-secondary: #6f607a;
    --text-muted: #a397aa;
    --accent-primary: #ff5f6d;
    --accent-blue: #4d7cff;
    --accent-green: #18b981;
    --accent-red: #ef4444;
    --accent-yellow: #ffd166;
    --accent-purple: #7c3aed;
    --border: rgba(50, 30, 60, .11);
    --border-strong: rgba(50, 30, 60, .22);
    --shadow-sm: 0 14px 36px rgba(77, 49, 33, .10);
    --shadow-md: 0 24px 60px rgba(77, 49, 33, .16);
    --shadow-lg: 0 40px 100px rgba(50, 30, 60, .26);
}

[data-theme="dark"] {
    --bg-app: #0d0b16;
    --bg-card: rgba(28,25,42,.82);
    --bg-card-hover: rgba(40,36,59,.95);
    --bg-input: rgba(18,16,28,.88);
    --bg-tab-bar: rgba(22,20,34,.88);
    --text-primary: #fff8ef;
    --text-secondary: #c7b9d4;
    --text-muted: #81718f;
    --border: rgba(255,255,255,.10);
    --border-strong: rgba(255,255,255,.18);
}

body {
    background:
        radial-gradient(circle at 6% 4%, rgba(255,95,109,.32), transparent 26rem),
        radial-gradient(circle at 94% 0%, rgba(124,58,237,.30), transparent 28rem),
        radial-gradient(circle at 80% 86%, rgba(24,185,129,.18), transparent 26rem),
        linear-gradient(180deg, #fff8ef 0%, #f6efe8 55%, #fff8ef 100%);
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at 8% 2%, rgba(255,95,109,.22), transparent 28rem),
        radial-gradient(circle at 90% 4%, rgba(124,58,237,.24), transparent 30rem),
        radial-gradient(circle at 78% 86%, rgba(24,185,129,.12), transparent 28rem),
        #0d0b16;
}

body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle at center, transparent 0 45%, rgba(33,23,45,.045) 100%);
}

.app-header {
    background: linear-gradient(135deg, rgba(255,95,109,.96), rgba(124,58,237,.92) 52%, rgba(33,23,45,.94));
    border: 1px solid rgba(255,255,255,.34);
    box-shadow: 0 26px 70px rgba(124,58,237,.26), 0 12px 34px rgba(255,95,109,.22);
}

.logo-icon {
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.26);
}

.logo-text {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 600;
}

.theme-toggle,
.logout-btn {
    background: rgba(255,255,255,.20);
    color: #fff;
}

.app-main {
    padding-bottom: calc(var(--tabbar-height) + 42px);
}

.section-title {
    color: var(--text-primary);
    text-shadow: 0 1px 0 rgba(255,255,255,.40);
}

.section-title::after {
    width: 74px;
    height: 7px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-purple), var(--accent-blue));
}

.card,
.shopping-item,
.event-item,
.clen-card {
    border: 1px solid rgba(255,255,255,.62);
    outline: 1px solid var(--border);
    background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(255,255,255,.72));
}

[data-theme="dark"] .card,
[data-theme="dark"] .shopping-item,
[data-theme="dark"] .event-item,
[data-theme="dark"] .clen-card {
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(145deg, rgba(36,32,54,.92), rgba(24,22,36,.78));
}

.add-item-form {
    border-top: 5px solid transparent;
    border-image: linear-gradient(90deg, var(--accent-primary), var(--accent-purple), var(--accent-blue)) 1;
}

.form-input,
.form-select {
    border-radius: 20px;
    border: 1px solid rgba(33,23,45,.11);
    font-weight: 700;
}

.btn-primary,
.btn-primary-soft:hover {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-purple));
}

.btn-primary-soft {
    color: var(--accent-purple);
    background: rgba(124,58,237,.10);
}

.btn-danger-soft {
    border-color: rgba(239,68,68,.13);
}

.filter-btn.active,
.tab-btn.active {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-purple));
    color: white;
}

.shopping-item::before,
.event-item::before,
.clen-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 5px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--accent-primary), var(--accent-purple));
    opacity: .85;
}

.shopping-item,
.event-item,
.clen-card {
    overflow: hidden;
    padding-left: 20px;
}

.item-checkbox {
    border-radius: 12px;
}

.calendar-grid-wrapper {
    border-top: 5px solid transparent;
    border-image: linear-gradient(90deg, var(--accent-blue), var(--accent-purple), var(--accent-primary)) 1;
}

.cal-day {
    font-weight: 900;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

.cal-day.dnes {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-purple));
}

.cal-day.vybrano:not(.dnes) {
    background: linear-gradient(135deg, #21172d, #493060);
}

.tab-nav {
    border: 1px solid rgba(255,255,255,.64);
    outline: 1px solid var(--border);
    box-shadow: 0 26px 80px rgba(33,23,45,.22), inset 0 1px 0 rgba(255,255,255,.75);
}

.tab-btn {
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease, color .22s ease;
}

.tab-btn:hover {
    transform: translateY(-1px);
}

.modal {
    border-top: 5px solid transparent;
    border-image: linear-gradient(90deg, var(--accent-primary), var(--accent-purple), var(--accent-blue)) 1;
}

@media (min-width: 960px) {
    .app-main, .header-inner {
        max-width: 1040px;
    }
    .tab-content.active {
        animation: fadeIn .25s ease;
    }
    #tab-nakup .add-item-form,
    #tab-kalendar .calendar-nav,
    #tab-kalendar .calendar-grid-wrapper {
        max-width: none;
    }
    .shopping-list,
    .events-list,
    .rodina-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ==========================================================
   V4 MODULAR DASHBOARD – čistý bezpatkový kabátek
   - odstraněn serifový look
   - modulární karty, konzistentní mezery, čistější dashboard
   - cache bust: style.css?v=4-modular
   ========================================================== */
:root {
    --bg-app: #eef3fb;
    --bg-card: #ffffff;
    --bg-card-hover: #f7faff;
    --bg-input: #f4f7fb;
    --bg-tab-bar: rgba(255,255,255,.94);
    --bg-header: rgba(255,255,255,.92);

    --text-primary: #111827;
    --text-secondary: #566173;
    --text-muted: #94a3b8;
    --text-on-dark: #111827;

    --accent-primary: #2563eb;
    --accent-blue: #0ea5e9;
    --accent-green: #16a34a;
    --accent-red: #ef4444;
    --accent-purple: #7c3aed;
    --accent-warm: #f59e0b;

    --border: #dde6f2;
    --border-strong: #c6d3e4;

    --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
    --shadow-md: 0 12px 34px rgba(15,23,42,.10);
    --shadow-lg: 0 26px 70px rgba(15,23,42,.18);

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 30px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

    --transition: .18s cubic-bezier(.2,.8,.2,1);
    --header-height: 76px;
    --tabbar-height: 78px;
}

[data-theme="dark"] {
    --bg-app: #0b1220;
    --bg-card: #111827;
    --bg-card-hover: #172033;
    --bg-input: #0f172a;
    --bg-tab-bar: rgba(17,24,39,.94);
    --bg-header: rgba(17,24,39,.92);
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --text-on-dark: #f8fafc;
    --border: #243247;
    --border-strong: #334155;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.24), 0 10px 28px rgba(0,0,0,.28);
    --shadow-md: 0 18px 46px rgba(0,0,0,.36);
    --shadow-lg: 0 30px 80px rgba(0,0,0,.52);
}

html { background: var(--bg-app); }

body {
    font-family: var(--font-sans) !important;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.14), transparent 26rem),
        radial-gradient(circle at top right, rgba(14,165,233,.12), transparent 24rem),
        linear-gradient(180deg, #f7fbff 0%, var(--bg-app) 46%, #eaf0f8 100%);
    letter-spacing: -.01em;
}

[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgba(37,99,235,.22), transparent 28rem),
        radial-gradient(circle at top right, rgba(124,58,237,.16), transparent 24rem),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}

.app-header {
    top: 14px;
    left: 14px;
    right: 14px;
    height: var(--header-height);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 26px;
    background: var(--bg-header);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

[data-theme="dark"] .app-header { border-color: rgba(255,255,255,.08); }

.header-inner {
    max-width: 1160px;
    padding: 0 18px;
}

.app-logo {
    gap: 12px;
    padding: 8px 10px 8px 8px;
    border-radius: 20px;
}

.logo-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #dbeafe, #e0f2fe);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
    font-size: 23px;
}

[data-theme="dark"] .logo-icon { background: linear-gradient(135deg, #1e3a8a, #164e63); }

.logo-text,
.section-title,
.cal-month-label,
.modal-title,
.login-title {
    font-family: var(--font-sans) !important;
    font-weight: 850;
    letter-spacing: -.04em;
}

.logo-text {
    color: var(--text-primary);
    font-size: 19px;
}

.theme-toggle,
.logout-btn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.theme-toggle:hover,
.logout-btn:hover {
    background: #e8f1ff;
    transform: translateY(-1px);
}

.app-main {
    max-width: 1160px;
    padding-top: calc(var(--header-height) + 38px);
    padding-left: 18px;
    padding-right: 18px;
}

.tab-content.active {
    display: grid;
    gap: 18px;
}

.section-header {
    margin: 0;
    padding: 0;
    min-height: 48px;
}

.section-title {
    font-size: clamp(26px, 4vw, 38px);
    line-height: 1;
}

.card,
.add-item-form,
.calendar-nav,
.calendar-grid-wrapper,
.shopping-item,
.event-item,
.clen-card,
.modal,
.login-box {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-lg) !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-sm) !important;
    outline: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.card::before,
.shopping-item::before,
.event-item::before,
.clen-card::before,
.login-box::before { display: none !important; }

.add-item-form {
    position: relative;
    padding: 18px;
    gap: 12px;
}

.add-item-form::after,
.calendar-grid-wrapper::after,
.rodina-grid::before,
.shopping-list::before,
.events-list::before {
    content: '';
    display: none;
}

.form-row { gap: 12px; }
.form-group { gap: 8px; }

.form-label,
.events-list-title,
.tab-label {
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.form-input,
.form-select,
.form-textarea {
    min-height: 50px;
    border-radius: 15px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.form-input:focus,
.form-select:focus {
    border-color: rgba(37,99,235,.55);
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.btn {
    min-height: 44px;
    border-radius: 15px;
    font-weight: 850;
    box-shadow: none;
}

.btn-primary {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 12px 24px rgba(37,99,235,.24);
}

.btn-primary:hover { background: #1d4ed8; }

.btn-primary-soft,
.filter-btn.active {
    background: #e8f1ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.btn-danger-soft {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.filter-bar {
    gap: 10px;
    margin: 0;
    padding: 2px 0 4px;
}

.filter-btn {
    border-radius: 14px;
    background: var(--bg-card);
    padding: 10px 15px;
    border: 1px solid var(--border);
}

.shopping-list,
.events-list,
.rodina-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.shopping-item,
.event-item,
.clen-card {
    position: relative;
    min-height: 72px;
    padding: 16px !important;
    gap: 14px;
    overflow: visible;
}

.shopping-item:hover,
.event-item:hover,
.clen-card:hover,
.card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md) !important;
}

.item-checkbox {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    border: 2px solid var(--border-strong);
    background: var(--bg-input);
}

.item-nazev,
.event-nazev,
.clen-jmeno {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.item-meta,
.event-meta,
.clen-stats {
    font-size: 12px;
    color: var(--text-secondary);
}

.calendar-nav {
    padding: 14px 16px;
}

.cal-month-label {
    font-size: 20px;
}

.cal-nav-btn,
.btn-icon,
.modal-close {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.calendar-grid-wrapper {
    padding: 16px;
    border-image: none !important;
}

.calendar-weekdays { gap: 8px; }
.calendar-grid { gap: 8px; }

.calendar-weekdays span {
    color: var(--text-secondary);
    font-size: 11px;
}

.cal-day {
    border-radius: 14px;
    background: var(--bg-input);
    border: 1px solid transparent;
    box-shadow: none;
    font-weight: 800;
}

.cal-day:hover {
    background: #e8f1ff;
    border-color: #bfdbfe;
}

.cal-day.dnes {
    background: #2563eb;
    color: #fff;
    box-shadow: 0 10px 22px rgba(37,99,235,.25);
}

.cal-day.vybrano:not(.dnes) {
    background: #111827;
    color: #fff;
}

.event-color-bar {
    width: 8px;
    border-radius: 999px;
}

.event-datum-badge,
.event-clen-badge {
    border-radius: 10px;
    padding: 4px 8px;
}

.clen-avatar {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.tab-nav {
    left: 14px;
    right: 14px;
    bottom: 14px;
    height: var(--tabbar-height);
    max-width: 620px;
    margin: 0 auto;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.76) !important;
    outline: 1px solid var(--border);
    background: var(--bg-tab-bar);
    box-shadow: 0 22px 50px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.72);
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    overflow: hidden;
}

[data-theme="dark"] .tab-nav { border-color: rgba(255,255,255,.08) !important; }

.tab-btn {
    margin: 8px;
    border-radius: 20px;
    gap: 5px;
}

.tab-btn::before { display: none; }

.tab-btn.active {
    color: #fff;
    background: #2563eb;
    box-shadow: 0 12px 24px rgba(37,99,235,.24);
}

.tab-icon { font-size: 22px; }
.tab-label { font-size: 10px; color: inherit; }

.modal-overlay { align-items: center; padding: 18px; }
.modal {
    max-width: 620px;
    border-radius: 28px !important;
    transform: translateY(14px) scale(.98);
    overflow: hidden;
}
.modal-header { padding: 22px 22px 0; }
.modal-body { padding: 20px 22px; }
.modal-footer { padding: 0 22px 22px; }

.toast-container { max-width: 420px; }
.toast {
    border-radius: 16px;
    box-shadow: var(--shadow-md);
}

.loading-placeholder {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.46);
}

@media (min-width: 760px) {
    .app-main { padding-left: 24px; padding-right: 24px; }
    #tab-nakup.tab-content.active {
        grid-template-columns: minmax(320px, .86fr) minmax(420px, 1.25fr);
        align-items: start;
    }
    #tab-nakup .section-header,
    #tab-nakup .filter-bar { grid-column: 1 / -1; }
    #tab-nakup .add-item-form { position: sticky; top: 112px; }
    #tab-kalendar.tab-content.active {
        grid-template-columns: minmax(390px, .95fr) minmax(340px, .85fr);
        align-items: start;
    }
    #tab-kalendar .section-header,
    #tab-kalendar .calendar-nav { grid-column: 1 / -1; }
    #tab-kalendar .events-list-section { margin-top: 0; }
    .rodina-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
    .shopping-list,
    .events-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rodina-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
    :root { --header-height: 66px; --tabbar-height: 72px; }
    .app-header { top: 10px; left: 10px; right: 10px; border-radius: 22px; }
    .app-main { padding-top: calc(var(--header-height) + 30px); padding-left: 14px; padding-right: 14px; }
    .logo-icon { width: 38px; height: 38px; border-radius: 14px; }
    .logo-text { font-size: 17px; }
    .theme-toggle, .logout-btn { width: 38px; height: 38px; border-radius: 14px; }
    .section-header { align-items: flex-start; gap: 10px; }
    .section-title { font-size: 28px; }
    .form-row { flex-direction: column; align-items: stretch; }
    .form-input--small { flex: 1; text-align: left; }
    .tab-nav { left: 10px; right: 10px; bottom: 10px; }
    .tab-btn { margin: 7px 4px; }
}

/* ============================================
   v5 FEATURES: modulární dashboard, úkoly, nástěnka
   ============================================ */
:root {
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --accent-yellow: #f59e0b;
    --accent-purple: #8b5cf6;
}
.logo-text, .section-title, .modal-title, .cal-month-label { font-family: var(--font-sans) !important; letter-spacing: -0.04em; }
.tab-nav--wide { max-width: 760px; }
.tab-nav--wide .tab-btn { margin-left: 4px; margin-right: 4px; }
.tab-nav--wide .tab-icon { font-size: 19px; }
.tab-nav--wide .tab-label { font-size: 9px; }
.section-header--hero { align-items: stretch; }
.eyebrow { color: var(--accent-blue); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 6px; }
.section-subtitle { color: var(--text-secondary); line-height: 1.5; margin-top: 8px; max-width: 640px; }
.quick-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.dashboard-stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px; }
.stat-card { background: var(--bg-card); border:1px solid var(--border); border-radius:22px; padding:16px; box-shadow:var(--shadow-sm); display:grid; gap:4px; min-height:112px; }
.stat-card .stat-icon { width:38px; height:38px; border-radius:14px; display:grid; place-items:center; background:var(--bg-input); font-size:20px; }
.stat-card strong { font-size:30px; letter-spacing:-.06em; line-height:1; }
.stat-card span:last-child { color:var(--text-secondary); font-weight:700; font-size:13px; }
.skeleton { position:relative; overflow:hidden; background:linear-gradient(90deg,var(--bg-card),var(--bg-card-hover),var(--bg-card)); min-height:112px; }
.dashboard-grid { display:grid; gap:14px; }
.module-card { padding:18px; }
.module-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.module-header h3 { font-size:18px; letter-spacing:-.03em; }
.link-btn { color:var(--accent-blue); font-weight:800; font-size:13px; }
.mini-list { display:grid; gap:10px; }
.mini-item { display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; background:var(--bg-input); border:1px solid var(--border); }
.mini-item strong { display:block; font-size:14px; }
.mini-item small { display:block; color:var(--text-secondary); margin-top:3px; }
.mini-dot { width:12px; height:12px; border-radius:999px; flex:0 0 auto; background:var(--accent-blue); }
.mini-dot.priority-high { background:var(--accent-red); }
.mini-dot.priority-low { background:var(--accent-green); }
.mini-date { min-width:48px; padding:6px 8px; text-align:center; border-radius:12px; background:var(--bg-card); color:var(--accent-blue); font-weight:900; font-size:13px; }
.empty-state--mini { padding:18px !important; }
.task-list, .notes-grid { display:grid; gap:12px; }
.task-item { display:flex; align-items:flex-start; gap:12px; background:var(--bg-card); border:1px solid var(--border); border-left:7px solid var(--accent-blue); border-radius:20px; padding:14px; box-shadow:var(--shadow-sm); transition:transform var(--transition), opacity var(--transition); }
.task-item:hover { transform: translateY(-1px); }
.task-item.priority-high { border-left-color:var(--accent-red); }
.task-item.priority-low { border-left-color:var(--accent-green); }
.task-item.done { opacity:.58; }
.task-item.done .task-title { text-decoration:line-through; color:var(--text-secondary); }
.task-check { width:32px; height:32px; border-radius:12px; border:2px solid var(--border-strong); color:transparent; background:var(--bg-input); font-weight:900; flex:0 0 auto; }
.task-item.done .task-check { background:var(--accent-green); border-color:var(--accent-green); color:white; }
.task-body { min-width:0; flex:1; }
.task-title { font-weight:900; letter-spacing:-.02em; }
.task-desc { color:var(--text-secondary); margin-top:5px; line-height:1.45; font-size:14px; }
.task-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; color:var(--text-secondary); font-size:12px; font-weight:800; }
.task-meta span { background:var(--bg-input); border:1px solid var(--border); border-radius:999px; padding:5px 9px; }
.task-person { border-color: color-mix(in srgb, var(--person) 40%, var(--border)) !important; }
.notes-grid { grid-template-columns:1fr; }
.note-strip { display:grid; gap:10px; }
.note-card { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:22px; padding:18px; box-shadow:var(--shadow-sm); overflow:hidden; }
.note-card::before { content:''; position:absolute; inset:0 auto 0 0; width:7px; background:var(--accent-blue); }
.note-card.dulezite::before { background:var(--accent-red); }
.note-card.domacnost::before { background:var(--accent-yellow); }
.note-card.pinned { outline:2px solid color-mix(in srgb, var(--accent-blue) 28%, transparent); }
.note-card.compact { min-height:116px; }
.note-pin { font-size:20px; margin-bottom:6px; }
.note-type { display:inline-flex; padding:5px 9px; border-radius:999px; background:var(--bg-input); color:var(--text-secondary); font-size:12px; font-weight:900; margin-bottom:12px; }
.note-card p { line-height:1.5; font-weight:650; padding-right:50px; }
.note-card small { display:block; margin-top:14px; color:var(--text-secondary); font-weight:700; }
.note-actions { position:absolute; top:12px; right:12px; display:flex; gap:6px; }
.check-row { display:flex; align-items:center; gap:10px; color:var(--text-secondary); font-weight:800; padding:10px 0; }
.check-row input { width:18px; height:18px; }
.item-meta { display:flex; flex-wrap:wrap; gap:8px; }
.item-meta > span { display:inline-flex; align-items:center; gap:4px; }
.shopping-item { position:relative; }
.shopping-item .btn-delete-item { display:none; }
.shopping-item:hover .btn-delete-item { display:grid; }
@media (min-width:760px) {
    .dashboard-stats { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .dashboard-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .module-card--wide { grid-column: 1 / -1; }
    .note-strip { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .task-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .notes-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1080px) {
    .notes-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width:520px) {
    .tab-nav--wide .tab-label { display:none; }
    .tab-nav--wide .tab-icon { font-size:22px; }
    .tab-nav--wide .tab-btn { margin-left:2px; margin-right:2px; }
    .quick-actions { width:100%; }
    .quick-actions .btn { flex:1; }
    .dashboard-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .stat-card { min-height:104px; padding:14px; }
    .task-item { border-radius:18px; }
}


/* ============================================
   v6: rychlé opakovatelné položky v nákupním seznamu
   ============================================ */
.quick-grocery-panel {
    padding: 18px;
    display: grid;
    gap: 16px;
    overflow: hidden;
}
.quick-grocery-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.quick-grocery-header h3 {
    font-size: 20px;
    letter-spacing: -0.04em;
    margin-bottom: 4px;
}
.quick-grocery-header p {
    color: var(--text-secondary);
    font-weight: 650;
    font-size: 13px;
    line-height: 1.45;
}
.quick-grocery-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--accent-blue) 12%, var(--bg-input));
    color: var(--accent-blue);
    border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border));
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.quick-grocery-groups {
    display: grid;
    gap: 14px;
}
.quick-grocery-group h4 {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.quick-grocery-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.quick-grocery-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    border-radius: 999px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-primary);
    font-weight: 850;
    font-size: 13px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.quick-grocery-chip:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border));
    background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-input));
    box-shadow: 0 10px 22px rgba(15, 23, 42, .08);
}
.quick-grocery-chip:active { transform: translateY(0) scale(.98); }
.quick-grocery-chip:disabled { opacity: .65; cursor: wait; }
.quick-grocery-chip.is-loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-top-color: transparent;
    animation: spin .7s linear infinite;
}
.pulse-attention {
    animation: pulseAttention .85s ease-out;
}
@keyframes pulseAttention {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-blue) 36%, transparent); }
    55% { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: var(--shadow-sm); }
}

/* Odolnější formulář nákupu: tlačítko se nesmí useknout mimo kartu. */
#tab-nakup .add-item-form {
    max-width: 100%;
    overflow: visible;
}
#tab-nakup .form-row {
    display: grid;
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 128px);
    gap: 12px;
}
#tab-nakup .form-row:last-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}
#tab-nakup .form-input,
#tab-nakup .form-select,
#tab-nakup .btn {
    min-width: 0;
    width: 100%;
}
#tab-nakup #btnPridatPolozku {
    min-width: 132px;
    width: auto;
    padding-inline: 20px;
    white-space: nowrap;
    justify-content: center;
}

@media (min-width: 760px) {
    #tab-nakup .quick-grocery-panel { position: sticky; top: 374px; }
}
@media (max-width: 880px) {
    #tab-nakup .form-row:last-child {
        grid-template-columns: 1fr 1fr;
    }
    #tab-nakup #btnPridatPolozku {
        grid-column: 1 / -1;
        width: 100%;
    }
}
@media (max-width: 720px) {
    .quick-grocery-header { flex-direction: column; }
    #tab-nakup .form-row,
    #tab-nakup .form-row:last-child {
        grid-template-columns: 1fr;
    }
    #tab-nakup #btnPridatPolozku {
        grid-column: auto;
        width: 100%;
    }
}

/* ============================================
   v7: nákup jako pevný pracovní modul + správa rychlých položek
   ============================================ */
#tab-nakup .shopping-layout {
    display: grid;
    gap: 18px;
    align-items: start;
}

#tab-nakup .shopping-workspace {
    display: grid;
    gap: 12px;
    align-self: start;
}

#tab-nakup .shopping-workspace .add-item-form,
#tab-nakup .shopping-workspace .filter-bar,
#tab-nakup .shopping-workspace .shopping-list {
    margin-bottom: 0;
}

#tab-nakup .shopping-workspace .shopping-list {
    grid-template-columns: 1fr;
    align-content: start;
}

.quick-grocery-panel {
    align-self: start;
}

.quick-grocery-reset {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--accent-blue) 22%, var(--border));
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-input));
    color: var(--accent-blue);
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), border-color var(--transition);
}
.quick-grocery-reset:hover {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--accent-blue) 16%, var(--bg-input));
}

.quick-grocery-chip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.quick-grocery-chip-wrap .quick-grocery-chip {
    padding-right: 32px;
}
.quick-grocery-remove {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: transparent;
    color: var(--text-secondary);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.quick-grocery-remove:hover {
    background: color-mix(in srgb, var(--accent-red) 12%, var(--bg-card));
    color: var(--accent-red);
    transform: translateY(-50%) scale(1.04);
}

@media (min-width: 760px) {
    #tab-nakup.tab-content.active {
        display: grid;
        grid-template-columns: 1fr;
        align-items: start;
    }
    #tab-nakup .section-header {
        grid-column: 1 / -1;
    }
    #tab-nakup .shopping-layout {
        grid-column: 1 / -1;
        grid-template-columns: minmax(360px, .96fr) minmax(310px, .74fr);
    }
    #tab-nakup .shopping-workspace {
        position: sticky;
        top: 104px;
        max-height: calc(100vh - 132px);
        overflow: auto;
        padding-right: 4px;
        scrollbar-width: thin;
    }
    #tab-nakup .quick-grocery-panel {
        position: sticky;
        top: 104px;
        max-height: calc(100vh - 132px);
        overflow: auto;
    }
    #tab-nakup .add-item-form {
        position: relative;
        top: auto;
    }
    #tab-nakup .filter-bar {
        grid-column: auto;
    }
}

@media (min-width: 1120px) {
    #tab-nakup .shopping-layout {
        grid-template-columns: minmax(430px, .9fr) minmax(420px, .78fr);
    }
}

@media (max-width: 759px) {
    #tab-nakup .shopping-layout {
        grid-template-columns: 1fr;
    }
    #tab-nakup .quick-grocery-panel {
        order: 2;
    }
    #tab-nakup .shopping-workspace {
        order: 1;
    }
}

@media (max-width: 420px) {
    .quick-grocery-chip-wrap,
    .quick-grocery-chip-wrap .quick-grocery-chip {
        width: 100%;
    }
    .quick-grocery-chip-wrap .quick-grocery-chip {
        justify-content: flex-start;
    }
}

/* ============================================
   v8: nastavení, PWA a úkoly v kalendáři
   ============================================ */
.settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    align-items: start;
}
.settings-card {
    padding: 20px;
    display: grid;
    gap: 16px;
}
.settings-card h3 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -0.02em;
}
.settings-preview {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    border-radius: 20px;
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.settings-preview-icon {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    font-size: 30px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-blue) 16%, var(--bg-card)), color-mix(in srgb, var(--accent-purple) 14%, var(--bg-card)));
    box-shadow: var(--shadow-sm);
}
.settings-preview strong {
    display: block;
    font-size: 18px;
    color: var(--text-primary);
}
.settings-preview span,
.settings-hint,
.settings-note,
.pwa-status {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.55;
}
.color-input-wide {
    min-height: 54px;
    padding: 8px;
    cursor: pointer;
}
.emoji-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}
.emoji-shortcuts button {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    font-size: 22px;
    cursor: pointer;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.emoji-shortcuts button:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--accent-blue) 45%, var(--border));
    background: color-mix(in srgb, var(--accent-blue) 8%, var(--bg-input));
}
.settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.settings-actions .btn {
    flex: 1 1 210px;
}
.settings-note {
    padding: 14px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--accent-yellow) 10%, var(--bg-input));
    border: 1px solid color-mix(in srgb, var(--accent-yellow) 22%, var(--border));
}
.settings-note p { margin: 6px 0 0; }
.pwa-status {
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 12px;
    background: color-mix(in srgb, var(--accent-blue) 10%, var(--bg-input));
    color: var(--accent-blue);
}
.event-type-task {
    background: color-mix(in srgb, var(--accent-yellow) 16%, var(--bg-input));
    color: #a16207;
}
.event-item--task {
    border-style: dashed !important;
}
.event-item--task.done {
    opacity: .68;
}
.event-item--task.done .event-nazev {
    text-decoration: line-through;
}

@media (min-width: 900px) {
    .settings-grid {
        grid-template-columns: minmax(420px, .92fr) minmax(320px, .68fr);
    }
}


/* === v9: domácnost, jídelníček, oblíbené položky === */
.btn-favorite-item { display:grid; }
.shopping-item .btn-favorite-item { opacity:.8; }
.shopping-item .btn-favorite-item:hover { opacity:1; transform:scale(1.05); }
.field-help { color: var(--text-muted); font-size: 12px; margin-top: 6px; display:block; }
.home-status-strip { display:flex; gap:10px; flex-wrap:wrap; }
.home-status-pill { display:inline-flex; align-items:center; gap:8px; padding:10px 12px; border-radius:999px; background:var(--bg-input); border:1px solid var(--border); font-weight:800; font-size:13px; }
.home-status-pill.pozor { border-color: color-mix(in srgb, var(--accent-red) 35%, var(--border)); }
.home-status-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.home-status-card { padding:18px; border-radius:24px; border:1px solid var(--border); background:var(--bg-card); box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:16px; }
.home-status-card.inactive { opacity:.62; }
.home-status-card-head { display:flex; gap:12px; align-items:center; }
.home-status-emoji { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:var(--bg-input); font-size:24px; }
.home-status-card strong { display:block; font-size:17px; }
.home-status-card small { color:var(--text-muted); font-weight:700; }
.home-status-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.home-status-actions .btn { flex:1; min-width:130px; }
.meal-week, .meal-week-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:14px; }
.meal-day { padding:16px; display:flex; flex-direction:column; gap:12px; min-height:170px; }
.meal-day h3 { margin:0; font-size:18px; }
.meal-item { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; padding:12px; border-radius:18px; background:var(--bg-input); border:1px solid var(--border); }
.meal-item strong { display:block; }
.meal-item small { color:var(--text-muted); font-size:12px; }
.meal-actions { display:flex; gap:6px; flex-shrink:0; }
@media(max-width:720px){ .home-status-actions .btn{width:100%; flex:auto;} .meal-week, .meal-week-grid{grid-template-columns:1fr;} }


/* Chytrý návrh jídel */
.meal-suggestion-panel {
    padding: 18px;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.meal-suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.meal-suggestion-header h3 {
    margin: 0 0 4px;
    font-size: 20px;
}
.meal-suggestion-header p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.45;
}
.meal-suggestion-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
}
.meal-suggestion-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.meal-suggestion-preview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 10px;
}
.meal-suggestion-card {
    border: 1px solid var(--border);
    background: var(--bg-input);
    border-radius: 18px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.meal-suggestion-day {
    font-size: 12px;
    font-weight: 800;
    color: var(--accent-blue);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.meal-suggestion-card strong { font-size: 14px; }
.meal-suggestion-card small {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.35;
}
@media (max-width: 900px) {
    .meal-suggestion-controls { grid-template-columns: 1fr; }
    .meal-suggestion-buttons { justify-content: stretch; }
    .meal-suggestion-buttons .btn { flex: 1; }
}
@media (max-width: 720px) {
    .meal-suggestion-header { flex-direction: column; }
    .meal-suggestion-buttons .btn { width: 100%; flex: auto; }
}


/* v13: katalog jídel */
.meal-suggestion-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.tag-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 8px;
}
.tag-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--bg-input);
    font-size: 14px;
    cursor: pointer;
}
.tag-checkbox-grid input { width: 16px; height: 16px; }
@media (max-width: 720px) {
    .meal-suggestion-meta { justify-content: flex-start; width: 100%; }
    .meal-suggestion-meta .btn { width: 100%; }
}

/* ============================================
   INOVACE v16 - rychlé zadání a rodinný briefing
   ============================================ */
.smart-command {
    margin-bottom: 18px;
    padding: 18px;
    background:
        radial-gradient(circle at 8% 0%, rgba(224,123,74,0.16), transparent 32%),
        radial-gradient(circle at 92% 12%, rgba(79,142,247,0.12), transparent 30%),
        var(--bg-card);
}
.smart-command-header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.smart-command-header h3 {
    font-size: 18px;
    margin-bottom: 5px;
}
.smart-command-header p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.45;
}
.smart-command-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
.smart-command-input {
    min-height: 48px;
    font-weight: 600;
}
.smart-command-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.smart-command-actions .btn {
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    white-space: nowrap;
}
.smart-briefing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
}
.briefing-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.58);
    border: 1px solid var(--border);
}
[data-theme="dark"] .briefing-card {
    background: rgba(255,255,255,0.04);
}
.briefing-card > span {
    font-size: 22px;
    line-height: 1;
}
.briefing-card strong,
.briefing-card small {
    display: block;
}
.briefing-card strong {
    font-size: 14px;
    margin-bottom: 3px;
}
.briefing-card small {
    color: var(--text-secondary);
    line-height: 1.35;
}
.dashboard-grid--innovation {
    margin-bottom: 18px;
}
.stat-card--warning {
    border-color: rgba(224, 95, 74, 0.45);
    box-shadow: 0 0 0 3px rgba(224, 95, 74, 0.08), var(--shadow-sm);
}
.timeline-list,
.family-load-list,
.shopping-cat-list {
    display: grid;
    gap: 10px;
}
.timeline-item {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    align-items: center;
    padding: 11px;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.timeline-item.is-late {
    border-color: rgba(224, 95, 74, 0.45);
}
.timeline-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
.timeline-item strong,
.timeline-item small {
    display: block;
}
.timeline-item strong {
    font-size: 14px;
}
.timeline-item small {
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 12px;
}
.family-load-item {
    display: grid;
    gap: 8px;
    padding: 11px;
    border-radius: var(--radius-md);
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.family-load-name {
    display: flex;
    align-items: center;
    gap: 8px;
}
.family-load-name span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--person, #94a3b8);
}
.family-load-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.family-load-metrics span,
.family-load-metrics b {
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
}
.family-load-metrics b {
    color: var(--text-primary);
    font-weight: 800;
}
.shopping-cat {
    display: grid;
    gap: 7px;
    padding: 11px;
    border-radius: var(--radius-md);
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.shopping-cat > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
}
.shopping-cat strong {
    font-size: 14px;
}
.shopping-cat span {
    font-size: 12px;
    color: var(--text-secondary);
}
.shopping-cat-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg-card);
}
.shopping-cat-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-blue));
}

@media (min-width: 680px) {
    .smart-command-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .smart-command-actions {
        grid-template-columns: repeat(3, auto);
    }
    .smart-briefing {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 420px) {
    .smart-command {
        padding: 14px;
    }
    .smart-command-header {
        display: block;
    }
    .smart-command-header .quick-grocery-badge {
        display: inline-flex;
        margin-top: 8px;
    }
    .smart-command-actions {
        grid-template-columns: 1fr;
    }
}


/* ============================================
   v22: funkční barvení aplikace z Nastavení
   ============================================ */
:root {
    --user-accent: var(--accent-primary, #2563eb);
    --user-accent-rgb: 37, 99, 235;
    --user-accent-dark: color-mix(in srgb, var(--user-accent) 82%, #0f172a);
    --user-accent-soft: color-mix(in srgb, var(--user-accent) 11%, var(--bg-card));
    --user-accent-purple: color-mix(in srgb, var(--user-accent) 72%, #7c3aed);
    --accent-primary: var(--user-accent);
    --accent-blue: var(--user-accent);
    --accent-purple: var(--user-accent-purple);
}
body {
    background:
        radial-gradient(circle at top left, rgb(var(--user-accent-rgb) / .14), transparent 26rem),
        radial-gradient(circle at top right, color-mix(in srgb, var(--user-accent) 11%, transparent), transparent 24rem),
        linear-gradient(180deg, #f7fbff 0%, var(--bg-app) 46%, #eaf0f8 100%);
}
[data-theme="dark"] body {
    background:
        radial-gradient(circle at top left, rgb(var(--user-accent-rgb) / .22), transparent 28rem),
        radial-gradient(circle at top right, color-mix(in srgb, var(--user-accent-purple) 16%, transparent), transparent 24rem),
        linear-gradient(180deg, #0b1220 0%, #0f172a 100%);
}
.logo-icon,
.settings-preview-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--user-accent) 18%, #ffffff), color-mix(in srgb, var(--user-accent-purple) 16%, #ffffff)) !important;
}
[data-theme="dark"] .logo-icon,
[data-theme="dark"] .settings-preview-icon {
    background: linear-gradient(135deg, color-mix(in srgb, var(--user-accent) 42%, #0f172a), color-mix(in srgb, var(--user-accent-purple) 38%, #0f172a)) !important;
}
.btn-primary,
.tab-btn.active,
.cal-day.dnes,
.filter-btn.active,
.btn-primary-soft:hover {
    background: var(--user-accent) !important;
    color: #fff !important;
    border-color: color-mix(in srgb, var(--user-accent) 70%, var(--border)) !important;
    box-shadow: 0 12px 24px rgb(var(--user-accent-rgb) / .24) !important;
}
.btn-primary:hover {
    background: var(--user-accent-dark) !important;
}
.btn-primary-soft,
.cal-day:hover,
.theme-toggle:hover,
.logout-btn:hover {
    background: color-mix(in srgb, var(--user-accent) 10%, var(--bg-input)) !important;
    color: var(--user-accent-dark) !important;
    border-color: color-mix(in srgb, var(--user-accent) 25%, var(--border)) !important;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: color-mix(in srgb, var(--user-accent) 58%, var(--border)) !important;
    box-shadow: 0 0 0 4px rgb(var(--user-accent-rgb) / .12) !important;
}
.section-title::after,
.smart-command,
.mini-dot,
.note-card::before {
    --accent-blue: var(--user-accent);
}
.smart-command {
    background:
        radial-gradient(circle at 8% 0%, rgb(var(--user-accent-rgb) / .16), transparent 32%),
        radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--user-accent-purple) 12%, transparent), transparent 30%),
        var(--bg-card) !important;
}
.color-shortcuts {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: -4px;
}
.color-shortcuts button {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--swatch);
    border: 3px solid var(--bg-card);
    outline: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), outline-color var(--transition), box-shadow var(--transition);
}
.color-shortcuts button:hover,
.color-shortcuts button.active {
    transform: translateY(-1px) scale(1.04);
    outline-color: var(--user-accent);
    box-shadow: 0 0 0 4px rgb(var(--user-accent-rgb) / .16);
}


/* v23 Polo AI */
.briefing-card--poloai {
    border-color: color-mix(in srgb, var(--app-primary, #2563eb) 22%, rgba(148, 163, 184, .26));
    background: linear-gradient(135deg, color-mix(in srgb, var(--app-primary, #2563eb) 9%, #fff), rgba(255,255,255,.92));
}
.briefing-card--poloai span {
    filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .12));
}
.smart-command-actions .btn-primary:first-child {
    box-shadow: 0 12px 30px color-mix(in srgb, var(--app-primary, #2563eb) 22%, transparent);
}
#btnJidelnicekTydenDoNakupu {
    white-space: normal;
}
@supports not (color: color-mix(in srgb, #000 10%, #fff)) {
    .briefing-card--poloai { background: rgba(37,99,235,.06); }
}

/* ============================================
   v24 - Rodinné role, body a vzhledy aplikace
   ============================================ */
.style-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.style-preset {
    border: 1px solid var(--border);
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-radius: 18px;
    padding: 12px;
    text-align: left;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    align-items: center;
    transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.style-preset span { font-size: 1.35rem; grid-row: span 2; }
.style-preset strong { font-size: .95rem; }
.style-preset small { color: var(--text-secondary); }
.style-preset:hover { transform: translateY(-1px); border-color: rgba(var(--user-accent-rgb, 37,99,235), .45); }
.style-preset.active {
    border-color: var(--user-accent, var(--accent-primary));
    background: rgba(var(--user-accent-rgb, 37,99,235), .11);
    box-shadow: 0 10px 26px rgba(var(--user-accent-rgb, 37,99,235), .12);
}

.role-card { position: relative; overflow: hidden; }
.role-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--member, var(--user-accent, var(--accent-primary)));
    opacity: .9;
}
.clen-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.role-pill {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    color: var(--text-secondary);
    background: var(--bg-input);
    border: 1px solid var(--border);
}
.member-score {
    min-width: 64px;
    padding: 7px 10px;
    border-radius: 16px;
    text-align: center;
    color: var(--text-primary);
    background: linear-gradient(135deg, rgba(245, 158, 11, .18), rgba(var(--user-accent-rgb, 37,99,235), .12));
    border: 1px solid rgba(245, 158, 11, .25);
}
.member-score strong { display:block; font-size:1.15rem; line-height:1; }
.member-score span { display:block; font-size:.68rem; color:var(--text-secondary); font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.score-bar {
    height: 8px;
    margin: 10px 0 8px;
    border-radius: 999px;
    background: var(--bg-input);
    overflow: hidden;
    border: 1px solid var(--border);
}
.score-bar span {
    display:block;
    height:100%;
    border-radius:999px;
    background: linear-gradient(90deg, var(--member, var(--user-accent, var(--accent-primary))), #f59e0b);
}
.member-actions {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.points-badge {
    background: rgba(245, 158, 11, .15) !important;
    color: #b45309 !important;
    border: 1px solid rgba(245, 158, 11, .25);
    font-weight: 900;
}
[data-theme="dark"] .points-badge { color: #fbbf24 !important; }

[data-app-style="family"] {
    --bg-app: #fff7ed;
    --bg-header: #3b2415;
    --accent-primary: #ea580c;
    --accent-blue: #ea580c;
    --accent-purple: #c2410c;
}
[data-app-style="forest"] {
    --bg-app: #ecfdf5;
    --bg-header: #052e1c;
    --accent-primary: #059669;
    --accent-blue: #059669;
    --accent-purple: #0f766e;
}
[data-app-style="sunset"] {
    --bg-app: #fff1f2;
    --bg-header: #431407;
    --accent-primary: #f97316;
    --accent-blue: #f97316;
    --accent-purple: #e11d48;
}
[data-app-style="candy"] {
    --bg-app: #fdf2f8;
    --bg-header: #3b0764;
    --accent-primary: #db2777;
    --accent-blue: #db2777;
    --accent-purple: #7c3aed;
}
[data-app-style="midnight"] {
    --bg-app: #111827;
    --bg-card: #172033;
    --bg-card-hover: #1f2937;
    --bg-input: #0f172a;
    --bg-tab-bar: #172033;
    --bg-header: #020617;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border: rgba(255,255,255,.09);
    --border-strong: rgba(255,255,255,.16);
    --accent-primary: #38bdf8;
    --accent-blue: #38bdf8;
    --accent-purple: #818cf8;
}
[data-app-style="midnight"] .app-header,
[data-app-style="midnight"] .card,
[data-app-style="midnight"] .tab-nav {
    box-shadow: 0 18px 48px rgba(0,0,0,.25);
}
[data-app-style="family"] body::before,
[data-app-style="forest"] body::before,
[data-app-style="sunset"] body::before,
[data-app-style="candy"] body::before {
    opacity: .45;
}

@media (max-width: 520px) {
    .style-preset-grid { grid-template-columns: 1fr; }
    .clen-title-row { flex-direction: column; }
    .member-score { align-self: flex-start; }
    .member-actions { flex-direction: row; }
}


/* ============================================
   v25 - Mobilní stabilita / anti-flicker patch
   ============================================
   Mobilní prohlížeče, hlavně Chrome/Android a Safari/iOS, mohou při scrollu
   problikávat u kombinace fixed prvků, backdrop-filteru, rozmazaného pozadí
   a animovaných transformací. Proto na dotykových zařízeních vypínáme jen
   nejtěžší vizuální efekty, funkce aplikace zůstávají stejné.
*/
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
    html, body {
        min-height: 100%;
        overscroll-behavior-y: contain;
        -webkit-text-size-adjust: 100%;
    }

    body::before {
        display: none !important;
        content: none !important;
    }

    .app-header,
    .tab-nav,
    .card,
    .modal,
    .modal-overlay,
    .login-overlay,
    .login-box,
    .smart-command,
    .briefing-card,
    .settings-preview,
    .clen-card {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    body.zamceno .app-header,
    body.zamceno .tab-nav,
    body.zamceno .app-main {
        filter: none !important;
        opacity: .18;
    }

    .app-header,
    .tab-nav {
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        contain: layout paint style;
    }

    .tab-content,
    .shopping-item,
    .event-item,
    .task-item,
    .note-card,
    .clen-card,
    .login-box,
    .toast {
        animation: none !important;
    }

    .tab-btn,
    .btn,
    .card,
    .form-input,
    .form-select,
    .form-textarea,
    .login-submit,
    .login-pin {
        transition-duration: .08s !important;
    }

    .tab-btn:active,
    .btn:active,
    .theme-toggle:hover,
    .logout-btn:hover,
    .color-shortcuts button:hover,
    .color-shortcuts button.active {
        transform: none !important;
    }
}

body.prihlasen #loginOverlay {
    display: none !important;
}


/* ============================================
   v26 - Mobilní spodní navigace / nastavení vždy viditelné
   ============================================
   Po rozšíření aplikace na 9 záložek se na úzkých telefonech poslední
   položka Nastavení mohla dostat mimo viditelnou část spodní lišty.
   Mobilní lišta je proto na telefonech kompaktní grid: všech 9 ikon se
   vždy vejde na jednu řádku a popisky jsou skryté jen na mobilu.
*/
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
    :root {
        --tabbar-height: 64px;
    }

    .tab-nav.tab-nav--wide,
    .tab-nav {
        display: grid !important;
        grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
        align-items: center !important;
        left: 6px !important;
        right: 6px !important;
        bottom: max(6px, env(safe-area-inset-bottom, 0px)) !important;
        width: auto !important;
        max-width: none !important;
        height: var(--tabbar-height) !important;
        padding: 4px !important;
        overflow: visible !important;
        border-radius: 22px !important;
    }

    .tab-nav--wide .tab-btn,
    .tab-btn {
        min-width: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 6px 0 !important;
        gap: 0 !important;
        border-radius: 16px !important;
    }

    .tab-nav--wide .tab-label,
    .tab-label {
        display: none !important;
    }

    .tab-nav--wide .tab-icon,
    .tab-icon {
        display: block !important;
        font-size: 20px !important;
        line-height: 1 !important;
    }

    .tab-btn.active {
        box-shadow: 0 8px 18px rgba(37,99,235,.22) !important;
    }

    .app-main {
        padding-bottom: calc(var(--tabbar-height) + 22px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

@media (max-width: 360px) {
    .tab-nav--wide .tab-icon,
    .tab-icon {
        font-size: 18px !important;
    }

    .tab-nav.tab-nav--wide,
    .tab-nav {
        left: 4px !important;
        right: 4px !important;
        padding: 3px !important;
    }
}


/* v31: lepší UX změny PINu */
.pin-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pin-field-wrap .form-input {
    padding-right: 54px;
    width: 100%;
}
.pin-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-blue) 8%, transparent);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), transform var(--transition);
}
.pin-toggle:hover {
    background: color-mix(in srgb, var(--accent-blue) 15%, transparent);
    color: var(--accent-blue);
}
.pin-submit {
    width: 100%;
    min-height: 56px;
    margin-top: 4px;
    opacity: .58;
    filter: grayscale(.25);
}
.pin-submit.is-ready:not(:disabled) {
    opacity: 1;
    filter: none;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--accent-blue) 24%, transparent);
}
.pin-submit:disabled {
    cursor: not-allowed;
}
.pin-helper {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.pin-helper[data-status="success"] {
    color: var(--accent-green);
    font-weight: 700;
}
.pin-helper[data-status="error"] {
    color: var(--accent-red);
    font-weight: 700;
}
.pin-status[data-status="success"] {
    background: color-mix(in srgb, var(--accent-green) 12%, var(--bg-input));
    border-color: color-mix(in srgb, var(--accent-green) 30%, var(--border));
    color: color-mix(in srgb, var(--accent-green) 78%, var(--text-primary));
    font-weight: 700;
}
.pin-status[data-status="error"] {
    background: color-mix(in srgb, var(--accent-red) 10%, var(--bg-input));
    border-color: color-mix(in srgb, var(--accent-red) 30%, var(--border));
    color: color-mix(in srgb, var(--accent-red) 78%, var(--text-primary));
    font-weight: 700;
}
@media (max-width: 640px) {
    .pin-submit { min-height: 52px; }
    .pin-toggle { width: 36px; height: 36px; }
}


.stat-card--clickable {
    width: 100%;
    appearance: none;
    border: 1px solid var(--border);
    text-align: left;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.stat-card--clickable:hover,
.stat-card--clickable:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--user-accent) 40%, var(--border));
    outline: none;
}
.stat-card--clickable:active { transform: translateY(0); }
.stat-card--clickable em {
    justify-self: start;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: var(--user-accent);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity .18s ease, transform .18s ease;
}
.stat-card--clickable:hover em,
.stat-card--clickable:focus-visible em { opacity: 1; transform: translateY(0); }


/* ============================================
   v34: automatický kontrast textu k nastavené barvě
   ============================================ */
:root {
    --user-accent-contrast: #ffffff;
    --user-accent-contrast-inverse: #111827;
    --user-accent-readable: color-mix(in srgb, var(--user-accent) 72%, var(--text-primary));
}

/* Barevné plochy aplikace – text se přepíná podle světlosti zvolené barvy. */
.btn-primary,
.btn-primary:hover,
.tab-btn.active,
.filter-btn.active,
.cal-day.dnes,
.cal-day.vybrano.dnes,
.btn-primary-soft:hover,
.quick-add-btn,
.smart-command-submit,
.settings-style-btn.active,
.settings-color-btn.active,
.dashboard-card.is-clickable:active,
.toast.info {
    color: var(--user-accent-contrast) !important;
    text-shadow: none !important;
}

.btn-primary svg,
.tab-btn.active svg,
.filter-btn.active svg,
.cal-day.dnes svg,
.quick-add-btn svg,
.smart-command-submit svg {
    color: currentColor !important;
    fill: currentColor !important;
}

/* Jemné akcentní prvky nemají být černé natvrdo; barva zůstává čitelná i v dark/light režimu. */
.btn-primary-soft,
.settings-color-btn,
.color-hint,
.mini-date,
.empty-state-icon {
    color: var(--user-accent-readable) !important;
}

/* Aktivní prvky s akcentním pozadím musí mít kontrastní text i v přepsaných stylech. */
.filter-btn.active,
.tab-btn.active,
.btn-primary,
.cal-day.dnes,
.btn-primary-soft:hover {
    border-color: color-mix(in srgb, var(--user-accent) 68%, var(--border)) !important;
}

/* Login tlačítko používá stejný kontrast jako zbytek aplikace. */
.login-submit {
    color: var(--user-accent-contrast) !important;
}