/* Kšeftiq — veřejné styly */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
    --brand:       #9C27B0;
    --brand-light: #F3E5F5;
    --brand-dark:  #6A1B9A;
    --brand-mid:   #CE93D8;
    --accent:      #1565C0;
    --accent-dark: #0D47A1;
    --accent-light:#E3F2FD;
    --bg:          #F9F9FB;
    --surface:     #FFFFFF;
    --surface2:    #F2F3F7;
    --text:        #0D1117;
    --text2:       #2D3748;
    --text3:       #5A6473;
    --border:      #E2E5ED;
    --danger:      #E53E3E;
    --success:     #38A169;
    --radius:      14px;
    --radius-sm:   8px;
    --radius-xs:   6px;
    --shadow:      0 1px 12px rgba(0,0,0,.07);
    --shadow-lg:   0 6px 36px rgba(0,0,0,.11);
}

#kseftboard-app * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; }
#kseftboard-app { color: var(--text); background: var(--bg); min-height: 100vh; }

/* Nav */
.kb-nav { background: #fff; border-bottom: 1.5px solid var(--border); padding: 0 14px; display: flex; align-items: center; justify-content: space-between; height: 56px; position: sticky; top: 0; z-index: 100; }
.kb-logo { font-size: 20px; font-weight: 900; color: var(--brand); cursor: pointer; letter-spacing: -1px; }
.kb-logo span { color: var(--accent); }
.kb-nav-links { display: flex; gap: 8px; align-items: center; }
.kb-nav-btn { padding: 7px 16px; border-radius: var(--radius-xs); border: none; font-size: 13px; font-weight: 700; cursor: pointer; font-family: 'Montserrat', sans-serif; transition: all .15s; }
.kb-nav-btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text2); }
.kb-nav-btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.kb-nav-btn-primary { background: var(--brand); color: #fff; }
.kb-nav-btn-primary:hover { background: var(--brand-dark); }
.kb-nav-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; cursor: pointer; }

/* Pages */
.kb-page { display: none; }
.kb-page.active { display: block; }

