:root{--bg: #f6f7f9;--surface: #ffffff;--border: #e2e8f0;--text: #1a1a1a;--muted: #64748b;--primary: #006233;--primary-dark: #004d28;--accent: #c1272d;--pro: #b45309}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Tajawal,system-ui,sans-serif;background:var(--bg);color:var(--text)}.layout{display:flex;min-height:100vh}.sidebar{width:240px;background:var(--surface);border-inline-start:1px solid var(--border);padding:1rem;display:flex;flex-direction:column;gap:.25rem;position:sticky;top:0;height:100vh}.sidebar .brand{font-weight:700;font-size:1.4rem;color:var(--primary);margin-bottom:1rem}.sidebar a,.sidebar button.nav{text-decoration:none;color:var(--text);padding:.6rem .8rem;border-radius:8px;border:none;background:none;font-family:inherit;font-size:1rem;text-align:start;cursor:pointer}.sidebar a.active,.sidebar button.nav:hover{background:#ecfdf5;color:var(--primary-dark)}.sidebar .spacer{flex:1}.sidebar .plan-badge{font-size:.85rem;padding:.5rem .8rem;border-radius:8px;background:#f1f5f9;color:var(--muted)}.sidebar .plan-badge.pro{background:#fef3c7;color:var(--pro);font-weight:700}.main{flex:1;padding:2rem;max-width:1100px}.page-title{font-size:1.5rem;font-weight:700;margin:0 0 1.5rem}.field{margin-bottom:1rem}.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:.25rem}.field input,.field textarea,.field select{width:100%;padding:.6rem .7rem;border:1px solid var(--border);border-radius:8px;font-family:inherit;font-size:1rem;background:var(--surface)}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--primary);outline-offset:-1px}.field .hint{font-size:.75rem;color:var(--muted);margin-top:.2rem}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}button.btn,a.btn{background:var(--primary);color:#fff;border:none;padding:.65rem 1.2rem;border-radius:8px;font-family:inherit;font-size:1rem;cursor:pointer;text-decoration:none;display:inline-block}button.btn:hover{background:var(--primary-dark)}button.btn.secondary{background:#e2e8f0;color:var(--text)}button.btn:disabled{opacity:.6;cursor:not-allowed}.row{display:flex;gap:.75rem;align-items:center}.alert{padding:.75rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.9rem}.alert.error{background:#fef2f2;color:#991b1b}.alert.ok{background:#ecfdf5;color:var(--primary-dark)}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:start}.preview-wrap iframe{width:100%;height:80vh;border:1px solid var(--border);border-radius:8px;background:#fff}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.2rem}.card h3{margin:0 0 .5rem}.card .meta{color:var(--muted);font-size:.85rem}.plan-card .price{font-size:1.8rem;font-weight:700;color:var(--primary);margin:.5rem 0}.plan-card .badge{display:inline-block;background:var(--pro);color:#fff;font-size:.75rem;padding:.15rem .5rem;border-radius:999px}.auth-wrap{max-width:380px;margin:4rem auto;background:var(--surface);padding:2rem;border-radius:12px;border:1px solid var(--border)}.auth-wrap h1{text-align:center;color:var(--primary)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background:var(--surface);border-radius:12px;padding:1.8rem;max-width:460px;width:92%}.modal h2{margin-top:0}