*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #818cf8;--primary-light: #a5b4fc;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border-color: #334155;--bg-white: #1e293b;--bg-gray: #0f172a;--bg-light: #334155}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#0f172a;color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh}#root{max-width:100%;margin:0 auto;padding:0;position:relative;min-height:100vh}#root:before{content:"";position:fixed;top:0;left:-20%;width:60%;height:100%;background:radial-gradient(ellipse at center,rgba(56,189,248,.12) 0%,transparent 70%);pointer-events:none;z-index:0}#root:after{content:"";position:fixed;top:20%;right:-20%;width:50%;height:80%;background:radial-gradient(ellipse at center,rgba(139,92,246,.12) 0%,transparent 70%);pointer-events:none;z-index:0}.navbar{position:relative;z-index:10;padding:1rem 2rem}.navbar-content{max-width:1100px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.navbar-logo{display:flex;align-items:center}.navbar-logo img{height:32px;width:auto;filter:brightness(0) invert(1)}.navbar-contact{display:inline-flex;align-items:center;padding:.5rem 1.25rem;background:#38bdf81a;border:1px solid rgba(56,189,248,.3);border-radius:6px;color:#38bdf8;font-size:.875rem;font-weight:500;text-decoration:none;transition:all .15s ease}.navbar-contact:hover{background:#38bdf833;border-color:#38bdf880}.main-content{max-width:1100px;margin:0 auto;padding:0 2rem 3rem;position:relative;z-index:1}.hero{text-align:center;padding:5rem 2rem 3rem;position:relative;z-index:1;max-width:1100px;margin:0 auto}h1{font-size:4.5rem;font-weight:700;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-.03em;color:#f8fafc}h1 .highlight{background:linear-gradient(135deg,#38bdf8,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#94a3b8;font-size:1.125rem;max-width:600px;margin:0 auto;line-height:1.8}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:#38bdf81a;border:1px solid rgba(56,189,248,.2);padding:.5rem 1rem;border-radius:100px;font-size:.8125rem;font-weight:500;color:#38bdf8;margin-bottom:1.5rem}.hero-badge:before{content:"🔐"}.card{background:var(--bg-white);border:1px solid var(--border-color);border-radius:8px;padding:1.25rem}.tabs{display:inline-flex;gap:0;margin-bottom:1.25rem;background:var(--bg-light);padding:4px;border-radius:8px}.tab{padding:.5rem 1rem;border:none;background:transparent;font-size:.875rem;font-weight:500;color:var(--text-secondary);cursor:pointer;border-radius:6px;transition:all .15s ease}.tab:hover{color:var(--text-primary)}.tab.active{background:var(--bg-white);color:var(--text-primary);box-shadow:0 1px 2px #0000000d}.password-input-container{position:relative;margin-bottom:.5rem}.password-input{width:100%;padding:.75rem 3rem .75rem 1rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .15s ease;background:var(--bg-white);color:var(--text-primary)}.password-input.password-input-readonly{padding-right:5rem;background:var(--bg-gray);cursor:default}.password-input:focus{outline:none;border-color:var(--primary-color)}.password-input.password-input-readonly:focus{border-color:var(--border-color)}.password-input::placeholder{color:var(--text-muted)}.password-actions{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.375rem}.password-generate-btn{background:var(--bg-light);border:1px solid var(--border-color);cursor:pointer;color:var(--text-secondary);padding:.375rem;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .15s ease}.password-generate-btn:hover{color:var(--text-primary);background:var(--border-color);border-color:var(--text-muted)}.password-generate-btn:active{transform:scale(.95)}.password-action-btn{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:.375rem;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .15s ease}.password-action-btn:hover{color:var(--text-primary);background:var(--bg-light)}.password-action-btn:active{transform:scale(.95)}.input-hint{font-size:.75rem;color:var(--text-muted);margin-top:.5rem}.char-counts{display:grid;grid-template-columns:repeat(2,1fr);gap:.875rem;margin-top:1.25rem}.char-count-item{display:flex;align-items:center;justify-content:space-between}.char-count-label{font-size:.8125rem;color:var(--text-primary);font-weight:500}.char-count-label small{display:block;font-size:.75rem;color:var(--text-muted);font-weight:400}.char-count-value{width:48px;padding:.4rem .5rem;text-align:center;border:1px solid var(--border-color);border-radius:6px;font-size:.875rem;font-weight:500;background:var(--bg-white);color:var(--text-primary);-moz-appearance:textfield}.char-count-value::-webkit-outer-spin-button,.char-count-value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.char-count-value:focus{outline:none;border-color:var(--primary-color)}.section-row{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-bottom:2.5rem}.entropy-display{padding-top:.5rem}.entropy-label{font-size:2rem;color:var(--text-secondary);margin-bottom:.25rem;font-weight:600}.entropy-value{font-size:4.5rem;font-weight:700;color:var(--primary-color);line-height:1;letter-spacing:-.02em}.entropy-stats{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}.entropy-stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.025em;margin-bottom:.125rem}.entropy-stat-value{font-size:1.125rem;font-weight:500;color:var(--text-primary)}.select-container{margin-bottom:1rem}.select-label{display:block;font-size:.8125rem;color:var(--text-primary);font-weight:500;margin-bottom:.375rem}.select{width:100%;padding:.625rem 2.5rem .625rem .875rem;border:1px solid var(--border-color);border-radius:8px;font-size:.875rem;font-family:inherit;background:var(--bg-white);color:var(--text-primary);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}.select:focus{outline:none;border-color:var(--primary-color)}.select-hint{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}.select-hint a{color:#38bdf8;text-decoration:none}.select-hint a:hover{text-decoration:underline;color:#7dd3fc}.input-group{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}.input-container{display:flex;flex-direction:column}.input-label{font-size:.8125rem;color:var(--text-primary);font-weight:500;margin-bottom:.375rem}.input{padding:.625rem .875rem;border:1px solid var(--border-color);border-radius:8px;font-size:.875rem;font-family:inherit;background:var(--bg-white);color:var(--text-primary)}.input:focus{outline:none;border-color:var(--primary-color)}.input-with-unit{display:flex;align-items:stretch;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;background:var(--bg-white)}.input-with-unit .input{border:none;border-radius:0;flex:1;min-width:0}.input-with-unit .input:focus{box-shadow:none}.input-with-unit .unit{padding:.625rem .75rem;background:var(--bg-light);color:var(--text-secondary);font-size:.875rem;display:flex;align-items:center;white-space:nowrap}.input-with-unit .unit:first-child{border-right:1px solid var(--border-color)}.input-with-unit .unit:last-child{border-left:1px solid var(--border-color)}.cost-display{padding-top:.5rem}.cost-label{font-size:2rem;color:var(--text-secondary);margin-bottom:.25rem;font-weight:600}.cost-value{font-size:4.5rem;font-weight:700;color:var(--primary-color);line-height:1;letter-spacing:-.02em}.cost-stats{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}.cost-stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.025em;margin-bottom:.125rem}.cost-stat-value{font-size:1.125rem;font-weight:500;color:var(--text-primary)}.risk-value-high{background:linear-gradient(135deg,#f87171,#fb923c,#f87171);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.risk-value-medium{background:linear-gradient(135deg,#fbbf24,#fb923c,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.risk-value-low{background:linear-gradient(135deg,#4ade80,#22d3ee,#4ade80);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.cost-table-section{margin-top:0}.cost-table-section p{font-size:.875rem;color:var(--text-secondary);margin-bottom:1.5rem;line-height:1.7;max-width:900px}.cost-chart-wrapper{margin-bottom:1.5rem;background:var(--bg-card);border-radius:8px;padding:1rem;border:1px solid var(--border-color)}.cost-table-wrapper{overflow-x:auto}.cost-table{width:100%;border-collapse:collapse;font-size:.875rem}.cost-table th,.cost-table td{padding:.875rem 1rem;text-align:left;border-bottom:1px solid var(--border-color)}.cost-table th{font-weight:500;color:var(--text-muted);text-transform:uppercase;font-size:.6875rem;letter-spacing:.05em;background:var(--bg-light)}.cost-table th:first-child{border-top-left-radius:8px}.cost-table th:last-child{border-top-right-radius:8px}.cost-table td{color:var(--text-primary)}.cost-table tbody tr:hover{background:var(--bg-light)}.cost-table td:first-child{font-weight:600;background:var(--bg-white)}.cost-table .len-column,.cost-table td:first-child{width:3rem;min-width:3rem;max-width:4rem;text-align:center}.cost-table td.risk-high{background:#ef444426;color:#f87171}.cost-table td.risk-medium{background:#f59e0b26;color:#fbbf24}.cost-table td.risk-low{background:#22c55e26;color:#4ade80}.cost-table tbody tr:hover td.risk-high{background:#ef444440}.cost-table tbody tr:hover td.risk-medium{background:#f59e0b40}.cost-table tbody tr:hover td.risk-low{background:#22c55e40}.cost-table-legend{display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-secondary)}.legend-color{width:16px;height:16px;border-radius:4px}.legend-color.risk-high{background:#ef44444d;border:1px solid rgba(248,113,113,.5)}.legend-color.risk-medium{background:#f59e0b4d;border:1px solid rgba(251,191,36,.5)}.legend-color.risk-low{background:#22c55e4d;border:1px solid rgba(74,222,128,.5)}.popover-container{position:relative;display:inline}.popover-trigger{cursor:pointer}.popover-content{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%);background:#475569;color:#f1f5f9;padding:.75rem 1rem;border-radius:8px;font-size:.8125rem;line-height:1.5;width:max-content;max-width:280px;z-index:100;box-shadow:0 4px 12px #0006;animation:popoverFadeIn .15s ease}@keyframes popoverFadeIn{0%{opacity:0;transform:translate(-50%) translateY(4px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.popover-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #475569}.faq-section{margin-top:4rem;padding-top:3rem;border-top:1px solid var(--border-color)}.faq-title{font-size:2rem;font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:2rem}.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}.faq-item{background:var(--bg-white);border:1px solid var(--border-color);border-radius:12px;overflow:hidden;transition:border-color .15s ease}.faq-item:hover{border-color:var(--text-muted)}.faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;background:none;border:none;font-size:.9375rem;font-weight:500;color:var(--text-primary);text-align:left;cursor:pointer;font-family:inherit}.faq-question:hover{color:#38bdf8}.faq-icon{flex-shrink:0;color:var(--text-muted);transition:transform .2s ease}.faq-item.open .faq-icon{transform:rotate(180deg)}.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}.faq-item.open .faq-answer{max-height:300px}.faq-answer p{padding:0 1.25rem 1.25rem;font-size:.875rem;color:var(--text-secondary);line-height:1.7}footer{margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border-color);text-align:center;font-size:.8125rem;color:var(--text-muted)}.calc-row{display:grid;grid-template-columns:2fr 1fr;gap:3rem;align-items:center;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid var(--border-color)}@media(max-width:768px){.hide-mobile{display:none!important}.navbar{padding:1rem}.navbar-logo img{height:24px}.navbar-contact{padding:.375rem 1rem;font-size:.8125rem}.hero{padding:2rem 1rem;margin:0}.main-content{padding:0 1rem 2rem}h1{font-size:2.5rem}.hero-badge{font-size:.75rem;padding:.375rem .75rem}.subtitle{margin-bottom:2rem}.calc-row{grid-template-columns:1fr;gap:1.5rem}.result-panel{order:-1}.section-row{grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}.char-counts{grid-template-columns:1fr}.input-group{grid-template-columns:1fr;gap:.875rem}.input-group .select-container,.input-group .input-container{width:100%}.entropy-value,.cost-value{font-size:2.5rem}.cost-table{font-size:.75rem}.cost-table th,.cost-table td{padding:.625rem .5rem}.cost-table-legend{gap:1rem}.legend-item{font-size:.75rem}.faq-grid{grid-template-columns:1fr}.faq-title{font-size:1.5rem}}