:root { --bg:#07040f; --fg:#f4f0ff; --magenta:#e22eb4; --cyan:#50f0ff; --yellow:#fcda00; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; min-height:100%; }
header { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; }
h1 { margin:0; font-size:20px; letter-spacing:.08em; color:var(--magenta); }
h1 span { color:var(--cyan); font-weight:400; }
nav .tab { background:transparent; color:#aaa; border:1px solid #333; padding:6px 12px; border-radius:999px; margin-left:6px; font:inherit; }
nav .tab.active { color:var(--fg); border-color:var(--magenta); }
main { padding:0 16px 24px; max-width:720px; margin:0 auto; }
#stage { position:relative; width:100%; aspect-ratio:3/4; background:#000; border-radius:16px; overflow:hidden; box-shadow:0 0 0 1px #222, 0 0 40px rgba(226,46,180,.25); }
#stage canvas { width:100%; height:100%; object-fit:cover; display:block; }
/* Resultaat als echte <img>: lang indrukken op iOS geeft "Bewaar in Foto's" / "Deel…",
   rechtsklik → opslaan op desktop. Niet pointer-events:none maken. */
#result { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-touch-callout:default; -webkit-user-select:auto; user-select:auto; }
#visor-hint, #status { z-index:2; }
#ios-guide { margin-top:14px; padding:16px; border-radius:14px; background:#1b1530; border:2px solid var(--cyan); text-align:center; }
#ios-guide p { margin:0 0 12px; font-size:17px; line-height:1.45; font-weight:600; }
#ios-guide a { display:block; margin-top:10px; color:var(--cyan); font-weight:600; }
#status { position:absolute; inset:auto 0 0 0; padding:8px 12px; font-size:13px; background:rgba(0,0,0,.55); color:#ddd; }
#status:empty { display:none; }
#visor-hint { position:absolute; top:12px; left:50%; transform:translateX(-50%); padding:8px 14px; border-radius:999px; background:rgba(7,4,15,.72); border:1px solid var(--magenta); color:var(--fg); font-size:14px; white-space:nowrap; pointer-events:none; }
#controls { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:14px; }
button, label.secondary { font:inherit; border:0; border-radius:999px; padding:12px 22px; cursor:pointer; }
.primary { background:var(--magenta); color:#fff; font-weight:600; }
.secondary { background:#1b1530; color:var(--fg); border:1px solid #3a2f5a; }
#share { display:flex; justify-content:center; gap:8px; margin-top:14px; }
.social { display:flex; flex-direction:column; align-items:center; gap:4px; background:#120d22; border:1px solid #2c2347; border-radius:14px; padding:10px 0; width:78px; color:var(--cyan); font-size:11px; }
.social svg { width:26px; height:26px; }
.social span { color:#bbb; }
.social.share { color:var(--yellow); border-color:#4a3f1a; }
#hint { color:#888; font-size:13px; text-align:center; }
#toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#1b1530; border:1px solid var(--cyan); color:var(--fg); padding:12px 16px; border-radius:12px; font-size:14px; max-width:90vw; box-shadow:0 8px 30px rgba(0,0,0,.5); display:flex; gap:12px; align-items:center; }
#toast a { color:var(--cyan); font-weight:600; white-space:nowrap; }
[hidden] { display:none !important; }