/* ==========================================================
   MAXATTENTION
========================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
    --ma-accent:#5b4df8;
    --ma-accent-hover:#4637e7;
    --ma-text:#1f2937;

}

body{

    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.7;

    color:var(--ma-text, #1f2937);
    background:#ffffff;

    -webkit-font-smoothing:antialiased;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

/* ==========================================================
   Container
========================================================== */

.container{

    width:min(1180px,92%);
    margin:auto;

}

/* ==========================================================
   Header
========================================================== */

.header{

    position:sticky;
    top:0;

    background:#fff;

    border-bottom:1px solid #ececec;

    z-index:1000;

}

.header .container{

    height:82px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

}

.logo{
    flex:0 0 auto;
}

.logo img{

    height:32px;
    width:auto;
    max-width:min(240px,48vw);

}

.headerBar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:28px;
    margin-left:auto;
    min-width:0;
}

nav{

    display:flex;
    gap:36px;
    flex-shrink:0;

}

nav a{

    color:#4b5563;
    font-weight:500;

}

nav a:hover{

    color:#111827;

}

.headerActions{

    display:flex;
    align-items:center;
    gap:18px;
    flex-shrink:0;

}

.langSwitch{

    position:relative;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    color:#4b5563;

}

.langSwitch:hover{

    color:#111827;

}

.langFlag{

    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    line-height:1;
    width:22px;
    height:15px;

}

.langFlagImg{

    display:block;
    width:22px;
    height:15px;
    object-fit:cover;
    border-radius:2px;
    box-shadow:0 0 0 1px rgba(17, 24, 39, 0.12);

}

.langSwitch select{

    appearance:none;
    -webkit-appearance:none;

    position:absolute;
    inset:0;

    width:100%;
    height:100%;
    min-width:0;

    margin:0;
    padding:0;
    border:0;

    opacity:0;
    cursor:pointer;
    font:inherit;

    background:transparent;

}

.langSwitch select:focus{

    outline:none;

}

.langSwitch:focus-within{

    outline:2px solid #5b4df8;
    outline-offset:2px;
    border-radius:999px;

}

.login{

    color:#4b5563;
    font-weight:500;

}

.login:hover{

    color:#111827;

}

.authGuest,
.authUser{

    display:flex;
    align-items:center;
    gap:18px;

}

.authGuest[hidden],
.authUser[hidden]{

    display:none !important;

}

.authAvatar{

    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;
    display:block;

}

.authAvatar[hidden],
.authAvatarFallback[hidden]{

    display:none !important;

}

.authAvatarFallback{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    background:#5b4df8;
    color:#fff;
    font-size:12px;
    font-weight:700;
    letter-spacing:0.02em;
    user-select:none;

}

.authNameToggle{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:32px;
    height:32px;
    padding:0;

    border:0;
    border-radius:999px;
    background:transparent;

    color:#4b5563;
    cursor:pointer;

}

.authNameToggle:hover{

    color:#111827;
    background:#f3f4f6;

}

.authNameToggle .authChevron{

    transition:transform .15s ease;

}

.authNameToggle.is-open .authChevron{

    transform:rotate(90deg);

}

.authName{

    font-weight:600;
    color:#111827;
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

}

.visuallyHidden{

    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;

}

.appError{

    background:#FEF3F2;
    color:#B42318;
    border-bottom:1px solid #FECDCA;
    padding:12px 16px;
    font-size:14px;
    font-weight:500;
    text-align:center;

}

/* ==========================================================
   Buttons
   Native <button> on Windows/Edge keeps a black frame unless
   appearance is reset — border:none alone is not enough.
========================================================== */

button,
[type="button"],
[type="submit"],
[type="reset"]{
    appearance:none;
    -webkit-appearance:none;
}

