/*
 * Bella Portaal presentation system.
 * Contract v8: eco plugins deliver semantic/function markup; Portaal owns presentation.
 */

.bella-ui-root,
.bella-portal,
.bella-chat,
.bella-login,
.bella-tour,
.bella-ui-modal {
	--bella-accent: var(--kw-color-accent, #ff4081);
	--bella-accent-rgb: 255,64,129;
	--bella-accent-soft: color-mix(in srgb,var(--bella-accent) 10%,var(--bella-surface));
	--bella-accent-border: color-mix(in srgb,var(--bella-accent) 22%,var(--bella-surface));
	--bella-text: var(--kw-color-text, #101828);
	--bella-muted: #667085;
	--bella-border: #e7eaf0;
	--bella-surface: #fff;
	--bella-surface-subtle: #f8fafc;
	--bella-success: #178544;
	--bella-success-soft: #effaf3;
	--bella-success-border: #bde8cc;
	--bella-warning: #9a6700;
	--bella-warning-soft: #fff8e8;
	--bella-warning-border: #f2d08a;
	--bella-danger: #c9364f;
	--bella-danger-soft: #fff3f5;
	--bella-danger-border: #efbdc6;
	--bella-info: #2f6fbb;
	--bella-info-soft: #f2f7fd;
	--bella-info-border: #c8dbf2;
	--bella-on-accent: #fff;
	--bella-focus: rgba(var(--bella-accent-rgb),.32);
	--bella-font-body: var(--kw-font-main, "Trebuchet MS", "Segoe UI", sans-serif);
	--bella-font-scale: 1;
	--bella-menu-scale: .85;
	--bella-menu-weight: 500;
	--bella-control-scale: 1;
	--bella-control-weight: 400;
	--bella-control-height: 44px;
	--bella-control-radius: 11px;
	--bella-radius-sm: 11px;
	--bella-radius-md: 15px;
	--bella-radius-lg: 24px;
	--bella-shadow-alpha: .07;
	--bella-button-shadow-alpha: .15;
	--bella-sidebar: 260px;
	--bella-content-max: 1480px;
	--bella-content-default: 1480px;
	--bella-video-max-width: 980px;
	--bella-content-narrow: 820px;
	--bella-space-1: 4px;
	--bella-space-2: 8px;
	--bella-space-3: 12px;
	--bella-space-4: 16px;
	--bella-space-5: 20px;
	--bella-space-6: 24px;
	--bella-type-page-title-size: clamp(calc(2rem * var(--bella-font-scale)), 3vw, calc(2.55rem * var(--bella-font-scale)));
	--bella-type-context-size: calc(.75rem * var(--bella-font-scale));
	--bella-type-section-title-size: calc(1.18rem * var(--bella-font-scale));
	--bella-type-label-size: calc(.84rem * var(--bella-font-scale));
	--bella-type-body-size: calc(.9rem * var(--bella-font-scale));
	--bella-type-meta-size: calc(.79rem * var(--bella-font-scale));
	--bella-type-table-head-size: calc(.72rem * var(--bella-font-scale));
	--bella-type-status-size: calc(.73rem * var(--bella-font-scale));
	--bella-type-body-line-height: var(--kw-type-text-line-height, 1.55);
	--bella-type-page-title-weight: 650;
	--bella-type-context-weight: 600;
	--bella-type-section-title-weight: 600;
	--bella-type-label-weight: 500;
	--bella-type-body-weight: 400;
	--bella-type-meta-weight: 400;
	--bella-type-table-head-weight: 600;
	--bella-type-status-weight: 600;
}

/* Bella authentication: one proportional composition for login and password recovery. */
.bella-login{position:fixed;inset:0;z-index:100000;box-sizing:border-box;display:grid;min-height:100dvh;padding:clamp(130px,20vh,205px) 20px 28px;place-items:center;overflow:auto;background-color:color-mix(in srgb,var(--bella-accent) 13%,#fff);background-image:url('../images/bella-login-background.webp');background-position:center;background-size:cover;background-repeat:no-repeat;background-blend-mode:multiply}.bella-login__stack{display:grid;width:min(500px,100%);gap:18px;justify-items:center;margin:auto}.bella-login__card{position:relative;width:100%;padding:70px clamp(26px,4vw,42px) 28px;border:1px solid color-mix(in srgb,#fff 85%,transparent);border-radius:22px;background:color-mix(in srgb,#fff 90%,transparent);box-shadow:0 20px 58px rgba(73,36,46,.14);text-align:center;backdrop-filter:blur(9px)}.bella-login__dog{position:absolute!important;z-index:2;left:50%;top:0;width:min(510px,92vw)!important;max-width:none!important;height:auto!important;transform:translate(-50%,-84%);pointer-events:none}.bella-login__card h1{margin:0 0 8px;font-size:clamp(1.75rem,4vw,2.35rem)}.bella-login__card>p{max-width:420px;margin:0 auto 20px}.bella-login__card form{display:grid;gap:12px;text-align:left}.bella-login__card form label{display:grid;gap:6px;font-weight:700}.bella-login__card form input{width:100%;height:46px;padding:0 14px;border:1px solid var(--bella-border);border-radius:9px;background:#fff}.bella-login__card form .bella-button,.bella-login__card>.bella-button{justify-self:center;min-width:180px;margin-top:3px;border-color:var(--bella-accent)!important;border-radius:999px;background:var(--bella-accent)!important;color:var(--bella-on-accent,#fff)!important;box-shadow:0 9px 22px color-mix(in srgb,var(--bella-accent) 22%,transparent)}.bella-login__card form .bella-button:is(:hover,:focus-visible),.bella-login__card>.bella-button:is(:hover,:focus-visible){border-color:color-mix(in srgb,var(--bella-accent) 88%,#000)!important;background:color-mix(in srgb,var(--bella-accent) 88%,#000)!important}.bella-login__forgot{justify-self:center;color:var(--bella-muted);font-weight:500;text-align:center;text-decoration:none}.bella-login__credit{margin:0;color:var(--bella-muted);font-size:var(--bella-type-meta-size);line-height:1.4}.bella-login__credit a{color:inherit;font-weight:600;text-underline-offset:3px}.bella-login__credit a:is(:hover,:focus-visible){color:var(--bella-accent)}.bella-login__success,.bella-login__error{margin:0 0 14px;padding:11px 13px;border-radius:var(--bella-radius-md);text-align:left}.bella-login__success{border:1px solid var(--bella-success-border);background:var(--bella-success-soft);color:var(--bella-success)}.bella-login__error{border:1px solid var(--bella-danger-border);background:var(--bella-danger-soft);color:var(--bella-danger)}.bella-builder-preference{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.bella-builder-preference h2,.bella-builder-preference p{margin:4px 0 0}
@media(max-width:640px){.bella-login{padding:150px 12px 22px;background-position:center}.bella-login__stack{width:min(430px,100%);gap:16px}.bella-login__card{padding:64px 18px 22px;border-radius:18px}.bella-login__dog{width:min(390px,92vw)!important}.bella-login__card h1{font-size:1.6rem}.bella-login__card>p{margin-bottom:16px;font-size:.95rem}.bella-login__card form input{font-size:16px}.bella-login__card form .bella-button{width:100%;min-width:0}.bella-login__forgot{padding:4px}}
@media(max-height:820px) and (min-width:641px){.bella-login{padding:112px 16px 18px}.bella-login__stack{width:min(460px,100%);gap:14px}.bella-login__card{padding:58px 36px 22px}.bella-login__dog{width:min(430px,82vw)!important}.bella-login__card form{gap:9px}.bella-login__card form input{height:42px}.bella-login__credit{font-size:.75rem}}

/* The normal page header owns the route title when no internal hero renders it. */
.bella-visual-page .bella-ui-page-header:not(.bella-ui-page-header--after-secondary-hero) .bella-ui-page-header__eyebrow{display:none}
.bella-visual-page .bella-ui-page-header:not(.bella-ui-page-header--after-secondary-hero):not(.bella-ui-page-header--visual) .bella-ui-page-header__description{display:none}
.bella-visual-page .bella-ui-page-header:not(.bella-ui-page-header--after-secondary-hero){margin-top:0}

/* Cursisten keeps one data renderer and changes only its responsive layout. */
.bella-portal .kwispel-students-table tr[data-kw-student-row]{cursor:pointer}
.bella-portal .kwispel-students-table tr[data-kw-student-row]:focus-visible{outline:3px solid rgba(var(--bella-accent-rgb),.24);outline-offset:3px}
.bella-portal .kwispel-management-page{width:100%;max-width:none}

/* Scope reset: the theme may provide layout around Bella, but not inside Bella. */
.bella-portal,
.bella-portal *,
.bella-ui-root,
.bella-ui-root * { box-sizing: border-box; }

.bella-portal :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure),
.bella-ui-root :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure) { margin-top: 0; }

.bella-portal .bella-portal__content :where(h1,h2,h3,h4,h5,h6,p,span,a,label,button,input,select,textarea,table,thead,tbody,tfoot,tr,th,td,dl,dt,dd,strong,b,em,small,summary),
.bella-ui-root :where(h1,h2,h3,h4,h5,h6,p,span,a,label,button,input,select,textarea,table,thead,tbody,tfoot,tr,th,td,dl,dt,dd,strong,b,em,small,summary) {  }

.bella-portal :where(a),
.bella-ui-root :where(a) { color: inherit; }

.bella-portal :where(img),
.bella-ui-root :where(img) { max-width: 100%; height: auto; }
.bella-ui-root [hidden] { display: none !important; }

/* Shell */
.bella-portal {
	position: relative;
	display: grid;
	grid-template-columns: var(--bella-sidebar) minmax(0,1fr);
	width: 100%;
	min-height: min(900px,calc(100vh - 70px));
	margin: 0 0 36px;
	background: var(--bella-surface);
	color: var(--bella-text);
	
	overflow-x: clip;
}

.bella-portal__sidebar {
	position: sticky;
	top: 0;
	align-self: start;
	display: flex;
	flex-direction: column;
	width: var(--bella-sidebar);
	height: 100vh;
	min-height: 620px;
	padding: 14px 10px 12px;
	border: 1px solid var(--bella-border);
	border-left: 0;
	border-radius: 0 var(--bella-radius-lg) var(--bella-radius-lg) 0;
	background: var(--bella-surface);
	box-shadow: 0 16px 40px rgba(16,24,40,var(--bella-shadow-alpha));
	overflow-y: auto;
	z-index: 30;
}

.bella-portal__brand {
	display: grid;
	grid-template-columns: minmax(0,1fr) auto auto;
	align-items: center;
	gap: 6px;
	min-height: 52px;
	padding: 3px 3px 12px;
	border-bottom: 0;
}
.bella-portal__brand-name strong {  font-weight: 650; line-height: 1.2; }
.bella-portal__desktop-collapse,
.bella-portal__desktop-reopen,
.bella-portal__close,
.bella-portal__menu-button {
	display: inline-grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--bella-border);
	border-radius: var(--bella-radius-sm);
	background: var(--bella-surface);
	color: var(--bella-muted);
	cursor: pointer;
}
.bella-portal__close { display: none; }
.bella-portal__desktop-reopen { position: fixed; top: 18px; left: 12px; z-index: 35; display: none; }

.bella-portal__nav { display: flex; flex-direction: column; padding: 10px 0; }
.bella-portal__utilities { margin-top: auto; padding: 8px 0; border-top: 0; }
.bella-portal__nav-main {
	display: grid;
	grid-template-columns: 18px minmax(0,1fr) auto;
	align-items: center;
	gap: 7px;
	width: 100%;
	min-height: 42px;
	padding: 9px 12px;
	border: 0;
	border-radius: var(--bella-radius-sm);
	white-space: nowrap;
	background: transparent;
	color: var(--bella-text);
	
	font-weight: var(--bella-menu-weight);
	line-height: 1.25;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}
.bella-portal__nav-main:hover { background: var(--bella-accent-soft); }
.bella-portal__nav-main.is-current { color: var(--bella-accent); font-weight: var(--bella-type-section-title-weight); }
.bella-portal__nav-main i { color: var(--bella-muted); font-style: normal; text-align: right; }
.bella-portal__nav-main>span:first-child{display:grid;place-items:center;flex:0 0 20px;width:20px;height:20px;color:var(--bella-muted)}
.bella-portal__nav-main>span:first-child svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bella-portal__nav-main:is(:hover,:focus-visible,.is-current)>span:first-child{color:var(--bella-accent)}
.bella-portal__nav-label {
	margin: 13px 8px 5px;
	color: var(--bella-muted);
	
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.bella-portal__nav-label--system{margin-top:20px;padding-top:16px;border-top:1px solid var(--bella-border)}
.bella-portal__nav-group { margin: 1px 0; }
.bella-portal__nav-sub { display: grid; gap: 1px; margin: 1px 0 6px 25px; padding-left: 10px; border-left: 1px solid var(--bella-border); }
.bella-portal__nav-sub[hidden] { display: none; }
.bella-portal__nav-sub a {
	display: block;
	padding: 7px 7px;
	border-radius: 8px;
	background: var(--bella-surface);
	color: var(--bella-muted);
	
	font-weight: var(--bella-menu-weight);
	line-height: 1.25;
	text-decoration: none;
}
.bella-portal__nav-sub a:hover { background: var(--bella-accent-soft); }
.bella-portal__nav-sub a.is-current { background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-portal__sidebar-foot { padding: 9px 6px 2px; border-top: 1px solid var(--bella-border); }
.bella-portal__credit,
.bella-portal__version { color: var(--bella-muted);  line-height: 1.45; text-align: center; }
.bella-portal__credit a { text-decoration: none; }

.bella-portal__page { position:relative; isolation:isolate; min-width: 0; padding-left: clamp(24px,3vw,48px); }
.bella-portal__paw-background { position:absolute; z-index:-1; top:0; right:0; width:min(75%,800px); height:900px; overflow:hidden; pointer-events:none; color:color-mix(in srgb,var(--bella-accent) 5%,transparent); }
.bella-portal__paw-background svg { position:absolute; right:-35%; top:4%; width:100%; height:100%; transform:rotate(-22deg); fill:currentColor; stroke:none; }
.bella-portal__support { display:grid; grid-template-columns:28px minmax(0,1fr) 16px; align-items:center; gap:12px; padding:16px; border-radius:var(--bella-radius-md); background:var(--bella-accent-soft); color:var(--bella-text); text-decoration:none; }
.bella-portal__support>span:first-child { color:var(--bella-accent); }
.bella-portal__support svg { width:28px; height:28px; fill:currentColor; }
.bella-portal__support strong,.bella-portal__support small { display:block; }
.bella-portal__support small { color:var(--bella-muted); }
.bella-portal__support:is(:hover,:focus-visible) { outline:2px solid var(--bella-accent-border); outline-offset:2px; }

.bella-portal__content { width: 100%; max-width: var(--bella-content-max); margin: 0 auto; padding: 14px 20px 80px; }
.bella-portal__mobile-header,
.bella-portal__bottom-nav,
.bella-portal__scrim,
.bella-mobile-more { display: none; }

.bella-portal.is-sidebar-collapsed { grid-template-columns: 0 minmax(0,1fr); }
.bella-portal.is-sidebar-collapsed .bella-portal__sidebar { transform: translateX(-110%); }
.bella-portal.is-sidebar-collapsed .bella-portal__page { padding-left: 30px; }
.bella-portal.is-sidebar-collapsed .bella-portal__desktop-reopen { display: inline-grid; }

/* Semantic typography. Eco classes may describe function, never typography. */
.bella-portal :where(h1),
.bella-ui-root :where(h1),
.bella-ui-page-header h1,
.bella-standalone__title {
	margin-bottom: 10px;
	color: var(--bella-text);
	font-size: var(--bella-type-page-title-size);
	font-weight: var(--bella-type-page-title-weight);
	line-height: 1.08;
	letter-spacing: -.035em;
}

.bella-portal :where(h2),
.bella-portal :where(h3),
.bella-ui-root :where(h2),
.bella-ui-root :where(h3),
.bella-chat-section-title,
.bella-feed-panel > h3,
.bella-feed-setting h3 {
	color: var(--bella-text);
	font-size: var(--bella-type-section-title-size);
	font-weight: var(--bella-type-section-title-weight);
	line-height: 1.25;
	letter-spacing: -.015em;
}

.bella-portal :where(h4,h5,h6),
.bella-ui-root :where(h4,h5,h6) {
	color: var(--bella-text);
	font-size: var(--bella-type-body-size);
	font-weight: 600;
	line-height: 1.35;
}

.bella-ui-page-header__eyebrow,
.bella-ui-eyebrow,
.bella-home__kicker,
.bella-feed__eyebrow,
.bella-chat__eyebrow,
.bella-standalone__eyebrow,
.kwispel-course-overview-kicker {
	margin: 0 0 8px;
	color: var(--bella-accent);
	font-size: var(--bella-type-context-size);
	font-weight: var(--bella-type-context-weight);
	line-height: 1.35;
	letter-spacing: .035em;
}

.bella-portal :where(p,li,dt,dd),
.bella-ui-root :where(p,li,dt,dd) {
	color: var(--bella-text);
	font-size: var(--bella-type-body-size);
	font-weight: var(--bella-type-body-weight);
	line-height: 1.55;
}
.bella-ui-page-header__description,
.bella-ui-section__header p,
.bella-chat-section-subtitle,
.bella-ui-field-description,
.bella-ui-field small,
.bella-ui-checklist__item small,
.bella-table td small,
.bella-feed-detail small,
.bella-feed-invoice small,
.bella-feed__status,
.bella-ui-field-label-note,
.bella-account__muted,
.bella-home__muted {
	color: var(--bella-muted);
	font-size: var(--bella-type-meta-size);
	font-weight: var(--bella-type-meta-weight);
	line-height: 1.45;
}
.bella-portal :where(strong,b) { font-weight: 600; }

/* Pages, sections, cards and layout */
.bella-ui-page { width: 100%; max-width: var(--bella-content-default); margin: 0 auto; }
.bella-ui-page--narrow { max-width: var(--bella-content-narrow); }
.bella-ui-page--wide { max-width: none; }
.bella-ui-page--after-hero { padding: clamp(28px, 4vw, 56px) clamp(20px, 5vw, 72px) 0; }
.bella-ui-page-header { margin: 2px 0 26px; }
.bella-portal .bella-ui-page-header__eyebrow,.bella-portal .kw-secondary-hero__eyebrow{display:none}
@media(min-width:901px){.bella-portal .bella-ui-page:not(.bella-course-editor)>.bella-ui-page-header h1{display:none}}
.bella-ui-page-header--after-secondary-hero { margin-top: clamp(24px, 3vw, 40px); }
.bella-ui-page-header__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; }
.bella-ui-page-header__copy { min-width: 0; }
.bella-ui-page-header__description { max-width: 850px; margin: 0; }
.bella-ui-page-header__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

.bella-ui-section { display: grid; gap: 14px; margin: 0 0 22px; }
.bella-ui-section__header,
.bella-ui-section__head { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.bella-ui-section__header h2,
.bella-ui-section__header p { margin-bottom: 4px; }

.bella-ui-surface,
.bella-card,
.bella-chat-settings-card,
.bella-feed-panel,
.bella-feed-setting,
.bella-feed-detail,
.bella-account-card,
.bella-appearance__settings,
.bella-appearance__preview,
.bella-appearance__sample-card,
.bella-appearance__type-preview,
.bella-standalone__surface {
	border: 1px solid var(--bella-border);
	border-radius: var(--bella-radius-lg);
	background: var(--bella-surface);
	box-shadow: 0 10px 30px rgba(var(--bella-accent-rgb),calc(var(--bella-shadow-alpha) * .7));
}
.bella-ui-surface,
.bella-card,
.bella-chat-settings-card,
.bella-feed-panel,
.bella-feed-setting,
.bella-feed-detail,
.bella-account-card,
.bella-appearance__settings,
.bella-appearance__preview { padding: 20px; }
.bella-ui-surface--subtle { background: var(--bella-surface-subtle); box-shadow: none; }

.bella-ui-grid { display: grid; gap: var(--bella-space-4); }
.bella-ui-grid--2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.bella-ui-grid--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.bella-ui-inline-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bella-space-4); }
.bella-ui-inline-fields--3 { grid-template-columns: repeat(3,minmax(0,1fr)); }
.bella-ui-stack { display: grid; gap: 14px; }
.bella-ui-settings-form--two{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}.bella-ui-settings-form--two .bella-ui-field--wide,.bella-ui-settings-form--two .bella-ui-form-actions{grid-column:1/-1}.bella-ui-settings-form--two .bella-ui-form-actions{margin-top:4px}
.bella-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bella-space-4); }

.bella-record-cards { display: grid; gap: 12px; }
.bella-record-card { position: relative; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 6px 16px; align-items: center; min-width: 0; padding: 11px 16px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-md); color: var(--bella-text); background: var(--bella-surface); text-decoration: none; box-shadow: 0 8px 22px rgba(var(--bella-accent-rgb),.05); }
.bella-record-card:not(.bella-record-card--priority)::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; border-radius:var(--bella-radius-md) 0 0 var(--bella-radius-md); background:transparent; }
.bella-record-card--error:not(.bella-record-card--priority)::before{background:var(--bella-danger)} .bella-record-card--warning:not(.bella-record-card--priority)::before{background:var(--bella-warning)} .bella-record-card--success:not(.bella-record-card--priority)::before{background:var(--bella-success)} .bella-record-card--info:not(.bella-record-card--priority)::before{background:var(--bella-accent)}
/* Task priority colours the container border itself; top and bottom fade out after one third. */
.bella-record-card--priority{position:relative;isolation:isolate;--bella-priority-color:var(--bella-accent)}.bella-record-card--priority.bella-record-card--error{--bella-priority-color:var(--bella-danger)}.bella-record-card--priority.bella-record-card--warning{--bella-priority-color:var(--bella-warning)}.bella-record-card--priority:before,.bella-record-card--showstopper:after{content:"";position:absolute;z-index:2;pointer-events:none;inset:-1px;border-radius:inherit}.bella-record-card--priority:before{border:1px solid var(--bella-priority-color);-webkit-mask:linear-gradient(#000 0 0) left top/var(--bella-radius-md) var(--bella-radius-md) no-repeat,linear-gradient(#000 0 0) left bottom/var(--bella-radius-md) var(--bella-radius-md) no-repeat,linear-gradient(#000 0 0) left/1px 100% no-repeat,linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 9%,rgba(0,0,0,.34) 23%,transparent 33.333%) left top/100% 1px no-repeat,linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 9%,rgba(0,0,0,.34) 23%,transparent 33.333%) left bottom/100% 1px no-repeat;mask:linear-gradient(#000 0 0) left top/var(--bella-radius-md) var(--bella-radius-md) no-repeat,linear-gradient(#000 0 0) left bottom/var(--bella-radius-md) var(--bella-radius-md) no-repeat,linear-gradient(#000 0 0) left/1px 100% no-repeat,linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 9%,rgba(0,0,0,.34) 23%,transparent 33.333%) left top/100% 1px no-repeat,linear-gradient(90deg,#000 0%,rgba(0,0,0,.82) 9%,rgba(0,0,0,.34) 23%,transparent 33.333%) left bottom/100% 1px no-repeat}.bella-record-card--showstopper:after{background:linear-gradient(90deg,transparent,var(--bella-priority-color),transparent) 0 0/28% 2px no-repeat,linear-gradient(90deg,transparent,var(--bella-priority-color),transparent) 0 100%/28% 2px no-repeat;animation:bella-priority-edge-scan 2.2s ease-in-out infinite alternate;will-change:background-position}@keyframes bella-priority-edge-scan{to{background-position:100% 0,100% 100%}}@media(max-width:640px){.bella-builder-preference{align-items:flex-start;flex-direction:column}}
.bella-record-card__copy { display:grid; gap:2px; min-width:0; }
.bella-record-card__copy h3,.bella-record-card__copy p { margin:0; }
.bella-record-card__copy h3 { font-size:clamp(.98rem,1.5vw,1.1rem); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bella-record-card__copy p,.bella-record-card time { color:var(--bella-muted); font-size:.86rem; }
.bella-record-card__error { color:#d92d20; }
.bella-record-card__chevrons { display:flex; color:var(--bella-accent); }
.bella-record-card__chevrons svg { width:20px; height:20px; margin-left:-8px; fill:none; stroke:currentColor; stroke-width:2; }
.bella-record-card:hover { border-color:rgba(var(--bella-accent-rgb),.35); transform:translateY(-1px); }
.bella-week-planner{display:grid;gap:10px;min-width:0}.bella-week-planner__head{display:flex;align-items:center;justify-content:space-between;gap:10px}.bella-week-planner__scroll{overflow-x:auto;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface)}.bella-week-planner__grid{display:grid;grid-template-columns:minmax(140px,.8fr) repeat(var(--bella-week-days),minmax(170px,1fr));min-width:1360px}.bella-week-planner__corner,.bella-week-planner__day,.bella-week-planner__trainer,.bella-week-planner__cell{padding:10px;border-right:1px solid var(--bella-border);border-bottom:1px solid var(--bella-border)}.bella-week-planner__corner,.bella-week-planner__day{position:sticky;top:0;z-index:2;background:var(--bella-surface)}.bella-week-planner__corner{left:0;z-index:3}.bella-week-planner__day{display:grid;gap:1px;text-align:center}.bella-week-planner__day span{color:var(--bella-muted);font-size:var(--bella-type-meta-size)}.bella-week-planner__trainer{position:sticky;left:0;z-index:1;background:var(--bella-surface)}.bella-week-planner__cell{display:grid;align-content:start;gap:6px;min-height:58px}.bella-week-planner :is(.is-today){background:var(--bella-accent-soft)}.bella-week-planner__event{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:3px 7px;padding:5px 8px;border-left:2px solid var(--bella-accent);border-radius:var(--bella-radius-sm);color:var(--bella-text);background:var(--bella-accent-soft);text-decoration:none}.bella-week-planner__event.has-employee-color{border-color:var(--bella-employee-color);background:color-mix(in srgb,var(--bella-employee-color) 11%,var(--bella-surface))}.bella-week-planner__event time,.bella-week-planner__event span{font-size:var(--bella-type-meta-size)}.bella-week-planner__event time{font-weight:700}.bella-week-planner__event strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bella-week-planner__details{display:none;grid-column:1/-1;color:var(--bella-muted)}.bella-week-planner.is-details-visible .bella-week-planner__details{display:block}.bella-week-planner__empty{grid-column:2/-1;padding:28px;text-align:center;color:var(--bella-muted)}.bella-week-planner__mobile{display:none}@media(max-width:780px){.bella-week-planner__scroll{display:none}.bella-week-planner__mobile{display:flex;gap:12px;max-width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}.bella-week-planner__mobile-day{display:grid;flex:0 0 100%;gap:12px;align-content:start;padding:14px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);scroll-snap-align:start;scroll-snap-stop:always}.bella-week-planner__mobile-day.is-today{border-color:var(--bella-accent-border);background:var(--bella-accent-soft)}.bella-week-planner__mobile-day h3,.bella-week-planner__mobile-day p{margin:0}.bella-week-planner__mobile-day h3 span{color:var(--bella-accent)}.bella-week-planner__mobile-day p{color:var(--bella-muted)}.bella-week-planner__mobile-slot{display:grid;gap:7px;align-items:start}.bella-week-planner__mobile-slot>strong{font-size:var(--bella-type-label-size)}.bella-week-planner__mobile-slot>div{display:grid;gap:8px}.bella-week-planner__mobile-slot .bella-week-planner__event{min-width:0}}
.bella-week-planner__controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px}.bella-week-planner__choices{display:flex;flex-wrap:wrap;gap:7px}.bella-week-planner__choices:last-child{justify-content:flex-end}.bella-week-planner__choices .bella-ui-choice-chip{display:inline-flex;min-height:38px;align-items:center;padding:7px 13px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text);font-weight:700;text-decoration:none}.bella-week-planner__choices .bella-ui-choice-chip.is-current{border-color:var(--bella-accent);background:var(--bella-accent);color:var(--bella-on-accent,#fff)}.bella-week-planner__period{display:flex;align-items:center;gap:7px}.bella-week-planner__period strong{min-width:92px;text-align:center}.bella-week-planner__day.is-muted{opacity:.45}.bella-ui-color-palette{display:flex;flex-wrap:wrap;gap:10px}.bella-ui-color-choice{position:relative;display:inline-grid;cursor:pointer}.bella-ui-color-choice input{position:absolute;opacity:0;pointer-events:none}.bella-ui-color-choice>span{display:block;width:48px;height:48px;border:3px solid var(--bella-surface);border-radius:50%;background:var(--bella-choice-color);box-shadow:0 0 0 1px var(--bella-border)}.bella-ui-color-choice input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--bella-accent) 28%,transparent);outline-offset:3px}.bella-ui-color-choice input:checked+span{box-shadow:0 0 0 3px var(--bella-text)}.bella-ui-color-choice.is-disabled{cursor:not-allowed;opacity:.25}.bella-ui-color-choice.is-disabled>span{filter:grayscale(.65)}@media(max-width:780px){.bella-week-planner__controls{grid-template-columns:1fr}.bella-week-planner__choices,.bella-week-planner__choices:last-child{justify-content:center}.bella-week-planner__period{justify-content:center;order:-1}}
.bella-ui-query-form--inline { grid-template-columns:minmax(260px,1fr) auto; align-items:end; gap:10px; }
.bella-ui-query-form--inline .bella-ui-form-actions { margin:0; }
.bella-ui-query-toolbar{position:relative;z-index:12;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-height:40px}.bella-ui-query-toolbar>.bella-ui-inline-actions{display:flex;gap:8px}.bella-ui-query-disclosure{position:relative;display:grid;justify-items:end}.bella-ui-query-disclosure>summary{display:grid;place-items:center;list-style:none;cursor:pointer}.bella-ui-query-disclosure>summary::-webkit-details-marker{display:none}.bella-ui-query-disclosure__body{position:absolute;z-index:30;top:calc(100% + 10px);right:0;width:min(560px,calc(100vw - 48px));padding:14px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface);box-shadow:0 14px 38px rgba(var(--bella-accent-rgb),calc(var(--bella-shadow-alpha) * .8))}.bella-ui-query-disclosure__body input[type=search]{min-width:0}.bella-ui-query-disclosure__body .bella-button{min-height:44px}

/* Forms. All plain eco controls are normalized too. */
.bella-ui-field,
.bella-portal :where(form label) { color: var(--bella-text); }
.bella-ui-field { display: grid; gap: 7px; margin: 0; }
.bella-ui-date-short{position:relative;display:flex;align-items:center;justify-content:space-between;min-height:var(--bella-control-height);padding:0 8px 0 14px;border:1px solid var(--bella-border);border-radius:var(--bella-control-radius);background:var(--bella-surface);color:var(--bella-text);font-weight:var(--bella-control-weight)}.bella-ui-date-short:focus-within{border-color:var(--bella-accent);box-shadow:0 0 0 3px rgba(var(--bella-accent-rgb),.13)}.bella-ui-date-short__picker{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--bella-muted);cursor:pointer}.bella-ui-date-short__picker:hover,.bella-ui-date-short__picker:focus-visible{background:var(--bella-accent-soft);color:var(--bella-accent)}.bella-ui-date-short svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.bella-ui-date-short__native{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.bella-ui-field > :where(span:first-child,label),
.bella-ui-field-label,
.bella-portal :where(label) {
	font-family: var(--bella-font-body);
	font-size: var(--bella-type-label-size);
	font-weight: var(--bella-type-label-weight);
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
}
.bella-ui-field-label--with-note { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bella-ui-field-label-note { font-weight: 400; }

.bella-portal__content :where(input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="password"],input[type="url"],input[type="search"],select,textarea),
.bella-ui-root :where(input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="password"],input[type="url"],input[type="search"],select,textarea),
.bella-ui-modal :where(input:not([type]),input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="date"],input[type="time"],input[type="datetime-local"],input[type="password"],input[type="url"],input[type="search"],select,textarea),
.bella-ui-input,
.bella-ui-textarea {
	width: 100%;
	min-height: var(--bella-control-height);
	padding: 9px 12px;
	border: 1px solid var(--bella-border);
	border-radius: var(--bella-control-radius);
	background: var(--bella-surface);
	color: var(--bella-text);
	font-family: var(--bella-font-body);
	font-size: var(--bella-type-body-size);
	font-weight: var(--bella-control-weight);
	line-height: 1.35;
	box-shadow: 0 1px 2px rgba(16,24,40,.025);
}
.bella-portal__content textarea,
.bella-ui-root textarea { min-height: 92px; resize: vertical; }
.bella-portal__content :where(input,select,textarea):focus-visible,
.bella-ui-root :where(input,select,textarea):focus-visible,
.bella-ui-modal :where(input,select,textarea):focus-visible { outline: 0; border-color: var(--bella-accent); box-shadow: 0 0 0 3px rgba(var(--bella-accent-rgb),.12); }
.bella-portal :where(input[type="checkbox"],input[type="radio"]) { accent-color: var(--bella-accent); }

