:root{--nav:#0b1324;--nav2:#151f34;--blue:#1769ff;--blue2:#0d4fd7;--gold:#d4a424;--ink:#172033;--muted:#728096;--line:#e5eaf1;--paper:#fff;--wash:#f4f7fb;--shadow:0 18px 48px rgba(17,34,68,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,"Noto Sans Arabic","Segoe UI",sans-serif;color:var(--ink);background:var(--wash)}button,input,textarea,select{font:inherit}.hidden{display:none!important}.icon{border:0;background:transparent;color:inherit;font-size:20px;cursor:pointer}.mobile{display:none}
.mark{width:66px;height:66px;display:grid;place-items:center;background:linear-gradient(145deg,#2d7cff,#0753dc);color:#fff;border-radius:19px 19px 19px 6px;box-shadow:0 16px 34px rgba(23,105,255,.32);font-size:30px;font-weight:800}.mark.small{width:37px;height:37px;border-radius:11px 11px 11px 4px;font-size:17px;box-shadow:0 8px 20px rgba(23,105,255,.25)}
.login{position:relative;min-height:100vh;display:grid;grid-template-columns:48% 52%;background:#fff}.login-brand{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:10vw;color:#fff;background:radial-gradient(circle at 20% 15%,#243a62 0,transparent 34%),linear-gradient(145deg,#0a1222,#111f38)}.login-brand:after{content:"";position:absolute;width:520px;height:520px;border:1px solid rgba(255,255,255,.08);border-radius:50%;bottom:-280px;right:-100px;box-shadow:0 0 0 78px rgba(255,255,255,.025),0 0 0 156px rgba(255,255,255,.018)}.login-brand>*{position:relative;z-index:1}.login-brand h1{font-size:clamp(38px,5vw,64px);letter-spacing:-2.5px;margin:27px 0 9px}.login-brand p{color:#aebcd1;font-size:17px;margin:0}.login-card{align-self:center;width:min(410px,82%);margin:auto;display:grid;gap:20px}.login-card:before{content:"Welcome back";font-size:30px;font-weight:700;letter-spacing:-.7px;margin-bottom:14px}.login-card label{display:grid;gap:8px;color:#445168;font-size:14px;font-weight:600}.login-card input{min-width:0;width:100%;padding:14px 15px;border:1px solid #d9e0e9;border-radius:10px;outline:0;color:var(--ink);background:#fff}.login-card input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,105,255,.1)}.email-field{display:flex;align-items:center;border:1px solid #d9e0e9;border-radius:10px;overflow:hidden}.email-field:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(23,105,255,.1)}.email-field input{border:0!important;box-shadow:none!important;border-radius:0}.email-field span{padding:14px;background:#f5f7fa;color:#647188;direction:ltr}.login-card>button,.send{border:0;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;padding:14px 20px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(23,105,255,.2)}.login-card>small{text-align:center;color:#8793a6}.error{color:#c83349;margin:0;min-height:20px}
.app{height:100vh;display:grid;grid-template-columns:250px 1fr;overflow:hidden}.sidebar{background:var(--nav);color:#fff;padding:22px 15px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:11px;padding:0 9px 27px;font-size:21px;font-weight:800;letter-spacing:1.5px}.compose{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:13px 15px;font-weight:700;cursor:pointer;margin:0 3px 22px;box-shadow:0 10px 22px rgba(23,105,255,.22)}.sidebar nav{display:grid;gap:4px}.sidebar nav button{display:flex;align-items:center;gap:12px;border:0;border-radius:9px;background:transparent;color:#9eabc0;padding:11px 14px;text-align:start;cursor:pointer;font-size:14px;font-weight:500}.sidebar nav button>span:first-child{width:18px;text-align:center;color:#76869e}.sidebar nav button:hover,.sidebar nav button.active{background:var(--nav2);color:#fff}.sidebar nav button.active>span:first-child{color:#5d9aff}.sidebar nav b{margin-inline-start:auto;min-width:22px;padding:2px 6px;border-radius:12px;background:var(--blue);font-size:11px;text-align:center}.profile{display:flex;align-items:center;gap:10px;margin-top:auto;padding:17px 5px 0;border-top:1px solid rgba(255,255,255,.08)}.profile>div:nth-child(2){display:grid;min-width:0}.profile strong{overflow:hidden;text-overflow:ellipsis;font-size:12px}.profile small{color:#7f8da4;font-size:11px}.profile .icon{margin-inline-start:auto}.avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#243651;color:#9dbce9;font-weight:700}
.workspace{min-width:0;display:grid;grid-template-rows:70px 1fr}.workspace>header{display:flex;align-items:center;gap:14px;padding:0 25px;background:#fff;border-bottom:1px solid var(--line)}.search{display:flex;align-items:center;gap:10px;width:min(570px,62%);height:42px;padding:0 14px;border:1px solid transparent;border-radius:10px;background:#f4f7fa;color:#8190a5}.search:focus-within{border-color:#c7d8f8;background:#fff}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink)}.search kbd{padding:2px 7px;border:1px solid #dce3eb;border-radius:5px;background:#fff;color:#8b96a7;font-size:11px}.desktop-title{display:grid;margin-inline-start:auto;text-align:end;direction:ltr}.desktop-title strong{font-size:13px}.desktop-title small{color:var(--muted);font-size:11px}.columns{min-height:0;display:grid;grid-template-columns:minmax(365px,40%) 1fr}.messages{min-width:0;background:#fff;border-inline-end:1px solid var(--line)}.list-head{height:82px;display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line)}.list-head h2{margin:0 0 3px;font-size:20px}.list-head small{color:var(--muted);font-size:12px}.list-head select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#59677c;font-size:12px}.message-list{height:calc(100vh - 152px);overflow:auto}.message{width:100%;display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:16px 20px;border:0;border-bottom:1px solid #eef1f5;background:#fff;text-align:start;cursor:pointer}.message:hover{background:#f8faff}.message.selected{background:#f0f5ff}.message.unread{box-shadow:inset 3px 0 var(--blue)}[dir=rtl] .message.unread{box-shadow:inset -3px 0 var(--blue)}.message .sender{font-size:13px;font-weight:700}.message .date,.message .preview{color:#8a96a7;font-size:11px}.message .subject{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.reader{overflow:auto;padding:40px 48px;background:#fff}.reader.empty{display:grid;place-items:center;text-align:center;color:var(--muted);background:linear-gradient(#fff,#fbfcfe)}.reader.empty h2{color:#405069;font-size:18px}.empty-icon{width:66px;height:66px;display:grid;place-items:center;margin:auto;border-radius:20px;background:#eef4ff;color:var(--blue);font-size:28px}.mail-head{padding-bottom:24px;border-bottom:1px solid var(--line)}.mail-head h1{margin-top:0;font-size:25px}.mail-meta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}.mail-meta b{color:#35445a}.mail-head>small{display:block;margin-top:7px;color:#8b96a7}.mail-body{margin-top:28px;line-height:1.8;white-space:pre-wrap;color:#344158}.mail-actions{display:flex;gap:8px;margin-top:28px}.mail-actions button{padding:9px 14px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#425168;cursor:pointer}
dialog{width:min(700px,94vw);padding:0;border:0;border-radius:14px;box-shadow:0 28px 80px rgba(9,20,40,.3)}dialog::backdrop{background:rgba(8,17,32,.68);backdrop-filter:blur(2px)}dialog form{display:grid}dialog header,dialog footer{display:flex;align-items:center;padding:15px 19px}dialog header{background:var(--nav);color:#fff}dialog header .icon{margin-inline-start:auto}dialog label{display:flex;align-items:center;gap:14px;padding:11px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px}dialog input{flex:1;border:0;outline:0}dialog .subject{padding:14px 18px;border:0;border-bottom:1px solid var(--line);outline:0}dialog textarea{height:285px;padding:18px;border:0;outline:0;resize:vertical;line-height:1.7}dialog footer{gap:12px;background:#f7f9fc}.send{padding:10px 25px}.attach{border:0!important;padding:8px!important;cursor:pointer}#fileNames{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}#toast{position:fixed;left:25px;bottom:25px;z-index:20;padding:12px 18px;border-radius:9px;background:#172033;color:#fff;box-shadow:var(--shadow);transform:translateY(100px);transition:.25s}#toast.show{transform:none}
@media(max-width:800px){.mobile{display:block}.login{grid-template-columns:1fr}.login-brand{min-height:245px;padding:55px 10vw 40px}.login-brand .mark{width:52px;height:52px}.login-brand h1{font-size:38px;margin:18px 0 6px}.login-card{padding:35px 0}.app{grid-template-columns:1fr}.sidebar{position:fixed;z-index:10;inset:0 auto 0 0;width:min(290px,85vw);transform:translateX(-100%);transition:.25s}[dir=rtl] .sidebar{inset:0 0 0 auto;transform:translateX(100%)}.sidebar.open{transform:none}.brand #closeNav{margin-inline-start:auto}.workspace>header{padding:0 12px}.search{width:auto;flex:1}.desktop-title{display:none}.columns{grid-template-columns:1fr}.messages{border:0}.message-list{height:calc(100vh - 152px)}.reader{position:fixed;z-index:5;inset:70px 0 0;padding:24px;transform:translateX(-100%);transition:.25s}[dir=rtl] .reader{transform:translateX(100%)}.reader.open{transform:none}.reader:before{content:"‹ Back";display:block;margin-bottom:18px;color:var(--blue);cursor:pointer}[dir=rtl] .reader:before{content:"رجوع ›"}}