@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');
:root{--g:#075b48;--g2:#0b8060;--mint:#e6f4ed;--bg:#f5f7f3;--ink:#17251f;--muted:#6c7b73;--line:#e1e8e1;--gold:#f7efd9}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,sans-serif;padding-bottom:env(safe-area-inset-bottom)}button,input,textarea,select{font:inherit}button{touch-action:manipulation;cursor:pointer}.topbar{position:sticky;top:0;z-index:5;background:#fff;display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line)}.logo,.avatar{display:grid;place-items:center;background:var(--g);color:white;font:32px "Noto Naskh Arabic",serif;width:48px;height:48px;border-radius:14px;flex-shrink:0}.brand{display:flex;flex-direction:column;gap:3px;flex:1}.brand strong{font-size:17px}.brand span{font-size:11px;color:var(--muted)}.install{background:var(--g);color:#fff;border:0;border-radius:20px;padding:9px 12px}.hidden{display:none!important}.tabs{position:sticky;top:72px;z-index:4;display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border-bottom:1px solid var(--line)}.tab{border:0;background:white;color:#758179;padding:9px 2px;display:flex;flex-direction:column;gap:4px;align-items:center;font-size:19px}.tab span{font-size:11px}.tab.active{color:var(--g);font-weight:700;border-bottom:3px solid var(--g)}main{max-width:740px;margin:auto;padding:16px 13px 25px}.view{display:none}.view.active{display:block}.hero{border-radius:23px;background:linear-gradient(145deg,#e5f4eb,#fbf6e8);border:1px solid #d7e9dd;padding:21px 18px;margin-bottom:12px}.eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:700;color:var(--g2)}h1{font-size:25px;line-height:1.2;letter-spacing:-.6px;margin:9px 0}.hero p,.heading p{font-size:13px;line-height:1.55;color:var(--muted);margin:7px 0 0}.mode-card,.tutor,.panel,.lesson,.dict-row{background:#fff;border:1px solid var(--line);border-radius:18px;padding:15px;margin-bottom:12px;box-shadow:0 5px 20px #143c2507}.mode-card label{display:block;font-weight:700;font-size:13px;margin-bottom:8px}.mode-card select{width:100%;border:1px solid #cbded2;border-radius:12px;background:#f9fcf9;color:var(--g);padding:12px}.mode-card p{font-size:11px;color:var(--muted);margin:7px 0 0}.tutor-head{display:flex;align-items:center;gap:10px}.avatar{width:42px;height:42px;font-size:28px}.tutor-head>div:nth-child(2){display:flex;flex-direction:column;gap:4px;flex:1}.tutor-head strong{font-size:14px}.tutor-head span{font-size:11px;color:var(--g2)}.tutor-head i{width:8px;height:8px;border-radius:50%;background:#38b77d}.greeting{padding-top:9px}.greeting p{margin:6px 0;line-height:1.55;font-size:13px}.arabic{font:26px "Noto Naskh Arabic",serif;color:var(--g);text-align:right;direction:rtl}.latin{color:var(--muted);font-size:12px!important}.quick{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}.quick button{border:1px solid #d8e8de;border-radius:13px;background:#f8fcf9;color:var(--g);padding:9px 10px;font-size:12px}.messages{display:grid;gap:9px;margin:12px 0}.bubble{max-width:93%;padding:12px 13px;border-radius:16px;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.65}.bubble.user{justify-self:end;background:var(--g);color:white;border-bottom-right-radius:5px}.bubble.ai{justify-self:start;background:white;border:1px solid var(--line);border-bottom-left-radius:5px}.status{font-size:12px;color:#95651c}.status:not(:empty){padding:9px;background:#fff5db;border-radius:10px;margin:6px 0}.composer{display:flex;align-items:flex-end;gap:7px;background:#fff;border:1px solid #dce5dc;border-radius:17px;padding:7px}.mic,.send{height:42px;min-width:42px;border:0;border-radius:12px;background:var(--mint);color:var(--g);font-size:19px}.mic.listening{background:#ffe7e7;color:#b42318}.send{background:var(--g);color:white}textarea{flex:1;resize:none;min-height:42px;max-height:120px;border:0;outline:0;padding:11px 3px;background:transparent;font-size:13px}.hint,.note{font-size:11px;color:var(--muted);line-height:1.5;margin:9px 4px}.heading{padding:8px 3px 14px}.lesson{display:flex;align-items:center;gap:11px;width:100%;text-align:left;color:var(--ink)}.lesson .num{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:var(--mint);color:var(--g);font-weight:700}.lesson .desc{flex:1}.lesson strong{display:block;font-size:13px}.lesson small{color:var(--muted);font-size:11px}.panel h3{font-size:12px;color:var(--muted);margin:18px 0 9px}.panel p{font-size:13px;line-height:1.6}.panel .arabic{font-size:28px}.panel button{border:1px solid #d4e6da;background:var(--mint);color:var(--g);padding:9px 12px;border-radius:12px}.search{width:100%;padding:13px;border:1px solid var(--line);border-radius:13px;margin-bottom:12px;outline-color:var(--g)}.dict-row{display:flex;align-items:center;gap:9px;padding:12px}.dict-row .word{flex:1}.dict-row strong{display:block;font:23px "Noto Naskh Arabic",serif;color:var(--g);direction:rtl}.dict-row small{font-size:11px;color:var(--muted)}.dict-row .meaning{font-size:12px}.dict-row button{border:1px solid var(--line);background:var(--bg);border-radius:10px;color:var(--g);height:36px;min-width:36px}.harakat-display{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:14px}.harakat-display>span{font:54px "Noto Naskh Arabic",serif;color:var(--g);min-width:65px;text-align:center}.harakat-display>div{flex:1;display:flex;flex-direction:column;gap:5px}.harakat-display small{color:var(--muted)}.letters{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.letters button{font:24px "Noto Naskh Arabic",serif;padding:8px 0}.letters button,.vowels button{border:1px solid var(--line);border-radius:10px;background:#fafcf9}.letters button.selected,.vowels button.selected{background:var(--mint);border-color:#80bda3;color:var(--g)}.vowels{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.vowels button{padding:9px 2px;font-size:10px}.vowels strong{display:block;font:23px "Noto Naskh Arabic",serif}footer{max-width:740px;margin:auto;border-top:1px solid var(--line);padding:14px 17px 23px;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted)}footer strong{color:var(--g)}@media(min-width:600px){main{padding:25px}.hero{padding:27px}.letters{grid-template-columns:repeat(8,1fr)}.tab{font-size:21px}.tab span{font-size:12px}}