/* Buttons and actions: one primary language, centred by default. */
.bella-button,
.bella-portal :where(.kwispel-ui-button,.kwispel-ios-primary,.kwispel-ios-primary-pink,.kwispelplanning-action-button,.kwispelplanning-action-live) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: var(--bella-control-height);
	padding: 10px 17px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--bella-font-body);
	font-size: var(--bella-type-body-size);
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: transform .15s ease,filter .15s ease,background-color .15s ease,border-color .15s ease;
}
.bella-button--primary,
.bella-portal :where(.kwispel-ios-primary,.kwispel-ios-primary-pink,.kwispelplanning-action-live) {
	background: var(--bella-accent);
	border-color: var(--bella-accent);
	color: #fff;
	box-shadow: 0 9px 22px rgba(var(--bella-accent-rgb),var(--bella-button-shadow-alpha));
}
.bella-button--secondary,
.bella-portal .kwispel-ui-button { background: var(--bella-accent-soft); border-color: var(--bella-accent-border); color: var(--bella-accent); }
[data-step-next].bella-button--primary,
[data-bella-wizard-next].bella-button--primary { min-width:0;min-height:44px;padding:9px 17px;justify-content:center;gap:8px;font-weight:800; }
[data-step-next].bella-button--primary::after,
[data-bella-wizard-next].bella-button--primary::after { content:"›";font-size:1.25em;line-height:1;font-weight:900; }
@media(max-width:760px){[data-step-next].bella-button--primary,[data-bella-wizard-next].bella-button--primary{width:auto;min-width:0;margin-inline:0}}
.bella-button--quiet { background: var(--bella-surface); border-color: var(--bella-border); color: var(--bella-text); }
.bella-button--danger { background: var(--bella-danger); border-color: var(--bella-danger); color: #fff; }
.bella-button--small { min-height: 36px; padding: 7px 13px;  }
.bella-button:hover,
.bella-portal :where(.kwispel-ui-button,.kwispel-ios-primary,.kwispel-ios-primary-pink,.kwispelplanning-action-button,.kwispelplanning-action-live):hover { transform: translateY(-1px); filter: brightness(.98); }
.bella-ui-actions,
.bella-ui-form-actions,
.bella-chat__actions,
.bella-feed__submit,
.bella-account-card__actions,
.bella-appearance__actions,
.bella-standalone__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	width: 100%;
	margin-top: 16px;
}
.bella-ui-actions--post>form{display:flex;margin:0}.bella-ui-actions--post>form>.bella-button{min-width:190px;justify-content:center}

/* Links */
.bella-link,
.bella-link-button { color: var(--bella-accent); font-weight: 600; text-decoration: none; }
.bella-link:hover,
.bella-link-button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Tables and lists */
.bella-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface); }
.bella-table-wrap__title{margin:0;padding:18px 20px 10px;font-size:var(--bella-h3-size);line-height:var(--bella-h3-line-height)}
.bella-table,
.bella-portal__content table.bella-table { width: 100%; border-collapse: collapse; color: var(--bella-text); font-family: var(--bella-font-body); font-size: var(--bella-type-body-size); font-weight: var(--bella-type-body-weight); line-height: var(--bella-type-body-line-height); text-align: left; }
.bella-table th {
	padding: 11px 14px;
	border-bottom: 1px solid var(--bella-border);
	background: var(--bella-surface-subtle);
	color: var(--bella-muted);
	font-size: var(--bella-type-table-head-size);
	font-weight: var(--bella-type-table-head-weight);
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.bella-table-wrap--sentence .bella-table th { text-transform: none; letter-spacing: normal; }
.bella-table td { padding: 12px 14px; border-bottom: 1px solid var(--bella-border); vertical-align: middle; }
.bella-table tbody tr:last-child td { border-bottom: 0; }
.bella-table tbody tr:hover { background: var(--bella-accent-soft); }
.bella-table__meta { display: block; margin-top: 4px; color: var(--bella-muted); font-size: var(--bella-type-meta-size); line-height: 1.4; }
.bella-table__action { text-align: right; }
.bella-table--one-line th,
.bella-table--one-line td,
.bella-mail-traffic__table th,
.bella-mail-traffic__table td { white-space: nowrap; }
.bella-mail-traffic,
.bella-mail-traffic__table { width: 100%; max-width: none; }

.bella-ui-definition-list,
.bella-chat-usage-list { display: grid; margin: 0; }
.bella-ui-definition-list > div,
.bella-chat-usage-list > div,
.bella-chat-usage-list > li { display: grid; grid-template-columns: minmax(170px,.7fr) minmax(220px,1.3fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bella-border); }
.bella-ui-definition-list > div:last-child,
.bella-chat-usage-list > :last-child { border-bottom: 0; }
.bella-ui-definition-list dt,
.bella-chat-usage-list :where(dt,.label) { color: var(--bella-muted); }
.bella-ui-definition-list dd { margin: 0; }

/* Status and feedback */
.bella-badge,
.bella-ui-badge,
.bella-status-pill,
.bella-chat-availability {
	display: inline-flex;
	align-items: center;
	width: max-content;
	min-height: 26px;
	padding: 4px 9px;
	border: 1px solid var(--bella-accent-border);
	border-radius: 999px;
	background: var(--bella-accent-soft);
	color: var(--bella-accent);
	
	font-weight: var(--bella-type-status-weight);
	line-height: 1.2;
}
.bella-badge--success,.bella-ui-badge--success { border-color: var(--bella-success-border); background: var(--bella-success-soft); color: var(--bella-success); }
.bella-badge--warning,.bella-ui-badge--warning { border-color: var(--bella-warning-border); background: var(--bella-warning-soft); color: var(--bella-warning); }
.bella-badge--error,.bella-ui-badge--error { border-color: var(--bella-danger-border); background: var(--bella-danger-soft); color: var(--bella-danger); }
.bella-badge--info,.bella-ui-badge--info { border-color: var(--bella-info-border); background: var(--bella-info-soft); color: var(--bella-text); }

.bella-ui-state,
.bella-ui-feedback,
.bella-account-notice,
.kwispel-notice,
.kwispelhuiswerk-message {
	display: grid;
	gap: 4px;
	padding: 13px 15px;
	border: 1px solid var(--bella-border);
	border-radius: var(--bella-radius-md);
	background: var(--bella-surface-subtle);
	color: var(--bella-text);
}
.bella-ui-state--success { border-color: var(--bella-success-border); background: var(--bella-success-soft); }
.bella-ui-state--warning { border-color: var(--bella-warning-border); background: var(--bella-warning-soft); }
.bella-ui-state--error,.bella-ui-feedback--error { border-color: var(--bella-danger-border); background: var(--bella-danger-soft); }
.bella-ui-state--info { border-color: var(--bella-info-border); background: var(--bella-info-soft); }

.bella-portal__toast {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 100;
	max-width: min(390px,calc(100vw - 32px));
	padding: 13px 16px;
	border: 1px solid var(--bella-accent-border);
	border-radius: var(--bella-radius-md);
	background: var(--bella-surface);
	color: var(--bella-text);
	box-shadow: 0 14px 38px rgba(16,24,40,.14);
	
}
.bella-portal__toast.is-hiding { opacity: 0; transform: translateY(8px); transition: opacity .2s ease,transform .2s ease; }
.bella-portal__toast--icon{display:flex;align-items:center;gap:10px}.bella-portal__toast--icon>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bella-success-soft);color:var(--bella-success)}.bella-portal__toast--icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.bella-portal__blocking-status {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	padding: var(--bella-space-4);
	background: color-mix(in srgb,var(--bella-surface) 82%,transparent);
	backdrop-filter: blur(3px);
}
.bella-portal__blocking-status__card {
	position: relative;
	display: grid;
	gap: var(--bella-space-4);
	width: min(640px,100%);
	max-height: min(720px,calc(100vh - 32px));
	overflow: auto;
	padding: clamp(22px,3vw,32px);
	border: 1px solid var(--bella-accent-border);
	border-radius: var(--bella-radius-lg);
	background: var(--bella-surface,#fff);
	color: var(--bella-text,#101828);
	box-shadow: 0 18px 56px rgba(16,24,40,.18);
}
.bella-portal__blocking-status__card h3,
.bella-portal__blocking-status__card p { margin: 0; }
.bella-portal__blocking-status__card h3 { font-size: clamp(22px,2vw,28px); line-height: 1.2; }
.bella-portal__blocking-status-close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-grid !important;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--bella-border);
	border-radius: 50%;
	background: var(--bella-surface,#fff);
	color: var(--bella-text,#101828);
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
}
.bella-portal__blocking-status-actions { display: flex; justify-content: flex-end; padding-top: var(--bella-space-2); }
.bella-portal__blocking-status-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 140px;
	min-height: 44px;
	padding: 10px 20px;
	border: 1px solid var(--bella-accent);
	border-radius: 999px;
	background: var(--bella-accent) !important;
	color: #fff !important;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
.bella-portal__blocking-status-close:focus-visible,
.bella-portal__blocking-status-button:focus-visible { outline: 3px solid var(--bella-accent-soft); outline-offset: 2px; }
.bella-portal__billing-status { display: grid; gap: var(--bella-space-3); }
.bella-portal__billing-status-item { display: grid; gap: 5px; padding: 16px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-md); background: var(--bella-surface-subtle); }
.bella-portal__billing-status-item.is-complete { border-color: var(--bella-success-border); background: var(--bella-success-soft); }
.bella-portal__billing-status-item.is-error { border-color: var(--bella-danger-border); background: var(--bella-danger-soft); }
.bella-portal__billing-status-item p { margin: 3px 0 0; }

/* Current eco compositions: structural only. */
.bella-ui-offer-grid { display: grid; grid-template-columns: minmax(150px,.65fr) minmax(240px,1fr) minmax(240px,1fr); gap: var(--bella-space-4); align-items: center; }
.bella-ui-offer-grid--head {
	margin: 10px 0 2px;
	color: var(--bella-muted);
	
	font-weight: var(--bella-type-table-head-weight);
	line-height: 1.3;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.bella-ui-offer-grid__course { min-width: 0; font-weight: 400; }
.bella-ui-filterbar { display: grid; grid-template-columns: minmax(180px,.7fr) minmax(240px,1.3fr) auto; align-items: end; gap: 14px; }
.bella-ui-filterbar .bella-ui-form-actions { margin: 0; }

.bella-chat-settings-form,
.bella-feed-staff,
.bella-feed-setting,
.bella-feed-detail,
.bella-feed-invoice,
.bella-feed-confirm { display: grid; gap: 16px; }
.bella-chat-section-head,
.bella-feed-setting__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bella-chat-section-title,
.bella-chat-section-subtitle { margin-bottom: 4px; }
.bella-chat-usage-list { list-style: none; padding: 0; }
.bella-feed-variants,
.bella-feed__products,
.bella-feed__weights,
.bella-feed-relations,
.bella-feed-orderlist { display: grid; gap: 10px; }
.bella-feed-detail__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.bella-feed__image { display: grid; place-items: center; min-width: 0; overflow: hidden; padding: 18px; border-radius: var(--bella-radius-md); background: var(--bella-surface-subtle); }
.bella-feed__image img { display: block; width: 100%; height: 100%; max-height: 240px; object-fit: contain; }
.bella-voer-catalog .bella-feed__intro { display: grid; gap: 6px; margin-bottom: 18px; }
.bella-voer-catalog .bella-feed__intro :where(h2,p) { margin: 0; }
.bella-voer-catalog .bella-feed__product { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 18px; }
.bella-voer-catalog .bella-feed__product-card { display: grid; grid-template-columns: minmax(120px,180px) minmax(0,1fr); align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface); }
.bella-voer-catalog .bella-feed__product-card:not(:has(.bella-feed__image)) { grid-template-columns: minmax(0,1fr); }
.bella-voer-catalog .bella-feed__selling { padding: 22px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface-subtle); }
.bella-voer-catalog .bella-feed__selling h3 { margin: 0 0 12px; }
.bella-voer-catalog .bella-feed__copy { display: grid; align-content: center; gap: 10px; min-width: 0; }
.bella-voer-catalog .bella-feed__copy :where(h3,ul) { margin: 0; }
.bella-voer-catalog .bella-feed__number { display: none; }
.bella-voer-catalog .bella-feed__brand { color: var(--bella-accent); font-weight: 600; }
.bella-voer-catalog .bella-feed__benefits { display: grid; gap: 6px; padding-left: 20px; }
.bella-voer-catalog .bella-feed__variant-list { display: flex; flex-wrap: wrap; gap: 8px; }
.bella-voer-catalog .bella-feed__variant-list span { padding: 7px 10px; border-radius: var(--bella-control-radius); background: var(--bella-surface-subtle); }
.bella-voer-catalog .bella-feed__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bella-voer-catalog .bella-feed__from { display: grid; margin-right: auto; }
.bella-voer-catalog .bella-feed__from span { color: var(--bella-muted); font-weight: 400; }
.bella-voer-catalog .bella-feed__information-status { flex: 0 0 100%; margin: 0; color: var(--bella-muted); font-size: .9rem; }
.bella-feed-offer-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }

@media (max-width: 780px) {
	.bella-voer-catalog .bella-feed__product { grid-template-columns: minmax(0,1fr); gap: 12px; }
	.bella-voer-catalog .bella-feed__product-card { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 16px; }
	.bella-voer-catalog .bella-feed__product-card:not(:has(.bella-feed__image)) { grid-template-columns: minmax(0,1fr); }
	.bella-voer-catalog .bella-feed__selling { padding: 16px; }
	.bella-voer-catalog .bella-feed__image { min-height: 180px; }
	.bella-voer-catalog .bella-feed__image img { max-height: 220px; }
	.bella-voer-catalog .bella-feed__actions { align-items: center; min-width: 0; }
	.bella-feed-offer-fields { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 520px) {
	.bella-voer-catalog .bella-feed__actions { grid-template-columns: minmax(0,1fr); }
	.bella-voer-catalog .bella-feed__actions .bella-button { width: 100%; }
}


/* Central list/detail patterns used by raw eco markup. */
.bella-feed-admin { display: grid; gap: 18px; }
.bella-feed-admin > a { width: max-content; color: var(--bella-accent); text-decoration: none; }
.bella-feed-orderlist a {
	display: grid;
	grid-template-columns: minmax(140px,.55fr) minmax(260px,1.3fr) minmax(140px,.55fr);
	align-items: center;
	gap: 16px;
	padding: 12px 14px;
	border: 1px solid var(--bella-border);
	border-radius: var(--bella-radius-md);
	background: var(--bella-surface);
	color: var(--bella-text);
	
	font-weight: var(--bella-type-body-weight);
	text-decoration: none;
}
.bella-feed-orderlist a:hover { border-color: var(--bella-accent-border); background: var(--bella-accent-soft); }
.bella-feed-orderlist :where(strong,em) { font-weight: 400; font-style: normal; }
.bella-feed-orderlist em { color: var(--bella-accent); text-align: right; }
.bella-feed-detail__grid > div { display: grid; grid-template-columns: auto minmax(0,auto) minmax(0,1fr); align-items: baseline; gap: 4px; }
.bella-feed-detail__grid > div small { min-width: 76px; }
.bella-feed-detail__grid > div strong { font-weight: 500; }
.bella-feed-confirm { padding-top: 4px; border-top: 1px solid var(--bella-border); }
.bella-feed-confirm .bella-button { justify-self: center; width: auto; min-width: min(300px,100%); }
.bella-feed-setting > label { display: grid; gap: 7px; }
.bella-feed-setting__top > label { display: grid; grid-template-columns: auto minmax(220px,1fr); align-items: center; gap: 10px; flex: 1; }
.bella-feed-variant { display: grid; grid-template-columns: minmax(170px,.45fr) minmax(260px,1fr) auto; align-items: end; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bella-border); }
.bella-feed-variant > label { display: grid; gap: 7px; }
.bella-feed-variants > .bella-button { justify-self: center; }
.bella-table td strong { font-weight: var(--bella-type-body-weight); }

/* Metrics are always centred, regardless of the eco supplying the numbers. */
.bella-mail-metric { display: grid; place-items: center; min-height: 112px; text-align: center; text-decoration: none; }
.bella-mail-metric .bella-ui-eyebrow { margin-bottom: 6px; text-align: center; }
.bella-mail-metric h2 { margin: 0; text-align: center; }

/* Native configuration controls belong to the central design system too. */
.bella-appearance input[type="range"] { width: 100%; accent-color: var(--bella-accent); }
.bella-appearance input[type="color"] { width: 48px; height: 38px; padding: 3px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-sm); background: var(--bella-surface); }
.bella-appearance__section-head { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.8fr); align-items: end; gap: 20px; }
.bella-appearance__section-head > div { display: grid; gap: 3px; }
.bella-appearance__section-head h2 { margin: 0; }
.bella-appearance__section-head p { margin: 0; }
.bella-appearance__sample-card { display: grid; gap: 5px; padding: 14px 16px; }
.bella-appearance__sample-card strong { font-weight: 500; }
.bella-appearance__sample-actions { justify-content: flex-start; }
.bella-appearance__preview { min-height: 230px; align-content: start; }
.bella-appearance__type-preview { background: var(--bella-surface-subtle); box-shadow: none; }

/* Public token pages use the Portaal shell only: no theme/admin chrome or legacy lesson tabs. */
body.bella-public-page { margin: 0; background: var(--bella-surface, #fff); }
body.bella-public-page #wpadminbar { display: none; }
.bella-public-page .kwispel-early-bird-access > :where(.kwispel-footer,.kwispelhuiswerk-footer,.kwispel-footer-shell) { display: none; }
.bella-public-page .kwispel-early-bird-access .bella-lesson-flow__tabs { display: none; }
.bella-public-page .kwispel-early-bird-access .bella-lesson-flow__head { margin-bottom: 16px; }
.bella-public-page .kwispel-early-bird-access .bella-lesson-flow__actions { display: flex; justify-content: center; gap: 10px; }
.bella-public-page .kwispel-early-bird-access .kwispel-homework-item { border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface); box-shadow: 0 10px 30px rgba(var(--bella-accent-rgb),calc(var(--bella-shadow-alpha) * .7)); padding: 24px; }

/* Appearance screens */
.bella-appearance__tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:6px; border:1px solid var(--bella-border); border-radius:var(--bella-radius-lg); background:var(--bella-surface); }
.bella-appearance__tabs a { padding:10px 14px; border-radius:var(--bella-radius-md); text-decoration:none; }
.bella-appearance__tabs a.is-current { background:var(--bella-accent-soft); color:var(--bella-accent); font-weight:600; }

.bella-appearance { width: 100%; }
.bella-appearance__workspace { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; }
.bella-appearance__settings,
.bella-appearance__form { display: grid; gap: 18px; }
.bella-appearance__controls { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; }
.bella-appearance__color-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; align-items: center; }
.bella-appearance__preview,
.bella-appearance__type-preview { display: grid; gap: 10px; padding: 16px; }
.bella-appearance__menu-preview { display: grid; gap: 3px; max-width: 260px; }
.bella-appearance__control-examples { display: grid; gap: 10px; margin-top: 12px; }
.bella-appearance__sample-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Home / account / student compositions, still using the same primitives. */
.bella-home,
.bella-account,
.bella-course,
.bella-training { width: 100%; max-width: var(--bella-content-default); margin: 0 auto; }
.bella-home__head,
.bella-account__head { margin-bottom: 24px; }
.bella-home__grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(300px,.85fr); gap: 24px; align-items: start; }
.bella-home__continue,
.bella-home__important { padding: 20px; border: 1px solid var(--bella-accent-border); border-radius: var(--bella-radius-lg); background: var(--bella-accent-soft); }
.bella-home__continue { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.bella-home__continue-actions { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.bella-home__important { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 14px; align-items: center; margin-bottom: 16px; }
.bella-home__important-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bella-accent); color: #fff; }
.bella-course-cards,
.bella-course-list,
.bella-family-list,
.bella-invoice-list { display: grid; gap: 12px; }
.bella-course-card,
.bella-course-row,
.bella-family-row,
.bella-invoice-row { padding: 16px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-md); background: var(--bella-surface); }
.bella-section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.bella-section-head h2,
.bella-section-head span,
.bella-course__head p,
.bella-course__next :where(strong,small),
.bella-course-card :where(strong,small),
.bella-training__intro :where(h2,h3,p,span) { display: block; margin: 0; }
.bella-section-head > div > span,
.bella-training__intro > div > span,
.bella-course__next > div > span { color: var(--bella-accent); font-size: var(--bella-type-context-size); font-weight: var(--bella-type-context-weight); }
.bella-course-card { display: grid; grid-template-columns: 40px minmax(0,1fr) auto; align-items: center; gap: 12px; color: var(--bella-text); text-decoration: none; }
.bella-course-card__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-course-card__identity { display: flex; flex-wrap: wrap; gap: 3px; align-items: baseline; }
.bella-course-card__trainer { display:block; margin-top:4px; }
.bella-course-card small { color: var(--bella-muted); }
.bella-training { display: grid; gap: 14px; margin-top: 24px; }
.bella-training__intro { display: block; }
.bella-training__intro h3 { margin: 4px 0 0; }
.bella-training__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-training__topics { display: flex; flex-wrap: wrap; gap: 9px; }
.bella-training-topic { display: inline-flex; width: auto; min-height: 38px; padding: 8px 14px; align-items: center; gap: 8px; border: 1px solid color-mix(in srgb,var(--bella-accent) 28%,var(--bella-border)); border-radius: 999px; background: var(--bella-accent-soft); color: var(--bella-accent); font-weight: 700; text-decoration: none; }
.bella-training-topic:is(:hover,:focus-visible) { border-color: var(--bella-accent); background: var(--bella-accent); color: var(--bella-on-accent); }
.bella-training-topic small { color: var(--bella-muted); }
.bella-course__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bella-space-4); }
.bella-course__head :where(h2,p) { margin: 0; }
.bella-course__home { color: var(--bella-accent); font-weight: 600; text-decoration: none; }
.bella-course__progress { height: var(--bella-space-2); margin: 0; overflow: hidden; border-radius: 999px; background: var(--bella-surface-subtle); }
.bella-course__progress > span { display: block; height: 100%; border-radius: inherit; background: var(--bella-accent); }
.bella-course__next { flex-wrap: wrap; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 24px; padding: 18px; border: 1px solid var(--bella-accent-border); border-radius: var(--bella-radius-lg); background: var(--bella-accent-soft); }
.bella-course__next > div { display: grid; gap: 3px; }
.bella-course__next small { color: var(--bella-muted); }
.bella-course__next--compact { margin: 0; padding: var(--bella-space-4); border: 0; border-radius: var(--bella-radius-md); background: var(--bella-surface-subtle); }
/* Embedded resume shares the practice card, without a second surface. */
.bella-course__next--embedded { grid-column: 2/-1; margin: 0; padding: var(--bella-space-4) 0 0; border: 0; border-top: 1px solid var(--bella-border); border-radius: 0; background: transparent; }
@media (max-width: 720px) {
	.bella-course__next--embedded { grid-column: 1/-1; }
}
.bella-course__overview { align-items: start; }
.bella-course-preview { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1fr); gap: var(--bella-space-6); align-items: start; }
.bella-course-preview__identity,.bella-course-preview__topics { display: grid; gap: var(--bella-space-3); }
.bella-course-preview :where(h2,h3,p,ul) { margin: 0; }
.bella-course-preview__topics ul { display: flex; flex-wrap: wrap; gap: var(--bella-space-2); padding: 0; list-style: none; }
.bella-course-preview__topics li { padding: var(--bella-space-2) var(--bella-space-3); border-radius: var(--bella-radius-sm); background: var(--bella-surface-subtle); }
.bella-course-topics summary { cursor: pointer; color: var(--bella-accent); font-weight: var(--bella-type-section-title-weight); padding-block: var(--bella-space-2); }
.bella-course-topics .bella-training__topics { margin-top: var(--bella-space-2); }
@media (max-width: 900px) {
	.bella-course-preview { grid-template-columns: minmax(0,1fr); }
}

.bella-course__training,
.bella-course__lessons { margin-bottom: 24px; }
.bella-course-row { display: grid; gap: 14px; align-items: center; grid-template-columns: 36px minmax(0,1fr) auto; color: var(--bella-text); text-decoration: none; }
.bella-course-row__state { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-course-row__copy { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bella-course-row__copy small,
.bella-course-row__action { color: var(--bella-muted); font-size: var(--bella-type-meta-size); }
.bella-home__puppy > .bella-ui-surface { grid-template-columns: 1fr; align-items: stretch; }
.bella-home--student-dashboard { display: grid; gap: 18px; }
.bella-home--student-dashboard :where(h2,h3,p) { margin-top: 0; }
.bella-home--student-dashboard .bella-home__continue--practice { display: grid; grid-template-columns: 72px minmax(0,1fr) 230px; min-height: 195px; margin: 0; padding: 28px; align-items: center; background: var(--bella-surface); box-shadow: 0 8px 28px rgba(var(--bella-accent-rgb),calc(var(--bella-shadow-alpha) * .65)); }
.bella-home__continue-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bella-accent-soft); color: var(--bella-accent); font-size: 28px; }
.bella-home__continue-icon svg,.bella-home__panel-title svg,.bella-course-card__icon svg,.bella-home__lesson-line svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bella-home__continue-icon svg { width: 32px; height: 32px; }
.bella-home__continue-copy { min-width: 0; }
.bella-home__continue-copy h2 { margin: 5px 0 12px; font-size: clamp(1.55rem,2.4vw,2rem); }
.bella-home__lesson-line { display: flex; flex-wrap: wrap; gap: 9px 20px; margin: 0; color: var(--bella-text); }
.bella-home__lesson-line span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.bella-home__lesson-line svg { width: 18px; height: 18px; }
.bella-home--student-dashboard .bella-home__continue-actions { justify-self: stretch; }
.bella-home--student-dashboard .bella-home__continue-actions .bella-button { width: 100%; justify-content: center; border-radius: 999px; }
.bella-home__dashboard-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; align-items: start; }
.bella-home__dashboard-column { display: grid; gap: 18px; }
.bella-home__panel { padding: 18px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-md); background: var(--bella-surface); box-shadow: 0 6px 22px rgba(16,24,40,.035); }
.bella-home__panel-title { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bella-home__panel-title > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-home__panel-title svg { width: 19px; height: 19px; }
.bella-home__panel-title h2 { margin: 0; font-size: var(--bella-type-section-title-size); }
.bella-home--student-dashboard .bella-course-card { grid-template-columns: 48px minmax(0,1fr) 20px; padding: 16px 18px 18px; }
.bella-home--student-dashboard .bella-course-card__icon { width: 44px; height: 44px; }
.bella-home--student-dashboard .bella-course-card__icon svg { width: 24px; height: 24px; }
.bella-home--student-dashboard .bella-home__courses { min-height: 262px; box-sizing: border-box; }
.bella-course-card__progress-label { grid-column: 1/-1; padding-top: 2px; font-size: var(--bella-type-meta-size); }
.bella-course-card__progress { grid-column: 1/-1; display: block; height: 7px; overflow: hidden; border-radius: 999px; background: var(--bella-surface-subtle); }
.bella-course-card__progress i { display: block; width: var(--bella-home-progress); height: 100%; border-radius: inherit; background: var(--bella-accent); }
.bella-home--student-dashboard .bella-training { width: auto; max-width: none; margin: 0; }
.bella-home--student-dashboard .bella-training > p,.bella-home__weekly > p { margin-bottom: 16px; color: var(--bella-muted); }
.bella-home--student-dashboard .bella-training__topics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.bella-home--student-dashboard .bella-training-topic { width: 100%; min-height: 52px; justify-content: flex-start; border-radius: var(--bella-radius-sm); background: var(--bella-surface); color: var(--bella-text); font-weight: 600; }
.bella-home--student-dashboard .bella-training-topic i { color: var(--bella-accent); font-style: normal; }
.bella-home--student-dashboard .bella-home__puppy { min-height: 342px; box-sizing: border-box; }
.bella-home__puppy > .bella-puppycoach-home { padding: 0; }
.bella-puppycoach-home { position: relative; }
.bella-puppycoach-home__tag { position: absolute; top: -48px; right: 0; padding: 5px 11px; border-radius: 999px; background: var(--bella-accent-soft); font-size: var(--bella-type-meta-size); }
.bella-puppycoach-home h3 { margin: 0 0 5px; }
.bella-puppycoach-home > p { margin-bottom: 16px; }
.bella-puppycoach-home__groups { margin-bottom: var(--bella-space-2); }
.bella-puppycoach-home__groups .bella-ui-actions,.bella-puppycoach-home__rhythm .bella-ui-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--bella-space-2); margin-top: 0; }
.bella-puppycoach-home :is(.bella-ui-form-actions,.bella-button) { width: 100%; min-width: 0; margin-top: 0; }
.bella-puppycoach-home :is(.bella-puppycoach-home__groups,.bella-puppycoach-home__rhythm) .bella-button { display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;justify-content:start;gap:10px;min-height:62px;padding:9px 11px;border-color:color-mix(in srgb,var(--bella-accent) 22%,var(--bella-border));border-radius:var(--bella-radius-sm);background:color-mix(in srgb,var(--bella-accent) 6%,var(--bella-surface));color:var(--bella-text);text-align:left;white-space:normal;box-shadow:none; }
.bella-puppycoach-home .bella-button>span:last-child{display:grid;gap:2px;min-width:0}.bella-puppycoach-home .bella-button strong{overflow:hidden;font-size:var(--kw-type-compact-meta-size,var(--bella-type-meta-size));line-height:1.25;text-overflow:ellipsis}.bella-puppycoach-home .bella-button small{color:var(--bella-muted);font-size:11px;font-weight:500}.bella-puppycoach-action__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:color-mix(in srgb,var(--bella-accent) 13%,var(--bella-surface));color:var(--bella-accent);font-size:19px;line-height:1}
.bella-puppycoach-home__rhythm { margin-bottom: var(--bella-space-3); }
@media (max-width: 1200px) {
	.bella-puppycoach-home__groups .bella-ui-actions,.bella-puppycoach-home__rhythm .bella-ui-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
.bella-puppycoach-home > .bella-button { min-height: 34px; padding: 5px 12px; border-radius: 999px; }
.bella-home__weekly-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.bella-home--student-dashboard .bella-home__weekly { height: 188px; box-sizing: border-box; }
.bella-home--student-dashboard .bella-home__weekly > p { margin-bottom: 7px; }
.bella-home__weekly-list a { display: grid; grid-template-columns: 32px minmax(0,1fr) 16px; align-items: center; gap: 8px; min-height: 44px; padding: 5px 8px; border-bottom: 1px solid var(--bella-border); color: var(--bella-text); text-decoration: none; }
.bella-home__weekly-list a > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-home__weekly-list a i { color: var(--bella-text); font-style: normal; }
.bella-family-row,
.bella-invoice-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; }

/* Course navigation */
.bella-course-nav { margin: 2px 0; }
.bella-course-nav summary { display: grid; grid-template-columns: 18px minmax(0,1fr) 18px; align-items: center; gap: 7px; min-height: 38px; padding: 7px 8px; border-radius: var(--bella-radius-sm); color: var(--bella-text); font-weight: var(--bella-menu-weight); cursor: pointer; list-style: none; }
.bella-course-nav__identity { display: grid; gap: 3px; min-width: 0; }
.bella-course-nav__meta { display: grid; gap: 3px; margin: 0 0 8px 33px; color: var(--bella-muted); font-size: var(--bella-type-meta-size); }
.bella-course-nav__meta small { font-size: inherit; }
.bella-course-nav__completion { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 10px; margin: 5px 8px 14px; color: var(--bella-muted); }
.bella-course-nav__completion small { grid-column: 1 / -1; }
.bella-course-nav__completion > span { display:block; align-self: center; height: 7px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb,var(--bella-accent) 10%,var(--bella-surface)); }
.bella-course-nav__completion i { display: block; width: var(--bella-course-nav-progress,0%); height: 100%; border-radius: inherit; background: var(--bella-accent); }
.bella-course-nav__completion b { color: var(--bella-muted); font-size: var(--bella-type-meta-size); }
.bella-course-nav summary::-webkit-details-marker { display: none; }
.bella-course-nav summary:is(:hover,:focus-visible) { color: var(--bella-accent); }
.bella-course-nav__lessons { margin: 1px 0 var(--bella-space-2); padding-left: var(--bella-space-2); }
.bella-lesson-link { display: grid; grid-template-columns: 18px minmax(0,1fr) 16px; align-items: center; gap: 6px; width:100%; min-height:40px; padding:8px 10px; border:0; border-radius:var(--bella-radius-sm); background:transparent; color:var(--bella-muted); font:inherit; text-align:left; text-decoration:none; cursor:pointer; }
.bella-lesson-link:is(:hover,:focus-visible,.is-current) { color:var(--bella-accent); background:var(--bella-accent-soft); }
.bella-lesson-link.is-current { box-shadow:inset 3px 0 0 var(--bella-accent); }
.bella-lesson-link>i { font-style:normal; color:var(--bella-muted); }
.bella-lesson-link.is-current>i { transform:rotate(180deg); }
.bella-lesson-link.is-locked { opacity:.75; }
.bella-lesson-link.is-current strong,.bella-module-links a.is-current { font-weight: var(--bella-type-section-title-weight); color: var(--bella-accent); }
.bella-lesson-link strong { font-size:var(--kw-type-compact-meta-size,var(--bella-type-meta-size)); font-weight:var(--bella-menu-weight); }
.bella-module-links { display:grid; gap:2px; margin:0 0 var(--bella-space-2) 22px; padding:4px 0; border-radius:var(--bella-radius-sm); background:color-mix(in srgb,var(--bella-accent) 5%,transparent); }
.bella-module-links a { display:flex; align-items:center; gap:12px; min-height:34px; padding:7px 12px; border-radius:var(--bella-radius-sm); color: var(--bella-muted); font-size: var(--kw-type-compact-meta-size,var(--bella-type-meta-size)); line-height: var(--bella-type-body-line-height); text-decoration: none; overflow-wrap: anywhere; }
.bella-module-links a::before { content:""; flex:0 0 11px; width:11px; height:11px; border:1px solid currentColor; border-radius:50%; }
.bella-module-links a:is(:hover,:focus-visible,.is-current) { background:var(--bella-accent-soft); color:var(--bella-accent); font-weight:var(--bella-menu-weight); }
.bella-module-links a.is-current::before { background:currentColor; }
.bella-learning-nav{display:grid;gap:18px;padding:4px 10px}.bella-learning-nav>h2{margin:0;font-size:var(--kw-type-h2-size,var(--bella-type-section-title-size));line-height:var(--kw-type-heading-line-height,1.2)}.bella-learning-nav .bella-course-nav__completion{margin:0 0 8px}.bella-learning-nav__section{display:grid;gap:8px;padding-top:18px;border-top:1px solid var(--bella-border)}.bella-learning-nav__section h3{display:flex;align-items:center;gap:12px;margin:0;padding:0 4px;font-size:var(--bella-type-body-size);color:var(--bella-heading)}.bella-learning-nav__section h3 svg{width:22px;height:22px;fill:none;stroke:var(--bella-muted);stroke-width:1.8}.bella-learning-nav .bella-course-nav__lessons{display:grid;gap:4px;margin:0;padding:0}

