/* فيوميل — هوية فيودكس المشرقة: أبيض، بنفسجي #3A2666، برتقالي #FF5700، أيقونات أوتلاين، صفر إيموجي */
:root{
  --purple:#3A2666; --orange:#FF5700; --ink:#1d1830; --mut:#6f6a80;
  --bg:#f7f6fa; --card:#fff; --line:#e8e5f0; --soft:#f1eef8;
  --ok:#0a8f5b; --bad:#c0392b; --r:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Segoe UI","SF Pro Display","Helvetica Neue",Tahoma,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.spacer{flex:1}
.vsep{width:1px;height:22px;background:var(--line);margin:0 4px}
[hidden]{display:none!important}

/* الترويسة */
#top{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--purple);color:#fff;
  position:sticky;top:0;z-index:50}
#top .brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:19px}
#top .brand svg{color:var(--orange);width:26px;height:26px}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:#fff;
  border-radius:999px;padding:9px 18px;font-weight:700;transition:.15s;border:0;text-decoration:none}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary.big{font-size:17px;padding:12px 28px;justify-content:center}
#searchForm{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border-radius:999px;
  padding:7px 14px;flex:0 1 420px;min-width:120px}
#searchForm svg{opacity:.8;width:17px;height:17px}
#searchBox{flex:1;background:none;border:0;outline:0;color:#fff;font:inherit}
#searchBox::placeholder{color:rgba(255,255,255,.65)}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;color:inherit}
#top .icon-btn:hover{background:rgba(255,255,255,.15)}
#who{display:flex;align-items:center;gap:8px;font-weight:600}
#whoPic{width:30px;height:30px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.4)}

/* التخطيط */
#main{display:grid;grid-template-columns:230px 400px 1fr;height:calc(100vh - 56px)}
#boxes{background:var(--card);border-inline-end:1px solid var(--line);padding:12px 8px;overflow:auto}
.box{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:10px;
  color:var(--ink);font-weight:600;text-align:start}
.box:hover{background:var(--soft)}
.box.on{background:var(--soft);color:var(--purple)}
.box.on svg{color:var(--orange)}
.box svg{color:var(--mut);width:19px;height:19px}
.box .cnt{margin-inline-start:auto;background:var(--orange);color:#fff;border-radius:999px;
  font-size:11.5px;font-weight:800;padding:1px 8px}
.box .cnt.z{background:var(--line);color:var(--mut)}

/* القائمة */
#list{background:var(--card);border-inline-end:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
#listHead{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
#listHead h2{font-size:16.5px;color:var(--purple);flex:1}
#listHead .icon-btn:hover{background:var(--soft)}
#rows{flex:1;overflow:auto}
.row{display:block;width:100%;text-align:start;padding:11px 14px;border-bottom:1px solid var(--line);cursor:pointer}
.row:hover{background:var(--soft)}
.row.on{background:var(--soft);box-shadow:inset 4px 0 0 var(--orange)}
.row .l1{display:flex;align-items:center;gap:8px}
.row .from{font-weight:600;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .date{font-size:12px;color:var(--mut);flex:none}
.row .l2{display:flex;align-items:center;gap:6px;margin-top:3px}
.row .subj{font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.row .prev{font-size:12.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.row.unread .from,.row.unread .subj{font-weight:800;color:var(--purple)}
.row.unread .l1::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.row .mini-ic{width:15px;height:15px;color:var(--mut)}
.row .mini-ic.star{color:var(--orange);fill:var(--orange)}
#moreBtn{margin:10px auto;padding:8px 22px;border:1px solid var(--line);border-radius:999px;font-weight:600;color:var(--purple)}
#moreBtn:hover{background:var(--soft)}
#emptyList{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mut);gap:10px}
#emptyList svg{width:52px;height:52px;opacity:.35}

/* القراءة */
#reader{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
#readHead{display:flex;align-items:center;gap:2px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
#readHead .icon-btn{color:var(--mut)}
#readHead .icon-btn:hover{background:var(--soft);color:var(--purple)}
#readHead .danger:hover{color:var(--bad)}
#backList{display:none}
#readBody{flex:1;overflow:auto;padding:18px}
.msg-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;max-width:980px;margin:0 auto 14px}
.msg-subject{font-size:19px;color:var(--purple);font-weight:800;margin-bottom:12px}
.msg-meta{display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:6px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--purple);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex:none}
.msg-meta .who{min-width:0}
.msg-meta .nm{font-weight:700}
.msg-meta .ad,.msg-meta .to{font-size:12.5px;color:var(--mut);overflow-wrap:anywhere}
.msg-meta .dt{margin-inline-start:auto;font-size:12.5px;color:var(--mut);flex:none}
.msg-frame{width:100%;border:0;min-height:120px}
.msg-text{white-space:pre-wrap;line-height:1.8;padding:8px 2px}
.atts{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}
.att{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;
  padding:7px 12px;font-size:13px;color:var(--purple);text-decoration:none;font-weight:600;background:var(--soft)}
.att:hover{border-color:var(--orange)}
.att svg{width:16px;height:16px;color:var(--orange)}
.att small{color:var(--mut);font-weight:400}

/* الإنشاء */
#composeWrap,#settingsWrap{position:fixed;inset:0;background:rgba(29,24,48,.45);z-index:100;
  display:flex;align-items:center;justify-content:center;padding:16px}
