:root{--bg: #ffffff;--bg-secondary: #f5f5f7;--panel: #fbfbfd;--panel-hover: #f5f5f7;--text: #1d1d1f;--text-secondary: #6e6e73;--border: #d2d2d7;--accent: #000000;--accent-secondary: #424245;--danger: #ff3b30;--success: #34c759;--warning: #ff9500;--font-main: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif;--spacing-xs: .5rem;--spacing-sm: 1rem;--spacing-md: 1.5rem;--spacing-lg: 2rem;--spacing-xl: 3rem;--spacing-2xl: 4rem;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);--shadow-md: 0 4px 16px rgba(0, 0, 0, .06);--shadow-lg: 0 12px 48px rgba(0, 0, 0, .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .35s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-main);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--text);margin-bottom:var(--spacing-md)}h2{font-size:clamp(1.25rem,3vw,1.75rem);font-weight:600;letter-spacing:-.02em;color:var(--text);margin:var(--spacing-xl) 0 var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1.5px solid #d1d1d6}h3{font-size:clamp(1rem,2vw,1.25rem);font-weight:600;letter-spacing:-.01em;color:var(--text);margin-bottom:var(--spacing-sm)}p{color:var(--text-secondary);line-height:1.6;font-size:clamp(.9rem,1.5vw,1rem)}a{color:var(--accent);text-decoration:none;transition:opacity var(--transition-fast)}a:hover{opacity:.7}.main-container{max-width:1400px;margin:0 auto;padding:0 var(--spacing-md);min-height:100vh}header{padding:var(--spacing-2xl) 0 var(--spacing-xl);border-bottom:1.5px solid #d1d1d6;margin-bottom:var(--spacing-xl)}header>div{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-md)}header a{font-size:1.5rem;transition:transform var(--transition-fast)}header a:hover{transform:scale(1.1)}header p{max-width:70ch;margin-top:var(--spacing-sm)}.tabs{display:flex;gap:var(--spacing-xs);margin-bottom:var(--spacing-xl);padding:var(--spacing-xs);background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-lg);overflow-x:auto;scrollbar-width:none;box-shadow:0 1px 3px #0000000f}.tabs::-webkit-scrollbar{display:none}.tabs button{flex:1;min-width:max-content;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;color:var(--text-secondary);font-size:clamp(.85rem,1.5vw,.95rem);font-weight:500;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);white-space:nowrap}.tabs button:hover{background:var(--panel-hover);color:var(--text)}.tabs button.active{background:#fff;color:var(--text);font-weight:600;border:1px solid #d1d1d6;box-shadow:0 1px 3px #00000014}.tab-panel{display:none;animation:fadeIn var(--transition-base)}.tab-panel.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.layout{display:grid;grid-template-columns:minmax(350px,1fr) minmax(300px,1fr);gap:var(--spacing-xl);align-items:start}#panel-budget .layout{grid-template-columns:minmax(400px,1.2fr) minmax(300px,.8fr)}@media (max-width: 1024px){.layout{grid-template-columns:1fr;gap:var(--spacing-lg)}}form{background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-xl);padding:var(--spacing-lg);position:sticky;top:var(--spacing-md);box-shadow:0 2px 8px #0000000f}fieldset{border:none;display:flex;flex-direction:column;gap:var(--spacing-md)}.row{display:flex;flex-direction:column;gap:var(--spacing-xs)}.row.inline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md)}label{font-size:.85rem;font-weight:500;color:var(--text-secondary);letter-spacing:.01em}input[type=text],input[type=number],input[type=email],select{width:100%;padding:var(--spacing-sm);background:#fff;border:1.5px solid #c7c7cc;border-radius:var(--radius-md);color:var(--text);font-size:.95rem;font-family:var(--font-main);transition:all var(--transition-base);-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 1px 3px #0000000a,inset 0 1px 2px #00000005}input[type=text]:hover,input[type=number]:hover,input[type=email]:hover,select:hover{border-color:#a1a1a6}input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,select:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px #0000000d,0 1px 3px #0000001a}input[type=range]{width:100%;height:4px;background:#d1d1d6;border-radius:2px;outline:none;-webkit-appearance:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--accent);border-radius:50%;cursor:pointer;transition:transform var(--transition-fast);box-shadow:0 2px 6px #00000026}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:18px;height:18px;background:var(--accent);border:none;border-radius:50%;cursor:pointer;box-shadow:0 2px 6px #00000026}select{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%236e6e73' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right var(--spacing-sm) center;padding-right:2.5rem;cursor:pointer}.pair{display:grid;grid-template-columns:1fr auto;gap:var(--spacing-sm);align-items:center}.pair input[type=number]{max-width:120px}.help{font-size:.8rem;color:var(--text-secondary);line-height:1.4}.results{min-height:60vh}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.card{background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-lg);padding:var(--spacing-md);transition:all var(--transition-base);animation:slideUp .4s ease-out backwards;box-shadow:0 1px 3px #0000000f}.card:hover{background:var(--panel-hover);transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.card h3{font-size:.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-sm);text-transform:uppercase;letter-spacing:.05em}.card .value{font-size:clamp(1.5rem,3vw,2rem);font-weight:700;letter-spacing:-.02em;color:var(--text);margin-bottom:var(--spacing-xs)}.card.success{border-color:var(--success)}.card.success h3,.card.success .value{color:var(--success)}.card.danger{border-color:var(--danger)}.card.danger h3,.card.danger .value{color:var(--danger)}.card.warning{border-color:var(--warning)}.card.warning h3,.card.warning .value{color:var(--warning)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.card:nth-child(1){animation-delay:0ms}.card:nth-child(2){animation-delay:50ms}.card:nth-child(3){animation-delay:.1s}.card:nth-child(4){animation-delay:.15s}.card:nth-child(5){animation-delay:.2s}.card:nth-child(6){animation-delay:.25s}.card:nth-child(7){animation-delay:.3s}.card:nth-child(8){animation-delay:.35s}.card:nth-child(9){animation-delay:.4s}.card:nth-child(10){animation-delay:.45s}.chart-container{background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-xl);box-shadow:0 1px 3px #0000000f}.chart-container canvas{max-height:400px}table{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 1px 3px #0000000f}thead{background:var(--bg-secondary)}th{padding:var(--spacing-md);text-align:left;font-size:.85rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;border-bottom:1.5px solid #d1d1d6}td{padding:var(--spacing-md);border-bottom:1px solid #e5e5ea;color:var(--text);font-size:.9rem}tr:last-child td{border-bottom:none}tbody tr{transition:background var(--transition-fast)}tbody tr:hover{background:var(--panel-hover)}.table-wrapper{overflow-x:auto;margin-bottom:var(--spacing-xl);border-radius:var(--radius-lg);-webkit-overflow-scrolling:touch}.table-wrapper table{min-width:1000px}.comparison-section{max-width:1400px;margin:var(--spacing-xl) auto;padding:0 var(--spacing-lg)}.comparison-section h2{font-size:1.75rem;font-weight:700;margin-bottom:var(--spacing-lg);color:var(--text)}.comparison-wrapper{background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-sm)}#platformComparison{font-size:.9rem}#platformComparison th{white-space:nowrap;font-size:.85rem}#platformComparison td{white-space:nowrap}.platform-cards{display:none;grid-template-columns:1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-xl)}.platform-card{background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:0 1px 3px #0000000f}.platform-card h4{font-size:1.1rem;font-weight:600;margin-bottom:var(--spacing-md);color:var(--text)}.platform-card .metric{display:flex;justify-content:space-between;padding:var(--spacing-xs) 0;border-bottom:1px solid #d1d1d6}.platform-card .metric:last-child{border-bottom:none}.metric-label{font-size:.85rem;color:var(--text-secondary)}.metric-value{font-weight:600;color:var(--text)}.platform-card.best{border-color:var(--success);background:#34c75914}.platform-card.worst{border-color:var(--danger);background:#ff3b3014}.budget-section{background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:0 1px 3px #0000000f}.budget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-md);gap:var(--spacing-md);flex-wrap:wrap}.budget-header h3{margin:0;font-size:1.2rem}.add-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--accent);color:var(--bg);border:none;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;box-shadow:0 2px 8px #0000001a}.add-btn:hover{transform:translateY(-2px);opacity:.9;box-shadow:0 4px 12px #00000026}.add-btn:active{transform:translateY(0)}.percent-expense-helper{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);padding:var(--spacing-sm);background:#ff3b300d;border:1px solid rgba(255,59,48,.2);border-radius:var(--radius-md)}.percent-expense-helper input[type=number]{width:100px;padding:var(--spacing-xs) var(--spacing-sm);font-size:.9rem}.percent-label{font-size:.9rem;color:var(--text-secondary);white-space:nowrap}.apply-btn{padding:var(--spacing-xs) var(--spacing-md);background:var(--danger);color:#fff;border:none;border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;box-shadow:0 2px 6px #ff3b3033}.apply-btn:hover{transform:translateY(-1px);box-shadow:0 4px 10px #ff3b304d;opacity:.9}.apply-btn:active{transform:translateY(0)}.budget-items{display:flex;flex-direction:column;gap:var(--spacing-sm);overflow-x:auto;scrollbar-width:thin;scrollbar-color:#d1d1d6 transparent}.budget-items::-webkit-scrollbar{height:6px}.budget-items::-webkit-scrollbar-track{background:transparent}.budget-items::-webkit-scrollbar-thumb{background:#d1d1d6;border-radius:3px}.budget-items::-webkit-scrollbar-thumb:hover{background:#a1a1a6}.budget-item{display:grid;grid-template-columns:minmax(220px,2.5fr) minmax(120px,1.5fr) minmax(120px,1fr) auto;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-secondary);border:1.5px solid #d1d1d6;border-radius:var(--radius-md);align-items:center;transition:all var(--transition-base);box-shadow:0 1px 3px #0000000d;min-width:min-content;overflow:visible}.budget-item:hover{background:#fafafa;border-color:#a1a1a6;box-shadow:0 2px 6px #00000014}.budget-item input,.budget-item select{padding:var(--spacing-xs) var(--spacing-sm);font-size:.9rem;background:#fff;border:1.5px solid #c7c7cc;box-shadow:0 1px 2px #0000000a;min-width:0;width:100%}.budget-item input:hover,.budget-item select:hover{border-color:#a1a1a6}.budget-item input:focus,.budget-item select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #0000000d}.budget-item .budget-amount{text-align:right;font-weight:600}.budget-item .budget-desc{min-width:0}.delete-btn{padding:var(--spacing-xs);background:transparent;border:1.5px solid #d1d1d6;border-radius:var(--radius-sm);color:var(--danger);font-size:1rem;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;justify-content:center;min-width:36px;min-height:36px}.delete-btn:hover{background:var(--danger);color:#fff;border-color:var(--danger);transform:scale(1.05)}.info-box{background:var(--panel);border:1.5px solid #d1d1d6;border-radius:var(--radius-md);padding:var(--spacing-sm);font-size:.85rem;color:var(--text-secondary);box-shadow:0 1px 3px #0000000a}.footer-note{font-size:.8rem;color:var(--text-secondary);text-align:center;margin-top:var(--spacing-md)}#toggleAdvanced{width:100%;padding:var(--spacing-sm);background:transparent;border:1.5px solid #d1d1d6;border-radius:var(--radius-md);color:var(--text-secondary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--transition-base);margin-top:var(--spacing-md)}#toggleAdvanced:hover{background:var(--panel-hover);color:var(--text);border-color:#a1a1a6}#advancedBlock{max-height:0;overflow:hidden;transition:max-height var(--transition-slow)}#advancedBlock.show{max-height:500px;margin-top:var(--spacing-md)}@media (max-width: 1200px){.cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}@media (max-width: 900px){:root{--spacing-xl: 2rem;--spacing-2xl: 2.5rem}.layout{grid-template-columns:1fr}.comparison-section{padding:0 var(--spacing-sm)}.comparison-wrapper{padding:var(--spacing-md)}#platformComparison{font-size:.8rem}#platformComparison th,#platformComparison td{font-size:.75rem;padding:.5rem .35rem}form{position:static}.cards{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--spacing-sm)}.table-wrapper{display:none}.platform-cards{display:grid}.budget-item{grid-template-columns:minmax(150px,2fr) minmax(90px,1fr) minmax(90px,1fr) auto;font-size:.85rem}.budget-item input,.budget-item select{font-size:.85rem;padding:.4rem .6rem}}@media (max-width: 768px){.budget-item{grid-template-columns:1fr;gap:var(--spacing-sm)}.budget-item input,.budget-item select{width:100%}.budget-item .delete-btn{justify-self:end;width:auto}}@media (max-width: 640px){.main-container{padding:0 var(--spacing-sm)}.comparison-section{padding:0 var(--spacing-xs);margin:var(--spacing-lg) auto}.comparison-section h2{font-size:1.4rem;padding:0 var(--spacing-xs)}.comparison-wrapper{padding:var(--spacing-sm);border-radius:var(--radius-md)}#platformComparison{font-size:.7rem}#platformComparison th,#platformComparison td{font-size:.65rem;padding:.4rem .25rem}header{padding:var(--spacing-lg) 0}.tabs{flex-direction:column;gap:var(--spacing-xs)}.tabs button{width:100%}.cards,.row.inline,.pair{grid-template-columns:1fr}.pair input[type=number]{max-width:100%}.percent-expense-helper{flex-wrap:wrap;gap:var(--spacing-xs)}.percent-expense-helper input[type=number]{flex:1;min-width:80px}.percent-label{flex:1;min-width:max-content}.apply-btn{width:100%}.budget-item{grid-template-columns:1fr;gap:var(--spacing-xs);overflow:visible}.budget-item input,.budget-item select{width:100%;max-width:100%;min-width:0}.budget-item .delete-btn{width:100%;justify-self:stretch}.budget-header{flex-direction:column;align-items:stretch}.add-btn{width:100%}.card .value{font-size:1.5rem}}@media (max-width: 400px){h1{font-size:1.75rem}form{padding:var(--spacing-md)}}@media print{.tabs,form,.add-btn,.delete-btn{display:none}.card{break-inside:avoid;border:1px solid #d2d2d7}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}