/* Standalone/public eco page: same tokens, no theme design language. */
.bella-public-page { margin: 0; background: var(--bella-surface); color: var(--bella-text); }
.bella-public-shell { min-height: 100vh; padding: clamp(18px,3vw,42px); }
.bella-public-shell__content { width: min(var(--bella-content-default),100%); margin: 0 auto; }
.bella-standalone { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: var(--bella-surface-subtle); color: var(--bella-text); }
.bella-standalone__surface { width: min(620px,100%); padding: 28px; }
.bella-standalone__message { color: var(--bella-muted); }
.bella-standalone__details { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; }
.bella-standalone__details dt { color: var(--bella-muted); }
.bella-standalone__details dd { margin: 0; }

/* Legacy lesson markup is only mapped into the central design system. */
.bella-portal :where(.kwispelhuiswerk,.kwispel-premium-homework,.kwispel-content),
.bella-public-shell :where(.kwispelhuiswerk,.kwispel-premium-homework,.kwispel-content) { width: 100%; max-width: var(--bella-content-default); margin-inline: auto; min-width: 0; overflow-wrap: anywhere; color: var(--bella-text); }
.bella-portal:has(.bella-lesson-flow) :where(.kwispelhuiswerk,.kwispel-premium-homework,.kwispel-content) { max-width: 1360px; }
/* Canonical lesson media: provider dimensions never determine layout width. */
:is(.bella-portal,.bella-public-shell) .kwispel-video-embed { position: relative; width: 100%; max-width: var(--bella-video-max-width); min-width: 0; aspect-ratio: var(--bella-video-ratio,16/9); margin-block: var(--bella-space-4); }
:is(.bella-portal,.bella-public-shell) .kwispel-video-embed > iframe { position: absolute; inset: 0; display: block; width: 100%; max-width: 100%; height: 100%; border: 0; }
:is(.bella-portal,.bella-public-shell) .kwispel-content :where(img,video) { max-width: 100%; height: auto; }
.bella-portal .kwispel-lesson-breadcrumb-text { display: none; }
.bella-learning-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:12px;min-height:44px;margin:18px 8px 28px;color:var(--bella-muted);font-size:var(--bella-type-meta-size)}.bella-learning-breadcrumb a{display:inline-flex;align-items:center;gap:8px;color:var(--bella-muted);text-decoration:none}.bella-learning-breadcrumb a:is(:hover,:focus-visible){color:var(--bella-accent)}.bella-learning-breadcrumb svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}.bella-learning-breadcrumb i{font-style:normal}.bella-learning-breadcrumb strong{color:var(--bella-muted);font-weight:600}
.bella-portal .kwispel-lesson-hero,
.bella-public-shell .kwispel-lesson-hero { margin-bottom: 22px; }
.bella-portal .kwispel-lesson-hero h1,
.bella-public-shell .kwispel-lesson-hero h1 {  }
.bella-portal :where(.kwispel-lesson-section,.kwispel-homework-item,.kwispel-theory-feature-card),
.bella-public-shell :where(.kwispel-lesson-section,.kwispel-homework-item,.kwispel-theory-feature-card) { margin-bottom: 16px; padding: 20px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface); }
.bella-portal .kwispel-homework-item:has(.bella-lesson-flow) { margin: 0; padding: 0; border: 0; background: transparent; }
.bella-portal .kwispel-theory-card-grid,
.bella-public-shell .kwispel-theory-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }

/* Canonical lesson flow used unchanged by students and authorised previews. */
.bella-lesson-flow { display: grid; gap: 0; min-width: 0; padding: 30px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface); box-shadow: var(--bella-shadow); }
.bella-portal:has(.bella-lesson-flow) .kwispel-lesson-hero { display: none; }
.bella-lesson-flow__head { display: none; }
.bella-lesson-flow__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--bella-muted); }
.bella-lesson-flow__progress { height: 8px; overflow: hidden; border-radius: 999px; background: var(--bella-surface-subtle); }
.bella-lesson-flow__progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--bella-accent); transition: width .2s ease; }
.bella-lesson-flow__tabs { display: none; }
.bella-lesson-flow__tab { appearance: none; flex: 0 0 auto; min-height: var(--bella-control-height); padding: 0 14px; border: 1px solid var(--bella-border); border-radius: var(--bella-control-radius); background: var(--bella-surface); color: var(--bella-muted); font: inherit; cursor: pointer; }
.bella-lesson-flow__tab:is(.is-active,:hover,:focus-visible) { border-color: var(--bella-accent-border); background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-lesson-flow__tab:disabled { cursor: not-allowed; opacity: .58; }
.bella-lesson-flow__panels,.bella-lesson-flow__panel { min-width: 0; }
.bella-lesson-flow__panel[hidden] { display: none; }
.bella-lesson-flow__content { display: grid; grid-template-columns: 1fr; gap: 14px 42px; min-width:0; align-items:start; align-content:start; }
.bella-lesson-flow__copy { min-width:0; }
.bella-lesson-flow__content:has(.bella-lesson-flow__media:is(.is-intro,.has-media)) { grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr); }
.bella-lesson-flow__media { display:none; min-width:0; width:100%; border-radius:var(--bella-radius-md); overflow:hidden; }
.bella-lesson-flow__media.is-intro { display:block; aspect-ratio:4/3; background:url('../images/splinter-dashboard.webp') 54% 48% / cover no-repeat; }
.bella-lesson-flow__media.has-media { display:block; aspect-ratio:auto; background:none; }
.bella-lesson-flow__media :where(figure,img,video) { display:block; width:100%; margin:0; }
.bella-lesson-flow__media .kwispel-video-embed { max-width:100%; margin:0; }

.bella-lesson-flow__title { margin: 0 0 8px; font-size:var(--kw-type-h2-size,var(--bella-type-section-title-size));line-height:var(--kw-type-heading-line-height,1.2); }
.bella-lesson-flow__content :where(p,li) { color: var(--bella-muted); font-size:var(--kw-type-text-size,var(--bella-type-body-size)); line-height:var(--bella-type-body-line-height); }
.bella-lesson-flow__actions { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--bella-border); }
.bella-lesson-flow__actions :is(.bella-button,.kwispel-complete-state) { border-radius:var(--bella-radius-sm); }
.bella-lesson-flow__actions [data-kw-homework-prev] { margin-right:auto; background:var(--bella-surface-subtle); }
.bella-lesson-flow__actions [data-kw-homework-next],.bella-lesson-flow__actions .kwispel-complete-form { margin-left:auto; }
.bella-lesson-flow__actions [data-kw-homework-prev]::before { content:"←"; }
.bella-lesson-flow__actions [data-kw-homework-next]::after { content:"→"; }
.bella-lesson-flow__complete { display:contents; }
.bella-lesson-flow__actions > [hidden] { display: none; }
.bella-lesson-flow__actions .kwispel-complete-state { margin-left:auto; }
.bella-lesson-flow__next-title { flex-basis: 100%; text-align: right; color: var(--bella-muted); overflow-wrap: anywhere; }
.bella-lesson-flow__complete[hidden] { display: none; }
.bella-question { display: grid; gap: 14px; }
.bella-question__text { margin: 0; }
.bella-question__options { display: grid; gap: 10px; }
.bella-question__options label { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-md); background: var(--bella-surface); cursor: pointer; }
.bella-question__options label:has(input:checked) { border-color: var(--bella-accent-border); background: var(--bella-accent-soft); }
.bella-question__feedback { padding: 14px; border-radius: var(--bella-radius-md); background: var(--bella-surface-subtle); }
.bella-question__feedback[hidden] { display: none; }
@media (max-width: 620px) {
 .bella-lesson-flow { padding: 17px; }
 .bella-lesson-flow__content,.bella-lesson-flow__content:has(.bella-lesson-flow__media:is(.is-intro,.has-media)) { grid-template-columns:1fr; min-height:0; gap:13px; }
 .bella-lesson-flow__media { max-width:100%; }
 .bella-lesson-flow__actions { grid-column: 1; }
 .bella-lesson-flow__actions > :where(button,.bella-button), .bella-lesson-flow__complete > .bella-button { min-width:0; padding-inline:var(--bella-space-3); }
 .bella-lesson-flow__actions .kwispel-complete-state { flex-basis: 100%; }
 .bella-lesson-flow__next-title { text-align: left; }
}

/* Dialogs, sheets and onboarding */
.bella-dialog[hidden],
.bella-tour[hidden],
.bella-mobile-more[hidden] { display: none; }
.bella-dialog,
.bella-tour { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.bella-dialog__backdrop,
.bella-tour__shade { position: absolute; inset: 0; border: 0; background: rgba(16,24,40,.45); }
.bella-dialog__panel,
.bella-tour__modal { position: relative; z-index: 1; width: min(620px,100%); max-height: calc(100vh - 40px); overflow: auto; padding: 22px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface); box-shadow: 0 24px 70px rgba(16,24,40,.22); }
.bella-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.bella-dialog__header :is(h2,h3) { margin: 0; }
.bella-dialog__close { flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--bella-border); border-radius: 50%; background: var(--bella-surface); cursor: pointer; }
.bella-dialog__body { margin-top: 12px; }
.bella-dialog__actions,
.bella-tour__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media(max-width:780px){.bella-dialog{padding:0;align-items:end}.bella-dialog__panel{width:100%;max-height:94vh;border-radius:var(--bella-radius-lg) var(--bella-radius-lg) 0 0;border-bottom:0}}
.bella-tour__form,
.bella-tour__family,
.bella-tour__templates,
.bella-tour__access-grid { display: grid; gap: 12px; }

/* Component reference */
.bella-components { max-width: 1080px; }
.bella-components__section { display: grid; gap: 14px; padding: 24px 0; border-top: 1px solid var(--bella-border); }
.bella-components__section:first-of-type { border-top: 0; }
.bella-components__section > header { display: grid; grid-template-columns: minmax(0,.8fr) minmax(280px,.9fr); gap: 24px; align-items: end; }
.bella-components__demo { display: grid; gap: 16px; padding: 20px; }
.bella-components__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bella-components__grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.bella-components__states { display: grid; gap: 10px; }
.bella-components__form-demo { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.bella-components__form-demo .bella-ui-field--wide { grid-column: 1 / -1; }

/* Responsive */
@media (max-width: 1100px) {
	.bella-portal { grid-template-columns: 196px minmax(0,1fr); --bella-sidebar: 196px; }
	.bella-portal__page { padding-left: 20px; }
	.bella-portal__content { padding-inline: 14px; }
	.bella-ui-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 900px) {
	html.bella-menu-lock,html.bella-more-lock { overflow: hidden; }
	.bella-portal { --bella-safe-top: env(safe-area-inset-top, 0px); --bella-safe-bottom: env(safe-area-inset-bottom, 0px); --bella-safe-bottom-max: env(safe-area-max-inset-bottom, 0px); display: block; min-height: 100vh; min-height: 100dvh; margin: 0; padding-bottom: 0; }
	.bella-portal .bella-portal__page { padding: 0; }
	.bella-portal__content { padding: calc(76px + var(--bella-safe-top)) var(--bella-space-3) calc(80px + var(--bella-safe-bottom)); }
	.bella-portal__sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px,86vw); height: 100vh; height: 100dvh; padding-top: var(--bella-safe-top); transform: translateX(-105%); transition: transform .2s ease; border-radius: 0 var(--bella-radius-lg) var(--bella-radius-lg) 0; }
	.bella-portal.is-menu-open .bella-portal__sidebar { transform: translateX(0); }
	.bella-portal__scrim { position: fixed; inset: 0; z-index: 25; width: 100%; height: 100%; border: 0; background: rgba(16,24,40,.35); }
	.bella-portal.is-menu-open .bella-portal__scrim { display: block; }
	.bella-portal__desktop-collapse,.bella-portal__desktop-reopen { display: none; }
	.bella-portal__close { display: inline-grid; }
	.bella-portal__mobile-header { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: calc(72px + var(--bella-safe-top)); padding: calc(8px + var(--bella-safe-top)) var(--bella-space-3) 8px; border: 0; background: var(--bella-surface); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
	.bella-portal__menu-button { display: inline-grid; }
	.bella-portal__menu-button { border-color:var(--bella-accent);color:var(--bella-accent);box-shadow:0 4px 14px color-mix(in srgb,var(--bella-accent) 22%,transparent); }
	
	.bella-portal__mobile-brand { min-width:0;max-width:calc(100% - 66px);overflow:hidden;transition:opacity .18s ease,visibility .18s ease; }
	.bella-portal__mobile-brand .kw-brand { min-width:0;gap:8px; }
	.bella-portal__mobile-brand .kw-brand__paw { flex:0 0 36px;width:36px;height:36px; }
	.bella-portal__mobile-brand .kw-brand__title { display:block;overflow:hidden;font-size:clamp(17px,5.2vw,22px);text-overflow:ellipsis;white-space:nowrap; }
	.bella-portal__bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: calc(64px + var(--bella-safe-bottom)); padding-bottom: var(--bella-safe-bottom); border-top: 1px solid var(--bella-border); background: var(--bella-surface); }
	.bella-portal__bottom-nav :where(a,button) { display: grid; place-items: center; gap: 2px; padding: 7px 5px; border: 0; background: transparent; color: var(--bella-muted); text-decoration: none; }
	.bella-portal__bottom-nav .is-current { color: var(--bella-accent); }
	.bella-mobile-more { position: fixed; inset: 0; z-index: 90; display: block; }
	.bella-mobile-more__scrim { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(16,24,40,.38); }
	.bella-mobile-more__sheet { position: absolute; inset: auto 0 0; max-height: 80vh; max-height: 80dvh; overflow: auto; padding: 12px 18px calc(24px + var(--bella-safe-bottom-max)); border-radius: var(--bella-radius-lg) var(--bella-radius-lg) 0 0; background: var(--bella-surface); }
	.bella-mobile-more__sheet header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
	.bella-mobile-more__sheet header h2 { margin: 0; }
	.bella-mobile-more__sheet header button { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--bella-border); border-radius: 50%; background: var(--bella-surface); color: var(--bella-text); font: inherit; cursor: pointer; }
	.bella-mobile-more__sheet nav { display: grid; gap: 8px; }
	.bella-mobile-more__sheet nav a { display: grid; grid-template-columns: 28px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 12px 13px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-md); background: var(--bella-surface); color: var(--bella-text); text-decoration: none; }
	.bella-mobile-more__sheet nav a > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
	.bella-mobile-more__sheet nav a :where(strong,small) { display: block; }
	.bella-mobile-more__sheet nav a small { color: var(--bella-muted); font-size: var(--bella-type-meta-size); }
	.bella-mobile-more__sheet nav a i { color: var(--bella-muted); font-style: normal; }
	.bella-mobile-more__handle { width: 42px; height: 4px; margin: 0 auto 12px; border-radius: 99px; background: var(--bella-border); }
	.bella-ui-page-header__row { align-items: flex-start; flex-direction: column; }
	.bella-ui-offer-grid,
	.bella-ui-filterbar,
	.bella-home__grid,
	.bella-form-grid,
	.bella-feed-orderlist a { grid-template-columns: 1fr; gap: 4px; }
	.bella-feed-orderlist em { text-align: left; }
	.bella-feed-detail__grid { grid-template-columns: 1fr; }
	.bella-feed-detail__grid > div { grid-template-columns: 1fr; }
	.bella-feed-variant { grid-template-columns: 1fr; }
	.bella-ui-offer-grid--head { display: none; }
	.bella-home__head { margin-bottom: 18px; }
	.bella-home__continue,
	.bella-course__next { align-items: stretch; flex-direction: column; }
	.bella-course-card { grid-template-columns: 36px minmax(0,1fr) 18px; padding: 14px; }
	.bella-course-card__icon { width: 36px; height: 36px; }
	.bella-course-card__identity { display: grid; gap: 2px; }
	.bella-training-topic { grid-template-columns: minmax(0,1fr) 18px; }
	.bella-training-topic small { grid-column: 1; }
	.bella-course__head { align-items: center; flex-direction: row; }
	.bella-course__home { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
	.bella-course-row { grid-template-columns: 24px minmax(0,1fr) auto; gap: var(--bella-space-2); padding: var(--bella-space-3) 0; min-height: 56px; border: 0; border-bottom: 1px solid var(--bella-border); border-radius: 0; }
	.bella-course-row__state { width: 24px; height: 24px; }
	.bella-course-row__action { max-width: 7em; text-align: right; }
	.bella-course-list { gap: 0; }
	.bella-course__overview :where(h2,p) { margin: 0; }
	.bella-course__overview,.bella-course-preview { gap: var(--bella-space-3); }
	.bella-course-preview h3 { font-size: var(--bella-type-body-size); }
	.bella-home__dashboard-grid { grid-template-columns: 1fr; }
	.bella-home--student-dashboard .bella-training__topics { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
	.bella-ui-page--wide:has(.kwispel-frontend-groups),
	.bella-ui-page--wide:has(.bella-table-wrap--entity) { width: calc(100% + 20px); max-width: none; margin-inline: -10px; }
	.bella-ui-grid--2,
	.bella-ui-grid--3,
	.bella-ui-inline-fields,
	.bella-ui-inline-fields--3,
	.bella-appearance__controls,
	.bella-components__grid,
	.bella-components__form-demo,
	.bella-components__section > header,
	.bella-portal .kwispel-theory-card-grid,
	.bella-public-shell .kwispel-theory-card-grid { grid-template-columns: 1fr; }
	.bella-ui-page-header { margin-bottom: 20px; }
	.bella-record-card { grid-template-columns:minmax(0,1fr) auto; padding:14px 15px; }
	.bella-record-card time { grid-column:1; grid-row:2; }
	.bella-record-card__chevrons { grid-column:2; grid-row:1 / span 2; }
	.bella-ui-query-form--inline { grid-template-columns:1fr; }
	.bella-ui-surface,.bella-card,.bella-chat-settings-card,.bella-feed-panel,.bella-feed-setting,.bella-account-card { padding: 16px; border-radius: var(--bella-radius-md); }
	.bella-home__continue,.bella-home__important { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
	.bella-home--student-dashboard .bella-home__continue--practice { grid-template-columns: minmax(0,1fr); min-height: 0; padding: var(--bella-space-4); gap: var(--bella-space-3); }
	.bella-home__continue-icon { display: none; }
	.bella-home__continue-copy h2 { margin: var(--bella-space-1) 0 var(--bella-space-2); font-size: var(--bella-type-section-title-size); }
	.bella-home__lesson-line { gap: var(--bella-space-1) var(--bella-space-3); font-size: var(--bella-type-meta-size); }
	.bella-home__lesson-line span { white-space: normal; }
	.bella-home__lesson-line span:first-child { flex-basis: 100%; }
	.bella-home__lesson-line svg { flex-shrink: 0; width: 16px; height: 16px; }
	.bella-home--student-dashboard .bella-home__continue-actions { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bella-space-2); }
	.bella-home__continue-actions > form { min-width: 0; margin: 0; }
	.bella-home--student-dashboard .bella-home__continue-actions .bella-button { min-width: 0; min-height: 44px; padding-inline: var(--bella-space-2); white-space: normal; box-shadow: none; }
	.bella-home--student-dashboard .bella-training__topics,.bella-home__weekly-list { grid-template-columns: 1fr; }
	.bella-puppycoach-home__tag { display: none; }
	.bella-puppycoach-home h3 { font-size: var(--bella-type-body-size); }
	.bella-puppycoach-home > p { margin-bottom: var(--bella-space-3); font-size: var(--bella-type-meta-size); }
	.bella-puppycoach-home .bella-button { min-height: 44px; }
	.bella-home--student-dashboard,.bella-home__dashboard-grid,.bella-home__dashboard-column { gap: var(--bella-space-3); }
	.bella-home__panel { padding: var(--bella-space-3) var(--bella-space-1); border: 0; border-bottom: 1px solid var(--bella-border); border-radius: 0; background: transparent; box-shadow: none; }
	.bella-home__dashboard-column { display: contents; }
	.bella-home__weekly { order: 1; }
	.bella-home__puppy { order: 2; }
	.bella-home__dashboard-grid > .bella-home__dashboard-column > .bella-training { order: 3; }
	.bella-home__courses { order: 4; }
	.bella-home__weekly > p,.bella-home--student-dashboard .bella-training > p { display: none; }
	.bella-home__panel-title > span { display: none; }
	.bella-home__panel-title { margin-bottom: var(--bella-space-3); gap: var(--bella-space-2); }
	.bella-home__panel-title > span { width: 24px; height: 24px; flex-shrink: 0; }
	.bella-home--student-dashboard .bella-course-card { grid-template-columns: minmax(0,1fr) 20px; padding: 0; border: 0; border-radius: 0; gap: var(--bella-space-2); }
	.bella-home--student-dashboard .bella-course-card__icon { display: none; }
	.bella-home--student-dashboard .bella-training { gap: var(--bella-space-2); }
	.bella-home--student-dashboard .bella-training > p { margin-bottom: var(--bella-space-1); }
	.bella-home--student-dashboard .bella-training .bella-home__panel-title { margin-bottom: 0; }
	.bella-home--student-dashboard .bella-training-topic { min-height: 44px; padding: var(--bella-space-2) 0; border: 0; border-bottom: 1px solid var(--bella-border); border-radius: 0; background: transparent; }
	.bella-course__next { gap: var(--bella-space-2); }
	.bella-course__next--embedded { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; padding-top: var(--bella-space-3); }
	.bella-course__resume-suffix,.bella-home__absence-suffix { display: none; }
	.bella-course__next--embedded small { display: none; }
	.bella-course__next--embedded .bella-button { min-height: 44px; padding-inline: var(--bella-space-3); background: transparent; color: var(--bella-accent); border-color: transparent; box-shadow: none; }
	.bella-home--student-dashboard .bella-home__courses,.bella-home--student-dashboard .bella-home__puppy,.bella-home--student-dashboard .bella-home__weekly { min-height: 0; height: auto; }
	.bella-table-wrap { border: 0; border-radius: 0; overflow: visible; background: transparent; }
	.bella-table,.bella-table tbody,.bella-table tr,.bella-table td { display: block; width: 100%; }
	.bella-table thead { display: none; }
	.bella-table tbody { display: grid; gap: 10px; }
	.bella-table tr { padding: 12px 14px; border: 1px solid var(--bella-border); border-radius: var(--bella-radius-md); background: var(--bella-surface); }
	.bella-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; border: 0; text-align: right; white-space: normal; }
	.bella-table td::before { content: attr(data-label); color: var(--bella-muted);  font-weight: var(--bella-type-table-head-weight); text-align: left; text-transform: uppercase; }
	.bella-table-wrap--sentence .bella-table td::before { text-transform: none; }
	.bella-table__action { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--bella-border); }
	.bella-table-wrap--entity .bella-table tr { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:10px 12px; }
	.bella-table-wrap--entity .bella-table td { display:block;padding:0;text-align:left; }
	.bella-table-wrap--entity .bella-table td::before { display:none; }
	.bella-table-wrap--entity .bella-table td[data-key="name"] { grid-column:1;grid-row:1;font-size:var(--bella-text-size);font-weight:700;line-height:1.25; }
	.bella-table-wrap--entity .bella-table td[data-key="dog"] { grid-column:1;grid-row:2;color:var(--bella-muted);font-size:var(--bella-type-meta-size); }
	.bella-table-wrap--entity .bella-table td[data-key="homework"] { grid-column:2;grid-row:1 / span 2;justify-self:end;align-self:center;margin:0; }
	.bella-table-wrap--entity .bella-table td[data-key="actions"] { grid-column:1/-1;display:flex;justify-content:flex-start;margin-top:5px;padding-top:6px;border-top:1px solid var(--bella-border); }
	.bella-table-wrap--entity .bella-table td[data-key="homework"] :is(.bella-badge,.bella-ui-badge){padding:3px 7px;font-size:11px;white-space:nowrap}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions{display:flex;width:100%;flex-wrap:nowrap;justify-content:flex-start;gap:5px;overflow:hidden}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions>*{flex:0 1 auto;order:10}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions>[data-mobile-order="1"]{order:1}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions>[data-mobile-order="2"]{order:2}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions>[data-mobile-order="3"]{order:3}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions>[data-mobile-order="4"]{order:4}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions .bella-ui-icon-action{width:auto;height:auto;min-height:30px;padding:5px 9px;border:1px solid var(--bella-border);border-radius:8px;background:var(--bella-surface);box-shadow:none;color:var(--bella-muted);font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions .bella-ui-icon-action svg{display:none}
	.bella-ui-page:has(.bella-table-wrap--entity)>.bella-ui-page-header .bella-ui-page-header__actions .bella-ui-icon-action::after{content:attr(data-mobile-label)}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-inline-actions{display:flex;width:100%;flex-wrap:nowrap;gap:5px;overflow:hidden}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-inline-actions>*{flex:0 1 auto;order:10}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-inline-actions>[data-mobile-order="1"]{order:1}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-inline-actions>[data-mobile-order="2"]{order:2}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-inline-actions>[data-mobile-order="3"]{order:3}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-inline-actions>[data-mobile-order="4"]{order:4}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-action--mobile-hidden{display:none!important}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-icon-action{width:auto;height:auto;min-height:30px;padding:5px 8px;border:1px solid var(--bella-border);border-radius:8px;background:var(--bella-surface);box-shadow:none;color:var(--bella-muted);font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-icon-action svg{display:none}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-icon-action::after{content:attr(data-mobile-label)}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-icon-action--success{border-color:var(--bella-success-border);background:var(--bella-success-soft);color:var(--bella-success)}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-icon-action--warning{border-color:var(--bella-warning-border);background:var(--bella-warning-soft);color:var(--bella-warning)}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-icon-action--error{border-color:var(--bella-danger-border);background:var(--bella-danger-soft);color:var(--bella-danger)}
	.bella-table-wrap--entity .bella-table td[data-key="actions"] .bella-ui-icon-action--info{border-color:var(--bella-info-border);background:var(--bella-info-soft);color:var(--bella-info)}
	.bella-table-wrap--schedule{border:0;background:transparent;overflow:visible}
	.bella-table-wrap--schedule .bella-table tbody{gap:7px}
	.bella-table-wrap--schedule .bella-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:10px 12px}
	.bella-table-wrap--schedule .bella-table td{display:block;padding:0;border:0;text-align:left}
	.bella-table-wrap--schedule .bella-table td::before{display:none}
	.bella-table-wrap--schedule .bella-table td[data-column="1"]{grid-column:1;color:var(--bella-heading);font-size:var(--bella-text-size);font-weight:700;line-height:1.25}
	.bella-table-wrap--schedule .bella-table td[data-column="2"]{grid-column:1;color:var(--bella-muted);font-size:var(--bella-type-meta-size)}
	.bella-table-wrap--schedule .bella-table td[data-column="3"]{grid-column:1}
	.bella-table-wrap--schedule .bella-table td[data-column="4"]{grid-column:2;justify-self:end}
	.bella-table-wrap--schedule .bella-table td[data-column="5"]{grid-column:1/-1;grid-row:auto;display:flex;justify-content:flex-start;align-self:center;margin-top:4px;padding-top:6px;border-top:1px solid var(--bella-border)}
	.bella-table-wrap--schedule .bella-table td[data-column="3"] :is(.bella-badge,.bella-ui-badge),.bella-table-wrap--schedule .bella-table td[data-column="4"] :is(.bella-badge,.bella-ui-badge){padding:3px 7px;font-size:11px}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-inline-actions{display:flex;width:100%;flex-wrap:nowrap;gap:5px;overflow:hidden}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-action--mobile-hidden{display:none!important}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-icon-action{width:auto;height:auto;min-height:30px;padding:5px 9px;border:1px solid var(--bella-border);border-radius:8px;background:var(--bella-surface);box-shadow:none;color:var(--bella-muted);font-size:10px;font-weight:700;line-height:1.2;white-space:nowrap}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-icon-action svg{display:none}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-icon-action::after{content:attr(data-mobile-label)}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-icon-action--success{border-color:var(--bella-success-border);background:var(--bella-success-soft);color:var(--bella-success)}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-icon-action--warning{border-color:var(--bella-warning-border);background:var(--bella-warning-soft);color:var(--bella-warning)}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-icon-action--error{border-color:var(--bella-danger-border);background:var(--bella-danger-soft);color:var(--bella-danger)}
	.bella-table-wrap--schedule .bella-table td[data-column="5"] .bella-ui-icon-action--info{border-color:var(--bella-info-border);background:var(--bella-info-soft);color:var(--bella-info)}
	.bella-ui-details.bella-ui-details--lesson-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;border:1px solid var(--bella-border);border-radius:12px;background:var(--bella-surface)}
	.bella-ui-details--lesson-summary .bella-ui-details__item{padding:9px 10px;border-radius:9px;background:var(--bella-surface-subtle)}
	.bella-ui-details--lesson-summary .bella-ui-details__item:is([data-key="groep"],[data-key="lesmoment"]){grid-column:1/-1}
	.bella-ui-details--lesson-summary .bella-ui-details__item:is([data-key="verzonden"],[data-key="mislukt"]){display:flex;align-items:center;justify-content:space-between;gap:8px}
	.bella-ui-details--lesson-summary dt{font-size:10px;line-height:1.2;text-transform:uppercase;letter-spacing:.04em}
	.bella-ui-details--lesson-summary dd{margin-top:3px;font-size:14px;line-height:1.3}
	.bella-ui-details--lesson-summary .bella-ui-details__desktop-value{display:none}
	.bella-ui-details--lesson-summary .bella-ui-details__mobile-value{display:inline}
	.bella-ui-details--lesson-summary :is([data-key="vrijgave"],[data-key="lesmail"]).is-success dd{display:inline-flex;padding:3px 8px;border:1px solid var(--bella-success-border);border-radius:999px;background:var(--bella-success-soft);color:var(--bella-success);font-size:12px;font-weight:700}
	.bella-ui-details--lesson-summary :is([data-key="vrijgave"],[data-key="lesmail"]).is-error dd{display:inline-flex;padding:3px 8px;border:1px solid var(--bella-danger-border);border-radius:999px;background:var(--bella-danger-soft);color:var(--bella-danger);font-size:12px;font-weight:700}
	.bella-ui-details--lesson-summary :is([data-key="vrijgave"],[data-key="lesmail"]).is-pending dd{display:inline-flex;padding:3px 8px;border:1px solid var(--bella-warning-border);border-radius:999px;background:var(--bella-warning-soft);color:var(--bella-warning);font-size:12px;font-weight:700}
	.bella-table-wrap--entity .bella-table tbody,.bella-table-wrap--schedule .bella-table tbody{gap:7px}
	.bella-table-wrap--entity .bella-table tr,.bella-table-wrap--schedule .bella-table tr{border-radius:12px;box-shadow:none}
	.bella-table-wrap--entity .bella-table .bella-ui-inline-actions,.bella-table-wrap--schedule .bella-table .bella-ui-inline-actions{gap:4px}
	.bella-table-wrap__title{padding:0 0 8px;font-size:var(--bella-h4-size);line-height:var(--bella-h4-line-height)}
	.bella-ui-section:has(.bella-table-wrap--schedule)>.bella-ui-section__header p{display:none}
	.bella-table--one-line td,.bella-mail-traffic__table td { white-space: normal; }
	.bella-ui-definition-list > div,.bella-chat-usage-list > div,.bella-chat-usage-list > li { grid-template-columns: 1fr; gap: 3px; }
	.bella-ui-actions > .bella-button--primary,.bella-ui-form-actions > .bella-button--primary { min-width: min(260px,100%); }
	.bella-portal__toast { right: 16px; bottom: 80px; left: 16px; max-width: none; }
}

/* Generic data visualisation. Eco plugins only provide semantic series data. */
.bella-ui-chart { border: 1px solid var(--bella-border); border-radius: var(--bella-radius-lg); background: var(--bella-surface); padding: 20px; display: grid; gap: 12px; }
.bella-ui-chart__title { margin: 0; }
.bella-ui-chart__svg { width: 100%; height: auto; overflow: visible; }
.bella-ui-chart__axis { stroke: var(--bella-border); stroke-width: 1; }
.bella-ui-chart__bar { fill: var(--bella-accent); rx: 5; }
.bella-ui-chart__label { fill: var(--bella-text-muted); font: inherit;  }
.bella-ui-chart__values { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 8px 16px; margin: 0; }
.bella-ui-chart__values div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid var(--bella-border); padding-top: 8px; }
.bella-ui-chart__values dt,.bella-ui-chart__values dd { margin: 0; }
.bella-ui-chart--compact { padding: 16px; gap: 8px; }

/* Generic compact action menu for table rows and dense views. */
.bella-ui-action-menu { position: relative; display: inline-block; }
.bella-ui-action-menu > summary { cursor: pointer; list-style: none; font-weight: var(--bella-type-label-weight); }
.bella-ui-action-menu > summary::-webkit-details-marker { display: none; }
.bella-ui-action-menu__panel { position: absolute; z-index: 20; right: 0; min-width: 210px; margin-top: 6px; padding: 10px; display: grid; gap: 8px; border: 1px solid var(--bella-border); border-radius: var(--bella-control-radius); background: var(--bella-surface); box-shadow: 0 10px 30px rgba(var(--bella-accent-rgb),calc(var(--bella-shadow-alpha) * .7)); }
.bella-ui-action-menu__panel form { margin: 0; }
.bella-ui-action-menu__panel .bella-button { width: 100%; }

