:root {

       --primary: #7c3aed;
       --primary-light: #9333ea;

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

       --bg: #f4f5f7;

       --text: #111827;
       --muted: #6b7280;
   }

   * {
       box-sizing: border-box;
   }

   body {

       background: var(--bg);

       font-family:
           Inter,
           -apple-system,
           BlinkMacSystemFont,
           sans-serif;

       color: var(--text);

       margin: 0;

       -webkit-tap-highlight-color: transparent;
   }

   .app-container {

       padding: 16px;
       padding-bottom: 120px;
   }

   /* HEADER */

   .app-header {

       background:
           linear-gradient(135deg,
               #6d28d9,
               #9333ea);

       color: white;

       padding: 28px 22px 85px;

       border-radius: 0 0 34px 34px;

       margin:
           -16px -16px 20px -16px;

       position: relative;

       overflow: hidden;
   }

   .app-header .btn {

       position: relative;

       z-index: 10;
   }

   .app-header::after {

       content: '';

       position: absolute;

       width: 250px;
       height: 250px;

       background: rgba(255, 255, 255, .08);

       border-radius: 50%;

       top: -100px;
       right: -100px;
   }

   .welcome {

       font-size: 13px;

       opacity: .8;
   }

   .app-title {

       font-size: 28px;

       font-weight: 800;

       margin-top: 4px;
   }

   /* BALANCE */

   .balance-card {

       background: rgba(255, 255, 255, .92);

       backdrop-filter: blur(10px);

       border-radius: 28px;

       padding: 24px;

       margin-top: -55px;

       box-shadow:
           0 12px 32px rgba(0, 0, 0, .08);

       border: 1px solid rgba(255, 255, 255, .4);

       transition: .25s;
   }

   .balance-card:hover {
       transform: translateY(-2px);
   }

   .balance-title {

       color: var(--muted);

       font-size: 14px;
   }

   .balance-value {

       font-size: 42px;

       font-weight: 800;

       letter-spacing: -1px;

       margin-top: 6px;
   }

   .money-pos {

       color: var(--success);

       font-weight: 700;
   }

   .money-neg {

       color: var(--danger);

       font-weight: 700;
   }

   /* CARDS */

   .card {

       border: none !important;

       border-radius: 28px !important;

       box-shadow:
           0 8px 24px rgba(0, 0, 0, .05);

       transition: .25s;

       overflow: hidden;
   }

   .card:hover {
       transform: translateY(-2px);
   }

   .card-body {
       padding: 22px;
   }

   /* LISTA */

   .transaction-card {

       background: white;

       border-radius: 22px;

       padding: 16px;

       margin-bottom: 14px;

       transition: .25s;
   }

   .transaction-card:active {
       transform: scale(.98);
   }

   .cat-icon {

       width: 52px;
       height: 52px;

       border-radius: 18px;

       background: #f3e8ff;

       color: var(--primary);

       display: flex;

       align-items: center;

       justify-content: center;

       font-size: 18px;
   }

   .small-muted {

       color: var(--muted);

       font-size: 13px;
   }

   .badge-cat {

       background: #f3f4f6;

       color: #374151;

       padding: 8px 12px;

       border-radius: 12px;

       font-weight: 600;
   }

   /* TABLE */

   .table td,
   .table th {

       vertical-align: middle;
   }

   .table tbody tr {

       transition: .2s;
   }

   .table tbody tr:hover {

       background: #faf5ff;
   }

   /* INPUTS */

   .form-control,
   .form-select {

       border-radius: 18px;

       min-height: 54px;

       border: 1px solid #e5e7eb;

       box-shadow: none !important;

       padding-inline: 16px;
   }

   .form-control:focus,
   .form-select:focus {

       border-color: var(--primary-light);

       box-shadow:
           0 0 0 4px rgba(147, 51, 234, .12) !important;
   }

   /* BUTTONS */

   .btn {

       border-radius: 16px;

       min-height: 48px;

       font-weight: 600;
   }

   .btn-primary {

       background: linear-gradient(135deg,
               #7c3aed,
               #9333ea);

       border: none;
   }

   .btn-primary:hover {
       opacity: .95;
   }

   /* FAB */

   .fab {

       position: fixed;

       right: 22px;
       bottom: 90px;

       width: 68px;
       height: 68px;

       border-radius: 24px;

       background:
           linear-gradient(135deg,
               #7c3aed,
               #9333ea);

       color: white;

       border: none;

       font-size: 28px;

       box-shadow:
           0 14px 28px rgba(124, 58, 237, .35);

       z-index: 999;

       transition: .25s;
   }

   .fab:hover {

       transform: scale(1.05);
   }

   /* BOTTOM NAV */

   .bottom-nav {

       position: fixed;

       bottom: 0;
       left: 0;

       width: 100%;

       background: rgba(255, 255, 255, .95);

       backdrop-filter: blur(10px);

       display: flex;

       justify-content: space-around;

       padding: 14px 0 18px;

       box-shadow:
           0 -4px 16px rgba(0, 0, 0, .05);

       z-index: 998;
   }

   .bottom-nav a {

       color: #777;

       text-decoration: none;

       font-size: 13px;

       display: flex;

       flex-direction: column;

       align-items: center;

       gap: 4px;
   }

   .bottom-nav a.active {

       color: var(--primary);
   }

   /* MODAL */

   .modal-content {

       border: none;

       border-radius: 30px;

       overflow: hidden;

       box-shadow:
           0 20px 50px rgba(0, 0, 0, .18);
   }

   .modal-header {

       border: none;

       padding: 24px 24px 10px;
   }

   .modal-title {

       font-weight: 800;
   }

   .modal-body {

       padding: 24px;
   }

   .modal-footer {

       border: none;

       padding: 0 24px 24px;
   }

   .modal-icon {

       width: 60px;
       height: 60px;

       border-radius: 20px;

       background: #f3e8ff;

       color: var(--primary);

       display: flex;

       align-items: center;

       justify-content: center;

       margin-bottom: 14px;

       font-size: 24px;
   }

   /* EMPTY */

   .empty-state {

       padding: 60px 20px;

       text-align: center;
   }

   .empty-icon {

       width: 90px;
       height: 90px;

       border-radius: 28px;

       background: #ede9fe;

       color: var(--primary);

       margin: auto auto 18px;

       display: flex;

       align-items: center;

       justify-content: center;

       font-size: 34px;
   }

   canvas {

       max-height: 260px;
   }

   @media(min-width:768px) {

       .app-container {

           max-width: 1200px;

           margin: auto;
       }
   }

   @media(max-width:768px) {

       .balance-value {
           font-size: 34px;
       }

       .card-body {
           padding: 18px;
       }
   }

   .table {

       border-collapse: separate;
       border-spacing: 0 10px;
   }

   .table thead th {

       border: none;

       color: #6b7280;

       font-size: 13px;

       font-weight: 600;
   }

   .table tbody tr {

       background: white;

       box-shadow:
           0 4px 12px rgba(0, 0, 0, .04);

       border-radius: 16px;

       transition: .2s;
   }

   .table tbody tr:hover {

       transform: translateY(-1px);

       background: #faf5ff;
   }

   .table td {

       border: none;

       padding: 18px 14px;
   }