:root{font-family:Arial,Helvetica,sans-serif;color:#142c4b;background:#f2f5fa}*{box-sizing:border-box}body{margin:0}.top{height:76px;display:flex;align-items:center;gap:25px;background:white;border-bottom:1px solid #dbe3ed;padding:10px 3%;font-size:17px;font-weight:600}.top a:last-child{margin-left:auto;color:#1c558c;font-size:14px;text-decoration:none}.app{display:grid;grid-template-columns:235px minmax(300px,400px) minmax(360px,1fr);min-height:calc(100vh - 76px);max-width:1600px;margin:auto;background:white}.nav{padding:30px 16px;background:#f9fbfe;border-right:1px solid #e1e7ef}.nav h2{font-size:17px;margin:0 12px 25px}.nav a{display:flex;justify-content:space-between;text-decoration:none;color:#294460;padding:15px;border-radius:11px;margin:5px 0;font-size:14px}.nav a.selected{background:#e7f0ff;color:#1055a5;font-weight:700}.nav b{background:#fa7a12;color:#fff;padding:2px 7px;border-radius:15px}.note{margin:30px 12px;color:#71849b;line-height:1.6;font-size:12px}.messages{border-right:1px solid #e1e7ef}.list-head{display:flex;justify-content:space-between;align-items:center;padding:25px 23px 15px}.list-head small{color:#ef780c;font-weight:700;letter-spacing:1px;font-size:10px}.list-head h1{font-size:26px;margin:8px 0}.list-head button,.filter button{border:1px solid #d5dfec;background:white;color:#27445f;padding:9px 13px;border-radius:9px;cursor:pointer}.filter{display:flex;gap:7px;padding:0 18px 18px;overflow-x:auto}.filter button{font-size:12px;white-space:nowrap}.filter button.active{background:#0f335d;color:white}.item{width:100%;border:0;border-top:1px solid #edf1f7;background:white;text-align:left;padding:18px 22px;cursor:pointer;display:block;color:#1a344e}.item:hover,.item.active{background:#f1f6fd}.item.unread{border-left:4px solid #fa7a12;font-weight:700}.item .line{display:flex;justify-content:space-between;gap:12px}.item .line small{font-size:11px;color:#8191a4;white-space:nowrap}.item p{font-size:13px;color:#708197;margin:8px 0 0;font-weight:400}.preview{padding:36px 45px;overflow:auto}.empty{margin:20vh auto;text-align:center;max-width:350px;color:#8192a5;font-size:35px}.empty h2{color:#223c58;font-size:22px}.empty p{font-size:14px;line-height:1.7}.tag{display:inline-block;border-radius:16px;background:#e8f1ff;color:#17539a;font-size:12px;padding:7px 12px}.preview h2{font-size:29px;margin:18px 0}.meta{color:#78899c;font-size:13px}.letter{margin-top:30px;padding:28px;border:1px solid #e1e8f1;border-radius:16px;line-height:1.8;box-shadow:0 8px 35px #17395d0c}.btn{display:inline-block;background:#f98114;color:white;text-decoration:none;border-radius:10px;padding:13px 19px;margin-top:20px}.private{font-size:13px;color:#71849b;margin-top:18px}@media(max-width:1050px){.app{grid-template-columns:190px 1fr}.preview{grid-column:2;border-top:1px solid #e1e7ef;min-height:350px}.messages{border-right:0}}@media(max-width:650px){.app{display:block}.nav{padding:12px;display:flex;overflow-x:auto;gap:6px}.nav h2,.nav .note{display:none}.nav a{white-space:nowrap}.preview{padding:25px}.top{height:65px}}