/*
 * 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-accent: var(--kw-color-accent, #ff4081);
	--bella-accent-rgb: 255,64,129;
	--bella-accent-soft: #fff8fb;
	--bella-accent-border: #ffd4e1;
	--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-font-family: var(--bella-ecosystem-font, system-ui, -apple-system, BlinkMacSystemFont, '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: 212px;
	--bella-content-max: 1480px;
	--bella-content-default: 1480px;
	--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-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;
}

/* 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) { font-family: var(--bella-font-family); }

.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; }

/* 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);
	font-family: var(--bella-font-family);
	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: 1px solid var(--bella-border);
}
.bella-portal__brand-name strong { font-size: calc(.94rem * var(--bella-font-scale)); 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: 1px solid var(--bella-border); }
.bella-portal__nav-main {
	display: grid;
	grid-template-columns: 18px minmax(0,1fr) auto;
	align-items: center;
	gap: 7px;
	width: 100%;
	min-height: 38px;
	padding: 7px 8px;
	border: 0;
	border-radius: var(--bella-radius-sm);
	background: transparent;
	color: var(--bella-text);
	font-size: calc(.94rem * var(--bella-menu-scale));
	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); }
.bella-portal__nav-main i { color: var(--bella-muted); font-style: normal; text-align: right; }
.bella-portal__nav-label {
	margin: 13px 8px 5px;
	color: var(--bella-muted);
	font-size: calc(.69rem * var(--bella-menu-scale));
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.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-size: calc(.88rem * var(--bella-menu-scale));
	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-surface); 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); font-size: calc(.66rem * var(--bella-font-scale)); line-height: 1.45; text-align: center; }
.bella-portal__credit a { text-decoration: none; }

.bella-portal__page { min-width: 0; padding-left: clamp(24px,3vw,48px); }
.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-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-header { margin: 2px 0 26px; }
.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-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--bella-space-4); }

/* 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-field > :where(span:first-child,label),
.bella-ui-field-label,
.bella-portal :where(label) {
	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="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="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-size: calc(.9rem * var(--bella-font-scale) * var(--bella-control-scale));
	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 { 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-size: calc(.88rem * var(--bella-font-scale));
	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); }
.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; font-size: calc(.8rem * var(--bella-font-scale)); }
.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;
}

/* 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,
.bella-portal__content table.bella-table { width: 100%; border-collapse: collapse; color: var(--bella-text); font-size: var(--bella-type-body-size); font-weight: var(--bella-type-body-weight); 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 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__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-size: var(--bella-type-status-size);
	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-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);
	font-size: var(--bella-type-body-size);
}
.bella-portal__toast.is-hiding { opacity: 0; transform: translateY(8px); transition: opacity .2s ease,transform .2s ease; }

/* 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-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-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 { overflow: hidden; border-radius: var(--bella-radius-md); background: var(--bella-surface-subtle); }


/* 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-size: var(--bella-type-body-size);
	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 { 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: repeat(2,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-course-row,
.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: #344054; font-size: calc(.9rem * var(--bella-menu-scale)); font-weight: var(--bella-menu-weight); cursor: pointer; list-style: none; }
.bella-course-nav summary::-webkit-details-marker { display: none; }
.bella-course-nav summary:hover { background: var(--bella-accent-soft); }
.bella-course-nav__lessons { margin: 1px 0 6px 18px; padding-left: 9px; border-left: 1px solid var(--bella-border); }
.bella-lesson-link { display: grid; grid-template-columns: 15px minmax(0,1fr); gap: 6px; padding: 6px 7px; border-radius: 8px; color: #475467; text-decoration: none; }
.bella-lesson-link:hover,.bella-lesson-link.is-current { background: var(--bella-accent-soft); color: var(--bella-accent); }
.bella-lesson-link strong { font-size: calc(.77rem * var(--bella-menu-scale)); font-weight: var(--bella-menu-weight); }
.bella-module-links { display: grid; gap: 1px; margin: 1px 0 5px 31px; padding-left: 8px; border-left: 1px solid var(--bella-border); }
.bella-module-links a { padding: 4px 6px; color: var(--bella-muted); font-size: calc(.72rem * var(--bella-menu-scale)); text-decoration: none; }

/* 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; color: var(--bella-text); }
.bella-portal .kwispel-lesson-breadcrumb-text { display: none; }
.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 { font-size: var(--bella-type-page-title-size); }
.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-theory-card-grid,
.bella-public-shell .kwispel-theory-card-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }

/* 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__close { 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; }
.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 { display: block; min-height: 100vh; margin: 0; padding-bottom: 72px; }
	.bella-portal__page { padding-left: 0; }
	.bella-portal__content { padding: 76px 16px 88px; }
	.bella-portal__sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px,86vw); height: 100vh; 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: 58px; padding: 8px 14px; border-bottom: 1px solid var(--bella-border); background: rgba(255,255,255,.96); }
	.bella-portal__menu-button { display: inline-grid; }
	.bella-portal__bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 40; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; min-height: 64px; border-top: 1px solid var(--bella-border); background: rgba(255,255,255,.97); }
	.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; overflow: auto; padding: 12px 18px 24px; 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; }
	.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; }
}

@media (max-width: 720px) {
	.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-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-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-size: var(--bella-type-table-head-size); font-weight: var(--bella-type-table-head-weight); text-align: left; text-transform: uppercase; }
	.bella-table__action { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--bella-border); }
	.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,.bella-ui-form-actions > .bella-button { 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; font-size: 12px; }
.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 > div { min-width: 0; }
.bella-ui-details dt { color: var(--bella-muted); font-size: var(--bella-type-meta-size); font-weight: var(--bella-type-label-weight); line-height: 1.35; }
.bella-ui-details dd { margin: 3px 0 0; color: var(--bella-text); font-size: var(--bella-type-body-size); line-height: var(--bella-type-body-line-height); }
\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-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-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)}


/* 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); font-family:inherit; }
.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); font-size:var(--bella-type-body-size); }
.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; }

/* Central modal primitive also covers legacy functional Huiswerk hooks that JS
 * temporarily portals to <body>. */
body > :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; }
body > :where(.kwispel-modal,.kw-profile-modal).is-open { display:flex; }
body > :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; font-size:var(--bella-type-meta-size); }

/* 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{font-size:20px;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__nav-label{display:none}
.bella-portal__nav-main{min-height:42px;padding:9px 12px;border-radius:999px;white-space:nowrap}.bella-portal__nav-main.is-current{background:var(--bella-accent-soft);color:var(--bella-accent)}
.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{font-size:.82rem}.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-font-family:var(--kw-font-sans,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
  --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;font-size:clamp(.76rem,.78vw,.91rem);}
  .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-family:var(--kw-font-friendly,var(--bella-font-family));font-weight:700;
}
.bella-ui-page-header h1{font-weight:700;}
.bella-ui-page-header__eyebrow,.bella-ui-eyebrow{font-family:var(--kw-font-friendly,var(--bella-font-family));font-weight:700;text-transform:none;letter-spacing:0;}