/* سند Sanad — Stylesheet v7 */

:root{
  --bg:#F5EDD8;--bg2:#EFE5C8;--white:#FFFFFF;
  --green:#3CB55A;--green2:#2D9E4A;--green-bg:#E8F7EC;--green-pale:#D4EDE0;
  --orange:#F0A500;--orange-bg:#FFF4DC;--amber:#C8832A;
  --red:#DC2626;--red-bg:#FEE2E2;
  --text:#2A2A2A;--text2:#555;--text3:#999;
  --border:#E0D8C0;--shadow:rgba(60,181,90,.10);--shadow2:rgba(0,0,0,.06);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Tajawal','Poppins',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;max-width:430px;margin:0 auto;overflow-x:hidden;}
.screen{display:none;min-height:100vh;flex-direction:column;animation:fadeUp .28s ease;}
.screen.active{display:flex;}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.logo-lg{width:88px;height:88px;background:var(--green);border-radius:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 32px rgba(60,181,90,.30);animation:floatL 3s ease-in-out infinite;}
.logo-sm{width:40px;height:40px;background:var(--green);border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(60,181,90,.20);}
@keyframes floatL{0%,100%{transform:translateY(0) rotate(-1deg);}50%{transform:translateY(-8px) rotate(1deg);}}
.lsvg{width:100%;height:100%;}

.btn{width:100%;background:linear-gradient(135deg,var(--green),var(--green2));color:white;border:none;border-radius:14px;padding:14px;font-size:16px;font-weight:800;font-family:'Nunito',sans-serif;cursor:pointer;box-shadow:0 6px 22px rgba(60,181,90,.28);transition:all .25s;margin-top:6px;}
.btn:hover{transform:translateY(-2px);}
.btn-out{width:100%;background:transparent;color:var(--green);border:2px solid var(--green-pale);border-radius:14px;padding:12px;font-size:14px;font-weight:700;font-family:'Tajawal',sans-serif;cursor:pointer;transition:all .25s;margin-top:8px;}
.btn-out:hover{background:var(--green-bg);}

.inp{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:13px 14px;font-size:15px;font-family:'Tajawal',sans-serif;color:var(--text);outline:none;margin-bottom:12px;transition:border .2s;text-align:right;appearance:none;}
.inp:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(60,181,90,.10);}
.inp::placeholder{color:var(--text3);}

.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:12px 24px;border-radius:50px;font-size:13px;font-weight:700;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;max-width:340px;text-align:center;}
.toast.show{opacity:1;}.toast.err{background:#DC2626;color:white;}.toast.ok{background:var(--green);color:white;}

.overlay{position:fixed;inset:0;background:rgba(245,237,216,.85);backdrop-filter:blur(4px);z-index:999;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;}
.overlay.show{display:flex;}
.spin{width:44px;height:44px;border:4px solid var(--green-pale);border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998;display:none;align-items:flex-end;justify-content:center;}
.modal-card{background:var(--white);border-radius:24px 24px 0 0;padding:24px;width:100%;max-width:430px;max-height:85vh;overflow-y:auto;}
.modal-title{font-size:17px;font-weight:800;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;}
.modal-close{background:var(--bg);border:none;border-radius:50%;width:32px;height:32px;font-size:18px;cursor:pointer;color:var(--text3);}

/* AUTH */
#auth{background:linear-gradient(160deg,#E8F7EC 0%,var(--bg) 50%,#FFF8ED 100%);align-items:center;justify-content:center;padding:32px 24px;position:relative;overflow:hidden;}
.deco{position:absolute;font-size:26px;opacity:.15;pointer-events:none;user-select:none;}
.d1{top:6%;left:5%;}.d2{top:8%;right:7%;}.d3{top:20%;left:2%;}.d4{top:18%;right:3%;}.d5{bottom:30%;left:4%;}.d6{bottom:24%;right:5%;}
.app-name{font-family:'Cairo',sans-serif;font-size:36px;font-weight:900;color:var(--green);margin:12px 0 2px;position:relative;z-index:1;}
.app-tag-txt{font-size:14px;color:var(--text3);margin-bottom:16px;position:relative;z-index:1;}
.lang-row{display:flex;gap:8px;margin-bottom:16px;position:relative;z-index:1;}
.lang-pill{flex:1;padding:8px;border-radius:50px;border:1.5px solid var(--border);background:var(--bg);color:var(--text3);font-size:12px;font-weight:700;font-family:'Tajawal',sans-serif;cursor:pointer;transition:all .2s;text-align:center;}
.auth-card{background:var(--white);border-radius:24px;padding:20px;width:100%;box-shadow:0 6px 24px var(--shadow2);border:1.5px solid var(--border);position:relative;z-index:1;}
.auth-tabs{display:flex;background:var(--bg2);border-radius:12px;padding:4px;gap:4px;margin-bottom:16px;}
.atab{flex:1;padding:9px;border-radius:10px;border:none;font-size:13px;font-family:'Tajawal',sans-serif;font-weight:700;cursor:pointer;color:var(--text3);background:transparent;transition:all .25s;}
.atab.active{background:var(--white);color:var(--green);box-shadow:0 2px 8px var(--shadow2);}
.divider{display:flex;align-items:center;gap:10px;margin:12px 0;color:var(--text3);font-size:12px;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border);}
.forgot-link{text-align:center;font-size:12px;color:var(--text3);margin-top:8px;cursor:pointer;}
.forgot-link span{color:var(--green);font-weight:700;}

