.input-wrap .suffix,
    .expense-row .input-wrap .suffix {
      right: 14px;
      padding-left: 8px;
      background: #fff;
      text-align: right;
    }

.expense-row .input-wrap input[type="number"] {
      padding-right: 72px;
    }

.grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }

.expense-row {
      display: grid;
      grid-template-columns: 1.5fr 1fr auto;
      gap: 10px;
      margin-bottom: 10px;
      align-items: center;
    }

.expense-row input {
      padding-right: 13px;
    }

.remove-btn,
    .add-btn {
      border: 0;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      transition: transform .15s, opacity .15s;
    }

.remove-btn:hover,
    .add-btn:hover {
      transform: translateY(-1px);
    }

.remove-btn {
      width: 42px;
      height: 42px;
      background: var(--danger-soft);
      color: var(--danger);
      font-size: 20px;
    }

.add-btn {
      margin-top: 6px;
      padding: 11px 15px;
      background: var(--primary-soft);
      color: var(--primary);
    }

.formula {
      margin-top: 18px;
      padding: 14px;
      border-radius: 12px;
      background: #f8fafc;
      border: 1px dashed #cbd5e1;
      color: #475569;
      font-size: 13px;
    }

.result-card {
      overflow: hidden;
    }

.allocation {
      margin: 18px 0 22px;
    }

.bar {
      display: flex;
      height: 30px;
      overflow: hidden;
      border-radius: 999px;
      background: #e5e7eb;
      border: 1px solid #dbe2ea;
    }

.bar > div {
      min-width: 0;
      transition: width .35s ease;
    }

.bar-daily { background: #94a3b8; }

.bar-safe { background: var(--safe); }

.bar-planned { background: var(--planned); }

.bar-invest { background: var(--primary); }

.legend {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 16px;
      margin-top: 14px;
    }

.legend-item {
      display: grid;
      grid-template-columns: 10px 1fr auto;
      gap: 8px;
      align-items: center;
      font-size: 13px;
    }

.dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

.legend-item .name { color: var(--muted); }

.legend-item .amount { font-weight: 800; }

.breakdown {
      border-top: 1px solid var(--line);
      padding-top: 18px;
    }

.breakdown-row {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 0;
      border-bottom: 1px solid #f1f5f9;
    }

.breakdown-row:last-child {
      border-bottom: 0;
    }

.breakdown-row span:first-child {
      color: var(--muted);
    }

.breakdown-row strong {
      text-align: right;
    }

.note {
      margin-top: 18px;
      padding: 14px;
      border-radius: 12px;
      background: #f8fafc;
      color: #475569;
      font-size: 13px;
    }

.planned-list {
      margin-top: 10px;
      padding-left: 18px;
      color: var(--muted);
      font-size: 13px;
    }