.cfd-app-root,.cfd-shared-body{
    --cfd-bg:#0B0F14;--cfd-surface:#131920;--cfd-surface-2:#1A2230;--cfd-surface-3:#222D3D;
    --cfd-border:#2A3545;--cfd-border-focus:#4A5A6E;--cfd-text:#E8ECF1;--cfd-text-muted:#8899AA;--cfd-text-dim:#556677;
    --cfd-income:#0D9488;--cfd-income-soft:rgba(13,148,136,.12);--cfd-expense:#E85D75;--cfd-expense-soft:rgba(232,93,117,.12);
    --cfd-positive:#10B981;--cfd-negative:#EF4444;
    --cfd-radius:10px;--cfd-radius-sm:6px;
    --cfd-font:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;--cfd-mono:'JetBrains Mono',monospace;
    --cfd-shadow:0 2px 12px rgba(0,0,0,.3);--cfd-transition:.2s cubic-bezier(.4,0,.2,1);
}
.cfd-app-root *,.cfd-shared-body *{box-sizing:border-box;margin:0;padding:0;}
.cfd-app-root{font-family:var(--cfd-font);color:var(--cfd-text);background:var(--cfd-bg);border-radius:16px;padding:32px;max-width:1100px;margin:0 auto;position:relative;}

/* Header */
.cfd-app-header{display:flex;align-items:center;gap:14px;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--cfd-border);}
.cfd-app-title{font-size:22px;font-weight:700;letter-spacing:-0.3px;}
.cfd-app-subtitle{font-size:13px;color:var(--cfd-text-muted);margin-top:2px;}

/* Permalink info */
.cfd-permalink-info{background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius);padding:14px 18px;margin-bottom:20px;font-size:14px;color:var(--cfd-text-muted);}
.cfd-permalink-info a{color:var(--cfd-income);text-decoration:none;font-weight:600;}
.cfd-permalink-info a:hover{text-decoration:underline;}

/* Sections */
.cfd-section{margin-bottom:24px;}
.cfd-label{display:block;font-size:13px;font-weight:500;color:var(--cfd-text-muted);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;}
.cfd-input-title{width:100%;background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius);padding:12px 16px;font-family:var(--cfd-font);font-size:15px;color:var(--cfd-text);outline:none;transition:border-color var(--cfd-transition);}
.cfd-input-title:focus{border-color:var(--cfd-border-focus);}
.cfd-input-title::placeholder{color:var(--cfd-text-dim);}
.cfd-title-hint{font-size:12px;color:var(--cfd-text-dim);margin-top:6px;font-style:italic;}

/* Two columns */
.cfd-columns-wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px;}
.cfd-column{min-width:0;}

/* Section head + sort */
.cfd-section-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.cfd-section-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.cfd-icon-income{background:var(--cfd-income-soft);color:var(--cfd-income);}
.cfd-icon-expense{background:var(--cfd-expense-soft);color:var(--cfd-expense);}
.cfd-section-heading{font-size:17px;font-weight:600;flex:1;}
.cfd-btn-sort{width:28px;height:28px;background:var(--cfd-surface-2);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius-sm);color:var(--cfd-text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--cfd-transition);margin-left:auto;}
.cfd-btn-sort:hover{border-color:var(--cfd-text-muted);color:var(--cfd-text);}