/* Semantic key/value details used by connected eco screens. */
.bella-ui-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px 22px; margin: 0; }
.bella-ui-details--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.bella-ui-details--four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.bella-ui-details--inline{display:flex;align-items:center;gap:0;flex-wrap:wrap;padding:2px 0 12px}.bella-ui-details--inline>div{display:inline-flex;align-items:center}.bella-ui-details--inline>div+div::before{content:"|";margin:0 10px;color:var(--bella-border-strong,var(--bella-muted))}.bella-ui-details--inline dt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.bella-ui-details--inline dd{margin:0;font-weight:600}
.bella-ui-details > div { min-width: 0; }
.bella-ui-details dt { color: var(--bella-muted);  font-weight: var(--bella-type-label-weight); line-height: 1.35; }
.bella-ui-details dd { margin: 3px 0 0; color: var(--bella-text);  line-height: var(--bella-type-body-line-height); }
.bella-ui-details__mobile-value{display:none}
.bella-ui-profile-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:0}.bella-ui-profile-stack{display:grid;align-content:start;gap:24px;min-width:0}.bella-ui-profile-column{display:grid;align-content:start;gap:7px;min-width:0}.bella-ui-profile-column h3{margin:0 0 4px}.bella-ui-profile-column p{margin:0;overflow-wrap:anywhere}.bella-ui-profile-column a{color:inherit;text-underline-offset:3px}.bella-ui-profile-column a:is(:hover,:focus-visible){color:var(--bella-accent)}
.bella-portal__nav-subgroup{display:grid;gap:2px}.bella-portal__nav-subgroup-label{font-weight:800}.bella-portal__nav-subgroup-children{display:grid;gap:2px;padding-left:14px;border-left:2px solid color-mix(in srgb,var(--bella-accent) 18%,transparent)}
.bella-review{padding:18px 0;border-bottom:1px solid var(--bella-line)}.bella-review__header{display:flex;align-items:center;gap:12px}.bella-review__header h3,.bella-review__header p{margin:0}.bella-review__avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--bella-surface)}.bella-review__media-button{display:inline-block;margin:8px 8px 0 0;padding:0;border:0;border-radius:12px;overflow:hidden;background:transparent;cursor:pointer}.bella-review__media{display:block;width:132px;height:96px;object-fit:cover}.bella-review__media-large{display:block;max-width:min(82vw,900px);max-height:78vh;width:auto;height:auto;object-fit:contain}.bella-dialog__panel:has(.bella-review__media-large){width:auto;max-width:92vw;padding:44px 18px 18px}
@media(max-width:760px){.bella-ui-details,.bella-ui-details--four{grid-template-columns:1fr 1fr}.bella-ui-details--inline{display:flex;gap:7px;padding:0 0 16px}.bella-ui-details--inline>div{padding:7px 10px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-text)}.bella-ui-details--inline>div+div::before{display:none}.bella-ui-details--inline dd{margin:0;font-size:var(--bella-type-meta-size);line-height:1.25}.bella-ui-settings-form--two{grid-template-columns:1fr}.bella-ui-settings-form--two .bella-ui-field--wide,.bella-ui-settings-form--two .bella-ui-form-actions{grid-column:auto}.bella-ui-query-disclosure__body{width:min(460px,calc(100vw - 32px))}.bella-ui-query-form--inline{grid-template-columns:minmax(0,1fr) auto}.bella-review__media{width:112px;height:84px}}
@media(max-width:480px){.bella-ui-details,.bella-ui-details--four{grid-template-columns:1fr}}
@media(max-width:600px){.bella-ui-profile-columns{grid-template-columns:1fr;gap:20px}.bella-ui-profile-stack{gap:20px}}
\n/* Central inline text actions for compact data tables. */
.bella-ui-inline-actions{display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.bella-table-wrap--compact .bella-table th{padding:8px 12px}.bella-table-wrap--compact .bella-table td{padding:7px 12px}.bella-table-wrap--compact .bella-ui-inline-actions{gap:6px;flex-wrap:nowrap}.bella-table-wrap--compact .bella-ui-icon-action{width:32px;height:32px}.bella-table-wrap--compact .bella-ui-icon-action svg{width:16px;height:16px}.bella-ui-edit-disclosure{margin-top:14px;padding:16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface)}.bella-ui-edit-disclosure[hidden]{display:none}
.bella-ui-inline-form{display:inline;margin:0;padding:0}
.bella-ui-text-action{appearance:none;border:0;background:transparent;padding:0;margin:0;font:inherit;line-height:inherit;cursor:pointer}
.bella-ui-icon-action{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-muted);cursor:pointer}
.bella-ui-icon-action[role=img]{cursor:default}
.bella-ui-icon-action:hover,.bella-ui-icon-action:focus-visible{border-color:currentColor;color:var(--bella-accent);background:var(--bella-accent-soft)}
.bella-ui-icon-action--danger:hover,.bella-ui-icon-action--danger:focus-visible{color:var(--bella-danger,#b42318);background:rgba(180,35,24,.08)}
.bella-ui-icon-action--success{border-color:var(--bella-success-border);background:var(--bella-success-soft);color:var(--bella-success)}
.bella-ui-icon-action--warning{border-color:var(--bella-warning-border);background:var(--bella-warning-soft);color:var(--bella-warning)}
.bella-ui-icon-action--error{border-color:var(--bella-danger-border);background:var(--bella-danger-soft);color:var(--bella-danger)}
.bella-ui-icon-action--info{border-color:var(--bella-info-border);background:var(--bella-info-soft);color:var(--bella-info)}
.bella-ui-icon-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bella-portal .kwispel-icon-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.bella-portal .kwispel-icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-muted);text-decoration:none;cursor:pointer}.bella-portal .kwispel-icon-btn[aria-disabled=true]{opacity:.42;cursor:not-allowed}.bella-portal .kwispel-icon-btn:hover,.bella-portal .kwispel-icon-btn:focus-visible{border-color:currentColor;background:var(--bella-accent-soft);color:var(--bella-accent)}.bella-portal .kwispel-icon-btn.is-danger:hover,.bella-portal .kwispel-icon-btn.is-danger:focus-visible{color:var(--bella-danger);background:color-mix(in srgb,var(--bella-danger) 8%,transparent)}.bella-portal .kwispel-icon-btn .dashicons{width:18px;height:18px;font-size:18px;line-height:18px}
.bella-ui-notice{margin:0 0 1rem}

/* Generic selectable checklist used by eco forms. */
.bella-ui-checklist{display:grid;gap:8px}
.bella-ui-checklist__item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface);cursor:pointer}
.bella-ui-checklist__item:hover{border-color:var(--bella-accent-border);background:var(--bella-accent-soft)}
.bella-ui-checklist__copy{display:grid;gap:2px;min-width:0}
.bella-ui-checklist__copy small{color:var(--bella-muted)}
.bella-ui-field input[type=search]{padding-left:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:14px center}
.bella-ui-choice-chips{display:flex;flex-wrap:wrap;gap:10px}.bella-ui-field--center>.bella-ui-choice-chips{justify-content:center}.bella-ui-field--label-hidden{justify-items:center}.bella-ui-choice-chip{position:relative;cursor:pointer}.bella-ui-choice-chip input{position:absolute;opacity:0;pointer-events:none}.bella-ui-choice-chip span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);box-shadow:0 1px 2px rgba(28,35,43,.06);color:var(--bella-text);font-weight:700;transition:border-color .16s ease,background .16s ease,color .16s ease,transform .16s ease}.bella-ui-choice-chip:hover span{border-color:var(--bella-accent-border);transform:translateY(-1px)}.bella-ui-choice-chip input:focus-visible+span{outline:3px solid color-mix(in srgb,var(--bella-accent) 28%,transparent);outline-offset:2px}.bella-ui-choice-chip input:checked+span{border-color:var(--bella-accent);background:var(--bella-accent);color:#fff;box-shadow:0 6px 18px color-mix(in srgb,var(--bella-accent) 24%,transparent)}.bella-ui-date-calendar{min-height:52px;font-weight:700;cursor:pointer}.bella-ui-time-other:not([hidden]){max-width:220px;margin-top:10px}
.bella-ui-choice-chips--course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}.bella-ui-choice-chips--course-grid .bella-ui-choice-chip{display:block;min-width:0}.bella-ui-choice-chips--course-grid .bella-ui-choice-chip span{width:100%;min-height:clamp(48px,6svh,62px);padding:8px 5px;border:0;border-radius:20px;background:var(--bella-surface);box-shadow:0 12px 30px color-mix(in srgb,var(--bella-accent) 11%,transparent);font-size:clamp(.78rem,3.4vw,.96rem);font-weight:800;line-height:1.12;text-align:center}.bella-ui-choice-chips--course-grid .bella-ui-choice-chip:hover span{transform:none}.bella-ui-choice-chips--course-grid .bella-ui-choice-chip input:checked+span{background:var(--bella-accent);color:#fff;box-shadow:0 12px 30px color-mix(in srgb,var(--bella-accent) 25%,transparent)}
.bella-ui-choice-chips--cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;width:100%}.bella-ui-choice-chips--cards .bella-ui-choice-chip{display:block;min-width:0}.bella-ui-choice-chips--cards .bella-ui-choice-chip span{display:grid;align-content:center;gap:4px;width:100%;min-height:64px;padding:13px 15px;border-radius:var(--bella-radius-md);box-sizing:border-box;text-align:center;white-space:normal;overflow-wrap:anywhere}.bella-ui-choice-chips--cards .bella-ui-choice-chip strong{font:inherit}.bella-ui-choice-chips--cards .bella-ui-choice-chip small{color:var(--bella-muted);font-weight:400;line-height:1.35}.bella-ui-choice-chips--cards .bella-ui-choice-chip input:checked+span small{color:inherit}@media(max-width:620px){.bella-ui-choice-chips--cards{grid-template-columns:1fr}}
.bella-ui-progress{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin:0 0 var(--bella-space-6);padding:0;list-style:none}
.bella-ui-progress li{display:grid;justify-items:center;gap:6px;position:relative;color:var(--bella-muted);text-align:center}
.bella-ui-progress li:not(:last-child):after{content:"";position:absolute;top:17px;left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:var(--bella-border)}
.bella-ui-progress li>span{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);font-weight:600;z-index:1}
.bella-ui-progress li>small{line-height:1.25}
.bella-ui-progress li.is-current{color:var(--bella-accent)}.bella-ui-progress li.is-current>span{border-color:var(--bella-accent);background:var(--bella-accent);color:#fff}
.bella-ui-progress li.is-complete>span{border-color:var(--bella-accent-border);background:var(--bella-accent-soft);color:var(--bella-accent)}
@media(max-width:780px){.bella-ui-progress{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:16px}.bella-ui-progress li:after{display:none}.bella-ui-progress li>small{display:none}}


/* 0.6.48 — Generic semantic eco-content adapter.
 * Eco markup may retain functional hooks/classes during migration; Portaal owns
 * their visible layout, controls, tables and modal presentation. */
.bella-portal .bella-eco-content { width:100%; min-width:0; color:var(--bella-text); }
.bella-portal .bella-eco-content :where(h2,h3,h4) { color:var(--bella-text);  }
.bella-portal .bella-eco-content :where(.kwispel-management-tab-actions,.kwispel-toolbar,.kwispel-actions,.row-actions) { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; margin:0 0 18px; }
.bella-portal .bella-eco-content :where(.kwispel-card,.kwispel-ui-card,.kwispel-management-card,.kwispel-dashboard-card,.kwispel-filter-card,.kwispel-panel) { border:1px solid var(--bella-border); border-radius:var(--bella-radius-lg); background:var(--bella-surface); box-shadow:var(--bella-shadow); padding:20px; margin-bottom:16px; }
.bella-portal .bella-eco-content :where(form) { color:var(--bella-text); }
.bella-portal .bella-eco-content :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea) { width:100%; max-width:100%; min-height:var(--bella-control-height); border:1px solid var(--bella-border); border-radius:var(--bella-control-radius); background:var(--bella-surface); color:var(--bella-text); font:inherit; padding:var(--bella-control-padding-y) var(--bella-control-padding-x); box-sizing:border-box; }
.bella-portal .bella-eco-content :where(label) { color:var(--bella-text); font:inherit; }
.bella-portal .bella-eco-content :where(table) { width:100%; border-collapse:collapse; background:var(--bella-surface); color:var(--bella-text);  }
.bella-portal .bella-eco-content :where(th,td) { padding:12px 14px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--bella-border); }
.bella-portal .bella-eco-content :where(th) { font-weight:700; color:var(--bella-text); }
.bella-portal .bella-eco-content :where(.widefat,.wp-list-table,.kwispel-table,.kwispel-ui-table) { border:1px solid var(--bella-border); border-radius:var(--bella-radius-lg); overflow:hidden; }
.bella-portal .bella-eco-content :where(.notice,.kwispel-notice,.kwispel-management-message) { border:1px solid var(--bella-border); border-radius:var(--bella-radius-md); background:var(--bella-surface); color:var(--bella-text); padding:12px 14px; margin:0 0 16px; }
.bella-portal .bella-eco-content :where(.button,.button-primary,.button-secondary,.kwispel-ui-button,.kwispel-tab-action) { appearance:none; min-height:var(--bella-control-height); border:1px solid var(--bella-accent-border); border-radius:var(--bella-control-radius); background:var(--bella-accent-soft); color:var(--bella-accent); font:inherit; font-weight:700; line-height:1; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-decoration:none; cursor:pointer; box-shadow:none; }
.bella-portal .bella-eco-content :where(.button-primary,.kwispel-ui-button--primary) { background:var(--bella-accent); border-color:var(--bella-accent); color:#fff; }
.bella-portal .bella-eco-content :where(.button-link-delete,.kwispel-ui-button--danger) { color:var(--bella-danger); border-color:color-mix(in srgb,var(--bella-danger) 28%,transparent); background:color-mix(in srgb,var(--bella-danger) 8%,transparent); }
.bella-portal .bella-eco-content :where(.tablenav,.kwispel-filters,.kwispel-filter-row,.kwispel-form-row) { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-bottom:16px; }
.bella-portal .bella-eco-content :where([hidden]) { display:none !important; }

/* Portaal modals stay inside the central token context. Standalone ECO screens
 * retain the body fallback without creating a second presentation source. */
:is(body,[data-bella-modal-root]) > :where(.kwispel-modal,.kw-profile-modal) { display:none; position:fixed; inset:0; z-index:100000; padding:24px; background:rgba(15,23,42,.48); align-items:center; justify-content:center; overflow:auto; box-sizing:border-box; }
:is(body,[data-bella-modal-root]) > :where(.kwispel-modal,.kw-profile-modal).is-open { display:flex; }
:is(body,[data-bella-modal-root]) > :where(.kwispel-modal,.kw-profile-modal) :where(.kwispel-modal-card,.kw-schedule-modal__panel,.kw-profile-modal__panel,.kwispel-group-add-card,.kwispel-pending-modal) { position:relative; width:min(760px,calc(100vw - 48px)); max-height:calc(100vh - 48px); overflow:auto; margin:auto; border:1px solid var(--bella-border); border-radius:var(--bella-radius-lg); background:var(--bella-surface); color:var(--bella-text); box-shadow:0 24px 70px rgba(15,23,42,.25); padding:24px; box-sizing:border-box; }
body.kw-modal-open { overflow:hidden; }

.bella-ui-distribution { display:grid; gap:10px; }
.bella-ui-distribution__row { display:grid; grid-template-columns:minmax(140px,1fr) minmax(180px,3fr) auto; gap:12px; align-items:center; }
.bella-ui-distribution__row progress { width:100%; height:10px; border:0; border-radius:999px; overflow:hidden; accent-color:var(--bella-accent); }
.bella-ui-distribution__row strong { white-space:nowrap;  }

/* Huiswerk support remains functional, but Portaal suppresses the old branded footer presentation. */
.bella-portal .kwispel-plugin-footer { display:flex; justify-content:flex-start; margin-top:20px; }
.bella-portal .kwispel-plugin-footer__inner { display:flex; }
.bella-portal .kwispel-plugin-footer__brand,.bella-portal .kwispel-plugin-footer__version,.bella-portal .kwispel-plugin-footer__credit,.bella-portal .kwispel-plugin-footer__sep { display:none; }
.bella-portal .kwispel-plugin-footer__report { appearance:none; border:0; background:transparent; color:var(--bella-muted); font:inherit; font-weight:700; cursor:pointer; padding:6px 0; }
.kwispel-support-modal { display:none; position:fixed; inset:0; z-index:100001; background:rgba(15,23,42,.48); padding:24px; align-items:center; justify-content:center; box-sizing:border-box; }
.kwispel-support-modal.is-open { display:flex; }
.kwispel-support-modal__panel { width:min(680px,calc(100vw - 48px)); max-height:calc(100vh - 48px); overflow:auto; border:1px solid var(--bella-border); border-radius:var(--bella-radius-lg); background:var(--bella-surface); color:var(--bella-text); box-shadow:0 24px 70px rgba(15,23,42,.25); padding:24px; position:relative; }
.kwispel-support-modal__backdrop { position:absolute; inset:0; }
.kwispel-support-modal__panel { z-index:1; }
.kwispel-support-form :where(input,textarea) { width:100%; box-sizing:border-box; }
.kwispel-support-form__actions { display:flex; justify-content:center; gap:10px; margin-top:16px; }

/* Contract v9 — Kwispelaartje theme-led horizontal portal shell. */
.bella-ui-root,.bella-portal,.bella-chat,.bella-login,.bella-tour{
 --bella-accent:var(--kw-color-accent,#ff3f7f);
 --bella-text:var(--kw-color-text,#17171a);
 --bella-surface:var(--kw-color-surface,#fff);
 --bella-radius-sm:var(--kw-radius-sm,12px);
 --bella-radius-md:var(--kw-radius-md,18px);
 --bella-radius-lg:var(--kw-radius-lg,28px);
}
.bella-portal{display:block;min-height:min(900px,calc(100vh - 92px));background:var(--kw-color-background,#fffaf6);overflow:visible}
.bella-portal__sidebar{position:sticky;top:0;width:100%;height:auto;min-height:0;display:flex;flex-direction:row;align-items:center;gap:18px;padding:10px max(18px,calc((100vw - 1480px)/2));border:0;border-bottom:1px solid var(--bella-border);border-radius:0;background:rgba(255,255,255,.96);box-shadow:0 10px 35px rgba(55,31,21,.06);overflow:visible;z-index:40}
.bella-portal__brand{display:flex;min-height:54px;padding:0;flex:0 0 auto}.bella-portal__brand-name--school strong{letter-spacing:-.4px}.bella-portal__desktop-collapse,.bella-portal__desktop-reopen{display:none!important}
.bella-portal__nav,.bella-portal__utilities{display:flex;flex-direction:row;align-items:center;gap:6px;padding:0;margin:0;overflow:visible}.bella-portal__nav{flex:1}.bella-portal__utilities{margin-left:auto}
.bella-portal__course-scroll{display:flex;align-items:center;gap:6px}.bella-portal:not(.bella-portal--theme-shell) .bella-portal__nav-label{display:none}

.bella-portal__nav-group{position:relative}.bella-portal__nav-sub{position:absolute;top:calc(100% + 8px);left:0;min-width:210px;padding:8px;background:#fff;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);box-shadow:0 18px 48px rgba(55,31,21,.12);z-index:60}.bella-portal__nav-sub a{display:block;padding:9px 11px;border-radius:10px}
.bella-portal__sidebar-foot{display:none}.bella-portal__page{padding:38px 28px 56px}.bella-portal__content{max-width:var(--bella-content-max);margin:0 auto}
.bella-portal__scrim{z-index:35}
@media(max-width:1100px){.bella-portal__sidebar{overflow-x:auto;align-items:center}.bella-portal__brand{position:sticky;left:0;background:#fff;z-index:2;padding-right:8px}.bella-portal__nav-main{}.bella-portal__page{padding:28px 18px 48px}}
@media(max-width:780px){.bella-portal__sidebar{position:fixed;inset:0 auto 0 0;width:min(88vw,360px);height:100vh;display:flex;flex-direction:column;align-items:stretch;padding:18px;overflow-y:auto;transform:translateX(-105%);border-right:1px solid var(--bella-border)}.bella-portal.is-menu-open .bella-portal__sidebar{transform:translateX(0)}.bella-portal__brand{position:static}.bella-portal__nav,.bella-portal__utilities,.bella-portal__course-scroll{display:flex;flex-direction:column;align-items:stretch;width:100%}.bella-portal__nav-sub{position:static;box-shadow:none;margin:4px 0 8px}.bella-portal__page{padding:22px 14px 42px}}


/* Contract v10 — full-width Kwispelaartje portal refinement. */
.bella-ui-root,.bella-portal{--bella-content-max:var(--kw-content-max,1760px);}
@media(min-width:1101px){
  .bella-portal__sidebar{
    padding-left:clamp(28px,3vw,70px);
    padding-right:clamp(28px,3vw,70px);
    gap:14px;
  }
  .bella-portal__brand{margin-right:10px;}
  .bella-portal__nav,.bella-portal__utilities{gap:3px;}
  .bella-portal__nav-main{padding:9px 10px;}
  .bella-portal__page{padding:clamp(30px,3vw,52px) clamp(28px,3.5vw,72px) 64px;}
  .bella-portal__content{width:100%;max-width:var(--bella-content-max);}
}
.bella-portal__brand-name--school strong{
  font-weight:700;
}
.bella-ui-page-header h1{font-weight:700;}
.bella-ui-page-header__eyebrow,.bella-ui-eyebrow{font-weight:700;text-transform:none;letter-spacing:0;}


/* Contract v11 — Bella management shell: compact manager navigation. */
.bella-portal__brand-link{display:grid;gap:1px;color:var(--bella-text);text-decoration:none;line-height:1.05;white-space:nowrap}
.bella-portal__brand-link strong{font-weight:800;color:var(--bella-text)}
.bella-portal__brand-link small{font-weight:700;color:var(--bella-muted);letter-spacing:.02em}
.bella-portal__nav-sub--management{width:min(560px,calc(100vw - 48px));grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;max-height:min(70vh,620px);overflow:auto}
.bella-portal__nav-sub--management:not([hidden]){display:grid}
.bella-portal__nav-sub--management .bella-portal__nav-sub-parent{font-weight:750;color:var(--bella-text)}
.bella-portal__nav-sub--management .bella-portal__nav-sub-child{padding-left:22px;color:var(--bella-muted);}
.bella-portal__nav-sub--management a.is-current{background:var(--bella-accent-soft);color:var(--bella-accent)}
@media(max-width:780px){.bella-portal__brand-link{margin-right:auto}.bella-portal__nav-sub--management{width:auto;grid-template-columns:1fr;max-height:none;overflow:visible}.bella-portal__nav-sub--management:not([hidden]){display:grid}}

/* The theme supplies tokens; Portaal owns the responsive application shell. */
.bella-portal__topbar{display:none}
.bella-portal--theme-shell .bella-portal__nav-main{width:100%;min-height:44px;padding:10px 12px;border-radius:var(--bella-radius-sm);white-space:normal;display:flex;align-items:center;gap:13px;border:0;background:transparent;color:var(--bella-muted);text-align:left;text-decoration:none}
.bella-portal--theme-shell .bella-portal__nav-sub{position:static;width:auto;min-width:0;margin:4px 0 8px;padding:6px;box-shadow:none;border:0;background:transparent}
.bella-portal--theme-shell .bella-portal__sidebar-foot{display:block;margin-top:auto;padding-top:14px;position:relative;flex:0 0 auto;min-height:0;overflow:visible;border-top:0;background:transparent}
@media(min-width:901px){
.bella-portal--theme-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh;background:var(--kw-color-background,#fbf7f4)}
.bella-portal--theme-shell>.bella-portal__sidebar{position:sticky;inset:0 auto auto 0;display:flex!important;width:280px;height:100vh;padding:20px 16px;flex-direction:column;align-items:stretch;gap:14px;border:0;border-right:1px solid var(--bella-border);background:var(--bella-surface);box-shadow:none;overflow-y:auto}
.bella-portal--theme-shell .bella-portal__brand{width:100%;min-height:64px;margin:0;padding:0 6px 16px;border-bottom:0}
.bella-portal--theme-shell .bella-portal__brand-link{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;white-space:normal}
.bella-portal__brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bella-accent-soft);color:var(--bella-accent)}
.bella-portal--theme-shell .bella-portal__brand-link>span:last-child{display:grid;gap:4px}
.bella-portal--theme-shell .bella-portal__nav,.bella-portal--theme-shell .bella-portal__utilities,.bella-portal--theme-shell .bella-portal__course-scroll{display:flex;width:100%;flex-direction:column;align-items:stretch;gap:5px;overflow:visible}
.bella-portal--theme-shell .bella-portal__nav{flex:0 0 auto;min-height:0;overflow:visible}.bella-portal--theme-shell .bella-portal__utilities{margin:0}


.bella-portal--theme-shell .bella-portal__nav-sub--management{grid-template-columns:1fr;max-height:none}

.bella-portal--theme-shell>.bella-portal__desktop-reopen,.bella-portal--theme-shell>.bella-portal__scrim{display:none}
.bella-portal--theme-shell>.bella-portal__page{min-width:0;padding:0 32px 64px;background:var(--kw-color-background,#fbf7f4)}
.bella-portal--theme-shell .bella-portal__topbar{position:sticky;top:0;z-index:25;display:flex;min-height:98px;align-items:center;justify-content:space-between;margin:0 -32px;padding:16px 32px;border-bottom:0;background:color-mix(in srgb,var(--bella-surface) 92%,transparent);backdrop-filter:blur(12px)}
.bella-portal--theme-shell .bella-portal__topbar--home{background:var(--kw-color-background,#fbf7f4);backdrop-filter:none;box-shadow:none}.bella-portal--theme-shell .bella-portal__topbar--home.is-scrolled{background:color-mix(in srgb,var(--bella-surface) 92%,transparent);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--bella-border)}
.bella-portal--theme-shell .bella-portal__topbar-heading{display:grid;gap:3px}.bella-portal--theme-shell .bella-portal__topbar-heading h1,.bella-portal--theme-shell .bella-portal__topbar-heading p{margin:0}.bella-portal--theme-shell .bella-portal__topbar-heading h1{font-size:2rem;line-height:1.1}.bella-portal--theme-shell .bella-portal__topbar-heading h1 span{font-size:var(--bella-type-body-size);font-weight:500;color:var(--bella-muted)}.bella-portal--theme-shell .bella-portal__topbar-heading p{color:var(--bella-muted)}
.bella-portal__topbar-user{display:flex;align-items:center;gap:10px;color:var(--bella-muted)}
.bella-portal--theme-shell .bella-portal__content{width:100%;max-width:var(--kw-content-max,1680px);margin:0 auto}
}

/* Contract v14 — Website content uses the same reusable Portaal primitives, with compact section navigation. */
.bella-section-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:6px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface)}
.bella-section-tabs a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:var(--bella-control-radius);font-weight:700;color:var(--bella-muted);text-decoration:none}
.bella-section-tabs a:hover,.bella-section-tabs a.is-current{background:var(--bella-accent-soft);color:var(--bella-accent)}
/* Central inline content-block editing. */
.bella-ui-content-block{scroll-margin-top:100px;min-width:0}
.bella-ui-content-block__editor{padding:18px;min-width:0}
.bella-ui-content-preview{overflow-wrap:anywhere;color:var(--bella-muted)}
.bella-ui-content-preview p{margin:0 0 8px}
.bella-course-editor .bella-section-tabs{white-space:normal;overflow-x:visible}
@media(max-width:760px){.bella-ui-content-block__editor{padding:14px}.bella-course-editor .bella-ui-page-header__row{align-items:stretch;flex-direction:column}}
.bella-website-content .bella-ui-surface{margin-bottom:18px}.bella-website-content .bella-ui-help{max-width:760px;margin:0 0 20px;color:var(--bella-muted)}.bella-website-content .bella-appearance__controls{grid-template-columns:minmax(0,1fr);max-width:820px}.bella-website-content .bella-appearance__controls>.bella-ui-field{grid-column:1}.bella-content-tools{overflow:hidden;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface-subtle)}.bella-content-tools>summary{display:grid;gap:3px;padding:15px 18px;cursor:pointer;list-style:none}.bella-content-tools>summary::-webkit-details-marker{display:none}.bella-content-tools>summary span{font-weight:700;color:var(--bella-text)}.bella-content-tools>summary small{color:var(--bella-muted);font:inherit}.bella-content-tools>summary:after{content:'Openen';grid-column:2;grid-row:1/3;align-self:center;color:var(--bella-accent);font-weight:700}.bella-content-tools[open]>summary:after{content:'Sluiten'}.bella-content-tools[open]>summary{border-bottom:1px solid var(--bella-border)}.bella-content-tools>.bella-ui-state,.bella-content-tools>.bella-hero-position{margin:16px}.bella-content-tools>.bella-hero-position{width:auto}.bella-appearance__settings>.bella-appearance__controls{max-width:820px}.bella-appearance__settings .bella-appearance__controls>.bella-ui-surface{padding:20px}.bella-appearance__preview{max-width:820px}
.bella-website-content input[type="number"]{box-sizing:border-box;width:9rem;min-width:9rem;max-width:9rem}.bella-website-content .bella-ui-field:has(>input[type="number"]){display:grid;grid-template-columns:minmax(150px,1fr) 9rem auto;align-items:center;gap:8px}.bella-hero-edit-tip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 18px;align-items:center;padding:16px;border:1px solid var(--bella-accent-border);border-radius:var(--bella-radius-lg);background:var(--bella-accent-soft)}.bella-hero-edit-tip strong,.bella-hero-edit-tip span{grid-column:1}.bella-hero-edit-tip .bella-button{grid-column:2;grid-row:1/3}@media(max-width:760px){.bella-hero-edit-tip{grid-template-columns:1fr}.bella-hero-edit-tip .bella-button{grid-column:1;grid-row:auto}.bella-website-content .bella-ui-field:has(>input[type="number"]){grid-template-columns:minmax(120px,1fr) 9rem auto}}
@media(max-width:780px){.bella-section-tabs{display:grid;grid-template-columns:1fr}.bella-section-tabs a{width:100%}}

/* Generic Portaal media-field primitive; reusable by Website and ECO screens. */
.bella-ui-media__preview{min-height:180px;border:1px dashed var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface-subtle);display:grid;place-items:center;overflow:hidden;color:var(--bella-text-muted)}
.bella-ui-media__preview img{width:100%;height:220px;object-fit:cover;display:block}
.bella-ui-actions--start{justify-content:flex-start}
.bella-ui-actions--top-end{justify-content:flex-end;margin:0 0 var(--bella-space-3)}
@media(max-width:600px){.bella-ui-actions--top-end{gap:8px;margin-bottom:10px}}

/* Generic landscape media preview; compact enough for content-management forms. */
.bella-ui-media--landscape .bella-ui-media__preview{width:min(100%,520px);min-height:0;aspect-ratio:16/7}.bella-ui-media--landscape .bella-ui-media__preview img{width:100%;height:100%;object-fit:cover}.bella-website-content__create{margin-bottom:18px}.bella-website-content__create>summary{list-style:none;width:max-content;cursor:pointer}.bella-website-content__create>summary::-webkit-details-marker{display:none}.bella-website-content__create[open]>summary{margin-bottom:18px}
.bella-ui-media--contain .bella-ui-media__preview{aspect-ratio:auto;min-height:220px}.bella-ui-media--contain .bella-ui-media__preview img{width:auto;max-width:100%;height:auto;max-height:420px;object-fit:contain}

.bella-ui-root :where(h1,h2,h3,h4,h5,h6){color:var(--bella-heading);}


/* 0.6.72 — staff reference components. */
:where(.kwispel-modal,.kw-profile-modal){display:none}
:where(.kwispel-modal,.kw-profile-modal).is-open{display:flex}
.bella-ui-entity-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bella-ui-entity-card{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:stretch;min-height:126px;padding:14px;background:var(--bella-surface);border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);box-shadow:var(--bella-shadow);box-sizing:border-box}
.bella-ui-entity-card__media{width:104px;aspect-ratio:1/1;border-radius:calc(var(--bella-radius-lg) * .72);overflow:hidden;background:var(--bella-accent-soft);align-self:center}
.bella-ui-entity-card__image{width:100%;height:100%;object-fit:cover}.bella-ui-entity-card__placeholder{width:100%;height:100%;display:grid;place-items:center;color:var(--bella-accent);}
.bella-feed-admin .bella-ui-entity-card__image{object-fit:contain}
.bella-ui-entity-card__body{min-width:0;display:flex;flex-direction:column}.bella-ui-entity-card__title-row{display:flex;gap:10px;align-items:center;justify-content:space-between}.bella-ui-entity-card__title-row h2{line-height:1.2;margin:0;color:var(--bella-heading)}
.bella-ui-entity-card__body>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:8px 0 10px;color:var(--bella-text);line-height:1.42}.bella-ui-entity-card__actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.bella-ui-entity-card__actions .bella-button{min-height:34px;padding:7px 11px;}
@media(max-width:1100px){.bella-ui-entity-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.bella-ui-entity-grid{grid-template-columns:1fr}.bella-ui-entity-card{grid-template-columns:82px minmax(0,1fr);min-height:108px;padding:12px}.bella-ui-entity-card__media{width:82px}}

/* Central wizard/modal base contract. */
.bella-portal,.bella-ui-root,.bella-ui-modal{color:var(--bella-text)}
.bella-ui-modal{display:none;position:fixed;inset:0;z-index:100000;padding:24px;align-items:center;justify-content:center;box-sizing:border-box}
.bella-ui-modal.is-open{display:flex}.bella-ui-modal__backdrop{position:absolute;inset:0;border:0;background:rgba(15,23,42,.48);cursor:default}
.bella-ui-modal__dialog{position:relative;z-index:1;width:min(920px,calc(100vw - 48px));max-height:calc(100vh - 48px);overflow:auto;padding:0;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:0 28px 90px rgba(15,23,42,.28)}
.bella-ui-modal__header{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;border-bottom:1px solid var(--bella-border);background:var(--bella-surface)}
.bella-ui-modal__header>div{display:flex;align-items:center;gap:12px}.bella-ui-modal__header h2{margin:0;line-height:1.2}.bella-ui-modal__icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bella-accent-soft);color:var(--bella-accent)}
.bella-ui-modal__close{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--bella-border);border-radius:50%;background:var(--bella-surface);color:var(--bella-text);font:inherit;cursor:pointer}
.bella-ui-wizard__form{padding:24px}
.bella-ui-wizard__step{display:grid;gap:18px}.bella-ui-wizard__step[hidden]{display:none}
.bella-ui-wizard--page{width:100%;margin:0;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:var(--bella-shadow);overflow:hidden}
.bella-ui-wizard--page .bella-ui-form-actions{margin:22px -24px -24px;padding:16px 24px;border-top:1px solid var(--bella-border);background:var(--bella-surface-subtle)}
.bella-ui-check{display:flex;align-items:center;gap:9px;font-weight:600}.bella-ui-check input{width:18px;height:18px;margin:0;flex:0 0 auto}
.bella-ui-modal .bella-ui-media__preview{width:min(360px,100%);aspect-ratio:16/8;min-height:0}.bella-ui-modal .bella-ui-media__preview img{height:100%}
.bella-ui-modal [hidden]{display:none!important}
.bella-ui-modal .bella-ui-form-actions{position:sticky;bottom:-24px;margin:20px -24px -24px;padding:16px 24px;border-top:1px solid var(--bella-border);background:var(--bella-surface);z-index:2}
@media(max-width:780px){.bella-ui-modal{padding:0;align-items:flex-end}.bella-ui-modal__dialog{width:100%;max-height:94vh;border-radius:var(--bella-radius-lg) var(--bella-radius-lg) 0 0;border-bottom:0}.bella-ui-wizard__form{padding:20px}.bella-ui-modal .bella-ui-form-actions{bottom:-20px;margin:18px -20px -20px;padding:14px 20px}.bella-ui-wizard--page .bella-ui-form-actions{margin:18px -20px -20px;padding:14px 20px}}

/* 0.6.78 — consolidated shared Website/Bella UI contract.
 * The theme owns the warm Website/Bella hero and public CTA primitive.
 * Portaal owns one wizard/modal implementation and maps it directly to theme tokens.
 */

/* One premium wizard progress primitive. */
.bella-ui-wizard__progress{position:relative;height:12px;display:block;overflow:hidden;margin:0 0 22px;border:1px solid var(--bella-accent-border);border-radius:999px;background:var(--bella-accent-soft)}
.bella-ui-wizard__progress::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--bella-wizard-progress,0%);border-radius:inherit;background:linear-gradient(90deg,var(--bella-accent),color-mix(in srgb,var(--bella-accent) 70%,white));transition:width .35s ease}
.bella-ui-wizard__progress::after{content:"";position:absolute;inset:1px;opacity:.28;border-radius:inherit;background:linear-gradient(110deg,transparent 0 35%,rgba(255,255,255,.85) 45%,transparent 55% 100%);background-size:180% 100%;animation:bella-wizard-flow 2.4s linear infinite;clip-path:inset(0 calc(100% - var(--bella-wizard-progress,0%)) 0 0 round 999px)}
.bella-ui-wizard__progress span{display:none}
@keyframes bella-wizard-flow{to{background-position:-180% 0}}

