:root{color-scheme:light;font-family:Arial,Helvetica,sans-serif;line-height:1.5;font-weight:400;color:#1f2937;background:#f3f4f6;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg: #f3f4f6;--panel: #ffffff;--panel-soft: #f9fafb;--border: #d9dee7;--text: #1f2937;--muted: #6b7280;--green: #16a34a;--green-soft: #ecfdf3;--green-border: #cdeed7;--blue: #2563eb;--blue-soft: #eff6ff;--blue-border: #bfdbfe;--red: #b91c1c;--red-soft: #fef2f2;--red-border: #fecaca}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer}#root{min-height:100vh}.app-page{min-height:100vh;padding:24px 16px 40px}.app-shell{max-width:1280px;margin:0 auto}.page-head{margin-bottom:18px}.page-head__eyebrow{margin:0 0 6px;font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#0f766e}.page-head__title{margin:0;font-size:clamp(1.9rem,3vw,2.7rem);line-height:1.1}.page-head__subtitle{margin:8px 0 0;max-width:72ch;color:var(--muted)}.dashboard{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}.panel{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--panel);box-shadow:0 10px 30px #0f172a0f}.panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}.panel__eyebrow{margin:0 0 6px;font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}.panel__eyebrow--blue{color:var(--blue)}.panel__title{margin:0;font-size:1.4rem;line-height:1.15}.panel__badge{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--green);background:var(--green-soft);border:1px solid var(--green-border);white-space:nowrap}.panel__badge--blue{color:var(--blue);background:var(--blue-soft);border-color:var(--blue-border)}.controls{display:grid;gap:12px}.controls--interest{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end}.vol-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end}.field{display:grid;gap:6px}.field--span-2{grid-column:1 / -1}.field__label{font-size:.95rem;font-weight:700}.field__input-wrap{position:relative}.field__input{width:100%;min-height:48px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);outline:none}.field__input--rate{padding-right:34px}.field__input:focus{border-color:#16a34a80;box-shadow:0 0 0 4px #16a34a1f}.field__suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:700}.direction-toggle{margin:0;padding:0;border:0;min-inline-size:0}.direction-toggle__options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.direction-toggle__option{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 14px;border-radius:12px;border:1px solid var(--border);background:#fff;font-weight:700;cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}.direction-toggle__option input{position:absolute;opacity:0;pointer-events:none}.direction-toggle__option.is-active{border-color:#2563eb73;box-shadow:0 0 0 4px #2563eb1f;background:var(--blue-soft)}.actions{display:flex;gap:10px}.actions--stacked{flex-direction:column}.button{min-height:48px;padding:0 18px;border-radius:12px;border:1px solid transparent;font-weight:700}.button--primary{color:#fff;background:var(--green);box-shadow:0 10px 18px #16a34a2e}.button--secondary{color:var(--text);background:#fff;border-color:var(--border)}.alert{margin:12px 0 0;padding:12px 14px;border-radius:12px;color:var(--red);background:var(--red-soft);border:1px solid #fecaca}.result-block{margin-top:14px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff}.table-wrap--interest{max-height:72vh}table{width:100%;min-width:100%;border-collapse:collapse}.table-wrap--interest table{min-width:760px}.table-wrap--vol table{min-width:360px}thead th{position:sticky;top:0;z-index:1;padding:12px 14px;text-align:left;background:#f8fafc;border-bottom:1px solid var(--border);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}tbody td{padding:11px 14px;border-bottom:1px solid #edf1f5}tbody tr:nth-child(2n){background:#fbfcfd}tbody tr.is-final td{font-weight:700;color:var(--green)}.empty-state{padding:18px 14px;border-radius:14px;border:1px dashed var(--border);background:var(--panel-soft);color:var(--muted)}.empty-state strong{color:var(--text)}.hint{margin:12px 0 0;color:var(--muted);font-size:.94rem}.table-input{width:100%;min-height:38px;padding:0 10px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);text-align:right;outline:none}.table-input:focus{border-color:#2563eb80;box-shadow:0 0 0 4px #2563eb1f}.table-wrap--vol td:first-child{width:22%;font-weight:700}.table-wrap--vol td:nth-child(2),.table-wrap--vol td:nth-child(3){width:39%}.vol-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}.summary-card{padding:14px;border-radius:14px;border:1px solid var(--border);background:#fff}.summary-card--accent{border-color:var(--blue-border);background:var(--blue-soft)}.summary-card--success{border-color:var(--green-border);background:var(--green-soft)}.summary-card--danger{border-color:var(--red-border);background:var(--red-soft)}.summary-card__label{display:block;margin-bottom:6px;font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.summary-card__value{display:block;font-size:1.08rem;line-height:1.2}.summary-card--accent .summary-card__value{color:var(--blue)}.summary-card--success .summary-card__value{color:var(--green)}.summary-card--danger .summary-card__value{color:var(--red)}@media(max-width:1120px){.dashboard{grid-template-columns:1fr}}@media(max-width:900px){.controls--interest{grid-template-columns:1fr 1fr}.actions{grid-column:1 / -1}}@media(max-width:760px){.app-page{padding:16px 12px 28px}.panel{padding:16px;border-radius:16px}.controls--interest,.vol-form,.vol-summary,.direction-toggle__options{grid-template-columns:1fr}.actions{flex-direction:column;grid-column:auto}.button{width:100%}}
