@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Tajawal:wght@400;500;600;700;800&family=Great+Vibes&family=Allura&family=Pacifico&display=swap');
:root{--brand:#7e22ce;--brand2:#5D5CDE;--ink:#172033;--muted:#687386;--line:#e6e9f0;--surface:#fff;--surface2:#f7f8fc;--page:#f5f6fb}*{box-sizing:border-box}body{margin:0;background:var(--page);color:var(--ink);font-family:Outfit,Tajawal,sans-serif}html[lang=ar] body{font-family:Tajawal,Outfit,sans-serif}.dark{--ink:#edf0f8;--muted:#a5aec0;--line:#30394b;--surface:#1b2332;--surface2:#222c3d;--page:#111827}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}a{text-decoration:none;color:inherit}.container{width:min(1160px,calc(100% - 30px));margin:auto}.site-header{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}.header{height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-weight:800;font-size:20px;display:flex;align-items:center;gap:10px}.mark{background:linear-gradient(120deg,var(--brand),var(--brand2));color:white;padding:9px;border-radius:12px}.head-actions{display:flex;gap:9px;align-items:center}.btn,.small{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:11px;padding:11px 14px;font-weight:700}.btn.primary{background:linear-gradient(110deg,var(--brand),var(--brand2));color:white;border:0}.btn:focus-visible,.small:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #a78bfa}.hero{text-align:center;padding:44px 0 28px}.hero .eyebrow{color:var(--brand);font-size:12px;font-weight:800;letter-spacing:.08em}.hero h1{font-size:clamp(30px,4vw,46px);margin:12px 0}.hero h1 span{color:var(--brand)}.hero p{color:var(--muted);margin:auto;max-width:700px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:20px;align-items:start;margin-bottom:35px}.editor{display:grid;gap:15px}.panel{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:20px;box-shadow:0 12px 32px #1820340c}.panel h2{font-size:16px;margin:0 0 16px}.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tab{padding:12px 5px;border-radius:11px;border:1px solid var(--line);background:var(--surface2);color:var(--muted);font-weight:700}.tab.active{border-color:var(--brand);background:#7e22ce13;color:var(--brand)}.mode{display:none}.mode.active{display:block}.draw-wrap{position:relative;border:2px dashed var(--line);border-radius:13px;background:#fff;overflow:hidden;touch-action:none}.draw-wrap canvas{display:block;width:100%;height:250px;touch-action:none;cursor:crosshair}.draw-hint{position:absolute;pointer-events:none;top:12px;left:12px;color:#9ca3af;font-size:12px}.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.control{display:grid;gap:7px;min-width:0}.control.full{grid-column:1/-1}.control label{font-size:12px;color:var(--muted);font-weight:800}.control input:not([type=color]):not([type=range]),.control select{width:100%;padding:11px;background:var(--surface2);border:1px solid var(--line);border-radius:10px;color:var(--ink)}input[type=range]{width:100%;accent-color:var(--brand)}input[type=color]{height:42px;width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface2)}.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.actions button{flex:1}.preview-column{position:sticky;top:90px}.preview-stage{background:repeating-conic-gradient(#f2f2f2 0 25%,#fff 0 50%) 0 0/24px 24px;border-radius:13px;min-height:260px;display:grid;place-items:center;padding:14px;overflow:hidden}.preview-stage canvas{width:100%;height:auto;max-height:310px;object-fit:contain}.preview-note{font-size:11px;color:var(--muted);margin:12px 0}.status{font-size:12px;min-height:18px;color:var(--muted)}.footer{padding:26px 0;border-top:1px solid var(--line);color:var(--muted);font-size:12px;text-align:center}.upload{display:block;padding:30px 15px;border:2px dashed var(--line);border-radius:12px;text-align:center;cursor:pointer;color:var(--muted);background:var(--surface2)}.upload input{display:none}.upload img{max-width:100%;max-height:170px;display:block;margin:12px auto}.pdfnote{font-size:12px;color:var(--muted);line-height:1.7}.pdfstatus{font-size:12px;color:var(--brand);min-height:20px}.hidden{display:none!important}@media(max-width:850px){.workspace{grid-template-columns:1fr}.preview-column{position:static;order:-1}}@media(max-width:550px){.panel{padding:14px}.hero{padding:30px 0 20px}.controls{grid-template-columns:1fr}.control.full{grid-column:auto}.brand{font-size:16px}.btn,.small{padding:10px}.draw-wrap canvas{height:210px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}