*{box-sizing:border-box}
body{margin:0;background:#f4f7fb;font-family:Arial,Helvetica,sans-serif;color:#172033}
.app{max-width:1150px;margin:auto;padding:22px}
header{background:#0b1f3a;color:#fff;border-radius:16px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center}
.brand{font-size:30px;font-weight:800}
header small{display:block;font-size:11px;letter-spacing:1.5px;color:#7bdcff;margin-top:4px}
.clock{text-align:center}.clock strong{display:block;font-size:34px;color:#ffd34d}
.clock strong.danger{color:#ff6b6b}
.card{background:#fff;margin-top:16px;padding:20px;border-radius:14px;box-shadow:0 5px 20px rgba(23,32,51,.08)}
.intro{display:flex;justify-content:space-between;align-items:center;gap:20px}
.intro b{font-size:20px}.intro span{display:block;color:#667085;font-size:13px;margin-top:5px}
.controls{display:flex;gap:10px}
button{border:0;border-radius:9px;padding:12px 20px;background:#1677ff;color:white;font-weight:700;cursor:pointer}
button:hover{opacity:.92}button:disabled{opacity:.55;cursor:not-allowed}
button.secondary{background:#e8edf5;color:#172033}
.notice{background:#eef8ff;border-left:4px solid #1677ff}
.notice p{margin:6px 0 0;color:#667085;font-size:13px}
.title{display:flex;justify-content:space-between;align-items:center}
.title h2{font-size:19px;margin:0 0 14px}.title span{font-size:12px;color:#667085}
#passage{background:#fbfcfe;border:1px solid #dde5ef;border-radius:10px;padding:8px;overflow:auto;max-height:430px;user-select:none}
canvas{display:block;margin:auto;max-width:100%;height:auto}
textarea{width:100%;min-height:270px;padding:16px;border:2px solid #d8e1ec;border-radius:10px;font-size:17px;line-height:1.6;resize:vertical;outline:none}
textarea:focus{border-color:#1677ff}
textarea:disabled{background:#f5f6f8;cursor:not-allowed}
.note{font-size:12px;color:#667085;margin-top:10px}
.modal{position:fixed;inset:0;background:rgba(7,17,31,.80);display:flex;align-items:center;justify-content:center;padding:20px}
.hidden{display:none!important}
.result{background:white;border-radius:18px;padding:30px;text-align:center;width:min(620px,100%)}
.result-brand{font-weight:800;color:#1677ff;letter-spacing:1px}
.result h2{margin:8px 0 22px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid div{background:#f5f8fc;padding:15px;border-radius:10px;font-size:12px}
.grid strong{display:block;font-size:21px;margin-top:6px}
.result button{margin-top:22px}
@media(max-width:650px){
.app{padding:10px}.intro{display:block}.controls{margin-top:15px}
header{padding:16px}.brand{font-size:24px}.clock strong{font-size:28px}
.grid{grid-template-columns:repeat(2,1fr)}textarea{min-height:220px}
}