:root{font-family:"IBM Plex Sans Arabic",Tahoma,Arial,sans-serif;color:#172723;background:#f4f7f6;font-synthesis:none;text-rendering:optimizeLegibility;font-optical-sizing:auto;font-weight:400;--green:#16836a;--green-dark:#0e6955;--ink:#172723;--muted:#71817c;--line:#e5ece9;--white:#fff;--soft:#eff7f4}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 52% -10%,#e5f3ee 0,transparent 44%),#f4f7f6}
button,input,select{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
.shell{width:min(100% - 32px,790px);margin:0 auto;padding:54px 0 28px}
.login-screen{width:min(100%,430px);margin:5vh auto 0;text-align:center}
.brand-mark{width:62px;height:62px;margin:0 auto 21px;border-radius:20px;background:#e3f2ec;display:flex;align-items:center;justify-content:center;gap:4px;transform:rotate(-7deg)}
.brand-mark span{display:block;width:5px;border-radius:5px;background:var(--green);transform:rotate(7deg)}
.brand-mark span:nth-child(1){height:16px}.brand-mark span:nth-child(2){height:27px}.brand-mark span:nth-child(3){height:20px}
.eyebrow{margin:0;color:var(--green);font-size:11px;font-weight:700;letter-spacing:.14em}
.login-screen>h1{margin:8px 0 6px;font-size:30px;font-weight:700;letter-spacing:-.04em}
.intro{margin:0 auto 27px;color:var(--muted);font-size:14px;line-height:1.8}
.login-card{padding:26px;text-align:right;border:1px solid #e9efec;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 16px 48px #1b574410}
.login-card label{display:block;margin:0 0 8px;font-size:13px;font-weight:600;color:#384944}
.login-card input{width:100%;height:51px;margin-bottom:18px;padding:0 15px;border:1px solid #dce6e1;border-radius:12px;background:#fbfdfc;color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}
.login-card input:focus,.search-wrap:focus-within,.filter-wrap:focus-within{border-color:#64ad98;box-shadow:0 0 0 4px #16836a13}
#room-code{direction:ltr;text-align:left;text-transform:uppercase;letter-spacing:.12em;font-size:15px}
#reader-pin{letter-spacing:.25em}
.saved-code{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 18px;padding:12px 14px;border:1px solid #dce6e1;border-radius:12px;background:#f7faf8}.saved-code div{display:flex;flex-direction:column;gap:3px}.saved-code span{color:#7e8d86;font-size:11px}.saved-code strong{color:#33463f;font-size:13px;letter-spacing:.08em}.saved-code button{flex:none;border:0;background:transparent;color:var(--green);font-size:12px;font-weight:700}
.primary-button{display:flex;width:100%;height:51px;align-items:center;justify-content:center;gap:10px;border:0;border-radius:12px;background:var(--green);color:white;font-size:15px;font-weight:700;box-shadow:0 7px 16px #16836a2b;transition:background .15s,transform .15s}
.primary-button:hover{background:var(--green-dark);transform:translateY(-1px)}
.primary-button:disabled{opacity:.65;cursor:wait;transform:none}
.secure-note{margin:15px 0 0;text-align:center;color:#7b8984;font-size:11px}.secure-note span{color:var(--green);font-size:9px;margin-left:5px}
.footnote{margin:20px 0;color:#87938f;font-size:12px}
.error-message{margin:-5px 0 14px;color:#b33a36;font-size:12px;line-height:1.6}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 2px 22px;border-bottom:1px solid var(--line)}
.brand-lockup,.top-actions{display:flex;align-items:center;gap:13px}.brand-lockup .brand-mark{margin:0;width:43px;height:43px;border-radius:14px}.brand-mark.small span{width:4px}.brand-mark.small span:nth-child(1){height:12px}.brand-mark.small span:nth-child(2){height:20px}.brand-mark.small span:nth-child(3){height:15px}
.brand-lockup h1{margin:0;font-size:19px;line-height:1.5}.brand-lockup .eyebrow{font-size:9px}
.connection{display:flex;align-items:center;gap:7px;color:#668078;font-size:11px}.connection i{width:7px;height:7px;border-radius:100%;background:#32ad7c;box-shadow:0 0 0 3px #32ad7c1c}.connection.offline{color:#af4a43}.connection.offline i{background:#d9564f;box-shadow:0 0 0 3px #d9564f1c}
.icon-button,.refresh-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;color:#50635c;transition:.15s}.icon-button{width:39px;height:39px;border-radius:12px}.icon-button:hover,.refresh-button:hover{border-color:#c3ded3;background:#f6fbf8;color:var(--green)}.icon-button svg,.refresh-button svg,.toolbar svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.welcome-row{display:flex;align-items:center;justify-content:space-between;padding:27px 2px 20px}.welcome-row h2{margin:4px 0 0;font-size:24px;letter-spacing:-.035em}.welcome-row .eyebrow{font-size:10px}
.refresh-button{height:38px;gap:7px;padding:0 12px;border-radius:11px;font-size:12px}.refresh-button.loading svg{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.toolbar{display:grid;grid-template-columns:minmax(145px,.75fr) minmax(180px,1.25fr);gap:10px}
.filter-wrap,.search-wrap{height:47px;display:flex;align-items:center;gap:10px;padding:0 13px;border:1px solid #e1eae6;border-radius:13px;background:#fff;color:#81928b;transition:border .15s,box-shadow .15s}.filter-wrap select,.search-wrap input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:#33463f;font-size:13px}.filter-wrap select{appearance:none;cursor:pointer}.search-wrap input::placeholder{color:#9aa7a2}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.notice{display:flex;align-items:center;gap:9px;margin-top:13px;padding:11px 13px;border-radius:11px;background:#ebf5f1;color:#487469;font-size:12px;line-height:1.6}.notice span{font-size:17px;color:var(--green)}
.list-heading{display:flex;justify-content:space-between;margin:22px 3px 10px;color:#87948e;font-size:11px}.messages-list{display:flex;flex-direction:column;gap:9px}
.message-card{padding:15px 16px 13px;border:1px solid #e7eeeb;border-radius:15px;background:var(--white);box-shadow:0 3px 12px #1c594707;animation:appear .18s ease-out}@keyframes appear{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.message-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.sender{display:flex;align-items:center;gap:10px;min-width:0}.avatar{flex:0 0 36px;width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#eaf4ef;color:var(--green);font-weight:700;font-size:13px}.sender-copy{min-width:0}.sender-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:700;color:#263831;direction:auto}.sender-number{margin-top:1px;color:#8a9792;font-size:11px;direction:ltr;text-align:right}.message-time{flex:none;padding-top:2px;color:#99a49f;font-size:10px;white-space:nowrap}.message-body{margin:11px 2px 9px;color:#485951;font-size:13px;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere}.message-foot{display:flex;align-items:center;justify-content:space-between;padding-top:9px;border-top:1px solid #f0f3f2;color:#929e99;font-size:10px}.type-badge{display:inline-flex;align-items:center;gap:5px}.type-badge.incoming{color:#35856c}.type-badge.outgoing{color:#7b879f}.type-badge span{font-size:13px}
.empty-state{padding:62px 16px;text-align:center;color:#71817c}.empty-icon{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;border-radius:17px;background:#eaf4ef;color:var(--green);font-size:24px}.empty-state h3{margin:0 0 5px;color:#364840;font-size:16px}.empty-state p{margin:0;font-size:12px}.inbox-error{padding:10px 13px;border:1px solid #f2d6d3;border-radius:10px;background:#fff8f7;color:#ae4a43;font-size:12px}
.inbox-footer{display:flex;justify-content:space-between;margin-top:22px;padding:14px 3px 0;border-top:1px solid var(--line);color:#96a19c;font-size:10px}
@media(max-width:560px){.shell{width:min(100% - 24px,790px);padding-top:30px}.login-screen{margin-top:4vh}.login-screen>h1{font-size:26px}.login-card{padding:21px;border-radius:19px}.welcome-row{padding-top:23px}.welcome-row h2{font-size:21px}.toolbar{grid-template-columns:1fr}.filter-wrap,.search-wrap{height:45px}.list-heading{margin-top:17px}.message-card{padding:13px 13px 11px}.inbox-footer{font-size:9px}}