/* GUEST GRADE SELECT */
#guestGrade{background:linear-gradient(160deg,#E8F7EC 0%,var(--bg) 60%);align-items:center;justify-content:center;padding:40px 24px;text-align:center;}

/* DASHBOARD */
#dashboard{background:var(--bg);overflow-y:auto;padding-bottom:80px;}
.dash-hero{background:linear-gradient(135deg,#11998e 0%,#38ef7d 50%,#2D9E4A 100%);padding:52px 20px 20px;position:relative;overflow:hidden;}
.dash-hero::before{content:'';position:absolute;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.07);top:-60px;left:-50px;}
.dash-top-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;position:relative;z-index:1;}
.dash-greeting{font-size:20px;font-weight:800;color:white;flex:1;}
.streak-row{background:rgba(255,255,255,.14);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px;position:relative;z-index:1;}
.streak-num{font-size:16px;font-weight:800;color:white;}
.streak-sub{font-size:11px;color:rgba(255,255,255,.7);}
.pts{background:var(--orange-bg);color:var(--amber);border-radius:10px;padding:4px 12px;font-size:13px;font-weight:800;}
.qstats{display:flex;gap:10px;padding:14px 18px 0;}
.qs{flex:1;background:var(--white);border-radius:14px;padding:12px 8px;text-align:center;box-shadow:0 2px 10px var(--shadow2);border:1.5px solid var(--border);}
.qs-n{font-size:20px;font-weight:800;color:var(--green);}
.qs-l{font-size:11px;color:var(--text3);margin-top:2px;}
.sec-head{font-size:15px;font-weight:800;padding:14px 18px 10px;color:var(--text);}
.ctoggle{display:flex;background:var(--bg2);border-radius:12px;padding:4px;margin:0 18px 4px;gap:4px;}
.ctbtn{flex:1;padding:9px;border-radius:10px;border:none;font-size:13px;font-family:'Tajawal',sans-serif;font-weight:700;cursor:pointer;color:var(--text3);background:transparent;transition:all .25s;}
.ctbtn.active{background:var(--white);color:var(--green);box-shadow:0 2px 8px var(--shadow2);}
.subj-scroll{display:flex;gap:12px;padding:0 18px 4px;overflow-x:auto;scrollbar-width:none;}
.subj-scroll::-webkit-scrollbar{display:none;}
.sc{flex-shrink:0;width:100px;border-radius:18px;padding:14px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;border:none;font-family:'Tajawal',sans-serif;transition:all .25s;color:white;}
.sc:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.16);}
.sc-icon{font-size:28px;margin-bottom:6px;}
.sc-name{font-size:11px;font-weight:800;line-height:1.2;}
.sc-en{font-size:10px;opacity:.75;margin-top:2px;}
.quiz-banner{margin:0 18px;background:linear-gradient(135deg,#FFF8ED,#FFF4DC);border-radius:18px;padding:16px;border:1.5px solid #F5D9A0;box-shadow:0 2px 12px rgba(240,165,0,.12);display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .25s;}
.quiz-banner:hover{transform:translateY(-2px);}
.diary-preview{margin:0 18px;background:var(--white);border-radius:18px;padding:16px;border:1.5px solid var(--border);box-shadow:0 2px 12px var(--shadow2);}
.diary-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.diary-see{margin-right:auto;background:var(--green-bg);color:var(--green);border:none;border-radius:8px;padding:5px 12px;font-size:12px;font-weight:700;font-family:'Tajawal',sans-serif;cursor:pointer;}
.hw-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);}
.hw-row:last-child{border-bottom:none;}
.hw-chk{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;font-size:13px;}
.hw-chk.done{background:var(--green);border-color:var(--green);color:white;}
.hw-lbl{font-size:13px;font-weight:600;}
.hw-lbl.dt{text-decoration:line-through;color:var(--text3);}

