*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:"Noto Sans SC",-apple-system,sans-serif;font-size:14px;line-height:1.6;color:#1e293b;background:linear-gradient(160deg,#f0f4ff 0%,#e8eeff 50%,#f5f7ff 100%);min-height:100vh;}
.wrap{max-width:1200px;margin:0 auto;padding:24px;}
.header{margin-bottom:24px;padding:20px 28px;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(30,41,59,0.08);border:1px solid rgba(148,163,184,0.2);}
.header-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.logo{display:flex;align-items:center;gap:16px;}
.logo-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:600;color:#6366f1;background:linear-gradient(135deg,#eef2ff 0%,#e0e7ff 100%);border-radius:12px;border:1px solid rgba(99,102,241,0.2);}
.logo h1{margin:0 0 4px 0;font-size:1.35rem;font-weight:600;color:#1e293b;}
.header .desc{margin:0;font-size:13px;color:#64748b;}
.actions{display:flex;gap:10px;}
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:none;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:transform 0.15s,box-shadow 0.2s,background 0.2s;}
.btn:active{transform:scale(0.98);}
.btn-primary{background:linear-gradient(135deg,#6366f1 0%,#4f46e5 100%);color:#fff;box-shadow:0 4px 14px rgba(99,102,241,0.4);}
.btn-primary:hover{box-shadow:0 6px 20px rgba(99,102,241,0.5);background:linear-gradient(135deg,#5558e3 0%,#4338ca 100%);}
.btn-ghost{background:#f1f5f9;color:#475569;border:1px solid #e2e8f0;}
.btn-ghost:hover{background:#e2e8f0;color:#334155;}
.main-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;min-height:280px;}
@media (max-width:768px){.main-row{grid-template-columns:1fr;}}
.panel{background:#fff;border-radius:16px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 4px 24px rgba(30,41,59,0.08);border:1px solid rgba(148,163,184,0.2);}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0;}
.panel-title{font-size:13px;font-weight:600;color:#475569;}
.opt-hint{font-size:12px;color:#94a3b8;}
.btn-copy{padding:6px 14px;border:1px solid #e2e8f0;border-radius:8px;background:#fff;color:#64748b;font-size:12px;font-weight:500;cursor:pointer;}
.btn-copy:hover{background:#f1f5f9;border-color:#6366f1;color:#6366f1;}
.hash-input{flex:1;min-height:160px;margin:16px;padding:16px;font-family:"JetBrains Mono",monospace;font-size:14px;line-height:1.6;color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;resize:vertical;outline:none;}
.hash-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.15);}
.hash-output{flex:1;min-height:120px;margin:16px;padding:16px;font-family:"JetBrains Mono",monospace;font-size:14px;line-height:1.6;color:#1e293b;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;word-break:break-all;white-space:pre-wrap;}
.hash-output.filled{color:#6366f1;font-weight:500;}
.hash-output.error{color:#dc2626;}
.tool-intro{margin-top:24px;padding:24px 28px;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(30,41,59,0.08);border:1px solid rgba(148,163,184,0.2);}
.tool-intro-title{margin:0 0 16px 0;font-size:1.1rem;font-weight:600;color:#1e293b;}
.tool-intro-body{font-size:14px;color:#475569;line-height:1.7;}
.tool-intro-body p{margin:0 0 12px 0;}
.related-tools{margin-top:24px;padding:24px 28px;background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(30,41,59,0.08);border:1px solid rgba(148,163,184,0.2);}
.related-tools-title{margin:0 0 20px 0;font-size:1.1rem;font-weight:600;color:#1e293b;}
.related-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;}
.related-tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;color:#334155;text-decoration:none;transition:border-color 0.2s,background 0.2s,box-shadow 0.2s;}
.related-tool-card:hover{background:#f1f5f9;border-color:#6366f1;box-shadow:0 4px 12px rgba(99,102,241,0.12);}
.related-tool-icon{font-size:20px;color:#6366f1;}
.related-tool-name{font-size:15px;font-weight:600;color:#1e293b;}
.related-tool-desc{font-size:12px;color:#64748b;line-height:1.4;}
.run-toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);padding:12px 24px;background:#1e293b;color:#f1f5f9;font-size:14px;font-weight:500;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,0.2);z-index:9999;opacity:0;visibility:hidden;transition:opacity 0.3s,transform 0.3s,visibility 0.3s;}
.run-toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}