/* One wizard typography contract. The wizard owns no brand typography: all
 * ordinary text and controls inherit the canonical Website base role. Only the
 * semantic accent/step title uses the theme's single handwritten accent role. */
.bella-ui-modal{line-height:1.55;color:var(--bella-text)}
.bella-ui-modal :where(h1,h2,h4,h5,h6,p,span,label,strong,em,small,dt,dd,input,select,textarea,button){color:inherit}
.bella-ui-wizard__step-header{display:block;margin:0 0 18px}
.bella-ui-wizard__step-header strong[data-kw-step-counter]{display:none}
.bella-ui-wizard__step-header :where(h3,h4){margin:0;font-style:italic;font-weight:700;line-height:1.18;color:var(--bella-accent)}
.bella-ui-wizard__step-header p{margin:8px 0 0;font-weight:400;line-height:1.5;color:var(--bella-muted)}
.bella-ui-modal :where(.kw-profile-editor-field,.kw-profile-toggle,.kw-course-compact-grid label,.kw-profile-rules-card label){line-height:1.4}
.bella-ui-modal :where(.kw-profile-editor-field>span,.kw-course-compact-grid label>span,.kw-profile-rules-card label>span){font-weight:650}
.bella-ui-modal .bella-button--primary{background:var(--bella-accent);border-color:var(--bella-accent);color:#fff}
.bella-ui-modal .bella-button--secondary{background:var(--bella-accent-soft);border-color:var(--bella-accent-border);color:var(--bella-accent)}
.bella-ui-modal .bella-button--quiet{background:var(--bella-surface);border-color:var(--bella-border);color:var(--bella-text)}
.bella-ui-modal :where(input:not([type]),input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],input[type=datetime-local],input[type=password],input[type=url],input[type=search],select,textarea){color:var(--bella-text);background:#fff}

/* One compact field pattern; no decorative background containers. */
.bella-ui-modal .kw-profile-rules-card,.bella-ui-modal .kw-course-inline-fields{padding:0;border:0;background:transparent;box-shadow:none}
.bella-ui-modal .kw-course-inline-fields{display:flex;align-items:end;gap:14px;flex-wrap:nowrap}
.bella-ui-modal .kw-course-inline-fields label{flex:0 0 auto}
.bella-ui-modal .kw-course-inline-fields input[type=number]{width:5.5ch;max-width:5.5ch;text-align:center;font-weight:700}
.bella-ui-modal .kw-course-inline-fields select{width:auto;max-width:12ch}
.bella-ui-modal .kw-course-compact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,180px));gap:16px;align-items:end}
.bella-ui-modal .kw-course-compact-grid select{text-align:center;font-weight:700}

/* Token/chip field is one central Portaal primitive. */
.bella-ui-token-field{display:grid;gap:10px}.bella-ui-token-field__tokens{display:flex;flex-wrap:wrap;gap:8px;min-height:4px}.bella-ui-token{display:inline-flex;align-items:center;gap:8px;padding:7px 9px 7px 12px;border:1px solid var(--bella-accent-border);border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-text);}.bella-ui-token button{display:grid;place-items:center;width:21px;height:21px;padding:0;border:0;border-radius:50%;background:var(--bella-surface);color:var(--bella-text);font:inherit;line-height:1;cursor:pointer}.bella-ui-token-field__entry{display:flex;gap:10px;align-items:center}.bella-ui-token-field__entry input{flex:1;min-width:180px}
.bella-ui-choice-chip>input[type="checkbox"]+span{opacity:.48;filter:saturate(.45)}.bella-ui-choice-chip>input[type="checkbox"]:checked+span{opacity:1;filter:none;border-color:var(--bella-accent);background:var(--bella-accent);color:var(--bella-on-accent);box-shadow:0 0 0 1px var(--bella-accent-border)}.bella-ui-choice-chip.is-locked{cursor:default}.bella-ui-choice-chip.is-locked>span{opacity:1;filter:none}
.bella-ui-wizard__step>.bella-ui-field{margin-bottom:16px}.bella-ui-wizard__step>.bella-ui-field:last-child{margin-bottom:0}.bella-ui-field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.bella-ui-field-row--wide-narrow{grid-template-columns:minmax(0,3fr) minmax(120px,1fr)}.bella-ui-field-row--wide-narrow-control{grid-template-columns:minmax(0,3fr) minmax(120px,1fr) auto;align-items:end}.bella-ui-field-row--wide-narrow-control>.bella-ui-check{min-height:var(--bella-control-height);margin:0;padding:0 4px 10px 0;white-space:nowrap}.bella-ui-field-row+.bella-ui-field-row,.bella-ui-field-row+.bella-ui-check,.bella-ui-check+.bella-ui-field-row{margin-top:16px}.bella-ui-field input[readonly]{background:var(--bella-surface-subtle);color:var(--bella-muted);cursor:default}.bella-ui-location-moments{display:grid;gap:16px}.bella-ui-location-moments__question{margin:0;color:var(--bella-text)}.bella-ui-location-moments__fields{display:grid;grid-template-columns:minmax(280px,1fr) minmax(120px,160px) minmax(150px,190px);gap:12px;align-items:end}.bella-ui-location-moments__days{min-width:0;margin:0;padding:0;border:0}.bella-ui-location-moments__days legend,.bella-ui-location-moments__fields .bella-ui-label{margin-bottom:6px}.bella-ui-location-moments__day-options{display:flex;flex-wrap:wrap;gap:8px 14px;min-height:var(--bella-control-height);align-items:center}.bella-ui-location-moments__day-options .bella-ui-check{margin:0;white-space:nowrap}.bella-ui-location-moments__fields .bella-ui-field{min-width:0}.bella-ui-location-moments__fields :where(input[type="time"]){width:100%;max-width:100%}.bella-ui-location-moments__end{display:flex;align-items:center;min-height:var(--bella-control-height);font-weight:700}.bella-ui-location-moments__fields small{display:block;color:var(--bella-muted)}@media(max-width:780px){.bella-ui-field-row,.bella-ui-field-row--wide-narrow,.bella-ui-field-row--wide-narrow-control,.bella-ui-location-moments__fields{grid-template-columns:1fr}.bella-ui-field-row--wide-narrow-control>.bella-ui-check{padding-bottom:0}.bella-ui-location-moments__fields .bella-ui-field:first-child{grid-column:auto}}

.bella-ui-field-row+.bella-ui-field,[data-bella-datetime-range]+.bella-ui-field{margin-top:16px}
.bella-ui-modal .bella-ui-field>.bella-ui-input,.bella-ui-modal .bella-ui-field>.bella-ui-textarea{box-sizing:border-box;width:100%;min-height:var(--bella-control-height);padding:9px 12px;border:1px solid var(--bella-border);border-radius:var(--bella-control-radius);background:var(--bella-surface);color:var(--bella-text);font:inherit;font-weight:var(--bella-control-weight);line-height:1.35;box-shadow:0 1px 2px rgba(16,24,40,.025)}
.bella-ui-priority-list{display:grid;gap:10px}.bella-ui-priority-choice{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:12px 14px;border:1px solid var(--bella-border);border-radius:var(--bella-control-radius);background:var(--bella-surface)}.bella-ui-priority-choice__course,.bella-ui-priority-choice__priority{display:flex;align-items:center;gap:9px;min-width:0}.bella-ui-priority-choice__priority>span{color:var(--bella-muted)}.bella-ui-priority-choice__priority select{width:84px;min-height:var(--bella-control-height)}@media(max-width:620px){.bella-ui-priority-choice{grid-template-columns:1fr}.bella-ui-priority-choice__priority{justify-content:space-between}}
.bella-ui-record-list{display:grid;gap:10px;margin:0;padding:0}.bella-ui-record-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px;padding:16px 18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface)}.bella-ui-record-row__copy{display:grid;gap:3px;min-width:0}.bella-ui-record-row__copy span{color:var(--bella-muted);overflow-wrap:anywhere}.bella-ui-record-row__actions{justify-self:end}@media(max-width:620px){.bella-ui-record-row{grid-template-columns:1fr}.bella-ui-record-row__actions{justify-self:start}}

/* Central compact scheduling and review primitives used by ECO wizards. */
.bella-ui-schedule-moment{display:grid;grid-template-columns:minmax(190px,280px) minmax(160px,210px);gap:16px;align-items:end}.bella-ui-schedule-moment__time .kwispel-time-split-wrap{display:grid;grid-template-columns:84px 84px;gap:8px}.bella-ui-schedule-moment :where(input,select){width:100%;max-width:100%}.kwispel-group-add-location{max-width:420px;margin-top:16px}.bella-ui-review-heading,.bella-ui-review-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(100px,.75fr) minmax(190px,1.2fr) auto;gap:12px;align-items:center}.bella-ui-review-heading{padding:0 12px 7px;color:var(--bella-muted);font-size:var(--bella-small-size);font-weight:700}.bella-ui-review-row{padding:12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface)}.bella-ui-review-row+.bella-ui-review-row{margin-top:8px}.bella-ui-review-row>p{grid-column:1/-1;margin:0;color:var(--bella-muted)}.bella-ui-review-row>.kwispel-group-candidate-review-override{grid-column:4;justify-self:end}.kwispel-groups-day-card[data-kw-group-schedule-url]{cursor:pointer}.kwispel-groups-day-card[data-kw-group-schedule-url]:focus-visible{outline:3px solid var(--bella-focus);outline-offset:2px}@media(max-width:700px){.bella-ui-schedule-moment{grid-template-columns:1fr}.bella-ui-schedule-moment__time .kwispel-time-split-wrap{grid-template-columns:repeat(2,minmax(0,1fr))}.bella-ui-review-heading{display:none}.bella-ui-review-row{grid-template-columns:minmax(0,1fr) auto}.bella-ui-review-row>.kwispel-group-candidate-review-value{grid-column:1}.bella-ui-review-row>.bella-ui-icon-action{grid-column:2;grid-row:1}.bella-ui-review-row>p{grid-column:1/-1}.bella-ui-review-row>.kwispel-group-candidate-review-override{grid-column:1/-1;justify-self:start}}

/* Human-readable final review: one semantic fact per row. */
.kw-course-summary--compact{display:grid;grid-template-columns:1fr;gap:7px;margin:0}
.kw-course-summary--compact>div{display:grid;grid-template-columns:minmax(180px,220px) minmax(0,1fr);gap:12px;align-items:baseline;padding:2px 0}
.kw-course-summary--compact dt{font-weight:650;color:var(--bella-text)}
.kw-course-summary--compact dd{margin:0;color:var(--bella-text)}
.kw-course-summary--compact .kw-course-summary-theory{grid-column:auto}

/* Canonical internal landing integration: renderer-aware, never ECO-specific. */
/* Canonical landing hero: Portaal contributes no page/container gutter around the theme-owned hero. */
.bella-portal--theme-shell:has(.kw-home-hero--internal)>.bella-portal__page{padding-top:0}
.bella-portal--theme-shell:has(.kw-home-hero--internal)>.bella-portal__page>.bella-portal__content{width:100%;max-width:var(--kw-content-max,1680px);margin:0 auto;padding:0}
.bella-portal--theme-shell:has(.kw-secondary-hero--internal)>.bella-portal__page{padding:0 0 70px}
.bella-portal--theme-shell:has(.kw-secondary-hero--internal)>.bella-portal__page>.bella-portal__content{width:100%;max-width:none;margin:0;padding:0}
.bella-portal--theme-shell:has(.kw-secondary-hero--internal) .bella-ui-page{padding-inline:0}
.bella-portal--theme-shell:has(.kw-secondary-hero--internal) :is(.bella-ui-page-header--after-secondary-hero,.bella-eco-content){margin-inline:clamp(20px,5vw,72px)}

/* Role-aware dashboard composition. The theme remains the sole hero owner. */
.bella-role-dashboard{display:grid;gap:24px}
.bella-role-dashboard__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.bella-role-card{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;min-height:110px;padding:20px;color:var(--bella-text);text-decoration:none;background:var(--bella-surface);border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);box-shadow:var(--bella-shadow)}
.bella-role-card>span{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;color:var(--bella-accent);border:1px solid color-mix(in srgb,var(--bella-accent) 28%,transparent);border-radius:50%}
.bella-role-card>strong{font:inherit;font-weight:700}.bella-role-card>small{color:var(--bella-muted)}
.bella-role-card:is(:hover,:focus-visible){border-color:var(--bella-accent);transform:translateY(-1px)}
.bella-course__progress>span{width:var(--bella-course-progress,0%)}
@media(max-width:900px){.bella-role-dashboard__grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px}.bella-role-card{flex:0 0:min(82vw,310px);scroll-snap-align:start}.bella-home.bella-ui-page,.bella-course.bella-ui-page{padding-inline:18px}}

@media(max-width:780px){.bella-ui-modal .kw-course-inline-fields{flex-wrap:wrap}.kw-course-summary--compact>div{grid-template-columns:minmax(125px,42%) minmax(0,1fr)}}
@media(max-width:620px){.bella-ui-token-field__entry{align-items:stretch;flex-direction:column}.bella-ui-token-field__entry .bella-button{width:100%}}

/* Website-inhoud: compacte, visuele redactie zonder technische broninformatie. */
.bella-content-page-picker__group{margin:22px 0 4px;padding:0 2px}.bella-content-page-picker__group:first-child{margin-top:0}.bella-course-editor>.bella-ui-content-block{margin-top:18px}.bella-course-editor>.bella-section-tabs{position:sticky;top:0;z-index:3;background:var(--bella-surface);box-shadow:0 8px 18px color-mix(in srgb,var(--bella-text) 5%,transparent)}
.bella-website-content .bella-appearance__controls>.bella-ui-field--wide{grid-column:1/-1}.bella-content-page-picker .bella-ui-record-row__copy{grid-template-columns:minmax(0,1fr) auto;align-items:center}.bella-content-page-picker .bella-badge{justify-self:start}.bella-content-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bella-content-choice-grid--compact{grid-template-columns:repeat(3,minmax(0,1fr))}.bella-content-choice-chip{position:relative;cursor:pointer}.bella-content-choice-chip>input{position:absolute;opacity:0;pointer-events:none}.bella-content-choice-chip>span{display:grid;gap:5px;height:100%;padding:14px 16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface);transition:border-color .16s ease,background .16s ease,box-shadow .16s ease}.bella-content-choice-chip>span:before{content:'+';display:grid;place-items:center;width:24px;height:24px;border-radius:999px;background:var(--bella-surface-subtle);color:var(--bella-muted)}.bella-content-choice-chip small{color:var(--bella-muted);font:inherit}.bella-content-choice-chip>input:checked+span{border-color:var(--bella-accent);background:var(--bella-accent-soft);box-shadow:0 0 0 1px var(--bella-accent-border)}.bella-content-choice-chip>input:checked+span:before{content:'✓';background:var(--bella-accent);color:var(--bella-on-accent)}.bella-content-choice-chip>input:focus-visible+span{outline:3px solid var(--bella-focus);outline-offset:2px}.bella-content-token-entry--structured{display:grid;grid-template-columns:minmax(140px,.65fr) minmax(200px,1fr) auto}.bella-course-learning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bella-course-learning-card{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px 12px;padding:16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface-subtle)}.bella-course-learning-card__icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bella-accent-soft);color:var(--bella-accent)}.bella-course-learning-card__icon svg{width:24px;height:24px;fill:currentColor}.bella-course-learning-card textarea{grid-column:1/-1;min-height:86px;resize:vertical}.bella-ui-token{max-width:100%}.bella-ui-token>span{overflow-wrap:anywhere}@media(max-width:760px){.bella-content-choice-grid,.bella-content-choice-grid--compact,.bella-course-learning-grid{grid-template-columns:1fr}.bella-content-token-entry--structured{grid-template-columns:1fr}.bella-content-page-picker .bella-ui-record-row__copy{grid-template-columns:1fr}.bella-website-content:not(.bella-course-editor) .bella-section-tabs{overflow-x:auto;white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.bella-ui-wizard__progress::after{animation:none}.bella-ui-wizard__progress::before{transition:none}}

/* Staff dashboard and canonical Huiswerk wizard connection. */
.bella-role-dashboard{display:grid;gap:18px}
.bella-role-dashboard__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:14px}
.bella-role-card{min-height:104px;padding:18px;border-radius:var(--bella-radius-lg);box-shadow:none;background:linear-gradient(145deg,var(--bella-surface),var(--bella-surface-subtle))}
.bella-role-card>small{font-weight:600;color:var(--bella-accent)}
.bella-trainer-dashboard-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.bella-trainer-panel{min-width:0;padding:22px;background:var(--bella-surface);border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);box-shadow:var(--bella-shadow)}
.bella-trainer-panel h3{margin:0 0 14px}
.bella-trainer-panel__rows{display:grid}
.bella-trainer-panel__rows>a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:14px 2px;color:var(--bella-text);text-decoration:none;border-top:1px solid var(--bella-border)}
.bella-trainer-panel__rows>a:first-child{border-top:0}.bella-trainer-panel__rows span{display:grid;gap:4px;min-width:0}.bella-trainer-panel__rows small{color:var(--bella-muted)}.bella-trainer-panel__rows b{padding:6px 10px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent);font:inherit;font-weight:700;white-space:nowrap}.bella-trainer-panel__rows i{font-style:normal;color:var(--bella-accent)}
[data-bella-modal-root]>.kwispel-modal .kwispel-homework-edit-card-premium,.kwispel-homework-editor-page .kwispel-homework-edit-card-premium{background:transparent!important;box-shadow:none!important;border:0!important;padding:0!important}
[data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit)>.kwispel-modal-card{width:min(920px,calc(100vw - 48px));padding:0;overflow:hidden;background:var(--bella-surface);opacity:1}
[data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit) .kwispel-homework-editor-hero{display:none}
[data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit) .kwispel-homework-bella-wizard{max-height:calc(100vh - 132px);overflow:auto;background:var(--bella-surface)}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-homework-premium-table{background:transparent;border:0;box-shadow:none;padding:0}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-homework-quick-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-homework-field-title{grid-column:1/-1}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-steps-list{display:grid;gap:14px}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-step-builder-item{padding:16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface-subtle)}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-step-builder-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-bottom:14px}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-step-builder-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;white-space:nowrap}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-step-builder-grid-simple,:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-step-content-label{display:grid;gap:7px}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-step-content-label{margin-top:12px}
.kwispel-homework-editor-page .kwispel-step-content-label textarea{min-height:260px;resize:vertical}
:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-step-add-action[hidden]{display:none}

/* Huiswerk and Groups reuse the central card, action and token vocabulary. */
.bella-homework-course-grid{display:grid;clear:both;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:16px;max-width:100%;margin-top:8px;overflow:clip}.bella-homework-course-card{box-sizing:border-box;display:grid;grid-template-columns:1fr;justify-items:center;align-content:start;gap:10px;min-width:0;min-height:240px;height:100%;padding:22px;background:var(--bella-surface);text-align:center}.bella-homework-course-card .bella-course-learning-card__icon{width:58px;height:58px}.bella-homework-course-card .bella-course-learning-card__icon svg{width:32px;height:32px}.bella-homework-course-card h3,.bella-homework-course-card p{margin:0}.bella-homework-course-card p{color:var(--bella-muted)}.bella-homework-course-card>a{margin-top:4px}
.kwispel-homework-lessons-panel{display:grid;gap:20px}.kwispel-homework-lessons-head{display:flex;align-items:center;gap:14px}.kwispel-homework-lessons-head h2,.kwispel-homework-lessons-head p{margin:0}.kwispel-homework-lessons-head p{margin-top:4px;color:var(--bella-muted)}.kwispel-homework-lessons-panel>.kwispel-two-metrics{display:flex;gap:10px}.kwispel-homework-lessons-panel>.kwispel-two-metrics>span{display:inline-flex;gap:5px;padding:7px 11px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent)}.kwispel-homework-bulk-form{display:grid;gap:20px}.kwispel-homework-bulk-toolbar{display:grid;grid-template-columns:auto minmax(220px,1fr) minmax(280px,1.4fr) auto;align-items:end;gap:14px;padding:16px 18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface-subtle)}.kwispel-homework-select-all,.kwispel-homework-swap-option{display:flex;align-items:center;gap:9px;min-height:var(--bella-control-height);cursor:pointer}.kwispel-homework-select-all input,.kwispel-homework-swap-option input,.kwispel-homework-lesson-select input{width:19px;height:19px;margin:0;accent-color:var(--bella-accent)}.kwispel-homework-bulk-target,.kwispel-homework-swap-option>span{display:grid;gap:5px}.kwispel-homework-bulk-target>span{font-weight:650}.kwispel-homework-bulk-target select{width:100%;min-height:var(--bella-control-height)}.kwispel-homework-swap-option small{color:var(--bella-muted);font-weight:400;line-height:1.35}.kwispel-homework-bulk-toolbar button:disabled{opacity:.45;cursor:not-allowed}.kwispel-homework-split-section{display:grid;gap:12px}.kwispel-homework-split-section>h3{display:flex;align-items:center;gap:8px;margin:0}.kwispel-homework-lesson-list{display:grid;gap:10px}.kwispel-homework-lesson-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface)}.kwispel-homework-lesson-row.has-selection{grid-template-columns:auto minmax(0,1fr) auto}.kwispel-homework-lesson-row:has(.kwispel-homework-lesson-select input:checked){border-color:var(--bella-accent-border);background:var(--bella-accent-soft)}.kwispel-homework-lesson-select{display:grid;place-items:center;align-self:stretch;padding-right:2px;cursor:pointer}.kwispel-homework-lesson-main{display:grid;gap:3px}.kwispel-homework-lesson-main h4{margin:0}.kwispel-homework-lesson-kicker,.kwispel-homework-release-note{color:var(--bella-muted)}.kwispel-course-practice-order{padding:14px 16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface-subtle)}.kwispel-course-practice-order>summary{display:flex;align-items:center;gap:8px;cursor:pointer}.kwispel-course-practice-order>summary small{margin-left:auto;color:var(--bella-muted)}
.kwispel-group-visibility-switch{display:flex;gap:8px;margin-bottom:16px}.kwispel-group-visibility-switch a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--bella-border);border-radius:999px;color:var(--bella-muted);font-size:var(--kw-type-compact-meta-size,13px);text-decoration:none}.kwispel-group-visibility-switch a.is-active{border-color:var(--bella-accent-border);background:var(--bella-accent-soft);color:var(--bella-accent)}.kwispel-groups-day-board,.kwispel-groups-day-section{display:grid;gap:16px}.kwispel-groups-day-section+.kwispel-groups-day-section{margin-top:12px}.kwispel-groups-day-board>.kwispel-groups-day-section>.kwispel-groups-day-heading{display:flex;align-items:center;justify-content:space-between}.kwispel-groups-day-heading h2{margin:0}.kwispel-groups-day-heading>span{color:var(--bella-muted)}.kwispel-groups-day-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kwispel-groups-day-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;padding:18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:var(--bella-shadow);cursor:pointer}.kwispel-groups-day-card:focus-visible{outline:3px solid var(--bella-focus);outline-offset:2px}.kwispel-groups-day-card-head{grid-column:1/-1;display:flex;justify-content:space-between;gap:14px}.kwispel-groups-day-card-head h3{margin:8px 0 0}.kwispel-group-ref-badge,.kwispel-group-start-badge{display:inline-flex;margin-right:6px;padding:4px 8px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent)}.kwispel-groups-day-dates,.kwispel-groups-day-next{display:grid;gap:4px}.kwispel-group-meta-label{color:var(--bella-muted)}.kwispel-group-meta-value{display:flex;gap:7px;flex-wrap:wrap}.kwispel-groups-day-actions{grid-column:1/-1;margin:0!important;padding-top:12px;border-top:1px solid var(--bella-border)}
.kwispel-group-info-page,.kwispel-schedule-section,.kwispel-billing-workflow,.kwispel-mail-workflow{display:grid;gap:16px}.kwispel-group-info-grid,.kwispel-billing-workflow__summary,.kwispel-mail-workflow__summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.kwispel-group-info-panel,.kwispel-group-workflow-panel,.kwispel-schedule-section,.kwispel-billing-workflow__summary>div,.kwispel-mail-workflow__summary>div{padding:18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface)}.kwispel-group-info-item{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--bella-border)}.kwispel-group-info-item:last-child{border-bottom:0}.kwispel-group-info-label{color:var(--bella-muted)}.kwispel-schedule-table{width:100%;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);overflow:hidden;background:var(--bella-surface)}
@media(max-width:780px){.bella-homework-course-card{min-height:0}.kwispel-homework-bulk-toolbar{grid-template-columns:1fr;align-items:stretch}.kwispel-homework-bulk-toolbar button{width:100%}.kwispel-homework-lesson-row{grid-template-columns:1fr}.kwispel-homework-lesson-row.has-selection{grid-template-columns:auto minmax(0,1fr)}.kwispel-homework-lesson-row>.kwispel-icon-actions{grid-column:1/-1;justify-self:end}.kwispel-homework-editor-page .kwispel-step-content-label textarea{min-height:190px}.kwispel-groups-day-grid,.kwispel-group-info-grid,.kwispel-billing-workflow__summary,.kwispel-mail-workflow__summary{grid-template-columns:1fr}}
@media(max-width:1100px){.bella-role-dashboard__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:780px){.bella-role-dashboard__grid{display:flex}.bella-trainer-dashboard-panels{grid-template-columns:1fr}.bella-trainer-panel__rows>a{grid-template-columns:minmax(0,1fr) auto}.bella-trainer-panel__rows i{display:none}[data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit)>.kwispel-modal-card{width:100%;max-height:94vh;border-radius:var(--bella-radius-lg) var(--bella-radius-lg) 0 0;border-bottom:0}:is([data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit),.kwispel-homework-editor-page) .kwispel-homework-quick-grid{grid-template-columns:1fr}[data-bella-modal-root]>:is(#kw-homework-add,#kw-homework-edit) .kwispel-homework-bella-wizard{max-height:calc(94vh - 78px)}.kwispel-homework-editor-page{border-radius:var(--bella-radius-md)}.kwispel-homework-editor-page .kwispel-step-builder-head{grid-template-columns:1fr}.kwispel-homework-editor-page .kwispel-step-builder-actions{justify-content:flex-start;white-space:normal}}

/* Public enrollment reuses the central liquid wizard progress and actions. */
.kwispelplanning-enrollment .kwispelplanning-progress{margin-bottom:var(--bella-space-6)}
.kwispelplanning-enrollment form>p:last-child{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.kwispelplanning-enrollment{font-family:var(--bella-font-body);font-size:var(--bella-type-body-size);line-height:var(--bella-type-body-line-height)}
.kwispelplanning-enrollment [data-owner-status]{font-size:var(--bella-type-section-title-size);font-weight:var(--bella-type-section-title-weight);line-height:1.25;letter-spacing:-.015em}
.kwispelplanning-enrollment :is(input,select,textarea,button){font:inherit}
.kwispelplanning-owner-summary{display:grid;width:min(100%,720px);margin:0 auto;padding:6px 22px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:var(--bella-shadow)}
.kwispelplanning-owner-summary>div{display:grid;grid-template-columns:minmax(150px,.4fr) minmax(0,1fr);gap:18px;padding:13px 0;border-bottom:1px solid var(--bella-border)}
.kwispelplanning-owner-summary>div:last-child{border-bottom:0}.kwispelplanning-owner-summary strong{color:var(--bella-muted)}
@media(max-width:760px){.kwispelplanning-owner-summary{padding:5px 16px}.kwispelplanning-owner-summary>div{grid-template-columns:1fr;gap:3px;padding:11px 0}}

/* Compact homework catalogue and schedule: no viewport overflow, one visual hierarchy. */
.bella-portal--theme-shell:has(.kw-secondary-hero--internal) :is(.bella-ui-page-header--after-secondary-hero,.bella-eco-content){width:auto;max-width:none;min-width:0}
.kwispel-schedule-wrap{display:grid;gap:16px;min-width:0}.kwispel-schedule-wrap>p,.kwispel-schedule-wrap>h2{margin:0}
.kwispel-schedule-wrap form,.kwispel-schedule-section{min-width:0}.kwispel-schedule-table{table-layout:fixed}
.kwispel-schedule-table td{padding:0}.kw-schedule-summary-button{appearance:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;min-width:0;padding:16px 18px;border:0;background:transparent;color:var(--bella-text);font:inherit;text-align:left;cursor:pointer}
.kw-schedule-summary-button:is(:hover,:focus-visible){background:var(--bella-accent-soft)}.kw-summary-title{display:grid;gap:3px;min-width:0}.kw-summary-title small{color:var(--bella-muted);font:inherit}.kw-summary-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;white-space:nowrap}.kw-summary-date{color:var(--bella-muted)}.kw-status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--bella-surface-subtle);color:var(--bella-muted)}.kw-status-pill.is-done{background:color-mix(in srgb,#2d9d62 12%,transparent);color:#207547}.kw-status-pill.is-planned{background:var(--bella-accent-soft);color:var(--bella-accent)}.kw-summary-open{font-weight:700;color:var(--bella-accent)}
.kw-schedule-edit-card{padding:18px;background:var(--bella-surface-subtle)}.kw-schedule-action-card,.kw-schedule-done-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface)}.kw-schedule-action-text,.kw-schedule-done-card>div{display:grid;gap:4px}.kw-schedule-action-text small,.kw-schedule-done-card small{color:var(--bella-muted)}
@media(max-width:780px){.kw-schedule-summary-button{grid-template-columns:1fr}.kw-summary-meta{justify-content:flex-start;flex-wrap:wrap;white-space:normal}.kw-schedule-action-card,.kw-schedule-done-card{align-items:stretch;flex-direction:column}}

