.app{width: min(1280px, calc(100% - 32px));margin: 22px auto 20px;background:#fffdf8;border:1px solid #e2d8c8;border-radius:14px;box-shadow:0 8px 30px rgba(20,30,50,.08);display:flex;flex-direction:column;overflow:}
.intro{padding: 16px 18px 12px;}
h1{font-size: 20px; margin: 0 0 5px;}
.intro p {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}
.tool-card{width: min(1240px, calc(100% - 40px));margin: 20px auto;background:#fffdf8;border:1px solid #e2d8c8;border-radius:12px;box-shadow:0 4px 18px rgba(20,35,50,.06);padding:26px}
.field-label{display:block;font-weight:700;margin:0 0 9px}
textarea{width:100%;min-height:180px;resize:vertical;padding:14px 15px;border:1px solid #cfd5da;border-radius:8px;background:#fff;color:#202124;font:15px/1.55 Consolas,"Courier New",monospace;outline:none}
textarea:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(23,105,170,.12)}
.meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:13px;margin:7px 1px 20px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 25px}
button{appearance:none;border:1px solid transparent;border-radius:7px;padding:10px 16px;font:600 14px/1.25 Arial,Helvetica,sans-serif;cursor:pointer;min-height:40px;transition:background .15s,border-color .15s}
button.primary{background:var(--accent);color:#fff}
button.primary:hover{background:var(--accent-hover)}
button.secondary{background:#fff;border-color:#cfd5da;color:#30363b}
button.secondary:hover{background:#f4f6f8}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.result-head .field-label{margin:0}
.hash-row{display:flex;gap:9px;align-items:stretch;margin-bottom:14px}
.hash-row input{min-width:0;flex:1;border:1px solid #d6dce1;border-radius:7px;padding:12px;font:14px/1.4 Consolas,"Courier New",monospace;background:#f8fafb;color:#202124}
.hash-row button{white-space:nowrap}
.note{margin-top:20px;padding:13px 15px;border:1px solid #d9e9f7;background:var(--soft);border-radius:8px;color:#29475d;font-size:14px}
.note strong{display:block;margin-bottom:3px}
footer{text-align:center;color:#77818a;font-size:13px;padding:0 20px 28px}
.status{min-height:20px;margin-top:5px;color:#287346;font-size:13px}
@media(max-width:600px){
  .tool-card{padding:17px 14px;border-radius:10px}textarea{min-height:150px}
 .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 button{padding:10px 12px}
 .hash-row{gap:7px}.hash-row input{font-size:12px;padding:10px 8px}
 .result-head{align-items:flex-start}
}