:root {
  --color-bg-main: #0c1219;
  --color-bg-sidebar: #101924;
  --color-bg-card: #141a22;
  --color-bg-active: #162234;
  --color-border: #1f252e;
  --color-text-primary: #ffffff;
  --color-text-secondary: #9ca3af;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;
  --color-purple: #8b5cf6;
  --color-green: #10b981;
  --color-red: #ef4444;
  --color-orange: #f59e0b;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-main: #0c1219;
    --color-bg-sidebar: #101924;
    --color-bg-card: #141a22;
    --color-bg-active: #162234;
    --color-border: #1f252e;
    --color-text-primary: #ffffff;
    --color-text-secondary: #9ca3af;
  }
}

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

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background-color: var(--color-bg-main);
}

.app-container {
  display: flex;
  height: 100vh;
}

/* Sidebar */
.sidebar {
  width: 236px;
  background-color: var(--color-bg-sidebar);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
}

.sidebar-header {
  padding: 24px 18px;
  border-bottom: 1px solid var(--color-border);
}

.finora-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.finora-logo-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
}

.finora-logo-bar {
  width: 3px;
  background-color: var(--color-purple);
  border-radius: 1px;
}

.finora-logo-bar:nth-child(1) { height: 12px; }
.finora-logo-bar:nth-child(2) { height: 16px; }
.finora-logo-bar:nth-child(3) { height: 20px; }

.finora-logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.finora-tagline {
  font-size: 11px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 16px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}

.nav-item:hover {
  color: var(--color-text-primary);
  background-color: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  color: var(--color-text-primary);
  background-color: var(--color-bg-active);
  border-left-color: var(--color-purple);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar-footer {
  padding: 16px 18px;
  border-top: 1px solid var(--color-border);
}

.sidebar-mountain {
  width: 100%;
  height: 80px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 60,35 110,70 150,20 210,65 260,30 300,100' fill='rgba(255,255,255,0.06)'/%3E%3Cpolygon points='0,100 90,55 140,85 190,45 240,80 300,50 300,100' fill='rgba(255,255,255,0.1)'/%3E%3C/svg%3E") bottom / cover no-repeat,
    linear-gradient(135deg, rgba(139, 92, 246, 0.18) 0%, rgba(16, 185, 129, 0.18) 100%);
  border-radius: 8px;
  margin-bottom: 12px;
  overflow: hidden;
  position: relative;
}

.sidebar-mountain-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  color: rgba(255, 255, 255, 0.85);
}

.sidebar-mountain-icon svg {
  width: 100%;
  height: 100%;
}

.sidebar-quote {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-align: center;
  line-height: 1.4;
}

/* Main Content */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--color-bg-main);
}

.header {
  height: 72px;
  background-color: var(--color-bg-main);
  border-bottom: 1px solid var(--color-border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-search {
  flex: 1;
  max-width: 551px;
}

.search-input {
  width: 100%;
  padding: 8px 16px;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-primary);
  font-size: 14px;
}

.search-input::placeholder {
  color: var(--color-text-secondary);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.notification-bell {
  position: relative;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}

.notification-bell:hover {
  color: var(--color-text-primary);
}

.notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--color-danger);
  border-radius: 50%;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-purple), var(--color-info));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 16px;
}

.user-info {
  text-align: right;
}

.user-name {
  font-size: 14px;
  color: var(--color-text-primary);
  font-weight: 500;
}

.page-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* Dashboard */
.dashboard-greeting {
  margin-bottom: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.greeting-text h1 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--color-text-primary);
}

.greeting-subtext {
  font-size: 14px;
  color: var(--color-text-secondary);
}

.greeting-date {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* Metrics Cards */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.metric-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 13px;
  padding: 24px;
}