#compose,#settings{background:var(--card);border-radius:18px;width:min(760px,100%);max-height:94vh;
  display:flex;flex-direction:column;box-shadow:0 24px 70px rgba(29,24,48,.35);overflow:auto}
.cmp-head{display:flex;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--purple);font-size:16px}
.cmp-head .icon-btn:hover{background:var(--soft)}
.cmp-row{display:flex;align-items:center;gap:10px;padding:8px 18px;border-bottom:1px solid var(--line)}
.cmp-row label{color:var(--mut);font-size:13px;width:52px;flex:none}
.cmp-row input{flex:1;border:0;outline:0;font:inherit;padding:6px 0;background:none}
.chips{flex:1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--soft);color:var(--purple);
  border-radius:999px;padding:3px 6px 3px 10px;font-size:13px;font-weight:600}
.chip button{display:flex;color:var(--mut)}
.chip button:hover{color:var(--bad)}
.chip button svg{width:13px;height:13px}
.chips input{flex:1;min-width:140px;border:0;outline:0;font:inherit;padding:6px 0;background:none}
.mini{color:var(--mut);font-size:12.5px;padding:4px 8px;border-radius:8px}
.mini:hover{background:var(--soft);color:var(--purple)}
.cmp-tools{display:flex;align-items:center;gap:2px;padding:8px 14px;border-bottom:1px solid var(--line)}
.cmp-tools button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;color:var(--mut)}
.cmp-tools button:hover{background:var(--soft);color:var(--purple)}
.cmp-tools svg{width:17px;height:17px}
#cmpAtts{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px}
#cmpAtts:not(:empty){padding:10px 18px 0}
#cmpBody{min-height:220px;max-height:44vh;overflow:auto;padding:14px 18px;outline:0;line-height:1.8}
#cmpBody blockquote{border-inline-start:3px solid var(--line);margin:8px 0;padding:2px 12px;color:var(--mut)}
.cmp-foot{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line)}
#cmpStatus{color:var(--mut);font-size:13px}

/* الإعدادات */
#settings{padding-bottom:16px}
#settings h3{color:var(--purple);padding:16px 18px 6px;font-size:15px}
#settings .hint{color:var(--mut);font-size:13px;padding:0 18px 8px;line-height:1.7}
.kv{display:flex;gap:10px;align-items:center;padding:5px 18px;font-size:13.5px}
.kv span{color:var(--mut);width:110px;flex:none}
.kv code{background:var(--soft);border-radius:8px;padding:3px 10px;direction:ltr}
.row-line{display:flex;gap:10px;padding:10px 18px}
.row-line input{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;outline:0}
.row-line input:focus{border-color:var(--purple)}
#pwFresh{margin:6px 18px;background:#fff7f2;border:1px solid var(--orange);border-radius:12px;padding:12px 14px;font-size:13.5px}
#pwFresh code{font-size:16px;font-weight:800;direction:ltr;display:inline-block;margin-top:4px;user-select:all}
.pwrow{display:flex;align-items:center;gap:10px;padding:7px 18px;font-size:13.5px;border-bottom:1px dashed var(--line)}
.pwrow .d{color:var(--mut);font-size:12px}
.pwrow button{color:var(--bad);font-size:12.5px}
.btn-line{display:inline-block;margin:4px 18px;border:1px solid var(--line);border-radius:10px;padding:9px 16px;
  color:var(--bad);text-decoration:none;font-weight:600}
.btn-line:hover{border-color:var(--bad)}

/* الدخول */
#login{height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--purple) 0%,#2a1b4d 60%,#1d1338 100%)}
.login-card{background:#fff;border-radius:24px;padding:44px 48px;text-align:center;max-width:400px;width:92%;
  box-shadow:0 30px 80px rgba(0,0,0,.4)}
.login-logo{width:58px;height:58px;color:var(--orange);margin-bottom:10px}
.login-card h1{color:var(--purple);font-size:28px;margin-bottom:6px}
.login-card p{color:var(--mut);margin-bottom:26px;line-height:1.7}

/* توست */
#toast{position:fixed;bottom:24px;inset-inline-start:50%;transform:translateX(50%);z-index:200;
  background:var(--ink);color:#fff;border-radius:999px;padding:10px 22px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3)}
#toast.err{background:var(--bad)}

/* جوال */
.only-mobile{display:none}
@media (max-width:980px){
  #main{grid-template-columns:210px 1fr}
  #reader{position:fixed;inset:56px 0 0 0;z-index:60;display:none}
  #reader.open{display:flex}
  #backList{display:inline-flex}
}
@media (max-width:680px){
  #main{grid-template-columns:1fr}
  #boxes{position:fixed;inset:56px 0 0 0;z-index:55;display:none}
  #boxes.open{display:block}
  .only-mobile{display:inline-flex}
  #searchForm{flex:1}
  #top .brand span,#who span{display:none}
  #btnCompose{padding:9px 12px}
  #btnCompose svg+*{display:none}
}