*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0c0c0e;--bg2:#131316;--bg3:#1a1a1f;--surface:#1e1e24;--surface2:#25252d;--border:hsla(0,0%,100%,.07);--border2:hsla(0,0%,100%,.12);--text:#f0f0f5;--text2:#8a8a9e;--text3:#545468;--accent:#6c63ff;--accent2:#8b84ff;--accent-dim:rgba(108,99,255,.12);--green:#3ecf8e;--green-dim:rgba(62,207,142,.12);--red:#ff6b6b;--red-dim:hsla(0,100%,71%,.12);--amber:#fbbf24;--amber-dim:rgba(251,191,36,.1);--font-display:"Syne",sans-serif;--font-mono:"DM Mono",monospace;--radius:10px;--radius-lg:14px}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--text);font-family:var(--font-mono);line-height:1.6}.layout,body{min-height:100vh}.layout{display:grid;grid-template-columns:240px 1fr}.sidebar{background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;height:100vh;overflow-y:auto;position:sticky;top:0}.logo{border-bottom:1px solid var(--border);padding:28px 20px 20px}.logo-mark{color:var(--text);font-family:var(--font-display);font-size:20px;font-weight:800;gap:8px;letter-spacing:-.5px;text-decoration:none;text-transform:none}.logo-icon,.logo-mark{align-items:center;display:flex}.logo-icon{background:var(--accent);border-radius:7px;font-size:14px;height:28px;justify-content:center;width:28px}.logo-sub{color:var(--text3);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;margin-top:4px;text-transform:uppercase}.nav{flex:1;padding:16px 12px}.nav-label{color:var(--text3);font-size:9px;letter-spacing:.12em;margin:14px 0 6px;padding:0 8px;text-transform:uppercase}.nav-item{align-items:center;background:none;border:none;border-radius:8px;color:var(--text2);cursor:pointer;display:flex;font-family:var(--font-mono);font-size:12.5px;gap:10px;padding:8px 10px;text-align:left;text-decoration:none;text-transform:none;transition:all .15s;width:100%}.nav-item:hover{background:var(--surface);color:var(--text)}.nav-item.active{background:var(--accent-dim);border:1px solid rgba(108,99,255,.2);color:var(--accent2)}.nav-item .icon{flex-shrink:0;height:18px;opacity:.7;width:18px}.nav-item.active .icon{opacity:1}.sidebar-footer{border-top:1px solid var(--border);color:var(--text3);font-size:10px;padding:16px 20px}.main{display:flex;flex-direction:column}.topbar{align-items:center;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;height:56px;justify-content:space-between;padding:0 32px;position:sticky;top:0;z-index:10}.topbar-title{color:var(--text);font-family:var(--font-display);font-size:15px;font-weight:600}.topbar-meta{color:var(--text3);font-size:11px}.content{flex:1;padding:32px}.tool-panel{animation:fadeIn .2s ease;display:none}.tool-panel.active{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.panel-header{margin-bottom:24px}.panel-title{color:var(--text);font-family:var(--font-display);font-size:22px;font-weight:700;margin-bottom:4px}.panel-desc{color:var(--text3);font-size:12px}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px;padding:20px}.card-header{align-items:center;display:flex;justify-content:space-between;margin-bottom:14px}.card-label{color:var(--text3);font-size:10px;letter-spacing:.1em;text-transform:uppercase}.two-col{display:grid;gap:16px;grid-template-columns:1fr 1fr}input[type=number],input[type=text],select,textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);font-size:12.5px;line-height:1.6;outline:none;padding:12px 14px;resize:vertical;transition:border-color .15s;width:100%}input:focus,select:focus,textarea:focus{border-color:var(--accent)}textarea{min-height:140px}select option{background:var(--bg3)}.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.btn{align-items:center;background:var(--surface2);border:1px solid var(--border2);border-radius:8px;color:var(--text);cursor:pointer;display:flex;font-family:var(--font-mono);font-size:12px;gap:6px;padding:8px 16px;transition:all .15s}.btn:hover{background:var(--surface);border-color:var(--accent);color:var(--accent2)}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}.btn-green{background:var(--green-dim);border-color:#3ecf8e4d;color:var(--green)}.btn-green:hover{background:#3ecf8e33;border-color:var(--green);color:var(--green)}.btn-red{background:var(--red-dim);border-color:#ff6b6b4d;color:var(--red)}.btn-sm{border-radius:6px;font-size:10px;padding:5px 10px}.badge{align-items:center;border-radius:99px;display:inline-flex;font-family:var(--font-mono);font-size:10px;padding:3px 8px}.badge-green{background:var(--green-dim);color:var(--green)}.badge-red{background:var(--red-dim);color:var(--red)}.badge-amber{background:var(--amber-dim);color:var(--amber)}.badge-accent{background:var(--accent-dim);color:var(--accent2)}.output-box{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);font-family:var(--font-mono);font-size:12.5px;line-height:1.7;min-height:50px;padding:12px 14px;position:relative;white-space:pre-wrap;word-break:break-all}.output-box.success{border-color:#3ecf8e4d;color:var(--green)}.output-box.error{border-color:#ff6b6b4d;color:var(--red)}.output-placeholder{color:var(--text3);font-style:italic}.copy-btn{background:var(--surface2);border:1px solid var(--border2);border-radius:6px;color:var(--text2);cursor:pointer;font-family:var(--font-mono);font-size:10px;padding:4px 8px;position:absolute;right:8px;top:8px;transition:all .15s}.copy-btn:hover{border-color:var(--green);color:var(--green)}.stats-row{display:flex;gap:12px;margin:10px 0}.stat{background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:11px;padding:8px 14px}.stat span{color:var(--text);display:block;font-size:14px;font-weight:500}.divider{border:none;border-top:1px solid var(--border);margin:20px 0}.image-drop-zone{border:2px dashed var(--border2);border-radius:var(--radius-lg);color:var(--text3);cursor:pointer;font-size:12px;padding:40px 24px;position:relative;text-align:center;transition:all .2s}.image-drop-zone.drag-over,.image-drop-zone:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent2)}.image-drop-zone input[type=file]{cursor:pointer;inset:0;opacity:0;position:absolute}.image-preview{border-radius:8px;margin:12px 0;max-height:220px;max-width:100%;-o-object-fit:contain;object-fit:contain}.char-table{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));margin:10px 0}.char-cell{background:var(--bg3);border:1px solid var(--border);border-radius:6px;font-size:11px;padding:6px 8px;text-align:center}.char-cell .raw{color:var(--text);font-weight:500}.char-cell .enc{color:var(--accent2);font-size:10px}.json-tree{font-size:12px;line-height:1.8}.json-key{color:#7cb8ff}.json-str{color:var(--green)}.json-num{color:var(--amber)}.json-bool{color:#ff9e64}.json-null{color:var(--red)}.json-indent{padding-left:18px}.diff-line{border-radius:3px;display:block;font-size:12px;line-height:1.6;padding:1px 8px}.diff-add{background:#3ecf8e1a;color:var(--green)}.diff-rem{background:#ff6b6b1a;color:var(--red)}.diff-eq{color:var(--text3)}.color-swatch{border:1px solid var(--border2);border-radius:10px;flex-shrink:0;height:64px;width:64px}.color-row{align-items:center;display:flex;gap:16px}.color-values{display:grid;flex:1;gap:8px;grid-template-columns:1fr 1fr}.color-val{background:var(--bg3);border:1px solid var(--border);border-radius:8px;font-size:11px;padding:8px 12px}.color-val .label{color:var(--text3);font-size:9px;letter-spacing:.1em;text-transform:uppercase}.color-val .value{color:var(--text);font-size:13px;margin-top:2px}.hash-list{display:flex;flex-direction:column;gap:8px}.hash-item{align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:8px;display:grid;gap:12px;grid-template-columns:60px 1fr 80px;padding:10px 14px}.hash-alg{color:var(--text3);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.hash-val{color:var(--accent2);font-size:11px;word-break:break-all}@media(max-width:768px){.layout{grid-template-columns:1fr}.sidebar{flex-direction:row;flex-wrap:wrap;height:auto;position:relative}.two-col{grid-template-columns:1fr}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}.toast{background:var(--surface2);border:1px solid var(--green);border-radius:10px;bottom:24px;color:var(--green);font-family:var(--font-mono);font-size:12px;opacity:0;padding:10px 18px;pointer-events:none;position:fixed;right:24px;transform:translateY(10px);transition:all .25s;z-index:1000}.toast.show{opacity:1;transform:translateY(0)}.welcome-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-bottom:24px}.welcome-tool-btn{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text2);cursor:pointer;display:flex;font-family:var(--font-mono);font-size:12px;gap:10px;padding:13px 15px;text-align:left;text-decoration:none;text-transform:none;transition:all .15s;width:100%}.welcome-tool-btn:hover{background:var(--surface2);border-color:var(--border2);color:var(--text)}.welcome-tool-icon{display:flex;flex-shrink:0;font-size:15px;text-align:center;width:16px}.welcome-donate{align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;padding:18px 22px}.welcome-donate-left{align-items:center;display:flex;gap:12px}.welcome-donate-icon{flex-shrink:0;font-size:20px}.welcome-donate-title{color:var(--text);font-family:var(--font-display);font-size:13px;font-weight:600;margin-bottom:2px}.welcome-donate-desc{color:var(--text3);font-size:11px;line-height:1.5}.welcome-donate-btn{background:var(--surface2);border:1px solid var(--border2);border-radius:8px;color:var(--text2);cursor:pointer;display:inline-block;flex-shrink:0;font-family:var(--font-mono);font-size:11px;padding:7px 16px;text-decoration:none;transition:all .15s;white-space:nowrap}.welcome-donate-btn:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent2)}.welcome-feedback{margin-top:16px}.feedback-stars{display:flex;gap:6px;margin:12px 0 16px}.star-btn{align-items:center;background:none;border:1px solid var(--border);border-radius:6px;color:var(--text3);cursor:pointer;display:flex;font-size:16px;height:36px;justify-content:center;transition:all .15s;width:36px}.star-btn.active,.star-btn:hover{background:var(--amber-dim);border-color:var(--amber)}.feedback-textarea{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);font-size:12px;line-height:1.6;min-height:80px;outline:none;padding:10px 12px;resize:none;transition:border-color .15s;width:100%}.feedback-textarea:focus{border-color:var(--accent)}.feedback-textarea::-moz-placeholder{color:var(--text3)}.feedback-textarea::placeholder{color:var(--text3)}.feedback-row{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:10px}.feedback-hint{color:var(--text3);font-size:10px}.feedback-sent{align-items:center;color:var(--green);font-size:12px;gap:8px;padding:10px 0}.feedback-sent.error{color:var(--amber)}.feedback-sent-icon{font-size:18px}.pwg-check{align-items:center;background:var(--bg3);border:1px solid var(--border);border-radius:8px;color:var(--text2);cursor:pointer;display:flex;font-size:12px;gap:8px;padding:7px 10px;transition:all .15s;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pwg-check:hover{border-color:var(--border2);color:var(--text)}.pwg-check input[type=checkbox]{accent-color:var(--accent);flex-shrink:0;height:13px;width:13px}.pwg-check code{color:var(--accent2);font-family:var(--font-mono);font-size:10px}.pwg-outbox{font-size:12px;line-height:2;min-height:200px}.pwg-strength-bar{background:var(--bg3);border-radius:99px;height:4px;margin-top:12px;overflow:hidden}.pwg-strength-bar-progress{border-radius:99px;height:100%;transition:width .3s,background .3s;width:0}.pwg-stat-block{flex-wrap:wrap;gap:10px}.pwd-line,.pwg-stat-block{align-items:center;display:flex;justify-content:space-between}.pwd-line{border-bottom:1px solid var(--border);gap:12px;padding:2px 0}.pwd-output-value{color:var(--text);flex:1 1 0%;letter-spacing:.04em;word-break:break-all}