/* Compact group and lesson management, built on the central Portal tokens. */
.bella-eco-content>.kwispel-management-tab-actions{float:right;margin-bottom:10px}
.kwispel-group-visibility-switch{display:inline-flex;gap:6px;margin:0 0 12px}
.kwispel-group-visibility-switch a{padding:7px 10px}
.kwispel-groups-day-board{clear:both;gap:18px}
.kwispel-groups-day-section{gap:8px}
.kwispel-groups-day-section+.kwispel-groups-day-section{margin-top:0}
.kwispel-groups-day-heading h2{font-size:var(--bella-h4-size);line-height:var(--bella-h4-line-height)}
.kwispel-groups-day-grid{display:grid;grid-template-columns:1fr;gap:7px}
.kwispel-groups-day-card{grid-template-columns:minmax(260px,1.5fr) minmax(135px,.65fr) minmax(170px,.8fr) auto;align-items:center;gap:10px 16px;padding:11px 14px;border-radius:var(--bella-radius-md);box-shadow:none}
.kwispel-groups-day-card-head{grid-column:auto;align-items:center}.kwispel-groups-day-card-head h3{margin:3px 0 0;font-size:var(--bella-text-size);line-height:1.35}
.kwispel-group-ref-badge,.kwispel-group-start-badge{padding:2px 6px}
.kwispel-groups-day-dates,.kwispel-groups-day-next{gap:2px}
.kwispel-groups-day-actions{grid-column:auto;padding:0;border:0;flex-wrap:nowrap!important}
.kwispel-groups-day-card-head .kwispel-trainer-group-head-actions{display:none}
.kwispel-schedule-section{padding:0;overflow:hidden}.kwispel-schedule-section>h3{padding:14px 16px 8px;margin:0}
.kw-schedule-edit-card{padding:14px}.kw-schedule-action-card,.kw-schedule-done-card{padding:13px}
.kw-profile-step-title>strong{display:none}
@media(max-width:1100px){.kwispel-groups-day-card{grid-template-columns:minmax(240px,1fr) minmax(150px,.7fr) auto}.kwispel-groups-day-dates{display:none}}
@media(max-width:780px){.bella-eco-content>.kwispel-management-tab-actions{float:none}.kwispel-groups-day-card{grid-template-columns:1fr}.kwispel-groups-day-dates{display:grid}.kwispel-groups-day-actions{justify-content:flex-start!important}}

/* Groups overview: design-faithful central Portaal presentation for Huiswerk-owned data. */
.kwispel-groups-overview-toolbar{clear:both;display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:12px;align-items:center;margin:0 0 18px}.kwispel-groups-quick-search{position:relative}.kwispel-groups-quick-search input{width:100%;height:46px;padding:0 16px 0 46px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text);font:inherit}.kwispel-groups-toolbar-icon{position:absolute;left:16px;top:50%;width:22px;height:22px;color:var(--bella-muted);transform:translateY(-50%)}.kwispel-groups-overview-toolbar svg,.kwispel-group-card-meta svg,.kwispel-group-mobile-metrics svg,.kwispel-group-card-issues svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.kwispel-groups-overview-toolbar .bella-button{white-space:nowrap}.kwispel-groups-day-heading,.kwispel-groups-day-dates,.kwispel-groups-day-next{display:none}.kwispel-groups-day-card{grid-template-columns:1fr;border-left-width:3px}.kwispel-groups-day-card-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.kwispel-group-card-copy{min-width:0}.kwispel-group-card-title-row{display:flex;align-items:center;gap:10px}.kwispel-group-card-title-row h3{margin:0}.kwispel-group-status-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--bella-surface-subtle);color:var(--bella-muted);white-space:nowrap}.kwispel-group-status-pill i{width:8px;height:8px;border-radius:999px;background:currentColor}.kwispel-group-status-pill.is-live{background:color-mix(in srgb,#2d9d62 14%,var(--bella-surface));color:#207547}.kwispel-group-status-pill.is-soon{background:color-mix(in srgb,#e99726 16%,var(--bella-surface));color:#a95e00}.kwispel-group-status-pill.is-inactive{background:var(--bella-surface-subtle);color:var(--bella-muted)}.kwispel-group-card-meta{display:flex;align-items:center;gap:14px;margin-top:8px;color:var(--bella-muted);font-size:var(--kw-type-compact-meta-size,13px);line-height:1.35}.kwispel-group-card-meta span{display:inline-flex;align-items:center;gap:6px}.kwispel-group-card-meta svg{width:17px;height:17px}.kwispel-group-card-issues{display:flex;gap:6px}.kwispel-group-card-issues span{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:color-mix(in srgb,#e99726 14%,var(--bella-surface));color:#a95e00}.kwispel-group-mobile-metrics{display:flex;justify-content:center;padding:14px 0;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:color-mix(in srgb,var(--bella-accent-soft) 26%,var(--bella-surface))}.kwispel-group-mobile-metrics>span{display:grid;flex:1;justify-items:center;gap:4px;text-align:center;padding:0 8px}.kwispel-group-mobile-metrics>span+span{border-left:1px solid var(--bella-border)}.kwispel-group-mobile-metrics svg{color:var(--bella-accent)}.kwispel-group-mobile-open{display:flex;align-items:center;justify-content:space-between;padding:11px 2px 0;color:var(--bella-accent);font-weight:700;text-decoration:none}.kwispel-groups-day-actions{display:none!important}.kwispel-groups-day-card--live{border-left-color:#2d9d62}.kwispel-groups-day-card--soon{border-left-color:#e99726}.kwispel-groups-day-card--neutral,.kwispel-groups-day-card--not-active{border-left-color:var(--bella-border)}
@media(max-width:780px){
  body:has(#kw-groups-mobile-hero) .bella-portal__content{padding-top:0}
  .bella-eco-content:has(.kwispel-frontend-groups){margin-inline:-4px}.kwispel-frontend-groups{display:flex;flex-direction:column;gap:14px}.kwispel-frontend-groups>#kw-groups-mobile-hero{order:-4}.kwispel-frontend-groups>.kwispel-group-visibility-switch{order:-3;margin:-18px 10px 0;padding:8px;position:relative;z-index:4;background:var(--bella-surface);border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);box-shadow:var(--bella-shadow);overflow:auto}.kwispel-group-visibility-switch a{flex:1 0 auto;justify-content:center;padding:8px 10px}.kwispel-frontend-groups>.kwispel-groups-overview-toolbar{order:-2;margin:0 10px}.kwispel-frontend-groups>.kwispel-group-filter-card{order:-1;margin:0 10px}.bella-eco-content>.kwispel-management-tab-actions{display:none}.kwispel-groups-overview-toolbar{grid-template-columns:minmax(0,1fr) 42px auto;gap:7px}.kwispel-groups-overview-toolbar>.bella-button--primary{grid-column:auto;min-width:0;height:42px;padding:0 9px;gap:4px;font-size:calc(var(--kw-type-compact-meta-size,13px) - 1px)}.kwispel-groups-overview-toolbar>.bella-button--primary svg{width:16px;height:16px}.kwispel-groups-filter-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.kwispel-groups-filter-button{width:42px;height:42px;padding:0;justify-content:center}.kwispel-groups-quick-search{min-width:0}.kwispel-groups-quick-search input[type=search]{min-width:0;height:42px;padding-left:42px!important;padding-right:10px!important;font-size:var(--kw-type-compact-meta-size,13px)}.kwispel-groups-toolbar-icon{left:13px;width:19px;height:19px}.kwispel-groups-day-board{gap:14px;padding:0}.kwispel-groups-day-heading{display:none}.kwispel-groups-day-grid{gap:14px}.kwispel-groups-day-card{display:grid;grid-template-columns:1fr;padding:18px 14px 12px;border-left:3px solid var(--bella-border);border-radius:var(--bella-radius-lg);box-shadow:var(--bella-shadow);overflow:hidden}.kwispel-groups-day-card--live{border-left-color:#2d9d62}.kwispel-groups-day-card--soon{border-left-color:#e99726}.kwispel-groups-day-card-head{position:relative;grid-template-columns:64px minmax(0,1fr);gap:12px;min-width:0}.kwispel-group-ref-badge{display:grid;place-items:center;width:58px;height:58px;margin:0;border-radius:50%;font-size:20px;font-weight:800}.kwispel-group-card-title-row{align-items:flex-start;justify-content:space-between}.kwispel-groups-day-card-head:has(.kwispel-group-card-issues:not(:empty)) .kwispel-group-card-title-row{padding-right:44px}.kwispel-group-card-title-row h3{font-size:var(--bella-h4-size);line-height:var(--bella-h4-line-height)}.kwispel-group-status-pill{font-size:11px}.kwispel-group-card-meta{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:calc(var(--kw-type-compact-meta-size,13px) - 2px);line-height:1.2;white-space:nowrap}.kwispel-group-card-meta svg{width:15px;height:15px}.kwispel-group-card-issues{position:absolute;top:0;right:0;align-self:start}.kwispel-group-card-issues:empty{display:none}.kwispel-groups-day-dates,.kwispel-groups-day-next,.kwispel-groups-day-actions{display:none!important}.kwispel-group-mobile-metrics{display:flex;justify-content:center;margin-top:2px;padding:7px 0;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:color-mix(in srgb,var(--bella-accent-soft) 26%,var(--bella-surface))}.kwispel-group-mobile-metrics>span{display:grid;flex:1;justify-items:center;gap:2px;text-align:center;padding:0 4px}.kwispel-group-mobile-metrics>span+span{border-left:1px solid var(--bella-border)}.kwispel-group-mobile-metrics svg{width:15px;height:15px;color:var(--bella-accent)}.kwispel-group-mobile-metrics strong{font-size:var(--kw-type-compact-meta-size,13px);line-height:1.1;color:var(--bella-heading)}.kwispel-group-mobile-metrics small{font-size:calc(var(--kw-type-compact-meta-size,13px) - 3px);line-height:1.2;color:var(--bella-muted)}.kwispel-group-mobile-open{display:flex;align-items:center;justify-content:space-between;padding:11px 2px 0;color:var(--bella-accent);font-weight:700;text-decoration:none}.kwispel-group-mobile-open svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
}

.bella-ui-group-card{position:relative;padding-right:160px}.bella-ui-group-card__actions{position:absolute;right:14px;top:50%;display:flex;align-items:center;justify-content:flex-end;gap:8px;transform:translateY(-50%)}
@media(max-width:780px){.bella-ui-group-card{padding-right:14px}.bella-ui-group-card__actions{position:static;justify-content:flex-end;padding-top:8px;transform:none}.bella-ui-group-card--mobile-simple{padding:15px 14px 11px;border-radius:var(--bella-radius-md);box-shadow:none}.bella-ui-group-card--mobile-simple .kwispel-groups-day-card-head{grid-template-columns:minmax(0,1fr);gap:8px}.bella-ui-group-card--mobile-simple .kwispel-group-ref-badge{display:none}.bella-ui-group-card--mobile-simple .kwispel-group-card-title-row{align-items:center}.bella-ui-group-card--mobile-simple .kwispel-group-card-meta{white-space:normal;flex-wrap:wrap}.bella-ui-group-card--mobile-simple .bella-ui-group-card__actions{display:none}.bella-ui-group-card--mobile-simple .kwispel-group-mobile-open{display:flex}}
@media(min-width:781px){.bella-ui-group-card--mobile-simple:not(.kwispel-groups-day-card--has-mobile-summary) .kwispel-group-mobile-open{display:none}}

/* Canonical compact lesson planner. */
.kwispel-schedule-wrap>h2{font-size:var(--kw-type-h3-size);margin:0 0 4px}
.kwispel-schedule-wrap form{display:grid;gap:16px}
.kwispel-schedule-section{border:0;background:transparent;border-radius:0}
.kwispel-schedule-section>h3{padding:0 0 8px}
.kwispel-schedule-table{border:0;border-collapse:separate;border-spacing:0 7px;background:transparent}
.kwispel-schedule-table tr{background:var(--bella-surface)}
.kwispel-schedule-summary td{border:1px solid var(--bella-border);border-radius:var(--bella-radius-md)}
.kw-schedule-summary-button{min-height:58px;padding:11px 14px;border-radius:inherit}
.kw-summary-title{position:relative;padding-left:38px}.kw-summary-title:before{content:'✓';position:absolute;left:0;top:50%;display:grid;place-items:center;width:27px;height:27px;border-radius:999px;background:var(--bella-surface-subtle);color:var(--bella-muted);transform:translateY(-50%)}
.kw-schedule-summary.is-planned .kw-summary-title:before{content:'•';background:var(--bella-accent-soft);color:var(--bella-accent)}
.kw-schedule-edit-row td{border:0!important}.kw-schedule-edit-card{margin:0 10px 8px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md)}
.kw-summary-open{font-size:0}.kw-summary-open:after{content:'Bekijken';font-size:var(--bella-button-size)}
.kwispel-schedule-section-practice .kwispel-schedule-table tr:first-child .kw-schedule-summary-button{border-left:4px solid var(--bella-accent);background:linear-gradient(90deg,var(--bella-accent-soft),transparent 42%)}
.kwispel-schedule-more{justify-self:start;margin-top:8px}

/* Rich lesson timeline: one lesson name, separate moment and semantic state icons. */
.kwispel-schedule-hero{display:flex;align-items:center;gap:20px;padding:24px 28px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:linear-gradient(120deg,var(--bella-surface),var(--bella-accent-soft));box-shadow:var(--bella-shadow)}
.kwispel-schedule-hero__icon{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent)}
.kwispel-schedule-hero__icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.kwispel-schedule-hero h2,.kwispel-schedule-hero p{margin:0}.kwispel-schedule-hero p{margin-top:5px;color:var(--bella-muted)}
.kwispel-schedule-section-practice{padding:0;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);overflow:hidden}
.kwispel-schedule-section-practice>h3{padding:18px 20px 10px}
.kwispel-schedule-section-practice .kwispel-schedule-table{border-spacing:0;background:var(--bella-surface)}
.kwispel-schedule-section-practice .kwispel-schedule-summary td{border:0;border-top:1px solid var(--bella-border);border-radius:0}
.kwispel-schedule-section-practice .kw-schedule-summary-button{grid-template-columns:minmax(220px,1fr) auto;min-height:78px;padding:14px 22px}
.kwispel-schedule-section-practice .kw-summary-title{display:flex;align-items:center;min-height:40px;padding-left:52px}
.kwispel-schedule-section-practice .kw-summary-title strong{font-size:var(--bella-text-size);line-height:1.35}
.kwispel-schedule-section-practice .kw-summary-title:before{left:0;width:40px;height:40px;background:var(--bella-accent-soft);color:var(--bella-accent);font-size:22px}
.kwispel-schedule-section-practice .kw-summary-meta{display:grid;grid-template-columns:minmax(116px,auto) minmax(76px,auto) 38px 22px;gap:18px}
.kw-summary-fact{display:inline-flex;align-items:center;gap:8px;color:var(--bella-muted);white-space:nowrap}
.kw-summary-fact svg,.kw-summary-status-icon svg,.kw-summary-chevron svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kw-summary-fact--date{color:var(--bella-accent)}.kw-summary-fact--date span,.kw-summary-fact--time span{color:var(--bella-muted)}
.kw-summary-status-icon{display:grid;place-items:center;width:36px;height:36px;border:2px solid currentColor;border-radius:999px}
.kw-summary-status-icon.is-done{color:var(--bella-success)}.kw-summary-status-icon.is-mail-pending{color:#5874d9}.kw-summary-status-icon.is-mail-error{border:0;color:var(--bella-warning)}.kw-summary-status-icon.is-planned{color:var(--bella-accent)}.kw-summary-status-icon.is-open{color:var(--bella-danger)}
.kw-summary-chevron{display:grid;place-items:center;color:var(--bella-muted);transition:transform .18s ease}.kw-schedule-summary-button[aria-expanded="true"] .kw-summary-chevron{transform:rotate(90deg)}
.kwispel-schedule-section-practice .kwispel-schedule-table tr:first-child .kw-schedule-summary-button{border-left:0;background:linear-gradient(90deg,var(--bella-accent-soft),transparent 48%)}
.kwispel-schedule-section-practice .kwispel-schedule-more{margin:12px 20px 18px}
@media(max-width:780px){.kwispel-schedule-hero{padding:18px}.kwispel-schedule-section-practice .kw-schedule-summary-button{grid-template-columns:1fr;gap:10px;min-height:0;padding:14px 15px}.kwispel-schedule-section-practice .kw-summary-meta{display:flex;justify-content:flex-start;gap:8px;flex-wrap:wrap;white-space:normal}.kwispel-schedule-section-practice .kw-summary-title{padding-left:46px}.kwispel-schedule-section-practice .kw-summary-title:before{width:36px;height:36px}}

/* Student status rows and actions use the central icon primitive. */
.kwispel-group-students-list{display:grid;gap:7px;margin-top:10px}
.kwispel-group-student-row{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface)}
.kwispel-group-student-main{display:grid;gap:2px}.kwispel-group-student-main small{color:var(--bella-muted)}
.kwispel-student-tracking,.kwispel-group-student-actions,.kwispel-trainer-inline-details{display:flex;align-items:center;justify-content:flex-end;gap:7px}
.kwispel-track-badge{cursor:help}.kwispel-track-badge.is-ok{color:#207547;background:color-mix(in srgb,#2d9d62 12%,var(--bella-surface))}.kwispel-track-badge.is-pending{color:var(--bella-muted)}.kwispel-track-badge.is-error{color:var(--bella-danger)}

/* Group edit and reschedule use the same central modal/form geometry. */
.kwispel-group-edit-modal .bella-ui-modal__panel{width:min(720px,calc(100vw - 40px))}
.kwispel-group-edit-modal .bella-ui-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kwispel-group-edit-modal .bella-ui-modal__header,.kw-reschedule-modal-head{padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid var(--bella-border)}
.kwispel-group-edit-modal label,.kw-reschedule-fields label{display:grid;gap:6px}
.kwispel-group-edit-time-field{grid-column:1/-1}.kwispel-group-edit-time-field>select{display:inline-block;width:calc(50% - 5px)}
.kwispel-group-edit-modal .kwispel-modal-actions{grid-column:1/-1}
.kw-reschedule-modal-card{width:min(720px,calc(100vw - 40px))!important}
.kw-reschedule-modal-head .kwispel-ui-kicker,.kw-reschedule-modal-head .kwispel-modal-header-icon{display:none}
.kw-reschedule-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}.kw-reschedule-fields select{min-width:0}
.kw-reschedule-choice{display:grid;gap:8px;margin-top:16px}.kw-reschedule-choice label{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:9px;padding:11px 12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface)}
.kw-reschedule-choice label:has(input:checked){border-color:var(--bella-accent);background:var(--bella-accent-soft)}
.bella-baasje-test-mode small{grid-column:2;color:var(--bella-muted)}
@media(max-width:780px){.kwispel-group-student-row{grid-template-columns:1fr}.kwispel-student-tracking,.kwispel-group-student-actions,.kwispel-trainer-inline-details{justify-content:flex-start}.kwispel-group-edit-modal .bella-ui-form-grid,.kw-reschedule-fields{grid-template-columns:1fr}}

/* Mijn omgeving shell. */
@media(min-width:901px){
 .bella-portal--theme-shell{--bella-sidebar:280px;grid-template-columns:var(--bella-sidebar) minmax(0,1fr);transition:grid-template-columns .2s ease}
 .bella-portal--theme-shell>.bella-portal__sidebar{position:sticky;top:0;inset-block-start:0;align-self:start;width:var(--bella-sidebar);height:100vh;min-height:620px;padding:20px 18px 18px;background-color:color-mix(in srgb,var(--bella-accent) 8%,var(--bella-surface));background-image:linear-gradient(color-mix(in srgb,var(--bella-surface) 72%,transparent),color-mix(in srgb,var(--bella-surface) 72%,transparent)),url('../images/sidebar-background.webp');background-size:cover,auto 100%;background-position:center,left bottom;background-repeat:no-repeat;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;transition:width .2s ease,padding .2s ease,transform .2s ease}.bella-portal--theme-shell>.bella-portal__sidebar::-webkit-scrollbar{display:none}
 .bella-portal--theme-shell:has(.bella-learning-nav){--bella-sidebar:320px}
 .bella-portal--theme-shell .bella-portal__desktop-collapse{display:grid!important;position:absolute;right:8px;top:74px;width:30px;height:30px;place-items:center;border:1px solid color-mix(in srgb,var(--bella-accent) 20%,var(--bella-border));border-radius:50%;background:var(--bella-surface);color:var(--bella-accent);cursor:pointer;z-index:3}
 .bella-portal--theme-shell .bella-portal__desktop-collapse svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__desktop-collapse svg{transform:rotate(180deg)}
 .bella-portal--theme-shell.is-sidebar-collapsed{grid-template-columns:82px minmax(0,1fr)}
 .bella-portal--theme-shell.is-sidebar-collapsed>.bella-portal__sidebar{width:82px;padding-inline:13px;transform:none}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__brand-link>span:last-child,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__brand .kw-brand>span:last-child,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-main:not(button)>:not(:first-child),
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-main{font-size:0}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-main>span:first-child{font-size:20px;margin:auto}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-sub,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-label,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__sidebar-foot{display:none}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-course-nav summary{grid-template-columns:1fr;justify-items:center;padding-inline:0}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-course-nav__meta,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-course-nav__identity,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-course-nav__chevron,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-course-nav__lessons{display:none}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-course-nav summary>span:first-child{font-size:20px}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__brand{padding-inline:0;justify-content:center}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__brand-link{display:block}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__brand .kw-brand{justify-content:center;width:100%;text-shadow:none}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__brand .kw-brand__paw{flex-basis:34px;color:var(--bella-accent)}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-group--management>.bella-portal__nav-main>span,
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-main>i{display:none}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__nav-group--management>.bella-portal__nav-main::before{content:'◇';font-size:20px;margin:auto}
 .bella-portal--theme-shell.is-sidebar-collapsed .bella-portal__page{padding-left:32px}
 .bella-portal--theme-shell.is-sidebar-collapsed>.bella-portal__desktop-reopen{display:none!important}
}

.bella-portal--theme-shell .bella-portal__nav-main:is(:hover,:focus-visible,.is-current){background:var(--bella-accent-soft);color:var(--bella-accent);font-weight:var(--bella-type-section-title-weight)}
.bella-portal{max-width:100%;overflow-x:clip}.bella-portal__page{min-width:0;max-width:100%}body:has(.bella-portal--theme-shell) .kw-bella-page{padding-top:0}.bella-portal--theme-shell .bella-portal__nav-sub a,.bella-portal--theme-shell .bella-portal__nav-sub button{border:0;background:transparent}.bella-portal--theme-shell .bella-portal__nav-sub :is(a,button):is(:hover,:focus-visible,.is-current){background:var(--bella-accent-soft);color:var(--bella-accent)}.bella-portal__nav-nested{display:grid}.bella-portal__nav-sub-parent{display:flex;width:100%;align-items:center;justify-content:space-between;padding:9px 11px;border-radius:var(--bella-radius-sm);color:var(--bella-text);font:inherit;font-weight:750;text-align:left;cursor:pointer}.bella-portal__nav-sub-parent i{font-style:normal}.bella-portal__nav-nested.is-open>.bella-portal__nav-sub-parent i{transform:rotate(180deg)}.bella-portal__nav-nested-items{display:grid}.bella-portal__nav-nested-items[hidden]{display:none}.bella-portal__support-slot,.bella-portal__credit{position:relative;z-index:1}.bella-portal__credit{position:relative;margin-top:10px;text-align:center;pointer-events:auto}.bella-portal__credit small{display:block;font-size:9px}.bella-portal__credit a{display:inline-block;color:color-mix(in srgb,var(--bella-text) 66%,transparent);line-height:1.1;text-shadow:0 1px 4px color-mix(in srgb,var(--bella-surface) 84%,transparent)}
@media(min-width:901px){.bella-portal--theme-shell .bella-portal__sidebar-foot{isolation:isolate}.bella-portal--theme-shell .bella-portal__sidebar-foot:before{content:none}.bella-portal--theme-shell .bella-portal__credit{z-index:3}}
.bella-portal__content>.bella-ui-page,.bella-portal__content>.bella-home,.bella-portal__content>.bella-course{padding-top:0}
.bella-portal__topbar-actions,.bella-portal__topbar-user{display:flex;align-items:center;gap:12px}.bella-portal__notifications{position:relative;display:grid;place-items:center;width:42px;height:42px;color:var(--bella-text);text-decoration:none}.bella-portal__notifications>svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.bella-portal__notifications>b{position:absolute;top:0;right:0;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:var(--bella-accent);color:var(--bella-on-accent);font-size:11px}.bella-portal__topbar-account{position:relative}.bella-portal__topbar-user{border:0;background:transparent;color:var(--bella-text);font:inherit;cursor:pointer}.bella-portal__topbar-user>b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bella-surface-subtle);color:var(--bella-muted)}.bella-portal__topbar-user>b svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8}.bella-portal__topbar-user i{font-style:normal}.bella-portal__account-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:80;display:grid;min-width:260px;padding:8px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface);box-shadow:var(--bella-shadow)}.bella-portal__account-menu[hidden]{display:none}.bella-portal__account-menu a{padding:10px 12px;border-radius:var(--bella-radius-sm);color:var(--bella-text);text-decoration:none}.bella-portal__account-menu a:hover{background:var(--bella-accent-soft);color:var(--bella-accent)}
@media(max-width:900px){.bella-portal__credit{bottom:8px}.bella-portal__topbar{display:none!important}.bella-portal--theme-shell>.bella-portal__sidebar{background-color:color-mix(in srgb,var(--bella-accent) 24%,var(--bella-surface));background-image:url('../images/sidebar-background.webp');background-size:auto 100%;background-position:left bottom;background-repeat:no-repeat;background-blend-mode:luminosity}}
.bella-trainer-panel{border-color:color-mix(in srgb,var(--bella-accent) 16%,var(--bella-border));background:linear-gradient(145deg,var(--bella-surface),color-mix(in srgb,var(--bella-accent) 6%,var(--bella-surface)))}.bella-trainer-panel>h3{color:var(--bella-accent)}.bella-trainer-panel__rows b{background:color-mix(in srgb,var(--bella-accent) 11%,var(--bella-surface));color:var(--bella-accent)}


/* 0.6.84 — one typography source for every modal/wizard host.
 * ECO legacy modal hosts are presentation-neutral: they inherit the exact same
 * canonical Website base font token as the Portaal shell and central wizard. */
.bella-portal :where(.kwispel-modal,.kw-profile-modal,.bella-ui-modal),
.bella-portal :where(.kwispel-modal,.kw-profile-modal,.bella-ui-modal) :where(h1,h2,h3,h4,h5,h6,p,span,a,label,button,input,select,textarea,strong,b,em,small,summary),
:where(.kwispel-modal,.kw-profile-modal,.bella-ui-modal),
:where(.kwispel-modal,.kw-profile-modal,.bella-ui-modal) :where(h1,h2,h3,h4,h5,h6,p,span,a,label,button,input,select,textarea,strong,b,em,small,summary){}
.bella-portal :where(.kwispel-modal,.kw-profile-modal,.bella-ui-modal) :where(input,select,textarea,button){font:inherit}

/* 0.6.134 — one modal atmosphere for every popup and the welcome tour. */
html.bella-tour-lock{overflow:hidden}
.bella-ui-modal__backdrop,.kwispel-modal-backdrop,.kw-profile-modal-backdrop,.bella-dialog__backdrop,.bella-tour__shade,.bella-mobile-more__scrim{
 background:rgba(20,24,32,.58)!important;
 -webkit-backdrop-filter:grayscale(.72) saturate(.55) blur(3px);
 backdrop-filter:grayscale(.72) saturate(.55) blur(3px)
}
.bella-tour{z-index:100100}
.bella-tour__shade{z-index:0}
.bella-tour__surface{box-sizing:border-box;color:var(--bella-text);font:inherit}
.bella-tour__card,.bella-tour__modal{
 position:relative;z-index:2;width:min(620px,calc(100vw - 40px));max-height:calc(100vh - 40px);overflow:auto;
 padding:24px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);
 box-shadow:0 28px 90px rgba(15,23,42,.30)
}
.bella-tour__card.is-centered{position:relative;left:auto!important;top:auto!important}
.bella-tour__card.is-anchored{position:fixed}
.bella-tour__card.is-welcome{text-align:center}
.bella-tour__card :where(h2,p),.bella-tour__modal :where(h2,p){margin-top:0}
.bella-tour__card h2,.bella-tour__modal h2{margin-bottom:10px;font-size:clamp(24px,3vw,34px);line-height:1.15}
.bella-tour__card p,.bella-tour__modal p{line-height:1.55;color:var(--bella-muted)}
.bella-tour__bella{display:block;width:112px;height:112px;margin:0 auto 14px;object-fit:contain}
.bella-tour__welcome-line{margin-bottom:8px!important;color:var(--bella-text)!important;font-weight:650}
.bella-tour__eyebrow{display:block;margin-bottom:8px;color:var(--bella-accent);font-weight:750}
.bella-tour__quiet{min-height:var(--bella-button-height);padding:9px 16px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text);font:inherit;font-weight:700;cursor:pointer}
.bella-tour__access-option{display:grid;gap:4px;padding:15px;text-align:left;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface);color:var(--bella-text);font:inherit;cursor:pointer}
.bella-tour__access-option:is(:hover,:focus-visible){border-color:var(--bella-accent);background:var(--bella-accent-soft)}
.bella-tour__access-option span{color:var(--bella-muted)}
.bella-tour__form label,.bella-tour__account-form label{display:grid;gap:6px}.bella-tour__form input,.bella-tour__account-form input{min-height:var(--bella-control-height);padding:9px 12px;border:1px solid var(--bella-border);border-radius:var(--bella-control-radius);font:inherit}
.bella-tour__spotlight{position:fixed;z-index:1;pointer-events:none;box-shadow:0 0 0 9999px rgba(20,24,32,.10)}
@media(max-width:620px){.bella-tour{padding:12px}.bella-tour__card,.bella-tour__modal{width:100%;max-height:calc(100vh - 24px);padding:20px}.bella-tour__bella{width:88px;height:88px}}

