.home-page{padding:16px 0;width:100%}@media (min-width: 768px){.home-page{padding:24px 0}}@media (min-width: 992px){.home-page{max-width:900px;margin:0 auto}}.header{background-color:#4a6cf7;color:#fff;padding:12px 16px;box-shadow:0 2px 4px #0000001a;z-index:1000;position:relative;height:60px;display:flex;align-items:center}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;width:100%}.app-title-container{display:flex;align-items:center;gap:10px}.app-logo{width:28px;height:28px}.app-title{margin:0;font-size:20px;font-weight:600}.app-title-link{color:#fff;text-decoration:none;display:flex;align-items:center}.app-title-link:hover{text-decoration:none}.header-links{display:flex;align-items:center;gap:16px}.header-link{color:#fff;text-decoration:none;font-size:14px;font-weight:500;padding:4px 8px;border-radius:4px;transition:background-color .2s}.header-link:hover{background-color:#ffffff1a;text-decoration:none}.menu-toggle{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.app-title{font-size:18px}.header{height:50px}.header-link{font-size:12px}.app-logo{width:24px;height:24px}}.sidebar{position:fixed;top:0;left:0;height:100%;width:300px;background-color:#fff;box-shadow:2px 0 8px #0000001a;z-index:1002;overflow-y:auto;display:flex;flex-direction:column;transform:translate(-100%);transition:transform .3s ease}.sidebar.open{transform:translate(0)}.sidebar-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:1001}.sidebar-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e9ecef;position:sticky;top:0;background-color:#fff;z-index:1}.sidebar-title{margin:0;font-size:18px;font-weight:600}.sidebar-close{background:none;border:none;font-size:24px;cursor:pointer;padding:0;line-height:1}.sidebar-content{padding:16px;flex:1;overflow-y:auto}@media (min-width: 992px){.sidebar{position:static;width:300px;min-width:300px;transform:none;box-shadow:none;border-right:1px solid #e9ecef;height:auto;z-index:1}}.saved-configs-list{width:100%}.configs-title{margin-top:0;margin-bottom:16px;font-size:16px;font-weight:500}.configs-list{max-height:300px;overflow-y:auto;margin-bottom:16px;border:1px solid #e9ecef;border-radius:4px}.config-item{padding:12px;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background-color .2s}.config-item:last-child{border-bottom:none}.config-item:hover{background-color:#f8f9fa}.config-item.selected{background-color:#e9f0ff}.config-name{font-weight:500;margin-bottom:4px}.config-details{display:flex;justify-content:space-between;font-size:12px;color:#6c757d}.configs-actions{display:flex;gap:8px;margin-bottom:16px}.configs-import-export{display:flex;gap:8px;margin-top:16px;border-top:1px solid #e9ecef;padding-top:16px}.no-configs{padding:24px;text-align:center;color:#6c757d;font-style:italic;margin-bottom:16px}.import-button{cursor:pointer}.import-error{color:#dc3545;font-size:14px;margin-top:8px;text-align:center}@media (max-width: 576px){.configs-actions,.configs-import-export{flex-direction:column}}.card{background-color:#fff;border-radius:8px;box-shadow:0 2px 8px #0000001a;padding:24px;overflow-x:hidden}@media (max-width: 576px){.card{padding:16px}}.button{padding:8px 16px;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s,border-color .2s;border:none}.button.primary{background-color:#4a6cf7;color:#fff}.button.primary:hover{background-color:#3a5ce5}.button.secondary{background-color:#6c757d;color:#fff}.button.secondary:hover{background-color:#5a6268}.button.outline{background-color:transparent;border:1px solid #4a6cf7;color:#4a6cf7}.button.outline:hover{background-color:#4a6cf71a}.button.full-width{width:100%}.button:disabled{opacity:.6;cursor:not-allowed}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#fff;border-radius:8px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 4px 12px #00000026}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid #e9ecef}.modal-title{margin:0;font-size:18px;font-weight:600}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;padding:0;line-height:1}.modal-body{padding:16px}.modal-footer{padding:16px;border-top:1px solid #e9ecef;display:flex;justify-content:flex-end;gap:8px}.qr-modal-content{text-align:center}.qr-export .qr-display{margin:24px 0}.qr-export .qr-display img{max-width:280px;height:auto;border-radius:12px;margin-bottom:16px;box-shadow:0 4px 12px #0000001a}.qr-export .qr-display p{color:#666;font-size:14px;margin:0;line-height:1.5}.qr-loading{padding:48px 24px;color:#666;font-size:16px}.qr-import .qr-start{padding:24px 0}.qr-import .qr-start .button{margin:0 8px}.qr-import .qr-start p{margin-bottom:16px;color:#333;font-size:16px;line-height:1.5}.qr-import .qr-start p:first-child{font-weight:500;margin-bottom:8px}.camera-note{font-size:13px;color:#888;margin-bottom:24px}.scan-instruction{color:#666;font-size:14px;margin:16px 0;font-weight:500}.manual-input{padding:24px 0;text-align:center}.manual-input p{margin-bottom:16px;color:#333;font-size:16px;font-weight:500}.manual-input textarea{border:1px solid #e0e0e0;border-radius:8px;padding:12px;font-family:Courier New,monospace;font-size:13px;resize:vertical;transition:border-color .2s ease}.manual-input textarea:focus{outline:none;border-color:#ccc}.manual-input div,.scanner-controls{display:flex;gap:16px;justify-content:center;margin-top:20px}.qr-scanner{margin:24px 0}.qr-video{width:100%;max-width:320px;height:240px;border-radius:12px;margin-bottom:16px;object-fit:cover;background-color:#f5f5f5;box-shadow:0 2px 8px #0000001a}.scan-success{background-color:#f0f9f0;color:#2d5a2d;padding:12px 16px;border-radius:8px;margin:16px 0;font-weight:500}.qr-error{background-color:#fef2f2;color:#dc2626;padding:12px 16px;border-radius:8px;margin:16px 0;font-weight:500}.modal-actions{margin-top:24px;display:flex;justify-content:center;gap:12px}@media (max-width: 768px){.qr-video{max-width:280px;height:210px}.qr-export .qr-display img{max-width:240px}.manual-input div,.scanner-controls{flex-direction:column;align-items:center}}.import-export-modal{text-align:center}.import-export-modal p{margin-bottom:30px;color:#666;font-size:16px}.option-buttons{display:flex;gap:20px;justify-content:center}.option-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;border:1px solid #e0e0e0;border-radius:8px;background:transparent;cursor:pointer;transition:all .2s ease;min-width:120px}.option-btn:hover{border-color:#ccc;transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}.option-btn:active{transform:translateY(0)}.option-icon{font-size:24px;display:block}.option-label{font-size:14px;color:#333;font-weight:500}@media (max-width: 768px){.option-buttons{flex-direction:column;gap:15px;align-items:center}.option-btn{width:100%;max-width:200px}}.layout{display:flex;flex-direction:column;min-height:100vh}.layout-content{display:flex;flex:1}.main-content{flex:1;padding:16px;background-color:#f8f9fa}.container{max-width:1200px;margin:0 auto}@media (min-width: 992px){.layout-content{flex-direction:row}.main-content{padding:24px}}.hash-generator{max-width:800px;margin:0 auto}.button-group{display:flex;gap:12px;margin-top:20px;margin-bottom:20px}.hash-result{margin-top:24px;border-top:1px solid #e9ecef;padding-top:16px}.hash-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.hash-header h3{margin:0;font-size:16px;font-weight:500}.hash-display{padding:12px;background-color:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;font-family:monospace;word-break:break-all;margin-bottom:16px;min-height:24px}.hash-options{display:flex;flex-wrap:wrap;gap:16px;align-items:center}.hash-option{display:flex;align-items:center;gap:8px}.hash-option span{font-size:14px}.secondary-salt{margin-bottom:20px;padding:8px 12px;background-color:#e9ecef;border-radius:4px;font-size:14px}.secondary-salt-value{font-weight:500;font-family:monospace}.save-config{margin-top:24px;border-top:1px solid #e9ecef;padding-top:16px;display:flex;justify-content:flex-end}.save-modal-content{padding:8px 0}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.save-message{margin-top:12px;padding:8px;border-radius:4px;font-size:14px}.save-message.success{background-color:#d4edda;color:#155724}.save-message.error{background-color:#f8d7da;color:#721c24}@media (max-width: 576px){.button-group{flex-direction:column}.hash-options{flex-direction:column;align-items:flex-start}}.input-container{margin-bottom:16px;width:100%}.input-container label{display:block;margin-bottom:6px;font-size:14px;font-weight:500}.input-wrapper{position:relative;display:flex;align-items:center}.input-field{width:100%;padding:8px 12px;font-size:14px;border:1px solid #ced4da;border-radius:4px;transition:border-color .2s}.input-field:focus{outline:none;border-color:#4a6cf7;box-shadow:0 0 0 2px #4a6cf733}.password-toggle{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:16px;padding:0;display:flex;align-items:center;justify-content:center}.input-field:disabled{background-color:#f8f9fa;cursor:not-allowed}.dropdown-container{position:relative;width:100%;margin-bottom:20px}.dropdown-container label{display:block;margin-bottom:8px;font-size:14px;font-weight:500}.dropdown-select-wrapper{position:relative;width:100%}.dropdown-select{width:100%;padding:10px 30px 10px 12px;font-size:14px;border:1px solid #ced4da;border-radius:4px;background-color:#fff;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;min-height:40px}.dropdown-select:focus{outline:none;border-color:#4a6cf7;box-shadow:0 0 0 2px #4a6cf733}.dropdown-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#6c757d;font-size:10px}@media (max-width: 576px){.dropdown-container{width:100%}}.visualization-selector{margin-top:24px;margin-inline:auto;max-width:800px}.visualization-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;min-height:40px}.visualization-header h3{margin:0 10px 0 0;font-size:16px;font-weight:500;white-space:nowrap}.visualization-content{display:flex;justify-content:center;width:100%;max-width:400px;margin:0 auto;overflow-x:hidden}@media (max-width: 576px){.visualization-header{flex-direction:column;align-items:flex-start;gap:12px;min-height:auto}.visualization-content{max-width:100%}}.keypad-visualizer{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px;margin-left:auto;margin-right:auto}.current-input{margin-bottom:16px;font-size:16px;text-align:center;min-height:24px;width:100%}.input-value{font-weight:500;font-family:monospace}.keypad{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px;max-width:240px;width:100%}.keypad-row{display:flex;gap:8px;width:100%;justify-content:center}.keypad-key{width:60px;height:60px;display:flex;align-items:center;justify-content:center;font-size:20px;background-color:#f8f9fa;border:1px solid #ced4da;border-radius:4px;cursor:pointer;transition:background-color .2s}.keypad-key:hover{background-color:#e9ecef}.keypad-key:active{background-color:#dee2e6}.keypad-actions{display:flex;gap:12px;justify-content:center;width:100%}@media (max-width: 576px){.keypad{max-width:100%}.keypad-key{width:100%;height:50px}.keypad-actions{flex-direction:column}}.android-pattern-visualizer{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px;margin-left:auto;margin-right:auto;overflow-x:hidden}.pattern-container{display:flex;justify-content:center;margin-bottom:16px;width:100%;max-width:100%;overflow:hidden;min-height:280px}.pattern-canvas{border:1px solid #ced4da;border-radius:4px;touch-action:none;background-color:#f8f9fa;max-width:100%}.pattern-actions{display:flex;gap:12px;justify-content:center;width:100%}@media (max-width: 576px){.pattern-actions{flex-direction:column}.android-pattern-visualizer{max-width:100%}.pattern-container{min-height:240px}}.bank-vault-visualizer{margin-bottom:20px;display:flex;flex-direction:column;align-items:center;width:100%;max-width:300px;margin-left:auto;margin-right:auto}.combination-display{margin-bottom:16px;font-size:16px;text-align:center;width:100%;min-height:24px}.combination-value{font-weight:500;font-family:monospace}.vault-container{display:flex;justify-content:center;margin-bottom:16px;width:100%}.vault-canvas{border:1px solid #ced4da;border-radius:50%;touch-action:none;background-color:#f8f9fa;cursor:grab;max-width:100%}.vault-canvas:active{cursor:grabbing}.vault-instructions{text-align:center;margin-bottom:16px;font-size:14px;color:#6c757d;width:100%;min-height:21px}.vault-actions{display:flex;gap:12px;justify-content:center;width:100%}@media (max-width: 576px){.vault-actions{flex-direction:column}}.intent-page{max-width:800px;margin:0 auto;padding:24px 0}.intent-title{margin-top:0;margin-bottom:24px;font-size:24px;color:#333;text-align:center}.intent-section{margin-bottom:32px}.intent-section h3{font-size:18px;margin-bottom:16px;color:#4a6cf7}.intent-section p{margin-bottom:16px;line-height:1.6}.intent-section ul{padding-left:20px;margin-bottom:16px}.intent-section li{margin-bottom:8px;line-height:1.5}.highlight-section{background-color:#f8f9ff;border-left:4px solid #4a6cf7;padding:16px 20px;border-radius:4px}@media (max-width: 576px){.intent-page{padding:16px 0}.intent-title{font-size:20px}.intent-section h3{font-size:16px}}.splash-screen{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .5s ease-out}.splash-screen.hidden{opacity:0;pointer-events:none}.splash-logo{width:120px;height:120px;margin-bottom:20px}.splash-title{font-size:24px;font-weight:700;margin-bottom:10px}.splash-spinner{width:40px;height:40px;border:4px solid rgba(0,0,0,.1);border-radius:50%;border-top-color:#000;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}*{box-sizing:border-box}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:#212529;background-color:#f8f9fa;line-height:1.5;overflow-x:hidden;width:100%;max-width:100vw}a{color:#4a6cf7;text-decoration:none}a:hover{text-decoration:underline}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}