/* ══════════════════════════════════════════════════════════
   Event Category & Event Type — full-height selection modal
   Opened from the dashboard "+ Create Event" button, before the
   Create Event wizard. Loaded by assets/js/create-event-picker.js
══════════════════════════════════════════════════════════ */
.ecm-overlay{position:fixed;inset:0;z-index:10000;background:#0a08188c;backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;animation:ecmFadeIn .2s ease forwards}
.ecm-overlay.ecm-closing{animation:ecmFadeOut .15s ease forwards}
@keyframes ecmFadeIn {
from{opacity:0}
to{opacity:1}
}
@keyframes ecmFadeOut {
from{opacity:1}
to{opacity:0}
}
.ecm-modal{background:var(--card-bg,#fff);width:100%;height:100%;border-radius:20px;box-shadow:0 30px 90px #00000059;display:flex;flex-direction:column;overflow:hidden;transform:scale(.96) translateY(10px);opacity:0;animation:ecmPopIn .25s .05s cubic-bezier(.16,1,.3,1) forwards}
@keyframes ecmPopIn {
to{transform:scale(1) translateY(0);opacity:1}
}
.ecm-head{display:flex;align-items:flex-start;gap:14px;padding:20px 24px;border-bottom:1px solid var(--border,#e8e4f3);flex-shrink:0}
.ecm-head-icon{width:44px;height:44px;border-radius:13px;background:var(--p-soft,#f5f3ff);color:var(--p,#7c3aed);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ecm-head-icon svg{width:22px;height:22px}
.ecm-head-text{flex:1;min-width:0;padding-top:1px}
.ecm-title{font-size:19px;font-weight:800;color:var(--text-primary,#111);line-height:22px}
.ecm-subtitle{font-size:13px;color:var(--text-muted,#9ca3af)}
.ecm-close{margin-left:auto;background:var(--surface,#f7f6fb);border:1px solid var(--border,#e8e4f3);color:var(--text-secondary,#4b5563);width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;flex-shrink:0}
.ecm-close:hover,.ecm-close:focus-visible{background:#fee2e2;color:#dc2626;border-color:#fecaca}
.ecm-body{display:grid;grid-template-columns:1fr 340px;flex:1;min-height:0;gap:20px}
.ecm-select-pane{border:1px solid var(--border,#e8e4f3);display:flex;flex-direction:column;min-height:0;overflow:hidden;border-radius:20px}
.ecm-select-scroll{flex:1;overflow-y:auto;min-height:0}
.ecm-back-btn{display:flex;align-items:center;gap:6px;background:var(--surface,#f7f6fb);border:1px solid var(--border,#e8e4f3);color:var(--text-secondary,#4b5563);font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;padding:11px 20px;border-radius:11px}
.ecm-back-btn:hover:not(:disabled){border-color:var(--text-muted,#9ca3af)}
.ecm-back-btn:disabled{opacity:.5;cursor:not-allowed}
.ecm-back-btn svg,.ecm-continue-btn svg{width:14px;height:14px;flex-shrink:0}
.ecm-types-view{display:flex;flex-direction:column;gap:15px;height:calc(100% - 135px);overflow:hidden;overflow-y:auto}
.ecm-step-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:nowrap;padding:10px 18px;border-bottom:1px solid var(--border,#e8e4f3)}
.ecm-step-toolbar-left{display:flex;align-items:center;gap:8px;min-width:0}
.ecm-step-toolbar-title{font-size:15px;font-weight:800;color:var(--text-primary,#111);white-space:nowrap}
.ecm-mini-steps{display:flex;align-items:center;flex-shrink:0}
.ecm-mini-step{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex-shrink:0;font-size:10.5px;font-weight:800;color:var(--text-muted,#9ca3af);background:var(--surface,#f7f6fb);border:1.5px solid var(--border,#e8e4f3);cursor:default;outline:none}
.ecm-mini-step.done{cursor:pointer;background:#16a34a;border-color:#16a34a;color:#fff}
.ecm-mini-step.active{background:linear-gradient(135deg,var(--p,#7c3aed),var(--p-mid,#6d28d9));border-color:var(--p,#7c3aed);color:#fff}
.ecm-mini-step-num svg{width:11px;height:11px;display:block}
.ecm-mini-step-dash{width:16px;height:2px;background:var(--border,#e8e4f3);flex-shrink:0}
.ecm-mini-step-dash.done{background:#16a34a}
.ecm-mini-step-tip{position:absolute;top:calc(100% + 9px);left:50%;transform:translate(-50%,-4px);background:#1f2430;color:#fff;font-size:11.5px;line-height:1.4;padding:7px 11px;border-radius:9px;white-space:nowrap;display:flex;flex-direction:column;gap:1px;box-shadow:0 10px 24px #10182833;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease,transform .15s ease,visibility .15s;z-index:20}
.ecm-mini-step-tip strong{font-weight:700}
.ecm-mini-step-tip span{color:#ffffffa8;font-size:10.5px}
.ecm-mini-step:hover .ecm-mini-step-tip,.ecm-mini-step:focus-visible .ecm-mini-step-tip{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ecm-mini-step:last-child .ecm-mini-step-tip{left:auto;right:0;transform:translateY(-4px)}
.ecm-mini-step:last-child:hover .ecm-mini-step-tip,.ecm-mini-step:last-child:focus-visible .ecm-mini-step-tip{transform:translateY(0)}
/* Footer sits at the bottom of the overflow:hidden pane — open its tooltips upward so they aren't clipped. */
.ecm-footer .ecm-mini-step-tip{top:auto;bottom:calc(100% + 9px);transform:translate(-50%,4px)}
.ecm-footer .ecm-mini-step:hover .ecm-mini-step-tip,.ecm-footer .ecm-mini-step:focus-visible .ecm-mini-step-tip{transform:translate(-50%,0)}
.ecm-footer .ecm-mini-step:first-child .ecm-mini-step-tip{left:0;transform:translateY(4px)}
.ecm-footer .ecm-mini-step:first-child:hover .ecm-mini-step-tip,.ecm-footer .ecm-mini-step:first-child:focus-visible .ecm-mini-step-tip{transform:translateY(0)}
.ecm-footer .ecm-mini-step:last-child .ecm-mini-step-tip{left:auto;right:0;transform:translateY(4px)}
.ecm-footer .ecm-mini-step:last-child:hover .ecm-mini-step-tip,.ecm-footer .ecm-mini-step:last-child:focus-visible .ecm-mini-step-tip{transform:translateY(0)}
.ecm-search-wrap{position:relative;flex:0 1 260px;min-width:320px}
.ecm-search-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted,#9ca3af);pointer-events:none}
.ecm-search-input{width:100%;padding:9px 12px 9px 34px;border:1.5px solid var(--border,#e8e4f3);border-radius:10px;font-size:13px;font-family:inherit;color:var(--text-primary,#111);background:var(--surface,#f7f6fb)}
.ecm-search-input:focus{outline:none;border-color:var(--p,#7c3aed);background:#fff}
.ecm-type-list{padding:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ecm-type-item{position:relative;display:flex;flex-direction:column;align-items:center;gap:0;background:#fff;border:1px solid var(--border,#e8e4f3);border-radius:15px;padding:20px;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;text-align:center;font-family:inherit;width:100%}
.ecm-type-item:hover{box-shadow:0 8px 20px #10182814;transform:translateY(-2px);border-color:var(--border-strong,#d8d2ec)}
.ecm-type-item:active{transform:translateY(0)}
.ecm-type-item.active{border-color:var(--p,#7c3aed);box-shadow:0 8px 22px #7c3aed2e}
.ecm-cat-icon{width:45px;height:45px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;margin:0 0 12px;color:#2b2b33}
.ecm-cat-icon svg{width:60px;height:60px;stroke-width:.8}
.ecm-type-name{display:block;font-size:14.5px;font-weight:700;color:var(--text-primary,#111);line-height:1.32}
.ecm-type-check{display:none;position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:99px;background:var(--p,#7c3aed);color:#fff;align-items:center;justify-content:center;box-shadow:0 2px 6px #7c3aed59}
.ecm-type-check svg{width:12px;height:12px}
.ecm-type-item.active .ecm-type-check{display:flex}
.ecm-preview-pane{overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:var(--card-bg,#fff);min-height:0;position:relative;height:calc(100vh - 110px)}
.ecm-preview-label{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#fff;margin-bottom:14px;align-self:flex-start;position:absolute;top:-8px;right:45px;z-index:3;background:#000;padding:5px 10px;border-radius:20px}
.ecm-phone{width:100%;max-width:375px;background:#000;border-radius:50px;padding:6px;box-shadow:0 20px 50px #00000040;position:relative;flex-shrink:0}
/* 9:16 screen — same frame as the template's preview/thumbnail.webp (414×736). */
.ecm-phone-screen{width:100%;aspect-ratio:9 / 16;border-radius:45px;overflow:hidden;background:#fff;position:relative;display:flex;align-items:flex-end}
/* Steps 1–3: static thumbnail; on hover it fades out and full-page.webp scrolls top → bottom. */
.ecm-phone-screen .ecm-pv-shot{position:absolute;inset:0;overflow:hidden;background:#fff}
.ecm-phone-screen .ecm-pv-shot img{position:absolute;top:0;left:0;right:auto;bottom:auto;width:100%;display:block}
.ecm-phone-screen .ecm-pv-thumb{height:100%;object-fit:cover;object-position:top;z-index:2;transition:opacity .35s ease}
.ecm-phone-screen .ecm-pv-full{height:auto;object-fit:fill;z-index:1;transform:translateY(0);transition:transform .7s ease}
.ecm-pv-shot.has-full:hover .ecm-pv-thumb{opacity:0}
.ecm-pv-shot.has-full:hover .ecm-pv-full{transform:translateY(var(--ecm-pv-dist,0));transition:transform var(--ecm-pv-dur,6s) linear .35s}
/* Lay the template out at 414×736 and scale it to the screen (see ecmFitPhone). */
.ecm-phone-screen iframe{position:absolute;top:0;left:0;width:414px;height:736px;border:none;display:block;transform:scale(var(--ecm-pv-scale,1));transform-origin:0 0}
.ecm-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .2s ease}
.ecm-phone-overlay{position:relative;z-index:2;width:100%;padding:22px 16px 26px;text-align:center;background:linear-gradient(to top,#000000a6,#00000026 55%,transparent)}
.ecm-phone-eyebrow{font-size:8px;letter-spacing:2px;color:#ffffffb3;text-transform:uppercase;margin-bottom:8px}
.ecm-phone-name{font-family:'Great Vibes',cursive;font-size:24px;color:#fff;line-height:1.25;text-shadow:0 2px 10px #00000059;word-break:break-word}
.ecm-preview-empty{text-align:center;padding:0 28px;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;background:linear-gradient(180deg,var(--p-soft,#f5f3ff) 0%,var(--surface,#f7f6fb) 100%);width:100%}
.ecm-preview-empty-icon{width:56px;height:56px;border-radius:16px;background:#fff;color:var(--p,#7c3aed);display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:0 6px 16px #7c3aed26}
.ecm-preview-empty-icon svg{width:24px;height:24px}
.ecm-preview-empty-title{font-size:14px;font-weight:700;color:var(--text-primary,#111);margin-bottom:6px}
.ecm-preview-empty-body{font-size:12.5px;line-height:1.5;color:var(--text-muted,#9ca3af)}
.ecm-state{margin:auto;text-align:center;padding:40px 20px;color:var(--text-muted,#9ca3af)}
.ecm-state-icon{width:46px;height:46px;border-radius:12px;background:var(--surface,#f7f6fb);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--text-muted,#9ca3af)}
.ecm-state-title{font-size:14px;font-weight:700;color:var(--text-primary,#111);margin-bottom:4px}
.ecm-state-body{font-size:12.5px;line-height:1.5;max-width:280px;margin:0 auto}
.ecm-state.ecm-state-error .ecm-state-icon{background:#fee2e2;color:#dc2626}
.ecm-retry-btn{margin-top:14px;background:var(--surface,#f7f6fb);border:1px solid var(--border,#e8e4f3);color:var(--text-primary,#111);padding:8px 16px;border-radius:9px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.ecm-retry-btn:hover{border-color:var(--p,#7c3aed);color:var(--p,#7c3aed)}
.ecm-skel{position:relative;overflow:hidden;background:var(--surface,#eee);border-radius:12px;height:52px}
.ecm-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff9,transparent);animation:ecmShimmer 1.3s infinite}
@keyframes ecmShimmer {
from{transform:translateX(-100%)}
to{transform:translateX(100%)}
}
.ecm-preview-skel{position:absolute;inset:0;overflow:hidden;background:var(--surface,#f0f0f5);z-index:2}
.ecm-preview-skel::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffffffb3,transparent);animation:ecmShimmer 1.3s infinite}
.ecm-qf-title{font-size:13px;font-weight:800;color:var(--text-primary,#111);margin-bottom:12px}
.ecm-qf-section-title{font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted,#9ca3af);margin:16px 0 10px}
.ecm-qf-field{margin-bottom:12px}
.ecm-qf-label{display:block;font-size:12.5px;font-weight:700;color:var(--text-secondary,#4b5563);margin-bottom:6px}
.ecm-qf-required{color:#dc2626}
.ecm-qf-note{font-size:12.5px;color:var(--text-muted,#9ca3af);background:var(--surface,#f7f6fb);border:1px dashed var(--border,#e8e4f3);border-radius:10px;padding:10px 12px}
.ecm-qf-checkbox{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-primary,#111);cursor:pointer}
.ewz-card-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ewz-card-ico svg{width:18px;height:18px}
.ewz-card-ico.st-icon-purple{background:var(--p-light);color:var(--p)}
.ewz-card-ico.st-icon-blue{background:#DBEAFE;color:#3B82F6}
.ewz-card-ico.st-icon-green{background:#D1FAE5;color:#10B981}
.ewz-card-ico.st-icon-orange{background:#FEF3C7;color:#D97706}
.ewz-card-ico.st-icon-red{background:#FEE2E2;color:#EF4444}
.ecm-footer{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--border,#e8e4f3);flex-shrink:0;background:var(--card-bg,#fff)}
.ecm-footer-inline{flex-shrink:0;padding:14px 22px;background:#f7f6fb}
.ecm-footer-right{display:flex;align-items:center;gap:10px;margin-left:auto}
#ecm-footer .ewz-nav-bar{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0;margin:0;border:none;background:none;position:static;width:auto}
.ecm-continue-btn{background:var(--p,#7c3aed);color:#fff;border:none;padding:11px 22px;border-radius:11px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:8px;transition:.15s}
.ecm-continue-btn:hover:not(:disabled){filter:brightness(.85)}
.ecm-continue-btn:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:1024px) {
.ecm-body{grid-template-columns:1fr}
.ecm-preview-pane{display:none}
.ecm-select-pane{border-right:none}
}
@media (max-width:768px) {
.ecm-modal{border-radius:0;max-width:none;max-height:none}
.ecm-type-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:540px) {
.ecm-type-list{grid-template-columns:1fr}
.ecm-head{padding:16px}
.ecm-subtitle{display:none}
.ecm-step-toolbar{flex-direction:column;align-items:stretch;flex-wrap:wrap}
.ecm-search-wrap{flex:1 1 auto;min-width:0}
/* Back + Cancel + Continue (3 buttons) can outgrow a narrow phone's width
   in one nowrap row — let the Cancel/Continue group wrap to its own row,
   right-aligned, instead of overflowing off-screen. */
.ecm-footer{flex-wrap:wrap;row-gap:8px}
.ecm-footer-right{flex:1 1 auto;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce) {
.ecm-overlay,.ecm-modal,.ecm-skel::after{animation:none!important}
}
.ecm-auth-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.ecm-auth-form{width:100%;max-width:360px;display:flex;flex-direction:column;gap:2px}
.ecm-auth-error{font-size:12.5px;color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:8px 12px;margin-bottom:14px}
.ecm-auth-success{font-size:12.5px;line-height:1.5;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;padding:10px 12px;margin-bottom:14px}
.ecm-auth-submit{width:100%;justify-content:center;margin-top:6px}
.ecm-auth-signup{margin-top:16px;text-align:center;font-size:13px;color:var(--text-muted,#9ca3af)}
.ecm-auth-signup a{color:var(--p,#7c3aed);font-weight:700;text-decoration:none}
.ecm-auth-signup a:hover{text-decoration:underline}
.ecm-login-view{padding:20px;display:flex;flex-direction:column;align-items:center}
.ecm-login-card{width:100%;max-width:420px;background:var(--card-bg,#fff);border:1px solid var(--border,#e8e4f3);border-radius:20px;box-shadow:0 16px 40px #10182814;padding:36px 32px 30px}
.ecm-login-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 0 26px}
.ecm-login-head .ecm-head-icon{width:56px;height:56px;border-radius:16px;margin-bottom:4px}
.ecm-login-head .ecm-head-icon svg{width:26px;height:26px}
.ecm-login-head .ecm-title{font-size:21px}
.ecm-login-view .ecm-auth-body{padding:0}
@media (max-width:540px) {
.ecm-login-view{padding:32px 4px 0}
.ecm-login-card{padding:28px 20px 24px}
}
.ecm-page{display:block;background:var(--card-bg,#fff);max-width:100%;margin:0 auto;padding:18px 24px}
.ecm-page-head{padding:12px 18px 0;text-align:left;border-bottom:none}
.ecm-page-head-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:nowrap}
.ecm-page-head-text{flex:1;min-width:0}
.ecm-page-title{font-size:26px;font-weight:800;color:var(--text-primary,#111);line-height:1.2;margin-bottom:0}
.ecm-page-subtitle{font-size:14px;color:var(--text-muted,#6b7280)}
.ecm-page .ecm-body{border-radius:20px;overflow:visible;min-width:0}
.ecm-page .ecm-select-pane,.ecm-page .ecm-preview-pane{min-width:0}
/* ecm-select-pane: fixed height = full viewport minus navbar (~64px) and page padding (~24px top) */
.ecm-page .ecm-select-pane{
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:calc(100vh - 88px)
}
/* ecm-select-scroll: takes remaining height between header and footer, scrolls internally */
.ecm-page .ecm-select-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  min-height:0
}
.ecm-page .ecm-preview-pane{overflow:visible;min-height:auto;position:sticky;top:84px;align-self:start}
@media (max-width:1024px) {
.ecm-page .ecm-body{grid-template-columns:1fr}
.ecm-page .ecm-preview-pane{display:none}
.ecm-page .ecm-select-pane{border-right:none}
}
@media (max-width:540px) {
.ecm-page{padding:0 16px 40px}
.ecm-page .ecm-select-scroll{padding:18px 0}
.ecm-page-head{padding:0 0 16px;margin-bottom:16px}
.ecm-page-head-top{flex-direction:column;align-items:flex-start;flex-wrap:wrap;gap:12px}
.ecm-page-head-top .ecm-mini-steps{align-self:center}
.ecm-page-title{font-size:21px}
}
.form-group{margin-bottom:15px}
.form-input-wrap{position:relative}
.form-input-wrap .auth-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.auth-eye{padding:4px;background:none;border:none;cursor:pointer;color:#9CA3AF;display:flex;align-items:center;transition:color .15s}
.auth-eye:hover{color:var(--p,#7c3aed)}
.auth-eye svg,.auth-eye .eye-icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.auth-eye .eye-icon.eye-closed{display:none}
.auth-remember-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;margin-top:6px}
.auth-remember{display:flex;align-items:center;gap:8px;cursor:pointer}
.auth-remember-check{width:20px;height:20px;accent-color:var(--p,#7c3aed);border-radius:4px;cursor:pointer}
.auth-remember-label{font-size:.84rem;color:var(--text-primary,#111);font-weight:500}
.auth-label-link{font-size:.84rem;color:var(--p,#7c3aed);font-weight:600;text-decoration:none}
.auth-label-link:hover{text-decoration:underline}
.auth-btn{padding:16px 20px;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:linear-gradient(135deg,var(--p,#7c3aed),var(--p-mid,#6d28d9));color:#fff;font-size:1rem;font-weight:700;border:none;border-radius:16px;cursor:pointer;transition:opacity .2s,transform .1s;font-family:inherit;margin-top:4px}
.auth-btn:hover:not(:disabled){opacity:.92;transform:translateY(-1px)}
.auth-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
.auth-spinner{width:14px;height:14px;border-radius:50%;border:2px solid #ffffff60;border-top-color:#fff;display:inline-block;animation:auth-spin .7s linear infinite}
@keyframes auth-spin {
to{transform:rotate(360deg)}
}
.ecm-templates-view{display:flex;flex-direction:column;min-height:0}
#ecm-templates-view .dccm-head{padding:10px 18px;border-bottom:1px solid var(--border,#e8e4f3)}
#ecm-templates-view .dccm-grid-pane{padding:18px;height:calc(100vh - 310px);overflow:hidden;overflow-y:auto}
#ecm-templates-view .dccm-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.etpm-tabs{display:flex;align-items:center;gap:8px;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.etpm-tabs::-webkit-scrollbar{display:none}
#ecm-templates-view .dccm-search-wrap{flex:0 0 300px;max-width:none;margin-left:auto}
@media (max-width:540px) {
#ecm-templates-view .dccm-head{flex-wrap:wrap;gap:10px}
#ecm-templates-view .dccm-search-wrap{flex:1 1 100%;margin-left:0}
}
.ewz-layout{padding:18px;gap:18px}
.ewz-layout .ewz-page{background:none}
.ewz-sb-head{display:none}
.ewz-layout .ewz-page{background:none;height:calc(100vh - 310px);overflow:hidden;overflow-y:auto;padding-bottom:15px}

/* ── Inside ecm-quick-form: ewz-page must NOT have its own fixed height or scroll.
   ecm-select-scroll is the scroller; ewz-page just needs to be tall enough to fill it. ── */
.ecm-quick-form .ewz-layout .ewz-page{
  height:auto!important;
  min-height:100%;
  overflow:visible!important;
  overflow-y:visible!important;
  padding-bottom:0!important
}

/* ── ECM page: Cancel button in header row 1 ── */
.ecm-page-cancel-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:none;border-radius:8px;color:var(--text-secondary,#6B7280);cursor:pointer;flex-shrink:0;transition:color .15s,background .15s}
.ecm-page-cancel-btn:hover{color:#dc2626;background:#fff1f2}
.ecm-page-cancel-btn svg{flex-shrink:0;stroke:currentColor;display:block}

/* ── ECM footer: Previous | dots (center) | Continue/Create ── */
.ecm-footer{display:flex;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--border,#e8e4f3);flex-shrink:0;background:#fff}
.ecm-footer-inline{flex-shrink:0}
.ecm-footer-steps{flex:1;display:flex;align-items:center;justify-content:flex-start}
.ecm-footer-right{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* ── Mini step dots: correct sizing ── */
.ecm-mini-step{width:32px;height:32px;font-size:11px}
.ecm-mini-step-dash{width:20px}

/* ── UNIFIED HEADER: fixed outside scroll, contains H1 + step label + search ── */
.ecm-page-head{
  display:flex;
  flex-direction:column;
  padding:0;
  background:#fff;
  border-bottom:1px solid var(--border,#e8e4f3);
  flex-shrink:0
}
/* Row 1: H1 left (50%) + search right (50%) — vertically centered */
.ecm-page-head-top-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:14px 22px 0
}
.ecm-page-title{font-size:22px;font-weight:800;color:var(--text-primary,#111);line-height:1.2;margin-bottom:0}
.ecm-page-head-search{display:flex;align-items:center;justify-content:flex-end}
.ecm-page-head-search .ecm-search-wrap{width:100%;max-width:260px;min-width:0}
.ecm-search-step{width:100%;max-width:260px}
.ecm-search-step .ecm-search-wrap{min-width:0;flex:none;width:100%;max-width:100%}
/* Row 2: step label only (left) — no search here */
.ecm-page-head-row{
  padding:4px 22px 12px
}
.ecm-page-step-label{font-size:14px;color:var(--text-muted,#6b7280)}
.ecm-page-head-right{display:none}
/* Old toolbar — not rendered for standalone */
.ecm-page .ecm-step-toolbar{display:none}
.ecm-page-head-top{display:flex;align-items:center}

/* ecm-select-scroll: flex column, children fill available height */
.ecm-page .ecm-select-scroll{display:flex;flex-direction:column}
/* All view containers: flex:1 when visible, gone when hidden */
.ecm-page .ecm-types-view,
.ecm-page .ecm-quick-form,
.ecm-page .ecm-templates-view,
.ecm-page .ecm-login-view{flex:1;min-height:0}
/* Hidden views take zero space */
.ecm-page .ecm-types-view[style*="display:none"],
.ecm-page .ecm-quick-form[style*="display:none"],
.ecm-page .ecm-templates-view[style*="display:none"],
.ecm-page .ecm-login-view[style*="display:none"]{flex:0;min-height:0;overflow:hidden}
.ecm-quick-form{padding:0}
.ecm-quick-form .ewz-layout{padding:0;gap:0}
.ecm-quick-form .ewz-page-header{display:none}
.ecm-quick-form .ewz-body{padding:16px 16px 0}
.ecm-quick-form .ewz-card:first-child{margin-top:0}
.ecm-quick-form .ewz-card{border-radius:12px}
/* Remove top margin on first card inside the form pane */
.ecm-quick-form .ewz-body .ewz-card:first-child{margin-top:0}
/* Compact schedule item — plain icon buttons, no colored boxes */
.ecm-quick-form .ewz-si-compact-acts .ewz-icon-btn{width:28px;height:28px;background:none;border:none;color:var(--muted,#9CA3AF)}
.ecm-quick-form .ewz-si-compact-acts .ewz-icon-btn:hover{color:var(--text,#111827);background:var(--bg,#F5F5F5)}

/* ── Force 50/50 date row inside the narrow ECM pane ── */
.ecm-quick-form .form-row,
.ecm-quick-form .form-row--nowrap,
.ecm-quick-form #ewz-dt-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}
.ecm-quick-form .ewz-field-pair{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important}

/* ── Template picker: hide dccm-head on standalone (search is in ecm-page-head) ── */
.ecm-page #ecm-templates-view .dccm-head{display:none}
/* Restore grid pane height since dccm-head is gone */
.ecm-page #ecm-templates-view .dccm-grid-pane{height:calc(100vh - 250px);padding-top:12px}
/* Template search when moved into header slot — same style as event-type search */
#ecm-step-toolbar-right .dccm-search-wrap{position:relative;width:100%;max-width:260px}
#ecm-step-toolbar-right .dccm-search-wrap .dccm-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted,#9ca3af);pointer-events:none;display:flex;align-items:center}
#ecm-step-toolbar-right .dccm-search-wrap .dccm-search-icon svg{width:14px;height:14px}
#ecm-step-toolbar-right .dccm-search{width:100%;padding:9px 12px 9px 34px;border:1.5px solid var(--border,#e8e4f3);border-radius:10px;font-size:13px;font-family:inherit;color:var(--text-primary,#111);background:var(--surface,#f7f6fb);outline:none}
#ecm-step-toolbar-right .dccm-search:focus{border-color:var(--p,#7c3aed);background:#fff}

/* ── Responsive fixes (create-event page) ───────────────────────────── */
/* Preview pane hidden → the select pane is the whole card; keep its right edge. */
@media (max-width:1024px) {
.ecm-select-pane,.ecm-page .ecm-select-pane{border-right:1px solid var(--border,#e8e4f3)}
}
/* Char counters (0/100) sit in flow, not absolutely over the next row's label. */
.ecm-quick-form .wj-120{position:static;margin-top:4px}
/* Chat bubble must not cover the footer's Prev/Next. */
body:has(.ecm-page) #cb-widget{bottom:96px}
@media (max-width:540px) {
body:has(.ecm-page) #cb-widget{bottom:150px;right:16px}
/* Steps on row 1; Prev | Next share row 2 edge to edge, no overflow. */
.ecm-footer{padding:12px 14px}
.ecm-footer-right{flex:1 1 100%;min-width:0;gap:8px}
.ecm-footer-right .ecm-back-btn{flex:0 0 auto;padding:11px 14px;justify-content:center}
.ecm-footer-right .ecm-continue-btn{flex:1 1 auto;min-width:0;padding:11px 14px;justify-content:center;white-space:nowrap}
}
@media (max-width:480px) {
/* Paired name fields stack — two columns leave ~120px inputs on a phone. */
.ecm-quick-form .ewz-field-pair{grid-template-columns:1fr!important}
}
/* iOS Safari: 100vh runs under the bottom toolbar and hides the footer; dvh tracks the visible area. */
@supports (height:100dvh) {
.ecm-page .ecm-select-pane{height:calc(100dvh - 88px)}
}
/* Phones: breathing room under the navbar, and heading / sub-heading / search
   each on its own row (the desktop grid puts search beside the heading). */
@media (max-width:540px) {
.ecm-page{padding-top:16px}
.ecm-page .ecm-select-pane{height:calc(100vh - 104px)}
@supports (height:100dvh) { .ecm-page .ecm-select-pane{height:calc(100dvh - 104px)} }
.ecm-page-head-top-row{display:contents}
.ecm-page-title{order:1;padding:16px 16px 0}
.ecm-page-head-row{order:2;padding:4px 16px 0}
.ecm-page-head-search{order:3;padding:12px 16px 14px;justify-content:stretch}
.ecm-page-head-search .ecm-search-wrap,.ecm-search-step,
#ecm-step-toolbar-right .dccm-search-wrap{max-width:none;width:100%}
}
/* Phones: the 16px head margin + 18px scroll padding stacked on the list's own
   padding left ~52px of blank above the first card — keep only the list's. */
@media (max-width:540px) {
.ecm-page .ecm-page-head{margin-bottom:0}
.ecm-page .ecm-select-scroll{padding:0}
.ecm-page .ecm-type-list{padding:16px}
.ecm-page .ecm-quick-form{padding-top:16px}
}
@media (max-width:540px) {
/* Bottom spacing on the head itself, so steps without a search bar (Event Details) don't sit on the divider. */
.ecm-page .ecm-page-head{padding-bottom:14px}
.ecm-page-head-search{padding-bottom:0}
}
/* Phones — Event Details form. */
@media (max-width:540px) {
/* Card header: icon | title + subtitle side by side; badge / "+ Add" button
   drops under the title instead of wrapping the icon onto its own row. */
.ecm-quick-form .ewz-card-hdr{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:10px;align-items:center}
.ecm-quick-form .ewz-card-hdr > :nth-child(n+3){grid-column:2;justify-self:start;margin-left:0}
/* Chat bubble covers "+ Add" buttons and inputs on a phone-width form. */
body:has(.ecm-page) #cb-widget{display:none}
.ecm-page .ecm-quick-form{padding-top:0}
}
@media (max-width:480px) {
/* Start / End date: two columns truncate to "dd/mm/yyyy, h…" — stack them. */
.ecm-quick-form .form-row,
.ecm-quick-form .form-row--nowrap,
.ecm-quick-form #ewz-dt-row{grid-template-columns:1fr!important}
}
@media (max-width:540px) {
/* Segmented toggles in a card header (Physical/Virtual/Hybrid, Self/Other) take the full card width. */
.ecm-quick-form .ewz-card-hdr > .ewz-pill-toggle,
.ecm-quick-form .ewz-card-hdr > [class*="pill-toggle"]{grid-column:1 / -1;justify-self:stretch;width:100%;min-width:0}
}
@media (max-width:540px) {
/* Header gets a 3rd column: "+ Add …" buttons become a round "+" on the right.
   Text stays in the DOM (font-size:0) so screen readers still read "Add Item". */
.ecm-quick-form .ewz-card-hdr{grid-template-columns:auto minmax(0,1fr) auto}
.ecm-quick-form .ewz-card-hdr > .btn{grid-column:3;grid-row:1;justify-self:end;margin:0;
  width:36px;height:36px;min-width:36px;padding:0;border-radius:50%;font-size:0;line-height:0;
  display:inline-flex;align-items:center;justify-content:center}
.ecm-quick-form .ewz-card-hdr > .btn::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* Phones: edge-to-edge — no outer page spacing, no card border/radius.
   Pane height = viewport minus the 64px navbar only. */
@media (max-width:540px) {
.ecm-page{padding:0}
.ecm-page .ecm-body{border-radius:0}
.ecm-page .ecm-select-pane{border:none;border-radius:0;height:calc(100vh - 64px)}
@supports (height:100dvh) { .ecm-page .ecm-select-pane{height:calc(100dvh - 64px)} }
}
/* Phones: Step 1 (event types) and Step 2 (templates) in a 2-column grid. */
@media (max-width:540px) {
.ecm-page .ecm-type-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ecm-page .ecm-type-item{padding:16px 10px}
.ecm-page #etpm-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
.ecm-page .dccm-grid-pane{padding:16px}
}
/* Phones: template tiles use the same 1px border as the event-type cards (base is 2px). */
@media (max-width:540px) {
.ecm-page #etpm-grid .dccm-tile{border-width:1px}
}
@media (max-width:540px) {
/* The hidden label is still a zero-width flex item; the base .btn gap (8px) pushed the "+" 4px off-centre. */
.ecm-quick-form .ewz-card-hdr > .btn{gap:0}
}
/* Phones: step dots centred and riding on the footer's top divider (half above, half below). */
@media (max-width:540px) {
.ecm-page .ecm-footer-steps{justify-content:center;margin-top:-28px;position:relative;z-index:1}
}
/* Phones: the step dots stick 16px up into the content — leave room under the last card on every step. */
@media (max-width:540px) {
.ecm-page .ecm-type-list{padding-bottom:36px}
.ecm-page .dccm-grid-pane{padding-bottom:36px}
.ecm-page .ecm-quick-form{padding-bottom:24px}
.ecm-page .ecm-login-view{padding-bottom:36px}
}
@media (max-width:540px) {
/* Templates scroll inside their own pane — its bottom padding is what clears the dots. */
.ecm-page #ecm-templates-view .dccm-grid-pane{padding-bottom:36px}
/* Event Details scrolls in #ecm-select-scroll; a spacer after the form clears the dots. */
.ecm-page .ecm-quick-form::after{content:"";display:block;height:24px}
}