*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--shame-green: #22c55e;--shame-lime: #84cc16;--shame-yellow: #eab308;--shame-orange: #f97316;--shame-red: #ef4444;--bg-select: var(--bg-input);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--t-fast: .2s var(--ease-out);--t-med: .45s var(--ease-out);--t-slow: .7s var(--ease-out);--r-sm: 10px;--r-md: 14px;--r-lg: 20px;--r-xl: 28px}[data-theme=light]{--bg-page: #fafafa;--bg-card: #ffffff;--bg-card-hover: #ffffff;--bg-input: #f4f4f5;--bg-input-focus: #ececed;--border-card: rgba(0, 0, 0, .06);--border-input: rgba(0, 0, 0, .1);--border-input-focus: #8b5cf6;--text-primary: #09090b;--text-secondary: #71717a;--text-tertiary: #a1a1aa;--accent: #8b5cf6;--accent-hover: #7c3aed;--accent-subtle: rgba(139, 92, 246, .08);--accent-glow: rgba(139, 92, 246, .15);--shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);--shadow-card-hover: 0 4px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);--shadow-btn: 0 1px 2px rgba(0,0,0,.05);--shadow-btn-hover: 0 4px 12px rgba(139,92,246,.25);--result-gradient: linear-gradient(135deg, #8b5cf6, #6d28d9);--track-bg: #f0f0f0;--copied-bg: #22c55e}[data-theme=dark]{--bg-page: #09090b;--bg-card: rgba(24, 24, 27, .98);--bg-card-hover: rgba(30, 30, 35, .98);--bg-input: rgba(39, 39, 42, .8);--bg-input-focus: rgba(63, 63, 70, .8);--border-card: rgba(255, 255, 255, .12);--border-input: rgba(255, 255, 255, .1);--border-input-focus: #a78bfa;--text-primary: #ffffff;--text-secondary: #d1d1d6;--text-tertiary: #71717a;--accent: #a78bfa;--accent-hover: #c084fc;--accent-subtle: rgba(167, 139, 250, .15);--accent-glow: rgba(167, 139, 250, .25);--shadow-card: 0 10px 30px -10px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05);--shadow-card-hover: 0 20px 40px -15px rgba(0,0,0,.6);--shadow-btn: 0 1px 2px rgba(0,0,0,.5);--shadow-btn-hover: 0 0 20px rgba(167,139,250,.4);--result-gradient: linear-gradient(135deg, #a78bfa, #c084fc);--track-bg: rgba(255,255,255,.1);--copied-bg: #22c55e}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font);background:var(--bg-page);color:var(--text-primary);min-height:100vh;display:flex;justify-content:center;transition:background .3s ease,color .3s ease;overflow-x:hidden;position:relative}.ambient-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;overflow:hidden;pointer-events:none}.blob{position:absolute;width:500px;height:500px;background:radial-gradient(circle,var(--color) 0%,transparent 70%);filter:blur(80px);opacity:.15;border-radius:50%;animation:float 20s infinite ease-in-out alternate}[data-theme=dark] .blob{opacity:.1}.blob--purple{--color: #8b5cf6;top:-100px;left:-150px;animation-duration:25s}.blob--blue{--color: #3b82f6;bottom:-150px;right:-200px;animation-duration:30s;animation-delay:-5s}.blob--pink{--color: #ec4899;top:40%;right:-250px;width:400px;height:400px;opacity:.1;animation-duration:22s;animation-delay:-10s}@keyframes float{0%{transform:translate(0) scale(1)}33%{transform:translate(30px,50px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}to{transform:translate(0) scale(1)}}main{width:100%;max-width:440px;padding:24px 16px 40px;display:flex;flex-direction:column;gap:20px}.topbar{display:flex;justify-content:flex-end;margin-bottom:-8px}.theme-toggle{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-card);border-radius:var(--r-md);background:var(--bg-card);color:var(--text-secondary);cursor:pointer;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast)}.theme-toggle:hover{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent);transform:scale(1.05)}.theme-toggle svg{width:18px;height:18px}.header{text-align:center;padding:8px 0 4px}.header__badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:100px;background:var(--accent-subtle);color:var(--accent);font-size:.75rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-bottom:16px}.header__title{font-size:2rem;font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--text-primary)}.header__subtitle{margin-top:10px;font-size:1rem;color:var(--text-secondary);font-weight:400;line-height:1.5}.card{background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-card);transition:background .3s ease,border-color .3s ease,box-shadow .3s ease,transform var(--t-med)}.card:hover{box-shadow:var(--shadow-card-hover)}.card--input{display:flex;flex-direction:column;gap:20px;animation:fadeUp .5s var(--ease-out) both;transition:all .5s var(--ease-out)}.card--input>*:nth-child(5),.card--input>*:nth-child(6){grid-column:span 2}.card--minimized{opacity:.1;transform:scale(.8) translateY(-40px);pointer-events:none;filter:blur(4px) grayscale(1);margin-bottom:-220px;z-index:1}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.input-group{display:flex;flex-direction:column;gap:6px}.input-label{font-size:.8rem;font-weight:600;color:var(--text-secondary);display:flex;align-items:center;gap:6px}.input-label__icon{font-size:.95rem}.salary-presets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:4px}.preset-btn{padding:8px;border:1px solid var(--border-input);background:var(--bg-input);color:var(--text-secondary);border-radius:var(--r-sm);font-size:.75rem;font-weight:600;cursor:pointer;transition:all var(--t-fast)}.preset-btn:hover{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent)}.preset-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}.input-field{background:var(--bg-input);border:1.5px solid var(--border-input);border-radius:var(--r-md);padding:13px 16px;font-size:1rem;font-family:var(--font);font-weight:600;color:var(--text-primary);outline:none;transition:background var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast);-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%}.input-field--small{width:70px;padding:8px;text-align:center}.slider-group{display:flex;align-items:center;gap:12px}.slider{flex:1;cursor:pointer;accent-color:var(--accent)}.input-field::-webkit-inner-spin-button,.input-field::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-field::placeholder{color:var(--text-tertiary);font-weight:400}.input-field:hover{border-color:var(--text-tertiary)}.input-field:focus{border-color:var(--border-input-focus);box-shadow:0 0 0 3px var(--accent-glow);background:var(--bg-input-focus)}.useful-toggle{display:flex;background:var(--bg-input);border-radius:var(--r-md);padding:4px;gap:4px}.toggle-option{flex:1;cursor:pointer;position:relative}.toggle-option input{position:absolute;opacity:0;cursor:pointer}.toggle-option span{display:flex;align-items:center;justify-content:center;padding:8px;border-radius:calc(var(--r-md) - 4px);font-size:.85rem;font-weight:600;color:var(--text-secondary);transition:all var(--t-fast)}.toggle-option input:checked+span{background:var(--bg-card);color:var(--accent);box-shadow:0 2px 8px #0000001a}[data-theme=dark] .toggle-option input:checked+span{box-shadow:0 2px 8px #0000004d}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font);font-weight:600;font-size:.9rem;border:none;border-radius:var(--r-md);cursor:pointer;transition:all var(--t-fast);position:relative;overflow:hidden}.btn:active{transform:scale(.96)!important}.btn--primary{width:100%;padding:15px 24px;background:var(--accent);color:#fff;font-size:.95rem;border-radius:var(--r-md);box-shadow:var(--shadow-btn);margin-top:4px}.btn--primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-btn-hover);transform:translateY(-2px) scale(1.01)}.btn--primary:active{transform:translateY(0) scale(.98)}.btn__arrow{transition:transform var(--t-fast)}.btn--primary:hover .btn__arrow{transform:translate(3px)}.btn--share,.btn--recalc{padding:12px 18px;font-size:.85rem;flex:1}.btn--share{background:var(--accent);color:#fff;box-shadow:var(--shadow-btn)}.btn--share:hover{background:var(--accent-hover);box-shadow:var(--shadow-btn-hover);transform:translateY(-1px)}.btn--share.copied{background:var(--copied-bg)}.btn--recalc{background:transparent;color:var(--text-secondary);border:1.5px solid var(--border-card)}.btn--recalc:hover{background:var(--accent-subtle);color:var(--accent);border-color:var(--accent)}.share-container{position:relative;flex:1;display:flex}.share-menu{position:absolute;bottom:calc(100% + 12px);left:0;width:100%;background:var(--bg-card);border:1px solid var(--border-card);border-radius:var(--r-md);padding:8px;box-shadow:var(--shadow-xl);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100;display:flex;flex-direction:column;gap:4px;transform-origin:bottom center;animation:menuIn .3s var(--ease-out)}.share-menu.hidden{display:none}@keyframes menuIn{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.share-menu__item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:transparent;border:none;border-radius:var(--r-sm);color:var(--text-primary);font-size:.9rem;font-weight:500;cursor:pointer;transition:all var(--t-fast);text-align:left}.share-menu__item:hover{background:var(--accent-subtle);color:var(--accent)}.share-menu__item svg{opacity:.7}.card--result{text-align:center;animation:resultReveal .55s var(--ease-out) both;position:relative;z-index:10}.card--result.hidden{display:none}@keyframes resultReveal{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1.1)}}.emoji-pop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:8rem;pointer-events:none;z-index:1000;animation:emojiPop 1.5s var(--ease-spring) both}@keyframes emojiPop{0%{transform:translate(-50%,-50%) scale(0) rotate(-20deg);opacity:0}30%{transform:translate(-50%,-50%) scale(1.5) rotate(10deg);opacity:1}to{transform:translate(-50%,-100%) scale(1.2) rotate(0);opacity:0}}.result__label{font-size:.78rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}.result__amount{font-size:3.5rem;font-weight:900;letter-spacing:-.05em;background:var(--result-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;line-height:1;margin-bottom:24px;font-variant-numeric:tabular-nums;filter:drop-shadow(0 4px 15px var(--accent-glow));animation:amountScale 1s var(--ease-spring) both}@keyframes amountScale{0%{transform:scale(.8)}to{transform:scale(1)}}.result__message{font-size:1.4rem;font-weight:500;color:var(--text-primary);margin-bottom:32px;min-height:1.5em}.result__trust{font-size:.85rem;color:var(--text-secondary);font-style:italic;margin-bottom:24px;font-weight:500}.shame-meter{margin-bottom:28px}.shame-meter__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.shame-meter__title{font-size:.75rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.06em}.shame-meter__value{font-size:.85rem;font-weight:800;color:var(--text-primary);font-variant-numeric:tabular-nums}.shame-meter__track{width:100%;height:8px;background:var(--track-bg);border-radius:100px;overflow:hidden}.shame-meter__fill{width:0%;height:100%;border-radius:100px;transition:width 1.2s var(--ease-out),background-color .4s ease}.shame-meter__ticks{display:flex;justify-content:space-between;padding:4px 2px 0}.shame-meter__tick{font-size:.65rem;color:var(--text-tertiary);font-weight:500}.result__actions{display:flex;gap:10px}.divider{width:48px;height:1.5px;background:var(--border-card);margin:2px auto 6px;border-radius:10px}.footer{text-align:center;font-size:.78rem;color:var(--text-tertiary);padding-top:4px}.hidden{display:none!important}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.shake{animation:shake .4s ease}@media (min-width: 700px){main{max-width:800px;padding:60px 40px;gap:24px}.header__title{font-size:2.25rem}.card{padding:40px;border-radius:var(--r-xl)}.card--input{display:grid;grid-template-columns:1fr 1fr;gap:24px 32px}.card--input>*:nth-child(5),.card--input>*:nth-child(6){grid-column:span 2}.salary-presets{grid-template-columns:repeat(4,1fr)}.result__amount{font-size:5.5rem}}@media (max-width: 400px){main{padding:24px 16px}.card{padding:24px 16px;border-radius:var(--r-lg)}.header__title{font-size:1.5rem}.result__amount{font-size:3rem}.result__message{font-size:1.1rem}.btn{padding:12px 16px;font-size:.85rem}}