.bella-puppycoach-student{display:grid;gap:16px}.bella-puppycoach-student__body{display:grid;gap:16px}.bella-puppycoach-student__body>.bella-ui-surface{margin:0}
.bella-puppycoach-quick{padding:20px}.bella-puppycoach-quick>header{margin-bottom:14px}.bella-puppycoach-quick>header :is(h3,p){margin:0}.bella-puppycoach-quick>header p{color:var(--bella-muted)}
.bella-puppycoach-dashboard__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}.bella-puppycoach-dashboard__row>div,.bella-puppycoach-dashboard__row>div>.bella-ui-surface{min-width:0;height:100%}.bella-puppycoach-dashboard__row .bella-ui-surface{margin:0}.bella-puppycoach-dashboard__row--top{grid-template-columns:minmax(0,1fr) minmax(360px,1fr)}.bella-puppycoach-dashboard__row--bottom{grid-template-columns:minmax(0,1.45fr) minmax(360px,.95fr)}
.bella-puppycoach-card-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:var(--bella-accent-soft);color:var(--bella-accent);font-size:25px;font-style:normal;font-weight:800}
.bella-puppycoach-summary,.bella-puppycoach-coach,.bella-puppycoach-diary,.bella-puppycoach-overview{padding:20px}
.bella-puppycoach-summary>header,.bella-puppycoach-coach>header,.bella-puppycoach-diary>header,.bella-puppycoach-overview>header{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:0 0 16px;border-bottom:1px solid var(--bella-border)}
.bella-puppycoach-summary>header>div,.bella-puppycoach-coach>header>div,.bella-puppycoach-diary>header>div,.bella-puppycoach-overview>header>div{display:grid;gap:2px;min-width:0}.bella-puppycoach-summary header :is(h4,p),.bella-puppycoach-coach header :is(h4,p),.bella-puppycoach-diary header :is(h4,p),.bella-puppycoach-overview header :is(h4,p){margin:0}.bella-puppycoach-summary header p,.bella-puppycoach-coach header p,.bella-puppycoach-diary header p,.bella-puppycoach-overview header p{color:var(--bella-muted)}
.bella-puppycoach-summary>header>.bella-button{width:auto;margin-left:auto;white-space:nowrap}.bella-puppycoach-summary__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}.bella-puppycoach-summary__stats>span{display:grid;align-content:start;gap:4px;min-height:74px;padding:0 20px;border-right:1px solid var(--bella-border)}.bella-puppycoach-summary__stats>span:first-child{padding-left:6px}.bella-puppycoach-summary__stats>span:last-child{padding-right:6px;border-right:0}.bella-puppycoach-summary__stats strong{color:var(--bella-accent);font-size:1.45rem;line-height:1}.bella-puppycoach-summary__stats small{color:var(--bella-muted)}.bella-puppycoach-summary__stats i{display:block;height:10px;margin-top:4px;overflow:hidden;border-radius:999px;background:var(--bella-surface-subtle)}.bella-puppycoach-summary__stats i b{display:block;width:var(--bella-puppycoach-progress);height:100%;border-radius:inherit;background:var(--bella-accent)}
.bella-puppycoach-coach__notice{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding:14px;border:1px solid color-mix(in srgb,var(--bella-accent) 24%,var(--bella-border));border-radius:var(--bella-radius-sm);background:color-mix(in srgb,var(--bella-accent) 6%,var(--bella-surface))}.bella-puppycoach-coach__notice>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bella-accent-soft);color:var(--bella-accent)}.bella-puppycoach-coach__notice p{margin:4px 0 0;color:var(--bella-text)}
.bella-puppycoach-diary>header>.bella-ui-actions{display:flex;flex-wrap:nowrap;gap:8px;margin:0 0 0 auto}.bella-puppycoach-diary>header>.bella-ui-actions .bella-button{min-height:38px;padding:7px 15px;border-radius:999px}.bella-puppycoach-diary__empty{display:grid;place-items:center;align-content:center;min-height:160px;padding:24px;border:1px dashed color-mix(in srgb,var(--bella-accent) 28%,var(--bella-border));border-radius:var(--bella-radius-sm);background:color-mix(in srgb,var(--bella-accent) 2%,var(--bella-surface));text-align:center}.bella-puppycoach-diary__empty>span{display:grid;place-items:center;width:52px;height:52px;margin-bottom:12px;border-radius:50%;background:var(--bella-accent-soft);color:var(--bella-accent);font-size:24px}.bella-puppycoach-diary__empty p{margin:4px 0 0;color:var(--bella-muted)}
.bella-puppycoach-overview__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.bella-puppycoach-overview__grid>span{display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:8px;min-height:58px;padding:9px;border:1px solid color-mix(in srgb,var(--bella-accent) 18%,var(--bella-border));border-radius:var(--bella-radius-sm);background:color-mix(in srgb,var(--bella-accent) 4%,var(--bella-surface))}.bella-puppycoach-overview__grid>span>i{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--bella-accent-soft);color:var(--bella-accent);font-style:normal}.bella-puppycoach-overview__grid>span>b{display:grid;min-width:0}.bella-puppycoach-overview__grid strong{color:var(--bella-text);line-height:1.1}.bella-puppycoach-overview__grid small{overflow:hidden;color:var(--bella-muted);font-weight:500;text-overflow:ellipsis;white-space:nowrap}
.bella-puppycoach-latest{display:grid;gap:4px}.bella-puppycoach-latest p{margin:0}
@media(max-width:1100px){.bella-puppycoach-dashboard__row,.bella-puppycoach-dashboard__row--top,.bella-puppycoach-dashboard__row--bottom{grid-template-columns:1fr}.bella-puppycoach-overview__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){.bella-puppycoach-quick,.bella-puppycoach-summary,.bella-puppycoach-coach,.bella-puppycoach-diary,.bella-puppycoach-overview{padding:var(--bella-space-3)}.bella-puppycoach-home__groups .bella-ui-actions,.bella-puppycoach-home__rhythm .bella-ui-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.bella-puppycoach-home :is(.bella-puppycoach-home__groups,.bella-puppycoach-home__rhythm) .bella-button{grid-template-columns:30px minmax(0,1fr);min-height:58px;padding:8px}.bella-puppycoach-action__icon{width:30px;height:30px;font-size:17px}.bella-puppycoach-summary>header,.bella-puppycoach-coach>header,.bella-puppycoach-diary>header,.bella-puppycoach-overview>header{align-items:flex-start;flex-wrap:wrap}.bella-puppycoach-summary>header>.bella-button,.bella-puppycoach-diary>header>.bella-ui-actions{width:100%;margin-left:0}.bella-puppycoach-summary__stats{grid-template-columns:1fr}.bella-puppycoach-summary__stats>span,.bella-puppycoach-summary__stats>span:first-child,.bella-puppycoach-summary__stats>span:last-child{min-height:0;padding:10px 0;border-right:0;border-bottom:1px solid var(--bella-border)}.bella-puppycoach-summary__stats>span:last-child{border-bottom:0}.bella-puppycoach-overview__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 0.6.132 — compact groups and contract-aligned modal/wizard controls. */
.kw-schedule-summary-button{min-height:48px;padding:8px 12px}
.kw-schedule-edit-card{padding:10px 12px}.kw-schedule-action-card,.kw-schedule-done-card{padding:8px 10px;border:0;background:transparent}
.kw-schedule-edit-card>.kwispel-lesson-recipients,.kw-schedule-edit-card>.kwispel-group-students-list{margin-top:6px;padding-top:8px;border-top:1px solid var(--bella-border)}
.kwispel-group-edit-time-field{display:block}.kwispel-group-edit-time-field>span{display:block;margin-bottom:6px}.kwispel-group-edit-time-field .kwispel-time-split-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kwispel-group-edit-time-field .kwispel-time-split-wrap>select{width:100%!important;min-height:44px}
.kw-reschedule-modal-card{position:relative;overflow-x:hidden;padding:24px!important}
.kw-reschedule-modal-head{display:block!important;padding:0 48px 12px 0!important;margin-bottom:12px!important}
.kw-reschedule-modal-head .kwispel-modal-close{position:absolute;top:18px;right:18px;display:grid;width:36px;height:36px;padding:0;place-items:center;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text);font-size:22px;line-height:1}
.kw-reschedule-fields input[type=date],.kw-reschedule-fields select{min-height:44px;width:100%;padding:9px 12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-sm);background:var(--bella-surface);color:var(--bella-text);font:inherit}
.kw-reschedule-fields .kwispel-time-split-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}.kw-reschedule-fields .kwispel-time-split-wrap>select{width:100%}
.kw-reschedule-actions{display:flex!important;justify-content:center!important;gap:8px;flex-wrap:wrap}.kw-reschedule-actions>[hidden],[data-kw-reschedule-step-panel][hidden],[data-kw-reschedule-detail-panel][hidden]{display:none!important}
.kwispel-group-students-inline-head{margin:8px 0}.kwispel-group-students-inline-head small,.kwispel-group-students-search{display:none!important}
.kwispel-group-student-actions+.kwispel-trainer-inline-details{margin-left:0}

/* 0.6.150 — central presentation owner for the public Bella Chat widget. */
.bella-chat{position:fixed;z-index:99990;right:22px;bottom:22px;display:grid;justify-items:end;color:var(--bella-text)}
.bella-chat[hidden],.bella-chat [hidden]{display:none!important}
.bella-chat__launcher{display:inline-flex;min-height:52px;padding:8px 18px 8px 8px;align-items:center;gap:10px;border:0;border-radius:999px;background:var(--bella-accent);color:var(--bella-on-accent);box-shadow:0 14px 36px rgba(var(--bella-accent-rgb),.32);font:inherit;font-weight:800;cursor:pointer}
.bella-chat__launcher:is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 18px 42px rgba(var(--bella-accent-rgb),.4)}
.bella-chat__launcher-mark{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--bella-on-accent) 18%,transparent);font-weight:900}
.bella-chat__panel{position:absolute;right:0;bottom:66px;display:grid;width:min(390px,calc(100vw - 28px));max-height:min(680px,calc(100svh - 110px));grid-template-rows:auto minmax(180px,1fr) auto auto auto;overflow:hidden;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:0 24px 70px rgba(46,30,25,.22)}
.bella-chat__head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:11px;align-items:center;padding:15px 16px;background:var(--bella-accent);color:var(--bella-on-accent)}
.bella-chat__avatar{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--bella-on-accent) 18%,transparent);font-weight:900}
.bella-chat__head>div:nth-child(2){display:grid;gap:2px}.bella-chat__head strong{color:inherit}.bella-chat__head span{font-size:12px;opacity:.9}.bella-chat__head span i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#8ee1b6}
.bella-chat__head>button,.bella-chat__mailcard>button{display:grid;width:34px;height:34px;padding:0;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;font-size:24px;cursor:pointer}
.bella-chat__messages{display:grid;align-content:start;gap:10px;min-height:220px;padding:16px;overflow-y:auto;background:color-mix(in srgb,var(--bella-accent-soft) 28%,var(--bella-surface))}
.bella-chat__msg{display:flex}.bella-chat__msg>div{max-width:86%;padding:10px 12px;border-radius:16px;background:var(--bella-surface);box-shadow:0 5px 16px rgba(46,30,25,.07);line-height:1.45}
.bella-chat__msg--user{justify-content:flex-end}.bella-chat__msg--user>div{background:var(--bella-accent);color:var(--bella-on-accent)}
.bella-chat__booking-choices{display:flex;gap:7px;flex-wrap:wrap}.bella-chat__booking-choices button{padding:8px 11px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text);font:inherit;cursor:pointer}.bella-chat__booking-choices button:is(.is-selected,.is-primary){border-color:var(--bella-accent);background:var(--bella-accent);color:var(--bella-on-accent)}
.bella-chat__typing{display:flex;gap:4px;padding:10px 12px}.bella-chat__typing i{width:7px;height:7px;border-radius:50%;background:var(--bella-muted);animation:bella-chat-pulse 1s infinite alternate}.bella-chat__typing i:nth-child(2){animation-delay:.18s}.bella-chat__typing i:nth-child(3){animation-delay:.36s}@keyframes bella-chat-pulse{to{opacity:.25;transform:translateY(-2px)}}
.bella-chat__actions{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--bella-border);overflow-x:auto}
.bella-chat__actions button{min-height:34px;padding:7px 10px;white-space:nowrap;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text);font:inherit;font-size:12px;cursor:pointer}
.bella-chat__composer{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:8px;align-items:end;padding:10px 12px;border-top:1px solid var(--bella-border);background:var(--bella-surface)}
.bella-chat__composer textarea{width:100%;min-height:42px;max-height:130px;padding:10px 12px;resize:none;border:1px solid var(--bella-border);border-radius:18px;background:var(--bella-surface);color:var(--bella-text);font:inherit}
.bella-chat__composer button{display:grid;width:42px;height:42px;padding:0;place-items:center;border:0;border-radius:50%;background:var(--bella-accent);color:var(--bella-on-accent);font-size:19px;cursor:pointer}
.bella-chat__fine{margin:0;padding:0 14px 13px;background:var(--bella-surface);color:var(--bella-muted);font-size:10px;line-height:1.4}
.bella-chat__mail{position:absolute;inset:0;z-index:3;display:grid;padding:16px;place-items:center;background:rgba(35,24,28,.42);backdrop-filter:blur(4px)}
.bella-chat__mailcard{position:relative;display:grid;width:100%;gap:11px;padding:20px;border-radius:var(--bella-radius-md);background:var(--bella-surface);box-shadow:var(--bella-shadow)}
.bella-chat__mailcard>button{position:absolute;top:8px;right:8px;color:var(--bella-text)}
.bella-chat__mailcard label{display:grid;gap:5px}.bella-chat__mailcard input{width:100%;min-height:42px;padding:9px 11px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-sm);font:inherit}
@media(max-width:600px){
.bella-chat{right:12px;bottom:12px}
.bella-chat__launcher{min-height:50px;padding-right:14px}
.bella-chat__panel{position:fixed;inset:12px;width:auto;max-height:none;border-radius:var(--bella-radius-md)}
}

/* 0.6.163 - groups/detail presentation: content-sized desktop cards and shared planner surfaces. */
@media(min-width:781px){.kwispel-groups-day-card{min-height:0;height:auto;align-self:start}.kwispel-groups-day-grid{align-items:start}.kwispel-groups-day-board{min-height:0}}
.kwispel-schedule-wrap{display:grid;gap:18px}.kwispel-schedule-hero{margin:0;min-height:0}.kwispel-schedule-section{border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);overflow:hidden}.kwispel-schedule-section>h3{margin:0;padding:20px 22px;border-bottom:1px solid var(--bella-border)}
@media(max-width:780px){.kwispel-schedule-wrap{gap:14px}.kwispel-schedule-hero{border-radius:var(--bella-radius-lg);box-shadow:none}.kwispel-schedule-section>h3{padding:18px 16px}}

/* 0.6.167 - reusable detail/list surface, Groups desktop guard and visible planner composition. */
.bella-ui-detail-flow{width:min(100%,1180px);margin-inline:auto;align-content:start}
.bella-ui-detail-hero{display:flex;align-items:center;gap:20px;padding:22px 24px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:linear-gradient(120deg,var(--bella-surface),var(--bella-accent-soft));box-shadow:none}
.bella-ui-detail-hero__icon{display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent)}
.bella-ui-list-surface{min-width:0;border:1px solid var(--bella-border)!important;border-radius:var(--bella-radius-lg)!important;background:var(--bella-surface)!important;overflow:hidden}
.bella-ui-list-surface>h3{margin:0!important;padding:18px 20px 12px!important;border-bottom:0!important}
.kwispel-groups-day-board,.kwispel-groups-day-section,.kwispel-groups-day-grid{min-height:0!important;align-content:start!important;grid-auto-rows:max-content}
.kwispel-groups-day-card{height:fit-content!important;min-height:0!important;align-self:start!important}
.kwispel-schedule-wrap .kwispel-schedule-table{margin:0;border:0;border-radius:0}
.kwispel-schedule-wrap .kwispel-schedule-table tbody>tr:first-child td{border-top:1px solid var(--bella-border)}
@media(max-width:780px){
 .bella-ui-detail-flow{width:100%;gap:14px}
 .bella-ui-detail-hero{gap:14px;padding:18px;border-radius:var(--bella-radius-lg)}
 .bella-ui-detail-hero__icon{flex-basis:48px;width:48px;height:48px}
 .bella-ui-list-surface>h3{padding:18px 16px 12px!important}
 .kwispel-schedule-wrap .kwispel-schedule-section{margin:0}
 .kwispel-schedule-wrap .kwispel-schedule-table tbody>tr:first-child td{border-top:1px solid var(--bella-border)}
 .kwispel-schedule-section-practice .kw-schedule-summary-button{min-height:0;padding:14px 16px}
 .kwispel-schedule-section-practice .kw-summary-meta{align-items:center}
}

/* 0.6.168 - Groups detail really continues the Groups overview composition. */
.kwispel-schedule-context-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.kwispel-schedule-context-card>.kwispel-group-ref-badge{display:grid;place-items:center;width:60px;height:60px;padding:0;border-radius:50%;font-size:20px;font-weight:800}
.kwispel-schedule-context-card__copy{min-width:0}.kwispel-schedule-context-card__copy h2{margin:0}
.kwispel-schedule-context-card__copy .kwispel-group-card-meta{margin-top:8px}
.kwispel-schedule-context-card__calendar{display:grid;place-items:center;width:42px;height:42px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent)}
.kwispel-schedule-context-card__calendar svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}
@media(max-width:780px){
 body:has(.kwispel-schedule-wrap>#kw-groups-mobile-hero) .bella-portal__content{padding-top:0}
 .bella-eco-content:has(.kwispel-schedule-wrap){margin-inline:-4px}
 .kwispel-schedule-wrap{display:flex;flex-direction:column;width:auto;margin-inline:0;gap:14px}
 .kwispel-schedule-wrap>#kw-groups-mobile-hero{order:-3}
 .kwispel-schedule-wrap>.kwispel-schedule-context-card{order:-2;position:relative;z-index:4;margin:-18px 10px 0;padding:18px 14px;border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:var(--bella-shadow)}
 .kwispel-schedule-wrap>form,.kwispel-schedule-wrap>.bella-ui-state,.kwispel-schedule-wrap>p{margin-inline:10px}
 .kwispel-schedule-context-card{grid-template-columns:58px minmax(0,1fr);gap:12px}
 .kwispel-schedule-context-card>.kwispel-group-ref-badge{width:58px;height:58px}
 .kwispel-schedule-context-card__copy h2{font-size:var(--bella-h4-size);line-height:var(--bella-h4-line-height)}
 .kwispel-schedule-context-card__copy .kwispel-group-card-meta{display:grid;gap:5px;white-space:normal}
 .kwispel-schedule-context-card__calendar{display:none}
 .kwispel-schedule-wrap .bella-ui-list-surface{border-radius:var(--bella-radius-lg)!important;box-shadow:var(--bella-shadow)}
}

/* 0.6.169 - one-click Groups overview: lessons and students share one visual row system. */
.kwispel-schedule-wrap .kw-summary-title{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:12px;min-height:40px;padding-left:0}
.kwispel-schedule-wrap .kw-summary-title:before{display:none}
.kw-summary-leading-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent)}
.kw-summary-leading-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kw-summary-leading-icon.is-done{background:color-mix(in srgb,var(--bella-success) 12%,var(--bella-surface));color:var(--bella-success)}
.kwispel-schedule-wrap .kw-schedule-edit-card{margin:0;padding:0 22px 18px;border:0;border-radius:0;background:var(--bella-surface)}
.kwispel-schedule-wrap .kw-schedule-action-card,.kwispel-schedule-wrap .kw-schedule-done-card{padding:14px 0;border:0;border-top:1px solid var(--bella-border);border-radius:0;background:transparent}
.kwispel-schedule-wrap .kwispel-lesson-recipients{margin-top:0!important;padding:14px 0 0!important;border-top:1px solid var(--bella-border)!important}
.bella-portal__nav-group--eco{position:relative}.bella-portal__nav-child-toggle{position:absolute;top:6px;right:8px;width:34px;height:34px;border:0;background:transparent;color:var(--bella-muted);cursor:pointer}.bella-portal__nav-group--eco>.bella-portal__nav-main{padding-right:46px}
.kwispel-groups-table .kwispel-group-ref-cell,.kwispel-groups-table th:nth-child(2){display:none}
.kwispel-schedule-wrap .kw-summary-status-icon{display:none}
.bella-hero-position{display:grid;gap:16px;padding:18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface-subtle)}.bella-hero-position fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:0;padding:0}.bella-hero-position legend{grid-column:1/-1;font-weight:800;color:var(--bella-heading)}.bella-hero-position__preview{position:relative;display:grid;align-items:start;min-height:150px;padding:22px;border-radius:var(--bella-radius-md);overflow:hidden;background:var(--bella-accent-soft);transition:min-height .15s,transform .15s}.bella-hero-position__preview span{position:relative;z-index:2;display:inline-block;max-width:55%;font-weight:800}.bella-hero-position__preview i{position:absolute;right:18px;bottom:12px;font-size:64px;font-style:normal}.bella-hero-position__preview span,.bella-hero-position__preview i{transition:transform .15s}@media(max-width:700px){.bella-hero-position fieldset{grid-template-columns:1fr}}
.kwispel-groups-day-card-head>.kwispel-group-ref-badge{display:none}.kwispel-schedule-wrap .kwispel-group-student-main small{display:none}.kwispel-schedule-wrap .kwispel-group-student-row{padding:8px 10px;border:0;border-bottom:1px solid var(--bella-border);border-radius:0;background:transparent}.kwispel-schedule-wrap .kwispel-group-students-list{gap:0}.kwispel-schedule-wrap .kw-summary-leading-icon,.kwispel-schedule-wrap .kw-summary-status-icon{color:var(--bella-accent);background:var(--bella-accent-soft)}.kwispel-group-troubleshoot-ref{text-align:center;margin:22px 0 0;color:var(--bella-muted);font-size:11px;opacity:.65}
.kwispel-schedule-wrap .kwispel-lesson-recipients-head{margin-bottom:10px;color:var(--bella-heading)}
.kwispel-schedule-wrap .kwispel-group-students-list{gap:8px;margin:0}
.kwispel-schedule-wrap .kwispel-group-student-row{grid-template-columns:minmax(190px,1fr) auto;gap:12px;padding:12px 14px;border-color:var(--bella-border);border-radius:var(--bella-radius-md);background:color-mix(in srgb,var(--bella-accent-soft) 18%,var(--bella-surface));box-shadow:none}
.kwispel-schedule-wrap .kwispel-group-student-main strong{color:var(--bella-heading)}
.kwispel-schedule-wrap .kwispel-student-tracking{gap:7px}.kwispel-schedule-wrap .bella-ui-icon-action{border-color:var(--bella-border);background:var(--bella-surface);color:var(--bella-muted)}
.kwispel-schedule-wrap .bella-ui-icon-action:is(.is-ok,.is-selected,:hover,:focus-visible){border-color:var(--bella-accent-border);background:var(--bella-accent-soft);color:var(--bella-accent)}
@media(max-width:780px){
 .kwispel-schedule-wrap .kw-schedule-summary-button{cursor:default}
 .kwispel-schedule-wrap .kw-schedule-summary-button[aria-expanded=true] .kw-summary-chevron{visibility:hidden}
 .kwispel-schedule-wrap .kw-schedule-edit-card{padding:0 16px 16px}
 .kwispel-schedule-wrap .kw-schedule-action-card,.kwispel-schedule-wrap .kw-schedule-done-card{gap:10px;padding:12px 0}
 .kwispel-schedule-wrap .kwispel-group-student-row{grid-template-columns:1fr;padding:13px}
 .kwispel-schedule-wrap .kwispel-student-tracking,.kwispel-schedule-wrap .kwispel-group-student-actions{justify-content:flex-start;flex-wrap:wrap}
}

/* 0.6.170 - one central data-driven staff home; ECOs only provide rows and links. */
.bella-ui-page--staff-home{max-width:none;padding:0}.bella-staff-home{display:grid;gap:18px;width:100%;max-width:none;margin:0;padding:0 0 48px}
.bella-home--shared-start{max-width:1280px;padding-top:0}.bella-home--shared-start>#bella-student-home-hero{width:auto;margin:0 calc(clamp(20px,4vw,56px) * -1) 22px}
.bella-staff-next{color:var(--bella-text);text-decoration:none;position:relative;z-index:4;display:grid;align-content:center;gap:12px;min-height:230px;margin-top:0;padding:22px 54% 22px 28px;overflow:hidden;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:linear-gradient(90deg,var(--bella-surface) 0 45%,color-mix(in srgb,var(--bella-surface) 20%,transparent) 64%),var(--bella-staff-dashboard-image,url('../images/splinter-dashboard.webp')) center/cover no-repeat;box-shadow:var(--bella-shadow)}.bella-staff-next__paw{position:absolute;z-index:-1;left:40%;top:-22%;width:220px;height:220px;color:color-mix(in srgb,var(--bella-accent) 10%,transparent);transform:rotate(-12deg)}.bella-staff-next__paw svg{width:100%;height:100%;fill:currentColor;stroke:none}
.bella-staff-next__kicker{justify-self:start;padding:5px 12px;border:1px solid var(--bella-accent-border);border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent);font-size:var(--bella-type-meta-size);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.bella-staff-next h2{margin:0}.bella-staff-next__meta,.bella-staff-next__footer{display:flex;align-items:center}.bella-staff-next__meta{gap:18px;color:var(--bella-muted);flex-wrap:wrap;min-width:0}.bella-staff-next__meta span,.bella-staff-next__location{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.bella-staff-next__meta svg,.bella-staff-next__location svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}.bella-staff-next__footer{justify-content:space-between;gap:18px}.bella-staff-next__location{padding:7px 12px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-text)}.bella-staff-next__footer>.bella-button{width:auto;min-width:190px;min-height:52px;height:52px;padding:0 24px;justify-content:center}.bella-staff-next__footer>.bella-button svg{display:block;flex:0 0 20px;width:20px!important;height:20px!important;max-width:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.bella-staff-next__actions{display:flex;gap:12px;margin-top:5px}.bella-staff-next__actions .bella-button{min-width:168px;justify-content:center;border-radius:10px}.bella-staff-next__actions .bella-button:not(.bella-button--primary){background:var(--bella-surface)}
.bella-staff-home__actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.bella-staff-home__actions .bella-role-card{grid-template-columns:58px minmax(0,1fr) 18px;grid-template-rows:auto auto;justify-items:start;gap:2px 12px;min-height:108px;padding:18px;text-align:left;border:1px solid var(--bella-border);box-shadow:none}.bella-staff-home__actions .bella-role-card::after{content:'›';grid-column:3;grid-row:1/3;align-self:center;justify-self:end;color:var(--bella-muted);font-size:24px}.bella-staff-home__actions .bella-role-card>span{grid-column:1;grid-row:1/3;align-self:center;width:52px;height:52px;background:var(--bella-accent-soft);border:0}.bella-staff-home__actions .bella-role-card>strong{grid-column:2;align-self:end}.bella-staff-home__actions .bella-role-card>small{grid-column:2;align-self:start;color:var(--bella-muted)}.bella-staff-home__actions .bella-role-card>span svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8}
.bella-staff-home__lower{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(300px,.8fr);gap:18px}.bella-staff-today{padding:20px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:none}.bella-staff-today .bella-section-head p{margin:2px 0 0;color:var(--bella-muted)}.bella-staff-today nav{display:grid;gap:8px;margin-top:12px}.bella-staff-today a{display:grid;grid-template-columns:24px minmax(0,1fr) 16px;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-sm);color:var(--bella-text);text-decoration:none}.bella-staff-today a:is(:hover,:focus-visible){border-color:var(--bella-accent);color:var(--bella-accent)}.bella-staff-today i{font-style:normal;font-size:22px}.bella-staff-today__icon{display:grid;place-items:center;color:var(--bella-accent)}.bella-staff-today__icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.bella-role-card>span{position:relative}.bella-role-card__counter{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--bella-accent);color:#fff;font-size:11px;line-height:1}
.bella-staff-next__location.bella-button{width:auto;min-width:0;color:var(--bella-accent)}.bella-staff-next__location.bella-button svg{width:20px!important;height:20px!important}
.bella-staff-agenda,.bella-staff-groups{padding:24px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:none}.bella-staff-agenda .bella-section-head,.bella-staff-groups .bella-section-head{margin-bottom:12px}
.bella-staff-agenda__rows{display:grid}.bella-staff-agenda__rows>a{display:grid;grid-template-columns:110px minmax(0,1fr) auto 22px;gap:14px;align-items:center;padding:15px 12px;border-top:1px solid var(--bella-border);color:var(--bella-text);text-decoration:none}.bella-staff-agenda__rows>a:first-child{border-top:0}.bella-staff-agenda__rows time{color:var(--bella-accent);font-weight:800}.bella-staff-agenda__rows span{display:grid;gap:3px}.bella-staff-agenda__rows small{color:var(--bella-muted)}.bella-staff-agenda__rows b{padding:5px 10px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent)}.bella-staff-agenda__rows svg,.bella-staff-group-card>svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;color:var(--bella-muted)}
.bella-staff-groups__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.bella-staff-group-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto 20px;gap:12px;align-items:center;padding:16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface);color:var(--bella-text);text-decoration:none}.bella-staff-group-card>span:nth-child(2){display:grid;gap:4px;min-width:0}.bella-staff-group-card small{color:var(--bella-muted)}.bella-staff-group-card>b{padding:5px 9px;border-radius:999px;background:var(--bella-accent-soft);color:var(--bella-accent);white-space:nowrap}
@media(max-width:780px){
 .bella-ui-page--staff-home{padding:0!important}.bella-staff-home{gap:14px;padding:0 0 34px}
 .bella-home--shared-start{padding-top:0!important}.bella-home--shared-start>#bella-student-home-hero{margin:0 -10px 14px}
 .bella-staff-next{min-height:420px;margin-top:0;padding:18px 16px 218px;gap:12px;background:linear-gradient(180deg,var(--bella-surface) 0 47%,color-mix(in srgb,var(--bella-surface) 18%,transparent) 68%),var(--bella-staff-dashboard-image,url('../images/splinter-dashboard.webp')) 64% 100%/auto 64% no-repeat}.bella-staff-next__paw{left:6%;top:48%;width:140px;height:140px}.bella-staff-next__kicker{padding:4px 10px}.bella-staff-next__meta{gap:10px;font-size:var(--bella-type-meta-size)}.bella-staff-next__meta span{gap:4px}.bella-staff-next__meta svg{width:15px;height:15px}.bella-staff-next__actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bella-staff-next__actions .bella-button{min-width:0;padding-inline:10px}.bella-staff-next__footer{gap:10px}.bella-staff-next__location{min-width:0;padding:6px 9px;font-size:clamp(11px,3vw,14px)}.bella-staff-next__footer>.bella-button{min-width:142px;min-height:46px;height:46px;padding:0 16px}
 .bella-staff-home__actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;padding:2px 0 8px}.bella-staff-home__actions .bella-role-card{grid-template-columns:42px minmax(0,1fr) 14px;min-width:0;min-height:82px;padding:10px;gap:8px}.bella-staff-home__actions .bella-role-card>span{width:38px;height:38px}.bella-staff-home__actions .bella-role-card>span svg{width:21px;height:21px}.bella-staff-home__actions .bella-role-card>strong{font-size:var(--bella-type-meta-size);overflow-wrap:anywhere}.bella-staff-home__actions .bella-role-card>small{display:none}.bella-staff-home__lower{grid-template-columns:1fr}
 .bella-staff-agenda,.bella-staff-groups{padding:18px 14px}.bella-staff-agenda__rows>a{grid-template-columns:72px minmax(0,1fr) 18px;gap:10px;padding:14px 4px}.bella-staff-agenda__rows b{display:none}
 .bella-staff-groups__grid{grid-template-columns:1fr}.bella-staff-group-card{grid-template-columns:minmax(0,1fr) auto 18px}.bella-staff-group-card>b{display:none}
}

/* 0.6.181 - feedback repair: compact dashboard, hero editor and dossier surfaces. */
.bella-role-card__counter{background:#d92d20}.bella-role-card--alert{border:2px solid #d92d20}
.bella-staff-metrics{display:grid;gap:12px}.bella-metric-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.bella-metric-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 12px;align-items:center;min-width:0;padding:18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);color:var(--bella-text);text-decoration:none;box-shadow:var(--bella-shadow)}.bella-metric-card:is(a):is(:hover,:focus-visible){border-color:var(--bella-accent);transform:translateY(-1px)}.bella-metric-card__icon{grid-row:1/3;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--bella-accent-soft);color:var(--bella-accent)}.bella-metric-card__icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8}.bella-metric-card__copy{display:grid;gap:2px;min-width:0}.bella-metric-card__copy small,.bella-metric-card__comparison{color:var(--bella-muted)}.bella-metric-card__copy strong{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.1}.bella-metric-card__trend{grid-column:1/3;color:var(--bella-muted);font-size:var(--bella-type-meta-size);font-weight:700}.bella-metric-card--up .bella-metric-card__trend{color:var(--bella-success,#168a58)}.bella-metric-card--down .bella-metric-card__trend{color:var(--bella-danger,#d92d20)}.bella-metric-card__comparison{grid-column:1/3;font-size:var(--bella-type-meta-size)}.bella-ui-actions+.bella-metric-cards{margin-top:18px}.bella-metric-panel{margin-top:20px;padding:22px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface);box-shadow:var(--bella-shadow)}.bella-metric-panel h2{margin:0 0 18px}.bella-metric-chart__plot{display:flex;align-items:end;gap:5px;min-height:230px;overflow-x:auto;padding:12px 2px 0}.bella-metric-chart__point{display:grid;grid-template-rows:1fr auto;align-items:end;flex:1 0 16px;min-width:16px;height:200px}.bella-metric-chart__point i{display:block;width:100%;height:var(--bella-metric-height);min-height:3px;border-radius:5px 5px 2px 2px;background:var(--bella-accent)}.bella-metric-chart__point small{display:none;margin-top:7px;color:var(--bella-muted);font-size:10px;white-space:nowrap}.bella-metric-chart__point:nth-child(5n+1) small,.bella-metric-chart__point:last-child small{display:block}.bella-metric-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.bella-metric-ranking{display:grid;gap:13px;margin:0;padding:0;list-style:none}.bella-metric-ranking li{display:grid;gap:6px}.bella-metric-ranking li>span{display:flex;justify-content:space-between;gap:12px;min-width:0}.bella-metric-ranking strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bella-metric-ranking b{color:var(--bella-accent)}.bella-metric-ranking li>i{display:block;width:var(--bella-metric-width);height:5px;border-radius:99px;background:var(--bella-accent)}
.bella-staff-next__open{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:auto;padding:4px;color:var(--bella-accent)!important;text-decoration:none}.bella-staff-next__open svg{display:block;width:20px!important;height:20px!important;fill:none;stroke:currentColor;stroke-width:1.8}.bella-staff-next__open svg+svg{margin-left:-9px}
.bella-staff-agenda,.bella-staff-groups{box-shadow:none}
.bella-staff-hero-tabs{display:flex;gap:8px;overflow:auto;padding:4px}.bella-staff-hero-tabs button{padding:9px 13px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text);font:inherit;cursor:pointer;white-space:nowrap}.bella-staff-hero-tabs button[aria-selected=true]{border-color:var(--bella-accent);background:var(--bella-accent-soft);color:var(--bella-accent)}
.bella-staff-hero-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:16px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface-subtle)}.bella-staff-hero-panel[hidden]{display:none}.bella-staff-hero-panel>.bella-ui-field--wide{grid-column:1/-1}
.bella-website-content form:has(.bella-staff-hero-tabs)>.bella-form-actions{position:sticky;bottom:12px;z-index:12;padding:10px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:color-mix(in srgb,var(--bella-surface) 92%,transparent);box-shadow:var(--bella-shadow);backdrop-filter:blur(12px)}
.kwispel-schedule-context-card__title{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}.kwispel-schedule-context-card__title time{color:var(--bella-muted);font-size:var(--kw-type-compact-meta-size,13px)}.kwispel-schedule-context-card{grid-template-columns:minmax(0,1fr)}.kwispel-schedule-wrap .kwispel-group-student-main strong{font-weight:inherit}
@media(min-width:781px){
 .kwispel-frontend-groups .kwispel-groups-day-grid{grid-template-columns:1fr;gap:10px}
 .kwispel-frontend-groups .kwispel-groups-day-card{grid-template-columns:minmax(0,1fr) minmax(128px,max-content);align-items:center;gap:12px;padding:12px 15px;border-radius:var(--bella-radius-md);box-shadow:none}
 .kwispel-frontend-groups .kwispel-groups-day-card--has-mobile-summary{grid-template-columns:minmax(0,1fr) minmax(230px,280px) 34px minmax(128px,max-content)}
 .kwispel-frontend-groups .kwispel-groups-day-card-head{grid-column:1;grid-template-columns:minmax(0,1fr) auto;align-items:center}
 .kwispel-frontend-groups .kwispel-group-card-meta{margin-top:4px}
 .kwispel-frontend-groups .kwispel-group-mobile-metrics{grid-column:2;display:flex;min-width:230px;margin:0;padding:6px 0}
 .kwispel-frontend-groups .kwispel-group-mobile-open{grid-column:3;display:flex;width:34px;padding:0;font-size:0}
 .kwispel-frontend-groups .bella-ui-group-card__actions{position:static;grid-column:2;justify-content:flex-end;padding:0;transform:none}
 .kwispel-frontend-groups .kwispel-groups-day-card--has-mobile-summary .bella-ui-group-card__actions{grid-column:4;justify-content:flex-end}
 .bella-portal .kwispel-students-table{display:table;width:100%;border-collapse:separate;border-spacing:0 8px;background:transparent}
 .bella-portal .kwispel-students-table thead{position:static;width:auto;height:auto;overflow:visible;clip:auto}
 .bella-portal .kwispel-students-table tbody{display:table-row-group}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]{display:table-row;background:var(--bella-surface);box-shadow:none}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td{display:table-cell;padding:11px 12px;border-top:1px solid var(--bella-border);border-bottom:1px solid var(--bella-border);vertical-align:middle}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:first-child{border-left:3px solid var(--bella-accent);border-radius:var(--bella-radius-md) 0 0 var(--bella-radius-md)}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:last-child{border-right:1px solid var(--bella-border);border-radius:0 var(--bella-radius-md) var(--bella-radius-md) 0}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td::before{display:none}
}
.bella-ui-time-manual{display:grid;grid-template-columns:minmax(72px,96px) auto minmax(72px,96px);gap:8px;align-items:center;width:max-content}.bella-ui-time-manual[hidden]{display:none}.bella-ui-time-manual input{width:100%;min-width:0;text-align:center}.bella-ui-time-manual>span{font-weight:800;color:var(--bella-muted)}
@media(max-width:700px){.bella-ui-surface:has(.bella-ui-checklist) .bella-ui-checklist{grid-template-columns:1fr}}
@media(max-width:760px){
 .bella-portal .kwispel-student-toolbar{display:flex;align-items:center;gap:8px}
 .bella-portal .kwispel-pills{display:flex;gap:5px;overflow:auto}
 .bella-portal .kwispel-pill{display:inline-flex;padding:7px 9px;border:1px solid var(--bella-border);border-radius:999px;color:var(--bella-muted);font-size:12px;text-decoration:none;white-space:nowrap}
 .bella-portal .kwispel-pill.is-active{border-color:var(--bella-accent);background:var(--bella-accent-soft);color:var(--bella-accent)}
 .bella-portal .kwispel-student-toolbar-actions{display:flex;gap:6px;margin-left:auto}
 .bella-portal .kwispel-search-toggle,.bella-portal .kwispel-ios-add{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-accent);font:inherit;font-size:22px}
 .bella-portal .kwispel-student-filters{grid-template-columns:1fr;gap:8px}
 .bella-portal .kwispel-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:15px 0 8px}
 .bella-portal .kwispel-results-pills{display:none}
 .bella-portal .kwispel-students-table{display:block;border:0!important;background:transparent}
 .bella-portal .kwispel-students-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .bella-portal .kwispel-students-table tbody{display:grid;gap:10px}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding:12px 12px 10px;border:1px solid var(--bella-border);border-left:3px solid var(--bella-accent);border-radius:var(--bella-radius-md);background:var(--bella-surface);box-shadow:none}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td{display:grid;gap:2px;padding:0;border:0;min-width:0}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td::before{content:attr(data-label);color:var(--bella-muted);font-size:11px}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:first-child{grid-column:1/-1;padding-right:88px;display:flex;align-items:center;gap:7px}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:first-child::before,.bella-portal .kwispel-students-table tr[data-kw-student-row]>td:last-child::before{display:none}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:last-child{position:absolute;top:8px;right:8px}
 .bella-portal .kwispel-icon-actions{gap:5px}
 .bella-portal .kwispel-icon-btn{width:34px;height:34px}
 .bella-portal .kwispel-icon-btn svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
 .bella-portal .kwispel-students-table .kwispel-edit-row{display:block;padding:0;border:0;background:transparent}
 .bella-portal .kwispel-students-table .kwispel-edit-row.kwispel-is-hidden{display:none}
 .bella-portal .kwispel-students-table .kwispel-edit-row>td{display:block;padding:12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface)}
}
@media(max-width:760px){.bella-staff-hero-panel{grid-template-columns:1fr}}
@media(max-width:900px){.bella-metric-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.bella-metric-panels{grid-template-columns:1fr}.bella-metric-panel{padding:18px 14px}.bella-metric-chart__plot{min-height:210px}.bella-metric-chart__point{flex-basis:13px;height:180px}}
@media(max-width:480px){.bella-metric-cards{gap:8px}.bella-metric-card{grid-template-columns:1fr;padding:13px 11px}.bella-metric-card__icon{grid-row:auto;width:34px;height:34px}.bella-metric-card__icon svg{width:19px;height:19px}.bella-metric-card__copy strong{font-size:clamp(1.2rem,7vw,1.55rem)}.bella-metric-card__trend,.bella-metric-card__comparison{grid-column:1}.bella-metric-card__comparison{font-size:10px}}

