.charges-page{max-width: 1400px;margin: 0 auto;padding: 20px;}.page-header{margin-bottom: 24px;}.page-header h1{font-size: var(--font-size-5xl,28px);font-weight: var(--font-weight-semibold,600);color: var(--color-text,var(--color-secondary));margin: 0;}.view-controls{display: flex;gap: 16px;margin-bottom: 16px;flex-wrap: wrap;}.control-group{display: flex;align-items: center;gap: var(--spacing-sm);background: var(--color-white);padding: 10px 16px;border-radius: 10px;box-shadow: var(--shadow-card,0 1px 3px rgba(0,0,0,0.08));}.control-label{font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-medium,500);color: var(--color-text-secondary);white-space: nowrap;}.control-select{border: 1px solid var(--color-border);background: var(--color-background);padding: var(--spacing-sm) 12px;border-radius: var(--border-radius-sm);font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-medium,500);color: var(--color-text);cursor: pointer;outline: none;transition: all 0.2s;}.control-select:hover,.control-select:focus{border-color: var(--color-primary);background: var(--color-white);}.filters-panel{background: var(--color-white);border-radius: 12px;padding: 20px;margin-bottom: 24px;box-shadow: var(--shadow-card,0 1px 3px rgba(0,0,0,0.08));}.filters-grid{display: grid;grid-template-columns: repeat(auto-fit,minmax(200px,1fr));gap: 12px;margin-bottom: 16px;}.filter-compact{display: flex;align-items: center;gap: var(--spacing-sm);background: var(--color-background-secondary,var(--color-background));padding: var(--spacing-sm) 12px;border-radius: var(--border-radius-sm);}.filter-icon{font-size: var(--font-size-lg,18px);flex-shrink: 0;}.filter-compact input,.filter-compact select{flex: 1;border: none;background: transparent;padding: 4px;font-size: var(--font-size-sm,14px);outline: none;}.filter-compact.amount-range{display: flex;gap: 4px;}.filter-compact.amount-range input{width: 80px;}.filter-compact .separator{color: var(--color-text-muted);font-size: var(--font-size-xs,12px);}.filter-actions-wrapper{display: flex;flex-direction: column;gap: 12px;}.filter-actions-main{display: flex;align-items: center;gap: 12px;flex-wrap: wrap;}.export-inline{margin-left: auto;}.charges-grid{display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;margin-bottom: 24px;}.charge-card-wrapper{position: relative;}.charge-card{background: var(--color-white);border-radius: 14px;padding: 20px;box-shadow: var(--shadow-card,0 2px 8px rgba(0,0,0,0.06),0 1px 3px rgba(0,0,0,0.04));transition: var(--transition-default,all 0.2s);border: 1px solid var(--color-divider-on-light,rgba(0,0,0,0.15));border-left: 5px solid var(--color-primary);text-decoration: none;color: inherit;display: block;cursor: pointer;position: relative;overflow: hidden;}.charge-card::before{content: '';position: absolute;top: 0;left: 0;width: 5px;height: 100%;background: linear-gradient(180deg,var(--color-primary) 0%,transparent 100%);opacity: 0.3;}.charge-card.rental{border-left-color: var(--color-success);}.charge-card.rental::before{background: linear-gradient(180deg,var(--color-success) 0%,transparent 100%);}.charge-card:hover{transform: translateY(-3px);box-shadow: var(--shadow-modal-sm,0 8px 20px rgba(0,0,0,0.1),0 3px 6px rgba(0,0,0,0.06));border-color: var(--color-divider-on-light,rgba(0,0,0,0.15));text-decoration: none;color: inherit;}.charge-card__header{display: flex;align-items: center;gap: 14px;margin-bottom: 16px;padding-bottom: 14px;border-bottom: 2px solid var(--color-background);}.charge-card__icon{font-size: var(--font-size-4xl,26px);width: 52px;height: 52px;display: flex;align-items: center;justify-content: center;background: var(--color-primary-bg-gradient,linear-gradient(135deg,rgba(102,126,234,0.1) 0%,rgba(102,126,234,0.05) 100%));border-radius: 12px;border: 1px solid var(--color-primary-15,rgba(102,126,234,0.15));flex-shrink: 0;}.charge-card.rental .charge-card__icon{background: var(--color-success-bg-gradient,linear-gradient(135deg,rgba(16,185,129,0.1) 0%,rgba(16,185,129,0.05) 100%));border-color: var(--color-success-15,rgba(16,185,129,0.15));}.card-date{flex: 1;display: flex;flex-direction: column;gap: 2px;}.card-date .date{font-size: var(--font-size-base,16px);font-weight: var(--font-weight-bold,700);color: var(--color-text);letter-spacing: -0.01em;}.card-date .period{font-size: var(--font-size-xs,12px);font-weight: var(--font-weight-medium,500);color: var(--color-text-muted);letter-spacing: -0.01em;}.card-amount{font-size: var(--font-size-2xl,22px);font-weight: var(--font-weight-bold,700);color: var(--color-primary);text-align: right;line-height: 1.2;}.charge-card.rental .card-amount{color: var(--color-success);}.card-body{display: flex;flex-direction: column;gap: 10px;}.info-row{display: flex;align-items: center;gap: 10px;font-size: var(--font-size-sm,14px);padding: var(--spacing-sm) var(--spacing-sm);background: var(--color-background);border-radius: var(--border-radius-sm);transition: background 0.15s;}.info-row:hover{background: var(--color-surface-subtle);}.info-row .label{font-size: var(--font-size-lg,18px);width: 28px;height: 28px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;background: var(--color-white);border-radius: var(--border-radius-sm);}.info-row .value{flex: 1;color: var(--color-text);font-weight: var(--font-weight-medium,500);font-size: var(--font-size-sm,14px);line-height: 1.4;}.empty-state{grid-column: 1 / -1;text-align: center;padding: 80px 20px;background: var(--color-white);border-radius: 14px;border: 2px dashed var(--color-border);}.empty-icon{font-size: var(--font-size-9xl,64px);margin-bottom: 20px;opacity: 0.4;filter: grayscale(0.3);}.empty-text{font-size: var(--font-size-base,16px);font-weight: var(--font-weight-semibold,600);color: var(--color-text-muted);letter-spacing: -0.01em;}.total-cards-wrapper{display: flex;gap: 16px;margin: 16px 0 24px;flex-wrap: wrap;align-items: stretch;}.total-cards-wrapper>.amount-card-unified{flex: 1;min-width: 280px;}.amount-card-content{display: flex;flex-direction: column;gap: 12px;width: 100%;}.amount-card-unified .amount-card-label{font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-semibold,600);opacity: 0.9;text-transform: uppercase;letter-spacing: 0.05em;}.amount-card-unified .amount-card-value{font-size: var(--font-size-4xl,26px);font-weight: var(--font-weight-bold,700);line-height: 1.2;}.total-amounts-group{display: flex;flex-direction: column;align-items: flex-end;gap: var(--spacing-sm);}.total-amount-small{font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-bold,700);line-height: 1.4;padding: 2px 0;}.grouped-charges{margin-bottom: 24px;}.charge-group{background: var(--color-white);border-radius: 12px;margin-bottom: 16px;box-shadow: var(--shadow-card,0 1px 3px rgba(0,0,0,0.08));overflow: hidden;}.group-header{display: flex;align-items: center;gap: 16px;padding: 16px 20px;background: var(--color-background);cursor: pointer;transition: background 0.2s;border-bottom: 1px solid var(--color-border);}.group-header:hover{background: var(--color-surface-subtle);}.group-title{flex: 1;font-size: var(--font-size-base,16px);font-weight: var(--font-weight-semibold,600);color: var(--color-text);}.group-count{font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-medium,500);color: var(--color-text-muted);margin-left: var(--spacing-sm);}.group-total{font-size: var(--font-size-lg,18px);font-weight: var(--font-weight-bold,700);color: var(--color-primary);}.group-arrow{font-size: var(--font-size-sm,14px);color: var(--color-text-muted);transition: transform 0.3s;}.charge-group.open .group-arrow{transform: rotate(180deg);}.group-content{max-height: 0;overflow: hidden;transition: max-height 0.3s ease-out;}.charge-group.open .group-content{max-height: 10000px;padding: 16px;}.card-amount{text-align: right;display: flex;flex-direction: column;align-items: flex-end;gap: 3px;}.card-amount .converted{display: block;font-size: var(--font-size-xl,20px);font-weight: var(--font-weight-bold,700);color: var(--color-primary);line-height: 1.2;}.charge-card.rental .card-amount .converted{color: var(--color-success);}.card-amount .original-small{display: block;font-size: var(--font-size-xs,12px);font-weight: var(--font-weight-semibold,600);color: var(--color-text-muted);letter-spacing: -0.01em;}@media (max-width: 767px){.charges-grid{grid-template-columns: 1fr;}.filters-grid{grid-template-columns: 1fr;}.filter-actions-main{flex-direction: column;align-items: stretch;}.export-inline{margin-left: 0;width: 100%;}.total-summary-card{padding: 20px;}.total-summary-separator{margin: 0 -20px var(--spacing-md) -20px;}.breakdown-item{flex-direction: column;align-items: flex-start;gap: 4px;}.total-summary-main{flex-direction: column;align-items: flex-start;gap: var(--spacing-sm);}.total-summary-value{font-size: var(--font-size-2xl,22px);}.total-summary-converted{font-size: var(--font-size-lg,18px);}}.currency-secondary{font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-medium,500);color: var(--color-white-alpha-80,rgba(255,255,255,0.8));margin-left: var(--spacing-sm);}.amount-card-secondary .currency-secondary{color: var(--color-text-muted);}.total-summary-card{display: flex;flex-direction: column;gap: 0;background: var(--color-white);color: var(--color-text);padding: 24px 28px;border-radius: 12px;border: 1px solid var(--color-border);box-shadow: var(--shadow-sm,0 1px 3px rgba(0,0,0,0.06));margin: 20px 0 28px;}.total-summary-breakdown{display: flex;flex-direction: column;gap: 10px;padding-bottom: 20px;}.breakdown-item{display: flex;justify-content: space-between;align-items: baseline;gap: 20px;}.breakdown-amount{font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-bold,700);color: var(--color-text);}.breakdown-converted{font-size: var(--font-size-sm,14px);font-weight: var(--font-weight-semibold,600);color: var(--color-text-muted);}.total-summary-separator{height: 2px;background: var(--color-border);margin: 0 -28px var(--spacing-lg) -28px;}.total-summary-main{display: flex;justify-content: space-between;align-items: baseline;gap: 20px;}.total-summary-value{font-size: var(--font-size-4xl,26px);font-weight: var(--font-weight-bold,700);line-height: 1.1;letter-spacing: -0.02em;color: var(--color-text);}.total-summary-converted{font-size: var(--font-size-xl,20px);font-weight: var(--font-weight-bold,700);color: var(--color-text-secondary);letter-spacing: -0.01em;}