/* Fields */
.cfd-fields-group{display:flex;flex-direction:column;gap:6px;}
.cfd-field-row{display:flex;align-items:center;justify-content:space-between;background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius);padding:10px 14px;transition:border-color var(--cfd-transition),background var(--cfd-transition);}
.cfd-field-row:hover{border-color:var(--cfd-surface-3);background:var(--cfd-surface-2);}
.cfd-field-row:hover .cfd-field-amount{border-color:var(--cfd-border);}
.cfd-field-row.cfd-field-active{border-color:var(--cfd-border-focus);}
.cfd-field-label-input{background:transparent;border:none;border-bottom:1px dashed var(--cfd-text-dim);font-family:var(--cfd-font);font-size:14px;font-weight:500;color:var(--cfd-text);outline:none;flex:1;min-width:60px;max-width:200px;padding:2px 0;}
.cfd-field-label-input:focus{border-bottom-color:var(--cfd-text-muted);}
.cfd-field-input-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.cfd-field-amount{width:110px;background:var(--cfd-surface-2);border:1px solid transparent;border-radius:var(--cfd-radius-sm);padding:8px 10px;font-family:var(--cfd-mono);font-size:14px;text-align:right;outline:none;transition:border-color var(--cfd-transition);-moz-appearance:textfield;}
.cfd-field-amount::-webkit-inner-spin-button,.cfd-field-amount::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.cfd-field-amount:focus{border-color:var(--cfd-border-focus);}
.cfd-field-amount::placeholder{color:var(--cfd-text-dim);}
.cfd-amount-income{color:#34D399;}
.cfd-amount-expense{color:#FB7185;}
.cfd-currency{font-size:14px;font-weight:600;color:var(--cfd-text-muted);width:18px;}

/* Drag handle */
.cfd-drag-handle{display:flex;align-items:center;justify-content:center;width:20px;flex-shrink:0;cursor:grab;color:var(--cfd-text-dim);padding:4px 2px;margin-right:4px;border-radius:4px;transition:color var(--cfd-transition),background var(--cfd-transition);touch-action:none;}
.cfd-drag-handle:hover{color:var(--cfd-text-muted);background:var(--cfd-surface-3);}
.cfd-drag-handle:active{cursor:grabbing;}
.cfd-field-dragging{opacity:0.9;box-shadow:0 8px 32px rgba(0,0,0,.4);border-color:var(--cfd-border-focus)!important;pointer-events:none;}
.cfd-drag-placeholder{background:var(--cfd-surface-2);border:2px dashed var(--cfd-border);border-radius:var(--cfd-radius);margin-bottom:6px;transition:height .15s ease;}

.cfd-field-row .cfd-btn-remove-field{background:none;border:none;color:var(--cfd-text-dim);cursor:pointer;padding:4px;margin-right:6px;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:color var(--cfd-transition),background var(--cfd-transition);}
.cfd-btn-remove-field:hover{color:var(--cfd-expense);background:var(--cfd-expense-soft);}

/* Add buttons */
.cfd-btn-add{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:8px 16px;background:var(--cfd-income-soft);color:var(--cfd-income);border:1px dashed var(--cfd-income);border-radius:var(--cfd-radius);font-family:var(--cfd-font);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--cfd-transition);}
.cfd-btn-add:hover{background:rgba(13,148,136,.2);}
.cfd-btn-add-expense{background:var(--cfd-expense-soft);color:var(--cfd-expense);border-color:var(--cfd-expense);}
.cfd-btn-add-expense:hover{background:rgba(232,93,117,.2);}

/* Totals */
.cfd-section-total{margin-top:14px;padding:10px 14px;border-radius:var(--cfd-radius);font-size:14px;font-weight:500;text-align:right;}
.cfd-total-income-box{background:var(--cfd-income-soft);color:var(--cfd-income);}
.cfd-total-expense-box{background:var(--cfd-expense-soft);color:var(--cfd-expense);}

/* Balance */
.cfd-section-balance{background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius);padding:16px 18px;}
.cfd-balance-row{display:flex;justify-content:space-between;align-items:center;font-size:15px;margin-bottom:10px;}
.cfd-balance-row strong{font-family:var(--cfd-mono);font-size:18px;}
.cfd-balance-bar-wrap{height:8px;background:var(--cfd-surface-3);border-radius:99px;overflow:hidden;}
.cfd-balance-bar{height:100%;border-radius:99px;background:var(--cfd-positive);width:0%;transition:width .5s ease,background .3s ease;}
.cfd-balance-bar.cfd-bar-negative{background:var(--cfd-negative);}

/* Generate button – no colors, controlled by external CSS via .internal-cta-btn */
.cfd-actions-row{display:flex;gap:12px;margin-bottom:24px;}
.cfd-btn-generate{display:inline-flex;align-items:center;gap:8px;padding:14px 28px;border:none;border-radius:var(--cfd-radius);font-family:var(--cfd-font);font-size:15px;font-weight:600;cursor:pointer;}

/* Canvas */
.cfd-canvas-container{background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:14px;padding:24px;margin-bottom:24px;overflow-x:auto;overflow-y:hidden;cursor:grab;}
.cfd-canvas-container.cfd-dragging{cursor:grabbing;}
.cfd-canvas-container canvas{display:block;max-width:none!important;max-height:none!important;}
.cfd-swipe-hint{text-align:center;font-size:12px;color:var(--cfd-text-dim);margin-bottom:12px;font-style:italic;}

