@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#10121a;--panel:#191d29;--line:#2b3142;--text:#f4f5fb;--muted:#a6aec2;--purple:#7868f6;--purple2:#594bd1}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0%,#28234c 0,transparent 32%),var(--bg);color:var(--text);font-family:"IBM Plex Sans Arabic",system-ui,sans-serif}
.top{max-width:760px;margin:auto;padding:18px 20px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px}.brand b{display:block;font-size:17px}.brand small{display:block;color:var(--muted);font-size:11px;direction:ltr;text-align:start}.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,#8c7dff,#5142bd);display:grid;place-items:center;font-weight:800;letter-spacing:-1px}.lang,.secondary{border:1px solid var(--line);background:#222737;color:var(--text);padding:10px 14px;border-radius:12px;font-weight:600}
main{max-width:760px;margin:auto;padding:12px 20px 32px}.hero{padding:27px 23px;border:1px solid #38335e;border-radius:23px;background:linear-gradient(135deg,#28234b,#1b2030 75%);margin-bottom:17px}.eyebrow{color:#b9b0ff;font-size:12px}.hero h1{font-size:27px;margin:10px 0}.hero p{color:#c1c5d4;line-height:1.8;font-size:14px}.primary{background:linear-gradient(135deg,var(--purple),var(--purple2));border:0;border-radius:13px;color:white;padding:13px 18px;font:inherit;font-weight:700;cursor:pointer}.primary:disabled{opacity:.45;cursor:not-allowed}.hero .primary{width:100%;margin-top:8px}.note{font-size:11px!important;color:#a9b0c2!important;margin-bottom:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:19px;padding:19px;margin:15px 0}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}.section-head h2{font-size:17px;margin:0}.pill{font-size:11px;color:#d9d4ff;background:#393263;padding:6px 10px;border-radius:20px}.pill.muted{background:#2a3040;color:#c5cbda}label{display:block;font-size:13px;color:#d6daea;margin:15px 0 7px}select,input,textarea{width:100%;background:#111520;color:var(--text);border:1px solid #343b4e;border-radius:11px;padding:12px;font:inherit;font-size:14px;outline:none}textarea{resize:vertical}select:focus,input:focus,textarea:focus{border-color:#8174ff}.status{margin-top:14px;padding:11px;border-radius:10px;background:#222a37;color:#cbd2e2;font-size:12px}.preview{display:flex;align-items:center;gap:14px;background:#111520;border:1px dashed #424961;border-radius:13px;padding:15px;margin-bottom:15px}.preview-icon{width:48px;height:48px;border-radius:13px;background:#29264c;display:grid;place-items:center;color:#b9b0ff}.preview p{font-size:12px;color:var(--muted);margin:5px 0 0;line-height:1.6}.actions{display:flex;gap:10px;margin-top:15px}.actions button{flex:1}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}.tile{background:#191d29;border:1px solid var(--line);border-radius:15px;padding:14px;display:flex;flex-direction:column;gap:7px}.tile span{font-size:20px}.tile b{font-size:12px}.tile small{font-size:10px;color:var(--muted);line-height:1.5}footer{text-align:center;color:#7f879b;font-size:10px;padding:12px 22px 28px;line-height:1.8}
html[dir="ltr"] .brand small{text-align:left}
@media(max-width:480px){.hero h1{font-size:23px}.panel{padding:15px}.tiles{grid-template-columns:1fr}.tile{display:grid;grid-template-columns:32px 1fr;align-items:center}.tile small{grid-column:2}.actions{flex-direction:column}}