:root {
  --bg-color: #f5f7fb;
  --surface-color: #ffffff;
  --text-color: #1f2937;
  --secondary-text: #6b7280;

  --primary-color: #2563eb;
  --primary-hover: #1d4ed8;

  --danger-color: #dc2626;
  --success-color: #16a34a;

  --border-color: #e5e7eb;

  --shadow:
    0 4px 12px rgba(0, 0, 0, 0.08);

  --radius: 14px;

  --transition:
    0.25s ease;
}


/* Dark theme */

body.dark {

  --bg-color: #111827;
  --surface-color: #1f2937;
  --text-color: #f9fafb;
  --secondary-text: #9ca3af;

  --border-color: #374151;

  --shadow:
    0 4px 14px rgba(0, 0, 0, 0.35);
}



/* Reset */

* {
  box-sizing: border-box;
}


html,
body {

  margin: 0;
  padding: 0;

  min-height: 100%;

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--bg-color);

  color: var(--text-color);

  transition:
    background var(--transition),
    color var(--transition);
}



button,
input,
select {

  font: inherit;

}



/* Header */

.app-header {

  position: sticky;

  top: 0;

  z-index: 10;

  background:
    var(--surface-color);

  border-bottom:
    1px solid var(--border-color);

  box-shadow:
    var(--shadow);

}


.header-content {

  max-width: 1100px;

  margin: auto;

  padding:
    16px 20px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

}


.header-content h1 {

  margin: 0;

  font-size:
    1.6rem;

}



/* Layout */

.container {

  max-width:
    1100px;

  margin:
    30px auto;

  padding:
    0 20px;

  display:
    flex;

  flex-direction:
    column;

  gap:
    20px;

}



/* Cards */

.card {

  background:
    var(--surface-color);

  border:
    1px solid var(--border-color);

  border-radius:
    var(--radius);

  padding:
    20px;

  box-shadow:
    var(--shadow);

  animation:
    fade-in .3s ease;

}



.section-header {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin-bottom:
    15px;

}


.section-header h2 {

  margin:
    0;

  font-size:
    1.15rem;

}



/* Buttons */

button,
.secondary-button {

  border:
    none;

  cursor:
    pointer;

  border-radius:
    10px;

  padding:
    10px 16px;

  transition:
    transform .15s ease,
    background .15s ease;

}



button:hover,
.secondary-button:hover {

  transform:
    translateY(-1px);

}



.primary-button {

  background:
    var(--primary-color);

  color:
    white;

}


.primary-button:hover {

  background:
    var(--primary-hover);

}



.secondary-button {

  background:
    transparent;

  border:
    1px solid var(--border-color);

  color:
    var(--text-color);

}



.danger-button {

  background:
    var(--danger-color);

  color:
    white;

}



.icon-button {

  width:
    42px;

  height:
    42px;

  padding:
    0;

  border-radius:
    50%;

  background:
    transparent;

  font-size:
    1.2rem;

}



/* Lists */

.list {

  display:
    flex;

  flex-direction:
    column;

  gap:
    10px;

}



.list-item {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    12px;

  border:
    1px solid var(--border-color);

  border-radius:
    10px;

}



.list-item:hover {

  background:
    rgba(128,128,128,.05);

}



/* Empty state */

.empty-state {

  text-align:
    center;

  padding:
    30px;

  color:
    var(--secondary-text);

}



/* Balance */

.balance-positive {

  color:
    var(--success-color);

  font-weight:
    700;

}



.balance-negative {

  color:
    var(--danger-color);

  font-weight:
    700;

}



/* Tables */

.table-wrapper {

  overflow-x:
    auto;

}


table {

  width:
    100%;

  border-collapse:
    collapse;

}


th,
td {

  padding:
    12px;

  text-align:
    left;

  border-bottom:
    1px solid var(--border-color);

}



/* Actions */

.actions {

  display:
    flex;

  gap:
    10px;

  flex-wrap:
    wrap;

}


.file-button {

  display:
    inline-flex;

  align-items:
    center;

}



/* Modal */

.modal-overlay {

  position:
    fixed;

  inset:
    0;

  background:
    rgba(0,0,0,.45);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  z-index:
    100;

}



.modal {

  width:
    min(450px,90%);

  background:
    var(--surface-color);

  color:
    var(--text-color);

  border-radius:
    var(--radius);

  padding:
    25px;

  box-shadow:
    var(--shadow);

}



.form-group {

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;

  margin-bottom:
    15px;

}



input,
select {

  padding:
    10px;

  border-radius:
    8px;

  border:
    1px solid var(--border-color);

  background:
    var(--surface-color);

  color:
    var(--text-color);

}



/* Animations */

@keyframes fade-in {

  from {

    opacity:
      0;

    transform:
      translateY(5px);

  }


  to {

    opacity:
      1;

    transform:
      translateY(0);

  }

}



/* Mobile */

@media(max-width:600px) {


  .container {

    margin-top:
      15px;

    padding:
      0 12px;

  }


  .section-header {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      10px;

  }


  .section-header button {

    width:
      100%;

  }


  .card {

    padding:
      15px;

  }

}