.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--white);border-top:1.5px solid var(--border);display:flex;padding:8px 0 18px;box-shadow:0 -4px 20px var(--shadow2);z-index:100;}
.nb{flex:1;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font-size:10px;font-family:'Tajawal',sans-serif;font-weight:700;color:var(--text3);padding:6px 0;transition:color .2s;}
.nb.active{color:var(--green);}
.nbi{font-size:20px;}

.page-hdr{background:var(--white);padding:48px 18px 16px;border-bottom:1.5px solid var(--border);box-shadow:0 2px 10px var(--shadow2);}
.page-hdr-row{display:flex;align-items:center;gap:12px;}
.back-btn{width:36px;height:36px;background:var(--bg);border:1.5px solid var(--border);border-radius:50%;font-size:16px;cursor:pointer;color:var(--text);display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* CHAT */
#chat{background:var(--bg);}
.chat-hdr{background:var(--white);padding:48px 16px 14px;display:flex;align-items:center;gap:12px;border-bottom:1.5px solid var(--border);box-shadow:0 2px 10px var(--shadow2);}
.chat-ava{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.chat-nm{font-size:15px;font-weight:800;}
.chat-st{font-size:12px;color:var(--green);font-weight:600;display:flex;align-items:center;gap:4px;}
.sdot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:bl 2s infinite;}
@keyframes bl{0%,100%{opacity:1}50%{opacity:.3}}
.msgs{flex:1;overflow-y:auto;padding:14px 14px 90px;display:flex;flex-direction:column;gap:12px;}
.m{max-width:88%;animation:mPop .3s cubic-bezier(.34,1.56,.64,1);}
@keyframes mPop{from{opacity:0;transform:scale(.9) translateY(8px);}to{opacity:1;transform:scale(1) translateY(0);}}
.m-ai{align-self:flex-start;}.m-user{align-self:flex-end;}
.m-tag{font-size:11px;font-weight:700;color:var(--green);margin-bottom:4px;}
.bbl{padding:12px 16px;border-radius:18px;font-size:14px;line-height:1.7;}
.m-ai .bbl{background:var(--white);border:1.5px solid var(--border);border-radius:4px 18px 18px 18px;color:var(--text);box-shadow:0 2px 10px var(--shadow2);}
.m-user .bbl{background:linear-gradient(135deg,var(--green),var(--green2));color:white;border-radius:18px 4px 18px 18px;box-shadow:0 4px 16px rgba(60,181,90,.25);}
.m-time{font-size:10px;color:var(--text3);margin-top:4px;padding:0 4px;}
.m-ai .m-time{text-align:right;}.m-user .m-time{text-align:left;color:rgba(255,255,255,.55);}
.typing2{display:flex;gap:4px;padding:2px 0;align-items:center;}
.typing2 span{width:7px;height:7px;background:#CCC;border-radius:50%;animation:dot 1.2s infinite;}
.typing2 span:nth-child(2){animation-delay:.2s;}.typing2 span:nth-child(3){animation-delay:.4s;}
@keyframes dot{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-7px)}}
.chat-inp-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:var(--white);border-top:1.5px solid var(--border);padding:10px 14px 22px;display:flex;align-items:center;gap:8px;box-shadow:0 -4px 20px var(--shadow2);}
.cinp{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:50px;padding:12px 16px;font-size:14px;font-family:'Tajawal',sans-serif;color:var(--text);outline:none;transition:border .2s;}
.cinp:focus{border-color:var(--green);}
.cinp::placeholder{color:var(--text3);}
.icon-btn{width:40px;height:40px;background:var(--bg);border:1.5px solid var(--border);border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.icon-btn:hover{background:var(--green-bg);}
.send-btn{width:44px;height:44px;background:linear-gradient(135deg,var(--green),var(--green2));border:none;border-radius:50%;color:white;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(60,181,90,.28);flex-shrink:0;transition:transform .2s;}
.send-btn:hover{transform:scale(1.1);}.send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}