/* Share */
.cfd-section-share{text-align:center;}
.cfd-share-inner{display:flex;flex-direction:column;align-items:center;gap:16px;}
.cfd-share-buttons-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.cfd-btn-share,.cfd-btn-download{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--cfd-surface-2);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius);color:var(--cfd-text);font-family:var(--cfd-font);font-size:14px;font-weight:600;cursor:pointer;transition:background var(--cfd-transition),border-color var(--cfd-transition);}
.cfd-btn-share:hover,.cfd-btn-download:hover{background:var(--cfd-surface-3);border-color:var(--cfd-income);}
.cfd-permalink-result{display:flex;gap:8px;width:100%;max-width:560px;}
.cfd-permalink-input{flex:1;background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius-sm);padding:10px 14px;font-family:var(--cfd-mono);font-size:13px;color:var(--cfd-income);outline:none;}
.cfd-btn-copy{padding:10px 18px;background:var(--cfd-income);color:#fff;border:none;border-radius:var(--cfd-radius-sm);font-family:var(--cfd-font);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--cfd-transition);}
.cfd-btn-copy:hover{background:#0F766E;}
.cfd-permalink-hint{font-size:13px;color:var(--cfd-text-muted);font-style:italic;}

/* Delete code */
.cfd-delete-code-box{background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius);padding:14px 18px;text-align:left;max-width:560px;width:100%;}
.cfd-delete-hint{font-size:13px;color:#FBBF24;font-weight:600;margin-bottom:8px;}
.cfd-delete-hint-sub{font-size:12px;color:var(--cfd-text-dim);margin-top:8px;}
.cfd-delete-code-row{display:flex;gap:10px;align-items:center;}
.cfd-delete-code-value{background:var(--cfd-surface-2);padding:8px 14px;border-radius:var(--cfd-radius-sm);font-family:var(--cfd-mono);font-size:16px;color:#FBBF24;letter-spacing:2px;user-select:all;}
.cfd-btn-copy-small{padding:6px 14px;background:var(--cfd-surface-3);color:var(--cfd-text);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius-sm);font-family:var(--cfd-font);font-size:12px;font-weight:600;cursor:pointer;}
.cfd-delete-section{width:100%;max-width:560px;margin-top:8px;}
.cfd-delete-details{color:var(--cfd-text-dim);font-size:13px;}
.cfd-delete-details summary{cursor:pointer;padding:6px 0;color:var(--cfd-text-muted);}
.cfd-delete-details summary:hover{color:var(--cfd-expense);}
.cfd-delete-form{display:flex;gap:8px;margin-top:10px;}
.cfd-delete-input{flex:1;background:var(--cfd-surface);border:1px solid var(--cfd-border);border-radius:var(--cfd-radius-sm);padding:8px 12px;font-family:var(--cfd-mono);font-size:13px;color:var(--cfd-text);outline:none;}
.cfd-delete-input:focus{border-color:var(--cfd-expense);}
.cfd-btn-delete{padding:8px 16px;background:var(--cfd-expense-soft);color:var(--cfd-expense);border:1px solid var(--cfd-expense);border-radius:var(--cfd-radius-sm);font-family:var(--cfd-font);font-size:13px;font-weight:600;cursor:pointer;}

/* Toast */
.cfd-toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--cfd-surface-3);color:var(--cfd-text);padding:12px 24px;border-radius:var(--cfd-radius);font-family:var(--cfd-font);font-size:14px;font-weight:500;box-shadow:var(--cfd-shadow);z-index:9999;opacity:0;transition:transform .35s ease,opacity .35s ease;pointer-events:none;}
.cfd-toast.cfd-toast-visible{opacity:1;transform:translateX(-50%) translateY(0);}

/* Responsive */
@media(max-width:768px){
    .cfd-app-root{padding:18px;border-radius:12px;}
    .cfd-columns-wrap{grid-template-columns:1fr;gap:20px;}
    .cfd-field-row{flex-wrap:wrap;gap:8px;}
    .cfd-field-label-input{width:100%;max-width:100%;}
    .cfd-field-input-wrap{width:100%;}
    .cfd-field-amount{flex:1;width:auto;}
    .cfd-permalink-result{flex-direction:column;}
    .cfd-share-buttons-row{flex-direction:column;width:100%;}
    .cfd-btn-share,.cfd-btn-download{width:100%;justify-content:center;}
}