.db-learning-home,
.db-learning-dashboard,
.db-learning-toolbar,
.db-learning-guest {
	--dbl-navy: #0b3448;
	--dbl-deep: #071f2f;
	--dbl-teal: var(--db-primary, #146b82);
	--dbl-cyan: var(--db-emerald, #1f7891);
	--dbl-gold: var(--db-accent, #d9a514);
	--dbl-coral: var(--db-coral-strong, #b93f48);
	--dbl-mint: #e8f6f2;
	--dbl-ink: #102f41;
	--dbl-muted: var(--db-muted-strong, #52606d);
	--dbl-line: #d8e5e9;
	--dbl-paper: #fff;
	box-sizing: border-box;
}

.db-learning-home *,
.db-learning-dashboard *,
.db-learning-toolbar *,
.db-learning-guest * { box-sizing: border-box; }

.db-learning-home {
	background: linear-gradient(180deg, #edf6f6 0, #fff 100%);
	padding: 22px 0 8px;
}

.db-learning-home__grid {
	align-items: stretch;
	background: radial-gradient(circle at 88% 15%, rgba(41,171,193,.28), transparent 30%), linear-gradient(135deg, var(--dbl-deep), #104c62);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 26px;
	box-shadow: 0 24px 70px rgba(7,31,47,.16);
	color: #dcecf1;
	display: grid;
	gap: 24px;
	grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr);
	overflow: hidden;
	padding: 28px;
}

.db-learning-home h2 {
	color: #fff;
	font-size: clamp(28px,4vw,42px);
	letter-spacing: -.035em;
	line-height: 1.08;
	margin: 5px 0 10px;
}

.db-learning-home p { margin: 0; max-width: 670px; }
.db-learning-kicker { color: var(--dbl-teal); font-size: 12px; font-weight: 800; letter-spacing: .13em; margin: 0; text-transform: uppercase; }
.db-learning-home .db-learning-kicker,
.db-learning-dashboard__header .db-learning-kicker { color: #86d7e2; }
.db-learning-home__stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.db-learning-home__stats span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.13); border-radius: 999px; color: #dcecf1; font-size: 12px; padding: 8px 12px; }
.db-learning-home__stats strong { color: #fff; }

.db-learning-home__next {
	align-content: center;
	background: rgba(255,255,255,.97);
	border-radius: 18px;
	color: var(--dbl-ink);
	display: grid;
	gap: 11px;
	padding: 20px;
}

.db-learning-home__next small { color: var(--dbl-teal); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.db-learning-home__next strong { font-size: 17px; line-height: 1.3; }

.db-learning-button {
	align-items: center;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	min-height: 44px;
	padding: 10px 16px;
	text-decoration: none;
}

.db-learning-button--primary { background: var(--dbl-teal); color: #fff; }
.db-learning-button--primary:hover,.db-learning-button--primary:focus-visible { background: #0f7185; color: #fff; }
.db-learning-button--light { background: #fff; color: var(--dbl-navy); }
.db-learning-button--light:hover,.db-learning-button--light:focus-visible { color: var(--dbl-teal); }

.db-learning-progress { background: #e5eef0; border-radius: 999px; display: block; height: 7px; overflow: hidden; width: 100%; }
.db-learning-progress i { background: linear-gradient(90deg, var(--dbl-cyan), var(--dbl-gold)); border-radius: inherit; display: block; height: 100%; transition: width .25s ease; width: var(--db-progress,0%); }

.db-learning-guest {
	align-items: center;
	background: #f2f8f8;
	border: 1px solid var(--dbl-line);
	border-radius: 18px;
	display: grid;
	gap: 14px;
	grid-template-columns: 42px minmax(0,1fr) auto;
	margin: 22px 0;
	padding: 15px;
}

.db-learning-guest>span { align-items: center; background: #dff2ef; border-radius: 12px; color: var(--dbl-teal); display: flex; font-size: 18px; height: 42px; justify-content: center; width: 42px; }
.db-learning-guest p { display: grid; gap: 2px; margin: 0; }
.db-learning-guest strong { color: var(--dbl-navy); font-size: 15px; }
.db-learning-guest small { color: var(--dbl-muted); font-size: 12px; line-height: 1.4; }
.db-learning-guest a { border: 1px solid var(--dbl-teal); border-radius: 10px; color: var(--dbl-teal); font-size: 13px; font-weight: 800; padding: 9px 13px; text-decoration: none; }

.db-learning-toolbar {
	align-items: center;
	background: rgba(255,255,255,.96);
	border: 1px solid var(--dbl-line);
	border-radius: 20px;
	box-shadow: 0 15px 45px rgba(11,52,72,.08);
	display: grid;
	gap: 12px 16px;
	grid-template-columns: minmax(155px,1fr) auto;
	margin: 22px 0;
	padding: 16px;
}

.db-learning-toolbar__status { display: grid; gap: 5px; grid-template-columns: 1fr auto; min-width: 0; }
.db-learning-toolbar__status span { color: var(--dbl-muted); font-size: 12px; font-weight: 700; }
.db-learning-toolbar__status strong { color: var(--dbl-navy); font-size: 13px; }
.db-learning-toolbar__status .db-learning-progress { grid-column: 1/-1; }
.db-learning-toolbar__actions { display: flex; gap: 8px; }
.db-learning-quick-form { margin: 0; }
.db-learning-quick-form button,
.db-learning-progress-form button,
.db-learning-collection-form button {
	align-items: center;
	background: #f2f7f8;
	border: 1px solid var(--dbl-line);
	border-radius: 11px;
	color: var(--dbl-navy);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: 12px;
	font-weight: 800;
	gap: 6px;
	justify-content: center;
	min-height: 39px;
	padding: 8px 12px;
}
.db-learning-quick-form button.is-active { background: var(--dbl-mint); border-color: #a6d8ce; color: #126c5b; }
.db-learning-quick-form button:disabled,.db-learning-progress-form button:disabled,.db-learning-collection-form button:disabled { cursor: wait; opacity: .55; }
.db-learning-progress-form,.db-learning-collection-form { align-items: center; display: grid; gap: 8px; grid-column: 1/-1; grid-template-columns: auto minmax(80px,1fr) auto; margin: 0; }
.db-learning-progress-form label,.db-learning-collection-form label { color: var(--dbl-muted); font-size: 12px; font-weight: 700; }
.db-learning-progress-form input[type=range] { accent-color: var(--dbl-teal); margin: 0; width: 100%; }
.db-learning-collection-form select { background: #fff; border: 1px solid var(--dbl-line); border-radius: 10px; color: var(--dbl-ink); min-height: 39px; padding: 5px 9px; width: 100%; }
.db-learning-toolbar__collection-link { color: var(--dbl-teal); font-size: 12px; font-weight: 800; grid-column: 1/-1; text-decoration: none; }
.db-learning-live { color: #18745f; font-size: 12px; font-weight: 700; grid-column: 1/-1; margin: 0; min-height: 1em; }

.db-learning-dashboard {
	display: grid;
	gap: 18px;
	grid-column: 1/-1;
	min-width: 0;
	width: 100%;
}

.db-learning-dashboard__header {
	align-items: center;
	background: radial-gradient(circle at 90% 0, rgba(41,171,193,.32), transparent 30%), linear-gradient(135deg,var(--dbl-deep),#104c62);
	border-radius: 24px;
	color: #d8e9ee;
	display: flex;
	gap: 20px;
	justify-content: space-between;
	padding: 26px;
}
.db-learning-dashboard__header h2 { color: #fff; font-size: clamp(26px,4vw,38px); letter-spacing: -.035em; margin: 4px 0 7px; }
.db-learning-dashboard__header p { margin: 0; }

.db-learning-notice { border-radius: 13px; font-size: 14px; font-weight: 700; margin: 0; padding: 12px 15px; }
.db-learning-notice--success { background: #e6f5ee; color: #176b56; }
.db-learning-notice--error { background: #fff0ee; color: #9b392d; }

.db-learning-stats { display: grid; gap: 12px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.db-learning-stats>div { align-items: center; background: #fff; border: 1px solid var(--dbl-line); border-radius: 17px; display: grid; gap: 2px; grid-template-columns: 38px 1fr; padding: 15px; }
.db-learning-stats>div>span { align-items: center; background: var(--dbl-mint); border-radius: 11px; color: var(--dbl-teal); display: flex; font-size: 17px; grid-row: 1/3; height: 38px; justify-content: center; width: 38px; }
.db-learning-stats strong { color: var(--dbl-navy); font-size: 23px; line-height: 1; }
.db-learning-stats small { color: var(--dbl-muted); font-size: 11px; }

.db-learning-preferences,
.db-learning-list,
.db-learning-collections {
	background: #fff;
	border: 1px solid var(--dbl-line);
	border-radius: 20px;
	padding: 21px;
}

.db-learning-preferences { display: grid; gap: 22px; grid-template-columns: minmax(220px,.7fr) minmax(0,1.3fr); }
.db-learning-preferences.is-onboarding { border-color: #83cbd6; box-shadow: 0 14px 45px rgba(22,138,160,.11); }
.db-learning-preferences h3,.db-learning-list h3,.db-learning-collections h3 { color: var(--dbl-navy); font-size: 20px; margin: 4px 0 8px; }
.db-learning-preferences p { color: var(--dbl-muted); font-size: 13px; margin: 0; }
.db-learning-preferences form { display: grid; gap: 14px; }
.db-learning-preferences fieldset { border: 0; margin: 0; padding: 0; }
.db-learning-preferences legend,.db-learning-grade>span { color: var(--dbl-ink); display: block; font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.db-learning-choice-grid { display: grid; gap: 8px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.db-learning-choice-grid label { cursor: pointer; }
.db-learning-choice-grid input { opacity: 0; position: absolute; }
.db-learning-choice-grid label>span { align-items: center; background: #f7fafb; border: 1px solid var(--dbl-line); border-radius: 13px; display: flex; gap: 8px; min-height: 49px; padding: 9px 11px; }
.db-learning-choice-grid label>span b { align-items: center; background: #e5f2f3; border-radius: 9px; color: var(--dbl-teal); display: flex; height: 31px; justify-content: center; width: 31px; }
.db-learning-choice-grid label>span strong { color: var(--dbl-navy); font-size: 13px; }
.db-learning-choice-grid input:checked+span { background: var(--dbl-mint); border-color: var(--dbl-teal); box-shadow: 0 0 0 2px rgba(22,138,160,.1); }
.db-learning-choice-grid input:focus-visible+span { outline: 3px solid rgba(22,138,160,.28); outline-offset: 2px; }
.db-learning-grade select { background: #fff; border: 1px solid var(--dbl-line); border-radius: 11px; color: var(--dbl-ink); min-height: 44px; padding: 8px 11px; width: 100%; }

.db-learning-section-heading { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 14px; }
.db-learning-section-heading h3 { margin: 0; }
.db-learning-section-heading>small { color: var(--dbl-muted); font-size: 11px; }
.db-learning-list__items { display: grid; gap: 9px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.db-learning-record { align-items: center; background: #f8fbfb; border: 1px solid #e4edef; border-radius: 14px; color: inherit; display: grid; gap: 11px; grid-template-columns: 54px minmax(0,1fr) auto; min-width: 0; padding: 9px; text-decoration: none; }
.db-learning-record:hover,.db-learning-record:focus-visible { border-color: #8ecbd3; box-shadow: 0 7px 20px rgba(11,52,72,.07); color: inherit; transform: translateY(-1px); }
.db-learning-record__image { align-items: center; background: linear-gradient(135deg,#daf0ee,#b9dce3); border-radius: 10px; display: flex; height: 54px; justify-content: center; overflow: hidden; width: 54px; }
.db-learning-record__image img { height: 100%; object-fit: cover; width: 100%; }
.db-learning-record__image b { color: var(--dbl-teal); font-size: 12px; }
.db-learning-record__copy { display: grid; gap: 5px; min-width: 0; }
.db-learning-record__copy strong { color: var(--dbl-navy); display: -webkit-box; font-size: 13px; line-height: 1.3; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.db-learning-record__copy small { color: var(--dbl-muted); font-size: 10px; }
.db-learning-record__copy .db-learning-progress { height: 5px; }
.db-learning-record__arrow { color: var(--dbl-teal); padding-right: 3px; }
.db-learning-empty { background: #f7fafb; border: 1px dashed #cbdcdf; border-radius: 13px; color: var(--dbl-muted); font-size: 13px; margin: 0; padding: 15px; }

.db-learning-new-collection { display: flex; gap: 7px; margin: 0; }
.db-learning-new-collection input { background: #fff; border: 1px solid var(--dbl-line); border-radius: 10px; min-height: 40px; padding: 8px 10px; width: min(230px,100%); }
.db-learning-new-collection button { background: var(--dbl-teal); border: 0; border-radius: 10px; color: #fff; cursor: pointer; font-size: 12px; font-weight: 800; padding: 8px 12px; }
.db-learning-collection-grid { display: grid; gap: 9px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.db-learning-collection-grid article { align-items: center; background: #f8fbfb; border: 1px solid #e2edef; border-radius: 14px; display: grid; gap: 10px; grid-template-columns: 37px minmax(0,1fr) auto; padding: 11px; }
.db-learning-collection-grid article>span { align-items: center; background: #e4f3f1; border-radius: 10px; color: var(--dbl-teal); display: flex; height: 37px; justify-content: center; }
.db-learning-collection-grid article>div { display: grid; min-width: 0; }
.db-learning-collection-grid strong { color: var(--dbl-navy); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-learning-collection-grid small { color: var(--dbl-muted); font-size: 10px; }
.db-learning-collection-grid form { margin: 0; }
.db-learning-collection-grid button { background: transparent; border: 0; color: #9b5b55; cursor: pointer; font-size: 21px; line-height: 1; padding: 5px; }
.db-learning-collection-items { border-top: 1px solid #e2edef; display: grid; gap: 5px; grid-column: 1/-1; list-style: none; margin: 3px 0 0; padding: 9px 0 0; }
.db-learning-collection-items a { color: var(--dbl-navy); display: block; font-size: 11px; font-weight: 700; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.db-learning-collection-items a:hover,.db-learning-collection-items a:focus-visible { color: var(--dbl-teal); }
.db-learning-collection-empty { color: var(--dbl-muted); font-size: 10px; grid-column: 1/-1; margin: 2px 0 0; }

.db-learning-login { background: #fff; border: 1px solid var(--dbl-line); border-radius: 20px; margin: 30px auto; max-width: 620px; padding: 25px; text-align: center; }

@media (max-width: 900px) {
	.db-learning-home__grid { grid-template-columns: 1fr; }
	.db-learning-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.db-learning-preferences { grid-template-columns: 1fr; }
	.db-learning-collection-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 640px) {
	.db-learning-home { padding: 12px 0 0; }
	.db-learning-home__grid { border-radius: 20px; gap: 16px; margin-inline: 12px; padding: 20px; width: auto; }
	.db-learning-home h2 { font-size: 27px; }
	.db-learning-home__next { padding: 16px; }
	.db-learning-guest { grid-template-columns: 38px minmax(0,1fr); }
	.db-learning-guest>span { height: 38px; width: 38px; }
	.db-learning-guest a { grid-column: 1/-1; text-align: center; }
	.db-learning-toolbar { grid-template-columns: 1fr; padding: 13px; }
	.db-learning-toolbar__actions { display: grid; grid-template-columns: 1fr 1fr; }
	.db-learning-quick-form button { width: 100%; }
	.db-learning-progress-form,.db-learning-collection-form { grid-template-columns: 1fr auto; }
	.db-learning-progress-form label,.db-learning-collection-form label { grid-column: 1/-1; }
	.db-learning-dashboard__header { align-items: stretch; flex-direction: column; padding: 21px; }
	.db-learning-stats { gap: 8px; }
	.db-learning-stats>div { grid-template-columns: 32px 1fr; padding: 11px; }
	.db-learning-stats>div>span { height: 32px; width: 32px; }
	.db-learning-stats strong { font-size: 19px; }
	.db-learning-preferences,.db-learning-list,.db-learning-collections { padding: 16px; }
	.db-learning-choice-grid { grid-template-columns: 1fr; }
	.db-learning-list__items { grid-template-columns: 1fr; }
	.db-learning-section-heading { align-items: stretch; flex-direction: column; }
	.db-learning-new-collection { display: grid; grid-template-columns: minmax(0,1fr) auto; }
	.db-learning-new-collection input { width: 100%; }
	.db-learning-collection-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
	.db-learning-progress i,.db-learning-record { transition: none; }
}