.add-form{margin:14px 18px;background:var(--white);border-radius:18px;padding:18px;border:1.5px solid var(--border);box-shadow:0 2px 12px var(--shadow2);}
.hinp{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:11px 13px;font-size:14px;font-family:'Tajawal',sans-serif;color:var(--text);outline:none;margin-bottom:10px;text-align:right;appearance:none;}
.hinp:focus{border-color:var(--green);}.hinp::placeholder{color:var(--text3);}
.add-row{display:flex;gap:8px;}
.btn-sm{flex:1;background:var(--green);color:white;border:none;border-radius:10px;padding:10px;font-size:13px;font-weight:700;font-family:'Tajawal',sans-serif;cursor:pointer;}
.hw-list{padding:0 18px;}
.day-lbl{font-size:12px;font-weight:700;color:var(--text3);margin:12px 0 8px;letter-spacing:.5px;}
.hw-card{background:var(--white);border-radius:14px;padding:14px;margin-bottom:8px;border:1.5px solid var(--border);box-shadow:0 2px 8px var(--shadow2);display:flex;align-items:center;gap:12px;}
.hw-c{width:26px;height:26px;border-radius:8px;border:2px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:all .2s;}
.hw-c.done{background:var(--green);border-color:var(--green);color:white;}
.hw-main{flex:1;}.hw-t{font-size:14px;font-weight:700;}.hw-t.dt{text-decoration:line-through;color:var(--text3);}
.hw-s{font-size:11px;color:var(--text3);margin-top:2px;}
.hw-ai{background:var(--green-bg);color:var(--green);border:none;border-radius:7px;padding:4px 10px;font-size:11px;font-weight:700;font-family:'Tajawal',sans-serif;cursor:pointer;margin-top:6px;}
.hw-badge{font-size:11px;font-weight:700;border-radius:8px;padding:4px 10px;flex-shrink:0;}
.bdone{background:var(--green-bg);color:var(--green);}.bpend{background:var(--orange-bg);color:var(--amber);}

.scard{background:var(--white);border-radius:16px;padding:18px;border:1.5px solid var(--border);box-shadow:0 2px 10px var(--shadow2);margin-bottom:14px;}
.scard-title{font-size:15px;font-weight:800;margin-bottom:14px;}

::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.pin-btn{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:14px;
  padding:16px;
  font-size:20px;
  font-weight:800;
  font-family:'Tajawal','Poppins',sans-serif;
  cursor:pointer;
  transition:all .2s;
  color:var(--text);
}
.pin-btn:hover{background:var(--green-bg);border-color:var(--green);color:var(--green);}
.pin-btn:active{transform:scale(.95);}