/* 0.6.211 — calmer centered Analytics cards and readable responsive chart. */
.bella-staff-metrics .bella-metric-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.bella-metric-card{display:flex;align-items:center;justify-content:flex-start;flex-direction:column;gap:8px;min-height:150px;padding:18px;text-align:center}
.bella-staff-metrics .bella-metric-card{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;justify-items:start;min-height:98px;padding:14px 18px;gap:2px 12px;box-shadow:none;text-align:left}
.bella-staff-metrics .bella-metric-card__icon{grid-row:1/3;width:44px;height:44px}.bella-staff-metrics .bella-metric-card__icon svg{width:23px;height:23px}
.bella-metric-card__icon{flex:0 0 auto;width:44px;height:44px}
.bella-metric-card__value{display:flex;align-items:baseline;justify-content:center;gap:8px;min-width:0}
.bella-metric-card__value>strong{font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.1}
.bella-metric-card__trend{color:var(--bella-muted);font-size:var(--bella-type-meta-size);font-weight:700;white-space:nowrap}
.bella-metric-card--up .bella-metric-card__trend{color:var(--bella-success,#168a58)}
.bella-metric-card--down .bella-metric-card__trend{color:var(--bella-danger,#d92d20)}
.bella-metric-card__label{color:var(--bella-muted);line-height:1.3}
.bella-metric-chart{overflow:hidden}
.bella-metric-chart__plot{gap:clamp(3px,.5vw,8px);min-height:250px;padding:16px 4px 0;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),var(--bella-border) 25%)}
.bella-metric-chart__point{flex-basis:12px;min-width:10px;height:220px}
.bella-metric-chart__point i{max-width:28px;margin-inline:auto;border-radius:8px 8px 3px 3px;background:color-mix(in srgb,var(--bella-accent) 82%,#fff)}
.bella-staff-home__actions+.bella-staff-metrics{margin-top:0}.bella-staff-metrics .bella-metric-card__value{justify-content:flex-start}.bella-staff-metrics .bella-metric-card__label{text-align:left}
.bella-metric-card__trend b{font-size:1.05rem}
.bella-metric-card.is-current{border-color:var(--bella-accent);background:color-mix(in srgb,var(--bella-accent-soft) 28%,var(--bella-surface))}
.bella-metric-chart__point{grid-template-rows:1fr}
.bella-metric-chart__scroll{overflow-x:auto}
.bella-metric-chart__plot,.bella-metric-chart__labels{width:max(100%,calc(var(--bella-metric-count,30) * 18px))}
.bella-metric-chart__labels{display:grid;grid-template-columns:repeat(var(--bella-metric-count,30),minmax(0,1fr));gap:clamp(3px,.5vw,8px);padding:7px 4px 0;color:var(--bella-muted);font-size:10px}
.bella-metric-chart__labels span{min-width:0;white-space:nowrap}
@media(max-width:900px){
 .bella-staff-metrics .bella-metric-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
 .bella-staff-metrics .bella-metric-card__label[data-mobile-label]{font-size:0}
 .bella-staff-metrics .bella-metric-card__label[data-mobile-label]::after{content:attr(data-mobile-label);font-size:clamp(9px,2.6vw,12px);line-height:1.15}
 .bella-ui-page:has(> .bella-metric-chart){display:flex;flex-direction:column}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-ui-page-header{order:0}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-metric-chart{order:1;margin-top:0}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-ui-actions{order:2;margin-top:18px}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-metric-cards{order:3}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-metric-panels{order:4}
 .bella-ui-page:has(> .bella-metric-chart)>p{order:5}
 .bella-metric-chart__plot{min-width:520px;min-height:190px}
 .bella-metric-chart__point{flex:1 0 9px;height:165px}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-ui-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:8px}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-ui-actions .bella-button{justify-content:center;min-width:0;padding-inline:8px;white-space:nowrap}
 .bella-ui-page:has(> .bella-metric-chart)>.bella-metric-cards{grid-template-columns:1fr 1fr}
 .bella-metric-chart__labels{min-width:520px}
}
@media(max-width:480px){
 .bella-metric-card{min-height:132px;padding:14px 10px}
 .bella-metric-card__value{gap:5px;flex-wrap:wrap}
 .bella-metric-card__value>strong{font-size:clamp(1.2rem,7vw,1.55rem)}
 .bella-metric-card__trend{font-size:11px}
 .bella-staff-metrics .bella-metric-card{min-height:94px;padding:10px 4px;gap:4px;border-radius:var(--bella-radius-md);box-shadow:none}
 .bella-staff-metrics .bella-metric-card__icon{width:38px;height:38px}
 .bella-staff-metrics .bella-metric-card__icon svg{width:21px;height:21px}
 .bella-staff-metrics .bella-metric-card__value>strong{font-size:clamp(1rem,5vw,1.3rem)}
 .bella-staff-metrics .bella-metric-card__label{font-size:clamp(9px,2.6vw,12px);line-height:1.15;overflow-wrap:anywhere}
}
.bella-visual-edit-launch{position:fixed;right:18px;bottom:88px;z-index:70;display:flex;align-items:center;overflow:hidden;border-radius:999px;background:var(--bella-accent);box-shadow:var(--bella-shadow)}.bella-visual-edit-launch a{padding:11px 12px 11px 16px;color:#fff!important;font-weight:800;text-decoration:none}.bella-visual-edit-launch button{align-self:stretch;padding:0 12px;border:0;border-left:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font:inherit;cursor:pointer}.bella-visual-edit-launch[hidden]{display:none}
.bella-visual-toolbar{position:fixed;right:18px;bottom:84px;z-index:100;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 36px);padding:8px 10px;border:1px solid var(--bella-border);border-radius:999px;background:color-mix(in srgb,var(--bella-surface) 96%,transparent);box-shadow:var(--bella-shadow);backdrop-filter:blur(12px);overflow-x:auto}.bella-visual-toolbar>strong{display:none}.bella-visual-toolbar>span{display:none}.bella-visual-toolbar label{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.bella-visual-toolbar select{min-height:36px;padding:5px 27px 5px 8px;border:1px solid var(--bella-border);border-radius:999px;background:var(--bella-surface);color:var(--bella-text)}.bella-visual-toolbar .bella-button{min-height:36px;padding:6px 11px;white-space:nowrap}.bella-visual-toolbar>a{padding:6px;white-space:nowrap}
[data-bella-visual-editor] [data-bella-visual-object]{cursor:grab;touch-action:none;outline:2px dashed transparent;outline-offset:5px}[data-bella-visual-editor] .kw-hero__picture{pointer-events:auto}[data-bella-visual-editor] [data-bella-visual-object]:hover,[data-bella-visual-editor] .is-bella-visual-selected{outline-color:var(--bella-accent);background-color:color-mix(in srgb,var(--bella-accent-soft) 28%,transparent)}[data-bella-visual-editor] [data-bella-visual-object]:active{cursor:grabbing}@media(max-width:760px){.bella-visual-page .kw-home-hero--internal~*{transform:translateY(var(--bella-visual-mobile-card-y,0px))}}
.bella-visual-hide-title:not([data-bella-visual-editor]) [data-bella-builder-role="heading"],.bella-visual-hide-title:not([data-bella-visual-editor]) .kw-hero__title,.bella-visual-hide-lead:not([data-bella-visual-editor]) [data-bella-builder-role="lead"],.bella-visual-hide-lead:not([data-bella-visual-editor]) .kw-hero__lead{display:none!important}.bella-visual-hide-title[data-bella-visual-editor] [data-bella-builder-role="heading"],.bella-visual-hide-title[data-bella-visual-editor] .kw-hero__title,.bella-visual-hide-lead[data-bella-visual-editor] [data-bella-builder-role="lead"],.bella-visual-hide-lead[data-bella-visual-editor] .kw-hero__lead{display:block!important;opacity:.24;text-decoration:line-through}

/* Central persistent builder switch and upload control. */
.bella-builder-mode-toggle{position:fixed;right:18px;bottom:18px;z-index:10030;display:flex;align-items:center;gap:9px;min-height:44px;padding:8px 14px;border:1px solid color-mix(in srgb,var(--bella-accent) 34%,transparent);border-radius:999px;background:var(--bella-surface,#fff);color:var(--bella-ink,#211d20);box-shadow:var(--bella-shadow,0 12px 34px rgba(20,16,18,.18));font:inherit;font-weight:800;cursor:pointer}.bella-builder-mode-toggle span{display:block;width:34px;height:20px;padding:2px;border-radius:999px;background:var(--bella-muted,#d8d3d5)}.bella-builder-mode-toggle span:after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:transform .18s ease}.bella-builder-mode-toggle[data-enabled="1"]{bottom:82px;background:var(--bella-accent);color:#fff}.bella-builder-mode-toggle[data-enabled="1"] span{background:color-mix(in srgb,#fff 38%,transparent)}.bella-builder-mode-toggle[data-enabled="1"] span:after{transform:translateX(14px)}.bella-visual-upload{position:relative;display:inline-flex}.bella-visual-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.bella-visual-upload:focus-within .bella-button{outline:2px solid var(--bella-accent);outline-offset:2px}@media(max-width:760px){.bella-builder-mode-toggle{right:10px;bottom:calc(74px + env(safe-area-inset-bottom));font-size:13px}.bella-builder-mode-toggle[data-enabled="1"]{bottom:calc(132px + env(safe-area-inset-bottom))}.bella-visual-page:not([data-bella-visual-editor]) .kw-home-hero--internal{display:block}}
.bella-visual-zoom{display:inline-flex;align-items:center;gap:6px}.bella-visual-zoom output{min-width:48px;text-align:center;font-weight:800}[data-bella-visual-editor] .is-bella-builder-hidden-preview{opacity:.24;text-decoration:line-through}[data-bella-visual-editor] [data-bella-builder-hidden]{display:block!important;opacity:.24;text-decoration:line-through}
.bella-mobile-builder-launcher{position:fixed;right:18px;bottom:18px;z-index:10040;display:flex;align-items:center;padding:8px 10px;border:1px solid var(--bella-border,#ddd);border-radius:999px;background:var(--bella-surface,#fff);color:var(--bella-ink,#211d20);box-shadow:var(--bella-shadow,0 12px 34px rgba(20,16,18,.18));font:inherit}.bella-mobile-builder-launcher button{min-height:38px;padding:8px 14px;border:1px solid var(--bella-accent,#ff2e72);border-radius:999px;background:var(--bella-accent,#ff2e72);color:#fff;font:inherit;font-weight:800;cursor:pointer}.bella-mobile-builder-launcher button:is(:hover,:focus-visible){filter:brightness(.96)}.bella-mobile-builder-launcher-active .bella-visual-toolbar{display:none!important}.bella-mobile-builder-launcher-active .bella-builder-mode-toggle[data-enabled="1"]{bottom:82px}
.bella-mobile-control-dock{position:fixed;top:138px;right:22px;z-index:10060;width:min(390px,calc(100vw - 44px));max-height:calc(100dvh - 170px);padding:14px;border:1px solid var(--bella-border,#ddd);border-radius:24px;background:var(--bella-surface,#fff);color:var(--bella-ink,#211d20);box-shadow:0 20px 58px rgba(20,16,18,.28);overflow:auto}.bella-mobile-control-dock__head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}.bella-mobile-control-dock__head>div{display:grid;gap:3px;margin-right:auto}.bella-mobile-control-dock__head span{font-size:13px;color:var(--bella-muted,#6f686c)}.bella-mobile-control-dock__head button{min-height:34px;padding:6px 10px;border:1px solid var(--bella-border,#ddd);border-radius:999px;background:#fff;color:inherit;font:inherit;font-weight:800;cursor:pointer}.bella-mobile-builder-launcher-active .bella-mobile-control-dock .bella-visual-toolbar{position:static!important;display:flex!important;flex-direction:column;align-items:stretch;width:100%;max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}.bella-mobile-control-dock .bella-visual-toolbar>strong,.bella-mobile-control-dock .bella-visual-toolbar>span{display:block}.bella-mobile-control-dock .bella-visual-toolbar label{justify-content:space-between;min-height:42px;padding:7px 9px;border:1px solid var(--bella-border,#ddd);border-radius:12px}.bella-mobile-control-dock .bella-visual-toolbar .bella-visual-zoom{justify-content:center;padding:6px}.bella-mobile-control-dock .bella-visual-toolbar>.bella-button{width:100%;justify-content:center}.bella-mobile-preview-child .bella-builder-mode-toggle{display:none!important}
.bella-mobile-control-dock__head button.is-primary{border-color:var(--bella-accent,#ff2e72);background:var(--bella-accent,#ff2e72);color:#fff}.bella-mobile-control-dock__image-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}.bella-mobile-control-dock__image-actions button{min-height:38px;padding:7px 9px;border:1px solid var(--bella-border,#ddd);border-radius:12px;background:#fff;color:inherit;font:inherit;font-weight:750;cursor:pointer}.bella-mobile-control-dock__image-actions button:first-child{grid-column:1/-1;border-color:color-mix(in srgb,var(--bella-accent,#ff2e72) 42%,var(--bella-border,#ddd));background:var(--bella-accent-soft,#fff0f5)}
.bella-mobile-control-dock__footer{position:sticky;bottom:-14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px -2px -2px;padding:10px 2px 2px;background:var(--bella-surface,#fff)}.bella-mobile-control-dock__footer button{min-height:38px;padding:7px;border:1px solid var(--bella-border,#ddd);border-radius:999px;background:#fff;color:inherit;font:inherit;font-weight:800;cursor:pointer}.bella-mobile-control-dock__footer button.is-primary{border-color:var(--bella-accent,#ff2e72);background:var(--bella-accent,#ff2e72);color:#fff}.bella-mobile-control-dock .bella-visual-toolbar>button[type="submit"]{display:none}.bella-mobile-control-dock__image-actions{grid-template-columns:1fr}.bella-mobile-control-dock__image-actions button:first-child{grid-column:auto}
@media(max-width:780px){.bella-visual-toolbar{right:8px;bottom:76px;max-width:calc(100vw - 16px);gap:6px;padding:6px 8px}.bella-visual-toolbar label{font-size:12px}.bella-visual-toolbar label:has(input){font-size:0}.bella-visual-toolbar label:has(input) input{width:22px;height:22px}.bella-visual-toolbar .bella-button{min-height:34px;padding:5px 9px;font-size:12px}.bella-visual-toolbar>a{font-size:12px}.bella-visual-edit-launch{bottom:76px;right:10px}}
.bella-hero-position__preview img{position:absolute;right:18px;bottom:0;width:auto;max-width:58%;max-height:92%;object-fit:contain;object-position:right bottom;transition:transform .15s}

/* 0.6.187 - compact, transparent and genuinely scrollable mobile sidebar. */
@media(max-width:900px){
 .bella-portal--theme-shell>.bella-portal__sidebar{width:min(78vw,320px);max-width:calc(100vw - 64px);height:100dvh;max-height:100dvh;min-height:0;padding:calc(12px + var(--bella-safe-top)) 14px calc(92px + env(safe-area-inset-bottom));gap:10px;overflow-x:hidden;overflow-y:scroll!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;border-radius:0 22px 22px 0;scrollbar-width:thin}
 .bella-portal--theme-shell .bella-portal__brand{position:static;flex:0 0 auto;width:100%;min-height:62px;margin:0;padding:4px 0 12px;border-bottom:0;background:transparent!important}
 .bella-portal--theme-shell .bella-portal__brand .kw-brand{width:100%;min-width:0;gap:9px;background:transparent!important;box-shadow:none!important}
 .bella-portal--theme-shell .bella-portal__brand .kw-brand__paw{width:clamp(46px,13vw,54px);height:clamp(46px,13vw,54px);flex:0 0 clamp(46px,13vw,54px)}
 .bella-portal--theme-shell .bella-portal__brand .kw-brand__title{font-size:clamp(18px,5.2vw,23px);white-space:nowrap}
 .bella-portal--theme-shell .bella-portal__close{display:inline-grid;flex:0 0 40px;width:40px;height:40px;border-color:color-mix(in srgb,var(--bella-accent) 24%,transparent);border-radius:50%;background:transparent;color:var(--bella-accent);font-size:22px}
 .bella-portal--theme-shell .bella-portal__nav,.bella-portal--theme-shell .bella-portal__utilities,.bella-portal--theme-shell .bella-portal__course-scroll{flex:0 0 auto;overflow:visible}
 .bella-portal--theme-shell .bella-portal__utilities{margin:0;padding:8px 0 0;border-top:0}
 .bella-portal--theme-shell .bella-portal__sidebar-foot{margin-top:8px}
 .bella-portal.is-menu-open .bella-visual-edit-launch,.bella-portal.is-menu-open .bella-visual-toolbar{display:none!important}
}

/* Operational cards on Home use the canonical record-card state border and compact spacing. */
.bella-staff-priority.bella-staff-agenda .bella-record-cards{gap:10px}.bella-staff-priority .bella-record-card--with-icon{grid-template-columns:30px minmax(0,1fr) 24px;gap:10px;padding:11px 14px;box-shadow:none}.bella-staff-priority .bella-record-card__icon{display:grid;place-items:center;width:24px;height:24px;color:var(--bella-muted)}.bella-staff-priority .bella-record-card__icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7}.bella-staff-priority .bella-record-card__chevrons{justify-self:end;color:var(--bella-text)}.bella-staff-priority .bella-record-card__chevrons svg{margin-left:0;width:18px;height:18px}.bella-staff-priority .bella-record-card:hover{border-color:var(--bella-border);background:var(--bella-surface-subtle);transform:none}

/* 0.6.204 - Cursisten: calm default records, alert-only red edge, compact filters. */
.bella-portal .kwispel-students-table tr[data-kw-student-row]>td:first-child{border-left:1px solid var(--bella-border)}
.bella-portal .kwispel-students-table tr.has-work-alert[data-kw-student-row]>td:first-child{border-left:4px solid var(--bella-danger)}
.bella-portal .kwispel-student-filters--compact{display:grid;gap:10px;margin:0 0 18px}
.bella-portal .kwispel-student-search-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.bella-portal .kwispel-student-search-row input[type=search]{min-width:0;margin:0}
.bella-portal .kwispel-student-filter-details{border:0}
.bella-portal .kwispel-student-filter-details summary{display:inline-flex;align-items:center;gap:7px;width:max-content;color:var(--bella-muted);cursor:pointer;font-weight:700}
.bella-portal .kwispel-student-filter-details summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
.bella-portal .kwispel-student-filter-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;margin-top:10px}
@media(max-width:760px){.bella-portal .kwispel-student-filter-options{grid-template-columns:1fr}.bella-portal .kwispel-students-table tr.has-work-alert[data-kw-student-row]{border-left:4px solid var(--bella-danger)}}

/* 0.6.205 - shared operational-card edge and reliable central SVG actions. */
.bella-portal .kwispel-icon-btn svg{display:block!important;width:18px!important;height:18px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round;stroke-linejoin:round;opacity:1!important;visibility:visible!important}

/* 0.6.252 - central positive proposal presentation. */
.bella-ui-page-header--visual{position:relative;min-height:184px;margin-bottom:18px;padding:18px 37% 18px 20px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg,24px);background:linear-gradient(135deg,var(--bella-surface) 0%,color-mix(in srgb,var(--bella-accent) 4%,var(--bella-surface)) 100%);box-shadow:var(--bella-shadow);overflow:hidden}
.bella-ui-page-header--visual .bella-ui-page-header__row{position:relative;z-index:2;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:10px}
.bella-ui-page-header--visual .bella-ui-page-header__copy{display:grid;gap:10px}
.bella-ui-page-header--visual h1{font-size:clamp(1.65rem,2.35vw,2.55rem);line-height:1.05}
.bella-ui-page-header--visual .bella-ui-page-header__description{display:block;max-width:680px;font-size:1.05rem;line-height:1.55}
.bella-ui-page-header--visual .bella-ui-page-header__visual{position:absolute;z-index:1;right:1%;bottom:-8%;width:37%;height:112%}
.bella-ui-page-header--visual .bella-ui-page-header__visual::before{content:"";position:absolute;right:7%;bottom:5%;width:62%;aspect-ratio:1.22;border-radius:58% 42% 53% 47%/55% 44% 56% 45%;background:radial-gradient(circle at 38% 35%,color-mix(in srgb,var(--bella-accent) 15%,var(--bella-surface)),color-mix(in srgb,var(--bella-accent) 7%,var(--bella-surface)) 68%,transparent 69%);transform:rotate(-5deg)}
.bella-ui-page-header--visual .bella-ui-page-header__visual img{position:absolute;z-index:1;right:4%;bottom:0;width:82%;height:94%;object-fit:contain;object-position:right bottom}
.bella-ui-page-header--visual .bella-ui-page-header__back-icon{display:grid;width:38px;min-width:38px;height:38px;min-height:38px;padding:0;border-color:color-mix(in srgb,var(--bella-accent) 35%,var(--bella-border));border-radius:50%;background:color-mix(in srgb,var(--bella-accent) 10%,var(--bella-surface));color:var(--bella-accent)}.bella-ui-page-header--visual .bella-ui-page-header__back-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bella-ui-page-header--visual .bella-ui-proposal-facts{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:4px 0 0}.bella-ui-page-header--visual .bella-ui-proposal-facts article{grid-template-columns:30px minmax(0,1fr);gap:7px;min-height:48px;padding:7px 9px;border-color:color-mix(in srgb,var(--bella-accent) 18%,var(--bella-border));box-shadow:none}.bella-ui-page-header--visual .bella-ui-proposal-facts__icon{width:30px;height:30px}.bella-ui-page-header--visual .bella-ui-proposal-facts__icon svg{width:17px;height:17px}.bella-ui-page-header--visual .bella-ui-proposal-facts strong{font-size:.82rem;line-height:1.2}
.bella-ui-proposal-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.bella-ui-proposal-facts article{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:13px;min-height:94px;padding:17px;border:1px solid color-mix(in srgb,var(--bella-accent) 22%,var(--bella-border));border-radius:var(--bella-radius,16px);background:linear-gradient(145deg,color-mix(in srgb,var(--bella-accent) 11%,var(--bella-surface)),color-mix(in srgb,var(--bella-accent) 3%,var(--bella-surface)));box-shadow:0 9px 24px color-mix(in srgb,var(--bella-accent) 9%,transparent)}
.bella-ui-proposal-facts__icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:color-mix(in srgb,var(--bella-accent) 15%,var(--bella-surface));color:var(--bella-accent)}.bella-ui-proposal-facts__icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.bella-ui-proposal-facts strong{color:var(--bella-text);font-size:1rem;line-height:1.35}
.bella-ui-surface:has(.bella-ui-checklist){width:100%;max-width:none;margin:0}.bella-ui-surface:has(.bella-ui-checklist) .bella-ui-section{margin-top:12px}.bella-ui-surface:has(.bella-ui-checklist) .bella-ui-stack{align-items:stretch}.bella-ui-surface:has(.bella-ui-checklist) .bella-ui-checklist{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.bella-ui-surface:has(.bella-ui-checklist) .bella-ui-checklist__item:has(input:checked){border-color:color-mix(in srgb,var(--bella-accent) 32%,var(--bella-border));background:color-mix(in srgb,var(--bella-accent) 7%,var(--bella-surface))}.bella-ui-surface:has(.bella-ui-checklist) .bella-ui-form-actions{justify-content:center}
.bella-ui-proposal-participants{display:grid;gap:9px;margin:16px 0 0;padding:0;list-style:none;counter-reset:bella-proposal-person}
.bella-ui-proposal-participants li{counter-increment:bella-proposal-person;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:12px;min-height:62px;padding:9px 14px;border:1px solid var(--bella-border);border-radius:14px;background:color-mix(in srgb,var(--bella-surface) 96%,var(--bella-accent))}
.bella-ui-proposal-participants__number{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--bella-accent-soft);color:var(--bella-accent);font-weight:800}.bella-ui-proposal-participants__number::before{content:counter(bella-proposal-person)}
.bella-ui-proposal-participants li>span:last-child{display:grid;gap:2px}.bella-ui-proposal-participants small{color:var(--bella-muted)}
.bella-ui-proposal-composer{position:relative;width:100%;padding:20px}.bella-ui-proposal-composer>h3{margin:0 52px 14px 0}.bella-ui-proposal-composer__view .bella-ui-proposal-participants{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}.bella-ui-proposal-composer>details>summary{position:absolute;top:16px;right:16px;display:grid;place-items:center;list-style:none;cursor:pointer}.bella-ui-proposal-composer>details>summary::-webkit-details-marker{display:none}.bella-ui-proposal-composer>details>summary svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.bella-ui-proposal-composer:has(details[open]) .bella-ui-proposal-composer__view{display:none}.bella-ui-proposal-composer__edit{padding-top:8px}.bella-ui-page:has(.bella-ui-proposal-composer details[open]) .bella-ui-actions{display:none}
@media(max-width:700px){.bella-ui-proposal-composer__view .bella-ui-proposal-participants{grid-template-columns:1fr}}
@media(max-width:900px){.bella-ui-page-header--visual{padding-right:31%;min-height:190px}.bella-ui-page-header--visual .bella-ui-page-header__visual{width:31%}.bella-ui-page-header--visual .bella-ui-proposal-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bella-ui-page-header--visual{min-height:300px;padding:16px 16px 128px}.bella-ui-page-header--visual .bella-ui-page-header__row{gap:10px}.bella-ui-page-header--visual .bella-ui-page-header__visual{right:-2%;bottom:-7%;width:46%;height:48%}.bella-ui-page-header--visual .bella-ui-page-header__visual img{width:86%;height:100%}.bella-ui-page-header--visual .bella-ui-page-header__visual::before{right:8%;bottom:6%;width:64%}.bella-ui-page-header--visual .bella-ui-proposal-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.bella-ui-page-header--visual .bella-ui-proposal-facts article{min-height:42px;padding:6px 8px}.bella-ui-proposal-participants li{grid-template-columns:38px minmax(0,1fr);padding:9px 10px}.bella-ui-page-header--visual .bella-ui-page-header__actions{width:auto;justify-content:flex-start}}
@media(max-width:760px){
 .bella-portal .kwispel-students-table tr[data-kw-student-row]{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:62px;padding:10px 12px 10px 16px;gap:8px;border-left:1px solid var(--bella-border);overflow:hidden}
 .bella-portal .kwispel-students-table tr[data-kw-student-row].has-work-alert::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--bella-danger,#d92d20)}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:nth-child(2),.bella-portal .kwispel-students-table tr[data-kw-student-row]>td:nth-child(3),.bella-portal .kwispel-students-table tr[data-kw-student-row]>td:nth-child(4){display:none}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:first-child{grid-column:1;padding:0;min-width:0}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:first-child strong{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .bella-portal .kwispel-students-table tr[data-kw-student-row]>td:last-child{position:static;grid-column:2;grid-row:1}
 .bella-portal .kwispel-students-table tr[data-kw-student-row] .kwispel-selection-checkbox,.bella-portal .kwispel-students-table tr[data-kw-student-row] .kwispel-status-dot{display:none}
}
.bella-context-menu{position:fixed;z-index:10000;display:grid;min-width:210px;padding:8px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:var(--bella-surface);box-shadow:0 18px 48px rgba(25,20,18,.22)}
.bella-context-menu[hidden]{display:none}
.bella-context-menu :is(a,button){display:flex;width:100%;min-height:42px;align-items:center;padding:9px 12px;border:0;border-radius:10px;background:transparent;color:var(--bella-text);font:inherit;font-weight:750;text-align:left;text-decoration:none;cursor:pointer}
.bella-context-menu :is(a,button):is(:hover,:focus-visible){outline:0;background:var(--bella-accent-soft);color:var(--bella-accent)}
.bella-portal{-webkit-user-select:none;user-select:none}
.bella-portal :is(input,textarea,select,[contenteditable="true"],[contenteditable=""],[role="textbox"]){-webkit-user-select:text;user-select:text}

/* Central catalogue editor: ECOs supply text and metadata, Portaal owns the responsive UI. */
.bella-template-editor{display:grid;gap:20px}.bella-template-editor__picker{display:grid;grid-template-columns:minmax(0,520px) auto;align-items:end;gap:12px;padding:18px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface)}.bella-template-editor__picker p{margin:0 0 12px;color:var(--bella-muted)}.bella-template-editor__panel{display:grid;gap:18px;padding:clamp(18px,3vw,28px);border:1px solid var(--bella-border);border-radius:var(--bella-radius-lg);background:var(--bella-surface)}.bella-template-editor__panel[hidden]{display:none}.bella-template-editor__header h2{margin:4px 0 0}.bella-template-editor__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0}.bella-template-editor__facts>div{padding:14px;border-radius:var(--bella-radius-md);background:var(--bella-surface-subtle)}.bella-template-editor__facts dt{color:var(--bella-muted);font-size:.9em}.bella-template-editor__facts dd{margin:4px 0 0;font-weight:700}.bella-template-editor__panel textarea{min-height:260px;resize:vertical}.bella-template-editor__variables{display:grid;gap:8px}.bella-template-editor__variables>p{margin:0;color:var(--bella-muted)}.bella-template-editor__chips{display:flex;flex-wrap:wrap;gap:8px}.bella-template-editor__actions{position:sticky;bottom:12px;z-index:4;padding:12px;border:1px solid var(--bella-border);border-radius:var(--bella-radius-md);background:color-mix(in srgb,var(--bella-surface) 94%,transparent);box-shadow:var(--bella-shadow);backdrop-filter:blur(10px)}
@media(max-width:760px){.bella-template-editor{gap:14px}.bella-template-editor__picker,.bella-template-editor__facts{grid-template-columns:1fr}.bella-template-editor__picker{padding:14px}.bella-template-editor__picker p{margin:0}.bella-template-editor__panel{padding:16px}.bella-template-editor__panel textarea{min-height:320px}.bella-template-editor__actions{bottom:76px;display:grid;grid-template-columns:1fr}.bella-template-editor__actions .bella-button{width:100%}}