/* Visualz AI UI kit. Light is the default, dark via [data-theme="dark"]. */
:root{
  --vz-red:#B52A24;--vz-red-500:#E9473C;--vz-red-700:#B52A24;--vz-red-800:#8F211B;
  --vz-black:#0A0A0A;--vz-deep:#0B0D11;--vz-charcoal:#13151A;--vz-card:#171A20;--vz-card2:#1F2229;--vz-card3:#2A2D35;
  --vz-white:#FFFFFF;--vz-ivory:#F4EFE7;--vz-cream:#EDE5D6;--vz-bone:#D9CFC0;
  --vz-dim:#8A8B92;--vz-dim2:#5A5B62;--vz-mid:#3A3C42;--vz-ink:#1A1614;--vz-inkDim:#5C544D;--vz-inkSoft:#8F857B;
  --vz-service-nextvision:#F36F21;--vz-service-gotowedding:#0E5640;
  --bg:#FFFFFF;--bg-2:#F4EFE7;--surface:#FFFFFF;--surface-2:#EDE5D6;--line:#D9CFC0;--line-2:#E8E1D6;
  --text:#1A1614;--text-2:#5C544D;--text-3:#8F857B;--keeper:#B52A24;--keeper-text:#B52A24;
  --btn-primary-bg:#1A1614;--btn-primary-fg:#FFFFFF;--focus:#1A1614;--thumb:#EDE5D6;
  --font-text:Inter,"IBM Plex Sans Arabic",system-ui,sans-serif;--font-display:Anton,sans-serif;--font-ar-display:Lalezar,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace;
  --r:4px;--r-lg:8px;
}
[data-theme="dark"]{
  --bg:#0A0A0A;--bg-2:#0B0D11;--surface:#171A20;--surface-2:#1F2229;--line:#23262E;--line-2:#1A1C22;
  --text:#FFFFFF;--text-2:#8A8B92;--text-3:#5A5B62;--keeper:#B52A24;--keeper-text:#E9473C;--vz-service-gotowedding:#237A5D;
  --btn-primary-bg:#FFFFFF;--btn-primary-fg:#1A1614;--focus:#FFFFFF;--thumb:#1F2229;
}
*{box-sizing:border-box} html,body{margin:0} [data-theme]{background:var(--bg);color:var(--text)}
body{background:var(--bg);color:var(--text);font:13px/1.5 var(--font-text);-webkit-font-smoothing:antialiased}
[dir="rtl"] body,[dir="rtl"]{font-family:"IBM Plex Sans Arabic",Inter,sans-serif;letter-spacing:0}
.num,.mono{font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
.eyebrow{font:500 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);display:inline-flex;align-items:center;gap:8px}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--keeper);flex:none}
[dir="rtl"] .eyebrow{font:500 12px/1 "IBM Plex Sans Arabic";letter-spacing:0;text-transform:none}
[dir="rtl"] .eyebrow .mono{font:500 11px "JetBrains Mono";letter-spacing:.1em}
.display{font:400 1em/.92 var(--font-display);text-transform:uppercase;letter-spacing:-.005em}
[dir="rtl"] .display.ar{font-family:var(--font-ar-display);text-transform:none;line-height:1.2}
.dot{display:inline-block;width:.22em;height:.22em;border-radius:50%;background:var(--keeper);margin-inline-start:.08em;vertical-align:.02em}
.logo svg circle,svg[aria-label="Visualz AI"] circle{fill:var(--keeper)}
/* service accents (family hypothesis B: services inside the Visualz hub). One colour per service, dot and accent only, never a surface. */
.chip.service-nextvision:before,.tag.service-nextvision:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vz-service-nextvision)}
.chip.service-gotowedding:before,.tag.service-gotowedding:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--vz-service-gotowedding)}
.chip.service-nextvision,.chip.service-gotowedding,.tag.service-nextvision,.tag.service-gotowedding{display:inline-flex;align-items:center;gap:6px}
.h1{font:600 27px/1.2 var(--font-text);letter-spacing:-.02em} .h2{font:600 22px/1.25 var(--font-text);letter-spacing:-.01em} .h3{font:600 17px/1.35 var(--font-text)}
[dir="rtl"] .h1,[dir="rtl"] .h2,[dir="rtl"] .h3{letter-spacing:0;line-height:1.5}
.muted{color:var(--text-2)} .faint{color:var(--text-3)}
/* buttons: the primary is solid ink on light and solid white on dark, with one keeper dot leading the label. Red is a background only on .danger. */
.btn{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 18px;border-radius:var(--r);border:1px solid transparent;font:600 13.5px/1 var(--font-text);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s,border-color .12s,transform .08s;text-decoration:none}
[dir="rtl"] .btn{font:600 14px/1 "IBM Plex Sans Arabic"}
.btn svg{width:16px;height:16px;flex:none}
.btn.primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn.primary:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--keeper);flex:none}
.btn.primary:hover{background:var(--text)} .btn.primary:active{transform:scale(.985)}
.btn.secondary{background:transparent;color:var(--text);border-color:var(--line)} .btn.secondary:hover{border-color:var(--text-2)}
.btn.quiet{background:transparent;color:var(--text-2)} .btn.quiet:hover{color:var(--text)}
.btn.danger{background:var(--vz-red);color:#fff} .btn.danger:hover{background:var(--vz-red-800)}
.btn.sm{height:32px;padding:0 12px;font-size:12px} .btn.lg{height:48px;padding:0 24px;font-size:15px}
.btn[disabled],.btn.disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.focus{outline:2px solid var(--focus);outline-offset:2px}
.btn.loading:before{content:"";width:12px;height:12px;border-radius:50%;background:none;border:1.75px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.icon-btn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r);color:var(--text-2);border:1px solid transparent} .icon-btn:hover{color:var(--text);border-color:var(--line)}
.icon-btn svg{width:16px;height:16px}
/* fields */
.field{display:flex;flex-direction:column;gap:6px;min-width:200px} .field label{font:500 12px/1 var(--font-text);color:var(--text-2)}
.input{height:40px;padding:0 12px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--text);font:400 13.5px/1 var(--font-text);display:flex;align-items:center;gap:10px}
.input svg{width:16px;height:16px;color:var(--text-2)} .input .ph{color:var(--text-3)}
.input.focus{border-color:var(--text);box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 10%,transparent)}
.input.error{border-color:var(--vz-red)} .field .hint{font:400 12px/1.4 var(--font-text);color:var(--text-3)} .field .hint.error{color:var(--keeper-text)}
.select .input:after{content:"";margin-inline-start:auto;width:7px;height:7px;border-right:1.75px solid var(--text-2);border-bottom:1.75px solid var(--text-2);transform:rotate(45deg) translateY(-2px)}
.switch{width:36px;height:20px;border-radius:10px;background:var(--line);position:relative;display:inline-block;flex:none} .switch:after{content:"";position:absolute;top:2px;inset-inline-start:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.switch.on{background:var(--text)} .switch.on:after{inset-inline-start:18px;background:var(--bg)}
.check{width:16px;height:16px;border-radius:3px;border:1.5px solid var(--text-2);display:inline-flex;align-items:center;justify-content:center;flex:none} .check.on{background:var(--text);border-color:var(--text)} .check.on svg{width:11px;height:11px;color:var(--bg)}
.radio{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--text-2);display:inline-flex;align-items:center;justify-content:center} .radio.on{border-color:var(--text)} .radio.on:after{content:"";width:8px;height:8px;border-radius:50%;background:var(--text)}
.row{display:flex;align-items:center;gap:10px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .seg span{padding:0 14px;height:32px;display:inline-flex;align-items:center;font:500 12.5px var(--font-text);color:var(--text-2)} .seg span.on{background:var(--text);color:var(--bg)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--line);font:500 12px var(--font-text);color:var(--text-2)} .chip.on{border-color:var(--text);color:var(--text)} .chip svg{width:13px;height:13px}
.chip.keeper:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--keeper)}
/* progress */
.bar{height:4px;border-radius:2px;background:var(--line);position:relative;overflow:visible} .bar i{display:block;height:100%;border-radius:2px;background:var(--text);position:relative}
.bar i:after{content:"";position:absolute;top:50%;inset-inline-end:-4px;width:10px;height:10px;border-radius:50%;background:var(--keeper);transform:translateY(-50%)}
.bar.done i:after{display:none}
.status{font:500 13px/1.5 var(--font-text)} .status .num{font-size:13px}
.ring{width:44px;height:44px;border-radius:50%;border:3px solid var(--line);position:relative} .ring:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--text);border-right-color:transparent;border-bottom-color:transparent;transform:rotate(45deg)}
/* stages */
.stages{display:flex;gap:0;align-items:flex-start} .stage{flex:1;position:relative;padding-top:16px;padding-inline-end:16px}
.stage:before{content:"";position:absolute;top:5px;inset-inline-start:0;width:100%;height:1px;background:var(--line)}
.stage i{position:absolute;top:0;inset-inline-start:0;width:11px;height:11px;border-radius:50%;border:1.5px solid var(--text-3);background:var(--bg)}
.stage.done:before{background:var(--text)} .stage.done i{background:var(--text);border-color:var(--text)}
.stage.active i{border-color:var(--text);background:var(--keeper);box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px var(--text)}
.stage.active:before{background:linear-gradient(90deg,var(--text) 0 60%,var(--line) 60%)}
.stage .k{font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} .stage.active .k,.stage.done .k{color:var(--text-2)}
.stage .t{font:600 13px/1.4 var(--font-text);margin-top:4px;color:var(--text-2)} .stage.active .t{color:var(--text)} .stage.done .t{color:var(--text)}
/* cards, tables, toasts */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
[data-theme="dark"] .card{border-color:var(--line-2)}
.stat .k{font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)} .stat .v{font:400 34px/1 var(--font-display);margin-top:10px;letter-spacing:.01em} .stat .s{font:400 12px/1.4 var(--font-text);color:var(--text-2);margin-top:6px}
[dir="rtl"] .stat .k{font:500 11.5px/1 "IBM Plex Sans Arabic";letter-spacing:0;text-transform:none}
table.vz{border-collapse:collapse;width:100%;font-size:13px} table.vz th{text-align:start;font:500 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:10px 12px;border-bottom:1px solid var(--line)}
[dir="rtl"] table.vz th{font:500 12px/1 "IBM Plex Sans Arabic";letter-spacing:0;text-transform:none}
table.vz td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:middle} table.vz tr:hover td{background:color-mix(in srgb,var(--text) 3%,transparent)}
.toast{display:inline-flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:420px}
.toast svg{width:16px;height:16px;flex:none;margin-top:2px} .toast b{font-weight:600} .toast .m{color:var(--text-2);display:block;margin-top:2px}
.toast.error{border-color:var(--vz-red)} .toast.error svg{color:var(--keeper-text)} .toast.done:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--keeper);flex:none;margin-top:6px}
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:3px;background:var(--surface-2);font:500 11px var(--font-text);color:var(--text-2)}
.tag.keeper{background:transparent;border:1px solid var(--line)} .tag.keeper:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--keeper)}
/* photo cells */
.cell{position:relative;aspect-ratio:3/2;border-radius:3px;overflow:hidden;background:var(--thumb)} .cell img{width:100%;height:100%;object-fit:cover;display:block}
.cell.rej img{opacity:.3;filter:grayscale(1)} .cell.pend img{opacity:.55;filter:grayscale(.6)}
.cell.keep{box-shadow:inset 0 0 0 1.5px var(--keeper)} .cell.keep:after{content:"";position:absolute;top:4px;inset-inline-end:4px;right:4px;left:auto;width:8px;height:8px;border-radius:50%;background:var(--keeper)}
.cell.hero .lbl{position:absolute;top:3px;right:15px;font:500 8px/1 var(--font-mono);color:#fff;letter-spacing:.1em;background:rgba(0,0,0,.45);padding:2px 4px;border-radius:2px}
/* app chrome */
.app{display:flex;flex-direction:column;height:100%;background:var(--bg);color:var(--text);overflow:hidden}
.titlebar{height:44px;flex:none;background:var(--bg-2);border-bottom:1px solid var(--line-2);display:flex;align-items:center;padding:0 16px;position:relative;color:var(--text-2);font-size:12px}
.titlebar .crumb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;white-space:nowrap} .titlebar .crumb b{color:var(--text);font-weight:600}
.titlebar .right{margin-inline-start:auto;padding-inline-end:4px;font:500 10.5px var(--font-mono);letter-spacing:.16em;text-transform:uppercase}
[dir="rtl"] .titlebar .right{font:500 12px "IBM Plex Sans Arabic";letter-spacing:0;text-transform:none}
.body{flex:1;display:flex;min-height:0}
.side{width:232px;flex:none;background:var(--bg-2);border-inline-end:1px solid var(--line-2);display:flex;flex-direction:column;padding:22px 0 0}
.side .logo{padding:0 22px 22px;width:168px} .side .logo svg{width:100%;height:auto;display:block} .side .logo .desc{font:500 12px/1.5 "IBM Plex Sans Arabic";color:var(--text-2);margin-top:6px}
.side .sec{padding:10px 22px 6px;font:500 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
[dir="rtl"] .side .sec{font:500 11.5px/1 "IBM Plex Sans Arabic";letter-spacing:0;text-transform:none}
.nav{display:flex;align-items:center;gap:12px;padding:9px 22px;color:var(--text-2);font:500 13px/1 var(--font-text);border-inline-start:2px solid transparent} .nav svg{width:16px;height:16px;flex:none}
.nav.on{color:var(--text);font-weight:600;border-inline-start-color:var(--keeper);background:color-mix(in srgb,var(--text) 3%,transparent)} .nav .c{margin-inline-start:auto;font:500 10.5px var(--font-mono);color:var(--text-3)}
.side .me{margin-top:auto;border-top:1px solid var(--line-2);padding:14px 18px;display:flex;align-items:center;gap:10px} .side .me .av{width:30px;height:30px;border-radius:50%;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font:400 12px var(--font-display);color:var(--text)}
.side .me .n{font-weight:600;font-size:12.5px} .side .me .e{font:500 10px var(--font-mono);color:var(--text-3);letter-spacing:.06em}
.content{flex:1;min-width:0;display:flex;flex-direction:column;padding:24px 36px 22px;gap:18px;overflow:hidden}
.footer-bar{margin-top:auto;display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-2)}