.metric-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.metric-title {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.metric-icon svg {
  width: 18px;
  height: 18px;
}

.metric-icon-wealth {
  background-color: #3b5bdb;
  color: #ffffff;
}

.metric-icon-income {
  background-color: #0ca678;
  color: #ffffff;
}

.metric-icon-expense {
  background-color: #7c3a3a;
  color: #ffffff;
}

.metric-icon-savings {
  background: linear-gradient(135deg, #a78bfa, #7c3aed);
  color: #ffffff;
}

.metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.metric-change {
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.metric-change.positive {
  color: var(--color-green);
}

.metric-change.negative {
  color: var(--color-red);
}

.metric-change-arrow {
  font-size: 12px;
}

.metric-subtext {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* Dashboard Grid */
.dashboard-main {
  display: grid;
  grid-template-columns: 1fr 415px;
  gap: 24px;
  margin-bottom: 24px;
}

.dashboard-left {
  display: grid;
  grid-template-rows: auto auto;
  gap: 24px;
}

.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 13px;
  padding: 24px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.card-link {
  font-size: 13px;
  color: var(--color-info);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.card-link:hover {
  color: var(--color-purple);
}

/* Chart Section */
.chart-section {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 24px;
  align-items: flex-start;
}

.chart-amount {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

.period-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.period-selector select {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}

#chart-container {
  width: 100%;
  height: 297px;
  position: relative;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
}

.legend-color {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.legend-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.legend-name {
  color: var(--color-text-secondary);
  font-size: 13px;
}

.legend-value {
  color: var(--color-text-primary);
  font-weight: 700;
  font-size: 16px;
}

/* Transactions Section */
.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.transaction-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.transaction-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 600;
  color: white;
}

.transaction-details {
  flex: 1;
}

.transaction-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.transaction-meta {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.transaction-amount {
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

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

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

/* Right Sidebar */
.dashboard-right {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 24px;
}

/* Saving Goals */
.saving-goals-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.saving-goal-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.saving-goal-image {
  width: 64px;
  height: 64px;
  min-width: 64px;
  background-color: var(--color-bg-main);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.saving-goal-content {
  flex: 1;
}

.saving-goal-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.saving-goal-progress-text {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background-color: var(--color-bg-main);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background-color: var(--color-green);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Shopping List */
.shopping-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shopping-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
}

.shopping-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-info);
}

.shopping-item-label {
  flex: 1;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.shopping-add-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-info);
  cursor: pointer;
  font-weight: 500;
}

/* Due Items */
.due-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.due-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}

.due-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.due-item-details {
  flex: 1;
}

.due-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.due-item-date {
  font-size: 11px;
  color: var(--color-text-secondary);
}

.due-item-amount {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-red);
}

/* Bottom Tip */
.tip-banner {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 13px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.tip-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-warning);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: var(--color-bg-main);
}

.tip-content {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.tip-highlight {
  color: var(--color-text-primary);
  font-weight: 600;
}

.tip-button {
  padding: 8px 16px;
  background-color: var(--color-text-primary);
  color: var(--color-bg-main);
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
  margin-top: 12px;
}

.tip-button:hover {
  opacity: 0.9;
}

/* Alerts */
.alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-green);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.alert-error {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-red);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.alert-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 18px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.alert-close:hover {
  opacity: 1;
}

/* Responsive */
@media (max-width: 1279px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-main {
    grid-template-columns: 1fr;
  }

  .chart-section {
    grid-template-columns: 1fr;
  }

  .dashboard-right {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }

  .dashboard-main {
    grid-template-columns: 1fr;
  }

  .dashboard-right {
    grid-template-columns: 1fr;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    height: auto;
  }

  .page-content {
    padding: 16px;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
  }

  .header {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }

  .header-search {
    max-width: 100%;
  }
}


/* === Auto-generated utility classes (CSP: no inline styles) === */
.u-002bf259 {
    padding: 10px 16px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.u-034ea2a2 {
    font-weight: 600;
    color: var(--color-red);
}

.u-03ec90a9 {
    color: var(--color-text-primary);
    font-weight: 500;
}

.u-04b57f59 {
    padding: 16px;
}

.u-0712f986 {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.u-094a63df {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.u-0959bb4d {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.u-0caeaf90 {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text-primary);
}

.u-0e7e8640 {
    color: var(--color-purple);
    text-decoration: none;
    margin-bottom: 12px;
    display: inline-block;
}

.u-10d7094c {
    width: 80px;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
}

.u-10ea309f {
    font-size: 20px;
    margin-bottom: 4px;
}

.u-11a24acf {
    padding: 16px;
    margin-bottom: 12px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.u-1278d5e3 {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.u-135afca3 {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.u-13ac633e {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.u-15438768 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.u-1551e6d7 {
    font-size: 24px;
}

.u-16ae02f5 {
    font-weight: 600;
    color: var(--color-green);
}

.u-16e97b07 {
    font-size: 11px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.u-184186a8 {
    padding: 6px 12px;
    background-color: transparent;
    color: var(--color-red);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.u-1b362721 {
    padding: 6px 12px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.u-1bd1b665 {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.u-1c12c94d {
    flex: 1;
    padding: 12px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.2s ease;
}

.u-1d5289a0 {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.u-1e0050ba {
    text-align: right;
    padding: 12px;
    font-weight: 600;
}

.u-1f381bf9 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.u-23ac8d90 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.u-24b531c6 {
    cursor: pointer;
}

.u-24d19104 {
    font-size: 12px;
    color: var(--color-text-secondary);
}

.u-252dadc4 {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

.u-257d7a76 {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}

.u-25a14d14 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}

.u-2794bee4 {
    padding: 16px;
    border-bottom: 1px solid var(--color-border);
}

.u-29c50b7c {
    padding: 12px;
    text-align: right;
    color: var(--color-red);
}

.u-2bdee4b2 {
    background-color: var(--color-border);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.u-2e5fdff7 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-2f18103c {
    padding: 10px 20px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.u-2fffe90d {
    width: 120px;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
}

.u-32c16dc4 {
    padding: 20px;
}

.u-3377bb63 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.u-34e7cb46 {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.u-35611ecf {
    padding: 8px 16px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.u-3660341b {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.u-379ce5e6 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
}

.u-37c4c99b {
    padding: 16px;
    margin-bottom: 12px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    gap: 12px;
    align-items: center;
}

.u-381da958 {
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-text-secondary);
}

.u-382b876d {
    margin-bottom: 12px;
    padding: 16px;
    cursor: pointer;
    opacity: 0.7;
}

.u-38c2d642 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-green);
    margin-bottom: 4px;
}

.u-38f68199 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.u-39a23b82 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 8px;
}

.u-3a8d9866 {
    padding: 10px 16px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.u-3c6b2566 {
    font-size: 16px;
    color: var(--color-text-primary);
}

.u-3cb2ce32 {
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text-primary);
}

.u-3df0a395 {
    display: inline;
}

.u-3e53b53c {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.u-4045e393 {
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
    font-weight: 600;
    color: var(--color-text-primary);
}

.u-4513f0ee {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-red);
    margin-bottom: 4px;
}

.u-47fd1f08 {
    text-align: left;
    padding: 12px;
    font-weight: 600;
}

.u-4834a0af {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-red);
}

.u-484eeba0 {
    padding: 16px;
    margin-bottom: 12px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-49cdf874 {
    flex: 1;
}

.u-4c3893ef {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}

.u-4d1e5c7d {
    max-width: 600px;
}

.u-4dc627c1 {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.u-509341c9 {
    width: 12px;
    height: 12px;
    background-color: rgba(139, 92, 246, 0.2);
    border-radius: 2px;
    border-left: 2px solid var(--color-purple);
}

.u-52ae29ad {
    display: flex;
    align-items: start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.u-5466aaf8 {
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-56386c31 {
    min-height: 100px;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

.u-58e548bd {
    display: flex;
    justify-content: space-between;
}

.u-5b195093 {
    width: 60px;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 20px;
}

.u-5c291832 {
    margin-top: 24px;
}

.u-6506ba2f {
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

.u-65ea7bc3 {
    padding: 10px 20px;
    background-color: var(--color-green);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.u-663a1957 {
    padding: 24px;
}

.u-676c711d {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 0;
}

.u-67e4068e {
    font-size: 40px;
    margin-bottom: 12px;
}

.u-6a3ad954 {
    font-size: 10px;
    color: var(--color-text-secondary);
}

.u-6c4143c1 {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-purple);
    margin-bottom: 4px;
}

.u-7002f9ca {
    margin-bottom: 20px;
}

.u-7041819a {
    margin-top: 24px;
    padding: 0 12px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-top: 16px;
    padding-bottom: 0;
}

.u-739524ed {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.u-747bc759 {
    padding: 0 24px 24px;
    background-color: var(--color-border);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.u-75a1f1f9 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-red);
    margin-bottom: 4px;
}

.u-772440ee {
    max-width: 600px;
    margin: 0 auto;
}

.u-77eef419 {
    color: var(--color-text-secondary);
    text-align: center;
    padding: 16px 0;
}

.u-784370cf {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    min-height: 500px;
}

.u-7851dbc0 {
    text-align: right;
}

.u-7985df4c {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.u-7cb8562b {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.u-7f4ee4f3 {
    margin-right: 8px;
}

.u-800a82fa {
    display: flex;
    gap: 12px;
}

.u-8155a649 {
    margin-bottom: 24px;
    padding: 32px;
    text-align: center;
}

.u-82f72969 {
    flex: 1;
    padding: 12px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.u-845264fa {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-purple);
}

.u-87f1b03f {
    margin-bottom: 0;
    cursor: pointer;
}

.u-87f73ab3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.u-884e4895 {
    flex: 1;
    padding: 12px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.u-8949a847 {
    margin-top: 24px;
    padding: 16px;
    background-color: rgba(59, 130, 246, 0.05);
    border-left: 2px solid #3b82f6;
    border-radius: 8px;
}

.u-8988528e {
    font-size: 13px;
    color: var(--color-purple);
    text-decoration: none;
    font-weight: 600;
}

.u-8a6544f4 {
    font-size: 28px;
    font-weight: 700;
}

.u-8aa766ce {
    background-color: var(--color-border);
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

.u-8c754acb {
    padding: 8px 12px;
    color: var(--color-text-secondary);
}

.u-8e3b7f98 {
    padding: 3px 8px;
    background-color: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
    color: var(--color-purple);
    font-size: 11px;
    font-weight: 600;
}

.u-8eeed50f {
    flex: 1;
    overflow-y: auto;
    font-size: 11px;
}

.u-8fcff862 {
    padding: 16px;
    margin-bottom: 12px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-9022e165 {
    padding: 10px 20px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.u-9050fdde {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
    min-height: 100px;
    resize: vertical;
}

.u-91e2ae89 {
    margin-bottom: 32px;
}

.u-948e6d6e {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-9681b7a4 {
    color: var(--color-green);
}

.u-977577a7 {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.u-98a52d12 {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.u-9a127139 {
    font-size: 16px;
    color: var(--color-text-primary);
    font-weight: 600;
    margin-bottom: 12px;
}

.u-9acd8a3b {
    padding: 32px;
    text-align: center;
    color: var(--color-text-secondary);
}

.u-9b187ad7 {
    padding: 10px 20px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.u-9df23c1c {
    border-bottom: 2px solid var(--color-border);
}

.u-9f9b48db {
    flex: 1;
    padding: 12px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.u-a09797e5 {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.u-a0e91507 {
    color: var(--color-text-secondary);
}

.u-a2d59144 {
    padding: 6px 12px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.u-a4903f2f {
    max-width: 500px;
    margin: 0 auto;
}

.u-a898fd7d {
    width: 100%;
    height: 100%;
}

.u-a9de48df {
    padding: 10px 20px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.u-b0fd3b5f {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.u-b1d0abbc {
    font-family: monospace;
    background-color: var(--color-bg-main);
    padding: 12px;
    border-radius: 4px;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.u-b246647c {
    color: var(--color-text-primary);
    cursor: pointer;
    font-size: 14px;
}

.u-b51e9698 {
    font-weight: 600;
    color: var(--color-text-primary);
}

.u-b56181dc {
    overflow-x: auto;
}

.u-b59e4501 {
    padding: 12px;
}

.u-b5f8d99f {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.u-b651d3e0 {
    padding: 24px;
    margin-bottom: 24px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.u-b855de70 {
    margin-bottom: 32px;
    padding: 32px;
}

.u-b899bea0 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.u-b9d9a8e1 {
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    color: var(--color-text-secondary);
}

.u-ba079868 {
    max-width: 600px;
    margin-bottom: 24px;
}

.u-bad75b13 {
    margin-top: 40px;
}

.u-bbea6265 {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-green);
    margin-bottom: 4px;
}

.u-bd9db1cb {
    display: flex;
    align-items: center;
    gap: 8px;
}

.u-be30141d {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 32px;
    font-size: 13px;
}

.u-bf35ad4b {
    cursor: pointer;
    width: 18px;
    height: 18px;
}

.u-bffca66d {
    padding: 12px;
    background-color: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    border-left: 2px solid #3b82f6;
    margin-bottom: 24px;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.u-c0097815 {
    padding: 8px 16px;
    background-color: var(--color-info);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.u-c1e41e5f {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.u-c2714ddf {
    padding: 24px;
    border-bottom: 1px solid var(--color-border);
}

.u-c2ab8a68 {
    display: flex;
    gap: 8px;
    margin-left: 12px;
}

.u-c32a8302 {
    padding: 12px;
    text-align: right;
    color: var(--color-green);
}

.u-c4c9a3d5 {
    padding: 10px 20px;
    background-color: var(--color-info);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.u-c7911a84 {
    padding: 24px;
    border-top: 1px solid var(--color-border);
}

.u-c7c8839b {
    padding: 10px 20px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.u-c8e10618 {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.u-c99c744f {
    flex: 1;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
}

.u-ca81f9ea {
    padding: 20px;
    margin-bottom: 16px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    cursor: pointer;
}

.u-ccd7dd3b {
    margin-bottom: 8px;
}

.u-cd59a7ed {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.u-cfa4bd63 {
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    color: var(--color-text-primary);
}

.u-d11d4154 {
    width: 12px;
    height: 12px;
    background-color: rgba(59, 130, 246, 0.2);
    border-radius: 2px;
}

.u-d148a15e {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.u-d1b9961c {
    padding: 10px 20px;
    background-color: var(--color-purple);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.u-d3277930 {
    margin-bottom: 16px;
}

.u-d4e8a266 {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.u-d506f370 {
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.u-d5f6d0ce {
    color: var(--color-red);
}

.u-d70988e6 {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.u-d8629cfe {
    flex: 1;
    padding: 12px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.u-d901471d {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
}

.u-da739f19 {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}

.u-da9a6571 {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.u-da9ebb26 {
    padding: 10px 20px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.u-db117290 {
    font-weight: 600;
}

.u-db308f6e {
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.u-dc2cb2da {
    margin-bottom: 24px;
}

.u-e03f38d6 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.u-e22b7d52 {
    padding: 6px 12px;
    background-color: transparent;
    color: var(--color-red);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.u-e5452e78 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.u-e54d8b85 {
    padding: 8px 12px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
}

.u-e85f0229 {
    text-align: center;
    font-weight: 600;
    color: var(--color-text-secondary);
    padding: 8px 0;
}

.u-ecb23a03 {
    padding: 20px;
    text-align: center;
}

.u-ed84c075 {
    padding: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.u-ed8b9255 {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
}

.u-edebc34e {
    margin-bottom: 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.u-ee9a7f22 {
    color: var(--color-text-primary);
}

.u-eecb9052 {
    padding: 20px;
    margin-bottom: 16px;
    background-color: var(--color-bg-main);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.u-f2099010 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.u-f486ab2e {
    padding: 6px 12px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
}

.u-f5345a4d {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.u-f5b1b8df {
    width: 100%;
    padding: 10px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-size: 14px;
    min-height: 80px;
    resize: vertical;
}

.u-f726963c {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.u-fe2bcb6e {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.u-fed0e88a {
    padding: 32px;
}

.u-ff3c400f {
    padding: 8px 12px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text-primary);
    font-size: 13px;
}

/* === Conditional-color helpers (ersetzt Jinja-Inline-Styles) === */
.text-positive { color: var(--color-green); }
.text-negative { color: var(--color-red); }

.balance-large {
    font-size: 48px;
    font-weight: 700;
}

.balance-medium {
    font-size: 28px;
    font-weight: 700;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.balance-small {
    font-size: 24px;
    font-weight: 700;
}

.balance-inline {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}
.badge-sent { background-color: rgba(16, 185, 129, 0.1); color: var(--color-green); }
.badge-pending { background-color: rgba(139, 92, 246, 0.1); color: var(--color-purple); }
.badge-failed { background-color: rgba(239, 68, 68, 0.1); color: var(--color-red); }

.item-checked {
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: line-through;
}
.item-unchecked {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Dynamische DB-/Berechnungswerte werden per data-Attribut + main.js gesetzt,
   nicht per inline style (CSP style-src 'self'). */
.dynamic-color-swatch {
    display: inline-block;
}
.progress-fill {
    width: 0%; /* wird via JS aus data-progress gesetzt */
}

.transaction-icon-income { background-color: #10b981; }
.transaction-icon-expense { background-color: #ef4444; }

.trend-cell {
    padding: 12px;
    text-align: right;
    font-weight: 600;
}

.is-faded {
    opacity: 0.7;
}

[data-navigate] {
    cursor: pointer;
}

.budget-progress-bar {
    height: 100%;
    width: 0%; /* wird via JS aus data-budget-percent gesetzt */
    transition: width 0.3s ease;
}

.notif-item {
    padding: 16px;
    margin-bottom: 12px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-purple);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--color-bg-main);
}
.notif-type-budget_alert { border-left-color: var(--color-red); }
.notif-type-goal_alert { border-left-color: var(--color-green); }
.notif-unread {
    opacity: 1;
    background-color: rgba(139, 92, 246, 0.05);
}
.notif-read {
    opacity: 0.7;
}

.goal-progress-bar {
    background-color: var(--color-purple);
    height: 100%;
    width: 0%; /* wird via JS aus data-progress gesetzt */
    transition: width 0.3s ease;
}
.goal-progress-overdue {
    background-color: var(--color-red);
}

.calendar-day {
    min-height: 100px;
    padding: 8px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}
.calendar-day-today {
    background-color: rgba(139, 92, 246, 0.1);
    border-color: var(--color-purple);
}
.calendar-day-number {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}
.calendar-day-number-today {
    color: var(--color-purple);
}
.calendar-event {
    padding: 4px;
    margin-bottom: 2px;
    border-radius: 4px;
    color: var(--color-text-secondary);
}
.calendar-event-recurring-pending { background-color: rgba(139, 92, 246, 0.2); }
.calendar-event-recurring-other { background-color: rgba(107, 114, 128, 0.2); }
.calendar-event-goal { background-color: rgba(59, 130, 246, 0.2); }
.calendar-event-income { border-left: 2px solid var(--color-green); }
.calendar-event-expense { border-left: 2px solid var(--color-red); }

/* === Kategorien-Verwaltung === */
.category-section {
    margin-bottom: 24px;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    border-bottom: 1px solid var(--color-border);
}
.category-item:last-child {
    border-bottom: none;
}

.category-item-archived {
    opacity: 0.6;
}

.category-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.category-name {
    flex: 1;
    font-weight: 600;
    color: var(--color-text-primary);
}

.category-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.category-action-link {
    padding: 6px 12px;
    background-color: var(--color-border);
    color: var(--color-text-primary);
    border-radius: 6px;
    font-size: 13px;
    text-decoration: none;
}

.category-action-button {
    padding: 6px 12px;
    background-color: transparent;
    border: 1px solid var(--color-red);
    color: var(--color-red);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.category-empty {
    color: var(--color-text-secondary);
    text-align: center;
    padding: 16px 0;
}

.category-color-input {
    width: 60px;
    height: 40px;
    padding: 2px;
    background-color: var(--color-bg-main);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
}