.button{

    appearance:none;
    -webkit-appearance:none;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:15px 32px;

    border:0;
    border-style:none;
    border-radius:999px;
    outline:none;
    box-shadow:none;

    background:var(--ma-accent, #5b4df8);
    color:#fff;

    font:inherit;
    font-weight:700;
    line-height:1.2;
    cursor:pointer;

    transition:background .25s;

}

.button:hover,
.button:focus-visible{

    background:var(--ma-accent-hover, #4637e7);
    border:0;
    border-style:none;
    outline:none;
    box-shadow:none;

}

.button:focus-visible{
    outline:2px solid var(--ma-accent, #5b4df8);
    outline-offset:2px;
}

.button.secondary{

    background:#fff;
    color:#111827;
    border:1px solid #d9d9d9;
    border-style:solid;
    box-shadow:none;

}

.button.secondary:hover,
.button.secondary:focus-visible{

    background:#f8f8f8;
    border:1px solid #d9d9d9;
    border-style:solid;
    box-shadow:none;

}

.button.secondary:focus-visible{
    outline:2px solid var(--ma-accent, #5b4df8);
    outline-offset:2px;
}

.button:disabled,
.button[disabled]{
    opacity:0.45;
    cursor:not-allowed;
    pointer-events:none;
}

/* ==========================================================
   Hero
========================================================== */

.hero{

    padding:110px 0;

}

.heroGrid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:90px;

    align-items:center;

}

.heroText h1{

    font-size:4.2rem;
    line-height:1.02;

    font-weight:800;

    color:#111827;

    margin-bottom:34px;

}

.heroText p{

    font-size:1.15rem;

    color:#4b5563;

    margin-bottom:22px;

}

.buttons{

    display:flex;
    gap:18px;

    margin-top:45px;

}

.heroImage{

    text-align:center;

}

.heroImage img{

    width:100%;
    max-width:560px;
    margin:auto;

}

/* ==========================================================
   Landing Page
========================================================== */

.landing{

    padding:64px 0;

}

.landingGrid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:90px;

    align-items:center;

}

.landingText h2{

    font-size:3rem;

    line-height:1.15;

    margin-bottom:30px;

    color:#111827;

}

.landingText p{

    font-size:1.1rem;

    color:#4b5563;

    margin-bottom:24px;

}

.landingImage{

    text-align:center;

}

.landingImage img{

    width:100%;
    margin:auto;

}

/* ==========================================================
   Connect
========================================================== */

.connect{

    padding:64px 0;

}

.sectionTitle{

    text-align:center;

    margin-bottom:40px;

}

.sectionTitle h2{

    font-size:2.8rem;

    color:#111827;

    margin-bottom:18px;

}

.sectionTitle p{

    color:#6b7280;

    font-size:1.1rem;

}

/* ==========================================================
   Flow (create → book)
========================================================== */

.flow{

    padding:64px 0;

    background:#f9fafb;

}

.flowSteps{

    max-width:720px;

    margin:0 auto;

    padding:0;

    list-style:none;

    counter-reset:flow-step;

}

.flowSteps li{

    position:relative;

    counter-increment:flow-step;

    padding:20px 0 20px 64px;

    border-bottom:1px solid #e5e7eb;

    font-size:1.1rem;

    line-height:1.55;

    color:#374151;

}

.flowSteps li:last-child{

    border-bottom:none;

}

.flowSteps li::before{

    content:counter(flow-step);

    position:absolute;

    left:0;

    top:18px;

    width:40px;

    height:40px;

    border-radius:50%;

    background:#111827;

    color:#fff;

    font-size:1rem;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* ==========================================================
   Studio show
========================================================== */

.studioShow{

    padding:64px 0;

}

.studioShowBody{

    max-width:720px;

    margin:0 auto;

    text-align:center;

}

.studioShowList{

    list-style:none;

    padding:0;

    margin:0 0 36px;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:14px 28px;

    text-align:left;

}

.studioShowList li{

    font-size:1.15rem;

    color:#111827;

    padding:12px 0;

    border-bottom:1px solid #e5e7eb;

}

.studioShowClose{

    font-size:1.35rem;

    font-weight:600;

    color:#111827;

    line-height:1.4;

}

.cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:34px;

}

.card{

    border:1px solid #ececec;

    border-radius:22px;

    padding:42px;

    background:#fff;

    transition:.25s;

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.card h3{

    font-size:1.5rem;

    color:#111827;

    margin-bottom:22px;

}

.card p{

    color:#4b5563;

    margin-bottom:16px;

}

/* ==========================================================
   Business model
========================================================== */

.business{

    padding:64px 0;

}

.businessBody{

    max-width:720px;

    margin:0 auto;

    text-align:center;

}

.businessBody p{

    color:#4b5563;

    font-size:1.15rem;

    line-height:1.7;

    margin-bottom:22px;

}

.businessClose{

    color:#111827;

    font-weight:600;

    margin-bottom:0;

}

/* ==========================================================
   Pricing
========================================================== */

.pricing{

    padding:64px 0;

    text-align:center;

}

.pricingGrid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-bottom:48px;

    text-align:center;

}

.priceCard{

    background:#fff;

    border:1px solid #ececec;

    border-radius:22px;

    padding:42px;

    transition:.25s;

    font:inherit;

    text-align:center;

    display:flex;

    flex-direction:column;

    align-items:center;

    width:100%;

}

.priceCard:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

.priceCard h3{

    font-size:1.5rem;

    color:#111827;

    margin-bottom:8px;

}

.priceCard p{

    color:#4b5563;

}

.price{

    font-size:3rem;

    font-weight:800;

    color:#111827;

    margin:24px 0 28px;

}

.priceCard.featured{

    background:linear-gradient(135deg,#5b4df8,#7b6ff9);

    color:#fff;

    border-color:transparent;

}

.priceCard.featured h3,
.priceCard.featured .price,
.priceCard.featured p{

    color:#fff;

}

.pricingFeatureList{

    list-style:none;

    margin:0 0 28px;

    padding:0;

    width:100%;

    text-align:left;

    flex:1;

}

.pricingFeatureList li{

    position:relative;

    color:#4b5563;

    font-size:0.98rem;

    line-height:1.45;

    padding:7px 0 7px 24px;

}

.pricingFeatureList li::before{

    content:"";

    position:absolute;

    left:0;

    top:13px;

    width:7px;

    height:7px;

    border-radius:50%;

    background:#5b4df8;

}

.priceCard.featured .pricingFeatureList li{

    color:rgba(255,255,255,.92);

}

.priceCard.featured .pricingFeatureList li::before{

    background:#fff;

}

.priceCard .button{

    margin-top:auto;

}

.priceCard.featured .button{

    background:#fff;

    color:#5b4df8;

}

.priceCard.featured .button:hover{

    background:#f3f4f6;

}

/* ==========================================================
   Footer
========================================================== */

footer{

    border-top:1px solid #ececec;

    padding:40px 0;

}

.footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer a{

    margin-left:28px;

    color:#6b7280;

}

.footer a:hover{

    color:#111827;

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:980px){

.heroGrid,
.landingGrid,
.cards,
.pricingGrid{

    grid-template-columns:1fr;

}

.hero{

    padding:80px 0;

}

.landing{

    padding:48px 0;

}

.flow,
.studioShow{

    padding:48px 0;

}

.connect{

    padding:48px 0;

}

.business{

    padding:48px 0;

}

.studioShowList{

    grid-template-columns:1fr;

}

.heroText h1{

    font-size:3rem;

}

.landingText h2{

    font-size:2.3rem;

}

.heroImage{

    margin-top:50px;

}

.landingImage{

    margin-top:50px;

}

.header .container{

    flex-wrap:wrap;

    gap:12px 16px;

    height:auto;

    min-height:82px;

    padding:14px 0;

}

.headerBar{

    width:100%;
    margin-left:0;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:14px 22px;

}

nav{

    gap:22px;

}

.headerActions{

    width:auto;
    justify-content:flex-start;
    flex-wrap:wrap;
    gap:14px;

}

.langSwitch select{

    min-width:0;
    font-size:13px;

}

.authName{

    max-width:120px;

}

.buttons{

    flex-wrap:wrap;

}

.footer{

    flex-direction:column;

    gap:25px;

    text-align:center;

}

.footer a{

    margin:0 12px;

}

}

/* ==========================================================
   Onboarding / Studio app pages
========================================================== */

.appPage{
    background:#f7f8fb;
    min-height:100vh;
}

.formPage{
    padding:64px 0 100px;
}

.formWrap{
    max-width:560px;
    margin:0 auto;
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    padding:42px;
}

.formWrap h1{
    font-size:2rem;
    color:#111827;
    margin-bottom:10px;
}

.formLead{
    color:#6b7280;
    margin-bottom:32px;
}

.legalPage{
    padding:64px 0 100px;
}

.legalWrap{
    position:relative;
    max-width:720px;
    margin:0 auto;
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    padding:42px;
}

.legalClose{
    position:absolute;
    top:16px;
    right:16px;
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    color:#6b7280;
    text-decoration:none;
    font-size:1.6rem;
    line-height:1;
    border:1px solid transparent;
}

.legalClose:hover,
.legalClose:focus-visible{
    color:#111827;
    background:#f3f4f6;
    border-color:#ececec;
    outline:none;
}

.legalWrap h1{
    font-size:2rem;
    color:#111827;
    margin-bottom:10px;
}

.legalWrap h2{
    font-size:1.15rem;
    color:#111827;
    margin:28px 0 12px;
}

.legalLead{
    color:#6b7280;
    font-size:1.1rem;
    margin-bottom:24px;
}

.legalWrap p{
    color:#4b5563;
    line-height:1.7;
    margin-bottom:16px;
}

.legalNote{
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid #ececec;
    color:#6b7280;
    font-size:0.98rem;
}

.legalList{
    list-style:none;
    margin:0 0 16px;
    padding:0;
}

.legalList li{
    position:relative;
    color:#4b5563;
    line-height:1.5;
    padding:6px 0 6px 22px;
}

.legalList li::before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#5b4df8;
}

.stackForm{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.stackForm label{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px 12px;
    font-weight:600;
    color:#111827;
    text-align:left;
    align-items:center;
}

.stackForm label > span:first-child{
    grid-column:1;
}

.stackForm label:has([required]) > span:first-child::after{
    content:" *";
    color:#B42318;
    font-weight:800;
}

.optionalTag{
    grid-column:2;
    justify-self:end;
    font-size:12px;
    font-weight:500;
    color:#6b7280;
}

.stackForm input,
.stackForm select,
.stackForm textarea{
    grid-column:1 / -1;
    font:inherit;
    padding:12px 14px;
    border:1px solid #d9d9d9;
    border-radius:12px;
    color:#111827;
    background:#fff;
}

.stackForm input.inputError,
.stackForm select.inputError,
.stackForm textarea.inputError{
    border-color:#B42318;
    background:#FEF3F2;
}

.stackForm input:focus,
.stackForm select:focus,
.stackForm textarea:focus{
    outline:2px solid #5b4df8;
    outline-offset:2px;
}

.stackForm input[readonly]{
    background:#f3f4f6;
    color:#4b5563;
}

.formActions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:8px;
}

.formStatus{
    color:#057a55;
    font-weight:600;
}

.studioPanel[hidden]{
    display:none !important;
}

.panelLead{
    color:#6b7280;
    margin-bottom:24px;
}

.dashGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-bottom:28px;
}

.dashCard{
    border:1px solid #ececec;
    border-radius:18px;
    padding:22px;
    background:#fff;
}

.dashCard h3{
    font-size:14px;
    color:#6b7280;
    margin-bottom:12px;
    font-weight:600;
}

.dashCard strong{
    font-size:2rem;
    color:#5b4df8;
}

.billingSummary{
    grid-template-columns:repeat(2,minmax(14rem,1fr));
}

.billingSummary .dashCard strong{
    white-space:nowrap;
    font-size:clamp(1.45rem,2.4vw,2rem);
}

.emptyState{
    border:1px dashed #d9d9d9;
    border-radius:18px;
    padding:36px;
    text-align:center;
    color:#6b7280;
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
}

.emptyState[hidden]{
    display:none;
}

.studioSimpleList{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.studioSimpleList li{
    border:1px solid #ececec;
    border-radius:14px;
    padding:16px 18px;
    background:#fff;
}

.studioSimpleList li strong{
    display:block;
    margin-bottom:6px;
    color:#111827;
}

.dashboardActions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:8px;
}

.mediaListItem{
    display:flex;
    align-items:center;
    gap:14px;
}

.mediaThumb{
    width:72px;
    height:72px;
    object-fit:cover;
    border-radius:10px;
    background:#f3f4f6;
    flex-shrink:0;
}

.mediaMeta{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.mediaMeta span{
    color:#6b7280;
    font-size:0.9rem;
}

.mediaGrid{
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(148px, 1fr));
    gap:16px;
}

.mediaCard{
    display:flex;
    flex-direction:column;
    border:1px solid #ececec;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    position:relative;
}

.mediaCardBadge{
    position:absolute;
    top:10px;
    left:10px;
    background:#111827;
    color:#fff;
    font-size:0.72rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    padding:4px 8px;
    border-radius:6px;
}

.mediaCardLink{
    font-size:0.85rem;
    font-weight:600;
    color:var(--ma-accent, #5b4df8);
    text-decoration:none;
}

.mediaCardLink:hover{
    text-decoration:underline;
}

.mediaYoutubeForm{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-end;
    margin:0 0 22px;
}

.mediaYoutubeForm .settingsField{
    flex:1 1 280px;
    margin-top:0;
    max-width:none;
}

.mediaCardThumb{
    width:100%;
    aspect-ratio:1;
    object-fit:cover;
    background:#f3f4f6;
    display:block;
}

.mediaCardThumbEmpty{
    display:flex;
    align-items:center;
    justify-content:center;
    color:#9ca3af;
    font-size:0.85rem;
    text-align:center;
    padding:12px;
}

.mediaCardMeta{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px;
    min-width:0;
}

.mediaCardMeta strong{
    font-size:0.9rem;
    color:#111827;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mediaCardDelete{
    appearance:none;
    -webkit-appearance:none;
    position:absolute;
    top:6px;
    right:6px;
    z-index:3;
    width:auto;
    height:auto;
    min-width:0;
    margin:0;
    padding:0 2px;
    border:none;
    border-radius:0;
    background:none;
    background-color:transparent;
    box-shadow:none;
    color:#dc2626;
    font:inherit;
    font-size:1.15rem;
    font-weight:700;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.mediaCardDelete:hover,
.mediaCardDelete:focus-visible{
    background:none;
    border:none;
    color:#b91c1c;
    outline:none;
}

label.button.mediaUploadBtn{
    cursor:pointer;
    margin:0;
}

.studioPage{
    padding:40px 0 80px;
}

.eventListPanel{
    min-width:0;
}

.offerShareBox{
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid #ececec;
    display:grid;
    gap:14px;
}

.designSplitGrid{
    align-items:stretch;
}

.designEditor,
.designPreviewPane{
    min-width:0;
}

.designPreviewPane{
    border:1px solid #ececec;
    border-radius:16px;
    padding:18px;
    background:#fafafa;
}

.settingsSection[hidden]{
    display:none !important;
}

.channelToggleList{
    list-style:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin:0;
    padding:0;
}

.channelToggleList > li,
.channelCard{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    border:1px solid #ececec;
    border-radius:14px;
    padding:16px 18px;
    background:#fff;
    min-width:0;
}

.channelCardRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-width:0;
}

.channelCardLabel,
.channelToggleList label{
    display:flex;
    align-items:center;
    gap:12px;
    flex:1;
    min-width:0;
    cursor:pointer;
    font-weight:500;
}

.channelCardLabel span,
.channelToggleList label span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.channelCardSide{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
}

.channelEditBtn{
    appearance:none;
    -webkit-appearance:none;
    border:1px solid #ececec;
    background:#fff;
    color:#4b5563;
    border-radius:10px;
    padding:6px 12px;
    font:inherit;
    font-size:0.88rem;
    font-weight:600;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:none;
    outline:none;
}

.channelMetaActions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin:0;
    width:100%;
    padding-top:2px;
    border-top:1px solid #f3f4f6;
}

.channelMetaStatus{
    margin:0;
    color:#6b7280;
    font-size:0.85rem;
    line-height:1.4;
    flex:1 1 100%;
    word-break:break-word;
}

.channelCommissionMeta{
    color:#6b7280;
    font-size:0.88rem;
    font-weight:600;
    white-space:nowrap;
    flex-shrink:0;
}

.channelEditBtn:hover,
.channelEditBtn:focus-visible{
    border-color:#5b4df8;
    color:#4338ca;
    outline:none;
}

.channelPricePreview{
    margin:0;
    color:#4b5563;
    font-size:0.95rem;
    line-height:1.45;
}

.channelPricePreview.isError{
    color:#b91c1c;
}

body.modalOpen{
    overflow:hidden;
}

.studioModal{
    position:fixed;
    inset:0;
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

.studioModal[hidden]{
    display:none !important;
}

.studioModalBackdrop{
    position:absolute;
    inset:0;
    background:rgba(17,24,39,0.45);
}

.studioModalDialog{
    position:relative;
    width:min(440px,100%);
    background:#fff;
    border-radius:18px;
    border:1px solid #ececec;
    padding:28px 28px 24px;
    box-shadow:0 20px 50px rgba(0,0,0,0.18);
    z-index:1;
}

.studioModalDialogWide{
    width:min(720px,100%);
}

.designsCodeArea{
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:0.88rem;
    line-height:1.45;
    white-space:pre;
    tab-size:2;
}

.pbDesignpack{
    width:100%;
}

.pbDesignpack.is-empty,
.pbDesignpack.is-error{
    border:1px dashed #d1d5db;
    border-radius:12px;
    padding:16px;
}

.studioModalDialog h2{
    margin:0 40px 10px 0;
    font-size:1.35rem;
    color:#111827;
}

.studioModalClose{
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid transparent;
    border-radius:10px;
    background:transparent;
    color:#6b7280;
    font-size:1.6rem;
    line-height:1;
    cursor:pointer;
}

.studioModalClose:hover,
.studioModalClose:focus-visible{
    color:#111827;
    background:#f3f4f6;
    border-color:#ececec;
    outline:none;
}

.distributeBox{
    margin-top:16px;
}

.distributeActions{
    flex-wrap:wrap;
}

.agentReadmeBox{
    margin-top:16px;
}

.agentReadmeBox textarea{
    width:100%;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size:0.85rem;
    line-height:1.4;
}

.settingsSection{
    margin-bottom:28px;
}

.settingsSection h2{
    margin:0 0 8px;
    font-size:1.1rem;
    color:#111827;
}

.settingsField{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-width:22rem;
    margin-top:12px;
}

.settingsField select,
.settingsField input{
    font:inherit;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:10px;
    background:#fff;
}

.settingsList{
    display:grid;
    gap:16px;
    margin-bottom:28px;
}

.settingsList > div{
    display:grid;
    grid-template-columns:180px 1fr;
    gap:12px;
    padding:14px 0;
    border-bottom:1px solid #ececec;
}

.settingsList dt{
    color:#6b7280;
    font-weight:500;
}

.settingsList dd{
    color:#111827;
    font-weight:600;
}

.sidebar a.menu{
    text-decoration:none;
    display:block;
}

.composeDesignMount{
    margin-bottom:28px;
}

.pageBlock{
    margin-bottom:24px;
}

.pageBlock-section h2{
    font-size:1.4rem;
    margin-bottom:10px;
    color:#111827;
}

.pageBlock-button{
    margin-top:8px;
}

.composeConvert{
    margin-top:8px;
}

.designPage{
    padding:40px 0 80px;
}

.designWindow{
    display:grid;
    grid-template-columns:220px 1fr;
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    overflow:hidden;
    min-height:640px;
}

.designSidebar{
    background:#f7f8fb;
    border-right:1px solid #ececec;
    padding:22px 0;
}

.designSidebar h1{
    font-size:1.2rem;
    margin:0 22px 8px;
}

.designSidebar .panelLead{
    margin:0 22px 18px;
    font-size:0.92rem;
}

.designRoleNav{
    display:flex;
    flex-direction:column;
}

.designRoleNav--tabs{
    flex-direction:row;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 18px;
}

.designRoleNav--tabs a,
.designRoleNav--tabs button{
    border:1px solid #e5e7eb;
    background:#fff;
    border-radius:999px;
    padding:8px 14px;
    font:inherit;
    font-weight:500;
    color:#6b7280;
    cursor:pointer;
    text-align:center;
}

.designRoleNav--tabs a.active,
.designRoleNav--tabs button.active,
.designRoleNav--tabs [aria-current="page"]{
    background:#111827;
    border-color:#111827;
    color:#fff;
}

.designSubHead{
    margin-bottom:12px;
}

.designSubHead h2{
    margin:0;
    font-size:1.15rem;
}

.designWorkspace{
    padding:28px;
}

.designPageList{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:12px;
    margin:0;
    padding:0;
}

.designPageCard{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    border:1px solid #ececec;
    border-radius:14px;
    padding:18px 20px;
    background:#fff;
}

.designPageCardMain{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.designPageCardMain strong{
    color:#111827;
    font-size:1.05rem;
}

.designPageMeta{
    color:#6b7280;
    font-size:0.9rem;
}

.designPageCardSide{
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:12px;
}

.designPageCardSide .button{
    appearance:none;
    -webkit-appearance:none;
    border:0 !important;
    border-style:none !important;
    outline:none;
    box-shadow:none !important;
    background:var(--ma-accent, #5b4df8);
    color:#fff;
}

.designPageCardSide .button:hover,
.designPageCardSide .button:focus-visible{
    background:var(--ma-accent-hover, #4637e7);
    border:0 !important;
    box-shadow:none !important;
}

.pageBlockHeroImage,
.pageBlock-image img{
    display:block;
    width:100%;
    max-height:280px;
    object-fit:cover;
    border-radius:12px;
    margin-bottom:12px;
}

.pageBlock-hero .pageBlockHeroImage{
    margin-bottom:16px;
}

.pageBlock-hero h1{
    overflow-wrap:anywhere;
    word-break:break-word;
}

.pageBlock-hero .offerBody,
.pageBlock-section .offerBody,
.pageBlock-text .offerBody{
    overflow-wrap:anywhere;
    word-break:break-word;
}

.designSplit{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:28px;
    align-items:start;
}

.eventRecurrence{
    margin: 0.25rem 0 0.5rem;
    padding: 0.75rem 0 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
    min-width: 0;
}

.eventRecurrenceToggle{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
    margin: 0;
}

.stackForm label.eventRecurrenceToggle{
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    grid-template-columns: none;
    gap: 0.5rem;
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

.stackForm label.eventRecurrenceToggle > span{
    grid-column: auto;
    display: inline;
    line-height: 1.2;
    padding: 0;
    margin: 0;
}

.stackForm label.eventRecurrenceToggle input[type="checkbox"],
.eventRecurrenceToggle input[type="checkbox"]{
    appearance: auto;
    -webkit-appearance: checkbox;
    grid-column: unset;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    margin: 0;
    padding: 0;
    border: 1px solid #9ca3af;
    border-radius: 3px;
    background: #fff;
    flex: 0 0 auto;
    align-self: center;
    vertical-align: middle;
    accent-color: var(--ma-accent, #5b4df8);
    outline-offset: 2px;
}

.eventRecurrenceFields{
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.75rem;
}

.eventRecurrenceFields[hidden]{
    display: none;
}

.eventDepartures{
    margin: 0.25rem 0 0.75rem;
    padding: 0.75rem 0 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.eventDepartures legend{
    padding: 0;
    font-weight: 600;
}

.eventDepartures .fieldHint{
    margin: 0.35rem 0 0.75rem;
    color: #6b7280;
    font-size: 0.9rem;
}

.eventDeparturesList{
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.65rem;
}

.eventDepartureRow{
    display: grid;
    grid-template-columns: 1.1fr 1fr 0.85fr auto;
    gap: 0.65rem;
    align-items: end;
}

.eventDepartureRow label{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin: 0;
}

.eventDepartureRow label span{
    font-size: 0.85rem;
    color: #4b5563;
}

@media (max-width: 720px){
    .eventDepartureRow{
        grid-template-columns: 1fr;
    }
}

.eventRecurWeekdays{
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.eventRecurWeekdayList{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
}

.eventRecurWeekdayList label{
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
    color: #374151;
}

.connectionCard{
    margin-top: 0.75rem;
    padding: 1rem 0 0;
    border-top: 1px solid #e5e7eb;
}

.connectionCardHead h3{
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    color: #111827;
}

/* Settings → Connections: Shopify-style connected accounts */
.connectionsLayout{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    margin-top:1.25rem;
    max-width:56rem;
}
.connectionsGroupTitle{
    margin:0 0 0.35rem;
    font-size:1rem;
    font-weight:700;
    color:#111827;
}
.connectionsGroupLead{
    margin:0 0 0.85rem;
}
.connectionsGrid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
    align-items:stretch;
}
@media (max-width:900px){
    .connectionsGrid{
        grid-template-columns:1fr;
    }
}
#settings-connections .connectionCard{
    margin:0;
    padding:1.15rem 1.25rem 1.25rem;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
#settings-connections .connectionCardHead{
    display:flex;
    flex-wrap:wrap;
    gap:0.75rem 1rem;
    justify-content:space-between;
    align-items:flex-start;
}
.connectionCardIntro{
    flex:1 1 14rem;
    min-width:0;
}
.connectionCardKind{
    margin:0 0 0.2rem;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#6b7280;
}
#settings-connections .connectionCardHead h3{
    margin:0 0 0.35rem;
    font-size:1.1rem;
}
.connectionCardPurpose{
    margin:0;
    font-size:0.95rem;
    font-weight:500;
    color:#374151;
    line-height:1.4;
}
.connectionCardHint{
    margin:0 0 0.85rem;
    font-size:0.9rem;
    color:#6b7280;
    line-height:1.45;
}
.connectionCardBody{
    display:flex;
    flex-direction:column;
    gap:0;
}
.connectionCardForm{
    gap:14px;
}
.connectionCardActions{
    margin-top:0.25rem;
}
.connectionStatus{
    margin:0;
    flex:0 0 auto;
    max-width:100%;
    padding:0.35rem 0.65rem;
    border-radius:999px;
    font-size:0.8rem;
    font-weight:600;
    line-height:1.3;
    border:1px solid transparent;
}
.connectionStatus.is-off{
    color:#6b7280;
    background:#f3f4f6;
    border-color:#e5e7eb;
}
.connectionStatus.is-on{
    color:#065f46;
    background:#ecfdf5;
    border-color:#a7f3d0;
}
.connectionStatus.is-warn{
    color:#92400e;
    background:#fffbeb;
    border-color:#fcd34d;
}
.connectionStatus.is-error{
    color:#991b1b;
    background:#fef2f2;
    border-color:#fecaca;
}

.gaAffInviteForm{
    margin-top:12px;
    max-width:520px;
}

.gaAffSplit{
    display:grid;
    grid-template-columns:minmax(220px, 300px) minmax(0, 1fr);
    gap:18px;
    margin-top:18px;
    align-items:start;
}

@media (max-width:820px){
    .gaAffSplit{
        grid-template-columns:1fr;
    }
}

.gaAffSubhead{
    margin:0 0 10px;
    font-size:15px;
    font-weight:600;
    color:#111827;
}

.gaAffListPane .eventList{
    max-width:none;
}

.gaAffDetailPane{
    border:1px solid #ececec;
    border-radius:14px;
    padding:16px 18px;
    background:#fff;
}

.gaAffDetailDl{
    margin:0 0 14px;
    display:grid;
    gap:12px;
}

.gaAffDetailDl > div{
    display:grid;
    gap:4px;
}

.gaAffDetailDl dt{
    font-size:12px;
    color:#6b7280;
}

.gaAffDetailDl dd{
    margin:0;
    color:#111827;
    white-space:pre-wrap;
    word-break:break-word;
}

.gaAffPitch{
    line-height:1.45;
}

.eventScheduleRow{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}

.pageGrid{
    display:grid;
    gap:16px;
    align-items:stretch;
}

.pageGridCell{
    min-width:0;
}

.designWorkspace{
    display:grid;
    grid-template-columns:200px minmax(0,1fr) minmax(240px,300px);
    gap:16px;
    align-items:start;
    margin-bottom:24px;
}

.designPalette{
    border:1px solid #ececec;
    border-radius:14px;
    background:#fff;
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:8px;
    position:sticky;
    top:12px;
}

.designPaletteTitle{
    margin:0;
    font-weight:700;
    color:#111827;
    font-size:0.95rem;
}

.designPaletteSection{
    margin:8px 0 0;
    color:#6b7280;
    font-size:12px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.designPaletteItem{
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fafafa;
    padding:10px 12px;
    cursor:grab;
    font-weight:600;
    color:#111827;
    user-select:none;
}

.designPaletteItem:active{
    cursor:grabbing;
}

.designCanvasCol{
    min-width:0;
}

.designGridDims{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:14px;
}

.designGridDims label{
    display:grid;
    gap:6px;
    min-width:120px;
}

.designGridCanvas{
    display:grid;
    gap:10px;
    margin-bottom:12px;
    min-height:180px;
}

.designGridCell{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-height:88px;
    padding:12px;
    border:1px dashed #d1d5db;
    border-radius:12px;
    background:#fff;
    text-align:left;
    cursor:pointer;
    color:#374151;
    font:inherit;
    overflow:hidden;
}

.designGridCell.is-h-left{ align-items:flex-start; }
.designGridCell.is-h-center{ align-items:center; }
.designGridCell.is-h-right{ align-items:flex-end; }
.designGridCell.is-v-top{ justify-content:flex-start; }
.designGridCell.is-v-middle{ justify-content:center; }
.designGridCell.is-v-bottom{ justify-content:flex-end; }

.designGridCell.is-empty{
    color:#9ca3af;
    justify-content:center;
    align-items:center;
}

.designGridCell.has-block{
    border-style:solid;
    border-color:#e5e7eb;
}

.designGridCell.is-selected{
    border-color:var(--ma-accent, #5b4df8);
    box-shadow:0 0 0 1px var(--ma-accent, #5b4df8);
}

.designGridCell.is-drop{
    border-color:var(--ma-accent, #5b4df8);
    background:#f5f3ff;
}

.designGridCell.is-open-n{
    border-top-style:dotted;
    border-top-color:#c7c9f5;
}
.designGridCell.is-open-e{
    border-right-style:dotted;
    border-right-color:#c7c9f5;
}
.designGridCell.is-open-s{
    border-bottom-style:dotted;
    border-bottom-color:#c7c9f5;
}
.designGridCell.is-open-w{
    border-left-style:dotted;
    border-left-color:#c7c9f5;
}

.designCellPlaceholder{
    color:#9ca3af;
    font-size:13px;
}

.designGridCell .pageBlock{
    width:100%;
    pointer-events:none;
}

.designGridCell .pageBlock[draggable="true"]{
    pointer-events:auto;
    cursor:grab;
}

.designGridCell .pageBlock img{
    max-width:100%;
    height:auto;
    display:block;
    border-radius:8px;
}

.designGridCell .pageBlock h1{
    font-size:1.25rem;
    margin:0 0 0.35rem;
}

.designGridCell .pageBlock h2{
    font-size:1.05rem;
    margin:0 0 0.35rem;
}

.designGridCell .pageBlock p{
    margin:0;
    font-size:0.9rem;
}

.pageCss-pad-none{ padding:0; }
.pageCss-pad-sm{ padding:0.5rem; }
.pageCss-pad-md{ padding:0.85rem; }
.pageCss-pad-lg{ padding:1.25rem; }

.pageCss-bg-surface{ background:#f8f8f8; border-radius:10px; }
.pageCss-bg-accent{ background:color-mix(in srgb, var(--ma-accent, #5b4df8) 14%, white); border-radius:10px; }
.pageCss-bg-dark{ background:#111827; color:#f9fafb; border-radius:10px; }
.pageCss-bg-dark .offerBody,
.pageCss-bg-dark .offerEyebrow{ color:#e5e7eb; }

.pageCss-align-left{ text-align:left; }
.pageCss-align-center{ text-align:center; }
.pageCss-align-right{ text-align:right; }

.composeDesignCtaGhost{
    background:transparent;
    border-color:transparent;
    box-shadow:none;
}

.designCellBorders{
    border:1px solid #ececec;
    border-radius:12px;
    padding:12px 14px;
    margin:8px 0 14px;
}

.designCellBorders legend{
    font-weight:700;
    padding:0 6px;
}

.designCellBordersCompass{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-top:8px;
}

.designCellBordersRow{
    display:flex;
    justify-content:center;
}

.designCellBordersRowEw{
    display:flex;
    align-items:center;
    gap:10px;
}

.designCellBordersCenter{
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px dashed #d1d5db;
    border-radius:8px;
    color:#9ca3af;
    font-weight:700;
}

.designCellBorder{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:0.9rem;
    font-weight:600;
    color:#374151;
    cursor:pointer;
}

.designCellBorder input{
    width:auto;
}

.designInspector{
    border:1px solid #ececec;
    border-radius:14px;
    background:#fff;
    padding:14px;
    display:grid;
    gap:10px;
    position:sticky;
    top:12px;
    max-height:calc(100vh - 40px);
    overflow:auto;
}

.designInspectorTitle{
    margin:0;
    font-weight:700;
    color:#111827;
}

.designBlockFields{
    display:grid;
    gap:10px;
}

.designPreviewPane{
    margin-top:8px;
}

.designPreviewPane h3{
    margin:0 0 12px;
}

.designPreview{
    border:1px solid #ececec;
    border-radius:14px;
    padding:20px;
    background:#fff;
}

@media(max-width:980px){
    .designWorkspace{
        grid-template-columns:1fr;
    }
    .designPalette,
    .designInspector{
        position:static;
        max-height:none;
    }
}

html.ma-preset-minimal .designPreview,
html.ma-preset-minimal .offerWrap{
    background:#fff;
    border-radius:0;
}

.designBlockList{
    list-style:none;
    margin:0 0 16px;
    padding:0;
    display:grid;
    gap:12px;
}

.designBlockItem{
    border:1px solid #ececec;
    border-radius:14px;
    padding:14px;
    background:#fff;
}

.designBlockItem.selected{
    border-color:#5b4df8;
}

.designBlockHead{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
    margin-bottom:12px;
}

.designBlockActions{
    display:flex;
    gap:6px;
}

.designBlockActions .button{
    padding:6px 10px;
    min-width:auto;
}

.designBlockFields{
    display:grid;
    gap:10px;
}

.designBlockFields label{
    display:grid;
    gap:6px;
}

.designPreviewPane h3{
    margin:0 0 12px;
    font-size:1rem;
    color:#6b7280;
}

.designPreview{
    border:1px solid #ececec;
    border-radius:16px;
    padding:24px;
    background:#fafafa;
    min-height:280px;
}

.composeProgress{
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:28px;
    padding:0;
}

.composeProgress li{
    padding:8px 14px;
    border-radius:999px;
    border:1px solid #ececec;
    color:#6b7280;
    font-size:13px;
    font-weight:600;
}

.composeProgress li.active{
    background:#5b4df8;
    border-color:#5b4df8;
    color:#fff;
}

.composeProgress li.done{
    background:#eef0ff;
    border-color:#c7c9f5;
    color:#4338ca;
}

.composeStepsPreview{
    margin:0 0 18px;
    padding-left:20px;
    color:#4b5563;
}

.composeStepsPreview li{
    margin:6px 0;
}

.offerMetaLine{
    color:#4b5563;
    margin-bottom:20px;
    white-space:pre-wrap;
}

.composePage[hidden]{
    display:none !important;
}

.offerPage{
    padding:80px 0 100px;
}

.offerWrap{
    max-width:720px;
}

.offerEyebrow{
    color:#5b4df8;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    font-size:13px;
    margin-bottom:14px;
}

.offerWrap h1{
    font-size:3rem;
    line-height:1.1;
    color:#111827;
    margin-bottom:20px;
}

.offerBody{
    font-size:1.15rem;
    color:#4b5563;
    margin-bottom:32px;
}

.offerMeta{
    display:grid;
    gap:16px;
    margin-bottom:36px;
}

.offerMeta > div{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:12px;
    padding-bottom:14px;
    border-bottom:1px solid #ececec;
}

.offerMeta dt{
    color:#6b7280;
    font-weight:500;
}

.offerMeta dd{
    color:#111827;
    font-weight:600;
    white-space:pre-wrap;
}

.offerActions{
    display:flex;
    gap:12px;
}

@media(max-width:700px){
.offerPage{
    padding:28px 0 56px;
}
.offerWrap h1,
.pageBlock-hero h1{
    font-size:clamp(1.4rem, 6.5vw, 1.85rem);
    line-height:1.2;
    margin-bottom:12px;
}
.offerBody,
.pageBlock-hero .offerBody,
.pageBlock-section .offerBody{
    font-size:1rem;
    line-height:1.45;
    margin-bottom:20px;
}
.pageBlockHeroImage,
.pageBlock-image img{
    max-height:min(42vh, 280px);
}
.offerMeta > div{
    grid-template-columns:1fr;
}
.pageGrid{
    gap:12px;
}
}

@media(max-width:980px){
.dashGrid,
.billingSummary,
.channelToggleList,
.designSplit,
.eventScheduleRow,
.designWindow{
    grid-template-columns:1fr;
}

.settingsList > div{
    grid-template-columns:1fr;
}
}

.studioWindow{
    display:grid;
    grid-template-columns:220px 1fr;
    background:#fff;
    border:1px solid #ececec;
    border-radius:22px;
    overflow:hidden;
    min-height:640px;
}

.sidebar{
    background:#f7f8fb;
    border-right:1px solid #ececec;
    padding:18px 0;
    display:flex;
    flex-direction:column;
}

.sidebar .menu{
    border:0;
    background:transparent;
    text-align:left;
    padding:14px 22px;
    font:inherit;
    font-weight:500;
    color:#6b7280;
    cursor:pointer;
    text-decoration:none;
}

.sidebar .menu:hover{
    background:#eef0ff;
    color:#111827;
}

.sidebar .menu.active{
    background:var(--ma-accent, #5b4df8);
    color:#fff;
}

.menuBranch{
    display:flex;
    flex-direction:column;
}

.menuTwigs{
    display:flex;
    flex-direction:column;
    padding:0 0 6px;
}

.menuTwigs[hidden]{
    display:none !important;
}

.sidebar .menuTwig{
    padding:10px 22px 10px 36px;
    font-size:0.92rem;
    font-weight:500;
    color:#6b7280;
    border:0;
    background:transparent;
    text-align:left;
    cursor:pointer;
    font-family:inherit;
}

.sidebar .menuBranchNest > .menuBranchToggle.menuTwig{
    width:100%;
}

.sidebar .menuTwigNest .menuTwig{
    padding-left:52px;
    font-size:0.88rem;
}

.sidebar a.menuTwig,
.sidebar a.menuBranchToggle{
    text-decoration:none;
    display:block;
}

.sidebar .menuTwig:hover{
    background:#eef0ff;
    color:#111827;
}

.sidebar .menuTwig.active{
    background:#eef0ff;
    color:var(--ma-accent, #5b4df8);
    font-weight:600;
}

.sidebar .menuBranch.is-open > .menuBranchToggle{
    background:#eef0ff;
    color:#111827;
}

.sidebar .menuBranch.is-open > .menuBranchToggle.active{
    background:var(--ma-accent, #5b4df8);
    color:#fff;
}

.widgetStepper{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:0;
    margin:0 0 18px;
    padding:0;
    border-bottom:1px solid #e5e7eb;
    background:#fff;
}

.widgetStepper .widgetStepTab{
    appearance:none;
    border:0;
    border-bottom:3px solid transparent;
    background:transparent;
    padding:14px 10px;
    font:inherit;
    font-size:0.95rem;
    color:#4b5563;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.widgetStepper .widgetStepTab:hover{
    background:#f9fafb;
}

.widgetStepper .widgetStepTab.is-active{
    color:#111827;
    border-bottom-color:#5b4df8;
}

.widgetStepper .widgetStepIndex{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:22px;
    border-radius:999px;
    background:#e5e7eb;
    color:#111827;
    font-size:0.8rem;
    font-weight:600;
}

.widgetStepper .widgetStepTab.is-active .widgetStepIndex{
    background:#5b4df8;
    color:#fff;
}

.widgetStepTitle{
    margin:0 0 6px;
    font-size:1.15rem;
}

#widgetMapModal.widgetMapModal{
    z-index:1200;
}

.widgetLocationField{
    display:grid;
    gap:6px;
}

.widgetLocationLabel{
    font-size:inherit;
    font-weight:600;
    color:#111827;
}

.widgetLocationControls{
    display:flex;
    align-items:stretch;
    gap:8px;
}

.stackForm .widgetLocationControls input,
.widgetLocationControls input{
    grid-column: auto;
    flex:1 1 auto;
    width:auto;
    min-width:0;
}

.widgetLocationControls .button{
    flex:0 0 auto;
    align-self:stretch;
    white-space:nowrap;
    padding:0 16px;
    font-size:0.9rem;
    font-weight:600;
    border-radius:12px;
}

.widgetGeoSummary{
    margin:0;
    color:#6b7280;
    font-size:0.85rem;
}

.widgetGeoRow{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    margin:0 0 12px;
}

.widgetMapDialog{
    max-width:min(720px, 96vw);
}

.widgetMapMount{
    width:100%;
    height:min(420px, 55vh);
    margin:12px 0;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f3f4f6;
}

.widgetFlowPreview{
    margin:0 0 16px;
    padding:12px 12px 12px 32px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f9fafb;
    color:#111827;
}

.widgetFlowPreview li{
    margin:0 0 6px;
}

.widgetFlowPreview li:last-child{
    margin-bottom:0;
}

.widgetFlowLayout{
    display:flex;
    flex-direction:column;
    gap:20px;
    align-items:stretch;
}

.widgetFlowHead{
    min-width:0;
}

.widgetFlowHead .builderStepTitle{
    margin-bottom:6px;
}

.widgetFlowHead .panelLead{
    margin-bottom:0;
    max-width:42rem;
}

.widgetFlowTop{
    display:grid;
    grid-template-columns:minmax(160px, 220px) minmax(0, 1fr);
    gap:24px 28px;
    align-items:start;
}

.widgetFlowDef{
    min-width:0;
}

.widgetFlowDesign{
    min-width:0;
}

.widgetDesignAxes.builderTemplateAxes{
    margin:0;
}

.widgetFlowPreviewPane{
    min-width:0;
    width:100%;
}

.widgetTemplatePreview{
    margin-top:0;
}

.widgetTemplatePreview--series{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:16px;
    align-items:start;
}

.widgetSeriesCardLabel{
    margin:0 0 8px;
    font-size:0.75rem;
    font-weight:600;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:#6b7280;
}

.widgetTemplatePreview .builderGeneratedTemplate{
    max-width:100%;
}

.widgetTemplatePreview .builderGeneratedTemplateFrame,
.widgetTemplatePreview .builderGeneratedTemplateFrame .pbPage{
    width:100%;
    max-width:none;
}

@media (max-width: 960px){
    .widgetFlowTop{
        grid-template-columns:1fr;
    }
}

.widgetPublishMode{
    display:grid;
    gap:10px;
    margin:0 0 16px;
}

.widgetPublishWhenWrap{
    max-width:420px;
}

.widgetPublishWhenWrap .eventScheduleRow{
    margin-top:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.widgetPublishWhenWrap select,
.scheduleSendForm select#scheduleWhenTime{
    min-height:42px;
}

.studioDateParts{
    display:grid;
    grid-template-columns:minmax(4.5rem, 1.1fr) minmax(5rem, 1.2fr) minmax(3.5rem, 0.9fr);
    gap:8px;
    grid-column:1 / -1;
}

.stackForm .studioDateParts select,
.studioDateParts select{
    grid-column:auto;
    min-height:42px;
    width:100%;
}

.widgetPublishWhenWrap[hidden]{
    display:none;
}

.widgetPublishActions{
    margin-top:16px;
}

.widgetFlowOptions{
    display:grid;
    gap:10px;
    margin:0 0 18px;
}

.widgetFlowOption{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    font-size:0.95rem;
    font-weight:500;
    color:#111827;
}

.stackForm label.widgetFlowOption{
    display:flex;
    grid-template-columns:none;
    align-items:center;
    gap:10px;
    width:fit-content;
}

.stackForm label.widgetFlowOption input[type="checkbox"]{
    grid-column:unset;
    width:1rem;
    height:1rem;
    min-width:1rem;
    margin:0;
    padding:0;
    flex:0 0 auto;
}

.widgetFlowSubhead{
    margin:0 0 8px;
    font-size:0.95rem;
    font-weight:600;
    color:#111827;
}

.widgetFlowTemplates{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:0 0 16px;
}

.widgetFlowTemplate{
    display:block;
    width:100%;
    margin:0;
    padding:12px 14px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#fff;
    color:#111827;
    font:inherit;
    font-weight:600;
    text-align:left;
    cursor:pointer;
}

.widgetFlowTemplate.is-selected{
    border-color:#5b4df8;
    box-shadow:inset 0 0 0 1px #5b4df8;
}

.widgetFlowTemplatesEmpty{
    margin:0 0 16px;
    color:#6b7280;
    font-size:0.92rem;
}

.widgetLookThemes{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.widgetLookBtn.is-selected{
    border-color:#5b4df8;
    box-shadow:inset 0 0 0 1px #5b4df8;
}

.widgetShareChannels{
    display:block;
    max-width:none;
}

.widgetShareLayout{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap:24px;
    align-items:start;
}

.widgetShareColTitle{
    margin:0 0 12px;
    font-size:0.8rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:#6b7280;
}

.widgetShareColList{
    display:grid;
    gap:10px;
}

.widgetShareCard{
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:12px 14px;
    background:#fff;
}

.widgetShareCard.is-on{
    border-color:#c7d2fe;
    background:#f8faff;
}

.widgetShareCardToggle{
    margin:0;
}

.widgetShareChannelNest{
    margin:10px 0 0 26px;
    padding:10px 0 0;
    border-left:2px solid #e5e7eb;
    padding-left:12px;
    display:grid;
    gap:10px;
}

.widgetShareChannelNest[hidden],
.widgetShareSubsetPanel[hidden]{
    display:none !important;
}

.widgetShareSubsetPanel{
    display:grid;
    gap:10px;
}

.widgetShareSubsetToolbar{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto auto;
    gap:8px;
    align-items:end;
}

.widgetShareSubsetFilterField{
    margin:0;
}

.widgetShareSubsetAction{
    white-space:nowrap;
    padding:8px 12px;
    font-size:0.85rem;
}

.widgetShareSubsetCount{
    margin:0;
    font-size:0.85rem;
    color:#6b7280;
}

.widgetShareSubsetList{
    max-height:260px;
    overflow:auto;
    display:grid;
    gap:6px;
    padding:10px 12px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#fff;
}

.widgetShareSubsetRow{
    margin:0;
}

.widgetShareSubsetUpload{
    display:grid;
    gap:8px;
}

.widgetShareCsvFieldsLabel{
    margin:0;
    font-size:0.85rem;
    color:#6b7280;
}

.widgetShareCsvFields{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.widgetShareCsvField{
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    padding:6px 10px;
    border:1px solid #e5e7eb;
    border-radius:8px;
    background:#f9fafb;
    font-size:0.85rem;
    line-height:1.2;
}

.widgetShareCsvField strong{
    font-weight:600;
    color:#111827;
}

.widgetShareCsvField em{
    font-style:normal;
    font-size:0.75rem;
    color:#6b7280;
}

.widgetShareCsvField.is-required{
    border-color:#c7d2fe;
    background:#f8faff;
}

.widgetShareUploadBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    margin:0;
    width:fit-content;
}

@media (max-width: 900px){
    .widgetShareLayout{
        grid-template-columns:1fr;
    }
    .widgetShareSubsetToolbar{
        grid-template-columns:1fr;
    }
}

.widgetStepStatus{
    margin:0;
    padding:12px 14px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#f9fafb;
    color:#374151;
    line-height:1.45;
}

.widgetImportEvent{
    display:flex;
    flex-wrap:wrap;
    align-items:end;
    gap:12px;
    max-width:560px;
    margin:0 0 16px;
    padding:0 0 16px;
    border-bottom:1px solid #e5e7eb;
}

.widgetImportEventField{
    display:grid;
    gap:6px;
    flex:1 1 240px;
    min-width:0;
    margin:0;
}

.widgetImportEventField span{
    font-size:0.85rem;
    font-weight:600;
    color:#374151;
}

.widgetImportEventField select{
    width:100%;
    font:inherit;
    padding:12px 14px;
    border:1px solid #d9d9d9;
    border-radius:12px;
    color:#111827;
    background:#fff;
    min-height:42px;
}

.widgetImportEvent .button{
    flex:0 0 auto;
}

.widgetEventForm{
    max-width:560px;
    margin-top:12px;
}

.widgetEditView .workspaceHeader{
    margin-bottom:8px;
}

@media(max-width:720px){
    .widgetStepper{
        grid-template-columns:1fr 1fr;
    }
}

.workspace{
    padding:32px;
}

.workspaceHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:28px;
}

.workspaceHeader h1{
    font-size:1.8rem;
    color:#111827;
}

.studioSplit{
    display:grid;
    grid-template-columns:minmax(340px, 1.15fr) minmax(300px, 0.85fr);
    gap:28px;
    align-items:start;
}

.eventList{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
    margin:0;
    padding:0;
    max-width:920px;
}

.eventForm{
    border:1px solid #ececec;
    border-radius:18px;
    padding:24px;
    max-width:720px;
}

.eventEditTabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin:0 0 18px;
    padding:0 0 14px;
    border-bottom:1px solid #e5e7eb;
}

.eventEditTabs .button.active{
    background:#111827;
    color:#fff;
    border-color:#111827;
}

.eventEditPanel{
    display:grid;
    gap:14px;
}

.eventEditPanel[hidden]{
    display:none;
}

.eventFormActions{
    margin-top:8px;
    padding-top:16px;
    border-top:1px solid #e5e7eb;
}

.scheduleChannelsBox{
    display:grid;
    gap:6px;
}

.scheduleChannelsSummary{
    margin:0;
    padding:10px 12px;
    border:1px solid #e5e7eb;
    border-radius:10px;
    background:#f9fafb;
    color:#374151;
    font-size:0.95rem;
    line-height:1.4;
}

.linkBack{
    appearance:none;
    border:0;
    background:none;
    padding:0;
    margin:0;
    font:inherit;
    color:#5b4df8;
    cursor:pointer;
    text-decoration:underline;
}

.eventCard{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    border:1px solid #ececec;
    background:#fff;
    border-radius:14px;
    padding:14px 16px;
}

.eventCard--active{
    border-color:#111827;
    background:#fafafa;
}

.eventCardMain{
    flex:1 1 200px;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.eventCardTitle{
    color:#111827;
    font-size:1rem;
    font-weight:600;
}

.eventCardMeta{
    color:#6b7280;
    font-size:13px;
    line-height:1.35;
}

.eventCardSide{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.eventCardSide .button{
    appearance:none;
    -webkit-appearance:none;
    padding:8px 12px;
    font-size:13px;
    border:0 !important;
    border-style:none !important;
    box-shadow:none !important;
}

.eventListItem{
    appearance:none;
    -webkit-appearance:none;
    width:100%;
    text-align:left;
    border:1px solid #ececec;
    background:#fff;
    border-radius:14px;
    padding:14px 16px;
    cursor:pointer;
    display:flex;
    flex-direction:column;
    gap:4px;
    font:inherit;
    box-shadow:none;
    outline:none;
}

.eventListItem strong{
    color:#111827;
}

.eventListItem span{
    color:#6b7280;
    font-size:13px;
    text-transform:capitalize;
}

.eventListItem.active,
.eventListItem:hover{
    border-color:#5b4df8;
    background:#f5f3ff;
}

.calendarToolbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.calendarNav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
}

.calendarRangeLabel{
    margin-left:4px;
    color:#111827;
    font-weight:600;
}

.calendarViewTabs{
    display:flex;
    gap:8px;
}

.calendarViewTabs .button.active{
    background:#111827;
    color:#fff;
    border-color:#111827;
}

.calendarMount{
    min-height:280px;
}

.textsList{
    list-style:none;
    margin:16px 0 0;
    padding:0;
    display:grid;
    gap:10px;
}

.textsCard{
    border:1px solid #e5e7eb;
    border-radius:10px;
    padding:12px 14px;
    background:#fff;
    display:flex;
    flex-direction:column;
    gap:6px;
}

.textsCardHead{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
}

.textsCardTitle{
    flex:1 1 auto;
    min-width:0;
    color:#111827;
    font-size:0.95rem;
    font-weight:700;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.textsCardChannel{
    flex:0 0 auto;
    font-size:0.72rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:#5b4df8;
    background:#eef2ff;
    padding:4px 8px;
    border-radius:999px;
    line-height:1.2;
}

.textsCardEdit{
    appearance:none;
    -webkit-appearance:none;
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    margin:0;
    padding:0;
    border:1px solid #e5e7eb;
    border-radius:6px;
    background:#fff;
    color:#4b5563;
    cursor:pointer;
    line-height:0;
    text-decoration:none;
    transition:transform 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.textsCardEdit:hover,
.textsCardEdit:focus-visible{
    color:#111827;
    border-color:#d1d5db;
    background:#f9fafb;
    outline:none;
}

.textsCardEdit:active,
.textsCardEdit--pressed{
    transform:scale(0.9);
    background:#eef2ff;
    border-color:#c7d2fe;
    color:#3730a3;
    box-shadow:inset 0 1px 2px rgba(15, 23, 42, 0.12);
}

.textsCardEdit--copied{
    transform:scale(0.96);
    background:#ecfdf5;
    border-color:#6ee7b7;
    color:#047857;
    box-shadow:none;
}

.textsCardEditIcon{
    display:block;
    width:14px;
    height:14px;
}

.textsCardBody{
    margin:0;
    color:#4b5563;
    font-size:0.92rem;
    line-height:1.45;
    white-space:pre-wrap;
}

.funnelEditPage{
    max-width:760px;
}

.funnelEditSteps{
    list-style:none;
    margin:20px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.funnelEditStep{
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    padding:14px 16px 16px;
    position:relative;
}

.funnelEditStepHead{
    display:grid;
    grid-template-columns:32px minmax(0,1fr) minmax(140px,180px) 32px;
    gap:10px;
    align-items:end;
}

.funnelEditStepOrder{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    font-size:0.85rem;
    font-weight:700;
    margin-bottom:4px;
}

.funnelEditField{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.funnelEditField span{
    font-size:0.78rem;
    font-weight:600;
    color:#6b7280;
}

.funnelEditField input,
.funnelEditField select{
    width:100%;
    font:inherit;
    padding:8px 10px;
    border:1px solid #d1d5db;
    border-radius:8px;
}

.funnelEditExitsTitle{
    margin:14px 0 8px;
    font-size:0.85rem;
    color:#374151;
}

.funnelEditExits{
    list-style:none;
    margin:0 0 10px;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.funnelEditExit{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
    gap:8px;
    align-items:end;
    padding:10px;
    border:1px dashed #e5e7eb;
    border-radius:8px;
    background:#fafafa;
}

.funnelEditArrow{
    text-align:center;
    color:#9ca3af;
    font-size:1.25rem;
    margin-top:10px;
    line-height:1;
}

.checkinEventField{
    max-width:420px;
    margin-bottom:18px;
}

.checkinScanRow{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:16px 24px;
    align-items:end;
    margin-bottom:16px;
}

.checkinScanActions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.checkinManualField{
    margin:0;
}

.checkinManualRow{
    display:flex;
    gap:10px;
    align-items:center;
}

.checkinManualRow input{
    flex:1;
    min-width:0;
}

.checkinVideo{
    width:100%;
    max-width:420px;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:12px;
    background:#111827;
    margin:0 0 12px;
}

.checkinList{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.checkinGuest{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 16px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
}

.checkinGuest.is-checked{
    border-color:#bbf7d0;
    background:#f0fdf4;
}

.checkinGuestMain{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
}

.checkinGuestName{
    color:#111827;
    font-weight:600;
}

.checkinGuestMeta{
    color:#6b7280;
    font-size:0.875rem;
    word-break:break-all;
}

#checkinStatus.is-error{
    color:#b91c1c;
}

@media (max-width:700px){
    .funnelEditStepHead{
        grid-template-columns:32px 1fr 32px;
    }
    .funnelEditStepHead .funnelEditField:nth-child(3){
        grid-column:1 / -1;
    }
    .funnelEditExit{
        grid-template-columns:1fr;
    }
    .checkinScanRow{
        grid-template-columns:1fr;
    }
}

.scheduleSendForm{
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    padding:16px;
    margin:0 0 20px;
    display:grid;
    gap:12px;
}

.scheduleSendForm .formActions{
    margin-top:4px;
}

.scheduleCardRow{
    display:flex;
    align-items:stretch;
    gap:8px;
}

.scheduleCardRow .scheduleCard{
    flex:1 1 auto;
    min-width:0;
}

.scheduleCardRow .eventCardSide{
    flex:0 0 auto;
    align-self:center;
}

.studioTableActions{
    width:1%;
    white-space:nowrap;
    text-align:right;
    vertical-align:middle;
}

.studioTableActionsCol{
    width:1%;
    text-align:right;
}

.calendarAgendaRow{
    display:flex;
    align-items:center;
    gap:10px;
}

.calendarAgendaRow .calendarEvent{
    flex:1 1 auto;
    min-width:0;
}

.scheduleCardSend{
    flex:0 0 auto;
    align-self:center;
    padding:8px 12px;
    font-size:0.85rem;
}

.scheduleCard{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    text-align:left;
    width:100%;
}

.scheduleCard strong{
    font-size:0.82rem;
}

.scheduleCard span{
    font-size:0.72rem;
    opacity:0.85;
}

.scheduleCard.is-draft{
    border-style:dashed;
    opacity:0.9;
}

.scheduleCard.is-sent{
    opacity:0.7;
}

.scheduleWeekWrap{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.scheduleWeek{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.scheduleWeekDay{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:12px;
    align-items:start;
    border:1px solid #ececec;
    border-radius:12px;
    background:#fff;
    padding:12px 14px;
}

.scheduleWeekDay.isToday{
    border-color:#111827;
}

.scheduleWeekDayHead{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:0;
    padding-top:2px;
}

.scheduleWeekDayHead strong{
    font-size:0.8rem;
    font-weight:600;
    color:#6b7280;
    text-transform:capitalize;
    line-height:1.2;
}

.scheduleWeekDayHead span{
    font-size:1.25rem;
    font-weight:700;
    color:#111827;
    line-height:1.1;
}

.scheduleWeekSlots{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-height:0;
}

.scheduleMount .calendarNotes{
    margin-top:0;
}

@media (max-width:640px){
    .scheduleWeekDay{
        grid-template-columns:1fr;
        gap:8px;
    }
}

.calendarWeek{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:8px;
}

.calendarWeekDay{
    border:1px solid #ececec;
    border-radius:12px;
    background:#fff;
    min-height:180px;
    padding:10px;
}

.calendarWeekDay.isToday{
    border-color:#111827;
}

.calendarWeekDayHead{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:8px;
    gap:6px;
}

.calendarWeekDayHead strong{
    font-size:0.85rem;
    color:#6b7280;
    text-transform:capitalize;
}

.calendarWeekDayHead span{
    font-weight:700;
    color:#111827;
}

.calendarWeekSlots{
    min-height: 80px;
}
.calendarWeekSlots.is-drop,
.calendarMonthCell.is-drop{
    background:#eef2ff;
    outline:1px dashed var(--ma-accent, #5b4df8);
}
    display:flex;
    flex-direction:column;
    gap:6px;
}

.calendarEvent{
    display:block;
    width:100%;
    text-align:left;
    border:0;
    border-radius:8px;
    padding:8px 10px;
    background:#eef2ff;
    color:#111827;
    font:inherit;
    font-size:0.82rem;
    cursor:pointer;
    line-height:1.3;
}

.calendarEvent.isPublished{
    background:#ecfdf5;
}

.calendarEvent.isCompact{
    padding:4px 6px;
    font-size:0.75rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.calendarLegend{
    display:flex;
    flex-wrap:wrap;
    gap:14px 20px;
    margin:0 0 14px;
    font-size:0.88rem;
    color:#4b5563;
}

.calendarLegendItem{
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.calendarLegendSwatch{
    width:14px;
    height:14px;
    border-radius:4px;
    background:#eef2ff;
    border:1px solid #c7d2fe;
}

.calendarLegendSwatch.is-published{
    background:#ecfdf5;
    border-color:#a7f3d0;
}

.calendarSessionMeta{
    display:grid;
    grid-template-columns:minmax(7rem,auto) 1fr;
    gap:8px 16px;
    margin:0 0 22px;
}

.calendarSessionMeta dt{
    margin:0;
    color:#6b7280;
    font-size:0.9rem;
}

.calendarSessionMeta dd{
    margin:0;
    color:#111827;
    font-size:0.95rem;
}

.calendarMonthHead,
.calendarMonthBody{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:6px;
}

.calendarMonthHead{
    margin-bottom:6px;
}

.calendarMonthHead div{
    text-align:center;
    font-size:0.8rem;
    color:#6b7280;
    font-weight:600;
    text-transform:capitalize;
}

.calendarMonthCell{
    border:1px solid #ececec;
    border-radius:10px;
    background:#fff;
    min-height:96px;
    padding:8px;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.calendarMonthCell.isOutside{
    opacity:0.45;
}

.calendarMonthCell.isToday{
    border-color:#111827;
}

.calendarMonthNum{
    font-weight:700;
    font-size:0.85rem;
    color:#111827;
}

.calendarMore{
    font-size:0.75rem;
    color:#6b7280;
}

.calendarNotes{
    margin-top:16px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.calendarNotes h3{
    margin:0;
    font-size:0.95rem;
}

.calendarAgenda{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.calendarAgendaDay{
    margin-top:8px;
    font-weight:700;
    color:#111827;
}

.calendarAgendaEmpty{
    color:#6b7280;
}

@media (max-width:900px){
    .calendarWeek{
        grid-template-columns:1fr;
    }
    .calendarMonthHead{
        display:none;
    }
    .calendarMonthBody{
        grid-template-columns:1fr 1fr;
    }
}

.eventEmpty{
    color:#6b7280;
    margin-bottom:12px;
}

.eventForm{
    border:1px solid #ececec;
    border-radius:18px;
    padding:24px;
}

@media(max-width:980px){

.studioWindow,
.studioSplit{
    grid-template-columns:1fr;
}

.sidebar{
    flex-direction:row;
    overflow:auto;
    border-right:none;
    border-bottom:1px solid #ececec;
}

.formWrap{
    padding:28px 20px;
}

}

/* ==========================================================
   JavaScript Effects
========================================================== */

.header.scrolled{

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.fade{

    opacity:0;
    transform:translateY(40px);
    transition:all .7s ease;

}

.fade.visible{

    opacity:1;
    transform:translateY(0);

}

.prepayLabel{
    font-weight:600;
    color:#111827;
    margin:0 0 12px;
    font-size:0.95rem;
}

.billingAmountRow{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:10px;
    align-items:center;
}

.billingAmountRow select,
.billingAmountRow input{
    width:100%;
    padding:10px 12px;
    border:1px solid #d1d5db;
    border-radius:8px;
    font:inherit;
    font-size:0.95rem;
    color:#111827;
    background:#fff;
}

.billingTopUp{
    margin:28px 0;
    max-width:420px;
}

.billingTopUp .button{
    padding:10px 18px;
    font-size:0.95rem;
}

.formStatusError{
    color:#b91c1c;
}

.billingHistoryTitle{
    font-size:1.15rem;
    margin:28px 0 12px;
}

.billingHistoryWrap{
    overflow-x:auto;
}

.billingHistoryTable{
    width:100%;
    border-collapse:collapse;
    font-size:0.95rem;
}

.billingHistoryTable th,
.billingHistoryTable td{
    text-align:left;
    padding:12px 10px;
    border-bottom:1px solid #ececec;
    color:#374151;
}

.billingHistoryTable th{
    color:#6b7280;
    font-weight:600;
}

.eventMarketingAudience{
    margin: 1rem 0 0;
    padding: 0.85rem 0 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.eventMarketingAudience legend{
    padding: 0;
    font-weight: 600;
    color: #111827;
}

.eventAudienceSummary{
    margin: 0.35rem 0 0.75rem;
    color: #374151;
}

.leadsImportBox{
    margin: 0 0 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e5e7eb;
}

.leadsImportBox summary{
    cursor: pointer;
    font-weight: 600;
    color: #111827;
}

.leadsToolbar{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin: 0.75rem 0 1rem;
}

.leadsAudienceEvent,
.leadsAudienceName{
    min-width: 10rem;
    margin: 0;
}

.leadsCheckCol{
    width: 2.25rem;
    text-align: center;
    vertical-align: middle;
}

.leadsSortBtn{
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: inherit;
    cursor: pointer;
    text-align: left;
}

.leadsSortBtn.is-active{
    color: #111827;
}

.leadsImportBox input[type="file"]{
    max-width: 100%;
}

.eventMarketingAudience{
    margin: 1rem 0;
    padding: 0.75rem 0 0;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.eventMarketingAudience legend{
    padding: 0;
    font-weight: 600;
    color: #111827;
}

.eventMarketingSubhead{
    margin: 1rem 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.eventMarketingChannelList{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
}

.eventMarketingChannelRow{
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fafafa;
}

.eventMarketingChannelToggle{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
}

.eventMarketingChannelSettings{
    display: grid;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5e7eb;
}

.eventMarketingChannelSettings[hidden]{
    display: none;
}

.eventMarketingAudienceBlock{
    margin-top: 0.5rem;
}

.eventAudienceSummary{
    margin: 0.35rem 0 0.75rem;
    color: #374151;
}

/* WhatsApp interview questions (widget builder) */
.widgetQuestionsList{
    display:flex;
    flex-direction:column;
    gap:16px;
    margin-top:16px;
}
.widgetQuestionCard{
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    padding:14px 16px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.widgetQuestionCardHead{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:flex-end;
}
.widgetQuestionField{
    display:flex;
    flex-direction:column;
    gap:4px;
    font-weight:600;
    color:#111827;
    font-size:12px;
}
.widgetQuestionField select,
.widgetQuestionField input[type=number]{
    min-width:6.5rem;
    max-width:9rem;
    border:1px solid #d1d5db;
    border-radius:12px;
    padding:8px 10px;
    font:inherit;
}
.widgetQuestionCard textarea,
.widgetQuestionChoiceRow input[type=text]{
    width:100%;
    border:1px solid #d1d5db;
    border-radius:12px;
    padding:10px 12px;
    font:inherit;
}
.widgetQuestionCardActions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-left:auto;
}
.widgetQuestionChoices{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-left:4px;
    padding:12px 0 4px 12px;
    border-left:2px solid #e5e7eb;
}
.widgetQuestionChoiceRow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:flex-end;
}
.widgetQuestionChoiceRow input[type=text]{
    flex:1 1 12rem;
    min-width:8rem;
}
.widgetQuestionPoints{
    flex:0 0 auto;
}
.widgetInterviewStartKeyField{
    display:grid;
    gap:8px;
}
.widgetInterviewStartKeyField input{
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing:0.04em;
    text-transform:uppercase;
}
.widgetInterviewStartKeyHint{
    margin:0;
}
.widgetInterviewShareBox{
    max-width:36rem;
}
.widgetInterviewShareBox[hidden]{
    display:none !important;
}
.widgetInterviewShareQr{
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
}
#resultsGallupBox{
    margin-top:12px;
    padding:14px 16px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
    white-space:pre-wrap;
}
#resultsDetail{
    margin-top:16px;
    padding:16px;
    border:1px solid #e5e7eb;
    border-radius:14px;
    background:#fff;
}
.resultsActionsHeader{
    margin-top:1rem;
}
.settingsFieldRow{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    align-items:flex-end;
}
.buttonRow{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}