.penalty-calc{min-height:100vh;padding:calc(72px + var(--space-12))var(--space-6)var(--space-16);background:linear-gradient(160deg,#222f4f 0%,#29375b 30%,#323c67 60%,#39396a 100%);justify-content:center;align-items:flex-start;display:flex;position:relative;overflow:hidden}[data-theme=dark] .penalty-calc{background:linear-gradient(160deg,#0b111e 0%,#0f1729 30%,#151a32 60%,#1f1b37 100%)}.penalty-calc__grid-overlay{pointer-events:none;z-index:0;background-image:linear-gradient(#ffffff0a 1px,#0000 1px),linear-gradient(90deg,#ffffff0a 1px,#0000 1px);background-size:64px 64px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(80% 60% at 50% 30%,#000 20%,#0000 70%);mask-image:radial-gradient(80% 60% at 50% 30%,#000 20%,#0000 70%)}[data-theme=dark] .penalty-calc__grid-overlay{background-image:linear-gradient(#ffffff08 1px,#0000 1px),linear-gradient(90deg,#ffffff08 1px,#0000 1px)}.penalty-calc__glow{filter:blur(120px);pointer-events:none;z-index:0;border-radius:50%;width:500px;height:500px;position:absolute}.penalty-calc__glow--left{background:#ef434314;top:5%;left:-8%}[data-theme=dark] .penalty-calc__glow--left{background:#ef43430f}.penalty-calc__glow--right{background:#f59f0a0f;bottom:10%;right:-8%}[data-theme=dark] .penalty-calc__glow--right{background:#f59f0a0a}.penalty-calc__container{z-index:1;gap:var(--space-8);flex-direction:column;width:100%;max-width:760px;margin:0 auto;display:flex;position:relative}.penalty-calc__header{text-align:center;align-items:center;gap:var(--space-4);flex-direction:column;display:flex}.penalty-calc__badge{align-items:center;gap:var(--space-2);border-radius:var(--radius-full);color:#f69898;letter-spacing:.01em;background:#ef43431f;border:1px solid #ef434340;padding:6px 16px;font-size:13px;font-weight:500;display:inline-flex}[data-theme=dark] .penalty-calc__badge{color:#f58a8a;border-color:#ef434333}.penalty-calc__headline{letter-spacing:-.035em;color:#fffffff2;margin:0;font-size:clamp(28px,4vw,44px);font-weight:800;line-height:1.1}[data-theme=dark] .penalty-calc__headline{color:#fff}.penalty-calc__headline-accent{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#f26969 0%,#f7b645 100%);-webkit-background-clip:text;background-clip:text}[data-theme=dark] .penalty-calc__headline-accent{-webkit-text-fill-color:transparent;background:linear-gradient(135deg,#f15b5b 0%,#f6ae31 100%);-webkit-background-clip:text;background-clip:text}.penalty-calc__subheadline{color:#fff9;max-width:560px;margin:0;font-size:clamp(14px,1.1vw,17px);font-weight:400;line-height:1.7}[data-theme=dark] .penalty-calc__subheadline{color:#ffffff80}.penalty-calc__card{border-radius:var(--radius-xl);padding:var(--space-8);-webkit-backdrop-filter:blur(16px);gap:var(--space-6);background:#ffffff0d;border:1px solid #ffffff1a;flex-direction:column;display:flex}[data-theme=dark] .penalty-calc__card{background:#ffffff0a;border-color:#ffffff14}.penalty-calc__card-title{color:#ffffffe6;letter-spacing:-.01em;margin:0;font-size:18px;font-weight:700}.penalty-calc__card-desc{color:#ffffff80;margin:var(--space-1)0 0;font-size:14px;font-weight:400;line-height:1.6}.penalty-calc__form{gap:var(--space-6);flex-direction:column;display:flex}.penalty-calc__field-row{gap:var(--space-4);grid-template-columns:1fr 1fr;display:grid}.penalty-calc__field{gap:var(--space-2);flex-direction:column;display:flex}.penalty-calc__label{color:#ffffffd9;letter-spacing:-.01em;font-size:14px;font-weight:600}.penalty-calc__input{width:100%;height:44px;padding:0 var(--space-4);color:#fff;border-radius:var(--radius-md);transition:border-color var(--duration-fast)var(--ease-out),box-shadow var(--duration-fast)var(--ease-out);background:#ffffff0f;border:1px solid #ffffff1f;outline:none;font-family:inherit;font-size:14px;font-weight:400}.penalty-calc__input::placeholder{color:#ffffff4d}.penalty-calc__input:focus{border-color:#3c83f6;box-shadow:0 0 0 3px #3c83f626}.penalty-calc__input--error{border-color:#ef4343!important;box-shadow:0 0 0 3px #ef43431f!important}.penalty-calc__turnover-row{gap:var(--space-2);display:flex}.penalty-calc__turnover-input{flex:1;position:relative}.penalty-calc__turnover-prefix{left:var(--space-3);color:#fff6;pointer-events:none;font-size:14px;font-weight:500;position:absolute;top:50%;transform:translateY(-50%)}.penalty-calc__turnover-input .penalty-calc__input{padding-left:28px}.penalty-calc__select{width:110px;height:44px;padding:0 var(--space-3);color:#fff;border-radius:var(--radius-md);cursor:pointer;appearance:none;transition:border-color var(--duration-fast)var(--ease-out),box-shadow var(--duration-fast)var(--ease-out);background:#ffffff0f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 10px center no-repeat;border:1px solid #ffffff1f;outline:none;padding-right:28px;font-family:inherit;font-size:14px;font-weight:500}.penalty-calc__select:focus{border-color:#3c83f6;box-shadow:0 0 0 3px #3c83f626}.penalty-calc__select option{color:#fff;background:#141f38}.penalty-calc__divider{background:#ffffff14;border:none;height:1px;margin:0}.penalty-calc__error{color:#ef4343;margin:0;font-size:12px;font-weight:500}.penalty-calc__section-label{color:#ffffffd9;font-size:15px;font-weight:600}.penalty-calc__section-helper{color:#fff6;margin:0;font-size:13px;font-weight:400;line-height:1.5}.penalty-calc__use-cases{gap:var(--space-2);grid-template-columns:repeat(2,1fr);display:grid}.penalty-calc__use-case{align-items:flex-start;gap:var(--space-3);padding:var(--space-3)var(--space-4);border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast)var(--ease-out),border-color var(--duration-fast)var(--ease-out);-webkit-user-select:none;user-select:none;background:#ffffff08;border:1px solid #ffffff14;display:flex}.penalty-calc__use-case:hover{background:#ffffff0f;border-color:#ffffff26}.penalty-calc__use-case--selected{background:#3c83f614;border-color:#3c83f659}.penalty-calc__use-case--selected:hover{background:#3c83f61f;border-color:#3c83f673}.penalty-calc__use-case-check{width:18px;height:18px;transition:background var(--duration-fast)var(--ease-out),border-color var(--duration-fast)var(--ease-out);border:2px solid #fff3;border-radius:4px;flex-shrink:0;margin-top:2px;position:relative}.penalty-calc__use-case--selected .penalty-calc__use-case-check{background:#3c83f6;border-color:#3c83f6}.penalty-calc__use-case--selected .penalty-calc__use-case-check:after{content:"";border:2px solid #fff;border-width:0 2px 2px 0;width:4px;height:8px;position:absolute;top:2px;left:5px;transform:rotate(45deg)}.penalty-calc__use-case-text{flex-direction:column;gap:2px;min-width:0;display:flex}.penalty-calc__use-case-name{color:#ffffffd9;font-size:13px;font-weight:600}.penalty-calc__use-case-desc{color:#fff6;font-size:11px;font-weight:400;line-height:1.4}.penalty-calc__use-case-risk{border-radius:var(--radius-full);text-transform:uppercase;letter-spacing:.06em;width:fit-content;margin-top:2px;padding:1px 6px;font-size:9px;font-weight:700;display:inline-flex}.penalty-calc__use-case-risk--prohibited{color:#f15b5b;background:#ef43431f}.penalty-calc__use-case-risk--high{color:#f6a823;background:#f59f0a1f}.penalty-calc__use-case-risk--limited{color:#6da2f8;background:#3c83f61f}.penalty-calc__use-case-risk--minimal{color:#14eba3;background:#10b77f1f}.penalty-calc__submit{color:#fff;border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-2);width:100%;height:48px;box-shadow:0 0 20px #ef434333,var(--shadow-md);transition:transform var(--duration-fast)var(--ease-out),box-shadow var(--duration-fast)var(--ease-out);background:linear-gradient(135deg,#ed2c2c 0%,#ee5b2b 100%);border:none;font-family:inherit;font-size:15px;font-weight:600;display:flex}.penalty-calc__submit:hover{box-shadow:0 0 30px #ef43434d,var(--shadow-lg);transform:translateY(-2px)}.penalty-calc__submit:disabled{opacity:.5;cursor:not-allowed;transform:none}.penalty-calc__loading{width:100%;animation:fade-in var(--duration-normal)var(--ease-out)forwards}.penalty-calc__loading-card{border-radius:var(--radius-xl);padding:var(--space-12)var(--space-8);-webkit-backdrop-filter:blur(16px);align-items:center;gap:var(--space-4);background:#ffffff0d;border:1px solid #ffffff1a;flex-direction:column;display:flex}[data-theme=dark] .penalty-calc__loading-card{background:#ffffff0a;border-color:#ffffff14}.penalty-calc__spinner{border-radius:var(--radius-full);border:3px solid #ef434326;border-top-color:#ef4343;width:40px;height:40px;animation:.6s linear infinite spinner-rotate}.penalty-calc__loading-text{color:#fff9;font-size:15px;font-weight:500}.penalty-calc__results{gap:var(--space-6);width:100%;animation:fade-in var(--duration-normal)var(--ease-out)forwards;flex-direction:column;display:flex}.penalty-calc__result-card{border-radius:var(--radius-xl);padding:var(--space-8);-webkit-backdrop-filter:blur(16px);gap:var(--space-6);background:#ffffff0d;border:1px solid #ffffff1a;flex-direction:column;display:flex}[data-theme=dark] .penalty-calc__result-card{background:#ffffff0a;border-color:#ffffff14}.penalty-calc__risk-badge{justify-content:center;align-items:center;gap:var(--space-3);padding:var(--space-6);border-radius:var(--radius-lg);text-align:center;flex-direction:column;display:flex}.penalty-calc__risk-badge--prohibited{background:#ef434314;border:1px solid #ef434333}.penalty-calc__risk-badge--high{background:#f59f0a14;border:1px solid #f59f0a33}.penalty-calc__risk-badge--limited{background:#3c83f614;border:1px solid #3c83f633}.penalty-calc__risk-badge--minimal{background:#10b77f14;border:1px solid #10b77f33}.penalty-calc__risk-label{text-transform:uppercase;letter-spacing:.08em;color:#ffffff73;font-size:11px;font-weight:600}.penalty-calc__risk-icon{border-radius:var(--radius-full);justify-content:center;align-items:center;width:48px;height:48px;display:flex}.penalty-calc__fine-amount{letter-spacing:-.03em;font-variant-numeric:tabular-nums;font-size:clamp(32px,5vw,48px);font-weight:800;line-height:1.1}.penalty-calc__fine-amount--prohibited{color:#f15b5b}.penalty-calc__fine-amount--high{color:#f6a823}.penalty-calc__fine-amount--limited{color:#6da2f8}.penalty-calc__fine-amount--minimal{color:#14eba3}.penalty-calc__fine-desc{color:#ffffff80;font-size:14px;font-weight:500}.penalty-calc__explanation{padding:var(--space-4);border-radius:var(--radius-md);background:#ffffff08;border:1px solid #ffffff0f}.penalty-calc__explanation-title{color:#ffffffd9;margin:0 0 var(--space-2);font-size:14px;font-weight:700}.penalty-calc__explanation-text{color:#ffffff8c;margin:0;font-size:13px;font-weight:400;line-height:1.7}.penalty-calc__stats{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.penalty-calc__stat{align-items:center;gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-md);background:#ffffff08;flex-direction:column;display:flex}.penalty-calc__stat-value{color:#ffffffe6;font-size:22px;font-weight:800}.penalty-calc__stat-label{color:#fff6;text-align:center;font-size:11px;font-weight:500}.penalty-calc__actions{gap:var(--space-3);padding-top:var(--space-2);border-top:1px solid #ffffff0f;flex-direction:column;display:flex}.penalty-calc__action-primary{color:#fff;border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-2);width:100%;height:48px;box-shadow:0 0 20px #3c83f633,var(--shadow-md);transition:transform var(--duration-fast)var(--ease-out),box-shadow var(--duration-fast)var(--ease-out);background:linear-gradient(135deg,#2474f5 0%,#2b4bee 100%);border:none;font-family:inherit;font-size:15px;font-weight:600;text-decoration:none;display:flex}.penalty-calc__action-primary:hover{box-shadow:0 0 30px #3c83f64d,var(--shadow-lg);transform:translateY(-2px)}.penalty-calc__action-row{gap:var(--space-3);display:flex}.penalty-calc__action-secondary{color:#ffffffb3;border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-2);height:44px;transition:background var(--duration-fast)var(--ease-out),border-color var(--duration-fast)var(--ease-out),color var(--duration-fast)var(--ease-out);background:#ffffff0a;border:1px solid #ffffff26;flex:1;font-family:inherit;font-size:14px;font-weight:500;text-decoration:none;display:flex}.penalty-calc__action-secondary:hover{color:#fff;background:#ffffff14;border-color:#ffffff40}.penalty-calc__fine-print{color:#ffffff4d;text-align:center;margin:0;font-size:12px}.penalty-calc__countdown{border-radius:var(--radius-lg);padding:var(--space-4);background:#ef43430f;border:1px solid #ef434326}.penalty-calc__countdown-label{justify-content:center;align-items:center;gap:var(--space-2);margin-bottom:var(--space-3);color:#f15b5b;font-size:13px;font-weight:600;display:flex}.penalty-calc__countdown-grid{gap:var(--space-3);grid-template-columns:repeat(4,1fr);display:grid}.penalty-calc__countdown-unit{flex-direction:column;align-items:center;gap:2px;display:flex}.penalty-calc__countdown-value{color:#f15b5b;font-variant-numeric:tabular-nums;font-size:clamp(20px,3vw,28px);font-weight:800}.penalty-calc__countdown-unit-label{color:#fff6;text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:500}@media (max-width:767px){.penalty-calc{padding-top:calc(72px + var(--space-8));padding-left:var(--space-4);padding-right:var(--space-4)}.penalty-calc__card{padding:var(--space-6)}.penalty-calc__field-row,.penalty-calc__use-cases{grid-template-columns:1fr}.penalty-calc__result-card{padding:var(--space-6)}.penalty-calc__stats{grid-template-columns:1fr}.penalty-calc__action-row{flex-direction:column}}