/* Hero */
.kb-hero { position: relative; overflow: hidden; min-height: 340px; display: flex; align-items: center; justify-content: center; }
.kb-hero-bg { position: absolute; inset: 0; }
.kb-hero-bg svg { width: 100%; height: 100%; object-fit: cover; }
.kb-hero-overlay { position: absolute; inset: 0; background: rgba(50,10,80,.82); }
.kb-hero-content { position: relative; z-index: 2; text-align: center; padding: 48px 24px; }
.kb-hero-content h1 { font-size: clamp(22px,5vw,36px); font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 12px; }
.kb-hero-content p { font-size: 15px; color: rgba(255,255,255,.82); font-weight: 500; margin-bottom: 28px; }
.kb-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.kb-btn-hero-main { background: var(--brand); color: #fff; border: none; padding: 14px 28px; border-radius: var(--radius); font-size: 15px; font-weight: 800; cursor: pointer; font-family: 'Montserrat',sans-serif; transition: all .2s; }
.kb-btn-hero-main:hover { background: var(--brand-dark); transform: translateY(-1px); }
.kb-btn-hero-sec { background: rgba(255,255,255,.12); color: #fff; border: 2px solid rgba(255,255,255,.4); padding: 12px 24px; border-radius: var(--radius); font-size: 15px; font-weight: 700; cursor: pointer; font-family: 'Montserrat',sans-serif; backdrop-filter: blur(4px); transition: all .2s; }
.kb-btn-hero-sec:hover { background: rgba(255,255,255,.22); }

/* Filters */
.kb-filter-bar { background: var(--surface); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 16px; margin: 24px 20px 0; box-shadow: var(--shadow); }
.kb-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kb-filter-label { font-size: 11px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.kb-filter-select { padding: 8px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text); cursor: pointer; font-family: 'Montserrat',sans-serif; }
.kb-filter-select:focus { border-color: var(--brand); outline: none; }
.kb-filter-clear { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer; background: none; border: none; font-family: 'Montserrat',sans-serif; }

/* Ad grid */
.kb-ads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px,100%), 1fr)); gap: 14px; padding: 16px; align-items: start; box-sizing: border-box; }
.kb-ad-card { background: var(--surface); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 16px; cursor: pointer; transition: all .18s; box-shadow: var(--shadow); position: relative; height: 200px; box-sizing: border-box; overflow: hidden; }
.kb-ad-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--brand-mid); }
.kb-ad-card-add { border: 2px dashed var(--brand-mid); background: var(--brand-light); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; }
.kb-add-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.kb-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 50px; font-size: 11px; font-weight: 700; margin-right: 6px; margin-bottom: 8px; }
.kb-badge-driver   { background: #F3E5F5; color: #6A1B9A; }
.kb-badge-customer { background: #FFF8E1; color: #B45309; }
.kb-badge-cat      { background: var(--surface2); color: var(--text3); }
.kb-ad-title { font-size: 15px; font-weight: 800; margin-bottom: 6px; line-height: 1.3; }
.kb-ad-desc  { font-size: 13px; color: var(--text2); line-height: 1.6; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-ad-locked { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text3); font-weight: 600; margin-bottom: 8px; }
.kb-ad-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.kb-ad-route { font-size: 12px; color: var(--text3); font-weight: 600; }
.kb-ad-price-wrap { text-align: right; }
.kb-ad-price-label { font-size: 9px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.kb-ad-price { font-size: 16px; font-weight: 900; color: var(--brand); }
.kb-ad-price-min { font-size: 11px; font-weight: 700; color: var(--accent); }

/* Stars */
.kb-stars { color: #F5A623; font-size: 13px; }
.kb-stars-sm { font-size: 11px; }

/* Buttons */
.kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 20px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 700; cursor: pointer; border: none; font-family: 'Montserrat',sans-serif; transition: all .15s; }
.kb-btn-primary { background: var(--brand); color: #fff; }
.kb-btn-primary:hover { background: var(--brand-dark); }
.kb-btn-accent { background: var(--accent); color: #fff; }
.kb-btn-accent:hover { background: var(--accent-dark); }
.kb-btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text2); }
.kb-btn-outline:hover { border-color: var(--brand); color: var(--brand); }
.kb-btn-danger { background: transparent; border: 1.5px solid #FCA5A5; color: #991B1B; }
.kb-btn-danger:hover { background: #FEE2E2; }
.kb-btn-success { background: var(--success); color: #fff; }

/* Modal */
.kb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; display: none; align-items: flex-end; justify-content: center; }
.kb-modal-overlay.open { display: flex; }
@media (min-width: 600px) { .kb-modal-overlay { align-items: center; } }
.kb-modal { background: var(--surface); border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; }
@media (min-width: 600px) { .kb-modal { border-radius: var(--radius); } }
.kb-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 0; position: sticky; top: 0; background: var(--surface); z-index: 10; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.kb-modal-header h2 { font-size: 18px; font-weight: 900; }
.kb-modal-close { width: 32px; height: 32px; border-radius: 50%; border: none; background: var(--surface2); cursor: pointer; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.kb-modal-body { padding: 16px; }

/* Forms */
.kb-form-group { margin-bottom: 16px; }
.kb-form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
.kb-form-input, .kb-form-select, .kb-form-textarea {
    width: 100%; padding: 11px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-xs);
    font-size: 14px; font-weight: 500; font-family: 'Montserrat',sans-serif; background: var(--surface);
    color: var(--text); transition: border-color .15s;
}
.kb-form-input:focus, .kb-form-select:focus, .kb-form-textarea:focus { border-color: var(--brand); outline: none; }

/* Sjednocení vzhledu nativních date/number polí se zbytkem formulářových prvků
   (bez tohoto iOS/Safari kreslí datum menší a s vycentrovaným textem než sousední pole) */
#kseftboard-app input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
#kseftboard-app input[type="number"] { -moz-appearance: textfield; }
#kseftboard-app input[type="number"]::-webkit-outer-spin-button,
#kseftboard-app input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Date pole: nativní iOS/Safari rendering type=date ignoruje box-model i po appearance:none
   (jiná výška, vycentrovaný text). Řešení: skrytý ale funkční nativní input nahoře (otevírá
   date picker), viditelný box je obyčejný div se stejnými styly jako sourozenci — vždy stejná velikost. */
.kb-date-wrap { position: relative; }
.kb-fg-row .kb-date-wrap { flex: 1; min-width: 0; }
.kb-date-wrap .kb-date-native {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; margin: 0; z-index: 2; cursor: pointer;
}
.kb-date-wrap .kb-date-display { display: flex; align-items: center; pointer-events: none; }
.kb-form-textarea { min-height: 90px; resize: vertical; }
.kb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kb-form-note { font-size: 11px; color: var(--text3); font-weight: 500; margin-top: 4px; }
.kb-modal-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.kb-modal-actions .kb-btn { flex: 1; }

/* Steps bar */
.kb-steps-bar { display: flex; margin-bottom: 20px; border-radius: var(--radius-xs); overflow: hidden; border: 1.5px solid var(--border); }
.kb-step-item { flex: 1; padding: 9px 6px; text-align: center; font-size: 11px; font-weight: 700; color: var(--text3); background: var(--surface2); border-right: 1.5px solid var(--border); transition: all .2s; cursor: default; }
.kb-step-item:last-child { border-right: none; }
.kb-step-item.active { background: var(--brand); color: #fff; }
.kb-step-item.done { background: var(--brand-light); color: var(--brand); cursor: pointer; }
.kb-step-item.done:hover { background: var(--brand-mid); color: #fff; }

/* Role / Category pills */
.kb-role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.kb-role-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 16px; text-align: center; cursor: pointer; transition: all .18s; background: var(--surface); }
.kb-role-card:hover { border-color: var(--brand); }
.kb-role-card.selected { border-color: var(--brand); background: var(--brand-light); }
.kb-role-icon { font-size: 28px; margin-bottom: 8px; }
.kb-role-title { font-size: 13px; font-weight: 800; }
.kb-role-sub { font-size: 11px; color: var(--text3); margin-top: 3px; }
.kb-cat-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.kb-cat-pill { padding: 9px 16px; border: 2px solid var(--border); border-radius: 50px; font-size: 13px; font-weight: 700; cursor: pointer; background: var(--surface); color: var(--text2); transition: all .15s; display: flex; align-items: center; gap: 7px; }
.kb-cat-pill:hover { border-color: var(--brand); color: var(--brand); }
.kb-cat-pill.selected { border-color: var(--brand); background: var(--brand); color: #fff; }

/* Map */
.kb-map-container { background: var(--surface2); border-radius: var(--radius-xs); border: 1.5px solid var(--border); padding: 12px; margin-bottom: 14px; }
.kb-map-container svg { width: 100%; height: auto; display: block; }
.kp { fill: var(--brand-light); stroke: var(--brand); stroke-width: 1.5; cursor: pointer; transition: fill .15s; }
.kp:hover { fill: var(--brand-mid); }
.kp.sel-n { fill: var(--brand); }
.kp.sel-v { fill: var(--accent); }
.kp.sel-both { fill: #7B1FA2; }
.kb-map-info { font-size: 12px; color: var(--text3); font-weight: 600; margin-top: 6px; min-height: 18px; }
.kb-mimo-btns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.kb-mimo-btn { padding: 7px 14px; border-radius: 50px; border: 2px solid var(--accent); background: transparent; color: var(--accent); font-size: 12px; font-weight: 700; cursor: pointer; font-family: 'Montserrat',sans-serif; transition: all .18s; }
.kb-mimo-btn:hover, .kb-mimo-btn.active { background: var(--accent); color: #fff; }

/* Detail modal */
.kb-detail-route { display: flex; align-items: center; gap: 8px; background: var(--brand-light); border-radius: var(--radius-xs); padding: 10px 14px; margin-bottom: 10px; }
.kb-drp { flex: 1; }
.kb-drp-l { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); }
.kb-drp-v { font-size: 15px; font-weight: 900; color: var(--brand-dark); margin-top: 2px; }
.kb-detail-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.kb-dmi { background: var(--surface2); border-radius: var(--radius-xs); padding: 8px 10px; }
.kb-dml { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--text3); }
.kb-dmv { font-size: 16px; font-weight: 900; margin-top: 3px; }
.kb-dmv-price { color: var(--brand); }
.kb-dmv-min   { color: var(--accent); font-size: 14px; }

/* Author card */
.kb-author-card { background: var(--brand-light); border: 1.5px solid var(--brand-mid); border-radius: var(--radius); padding: 13px 15px; margin-bottom: 10px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: box-shadow .15s; }
.kb-author-card:hover { box-shadow: 0 4px 16px rgba(156,39,176,.18); }
.kb-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; }
.kb-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Review card */
.kb-review-card { background: var(--surface2); border-radius: var(--radius-xs); padding: 11px 14px; margin-bottom: 8px; border: 1px solid var(--border); }
.kb-review-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.kb-review-author { display: flex; align-items: center; gap: 6px; }
.kb-review-av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; }
.kb-review-name { font-size: 12px; font-weight: 700; }
.kb-review-text { font-size: 12px; color: var(--text2); font-style: italic; line-height: 1.5; }

/* Instruction box */
.kb-instr-box { background: var(--accent-light); border-radius: var(--radius-xs); border-left: 4px solid var(--accent); padding: 10px 12px; margin-bottom: 10px; }
.kb-instr-box h4 { font-size: 13px; font-weight: 800; color: var(--accent-dark); margin-bottom: 8px; }
.kb-instr-steps { list-style: none; counter-reset: ic; }
.kb-instr-steps li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text2); margin-bottom: 8px; counter-increment: ic; }
.kb-instr-steps li::before { content: counter(ic); min-width: 20px; height: 20px; background: var(--accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex-shrink: 0; }

/* Contact reveal */
.kb-contact-reveal { background: var(--surface2); border-radius: var(--radius-xs); padding: 16px; margin-bottom: 14px; }
.kb-contact-reveal h4 { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.kb-cr-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 600; }

/* Auth pages */
.kb-auth-wrap { max-width: 420px; margin: 40px auto; padding: 0 20px; }
.kb-auth-card { background: var(--surface); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 28px 24px; box-shadow: var(--shadow); }
.kb-auth-card h2 { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.kb-auth-sub { font-size: 14px; color: var(--text3); margin-bottom: 20px; }
.kb-auth-switch { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text3); font-weight: 500; }
.kb-auth-switch a { color: var(--brand); font-weight: 700; cursor: pointer; text-decoration: none; }

/* Profile */
.kb-profile-wrap { max-width: 560px; margin: 0 auto; padding: 24px 20px; }
.kb-profile-header { background: var(--surface); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 24px; margin-bottom: 16px; text-align: center; box-shadow: var(--shadow); }
.kb-profile-avatar-big { width: 72px; height: 72px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; overflow: hidden; }
.kb-profile-name { font-size: 20px; font-weight: 900; }
.kb-profile-tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 16px; }
.kb-tab { padding: 10px 16px; font-size: 13px; font-weight: 700; color: var(--text3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.kb-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.kb-tab-content { display: none; }
.kb-tab-content.active { display: block; }
.kb-security-box { background: var(--surface2); border-radius: var(--radius-xs); padding: 14px 16px; margin-bottom: 16px; font-size: 13px; color: var(--text2); }

/* My ads */
.kb-my-ad-item { background: var(--surface2); border-radius: var(--radius-xs); border: 1.5px solid var(--border); padding: 12px 14px; margin-bottom: 8px; }
.kb-my-ad-title { font-size: 13px; font-weight: 800; margin-bottom: 2px; }
.kb-my-ad-meta  { font-size: 11px; color: var(--text3); font-weight: 600; margin-bottom: 8px; }
.kb-my-ad-actions { display: flex; gap: 8px; }

/* History */
.kb-hist-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.kb-hist-tab { padding: 8px 18px; border-radius: 50px; border: 1.5px solid var(--border); font-size: 12px; font-weight: 700; cursor: pointer; background: var(--surface); color: var(--text3); font-family: 'Montserrat',sans-serif; }
.kb-hist-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.kb-hist-item { background: var(--surface); border-radius: var(--radius-xs); border: 1.5px solid var(--border); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.kb-hist-item:hover { border-color: var(--brand-mid); }

/* Legal */
.kb-legal-wrap { max-width: 680px; margin: 0 auto; padding: 32px 20px; }
.kb-legal-wrap h2 { font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.kb-legal-date { font-size: 12px; color: var(--text3); margin-bottom: 24px; font-weight: 600; }
.kb-legal-section { margin-bottom: 20px; }
.kb-legal-section h3 { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.kb-legal-section p, .kb-legal-section li { font-size: 13px; color: var(--text2); line-height: 1.8; font-weight: 500; }
.kb-legal-section ul { padding-left: 20px; }

/* Footer */
.kb-footer { text-align: center; padding: 28px 20px; border-top: 1px solid var(--border); margin-top: 32px; }
.kb-footer-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }
.kb-footer-links a { font-size: 13px; color: var(--text3); font-weight: 600; cursor: pointer; text-decoration: none; }
.kb-footer-links a:hover { color: var(--brand); }
.kb-footer-copy { font-size: 12px; color: var(--text3); }

/* QR */
.kb-qr-section { background: var(--surface); border-radius: var(--radius); border: 1.5px solid var(--border); padding: 24px; text-align: center; margin: 28px 20px; }
.kb-qr-section h4 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.kb-qr-section p { font-size: 13px; color: var(--text3); font-weight: 500; }

/* Toast */
.kb-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1A1A2E; color: #fff; padding: 12px 22px; border-radius: 50px; font-size: 13px; font-weight: 700; z-index: 999; opacity: 0; transition: all .3s; white-space: nowrap; font-family: 'Montserrat',sans-serif; }
.kb-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kb-toast.error { background: #C62828; }
.kb-toast.success { background: #2E7D32; }

/* Cookie banner */
.kb-cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background: #1A0A2E; color: #fff; padding: 16px 20px; z-index: 150; display: none; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 -4px 24px rgba(0,0,0,.18); }
.kb-cookie-banner.show { display: flex; }
.kb-cookie-banner p { font-size: 13px; flex: 1; min-width: 220px; line-height: 1.6; color: rgba(255,255,255,.85); font-family: 'Montserrat',sans-serif; }
.kb-cookie-banner p a { color: var(--brand-mid); cursor: pointer; text-decoration: underline; }
.kb-cookie-btns { display: flex; gap: 8px; flex-shrink: 0; }

/* Foto upload */
.kb-foto-dropzone { border: 2px dashed var(--border2, #C8CDD6); border-radius: var(--radius-xs); padding: 18px; text-align: center; cursor: pointer; background: var(--surface2); transition: border-color .18s; }
.kb-foto-dropzone:hover { border-color: var(--brand); }

/* Empty state */
.kb-empty { text-align: center; padding: 40px 20px; color: var(--text3); }
.kb-empty h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; color: var(--text2); }
.kb-empty p { font-size: 13px; font-weight: 500; }

/* Spinner */
.kb-spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: kb-spin .6s linear infinite; }
@keyframes kb-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .kb-filter-row { gap: 8px; }
    .kb-filter-select { font-size: 12px; padding: 7px 10px; }
    .kb-detail-meta { grid-template-columns: 1fr; }
    .kb-form-row { grid-template-columns: 1fr; }
}

/* Nav dropdown */
.kb-drop-link{display:flex;align-items:center;padding:10px 16px;font-size:13px;font-weight:600;color:#0D1117;cursor:pointer;text-decoration:none;transition:background .12s;}
.kb-drop-link:hover{background:#F2F3F7;}

/* KB_CONFIG je objekt — nav tlačítka musí fungovat bez KB. prefixu */
.kb-nav-btn{cursor:pointer;}

/* ─── Animace ─────────────────────────────────────────────── */

/* Fade-in pro stránky */
.kb-page.active {
    animation: kbFadeIn .28s ease both;
}
@keyframes kbFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Slide-up pro modály */
.kb-modal-overlay.open .kb-modal {
    animation: kbSlideUp .3s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes kbSlideUp {
    from { opacity: 0; transform: translateY(32px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Ad karty — jemný float při hoveru */
.kb-ad-card {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kb-ad-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(156,39,176,.13);
}

/* Hero text — fade-in při načtení */
.kb-hero-content h1 {
    animation: kbHeroTitle .7s ease both;
    animation-delay: .1s;
}
.kb-hero-content p {
    animation: kbHeroTitle .7s ease both;
    animation-delay: .25s;
}
.kb-hero-btns {
    animation: kbHeroTitle .7s ease both;
    animation-delay: .4s;
}
@keyframes kbHeroTitle {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Spinner pulse */
.kb-spinner {
    animation: kb-spin .7s cubic-bezier(.5,0,.5,1) infinite;
}

/* Toast — bounce-in */
.kb-toast.show {
    animation: kbToastIn .35s cubic-bezier(.22,.68,0,1.3) both;
}
@keyframes kbToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.9); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Nav avatar — scale při hoveru */
.kb-nav-avatar {
    transition: transform .15s ease, box-shadow .15s ease;
}
.kb-nav-avatar:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 14px rgba(156,39,176,.3);
}

/* Tlačítka — press effect */
.kb-btn:active, .kb-btn-hero-main:active, .kb-btn-hero-sec:active {
    transform: scale(.97);
}

/* Stats karty v adminu — rise */
.kb-stat-card {
    transition: transform .18s ease, box-shadow .18s ease;
}
.kb-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
}

/* Profile avatar upload hover */
.kb-profile-avatar-big {
    transition: filter .15s ease, transform .15s ease;
}
.kb-profile-avatar-big:hover {
    filter: brightness(.85);
    transform: scale(1.03);
}

/* Hist item hover */
.kb-hist-item {
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kb-hist-item:hover {
    border-color: #CE93D8;
    transform: translateX(3px);
    box-shadow: 0 2px 10px rgba(156,39,176,.09);
}

/* Filter grid */
/* Filter grid — 4 groups responsive */
.kb-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 20px; }
.kb-fg-group { display: flex; flex-direction: column; gap: 6px; }
.kb-fg-label { font-size: 10px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; }
.kb-fg-row { display: flex; align-items: center; gap: 6px; }
.kb-fg-arrow { font-size: 12px; color: var(--text3); font-weight: 700; flex-shrink: 0; }
.kb-fg-sel { flex: 1; min-width: 0; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text); cursor: pointer; font-family: 'Montserrat', sans-serif; transition: border-color .15s; }
.kb-fg-sel:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(156,39,176,.1); }
.kb-fg-sel::placeholder { color: var(--text3); }

/* Legacy compat */
.kb-filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kb-filter-label { font-size: 11px; font-weight: 800; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.kb-filter-select { padding: 8px 10px; border: 1.5px solid var(--border); border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; background: var(--surface); color: var(--text); cursor: pointer; font-family: 'Montserrat', sans-serif; }
.kb-filter-select:focus { border-color: var(--brand); outline: none; }
.kb-filter-clear { font-size: 12px; font-weight: 700; color: var(--brand); cursor: pointer; background: none; border: 1.5px solid var(--brand-mid); border-radius: 50px; padding: 6px 14px; font-family: 'Montserrat', sans-serif; transition: all .15s; white-space: nowrap; flex-shrink: 0; }
.kb-filter-clear:hover { background: var(--brand-light); }

@media (max-width: 600px) {
    .kb-filter-grid { grid-template-columns: 1fr; gap: 10px; }
    .kb-fg-sel { font-size: 14px; padding: 10px 12px; }
    .kb-fg-row { flex-wrap: wrap; }
    .kb-fg-row input[type=number] { width: calc(50% - 20px) !important; }
    .kb-ads-grid { padding: 12px; gap: 12px; }
    .kb-filter-bar { margin: 12px 8px 0; border-radius: 10px; }
}
/* Skeleton loading cards */
.kb-skel {
    background: linear-gradient(90deg, #E2E5ED 25%, #F2F3F7 50%, #E2E5ED 75%);
    background-size: 200% 100%;
    animation: kb-shimmer 1.4s infinite;
    display: block;
}
@keyframes kb-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}