:root { --ftcb-accent:#4361ee;--ftcb-accent-deep:#3a56d4;--ftcb-accent-light:#e6f0ff;--ftcb-body-text:#2b2d42;--ftcb-header-text:#1e293b;--ftcb-bg-color:#f8f9fa;--ftcb-white:#ffffff;--ftcb-border-color:#e0e3e7;--ftcb-danger:#e74c3c;--ftcb-success:#2ecc71;--ftcb-success-deep:#27ae60;--ftcb-border-radius:5px;--ftcb-box-shadow:0 4px 12px rgba(0, 0, 0, 0.05);--ftcb-transition:all 0.2s ease;--ftcb-container-width:900px;} * { box-sizing:border-box;margin:0;padding:0;} .ftcb-main-interface { box-sizing:border-box;position:relative;width:100%;padding:25px;border:1px solid var(--ftcb-border-color);border-radius:var(--ftcb-border-radius);box-shadow:var(--ftcb-box-shadow);} .ftcb-container { max-width:var(--ftcb-container-width);margin:0 auto;padding:35px;background-color:var(--ftcb-bg-color);border-radius:var(--ftcb-border-radius);} .ftcb-title { font-size:clamp(1.2rem, 2vw, 1.6rem);color:var(--ftcb-header-text);text-align:center;margin-bottom:5px;font-weight:700;} .ftcb-subtitle { text-align:center;color:#7f8c8d;margin-bottom:30px;font-size:16px;} .ftcb-card { border:1px solid var(--ftcb-border-color);border-radius:var(--ftcb-border-radius);padding:25px;margin-bottom:25px;} .ftcb-card h3 { font-size:clamp(1rem, 1.6vw, 1.5rem);margin-bottom:20px;color:var(--ftcb-header-text);} .ftcb-form-group { margin-bottom:20px;} .ftcb-form-group label { display:block;margin-bottom:8px;font-weight:500;color:var(--ftcb-header-text);text-transform:capitalize;font-size:16px;} .ftcb-form-group input[type="number"], .ftcb-form-group input[type="text"] { width:100%;padding:12px 15px !important;border:1px solid var(--ftcb-border-color);border-radius:var(--ftcb-border-radius);font-size:16px;transition:var(--ftcb-transition);} .ftcb-form-group select { width:100%;min-height:50px;padding:0 15px !important;border:1px solid var(--ftcb-border-color);border-radius:var(--ftcb-border-radius);font-size:16px;transition:var(--ftcb-transition);background-color:var(--ftcb-white);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;} .ftcb-form-group select:focus { border-color:var(--ftcb-accent);outline:none;box-shadow:0 0 0 2px var(--ftcb-accent-light);} .ftcb-form-group input[type="number"]:focus, .ftcb-form-group input[type="text"]:focus { border-color:var(--ftcb-accent);outline:none;box-shadow:0 0 0 2px var(--ftcb-accent-light);} .ftcb-hint { color:#7f8c8d;font-size:13px;display:block;margin-top:5px;} .ftcb-action-buttons { display:flex;justify-content:center;gap:15px;margin-top:20px;flex-wrap:wrap;} .ftcb-btn-primary, .ftcb-btn-secondary, .ftcb-remove-income-source { padding:12px 25px !important;border:none;border-radius:var(--ftcb-border-radius);font-size:16px !important;cursor:pointer;transition:var(--ftcb-transition);text-wrap:nowrap;max-width:fit-content;} .ftcb-download-csv-btn, .ftcb-add-income-source { display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--ftcb-accent) !important;color:var(--ftcb-white) !important;} .ftcb-download-csv-btn:hover, .ftcb-add-income-source:hover { background-color:var(--ftcb-accent-deep) !important;} .ftcb-print-btn { display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--ftcb-success) !important;color:var(--ftcb-white) !important;} .ftcb-print-btn:hover { background-color:var(--ftcb-success-deep) !important;} .ftcb-reset-btn, .ftcb-remove-income-source { display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--ftcb-danger) !important;color:var(--ftcb-white) !important;} .ftcb-reset-btn:hover { background-color:#c0392b !important;} .ftcb-btn-secondary { background-color:#ecf0f1;color:var(--ftcb-header-text);} .ftcb-btn-secondary:hover { background-color:#d5dbdb;} #ftcb-add-income-source { width:100%;margin-top:15px;} .ftcb-results-section { margin-top:20px;} .ftcb-result-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:25px;} .ftcb-result-item { padding:15px;background-color:#f8f9fa;border-radius:var(--ftcb-border-radius);} .ftcb-result-item.ftcb-highlight { background-color:var(--ftcb-accent-light) !important;border-left:4px solid var(--ftcb-accent) !important;} .ftcb-result-label { display:block;font-weight:600;margin-bottom:5px;color:var(--ftcb-header-text);} .ftcb-result-value { font-size:18px;font-weight:700;color:var(--ftcb-success-deep) !important;} .ftcb-notice { padding:15px;background-color:#fff8e1;border-left:4px solid #ffc107;margin-bottom:15px;border-radius:var(--ftcb-border-radius);} .ftcb-notice.ftcb-deadline { background-color:var(--ftcb-accent-light) !important;border-left:4px solid var(--ftcb-accent) !important;} .ftcb-loading-indicator { text-align:center;padding:40px;} .ftcb-spinner { border:5px solid #f3f3f3;border-top:5px solid var(--ftcb-accent);border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin:0 auto 20px;} @keyframes spin { 0% { transform:rotate(0deg);} 100% { transform:rotate(360deg);} } .ftcb-chart-container { margin:30px 0;position:relative;height:300px;} .ftcb-action-buttons { display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;} .ftcb-action-buttons button { flex:1;min-width:150px;} @media (max-width:768px) { .ftcb-main-interface { padding:15px;} .ftcb-container { padding:15px;} .ftcb-result-grid { grid-template-columns:1fr;} .ftcb-action-buttons { flex-direction:column;} .ftcb-action-buttons button, .ftcb-add-income-source, .ftcb-remove-income-source { min-width:100%;text-wrap:wrap;} .ftcb-income-source { display:flex;flex-direction:column;} .ftcb-form-group { margin-bottom:15px;} } @media (max-width:500px) { .ftcb-main-interface { padding:10px;} .ftcb-container { padding:10px;} } .ftcb-income-source { margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid #eee;} .ftcb-remove-income-source { background-color:var(--ftcb-danger);color:white;padding:5px 10px;font-size:14px;margin-top:10px;} .ftcb-remove-income-source:hover { background-color:#c0392b;} .ftcb-result-item.ftcb-commission { background-color:#f3e5f5;border-left:4px solid #9b59b6;}