:root { color-scheme: dark; --bg:#09090d; --panel:#111117; --border:#22212c; --muted:#938da5; --gold:#ffc629; --purple:#9c48eb; --green:#1bd879; }
* { box-sizing:border-box } body { margin:0; background:radial-gradient(circle at 82% 95%,#14271e 0,transparent 32%),var(--bg); color:#f5f3fa; font-family:Manrope,Arial,sans-serif; }
.page { max-width:1440px; margin:auto; padding:34px 28px 56px } header { display:flex; gap:16px; align-items:center; margin-bottom:30px } .logo { display:grid; place-items:center; height:56px; width:56px; border-radius:14px; background:linear-gradient(135deg,#38291b,#24182c); color:var(--gold); font-size:31px; font-weight:800 } h1,h2,p { margin:0 } h1 { font-size:28px; line-height:1.2 } header p { margin-top:5px; color:var(--muted) } h2 { font-size:20px }
.calculator { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:38px; padding:28px; border:1px solid var(--border); border-radius:16px; background:rgba(18,18,24,.82) } .left,.right { min-width:0 }.tariffs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:18px 0 26px }.tariff { min-width:0; min-height:126px; padding:16px 13px; cursor:pointer; border:1px solid var(--border); border-radius:12px; color:#eee; background:#121119; transition:.15s; overflow:hidden }.tariff:hover { border-color:#625f75 }.tariff.active { border-color:var(--gold); background:#272217; box-shadow:inset 0 0 0 1px var(--gold) }.tariff b { display:block; font-size:14px; overflow-wrap:anywhere }.tariff small { display:block; margin-top:9px; color:var(--muted); font-size:12px; line-height:1.5; overflow-wrap:anywhere }.tariff .icon { color:var(--gold); font-size:18px; margin-bottom:13px }
.license { display:flex; align-items:center; justify-content:space-between; margin:4px 0 25px; padding:12px 18px; border-radius:10px; background:#17151a; color:#d9d4df }.license select { padding:7px 10px; border:1px solid #72591b; border-radius:7px; outline:0; background:#292316; color:var(--gold); font:800 17px Manrope }.control-block { margin-top:25px }.control-title { display:flex; justify-content:space-between; align-items:center }.control-title output,.line-value { color:var(--gold); font-weight:800; font-size:17px }.control-block p { margin:7px 0 10px; color:var(--muted); font-size:13px }.growth-plan { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin:14px 0 4px; padding:13px; border:1px solid #322940; border-radius:10px; background:#171321 }.growth-plan b,.growth-plan small { display:block }.growth-plan b { font-size:13px; color:#d8c9ea }.growth-plan small { margin-top:3px; color:var(--muted); font-size:12px }.factor-label { color:#aea7b9; font-size:11px; font-weight:700 }.factor-label select { display:block; width:66px; margin-top:4px; padding:6px 8px; border:1px solid #70429b; border-radius:7px; outline:none; background:#21162d; color:#d294ff; font:700 14px Manrope }.growth-plan button { padding:8px 11px; border:1px solid #8643c8; border-radius:7px; background:#261835; color:#bf72ff; font:700 12px Manrope; cursor:pointer }.growth-plan button:hover { background:#342047 }.line { margin:18px 0 }.line-head { display:flex; justify-content:space-between; align-items:center; gap:14px; font-weight:700; font-size:14px }.line-number { width:116px; padding:7px 9px; border:1px solid #72591b; border-radius:7px; outline:0; background:#211d16; color:var(--gold); text-align:right; font:800 16px Manrope }.badge { display:inline-block; margin-right:8px; padding:3px 6px; border-radius:4px; background:#332821; color:var(--gold); font-size:12px }
input[type=range] { appearance:none; width:100%; height:8px; margin-top:13px; border-radius:12px; background:linear-gradient(90deg,var(--gold) var(--progress),#282535 var(--progress)); outline:0 } input[type=range]::-webkit-slider-thumb { appearance:none; width:22px; height:22px; border-radius:50%; background:#0e0e14; border:2px solid var(--gold); cursor:pointer }
.line-income { display:block; margin-top:8px; color:#938da5; font-size:12px; line-height:1.5 }.line-income b { color:#d8d4df; font-weight:700 }.token-settings { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-top:30px; padding:18px; border:1px solid #352147; border-radius:12px; background:#16121e }.token-settings h2 { font-size:17px }.token-settings p { margin-top:4px; color:var(--muted); font-size:12px }.token-settings label { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:13px; white-space:nowrap }.token-settings input { width:75px; padding:9px; border:1px solid #70429b; border-radius:7px; outline:none; background:#21162d; color:#c578ff; font:800 15px Manrope }.right { padding-top:1px }.right > h2 { margin-bottom:28px }.result { min-height:128px; padding:24px; margin-bottom:18px; border:1px solid #3d3320; border-radius:14px; background:linear-gradient(115deg,#222019,#201c18); overflow:hidden }.result span,.result small { display:block; color:var(--muted); overflow-wrap:anywhere }.result strong { display:block; margin:8px 0 5px; font-size:31px; line-height:1.1; color:var(--gold) }.result small { font-size:13px }.result.purple { border-color:#34204b; background:linear-gradient(115deg,#1d1427,#171320) }.result.purple strong { color:var(--purple) }.result.total { border-color:#1e5d3b; background:linear-gradient(115deg,#133423,#14281f) }.result.total strong { font-size:38px; color:var(--green) }.points-card { padding:19px 22px; margin-bottom:18px; border:1px solid #245c72; border-radius:14px; background:linear-gradient(115deg,#102631,#151c2b) }.points-card span,.points-card small { display:block; color:var(--muted); overflow-wrap:anywhere }.points-card strong { display:block; margin:6px 0; color:#55d4ff; font-size:27px }.points-card b { display:block; color:#ebf7ff; font-size:14px }.note { color:#777287; font-size:12px; line-height:1.55; padding:4px 4px }.ranks-section { margin-top:28px; padding:26px; border:1px solid var(--border); border-radius:16px; background:rgba(18,18,24,.82) }.ranks-section > div > p { margin-top:6px; color:var(--muted); font-size:13px }.table-wrap { overflow-x:auto; margin-top:20px } table { width:100%; min-width:780px; border-collapse:separate; border-spacing:0; font-size:13px } th { padding:12px 13px; background:#1b1920; color:#c9c3d2; text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase } th:first-child { border-radius:8px 0 0 8px } th:last-child { border-radius:0 8px 8px 0 } td { padding:10px 13px; border-bottom:1px solid #292631; color:#ded9e5 } td:nth-child(3) { color:var(--gold); font-weight:800 } td:first-child { color:#9d91b4; font-size:12px; font-weight:700 } tr.active-rank td { background:#19313a; color:#f3fbff } tr.active-rank td:nth-child(3) { color:#55d4ff }
.capitalization-card { padding:19px 22px; margin-bottom:18px; border:1px solid #286a7b; border-radius:14px; background:linear-gradient(115deg,#102e35,#11252d) }.capitalization-card span,.capitalization-card small { display:block; color:#93abb0; overflow-wrap:anywhere }.capitalization-card strong { display:block; margin:6px 0; color:#5ce4df; font-size:30px; line-height:1.1 }.rank-income-card { padding:19px 22px; margin-bottom:18px; border:1px solid #735129; border-radius:14px; background:linear-gradient(115deg,#302514,#251d15) }.rank-income-card span,.rank-income-card small { display:block; color:#b9ab91; overflow-wrap:anywhere }.rank-income-card strong { display:block; margin:6px 0; color:#ffc55a; font-size:30px; line-height:1.1 } @media(max-width:1500px){ .calculator { grid-template-columns:1fr }.tariffs { grid-template-columns:repeat(5,minmax(0,1fr)) } } @media(max-width:900px){ .tariffs { grid-template-columns:repeat(2,minmax(0,1fr)) } .tariff { min-height:100px } } @media(max-width:480px){ .page { padding:22px 14px }.calculator { padding:18px; gap:28px } h1 { font-size:22px } .tariffs { grid-template-columns:1fr } .token-settings { align-items:flex-start; flex-direction:column } }