*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0a0a0f;--surface:#111118;--surface-soft:#161621;--field:#151520;--border:rgba(255,255,255,.09);--text:#f0f0f5;--muted:#8a8aa1;--accent:#007AFF;--green:#00c896;--danger:#ff6b6b;--sans:'IBM Plex Sans',sans-serif;--arabic:'IBM Plex Sans Arabic',sans-serif;--mono:'IBM Plex Sans',sans-serif}
:root[data-theme="light"]{--bg:#f7f8fc;--surface:#fff;--surface-soft:#f4f6fb;--field:#f7f8fc;--border:rgba(16,24,40,.12);--text:#111827;--muted:#667085;--accent:#005fcb;--green:#069c6b;--danger:#d92d20}
body{background:var(--bg);color:var(--text);font-family:var(--sans);min-height:100vh}html[lang="ar"] body{font-family:var(--arabic)}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px 36px}.back-link{display:inline-flex;margin:16px 0 8px;color:var(--muted);text-decoration:none;font-size:.8rem;font-weight:600}.back-link:hover{color:var(--text)}
.hero{padding:18px 0 12px}.hero-tag{display:inline-flex;font-family:var(--mono);font-size:.7rem;color:var(--green);border:1px solid color-mix(in srgb,var(--green) 35%,transparent);background:color-mix(in srgb,var(--green) 8%,transparent);padding:4px 10px;border-radius:999px;margin-bottom:12px;letter-spacing:.08em}h1{font-size:clamp(2rem,7vw,3.5rem);line-height:1.03;letter-spacing:-.04em;margin-bottom:12px}p.sub{max-width:720px;color:var(--muted);font-size:.98rem;line-height:1.75}
.mode-tabs{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:14px 0;background:var(--surface-soft);border:1px solid var(--border);border-radius:14px}.mode-tab{border:0;background:transparent;color:var(--muted);border-radius:10px;padding:0 16px;min-height:42px;font-weight:700;cursor:pointer}.mode-tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.18)}
.workspace{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:16px;align-items:start}.editor-card,.preview-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px}.field-label,.contact-grid label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:.76rem;font-weight:700}.field-label{margin-bottom:7px}textarea,input{width:100%;background:var(--field);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:12px;font-size:.92rem}textarea{min-height:150px;resize:vertical;line-height:1.6}.note-input{min-height:90px}.helper,.contact-intro,.preview-help{color:var(--muted);font-size:.76rem;line-height:1.65}.helper{margin-top:8px}.contact-intro{padding:10px 12px;margin-bottom:12px;background:var(--surface-soft);border:1px solid var(--border);border-radius:12px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.contact-grid label.full{grid-column:1/-1}.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.btn{min-height:44px;padding:0 16px;border-radius:11px;border:1px solid var(--border);background:var(--surface-soft);color:var(--text);font-weight:700;cursor:pointer}.btn.primary{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}.status{font-size:.78rem;color:var(--green);margin-top:10px;min-height:20px}.status.error{color:var(--danger)}
.preview-card{position:sticky;top:12px}.preview-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:12px;color:var(--muted);font-size:.74rem;font-weight:700}.preview-type{font-size:.66rem;letter-spacing:.08em;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);padding:4px 7px;border-radius:999px}.qr-box{background:#fff;border-radius:16px;padding:16px;display:grid;place-items:center;aspect-ratio:1/1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}canvas{display:block;width:100%;height:auto;max-width:320px}.preview-help{margin-top:10px;text-align:center}
footer{text-align:center;padding:28px 0 8px;font-size:.72rem;color:var(--muted)}footer a{color:inherit}
[hidden]{display:none!important}
@media(max-width:820px){.workspace{grid-template-columns:1fr}.preview-card{position:static}.qr-box{max-width:560px;margin:0 auto}.contact-grid{grid-template-columns:1fr}.contact-grid label.full{grid-column:auto}}
@media(max-width:560px){.wrap{padding:0 12px 28px}.hero{padding-top:12px}h1{font-size:2.5rem}.mode-tabs{display:grid;width:100%}.editor-card,.preview-card{padding:14px;border-radius:15px}.actions{display:grid;grid-template-columns:1fr 1fr}.btn{width:100%;padding:0 10px}.qr-box{padding:12px}.preview-card{margin-bottom:8px}}