/* AZX2 (az.ai coder #2): AZ Mail, Customers (CRM) and Bookings pages. Sits on /dp/az/brains/azb-page.css (tokens, header, buttons). */
.x2 [hidden] { display:none !important }
.x2 { --rad:16px; --pane:#0a1530; --sel:#12244d; --bad:#f87171 }
.x2-head { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin:10px 0 14px }
.x2-head h1 { margin:0; font-size:clamp(24px,3.4vw,32px); line-height:1.15 }
.x2-head p { margin:4px 0 0; color:var(--mut) }
.x2-head .grow { flex:1 1 260px; min-width:0 }
.btn.sm { min-height:36px; padding:0 12px; font-size:14px; border-radius:10px }
.btn.bad { color:#fecaca; border-color:#5b1f1f }
.btn.ghost { background:transparent }
.btn.icon { width:44px; padding:0 }
.x2-chip { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; padding:2px 8px; border-radius:999px; border:1px solid var(--line); color:var(--mut); white-space:nowrap }
.x2-chip.needs_reply { color:#041022; background:#fbbf24; border-color:#fbbf24 } .x2-chip.important { color:#fff; background:#7c3aed; border-color:#7c3aed }
.x2-chip.fyi { color:#b9c7dc } .x2-chip.promo { color:#93c5fd; border-color:#1e3a8a } .x2-chip.spam { color:#fca5a5; border-color:#7f1d1d }
.x2-chip.ok { color:#041022; background:var(--ok); border-color:var(--ok) } .x2-chip.warn { color:var(--warn); border-color:#5a4a12 } .x2-chip.bad { color:#fecaca; border-color:#7f1d1d }
.x2-card { background:var(--card); border:1px solid var(--line); border-radius:var(--rad); padding:18px; min-width:0 }
.x2-card h2, .x2-card h3 { text-align:left; margin:0 0 8px } .x2-card h2 { font-size:20px } .x2-card h3 { font-size:17px }
.x2-empty { text-align:center; padding:40px 18px; color:var(--mut) } .x2-empty h2 { color:var(--fg); margin:0 0 6px }
.x2-grid2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px }
.x2-steps { counter-reset:s; list-style:none; padding:0; margin:0; display:grid; gap:12px }
.x2-steps > li { counter-increment:s; position:relative; padding-left:44px } .x2-steps > li::before { content:counter(s); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#13234a; font-weight:800; color:var(--cy) }
.x2-ns { display:grid; gap:8px; margin:8px 0 } .x2-ns div { display:flex; gap:8px; align-items:center; flex-wrap:wrap } .x2-ns code { font:600 15px/1.3 ui-monospace,Consolas,monospace; background:#07112a; border:1px solid var(--line); border-radius:10px; padding:10px 12px; flex:1 1 220px; min-width:0; overflow-wrap:anywhere }
.x2-note { border-left:3px solid var(--cy); padding:8px 12px; background:#0a1a3a; border-radius:0 10px 10px 0; margin:10px 0; color:#cfe0ff }
.x2-note.warn { border-color:var(--warn) } .x2-note.bad { border-color:var(--bad) }
.x2-field { margin:0 0 10px } .x2-field label { margin-top:0 }
.x2-addr { display:flex; align-items:stretch; gap:0 } .x2-addr input { border-radius:12px 0 0 12px; flex:1 1 auto; min-width:0 } .x2-addr span { display:flex; align-items:center; padding:0 12px; border:1px solid var(--line); border-left:0; border-radius:0 12px 12px 0; background:#0d1a3a; color:var(--mut); white-space:nowrap; max-width:55%; overflow:hidden; text-overflow:ellipsis }
.x2-check { display:flex; align-items:center; gap:10px; min-height:44px; color:var(--fg); font-size:15px; margin:4px 0 } .x2-check input { width:20px; height:20px; min-height:0; flex:none }
.x2-toasts { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); display:grid; gap:8px; z-index:90; width:min(92vw,460px) }
.x2-toast { background:#0f2147; border:1px solid #23407c; color:#fff; padding:12px 16px; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4); transition:opacity .35s, transform .35s } .x2-toast.bad { border-color:#7f1d1d; background:#2a0f16 } .x2-toast.ok { border-color:#14532d } .x2-toast.out { opacity:0; transform:translateY(8px) }
.x2-scrim { position:fixed; inset:0; background:rgba(2,6,18,.72); z-index:80; display:flex; align-items:center; justify-content:center; padding:16px }
.x2-dlg { background:var(--card); border:1px solid var(--line); border-radius:20px; width:min(560px,100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.5) } .x2-dlg.wide { width:min(820px,100%) }
.x2-dlg-h { display:flex; align-items:center; gap:10px; padding:14px 14px 0 18px } .x2-dlg-h h2 { margin:0; font-size:19px; text-align:left; flex:1 }
.x2-x { all:unset; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; font-size:26px; color:var(--mut); border-radius:10px } .x2-x:hover, .x2-x:focus-visible { color:#fff; background:#13234a }
.x2-dlg-b { padding:10px 18px; overflow:auto } .x2-dlg-f { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; padding:12px 18px 16px; border-top:1px solid var(--line) }
.x2-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:0 0 12px } .x2-tabs button { all:unset; cursor:pointer; min-height:40px; padding:0 14px; display:inline-flex; align-items:center; gap:6px; border-radius:999px; border:1px solid var(--line); color:var(--mut); font-weight:700; font-size:14px } .x2-tabs button[aria-selected="true"] { color:#041022; background:var(--cy); border-color:var(--cy) } .x2-tabs button:focus-visible { outline:2px solid var(--cy); outline-offset:2px }
.x2-stat { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:0 0 14px } .x2-stat > div { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px } .x2-stat b { display:block; font-size:22px } .x2-stat span { color:var(--mut); font-size:13px }

/* ---------------- AZ Mail ---------------- */
.mx-shell { display:grid; grid-template-columns:240px minmax(300px,420px) minmax(0,1fr); gap:0; background:var(--pane); border:1px solid var(--line); border-radius:var(--rad); overflow:hidden; height:calc(100vh - 210px); min-height:560px }
.mx-side { border-right:1px solid var(--line); padding:12px; overflow:auto; display:flex; flex-direction:column; gap:10px }
.mx-side select { min-height:44px }
.mx-nav { list-style:none; margin:0; padding:0; display:grid; gap:2px } .mx-nav button { all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:0 12px; border-radius:10px; color:#cfe0ff; font-size:15px }
.mx-nav button:hover { background:#0f1e42 } .mx-nav button[aria-current="true"] { background:var(--sel); color:#fff; font-weight:700 } .mx-nav button:focus-visible { outline:2px solid var(--cy); outline-offset:-2px }
.mx-nav .n { margin-left:auto; font-size:12px; font-weight:800; color:var(--cy) } .mx-nav .dot { width:9px; height:9px; border-radius:50%; flex:none } .mx-h { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mut); margin:8px 4px 2px }
.mx-list { border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; min-height:0 }
.mx-tools { display:flex; gap:8px; padding:10px; border-bottom:1px solid var(--line) } .mx-tools input { min-height:40px; flex:1; min-width:0 }
.mx-items { list-style:none; margin:0; padding:0; overflow:auto; flex:1 }
.mx-item { all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; width:100%; padding:12px 14px; border-bottom:1px solid #13234a; min-height:72px }
.mx-item:hover { background:#0d1b3d } .mx-item[aria-current="true"] { background:var(--sel) } .mx-item:focus-visible { outline:2px solid var(--cy); outline-offset:-2px }
.mx-item .who { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .mx-item.unread .who, .mx-item.unread .sub { font-weight:800; color:#fff } .mx-item .t { font-size:12px; color:var(--mut); white-space:nowrap }
.mx-item .sub { grid-column:1/-1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px } .mx-item .snip { grid-column:1/-1; color:var(--mut); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mx-item .tags { grid-column:1/-1; display:flex; gap:6px; flex-wrap:wrap } .mx-item.unread::before { content:''; position:absolute }
.mx-more { margin:10px auto; display:flex }
.mx-read { overflow:auto; min-width:0; display:flex; flex-direction:column }
.mx-read .x2-empty { margin:auto }
.mx-bar { display:flex; gap:8px; flex-wrap:wrap; padding:10px 14px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--pane); z-index:2 }
.mx-msg { padding:16px 18px 24px } .mx-msg h2 { text-align:left; margin:0 0 10px; font-size:21px; line-height:1.3; overflow-wrap:anywhere }
.mx-meta { display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap; color:var(--mut); font-size:14px; margin:0 0 12px } .mx-meta b { color:var(--fg) } .mx-meta .grow { flex:1 1 240px; min-width:0; overflow-wrap:anywhere }
.mx-ai { display:flex; gap:10px; align-items:flex-start; background:linear-gradient(90deg,rgba(34,211,238,.10),rgba(139,92,246,.10)); border:1px solid #1f3a6b; border-radius:12px; padding:10px 12px; margin:0 0 12px; font-size:14px }
.mx-frame { width:100%; border:0; background:#fff; border-radius:12px; min-height:320px; display:block }
.mx-text { white-space:pre-wrap; overflow-wrap:anywhere; background:#07112a; border:1px solid var(--line); border-radius:12px; padding:14px; font-size:15px; margin:0 }
.mx-atts { display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 0 } .mx-atts a, .mx-atts span { display:inline-flex; align-items:center; gap:6px; min-height:40px; padding:0 12px; border-radius:10px; border:1px solid var(--line); color:var(--fg); text-decoration:none; font-size:14px; max-width:100% ; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.mx-thread { margin-top:16px; border-top:1px solid var(--line); padding-top:10px } .mx-thread h3 { font-size:14px; color:var(--mut); margin:0 0 6px }
.mx-compose textarea { min-height:220px; resize:vertical; line-height:1.5 } .mx-compose .row { gap:8px }
.mx-back { display:none }
.mx-setup { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:14px; align-items:start }
.mx-doms { display:grid; gap:10px; margin:10px 0 0 } .mx-dom { display:grid; gap:6px; padding:12px; border:1px solid var(--line); border-radius:12px; background:#07112a } .mx-dom .row { gap:8px }
.mx-boxes { display:grid; gap:10px } .mx-box { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px; border:1px solid var(--line); border-radius:12px } .mx-box b { overflow-wrap:anywhere } .mx-box .grow { flex:1 1 200px; min-width:0 }
.mx-quota { height:6px; border-radius:99px; background:#13234a; overflow:hidden; margin-top:6px } .mx-quota i { display:block; height:100%; background:linear-gradient(90deg,var(--cy),var(--vi)) }
@media (max-width:1100px) { .mx-shell { grid-template-columns:200px minmax(260px,340px) minmax(0,1fr) } }
@media (max-width:900px) {
  .mx-shell { grid-template-columns:1fr; height:auto; min-height:0 }
  .mx-side { border-right:0; border-bottom:1px solid var(--line); flex-direction:row; flex-wrap:wrap; align-items:center }
  .mx-side select { flex:1 1 100% } .mx-nav { display:flex; overflow-x:auto; gap:6px; flex:1 1 100%; scrollbar-width:none } .mx-nav::-webkit-scrollbar { display:none } .mx-nav li { flex:none } .mx-nav button { width:auto; border:1px solid var(--line); border-radius:999px; min-height:40px; white-space:nowrap }
  .mx-h, .mx-side .mx-side-extra { display:none }
  .mx-list { border-right:0; max-height:none } .mx-items { max-height:none }
  .mx-shell.reading .mx-side, .mx-shell.reading .mx-list { display:none } .mx-shell:not(.reading) .mx-read { display:none }
  .mx-back { display:inline-flex }
  .mx-setup, .x2-grid2 { grid-template-columns:1fr } .x2-stat { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:600px) { .mx-msg { padding:14px 14px 20px } .x2-card { padding:14px } .x2-dlg-b { padding:8px 14px } .x2-dlg { border-radius:16px } }

/* ---------------- Customers (CRM) ---------------- */
.crm-list { display:grid; gap:8px }
.crm-row { all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:44px minmax(0,1fr) auto auto; gap:12px; align-items:center; width:100%; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:14px; min-height:64px }
.crm-row:hover { border-color:#2b4b85 } .crm-row:focus-visible { outline:2px solid var(--cy); outline-offset:2px }
.crm-av { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:18px; color:#041022; background:linear-gradient(135deg,var(--cy),var(--vi)); flex:none } .crm-av.big { width:56px; height:56px; font-size:22px }
.crm-main { display:grid; min-width:0 } .crm-main b, .crm-main span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .crm-main .mut { font-size:13px }
.crm-tags { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end } .crm-when { font-size:12px; white-space:nowrap }
.crm-head { display:flex; gap:12px; align-items:center; margin:0 0 12px } .crm-head .grow { flex:1; min-width:0; overflow-wrap:anywhere }
.crm-sec { margin:0 0 16px } .crm-sec h3 { font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin:0 0 8px }
.crm-note { border-left:3px solid #2b4b85; padding:6px 10px; margin:8px 0; background:#0a1838; border-radius:0 10px 10px 0 } .crm-note p { margin:0 0 2px; white-space:pre-wrap; overflow-wrap:anywhere }
.crm-deal { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 0; border-bottom:1px solid var(--line) } .crm-deal .grow { flex:1 1 160px; min-width:0 }
.crm-task { border-bottom:1px solid var(--line); padding:4px 0 } .crm-task .grow { flex:1; min-width:0 } .crm-task.done .grow { text-decoration:line-through; color:var(--mut) }
.crm-tl { list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--line); display:grid; gap:8px } .crm-tl li { display:grid } .crm-tl small { font-size:12px }
.crm-board { display:grid; grid-template-columns:repeat(5,minmax(200px,1fr)); gap:12px; overflow-x:auto; padding-bottom:8px }
.crm-col { background:var(--pane); border:1px solid var(--line); border-radius:14px; padding:10px; min-height:200px; display:flex; flex-direction:column; gap:8px } .crm-col.over { border-color:var(--cy) }
.crm-col h3 { margin:2px 4px 4px; font-size:15px; text-align:left } .crm-col h3 .mut { font-weight:400; font-size:13px }
.crm-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:8px; display:grid; gap:6px; cursor:grab }
.crm-card-b { all:unset; cursor:pointer; display:grid; gap:2px; padding:4px; border-radius:8px; min-width:0 } .crm-card-b:focus-visible { outline:2px solid var(--cy) } .crm-card-b span { font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.crm-card select { min-height:38px; font-size:14px; padding:6px 8px }
@media (max-width:900px) { .crm-board { grid-template-columns:repeat(5,minmax(240px,82vw)); scroll-snap-type:x mandatory } .crm-col { scroll-snap-align:start } }
@media (max-width:600px) { .crm-row { grid-template-columns:44px minmax(0,1fr); } .crm-tags { grid-column:2; justify-content:flex-start } .crm-when { display:none } }

/* ---------------- Bookings ---------------- */
.bk-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px }
.bk-day { background:var(--pane); border:1px solid var(--line); border-radius:14px; padding:8px; min-height:160px; display:flex; flex-direction:column; gap:6px; min-width:0 } .bk-day.today { border-color:var(--cy) }
.bk-day h3 { margin:2px 4px 4px; font-size:14px; text-align:left; color:var(--mut) } .bk-day h3 span { color:var(--fg); font-weight:800 } .bk-free { font-size:13px; margin:4px }
.bk-item { all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:1px; padding:8px; border-radius:10px; background:#10224a; border-left:3px solid var(--cy); font-size:13px; min-height:44px; min-width:0 }
.bk-item span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .bk-item.off { opacity:.55; border-left-color:#64748b; text-decoration:line-through } .bk-item:focus-visible { outline:2px solid var(--cy) }
.bk-block { display:flex; align-items:center; gap:4px; font-size:12px; padding:4px 6px; border-radius:8px; background:repeating-linear-gradient(45deg,#1a2240,#1a2240 6px,#141b33 6px,#141b33 12px) } .bk-block span { flex:1; min-width:0 } .bk-block .x2-x { width:36px; height:36px; font-size:18px }
.bk-svcs { display:grid; gap:10px } .bk-svc { display:flex; gap:10px; align-items:center; flex-wrap:wrap } .bk-svc .grow { flex:1 1 220px; min-width:0 } .bk-svc.off { opacity:.6 }
.bk-hours { display:grid; gap:6px } .bk-hrow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:4px 0; border-bottom:1px solid var(--line) } .bk-hrow .x2-check { flex:0 0 150px } .bk-hrow .row { flex:1 1 260px } .bk-hrow select { width:auto; flex:1 1 110px }
@media (max-width:900px) { .bk-week { grid-template-columns:1fr } .bk-day { min-height:0 } .bk-day h3 { font-size:15px } }
.azb-top nav a[hidden] { display:none !important }
.x2 .row > .x2-chip, .x2 .x2-chip { flex:none !important; width:auto }
.x2-addr span { max-width:none; flex:0 1 auto; white-space:normal; overflow-wrap:anywhere; min-width:0 } .x2-addr input { min-width:96px }

/* ---------------- Movie Studio ---------------- */
.mv-starts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:0 0 12px }
.mv-start { all:unset; box-sizing:border-box; cursor:pointer; display:grid; gap:6px; padding:22px; border-radius:18px; border:1px solid #23407c; background:linear-gradient(135deg,rgba(34,211,238,.12),rgba(139,92,246,.14)); min-height:140px }
.mv-start:hover, .mv-start:focus-visible { border-color:var(--cy); outline:none; box-shadow:0 0 0 3px rgba(34,211,238,.2) } .mv-start b { font-size:20px } .mv-start span { color:#cfe0ff } .mv-ico { font-size:30px }
.mv-list { display:grid; gap:8px }
.mv-item { all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:var(--card); min-height:64px } .mv-item:hover, .mv-item:focus-visible { border-color:#2b4b85 }
.mv-item .grow { flex:1; min-width:0; display:grid } .mv-item .grow b, .mv-item .grow span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .mv-item .mut { font-size:13px }
.mv-thumb { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:#13234a; font-size:22px; flex:none }
.mv-photos { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px } .mv-ph { width:72px; height:72px; border-radius:10px; overflow:hidden; border:1px solid var(--line); display:grid; place-items:center; font-size:11px; text-align:center } .mv-ph img { width:100%; height:100%; object-fit:cover }
.mv-ed { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:14px; align-items:start }
.mv-side { display:grid; gap:14px; position:sticky; top:12px }
.mv-shots { display:grid; gap:12px }
.mv-shot-h { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 8px } .mv-shot-h .grow { flex:1 }
.mv-shot-b { display:grid; grid-template-columns:200px minmax(0,1fr); gap:14px } .mv-shot-b .grow { min-width:0 }
.mv-media { display:grid; gap:8px; align-content:start }
.mv-shotimg, .mv-shotvid, .mv-shotph { width:100%; border-radius:12px; background:#07112a; border:1px solid var(--line); object-fit:cover } .mv-shotph { aspect-ratio:16/9; display:grid; place-items:center; font-size:30px; color:var(--mut) }
.mv-player video, .mv-video { width:100%; max-height:70vh; border-radius:14px; background:#000; display:block } .mv-video.a9x16 { max-width:420px; margin:0 auto } .mv-video.a1x1 { max-width:560px; margin:0 auto }
.mv-lines { list-style:none; margin:0 0 8px; padding:0; display:grid; gap:6px; font-size:14px } .mv-lines li { display:flex; justify-content:space-between; gap:10px } .mv-lines li span { color:#cfe0ff; min-width:0 }
.mv-total { display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:8px; font-size:17px; margin:0 0 8px }
.mv-prog { list-style:none; margin:0 0 10px; padding:0; display:grid; gap:6px } .mv-prog li { display:flex; justify-content:space-between; align-items:center }
.mv-gal { display:grid; gap:12px; margin-top:14px } .mv-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; margin-top:10px }
.mv-tile { display:grid; gap:6px } .mv-tile img, .mv-tile video { width:100%; aspect-ratio:1; object-fit:contain; background:repeating-conic-gradient(#0f1b38 0 25%, #0b1630 0 50%) 0 0/20px 20px; border-radius:12px; border:1px solid var(--line) }
@media (max-width:1000px) { .mv-ed { grid-template-columns:1fr } .mv-side { position:static } }
@media (max-width:600px) { .mv-starts { grid-template-columns:1fr } .mv-shot-b { grid-template-columns:1fr } }
@media (max-width:600px) { .azb-top nav { -webkit-mask-image:linear-gradient(to right,#000 82%,transparent); mask-image:linear-gradient(to right,#000 82%,transparent); padding-right:24px } }