:root {
     --bg: #0e0e11;
     --surface: #17171c;
     --surface2: #1f1f26;
     --border: #2a2a35;
     --text: #e8e8f0;
     --muted: #666680;
     --green: #22c55e;
     --red: #ef4444;
     --blue: #3b82f6;
     --accent: #6366f1;
     --yellow: #f59e0b;
 }

 body.light {
     --bg: #f5f5f8;
     --surface: #fff;
     --surface2: #f0f0f5;
     --border: #e2e2ec;
     --text: #111118;
     --muted: #888899;
 }

 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 body {
     font-family: 'DM Sans', sans-serif;
     background: var(--bg);
     color: var(--text);
     min-height: 100vh;
     display: flex;
     transition: background .2s, color .2s
 }

 /* Sidebar */
 .sidebar {
     width: 220px;
     min-height: 100vh;
     background: var(--surface);
     border-right: 1px solid var(--border);
     display: flex;
     flex-direction: column;
     padding: 28px 16px;
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     z-index: 100;
     transition: background .2s
 }

 .logo {
     padding: 0 8px 32px;
     display: flex;
     justify-content: center
 }

 .nav-btn {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 12px;
     border-radius: 8px;
     border: none;
     background: transparent;
     color: var(--muted);
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     width: 100%;
     text-align: left;
     transition: all .15s;
     margin-bottom: 2px
 }

 .nav-btn:hover,
 .nav-btn.active {
     background: var(--surface2);
     color: var(--text)
 }

 .nav-btn .icon {
     font-size: 16px;
     width: 20px;
     text-align: center
 }

 .sidebar-bottom {
     margin-top: auto;
     display: flex;
     flex-direction: column;
     gap: 2px
 }

 .nav-btn.danger {
     color: var(--red)
 }

 .nav-btn.danger:hover {
     background: rgba(239, 68, 68, .1)
 }

 /* Main */
 .main {
     margin-left: 220px;
     flex: 1;
     padding: 40px 48px;
     max-width: calc(100vw - 220px);
     min-height: 100vh
 }

 .page {
     display: none
 }

 .page.active {
     display: block
 }

 h1 {
     font-size: 26px;
     font-weight: 600;
     letter-spacing: -.5px;
     margin-bottom: 8px
 }

 .page-subtitle {
     color: var(--muted);
     font-size: 14px;
     margin-bottom: 28px
 }

 /* Cards */
 .cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 16px;
     margin-bottom: 36px
 }

 .card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 22px 24px;
     transition: background .2s
 }

 .card-label {
     font-size: 12px;
     color: var(--muted);
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: .5px;
     margin-bottom: 8px
 }

 .card-value {
     font-size: 24px;
     font-weight: 400;
     font-family: 'DM Mono', monospace;
     letter-spacing: -.5px
 }

 .card-value.green {
     color: var(--green)
 }

 .card-value.red {
     color: var(--red)
 }

 .card-value.blue {
     color: var(--blue)
 }

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

 .section-title {
     font-size: 13px;
     font-weight: 600;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .5px
 }

 .filter-bar {
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap;
     margin-bottom: 20px
 }

 .filter-bar select,
 .filter-bar input {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 8px;
     color: var(--text);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     padding: 8px 12px;
     outline: none;
     cursor: pointer
 }

 .filter-bar input {
     min-width: 200px
 }

 .filter-bar select:focus,
 .filter-bar input:focus {
     border-color: var(--accent)
 }

 .filter-bar select option {
     background: var(--surface2)
 }

 .filter-clear {
     background: none;
     border: none;
     color: var(--muted);
     cursor: pointer;
     font-size: 13px;
     padding: 8px 4px
 }

 .filter-clear:hover {
     color: var(--red)
 }

 /* Records */
 .records-list {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 14px;
     overflow: hidden;
     transition: background .2s
 }

 .record-item {
     display: grid;
     grid-template-columns: 100px 40px 120px 1fr auto auto;
     align-items: center;
     gap: 12px;
     padding: 14px 20px;
     border-bottom: 1px solid var(--border);
     font-size: 14px;
     transition: background .1s
 }

 .record-item:last-child {
     border-bottom: none
 }

 .record-item:hover {
     background: var(--surface2)
 }

 .record-date {
     color: var(--muted);
     font-family: 'DM Mono', monospace;
     font-size: 12px
 }

 .record-emoji {
     font-size: 18px;
     text-align: center
 }

 .record-cat {
     color: var(--muted);
     font-size: 13px
 }

 .record-desc {
     font-weight: 500
 }

 .record-amount {
     font-family: 'DM Mono', monospace;
     font-weight: 400;
     text-align: right;
     white-space: nowrap
 }

 .record-amount.income {
     color: var(--green)
 }

 .record-amount.expense {
     color: var(--red)
 }

 .record-del {
     background: var(--surface2);
     border: 1px solid var(--border);
     cursor: pointer;
     font-size: 14px;
     padding: 3px 8px;
     border-radius: 6px;
     transition: background .15s, border-color .15s;
     line-height: 1.4
 }

 .record-del:hover {
     background: rgba(99, 102, 241, .15);
     border-color: var(--accent)
 }

 .empty-state {
     padding: 48px;
     text-align: center;
     color: var(--muted);
     font-size: 14px
 }

 /* Budget alerts */
 .budget-alerts {
     margin-bottom: 20px;
     display: flex;
     flex-direction: column;
     gap: 8px
 }

 .alert-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 16px;
     background: rgba(245, 158, 11, .1);
     border: 1px solid rgba(245, 158, 11, .3);
     border-radius: 10px;
     font-size: 13px
 }

 .alert-item.over {
     background: rgba(239, 68, 68, .1);
     border-color: rgba(239, 68, 68, .3)
 }

 .alert-bar-wrap {
     flex: 1;
     height: 6px;
     background: var(--border);
     border-radius: 3px;
     overflow: hidden
 }

 .alert-bar {
     height: 100%;
     border-radius: 3px;
     background: var(--yellow);
     transition: width .3s
 }

 .alert-bar.over {
     background: var(--red)
 }

 /* Stats */
 .stats-strip {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 12px;
     margin-bottom: 24px
 }

 .stat-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 16px 20px
 }

 .stat-label {
     font-size: 11px;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .4px;
     margin-bottom: 4px
 }

 .stat-value {
     font-size: 15px;
     font-weight: 600
 }

 .stat-value .stat-emoji {
     margin-right: 6px
 }

 /* Form */
 .form-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 32px;
     max-width: 520px;
     transition: background .2s
 }

 .form-group {
     margin-bottom: 20px
 }

 label {
     display: block;
     font-size: 13px;
     font-weight: 500;
     color: var(--muted);
     margin-bottom: 7px;
     text-transform: uppercase;
     letter-spacing: .4px
 }

 input,
 select {
     width: 100%;
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 8px;
     color: var(--text);
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     padding: 11px 14px;
     outline: none;
     transition: border-color .15s;
     text-align: left;
 }

 input:focus,
 select:focus {
     border-color: var(--accent)
 }

 select option {
     background: var(--surface2)
 }

 .type-toggle {
     display: flex;
     gap: 8px;
     margin-bottom: 20px
 }

 .type-btn {
     flex: 1;
     padding: 10px;
     border-radius: 8px;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--muted);
     font-family: 'DM Sans', sans-serif;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all .15s
 }

 .type-btn.active-expense {
     background: rgba(239, 68, 68, .15);
     border-color: var(--red);
     color: var(--red)
 }

 .type-btn.active-income {
     background: rgba(34, 197, 94, .15);
     border-color: var(--green);
     color: var(--green)
 }

 .cerpat-label {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     font-size: 13px;
     font-weight: 500;
     color: var(--text);
     text-transform: none;
     letter-spacing: 0;
     margin-bottom: 0;
 }

 .cerpat-label input[type="checkbox"] {
     width: 16px;
     height: 16px;
     accent-color: var(--accent);
     cursor: pointer;
     flex-shrink: 0;
 }

 .btn {
     width: 100%;
     padding: 13px;
     border-radius: 8px;
     border: none;
     font-family: 'DM Sans', sans-serif;
     font-size: 15px;
     font-weight: 600;
     cursor: pointer;
     transition: opacity .15s
 }

 .btn:hover {
     opacity: .85
 }

 .btn-primary {
     background: var(--accent);
     color: #fff
 }

 .btn-secondary {
     background: var(--surface2);
     color: var(--text);
     border: 1px solid var(--border);
     margin-top: 8px
 }

 .btn-danger {
     background: rgba(239, 68, 68, .15);
     color: var(--red);
     border: 1px solid rgba(239, 68, 68, .3);
     margin-top: 8px
 }

 .status-msg {
     text-align: center;
     font-size: 13px;
     min-height: 20px;
     margin-bottom: 12px;
     font-weight: 500
 }

 .status-msg.ok {
     color: var(--green)
 }

 .status-msg.err {
     color: var(--red)
 }

 .row-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px
 }

 .badge {
     display: inline-block;
     font-size: 10px;
     padding: 2px 6px;
     border-radius: 4px;
     font-weight: 600;
     margin-left: 6px;
     vertical-align: middle
 }

 .badge-recur {
     background: rgba(99, 102, 241, .2);
     color: var(--accent)
 }

 /* Kategorie */
 .kategorie-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 12px;
     margin-bottom: 32px
 }

 .kat-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 12px;
     padding: 16px 18px;
     display: flex;
     align-items: center;
     gap: 12px;
     position: relative;
     transition: background .2s
 }

 .kat-emoji {
     font-size: 22px
 }

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

 .kat-name {
     font-size: 14px;
     font-weight: 500;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
 }

 .kat-type {
     font-size: 11px;
     color: var(--muted);
     margin-top: 2px
 }

 .kat-budget {
     font-size: 11px;
     color: var(--accent);
     margin-top: 2px
 }

 .kat-delete {
     position: absolute;
     top: 8px;
     right: 8px;
     background: none;
     border: none;
     color: var(--muted);
     cursor: pointer;
     font-size: 14px;
     padding: 2px 4px;
     border-radius: 4px;
     opacity: 0;
     transition: opacity .15s
 }

 .kat-card:hover .kat-delete {
     opacity: 1
 }

 .kat-delete:hover {
     color: var(--red)
 }

 /* Emoji picker */
 .emoji-picker {
     display: flex;
     flex-wrap: wrap;
     gap: 6px;
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 8px;
     padding: 10px;
     max-height: 150px;
     overflow-y: auto
 }

 .emoji-opt {
     font-size: 20px;
     cursor: pointer;
     padding: 4px 6px;
     border-radius: 6px;
     border: 1px solid transparent;
     transition: all .1s
 }

 .emoji-opt:hover,
 .emoji-opt.selected {
     background: var(--border);
     border-color: var(--accent)
 }

 /* Charts */
 .charts-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     margin-bottom: 20px
 }

 .chart-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 24px;
     transition: background .2s
 }

 .chart-title {
     font-size: 13px;
     font-weight: 600;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .4px;
     margin-bottom: 20px
 }

 .chart-card.full {
     grid-column: 1/-1
 }

 /* Month tabs */
 .month-tabs {
     display: flex;
     gap: 6px;
     flex-wrap: wrap;
     margin-bottom: 24px
 }

 .month-tab {
     padding: 6px 14px;
     border-radius: 20px;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--muted);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     cursor: pointer;
     transition: all .15s
 }

 .month-tab:hover {
     background: var(--surface2);
     color: var(--text)
 }

 .month-tab.active {
     background: var(--accent);
     border-color: var(--accent);
     color: #fff
 }

 /* Tools */
 .tools-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     max-width: 600px
 }

 .tool-card {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 14px;
     padding: 24px
 }

 .tool-card h3 {
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 6px
 }

 .tool-card p {
     font-size: 13px;
     color: var(--muted);
     margin-bottom: 16px;
     line-height: 1.5
 }

 /* Inline kategorie */
 .kat-inline-toggle {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-top: -8px;
     margin-bottom: 20px
 }

 .kat-inline-btn {
     background: none;
     border: 1px dashed var(--border);
     border-radius: 7px;
     color: var(--accent);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 500;
     padding: 6px 12px;
     cursor: pointer;
     transition: all .15s;
     display: flex;
     align-items: center;
     gap: 5px
 }

 .kat-inline-btn:hover {
     background: rgba(99, 102, 241, .08);
     border-color: var(--accent)
 }

 .kat-inline-panel {
     background: var(--surface2);
     border: 1px solid var(--border);
     border-radius: 10px;
     padding: 16px;
     margin-bottom: 20px;
     display: none;
     flex-direction: column;
     gap: 12px
 }

 .kat-inline-panel.open {
     display: flex
 }

 .kat-inline-panel .row-3 {
     display: grid;
     grid-template-columns: 1fr 80px auto;
     gap: 10px;
     align-items: end
 }

 .kat-inline-panel label {
     font-size: 11px
 }

 .kat-inline-panel input {
     padding: 8px 10px;
     font-size: 13px
 }

 .kat-inline-emoji-row {
     display: flex;
     flex-wrap: wrap;
     gap: 5px
 }

 .kat-inline-emoji-opt {
     font-size: 18px;
     cursor: pointer;
     padding: 3px 5px;
     border-radius: 5px;
     border: 1px solid transparent;
     transition: all .1s
 }

 .kat-inline-emoji-opt:hover,
 .kat-inline-emoji-opt.sel {
     background: var(--border);
     border-color: var(--accent)
 }

 .btn-inline-save {
     padding: 8px 14px;
     border-radius: 7px;
     border: none;
     background: var(--accent);
     color: #fff;
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     font-weight: 600;
     cursor: pointer;
     white-space: nowrap;
     transition: opacity .15s;
     align-self: flex-end
 }

 .btn-inline-save:hover {
     opacity: .85
 }

 .btn-inline-cancel {
     padding: 8px 10px;
     border-radius: 7px;
     border: 1px solid var(--border);
     background: transparent;
     color: var(--muted);
     font-family: 'DM Sans', sans-serif;
     font-size: 13px;
     cursor: pointer;
     transition: all .15s;
     align-self: flex-end
 }

 .btn-inline-cancel:hover {
     color: var(--red);
     border-color: var(--red)
 }

 /* Modal */
 .modal-overlay {
     display: none;
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .6);
     z-index: 200;
     align-items: center;
     justify-content: center
 }

 .modal-overlay.open {
     display: flex
 }

 .modal {
     background: var(--surface);
     border: 1px solid var(--border);
     border-radius: 16px;
     padding: 28px;
     width: 100%;
     max-width: 460px;
     max-height: 90vh;
     overflow-y: auto;
     box-shadow: 0 24px 60px rgba(0, 0, 0, .4)
 }

 .modal h2 {
     font-size: 18px;
     font-weight: 600;
     margin-bottom: 20px
 }

 .modal-footer {
     display: flex;
     gap: 8px;
     margin-top: 8px
 }

 .modal-footer .btn {
     flex: 1
 }

 /* ── MOBILE ── */
 @media(max-width:768px) {
     .sidebar {
         display: none
     }

     .main {
         margin-left: 0;
         padding: env(safe-area-inset-top, 20px) 16px 120px;
         max-width: 100%
     }

     /* Bottom nav */
     .bottom-nav {
         display: flex;
         position: fixed;
         bottom: 0;
         left: 0;
         right: 0;
         background: var(--surface);
         border-top: 1px solid var(--border);
         z-index: 100;
         padding-bottom: env(safe-area-inset-bottom)
     }

     .bottom-nav-btn {
         flex: 1;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: 10px 4px;
         border: none;
         background: transparent;
         color: var(--muted);
         font-family: 'DM Sans', sans-serif;
         font-size: 10px;
         font-weight: 500;
         cursor: pointer;
         gap: 4px;
         transition: color .15s
     }

     .bottom-nav-btn .icon {
         font-size: 20px
     }

     .bottom-nav-btn.active {
         color: var(--accent)
     }

     .bottom-nav-btn.add-btn .icon-wrap {
         background: var(--accent);
         border-radius: 50%;
         width: 44px;
         height: 44px;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 22px;
         margin-bottom: -4px;
         color: #fff;
     }

     /* Mobile přehled */
     .mobile-hero {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: 20px;
         padding: 24px 20px;
         margin-bottom: 20px;
         text-align: center
     }

     .mobile-hero-label {
         font-size: 12px;
         color: var(--muted);
         text-transform: uppercase;
         letter-spacing: .5px;
         margin-bottom: 6px
     }

     .mobile-hero-value {
         font-size: 40px;
         font-weight: 600;
         font-family: 'DM Mono', monospace;
         letter-spacing: -1px
     }

     .mobile-hero-value.green {
         color: var(--green)
     }

     .mobile-hero-value.red {
         color: var(--red)
     }

     .mobile-mini-cards {
         display: grid;
         grid-template-columns: 1fr 1fr;
         gap: 10px;
         margin-bottom: 20px
     }

     .mobile-mini-card {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: 12px;
         padding: 14px 16px
     }

     .mobile-mini-label {
         font-size: 11px;
         color: var(--muted);
         text-transform: uppercase;
         letter-spacing: .4px;
         margin-bottom: 4px
     }

     .mobile-mini-value {
         font-size: 18px;
         font-weight: 600;
         font-family: 'DM Mono', monospace
     }

     .mobile-mini-value.green {
         color: var(--green)
     }

     .mobile-mini-value.red {
         color: var(--red)
     }

     .mobile-chart-card {
         background: var(--surface);
         border: 1px solid var(--border);
         border-radius: 14px;
         padding: 20px;
         margin-bottom: 20px
     }

     .mobile-chart-title {
         font-size: 13px;
         font-weight: 600;
         color: var(--muted);
         text-transform: uppercase;
         letter-spacing: .4px;
         margin-bottom: 16px
     }

     .mobile-add-btn {
         width: 100%;
         padding: 18px;
         border-radius: 14px;
         border: none;
         background: var(--accent);
         color: #fff;
         font-family: 'DM Sans', sans-serif;
         font-size: 17px;
         font-weight: 600;
         cursor: pointer;
         margin-bottom: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
         gap: 10px;
         box-shadow: 0 4px 20px rgba(99, 102, 241, .35)
     }

     /* Fix: records list na mobilu nesmí ořezávat */
     .records-list {
         overflow: visible;
         border-radius: 14px
     }

     .record-item:last-child {
         border-bottom: none;
         border-radius: 0 0 14px 14px
     }

     .record-item:first-child {
         border-radius: 14px 14px 0 0
     }

     /* Fix: row-2 na mobilu = 1 sloupec */
     .cards,
     .stats-strip,
     .row-2 {
         grid-template-columns: 1fr
     }

     .charts-grid,
     .tools-grid {
         grid-template-columns: 1fr
     }

     /* Fix: mobilní záznamy */
     .record-item {
         grid-template-columns: 40px 1fr auto auto
     }

     .record-date,
     .record-cat {
         display: none
     }

     h1 {
         font-size: 22px
     }

     .desktop-only {
         display: none !important
     }

     .mobile-only {
         display: block !important
     }

     /* Fix: form-card na mobilu bez max-width */
     .form-card {
         max-width: 100%;
         padding: 20px
     }

     /* Fix: modal na mobilu */
     .modal {
         margin: 16px;
         max-height: calc(100vh - 32px)
     }
 }

 @media(min-width:769px) {
     .bottom-nav {
         display: none
     }

     .mobile-only {
         display: none !important
     }

     .desktop-only {
         display: block !important
     }
 }

 input[type="date"] {
     text-align: left;
     -webkit-appearance: none;
     appearance: none;
 }