:root{--bg:#f6f4ef;--fg:#202e2a;--muted:#596760;--line:#d6dcd2;--card:#fffefb;--accent:#28634d;--soft:#e6eee2;--chip:#edf0e8}
@media(prefers-color-scheme:dark){:root{--bg:#141d19;--fg:#ecede5;--muted:#b0bdb4;--line:#35463b;--card:#1c2922;--accent:#a9d7b3;--soft:#243c2d;--chip:#293c30}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{color:var(--accent);cursor:pointer}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button{border:0;background:none;padding:8px 10px;border-radius:5px}button:hover:not(:disabled){background:var(--chip)}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}[hidden]{display:none!important}.wrap{max-width:1120px;margin:auto;padding:0 36px}nav{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding:26px 0}.brand{font-weight:700;color:var(--accent);letter-spacing:-.5px;font-size:18px}.brand span{font-weight:400;color:var(--muted);font-size:14px;margin-left:10px;letter-spacing:0}.local{font:11px ui-monospace,Consolas,monospace;color:var(--muted)}header{position:relative;padding:48px 0 37px;max-width:610px}.eyebrow{font:10px/1.5 ui-monospace,Consolas,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:1.3px;margin:0 0 20px}h1{font:56px/1.04 Georgia,serif;letter-spacing:-2px;margin:0 0 18px}h1 em{color:var(--accent)}.intro{color:var(--muted);max-width:470px;margin:0;font-size:15px}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{border:1px solid var(--line);background:var(--card);border-radius:12px;overflow:hidden;min-width:0}.panel-heading{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:72px}.panel-heading h2{font-size:14px;font-weight:600;margin:0}.panel-heading h2 span{font:11px ui-monospace,Consolas,monospace;color:var(--muted);margin-right:12px}.actions{display:flex;font-size:12px}.panel>textarea{display:block;width:100%;resize:vertical;min-height:190px;max-height:500px;border:0;border-radius:0;background:transparent;color:var(--fg);padding:22px;font-size:22px;line-height:1.8}.panel>textarea:focus{outline-offset:-4px}.panel>textarea::placeholder{color:var(--muted);opacity:.7}.draft-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 22px 16px;font-size:11px;color:var(--muted)}.draft-footer p{margin:0}.draft-footer button{font-size:11px;padding:6px;white-space:nowrap}code{color:var(--accent);font-size:12px}.suggestion-area{border-top:1px solid var(--line);padding:17px 22px;min-height:109px;background:var(--chip)}.suggestion-heading{display:flex;justify-content:space-between;gap:10px;font:10px ui-monospace,Consolas,monospace;color:var(--muted);margin-bottom:12px}.suggestions{display:flex;flex-wrap:wrap;gap:7px}.suggestions button{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 11px;background:var(--card);border:1px solid var(--line);border-radius:7px;line-height:1.4}.suggestions .arabic{font-size:18px;color:var(--fg)}.suggestions .latin{font:9px ui-monospace,Consolas,monospace;color:var(--muted);margin-top:3px}.no-suggestion{font-size:12px;color:var(--muted);margin:4px 0}.arabic-label{font-size:18px;color:var(--accent)}.result-panel{background:var(--soft);display:flex;flex-direction:column}.result-panel>textarea{font-size:27px;flex:1;min-height:205px}.conversion-note{color:var(--muted);font-size:11px;line-height:1.6;margin:0;padding:0 22px 19px}.result-footer{border-top:1px solid var(--line);padding:17px 22px;display:flex;justify-content:space-between;align-items:center;gap:15px;min-height:75px}.result-footer>span{color:var(--muted);font:10px ui-monospace,Consolas,monospace}.primary{background:var(--accent);color:var(--bg);padding:11px 17px;font-size:13px;font-weight:600;border-radius:6px}.primary:hover:not(:disabled){background:var(--accent);filter:brightness(1.1)}.primary span{margin-left:20px}.phrases-section,.saved-section{margin-top:36px}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.section-heading h2{font:26px Georgia,serif;letter-spacing:-.7px;margin:0 0 3px}.section-heading p{font-size:12px;color:var(--muted);margin:0}.section-heading .eyebrow{margin:0;white-space:nowrap}.phrases{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.phrase{border:1px solid var(--line);background:var(--card);padding:15px 17px;border-radius:8px;text-align:left;color:var(--fg)}.phrase .title{display:block;font-size:11px;color:var(--muted);margin-bottom:6px}.phrase .phrase-text{display:block;font-size:19px;line-height:1.8;text-align:right}.secondary{border:1px solid var(--line);font-size:12px;padding:10px 14px}.saved-section{border-top:1px solid var(--line);padding-top:28px}.empty{border:1px dashed var(--line);padding:18px;color:var(--muted);border-radius:8px;font-size:12px;margin:0}.saved-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.saved-item{display:flex;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:8px;overflow:hidden;min-width:0}.saved-item .phrase{border:0;flex:1;min-width:0;background:transparent}.saved-item .phrase-text{font-size:16px;text-align:start;overflow-wrap:anywhere;max-height:80px;overflow:auto}.remove-shortcut{margin:0 6px;flex-shrink:0}#save-form{padding:20px;border:1px solid var(--line);border-radius:8px;margin-bottom:16px;background:var(--card)}.form-fields{display:grid;grid-template-columns:1fr 2fr;gap:15px}.form-fields label{font-size:12px;color:var(--muted)}.form-fields input,.form-fields textarea{display:block;width:100%;background:var(--bg);border:1px solid var(--line);color:var(--fg);border-radius:5px;padding:10px;margin-top:7px}.form-fields textarea{resize:vertical;min-height:90px}.form-actions{display:flex;gap:10px;margin-top:14px}.status{min-height:24px;font-size:12px;color:var(--accent);margin:18px 0}.note{display:flex;gap:17px;padding:21px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.note>span{font-size:28px;color:var(--accent)}.note p{max-width:730px;margin:0}.note strong{color:var(--fg);display:block;margin-bottom:3px;font-weight:600}footer{border-top:1px solid var(--line);padding:20px 0 28px;display:flex;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:800px){.wrap{padding:0 22px}.workspace{grid-template-columns:1fr}.panel>textarea{min-height:160px}.result-panel>textarea{min-height:170px}.phrases,.saved-list{grid-template-columns:repeat(2,1fr)}header{padding:36px 0 28px}h1{font-size:49px}.result-footer{min-height:70px}}
@media(max-width:480px){.wrap{padding:0 16px}nav{padding:21px 0}.brand{font-size:16px}.brand span{font-size:12px;margin-left:4px}.local{display:none}.section-heading{gap:12px}.section-heading .eyebrow{display:none}.section-heading h2{font-size:24px}.section-heading p{font-size:11px}.phrases{gap:8px}.phrase{padding:12px}.phrase .phrase-text{font-size:17px}.panel-heading{padding:13px 16px;min-height:60px}.panel>textarea{padding:16px}.draft-footer{padding:0 16px 13px;flex-wrap:wrap}.suggestion-area,.result-footer{padding:15px 16px}.suggestion-heading{font-size:9px}.conversion-note{padding:0 16px 15px}.form-fields{grid-template-columns:1fr}.saved-list{grid-template-columns:1fr}footer{font-size:10px}.secondary{font-size:11px;padding:8px}.suggestions button{min-height:48px}}