/* Glass mode. Neutral glass only (white or ink at low alpha + blur); never a coloured tint. Red stays the keeper dot. Photos live behind the glass: the UI shows the light through. */
[data-style="glass"]{--r:12px;--r-lg:20px;--pill:999px;
  --glass:rgba(255,255,255,.07);--glass-2:rgba(255,255,255,.11);--glass-strong:rgba(14,14,16,.62);--glass-line:rgba(255,255,255,.14);--glass-hi:rgba(255,255,255,.22);--glass-shadow:0 18px 50px rgba(0,0,0,.38);--blur:26px}
[data-style="glass"][data-theme="light"],[data-style="glass"] [data-theme="light"]{--glass:rgba(255,255,255,.52);--glass-2:rgba(255,255,255,.68);--glass-strong:rgba(255,255,255,.78);--glass-line:rgba(255,255,255,.75);--glass-hi:rgba(255,255,255,.9);--glass-shadow:0 18px 50px rgba(26,22,20,.14)}
.glass,[data-style="glass"] .card,[data-style="glass"] .toast,[data-style="glass"] .side,[data-style="glass"] .titlebar{background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);backdrop-filter:blur(var(--blur)) saturate(1.5);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),var(--glass-shadow)}
[data-style="glass"] .card{border-radius:var(--r-lg)}
[data-style="glass"] .glass-strong{background:var(--glass-strong)}
[data-style="glass"] .btn{border-radius:var(--pill);height:44px;padding:0 20px}
[data-style="glass"] .btn.secondary{background:var(--glass);border-color:var(--glass-line);-webkit-backdrop-filter:blur(var(--blur));backdrop-filter:blur(var(--blur));box-shadow:inset 0 1px 0 var(--glass-hi)}
[data-style="glass"] .btn.secondary:hover{background:var(--glass-2)}
[data-style="glass"] .btn.sm{height:34px;padding:0 14px} [data-style="glass"] .btn.lg{height:52px;padding:0 26px}
[data-style="glass"] .input{border-radius:var(--r);background:var(--glass);border-color:var(--glass-line)}
[data-style="glass"] .chip,[data-style="glass"] .tag{background:var(--glass);border-color:var(--glass-line)}
[data-style="glass"] .seg{border-radius:var(--pill);background:var(--glass);border-color:var(--glass-line)} [data-style="glass"] .seg span.on{border-radius:var(--pill)}
[data-style="glass"] .cell{border-radius:8px}
[data-style="glass"] .app{background:transparent;position:relative;z-index:1}
[data-style="glass"] .titlebar{border-radius:0;border-width:0 0 1px;box-shadow:none;background:var(--glass)}
[data-style="glass"] .side{margin:14px 0 14px 14px;border-radius:var(--r-lg)}
[dir="rtl"][data-style="glass"] .side{margin:14px 14px 14px 0}
[data-style="glass"] .content{padding:22px 32px 20px}
[data-style="glass"] .nav.on{background:var(--glass-2);border-inline-start-color:transparent;border-radius:var(--pill);margin:0 10px;padding-inline-start:14px;position:relative}
[data-style="glass"] .nav.on:before{content:"";position:absolute;inset-inline-start:0;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:2px;background:var(--keeper)}
[data-style="glass"] .nav{margin:0 10px;padding:9px 14px}
.bgphoto{position:fixed;inset:0;z-index:0;background-size:cover;background-position:center}
.bgphoto:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.42) 0%,rgba(10,10,10,.62) 55%,rgba(10,10,10,.82) 100%)}
.bgphoto.app-bg:after{background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.78) 50%,rgba(10,10,10,.88) 100%)}
[data-theme="light"] .bgphoto:after{background:linear-gradient(180deg,rgba(244,239,231,.35) 0%,rgba(244,239,231,.6) 60%,rgba(244,239,231,.86) 100%)}