:root{--paper:#fff9f0;--ink:#202825;--teal:#08665f;--terra:#c66e4f;--line:#eddfcf;--muted:#768078;--serif:Arial,Helvetica,sans-serif}body{background:var(--paper);font-family:Arial,Helvetica,sans-serif;font-size:15px;color:var(--ink)}.sidebar{display:none}.app{margin:0 auto;max-width:580px;min-height:100dvh;background:var(--paper)}header.app-header{height:69px;display:flex;align-items:center;padding:0 20px;border:0;position:relative;z-index:2}.app-brand{display:flex;align-items:center;gap:7px;color:#075a53;font-size:24px;font-weight:800;letter-spacing:-.8px}.brand-flower{font-size:29px;color:var(--terra);font-weight:400}.offline-badge{font-size:8px;font-weight:700;letter-spacing:.4px;color:var(--teal);border:1px solid var(--line);padding:6px 9px;border-radius:15px;margin-left:auto}.header-search{display:grid;place-items:center;width:38px;height:38px;margin-left:7px;color:var(--teal)}main{padding:0 17px 95px;min-height:calc(100dvh - 69px)}footer{display:none}h1,h2,h3{font-family:Arial,Helvetica,sans-serif;font-weight:750;letter-spacing:-.45px}h1{font-size:25px;line-height:1.18}h2{font-size:20px}p{line-height:1.6}.welcome{height:160px;display:flex;align-items:center;position:relative;isolation:isolate;overflow:hidden;margin:0 -4px 3px}.welcome>div{z-index:1;padding:0 6px}.welcome h1{font-size:25px;max-width:220px;margin:0 0 10px;letter-spacing:-.8px}.welcome p{font-size:11px;color:#777d72;margin:0}.door-art{position:absolute;width:185px;height:185px;object-fit:cover;right:-14px;bottom:-6px;z-index:-1;mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent 0%,black 15%)}.continue-card{background:linear-gradient(115deg,#006159,#08776c);color:white;display:flex;gap:14px;padding:19px 17px;border-radius:17px;position:relative;overflow:hidden;min-height:116px}.continue-card>svg{margin-top:10px;flex-shrink:0;width:24px;height:24px}.continue-card h2{font-size:17px;line-height:1.18;margin:4px 0 10px;max-width:250px;position:relative;z-index:1}.tiny-label{font-size:8px;font-weight:700;letter-spacing:1.2px}.continue-card .tiny-label{color:#b3d5cd;font-size:7px}.continue-pill{font-size:10px;padding:6px 14px;background:#fff8eb;color:#17574e;border-radius:20px;display:inline-flex;align-items:center;gap:12px;font-weight:700}.continue-pill svg{width:13px;height:13px}.tile-wash{position:absolute;right:-12px;top:-35px;font-size:135px;color:#9bc2b06b;font-weight:400}.phone-section{display:flex;justify-content:space-between;align-items:center;margin:23px 2px 12px}.phone-section h2{font-size:17px;margin:0}.phone-section>span,.phone-section>a{font-size:10px;color:var(--muted)}.phone-books{display:grid;grid-template-columns:1fr 1fr;gap:10px}.phone-book{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:#fffaf3;border-radius:13px;padding:13px 10px;min-height:102px;box-shadow:0 2px 4px #9b765208}.phone-book>div{flex:1;min-width:0}.phone-book h3{font-size:12px;line-height:1.1;margin:2px 0 9px;letter-spacing:-.2px}.phone-book p{font-size:7px;color:#61786d;margin:0 0 4px}.book-number{font-size:11px;color:var(--terra);font-weight:750}.little-book{width:34px;height:51px;display:grid;place-items:center;flex-shrink:0;background:#21695d;border:1px solid #1c5146;border-radius:2px 5px 5px 2px;box-shadow:-3px 2px 0 #d4c49d,2px 3px 4px #83664930;transform:rotate(-9deg);position:relative;outline:1px solid #d4af6c;outline-offset:-4px;color:#d9c18e}.little-book:before{content:'';inset:7px;position:absolute;border:1px solid #d4af6c;transform:rotate(5deg)}.little-book>span{font-size:23px;line-height:1}.book-color-1{background:#ba7149;border-color:#975234;transform:rotate(7deg)}.book-color-2{background:#1a6d68;transform:rotate(-6deg)}.book-color-3{background:#c7a779;border-color:#a58555;transform:rotate(6deg)}.phone-book .progress-line{height:4px;margin:0;background:#e1ded2}.phone-book .progress-line span{background:#097568}.daily-card{display:block;text-align:center;padding:20px 22px 16px;border:1px solid var(--line);border-radius:16px;position:relative;background:#fffaf3;overflow:hidden}.daily-card .tiny-label{color:var(--teal)}.daily-card .arabic{font-size:34px;margin:12px 0 5px}.daily-card .arabizi{font-size:12px;padding:5px 14px;background:#fae3cc}.daily-card p{font-size:13px;margin:9px 0 0}.device-note{display:flex;align-items:center;gap:5px;justify-content:center;color:#748078;font-size:9px;text-align:center;line-height:1.5;margin:18px 0}.device-note svg{width:13px;height:13px}.mobile-nav{display:flex;position:fixed;inset:auto 0 0;justify-content:space-around;max-width:580px;margin:auto;background:#fff9f0f7;backdrop-filter:blur(10px);border-top:1px solid #e8d9c6;padding:12px 20px max(12px,env(safe-area-inset-bottom));z-index:20}.mobile-nav a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;min-width:64px;color:#666e68;padding:0 18px}.mobile-nav a.active{color:var(--teal)}.mobile-nav svg{width:22px;height:22px}.mobile-nav a.active:after{content:'';width:28px;height:2px;background:var(--teal);border-radius:2px;position:absolute;bottom:7px}.back{margin:10px 0 18px;font-size:12px;color:var(--teal)}.intro,.phone-page-title{padding:14px 2px 4px;margin:0 0 20px}.intro h1,.phone-page-title h1{font-size:26px}.intro p,.phone-page-title p{font-size:12px;color:#6c786d}.section-heading{margin:22px 0 10px}.section-heading h2{font-size:19px}.lesson-link{padding:14px 10px;gap:9px;border-radius:12px;background:#fffaf3}.lesson-link h3{font-family:Arial;font-size:14px;line-height:1.25;font-weight:700;letter-spacing:-.2px;margin:0 0 5px}.lesson-link p{font-size:9px}.lesson-code{font-size:10px;min-width:40px}.lesson-check{font-size:19px}.lesson-catalog{gap:8px}.filter-row{gap:7px;margin-bottom:14px}.secondary{min-height:39px;padding:9px 11px;font-size:10px;border-color:#dfd5c5;border-radius:9px}.primary{font-size:12px;min-height:42px;border-radius:10px;background:var(--teal);padding:12px 17px;gap:8px}.catalog-query{font-size:13px;background:#fffdf6;border-color:var(--line)}.lesson-topline{display:flex;justify-content:space-between;align-items:center;height:34px;color:var(--teal);margin:3px 0 12px}.lesson-topline>a{font-size:25px;width:30px}.lesson-topline>span{font-size:10px;font-weight:700}.tiny-complete{border:0;background:none;color:var(--terra);font-size:25px;min-width:32px}.phone-lesson-title{text-align:center;max-width:330px;margin:0 auto 5px}.phone-lesson-title h1{font-size:22px;line-height:1.2;margin-bottom:13px}.phone-tabs{justify-content:center;margin:0 0 19px;border-bottom:1px solid var(--line);gap:6px}.phone-tabs button{font-size:10px;padding:10px 9px}.phone-phrase{position:relative;overflow:hidden;text-align:center;border:1px solid var(--line);border-radius:17px;background:#fffaf3;padding:22px 16px 19px;box-shadow:0 3px 6px #90684008}.phone-phrase>.tiny-label{font-size:8px;color:#37675e}.phone-phrase .arabic{font-size:36px;line-height:1.65;margin:23px 0 8px;font-family:Tahoma,'Noto Naskh Arabic',serif}.phone-phrase .arabizi{font-size:13px;background:#fae2ca;padding:6px 15px}.phone-meaning{font-size:17px;line-height:1.45;margin:16px 0 0}.phone-controls{display:flex;justify-content:space-around;align-items:center;margin:18px 0 12px}.control-tile{border:1px solid var(--line);background:#fffaf3;width:77px;min-height:57px;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#283d36}.control-tile small{font-size:8px}.control-tile svg{width:20px;height:20px}.control-tile.saved{color:var(--teal);background:#e5f0e9}.big-play{width:72px;height:72px;display:grid;place-items:center;border:0;border-radius:50%;background:linear-gradient(130deg,#138075,#00564f);color:white;box-shadow:0 4px 8px #0b605b16}.big-play svg{width:32px;height:32px;fill:white;stroke:none}.big-play:disabled{opacity:.45}.phone-playback{display:flex;align-items:center;justify-content:center;gap:15px;padding:8px 12px;background:#fbf0e2;border-radius:20px;font-size:10px}.phone-playback select{font-size:10px;background:transparent;border:0;color:var(--teal);padding:3px}.phone-playback label{display:flex;align-items:center;gap:3px}.phone-playback small{color:#839085;font-size:9px;margin-left:auto}.audio-missing{font-size:10px;line-height:1.4;color:#9c704e;text-align:center;margin:10px 0 0}.audio-import{text-align:center}.audio-import .import-label{font-size:10px;padding:8px 0}.phone-context{display:flex;gap:10px;padding:16px 13px;border-radius:15px;background:#faecde;margin:10px 0 16px}.context-icon{font-size:17px;line-height:1.2;color:var(--terra)}.phone-context h3{font-size:12px;margin:0 0 5px;letter-spacing:0}.phone-context p{font-size:10px;line-height:1.6;margin:0}.translation-toggle{border:1px solid var(--teal);color:var(--teal);width:100%;border-radius:11px;min-height:38px;background:transparent;font-size:11px;font-weight:700}.phone-phrase-nav{display:flex;align-items:center;justify-content:space-between;margin:17px 0;gap:5px}.phone-phrase-nav>a{font-size:9px;color:var(--muted)}.phone-lesson-end{display:flex;gap:9px;justify-content:space-between;border-top:1px solid var(--line);padding:20px 0 0;margin-top:26px;flex-wrap:wrap}.phone-lesson-end .primary{font-size:10px;flex:1}.phone-lesson-end .secondary{font-size:10px}.lesson-content{padding:18px 14px;background:#fffaf3}.lesson-content p{font:14px/1.85 Arial,sans-serif}.lesson-content h2{font:700 18px/1.35 Arial,sans-serif}.table-scroll{margin:16px 0}table{font-size:11px;min-width:350px}td,th{padding:8px}td.arabic-cell{font-size:21px;min-width:100px}.reading-layout{display:block}.phone-dialogue{display:flex;flex-direction:column;gap:15px}.phone-bubble{background:#e6eee5;border-radius:17px 17px 17px 3px;padding:17px 18px;position:relative;margin-right:16px}.phone-bubble.reply{background:#faeddd;margin:0 0 0 16px;border-radius:17px 17px 3px 17px}.phone-bubble .arabic{font-size:27px;line-height:1.7;margin:8px 0 5px;text-align:right}.phone-bubble .arabizi{font-size:11px;padding:5px 11px}.phone-bubble p{font-size:13px;margin:10px 0}.bubble-controls{display:flex;gap:8px;align-items:center}.small-play{height:32px;width:32px;display:grid;place-items:center;background:var(--teal);color:white;border:0;border-radius:50%}.small-play svg{fill:white;stroke:none;width:13px;height:13px}.bubble-controls .round{width:30px;height:30px}.bubble-controls .round svg{width:15px;height:15px}.phone-bubble .import-label{font-size:9px}.conversation-intro{font-size:11px;color:var(--muted);text-align:center;margin-bottom:20px}.full-width{width:100%;margin-top:19px}.info-card{background:#f4ecdd;padding:18px 15px;border-color:var(--line);margin:15px 0}.info-card h3{font-family:Arial;font-size:16px;font-weight:750}.info-card p{font-size:12px}.voice-card h3{font-family:Arial;font-size:21px;font-weight:750}.voice-card{padding:18px 15px;background:#fffaf3;border-color:var(--line)}.voice-card p{font-size:11px}.phrase-grid{grid-template-columns:1fr;gap:13px}.saved-card{border-color:var(--line);background:#fffaf3;padding:20px 15px}.saved-card .arabic{font-size:32px}.saved-card .arabizi{font-size:13px}.saved-card p{font-size:16px}.searchbox input{font-size:13px;padding:15px 15px 15px 43px}.searchbox svg{left:12px;top:14px;width:19px;height:19px}.filter-row button{font-size:10px}.result{padding:16px;background:#fffaf3;border-color:var(--line)}.result h3{font-family:Arial;font-size:16px;font-weight:750}.result p{font-size:12px}.reader-bar h2{font-size:18px}.reader-bar label{font-size:11px}.reader-bar input{width:55px;padding:8px}.original-page{margin:17px auto}.lesson-pagination{gap:8px}.practice-card{margin:15px auto}.practice-card .eyebrow{font-size:9px}.practice-card>.saved-card{margin-bottom:15px}.source{font-size:10px}.empty{padding:35px 18px}.empty h2{font-size:20px}.empty p{font-size:12px}#toast{left:50%;bottom:87px;max-width:90vw;min-width:240px;font-size:12px;text-align:center}#breadcrumb{display:none}.pattern-corner{position:absolute;left:-7px;top:-7px;width:48px;height:48px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath fill='%23096860' d='M24 7l5 9 10 2-7 8 1 11-9-5-9 5 1-11-7-8 10-2z'/%3E%3Cpath fill='%23c97754' d='M0 2l8 7-8 7zM45 0l-8 9 9 7zM2 33l8 7-9 8zM13 2l5 5-5 5-5-5zM36 35l5 5-5 5-5-5z'/%3E%3Cpath fill='%23f6e4ce' d='M24 17l6 6-6 6-6-6z'/%3E%3C/svg%3E");opacity:.85;pointer-events:none}.pattern-corner.right{left:auto;right:-7px;transform:scaleX(-1)}@media(min-width:600px){body{background:#e9dfcf}.app{box-shadow:0 0 50px #69563c15}.mobile-nav{max-width:580px}.welcome{height:180px}.door-art{width:220px;height:220px}.welcome h1{font-size:29px}.phone-books{gap:12px}.phone-book{padding:16px 17px;min-height:110px}.phone-book h3{font-size:14px}.little-book{width:40px;height:60px}.phone-phrase .arabic{font-size:44px}.phone-meaning{font-size:21px}}
