:root {
	--portal-bg: #f7f9fc;
	--portal-card: #ffffff;
	--portal-text: #17243a;
	--portal-heading: #21364e;
	--portal-muted: #66758a;
	--portal-line: #e2e9f2;
	--portal-line-strong: #cbd7e5;
	--portal-primary: #246bfd;
	--portal-primary-dark: #1654d2;
	--portal-navy: #2b4158;
	--portal-cyan: #42cee5;
	--portal-lime: #c6e716;
	--portal-pink: #fb174b;
	--portal-success: #138a58;
	--portal-warning: #9a6000;
	--portal-danger: #bd3445;
	--portal-radius-lg: 26px;
	--portal-radius: 18px;
	--portal-radius-sm: 13px;
	--portal-shadow: 0 22px 60px rgba(42, 64, 88, .10);
	--portal-shadow-soft: 0 10px 30px rgba(42, 64, 88, .07);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
	position: relative;
	min-height: 100vh;
	margin: 0;
	overflow-x: hidden;
	background: var(--portal-bg);
	color: var(--portal-text);
	font-family: "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
body::before {
	position: fixed;
	inset: 0;
	z-index: -2;
	content: "";
	pointer-events: none;
	background-color: #fafbfd;
	background-image:
		radial-gradient(circle at 8% 8%, rgba(198, 231, 22, .10), transparent 20rem),
		radial-gradient(circle at 92% 15%, rgba(66, 206, 229, .11), transparent 23rem),
		radial-gradient(circle at 78% 86%, rgba(36, 107, 253, .06), transparent 25rem),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' viewBox='0 0 1600 900'%3E%3Cg fill='none' stroke='%23dbe3ec' stroke-width='2' opacity='.42'%3E%3Cpath d='M-80 210C220 50 395 340 720 180S1260 70 1690 250'/%3E%3Cpath d='M-100 270C230 110 430 390 760 225s560-60 970 115'/%3E%3Cpath d='M-140 760c330-170 560 90 870-80s610-90 980 80'/%3E%3Cpath d='M-120 820c320-150 530 100 850-45s610-70 980 105'/%3E%3C/g%3E%3C/svg%3E");
	background-position: center top;
	background-size: cover, cover, cover, max(1180px, 100vw) auto;
}
body::after {
	position: fixed;
	inset: 0;
	z-index: -1;
	content: "";
	pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .25) 48%, rgba(255, 255, 255, .82));
}

a { color: var(--portal-primary); }
a:hover { color: var(--portal-primary-dark); }
button, input, select, textarea { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(36, 107, 253, .30); outline-offset: 3px; }

.portal-icon-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.portal-icon {
	width: 1.25em;
	height: 1.25em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.portal-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }
.portal-skip-link {
	position: fixed;
	left: 20px;
	top: -100px;
	z-index: 1200;
	padding: 10px 16px;
	border-radius: 0 0 10px 10px;
	background: var(--portal-navy);
	color: #fff;
	font-weight: 750;
	transition: top .2s ease;
}
.portal-skip-link:focus { top: 0; color: #fff; }

.portal-topbar {
	position: relative;
	z-index: 20;
	border-bottom: 1px solid rgba(203, 215, 229, .75);
	background: rgba(255, 255, 255, .90);
	box-shadow: 0 8px 28px rgba(42, 64, 88, .04);
	backdrop-filter: blur(16px);
}
.portal-topbar-inner {
	min-height: 92px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.portal-brand-area { display: flex; min-width: 0; align-items: center; gap: 19px; }
.portal-brand { display: inline-flex; flex: 0 0 auto; align-items: center; text-decoration: none; }
.portal-brand img { display: block; width: 238px; max-width: 48vw; height: auto; }
.portal-header-context {
	position: relative;
	display: flex;
	min-height: 42px;
	flex-direction: column;
	justify-content: center;
	padding: 2px 0 2px 18px;
	color: #597089;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1.18;
}
.portal-header-context::before {
	position: absolute;
	left: 0;
	top: 3px;
	bottom: 3px;
	width: 3px;
	border-radius: 99px;
	background: linear-gradient(180deg, var(--portal-cyan), var(--portal-primary));
	box-shadow: 0 0 15px rgba(66, 206, 229, .32);
	content: "";
}
.portal-header-context span, .portal-header-context strong { display: block; white-space: nowrap; }
.portal-header-context strong { margin-top: 2px; color: #244967; font-size: 13px; font-weight: 800; }
.portal-security-tools { display: flex; align-items: center; gap: 9px; }
.portal-security-label {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 14px;
	border: 1px solid #dce6ef;
	border-radius: 999px;
	background: rgba(255, 255, 255, .75);
	color: var(--portal-navy);
}
.portal-security-label > .portal-icon { color: var(--portal-success); font-size: 22px; }
.portal-security-label strong, .portal-security-label small { display: block; line-height: 1.25; }
.portal-security-label strong { font-size: 13px; }
.portal-security-label small { margin-top: 2px; color: var(--portal-muted); font-size: 11px; }
.portal-security-settings {
	appearance: none;
	display: grid;
	place-items: center;
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid #dce6ef;
	border-radius: 50%;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 6px 18px rgba(42, 64, 88, .06);
	color: #42627f;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.portal-security-settings:hover {
	border-color: #a9c5e2;
	background: #f4f8fc;
	box-shadow: 0 9px 22px rgba(42, 83, 127, .12);
	color: var(--portal-primary);
	transform: translateY(-1px);
}
.portal-security-settings .portal-icon { width: 21px; height: 21px; }
.portal-security-settings-count {
	display: grid;
	place-items: center;
	position: absolute;
	z-index: 2;
	top: -5px;
	right: -5px;
	min-width: 21px;
	height: 21px;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: linear-gradient(145deg, #168cf2, #075fbd);
	box-shadow: 0 5px 12px rgba(8, 101, 190, .3);
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	pointer-events: none;
}

.portal-main { min-height: calc(100vh - 210px); padding: 52px 0 76px; }
.portal-page-intro { margin-bottom: 28px; padding-top: 24px; }
@media (min-width: 901px) {
	.portal-page-intro { margin-bottom: 84px; }
}
.portal-page-intro-centered { text-align: center; }
.portal-page-intro-simple { margin-bottom: 30px; }
.portal-page-intro-simple + .portal-card { max-width: 820px; margin-right: auto; margin-left: auto; }
.portal-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--portal-primary);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .075em;
	text-transform: uppercase;
}
.portal-page-intro h1, .portal-hero h1 {
	margin: 8px 0 10px;
	color: var(--portal-heading);
	font-size: clamp(32px, 4.8vw, 52px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.035em;
}
.portal-intro-title-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: -5px 0 10px;
}
.portal-page-intro-centered .portal-intro-title-row { justify-content: center; }
.portal-intro-title-row h1 { margin: 0; font-size: clamp(30px, 3.9vw, 43px); }
.portal-page-intro p, .portal-hero p {
	max-width: 780px;
	margin: 0;
	color: var(--portal-muted);
	font-size: 17px;
}
.portal-order-badge {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-width: 240px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 18px;
	background: linear-gradient(135deg, #24394f, #36546e);
	box-shadow: 0 16px 34px rgba(36, 57, 79, .20);
	color: #fff;
}
.portal-order-badge > .portal-icon { color: var(--portal-lime); font-size: 27px; }
.portal-order-badge small, .portal-order-badge strong { display: block; line-height: 1.22; }
.portal-order-badge small { color: rgba(255, 255, 255, .66); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.portal-order-badge strong { margin-top: 3px; font-size: 19px; letter-spacing: .01em; }
.portal-order-badge-header {
	min-width: 208px;
	padding: 9px 13px;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(36, 57, 79, .17);
}
.portal-order-badge-header > .portal-icon { font-size: 22px; }
.portal-order-badge-header small { font-size: 9px; }
.portal-order-badge-header strong { margin-top: 1px; font-size: 15px; }

.portal-overview {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 17px;
	align-items: start;
	margin: 0 0 26px;
	padding: 20px 22px;
	border: 1px solid rgba(66, 206, 229, .28);
	border-radius: var(--portal-radius);
	background: rgba(255, 255, 255, .88);
	box-shadow: var(--portal-shadow-soft);
}
.portal-overview-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 15px;
	background: linear-gradient(135deg, rgba(66, 206, 229, .19), rgba(36, 107, 253, .13));
	color: #177bba;
	font-size: 23px;
}
.portal-overview h2 { margin: 0 0 4px; color: var(--portal-heading); font-size: 18px; line-height: 1.3; }
.portal-overview p { margin: 0; color: var(--portal-muted); font-size: 14px; }
.portal-overview-result { margin-top: 23px; text-align: left; }
.portal-activation-notice {
	margin: 0 auto 26px;
	border-color: rgba(229, 145, 65, .36);
	background:
		radial-gradient(ellipse 18rem 12rem at 100% 0, rgba(255, 194, 128, .36), transparent 72%),
		linear-gradient(135deg, #fff1df, #fff9ee);
	box-shadow: 0 13px 32px rgba(174, 99, 37, .10);
}
.portal-activation-notice .portal-overview-icon {
	background: linear-gradient(135deg, #ffd9b5, #ffedcf);
	box-shadow: 0 8px 18px rgba(191, 105, 31, .12);
	color: #d46e1c;
}
.portal-activation-notice h2 { color: #633b24; }
.portal-activation-notice p { color: #765844; }

.portal-guide-launch { display: flex; flex: 0 0 auto; justify-content: flex-start; margin: 0; }
.portal-page-intro .portal-guide-launch { transform: translateY(-29px); }
.portal-btn.portal-btn-guide {
	position: relative;
	min-height: 40px;
	padding: 8px 13px;
	border-color: rgba(255, 255, 255, .32);
	border-radius: 14px 14px 14px 0;
	background: linear-gradient(135deg, #2b77ff, #1d60e7);
	box-shadow: 0 11px 27px rgba(36, 107, 253, .24);
	color: #fff;
	text-align: left;
}
.portal-btn.portal-btn-guide::after {
	position: absolute;
	left: -1px;
	bottom: -7px;
	width: 9px;
	height: 9px;
	background: #2b77ff;
	clip-path: polygon(0 0, 100% 0, 0 100%);
	content: "";
	pointer-events: none;
}
.portal-btn.portal-btn-guide:hover {
	border-color: rgba(255, 255, 255, .50);
	background: linear-gradient(135deg, #357fff, #246bfd);
	box-shadow: 0 14px 32px rgba(36, 107, 253, .30);
	color: #fff;
}
.portal-btn.portal-btn-guide:hover::after { background: #357fff; }
.portal-guide-launch-icon { color: #fff; font-size: 18px; }
.portal-btn-guide strong { color: #fff; font-size: 13px; line-height: 1.2; }

.portal-guide-overlay {
	position: fixed;
	inset: 0;
	z-index: 1450;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(circle at 50% 35%, rgba(66, 206, 229, .16), transparent 28rem),
		rgba(13, 29, 48, .61);
	backdrop-filter: blur(9px);
}
.portal-guide-overlay[hidden] { display: none; }
.portal-guide-card {
	position: relative;
	overflow: auto;
	width: min(100%, 590px);
	max-height: min(92vh, 760px);
	padding: 32px;
	border: 1px solid rgba(255, 255, 255, .78);
	border-radius: 27px;
	background:
		radial-gradient(circle at 100% 0, rgba(207, 244, 250, .75), transparent 18rem),
		linear-gradient(145deg, #fff, #fbfdff);
	box-shadow: 0 30px 90px rgba(4, 19, 38, .36);
	text-align: center;
	animation: portal-confirm-in .24s ease both;
}
.portal-guide-card::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 5px;
	content: "";
	background: linear-gradient(90deg, #2d7aff, #42cee5, #c6e716);
}
.portal-guide-close {
	position: absolute;
	right: 15px;
	top: 15px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 12px;
	background: rgba(239, 244, 249, .88);
	color: #60748b;
	cursor: pointer;
}
.portal-guide-close:hover { background: #e8eef5; color: var(--portal-heading); }
.portal-guide-illustration {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 21px;
	background: linear-gradient(135deg, #e8f1ff, #e2f8fb);
	box-shadow: 0 12px 27px rgba(36, 107, 253, .13);
	color: var(--portal-primary);
	font-size: 29px;
}
.portal-guide-card h2 { margin: 7px 0 7px; color: var(--portal-heading); font-size: clamp(26px, 4vw, 33px); letter-spacing: -.025em; }
.portal-guide-card > p { max-width: 460px; margin: 0 auto; color: var(--portal-muted); font-size: 14px; }
.portal-guide-steps { counter-reset: portal-guide-step; display: grid; gap: 10px; margin: 24px 0; padding: 0; list-style: none; text-align: left; }
.portal-guide-steps li {
	position: relative;
	counter-increment: portal-guide-step;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	gap: 13px;
	align-items: center;
	padding: 13px 15px;
	border: 1px solid #e1e9f2;
	border-radius: 16px;
	background: rgba(255, 255, 255, .84);
}
.portal-guide-steps li::before {
	position: absolute;
	left: -6px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--portal-primary);
	box-shadow: 0 3px 9px rgba(36, 107, 253, .24);
	color: #fff;
	content: counter(portal-guide-step);
	font-size: 10px;
	font-weight: 850;
	transform: translateY(-50%);
}
.portal-guide-step-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: linear-gradient(135deg, #edf3ff, #e9fafb);
	color: #2771d5;
	font-size: 20px;
}
.portal-guide-steps strong,
.portal-guide-steps small { display: block; }
.portal-guide-steps strong { color: var(--portal-heading); font-size: 14px; }
.portal-guide-steps small { margin-top: 2px; color: var(--portal-muted); font-size: 12px; line-height: 1.4; }
.portal-guide-understood { width: 100%; }

.portal-card {
	position: relative;
	margin-bottom: 24px;
	padding: 28px;
	border: 1px solid rgba(215, 225, 236, .94);
	border-radius: var(--portal-radius-lg);
	background: rgba(255, 255, 255, .94);
	box-shadow: var(--portal-shadow);
}
.portal-card h2, .portal-card h3 { color: var(--portal-heading); line-height: 1.25; }
.portal-product-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.portal-product-head {
	position: relative;
	order: 1;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 22px;
	padding: 15px 32px 24px 16px;
	background:
		radial-gradient(circle at 98% 0, rgba(66, 206, 229, .15), transparent 18rem),
		linear-gradient(135deg, #fff, #fbfdff);
}
.portal-product-heading { flex: 1 1 auto; min-width: 0; margin-top: 4px; }
.portal-product-title-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: -3px;
	min-width: 0;
}
.portal-product-title-row h2 { min-width: 0; }
.portal-product-label {
	display: flex;
	align-items: center;
	width: fit-content;
	margin-bottom: 1px;
	margin-left: 53px;
	padding: 7px 11px;
	border: 1px solid #cbdcff;
	border-radius: 999px;
	background: linear-gradient(135deg, #f0f5ff, #edf9ff);
	box-shadow: 0 6px 16px rgba(36, 107, 253, .10);
	color: #1e62d8;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .09em;
	line-height: 1.2;
	text-transform: uppercase;
}
.portal-product-heading-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 15px;
	background: linear-gradient(135deg, #2b77ff, #2264df);
	box-shadow: 0 9px 21px rgba(36, 107, 253, .23);
	color: #fff;
	font-size: 22px;
}
.portal-product-heading-icon .portal-icon { width: 23px; height: 23px; }
.portal-product-head::after {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	content: "";
	background: linear-gradient(90deg, var(--portal-line), rgba(226, 233, 242, .08));
}
.portal-product-head h2 {
	max-width: 800px;
	margin: 0;
	color: #205ba8;
	font-size: clamp(25px, 3.2vw, 35px);
	font-weight: 800;
	letter-spacing: -.025em;
}
.portal-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	width: fit-content;
	padding: 6px 11px;
	border-radius: 999px;
	background: #eef2f8;
	color: #526176;
	font-size: 12px;
	font-weight: 800;
	line-height: 1.35;
}
.portal-badge .portal-icon { width: 15px; height: 15px; }
.portal-badge-success { background: #e6f8ef; color: #0b7950; }
.portal-badge-warning { background: #fff2d9; color: #895500; }
.portal-badge-danger { background: #ffeaed; color: #a52939; }
.portal-badge-info { background: #e8f3ff; color: #175da9; }
.portal-product-status { flex: 0 0 auto; margin-top: 4px; padding: 9px 13px; }
.portal-product-head-actions { display: grid; justify-items: stretch; gap: 10px; flex: 0 0 auto; min-width: 198px; }
.portal-product-head-actions .portal-product-status { justify-self: end; }
.portal-product-toggle { min-height: 43px; padding: 9px 13px; border-radius: 12px; font-size: 13px; }
.portal-product-toggle .portal-details-chevron { margin-left: 2px; transition: transform .25s ease; }
.portal-product-toggle.is-open .portal-details-chevron { transform: rotate(180deg); }
.portal-product-action-reveal[hidden],
.portal-product-quick-actions[hidden] { display: none; }
.portal-product-quick-actions {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	gap: 8px;
	animation: portal-loading-in .22s ease both;
}
.portal-product-quick-actions form { display: flex; margin: 0; }
.portal-product-quick-actions .portal-quick-action {
	min-height: 43px;
	padding: 9px 13px;
	border-radius: 12px;
	font-size: 13px;
	white-space: nowrap;
}
.portal-product-quick-actions-simple { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-product-quick-actions-simple form,
.portal-product-quick-actions-simple .portal-quick-action { width: 100%; }
.portal-product-resume-form { width: 100%; margin: 0; }
.portal-product-resume-form .portal-btn { width: 100%; }

.portal-stats {
	order: 3;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 11px;
	padding: 18px 32px;
}
.portal-stat {
	position: relative;
	display: flex;
	min-height: 88px;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 13px 16px;
	border: 1px solid rgba(255, 255, 255, .72);
	border-radius: 16px;
	box-shadow: 0 8px 20px rgba(39, 59, 83, .08);
}
.portal-stat::after {
	position: absolute;
	right: -18px;
	top: -20px;
	width: 70px;
	height: 70px;
	border: 14px solid rgba(255, 255, 255, .28);
	border-radius: 50%;
	content: "";
}
.portal-stat-icon {
	position: absolute;
	right: 12px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	transform: translateY(-50%);
	border-radius: 11px;
	background: rgba(255, 255, 255, .75);
	font-size: 16px;
}
.portal-stat strong { position: relative; z-index: 1; display: block; font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.portal-stat > span:not(.portal-stat-icon) { position: relative; z-index: 1; display: block; margin-top: 6px; font-size: 11px; font-weight: 850; letter-spacing: .065em; text-transform: uppercase; }
.portal-stat-purchased { background: linear-gradient(135deg, #dce4ff, #eef1ff); color: #344fa9; }
.portal-stat-activated { background: linear-gradient(135deg, #c8f1df, #e4f9ef); color: #04704d; }
.portal-stat-pending { background: linear-gradient(135deg, #ffe1aa, #fff0d4); color: #875000; }
.portal-stat-available { background: linear-gradient(135deg, #c7edf7, #dff3ff); color: #08678f; }

.portal-product-details { order: 2; border: 0; background: #fbfcfe; }
.portal-product-history {
	order: 4;
	border-top: 1px solid var(--portal-line);
	background: linear-gradient(180deg, #fbfcfe, #fff);
}
.portal-product-history[open] { border-top: 1px solid var(--portal-line); border-bottom: 0; }
.portal-product-history > summary { background: transparent; }
.portal-product-history .portal-details-label { min-width: 0; }
.portal-product-history .portal-details-label > span:last-child { min-width: 0; }
.portal-product-history .portal-details-label strong,
.portal-product-history .portal-details-label small { display: block; line-height: 1.35; }
.portal-product-history .portal-details-label strong { font-size: 15px; }
.portal-product-history .portal-details-label small { margin-top: 2px; color: var(--portal-muted); font-size: 12px; font-weight: 600; }
.portal-history-icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: #eaf2ff;
	color: var(--portal-primary);
	font-size: 18px;
}
.portal-history-summary-side { display: inline-flex; align-items: center; gap: 14px; }
.portal-history-content { padding-top: 20px; }
.portal-history-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 17px;
	padding: 5px;
	border: 1px solid #e2e9f2;
	border-radius: 14px;
	background: #f4f7fb;
}
.portal-history-filter {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 40px;
	padding: 8px 13px;
	border: 1px solid transparent;
	border-radius: 10px;
	background: transparent;
	color: #52677e;
	cursor: pointer;
	font-size: 13px;
	font-weight: 750;
	transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.portal-history-filter:hover { background: rgba(255, 255, 255, .72); color: var(--portal-heading); }
.portal-history-filter.is-active {
	border-color: #d8e3f0;
	background: #fff;
	box-shadow: 0 5px 13px rgba(42, 64, 88, .08);
	color: var(--portal-primary-dark);
}
.portal-history-filter span {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #e8eef6;
	color: #5e6e82;
	font-size: 11px;
}
.portal-history-filter.is-active span { background: #e8f1ff; color: var(--portal-primary-dark); }
.portal-history-filter[data-portal-history-filter="in_progress"] { border-color: #f1c975; background: #fff0d4; color: #875000; }
.portal-history-filter[data-portal-history-filter="activated"] { border-color: #8fd5b6; background: #e4f9ef; color: #04704d; }
.portal-history-filter[data-portal-history-filter="cancelled"] { border-color: #eea4b0; background: #ffe5ea; color: #9d2638; }
.portal-history-filter[data-portal-history-filter="in_progress"] span { background: #ffdfa2; color: #7b4900; }
.portal-history-filter[data-portal-history-filter="activated"] span { background: #beeacf; color: #035f42; }
.portal-history-filter[data-portal-history-filter="cancelled"] span { background: #ffcbd4; color: #8f2031; }
.portal-history-filter[data-portal-history-filter].is-active { box-shadow: 0 6px 15px rgba(42, 64, 88, .13); }
.portal-access-item[hidden] { display: none !important; }
.portal-history-filter-empty { padding: 22px; border: 1px dashed var(--portal-line-strong); border-radius: 15px; color: var(--portal-muted); text-align: center; }
.portal-product-details[open] { border-top: 1px solid var(--portal-line); border-bottom: 1px solid var(--portal-line); }
.portal-product-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 66px;
	padding: 15px 32px;
	background: #fbfcfe;
	color: var(--portal-heading);
	cursor: pointer;
	font-weight: 800;
	list-style: none;
	transition: background .2s ease, color .2s ease;
}
.portal-product-details > summary::-webkit-details-marker,
.portal-access-item > summary::-webkit-details-marker { display: none; }
.portal-product-details > summary:hover { background: #f5f8fc; color: var(--portal-primary); }
.portal-details-label { display: inline-flex; align-items: center; gap: 10px; }
.portal-details-chevron { transition: transform .25s ease; }
.portal-product-details[open] > summary .portal-details-chevron,
.portal-access-item[open] > summary .portal-details-chevron { transform: rotate(180deg); }
.portal-product-content { padding: 26px 32px 32px; }
.portal-visually-hidden,
.portal-product-details > summary.portal-visually-hidden {
	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;
}
.portal-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.portal-actions-centered { justify-content: center; margin-top: 24px; }
.portal-actions form { margin: 0; }
.portal-btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 11px 19px;
	border: 1px solid transparent;
	border-radius: 13px;
	background: linear-gradient(135deg, #2b77ff, #1d60e7);
	box-shadow: 0 8px 19px rgba(36, 107, 253, .20);
	color: #fff;
	cursor: pointer;
	font-weight: 800;
	line-height: 1.3;
	text-decoration: none;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.portal-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, #1e66eb, #164fc7); box-shadow: 0 11px 24px rgba(36, 107, 253, .25); color: #fff; }
.portal-btn:active { transform: translateY(0); }
.portal-btn .portal-icon { font-size: 18px; }
.portal-btn:disabled,
.portal-btn[aria-disabled="true"] { cursor: wait; opacity: .78; transform: none; box-shadow: none; }
.portal-btn.is-loading { position: relative; pointer-events: none; }
.portal-btn-spinner,
.portal-loading-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 3px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: portal-spin .72s linear infinite;
}
.portal-btn-spinner { width: 17px; height: 17px; border-width: 2px; }
@keyframes portal-spin { to { transform: rotate(360deg); } }
.portal-btn-secondary { border-color: #d8e3f0; background: #fff; box-shadow: none; color: #25445f; }
.portal-btn-secondary:hover { background: #f2f6fb; box-shadow: none; color: #19354f; }
.portal-btn-transfer {
	border-color: rgba(255, 255, 255, .36);
	background: linear-gradient(135deg, #19ae78, #078968);
	box-shadow: 0 9px 21px rgba(7, 137, 104, .23);
	color: #fff;
}
.portal-btn-transfer:hover {
	border-color: rgba(255, 255, 255, .52);
	background: linear-gradient(135deg, #20ba83, #079473);
	box-shadow: 0 12px 25px rgba(7, 137, 104, .29);
	color: #fff;
}
.portal-btn-danger { border-color: #ffd2d8; background: #fff4f5; box-shadow: none; color: var(--portal-danger); }
.portal-btn-danger:hover { background: #ffe8eb; box-shadow: none; color: #9b2635; }
.portal-btn-small { min-height: 39px; padding: 8px 12px; border-radius: 11px; font-size: 13px; }

.portal-section-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 2px 0 13px;
}
.portal-section-heading h3 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 18px; }
.portal-section-heading h3 .portal-icon { color: var(--portal-primary); }
.portal-section-count { color: var(--portal-muted); font-size: 13px; font-weight: 700; }
.portal-device-overlay {
	position: fixed;
	inset: 0;
	z-index: 1440;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(circle at 62% 25%, rgba(66, 206, 229, .16), transparent 26rem),
		rgba(12, 29, 49, .64);
	backdrop-filter: blur(9px);
}
.portal-device-overlay[hidden] { display: none; }
.portal-device-dialog {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: min(100%, 720px);
	max-height: min(90vh, 720px);
	border: 1px solid rgba(255, 255, 255, .82);
	border-radius: 25px;
	background: #fff;
	box-shadow: 0 32px 95px rgba(4, 19, 38, .42);
	animation: portal-confirm-in .24s ease both;
}
.portal-device-dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 24px 25px 20px;
	border-bottom: 1px solid var(--portal-line);
	background:
		radial-gradient(circle at 100% 0, rgba(208, 244, 250, .72), transparent 18rem),
		linear-gradient(145deg, #fff, #fbfdff);
}
.portal-device-dialog-title { min-width: 0; }
.portal-device-title-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.portal-device-title-row h2 { margin: 0; color: var(--portal-heading); font-size: clamp(23px, 3.5vw, 29px); line-height: 1.2; }
.portal-device-dialog-title > p { max-width: 540px; margin: 8px 0 0; color: var(--portal-muted); font-size: 13px; line-height: 1.5; }
.portal-device-title-row .portal-section-count {
	display: grid;
	place-items: center;
	min-width: 31px;
	height: 31px;
	padding: 0 9px;
	border-radius: 999px;
	background: #eef3f8;
	color: #4e6479;
}
.portal-device-dialog-close {
	appearance: none;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #dce6ef;
	border-radius: 13px;
	background: rgba(255, 255, 255, .88);
	color: #60748b;
	cursor: pointer;
}
.portal-device-dialog-close:hover { background: #eef3f8; color: var(--portal-heading); }
.portal-device-dialog-body { flex: 1 1 auto; overflow: auto; padding: 20px 22px 22px; overscroll-behavior: contain; }
.portal-device-list { display: grid; gap: 8px; }
.portal-device-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	border: 1px solid #dfe7f0;
	border-radius: 13px;
	background: #fbfcfe;
	overflow: hidden;
}
.portal-device-details { min-width: 0; }
.portal-device-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 51px;
	padding: 9px 13px;
	cursor: pointer;
	list-style: none;
}
.portal-device-details > summary::-webkit-details-marker { display: none; }
.portal-device-details > summary:hover { background: #f3f7fb; }
.portal-device-details[open] > summary { border-bottom: 1px solid #e3eaf2; background: #f6f9fc; }
.portal-device-details[open] .portal-details-chevron { transform: rotate(180deg); }
.portal-device-name,
.portal-device-side { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.portal-device-name > .portal-icon { flex: 0 0 auto; color: #4f6e8e; }
.portal-device-name strong { overflow: hidden; color: #30475f; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.portal-device-side { flex: 0 0 auto; }
.portal-device-badge {
	padding: 4px 8px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .07em;
}
.portal-device-badge-current { border: 1px solid #85d1b3; background: #dcf7eb; color: #08714f; }
.portal-device-badge-other { border: 1px solid #d8e0e9; background: #f1f4f7; color: #7b8998; }
.portal-device-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 10px 42px 12px; color: var(--portal-muted); font-size: 12px; }
.portal-device-meta strong { color: #40586f; }
.portal-device-remove-form { display: flex; align-items: center; margin: 0; padding: 6px 8px; border-left: 1px solid #e3eaf2; }
.portal-device-remove { min-height: 37px; }
.portal-device-empty { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border-radius: 11px; background: #f5f7fa; color: var(--portal-muted); font-size: 13px; }
.portal-device-empty .portal-icon { color: #8293a5; }
.portal-access-list { display: grid; gap: 11px; }
.portal-access-item {
	border: 1px solid var(--portal-line);
	border-radius: 17px;
	background: #fff;
	box-shadow: 0 7px 22px rgba(42, 64, 88, .045);
	overflow: hidden;
}
.portal-access-item > summary {
	display: grid;
	grid-template-columns: minmax(220px, 1.5fr) minmax(145px, .8fr) auto;
	gap: 16px;
	align-items: center;
	min-height: 82px;
	padding: 15px 17px;
	cursor: pointer;
	list-style: none;
	transition: background .2s ease;
}
.portal-access-item > summary:hover { background: #f9fbfe; }
.portal-access-item-activated { border-color: #8fd5b6; background: #effbf5; box-shadow: 0 8px 23px rgba(4, 112, 77, .09); }
.portal-access-item-activated > summary { background: linear-gradient(135deg, #c8f1df, #e4f9ef); }
.portal-access-item-activated > summary:hover { background: linear-gradient(135deg, #bcebd5, #dcf6e9); }
.portal-access-item-activated .portal-person-icon { background: rgba(255, 255, 255, .76); color: #04704d; }
.portal-access-item-activated .portal-access-status .portal-badge { background: #b7e8cd; color: #035f42; }
.portal-access-item-pending { border-color: #f1c975; background: #fff8ea; box-shadow: 0 8px 23px rgba(135, 80, 0, .08); }
.portal-access-item-pending > summary { background: linear-gradient(135deg, #ffe1aa, #fff0d4); }
.portal-access-item-pending > summary:hover { background: linear-gradient(135deg, #ffd894, #ffebc4); }
.portal-access-item-pending .portal-person-icon { background: rgba(255, 255, 255, .76); color: #875000; }
.portal-access-item-pending .portal-access-status .portal-badge { background: #ffdda0; color: #784700; }
.portal-access-item-self.portal-access-item-pending { border-color: #8fcfe1; background: #effaff; }
.portal-access-item-self.portal-access-item-pending > summary { background: linear-gradient(135deg, #c7edf7, #dff3ff); }
.portal-access-item-self.portal-access-item-pending > summary:hover { background: linear-gradient(135deg, #b9e6f2, #d5effc); }
.portal-access-item-self.portal-access-item-pending .portal-person-icon { background: rgba(255, 255, 255, .76); color: #08678f; }
.portal-access-item-self.portal-access-item-pending .portal-access-status .portal-badge { background: #b9e4ef; color: #075d81; }
.portal-access-item-opened,
.portal-access-item-processing { border-color: #8fcfe1; background: #effaff; box-shadow: 0 8px 23px rgba(8, 103, 143, .08); }
.portal-access-item-opened > summary,
.portal-access-item-processing > summary { background: linear-gradient(135deg, #c7edf7, #dff3ff); }
.portal-access-item-opened > summary:hover,
.portal-access-item-processing > summary:hover { background: linear-gradient(135deg, #b9e6f2, #d5effc); }
.portal-access-item-opened .portal-person-icon,
.portal-access-item-processing .portal-person-icon { background: rgba(255, 255, 255, .76); color: #08678f; }
.portal-access-item-opened .portal-access-status .portal-badge,
.portal-access-item-processing .portal-access-status .portal-badge { background: #b9e4ef; color: #075d81; }
.portal-access-item-cancelled,
.portal-access-item-activation_failed { border-color: #eea4b0; background: #fff1f4; box-shadow: 0 8px 23px rgba(157, 38, 56, .08); }
.portal-access-item-cancelled > summary,
.portal-access-item-activation_failed > summary { background: linear-gradient(135deg, #ffcdd6, #ffe5ea); }
.portal-access-item-cancelled > summary:hover,
.portal-access-item-activation_failed > summary:hover { background: linear-gradient(135deg, #ffc0cc, #ffdae1); }
.portal-access-item-cancelled .portal-person-icon,
.portal-access-item-activation_failed .portal-person-icon { background: rgba(255, 255, 255, .76); color: #9d2638; }
.portal-access-item-cancelled .portal-access-status .portal-badge,
.portal-access-item-activation_failed .portal-access-status .portal-badge { background: #ffc3ce; color: #8f2031; }
.portal-access-item-cancelled { border-color: #d6c9cd; background: #faf8f9; box-shadow: 0 7px 20px rgba(91, 71, 77, .055); }
.portal-access-item-cancelled > summary { background: linear-gradient(135deg, #e9dfe2, #f4eff1); }
.portal-access-item-cancelled > summary:hover { background: linear-gradient(135deg, #e3d7da, #efe8ea); }
.portal-access-item-cancelled .portal-person-icon { background: rgba(255, 255, 255, .72); color: #875762; }
.portal-access-item-cancelled .portal-access-status .portal-badge { background: #dfd1d5; color: #764852; }
.portal-access-item-expired { border-color: #b9c5d2; background: #f5f7fa; box-shadow: 0 8px 23px rgba(81, 96, 115, .07); }
.portal-access-item-expired > summary { background: linear-gradient(135deg, #dce3eb, #eef2f6); }
.portal-access-item-expired > summary:hover { background: linear-gradient(135deg, #d1dae4, #e7edf3); }
.portal-access-item-expired .portal-person-icon { background: rgba(255, 255, 255, .76); color: #516073; }
.portal-access-item-expired .portal-access-status .portal-badge { background: #d4dde7; color: #485669; }
.portal-access-person { display: flex; align-items: center; gap: 12px; min-width: 0; }
.portal-access-person > span:last-child { min-width: 0; }
.portal-person-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: linear-gradient(135deg, #e8f1ff, #e7faf8);
	color: #2465ba;
	font-size: 19px;
}
.portal-access-person strong, .portal-access-person small { display: block; }
.portal-access-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-access-person small { margin-top: 2px; color: var(--portal-muted); font-size: 12px; }
.portal-origin-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 7px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.25;
}
.portal-origin-badge .portal-icon { width: 13px; height: 13px; }
.portal-origin-self { border-color: #bfe2e9; background: #edf9fb; color: #116779; }
.portal-origin-invitation { border-color: #d3dff2; background: #f2f6fc; color: #45698d; }
.portal-access-status small { display: block; margin-top: 5px; color: var(--portal-muted); font-size: 12px; }
.portal-access-summary-action { display: flex; align-items: center; gap: 8px; color: var(--portal-primary); font-size: 13px; font-weight: 800; white-space: nowrap; }
.portal-access-body { padding: 0 18px 19px; border-top: 1px solid var(--portal-line); background: #fbfcfe; }
.portal-access-body-grid {
	display: grid;
	grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
	gap: 24px;
	padding-top: 20px;
}
.portal-access-body-grid-single { grid-template-columns: minmax(0, 1fr); }
.portal-access-subsection h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--portal-heading); font-size: 14px; }
.portal-access-subsection h4 .portal-icon { color: var(--portal-primary); }
.portal-channel-list { display: grid; gap: 8px; }
.portal-channel-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #e4ebf3;
	border-radius: 12px;
	background: #fff;
	font-size: 13px;
}
.portal-channel-name { display: inline-flex; align-items: center; gap: 7px; color: var(--portal-muted); }
.portal-channel-name .portal-icon { width: 16px; height: 16px; }
.portal-channel-value { color: var(--portal-heading); font-weight: 750; text-align: right; }
.portal-timeline { position: relative; display: grid; gap: 12px; margin: 0; padding: 0 0 0 3px; list-style: none; }
.portal-timeline::before { position: absolute; left: 9px; top: 8px; bottom: 8px; width: 2px; content: ""; background: #dce6f0; }
.portal-timeline-item { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.portal-timeline-dot { position: relative; z-index: 1; width: 14px; height: 14px; margin: 4px 0 0 3px; border: 4px solid #fff; border-radius: 50%; background: var(--portal-primary); box-shadow: 0 0 0 2px #cbdcf4; }
.portal-timeline-content strong, .portal-timeline-content time { display: block; }
.portal-timeline-content strong { color: #31475f; font-size: 13px; line-height: 1.4; }
.portal-timeline-content time { margin-top: 2px; color: var(--portal-muted); font-size: 11px; }
.portal-access-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--portal-line); }
.portal-empty {
	padding: 24px;
	border: 1px dashed #c5d4e4;
	border-radius: 15px;
	background: rgba(248, 251, 255, .72);
	color: var(--portal-muted);
	text-align: center;
}
.portal-empty .portal-icon { display: block; width: 30px; height: 30px; margin: 0 auto 9px; color: #8aa3bd; }

.portal-hero { margin-bottom: 25px; }
.portal-form { max-width: 790px; margin-left: auto; margin-right: auto; }
.portal-grid { display: grid; gap: 24px; }
.portal-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-grid > .portal-card { margin-bottom: 0; }
.portal-form-card {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}
.portal-form-section {
	padding: 0 22px 22px;
	border: 1px solid #dce6f1;
	border-radius: 19px;
	background: #fff;
	box-shadow: 0 10px 28px rgba(42, 64, 88, .065);
}
.portal-form-section + .portal-form-section { margin-top: 24px; }
.portal-form-section + .portal-overview { margin-top: 18px; }
.portal-form-section-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 13px;
	align-items: start;
	margin: 0 -22px 22px;
	padding: 18px 20px;
	border-radius: 18px 18px 0 0;
	background:
		radial-gradient(ellipse 16rem 10rem at 100% 0, rgba(87, 231, 237, .34), transparent 70%),
		radial-gradient(ellipse 13rem 9rem at 8% 118%, rgba(213, 91, 255, .26), transparent 72%),
		linear-gradient(135deg, #4b32c3, #7040eb 56%, #9345e6);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.portal-form-section-icon {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	border: 1px solid rgba(255, 255, 255, .30);
	background: rgba(255, 255, 255, .17);
	box-shadow: 0 8px 18px rgba(62, 37, 151, .25);
	color: #fff;
	font-size: 20px;
}
.portal-form-section-head h2 { margin: 0 0 3px; color: #fff; font-size: 21px; }
.portal-form-section-head p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 13px; }
.portal-field { position: relative; margin-bottom: 19px; }
.portal-field label { display: block; margin-bottom: 7px; color: #2d4259; font-size: 14px; font-weight: 800; }
.portal-field input[type="text"],
.portal-field input[type="email"],
.portal-field input[type="tel"],
.portal-field input[type="number"],
.portal-field select,
.portal-field textarea {
	width: 100%;
	min-height: 52px;
	padding: 13px 15px;
	border: 1px solid #cbd7e4;
	border-radius: 13px;
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(42, 64, 88, .035);
	color: var(--portal-text);
	transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.portal-field input::placeholder, .portal-field textarea::placeholder { color: #98a6b8; }
.portal-field input:hover, .portal-field select:hover, .portal-field textarea:hover { border-color: #9db0c5; }
.portal-field input:focus, .portal-field select:focus, .portal-field textarea:focus {
	border-color: var(--portal-primary);
	box-shadow: 0 0 0 4px rgba(36, 107, 253, .12);
	outline: 0;
}
.portal-input-shell { position: relative; display: block; }
.portal-input-shell > input[type="text"],
.portal-input-shell > input[type="email"],
.portal-input-shell > input[type="tel"],
.portal-input-shell > input[type="number"] { padding-left: 49px; }
.portal-input-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	color: #7890aa;
	pointer-events: none;
	transform: translateY(-50%);
	transition: color .18s ease, transform .18s ease;
}
.portal-input-icon .portal-icon { width: 20px; height: 20px; }
.portal-input-shell:focus-within .portal-input-icon { color: var(--portal-primary); transform: translateY(-50%) scale(1.04); }
.portal-field-invalid .portal-input-icon { color: #bd3445; }
.portal-field-hint, .portal-muted { color: var(--portal-muted); }
.portal-field-hint { display: flex; gap: 7px; align-items: flex-start; margin-top: 7px; font-size: 12px; }
.portal-field-hint .portal-icon { margin-top: 1px; width: 15px; height: 15px; }
.portal-field input.form-error,
.portal-field select.form-error,
.portal-field textarea.form-error,
.portal-field-invalid input,
.portal-field-invalid select,
.portal-field-invalid textarea {
	border-color: #d34b5b;
	background: #fffafb;
	box-shadow: 0 0 0 4px rgba(189, 52, 69, .09);
}
.portal-field .error-message, .portal-field-error {
	position: relative;
	margin-top: 8px;
	padding: 9px 11px 9px 34px;
	border: 1px solid #8c2031;
	border-radius: 10px;
	background: linear-gradient(135deg, #bd3448, #952237);
	box-shadow: 0 8px 20px rgba(130, 29, 45, .18);
	color: #fff;
	font-size: 12px;
	font-weight: 750;
	line-height: 1.45;
}
.portal-field .error-message::before, .portal-field-error::before {
	position: absolute;
	left: 12px;
	top: 9px;
	content: "!";
	display: grid;
	place-items: center;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .16);
	color: #fff;
	font-size: 10px;
	font-weight: 900;
}
.portal-check {
	position: relative;
	display: block;
	margin: 13px 0;
	padding: 0;
	border: 1px solid #dfe7f1;
	border-radius: 14px;
	background: linear-gradient(135deg, #fbfcff, #f7faff);
	overflow: hidden;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.portal-check:hover { border-color: #adc3df; background: #f5f9ff; box-shadow: 0 8px 20px rgba(42, 75, 112, .07); transform: translateY(-1px); }
.portal-check:has(input[type="checkbox"]:checked) { border-color: rgba(36, 107, 253, .48); background: linear-gradient(135deg, #eef5ff, #effbfc); box-shadow: 0 8px 22px rgba(36, 107, 253, .10); }
.portal-check-label {
	display: grid;
	grid-template-columns: 27px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 14px 15px;
	color: #33485f;
	cursor: pointer;
	font-size: 14px;
	font-weight: 680;
	line-height: 1.5;
}
.portal-check input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.portal-checkbox-visual {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border: 2px solid #9fb1c6;
	border-radius: 9px;
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(34, 59, 87, .05);
	color: transparent;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}
.portal-checkbox-visual .portal-icon { width: 22px; height: 22px; stroke-width: 2.7; }
.portal-check input[type="checkbox"]:checked + .portal-checkbox-visual {
	border-color: var(--portal-primary);
	background: linear-gradient(135deg, #2c78ff, #1d5fdc);
	box-shadow: 0 6px 15px rgba(36, 107, 253, .28);
	color: #fff;
	transform: scale(1.03);
}
.portal-check input[type="checkbox"]:focus-visible + .portal-checkbox-visual { outline: 3px solid rgba(36, 107, 253, .24); outline-offset: 3px; }
.portal-check-copy { min-width: 0; }
.portal-check-error { border-color: #cf5362; background: #fff1f3; }
.portal-check-error .portal-checkbox-visual { border-color: #c44152; }
.portal-check-error + .portal-field-error { margin: 7px 0 15px; }
.portal-form-actions { margin-top: 27px; padding-top: 22px; border-top: 1px solid var(--portal-line); }

.portal-document-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.portal-document-title .portal-icon { color: var(--portal-primary); }
.portal-document-version { flex: 0 0 auto; padding: 4px 8px; border-radius: 999px; background: #eaf1ff; color: #285ca9; font-size: 11px; }
.portal-document-content { max-height: 410px; overflow: auto; padding: 20px; border-top: 1px solid var(--portal-line); background: #fff; }
.portal-document-meta { display: flex; align-items: center; gap: 7px; margin: 0 0 15px; color: var(--portal-muted); font-size: 12px; }
.portal-document-content img, .portal-document-content table { max-width: 100%; }
.portal-document-card {
	margin: 12px 0;
	border: 1px solid rgba(57, 174, 210, .38);
	border-radius: 16px;
	background:
		radial-gradient(circle at 100% 0, rgba(72, 207, 229, .17), transparent 12rem),
		linear-gradient(135deg, #eef6ff, #effbfc);
	box-shadow: 0 9px 24px rgba(30, 111, 169, .09);
}
.portal-document-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 15px 16px;
}
.portal-document-card .portal-document-title { min-width: 0; }
.portal-document-card .portal-document-title > .portal-icon { flex: 0 0 auto; width: 24px; height: 24px; }
.portal-document-card .portal-document-title strong,
.portal-document-card .portal-document-title small { display: block; }
.portal-document-card .portal-document-title strong { color: var(--portal-heading); font-size: 14px; line-height: 1.35; }
.portal-document-card .portal-document-title small { margin-top: 3px; color: var(--portal-muted); font-size: 11px; font-weight: 700; }
.portal-document-overlay {
	position: fixed;
	inset: 0;
	z-index: 1460;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(circle at 50% 30%, rgba(66, 206, 229, .17), transparent 30rem),
		rgba(12, 29, 49, .66);
	backdrop-filter: blur(9px);
}
.portal-document-overlay[hidden] { display: none; }
.portal-document-dialog {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: min(100%, 900px);
	max-height: min(92vh, 860px);
	border: 1px solid rgba(255, 255, 255, .82);
	border-radius: 27px;
	background: #fff;
	box-shadow: 0 32px 95px rgba(4, 19, 38, .42);
	animation: portal-confirm-in .24s ease both;
}
.portal-document-dialog-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding: 25px 26px 20px;
	border-bottom: 1px solid var(--portal-line);
	background:
		radial-gradient(circle at 100% 0, rgba(208, 244, 250, .72), transparent 18rem),
		linear-gradient(145deg, #fff, #fbfdff);
}
.portal-document-dialog-head h2 { margin: 7px 0 9px; color: var(--portal-heading); font-size: clamp(23px, 3.5vw, 31px); line-height: 1.2; }
.portal-document-close {
	appearance: none;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid #dce6ef;
	border-radius: 13px;
	background: rgba(255, 255, 255, .88);
	color: #60748b;
	cursor: pointer;
}
.portal-document-close:hover { background: #eef3f8; color: var(--portal-heading); }
.portal-document-dialog .portal-document-content {
	flex: 1 1 auto;
	max-height: none;
	overflow: auto;
	padding: 25px 26px;
	border: 0;
	overscroll-behavior: contain;
}
.portal-document-dialog-actions {
	display: flex;
	justify-content: flex-end;
	padding: 16px 26px;
	border-top: 1px solid var(--portal-line);
	background: #f8fafc;
}

.portal-alert {
	position: relative;
	margin: 0 0 18px;
	padding: 15px 17px;
	border: 1px solid transparent;
	border-radius: 14px;
}
.portal-alert-success { border-color: #b9e8d1; background: #eaf9f2; color: #116d49; }
.portal-alert-info { border-color: #b9d9f5; background: #eef7ff; color: #185b8d; }
.portal-alert-error { border-color: #ffc9cf; background: #fff0f2; color: #992c3a; }
.portal-alert-warning { border-color: #f1d392; background: #fff7e6; color: #7c4d00; }
.portal-centered { max-width: 720px; margin: 26px auto; text-align: center; }
.portal-centered h1 { margin: 8px 0 11px; color: var(--portal-heading); font-size: clamp(29px, 4vw, 42px); line-height: 1.13; }
.portal-completion-info {
	display: grid;
	grid-template-columns: 50px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	margin: -7px 0 24px;
	padding: 19px 21px 19px 18px;
	border: 1px solid #8dc2f5;
	border-left: 5px solid #1677e8;
	border-radius: 17px;
	background: linear-gradient(135deg, #eaf5ff 0%, #f8fcff 100%);
	box-shadow: 0 13px 30px rgba(22, 103, 185, .13);
	color: #234c70;
	text-align: left;
}
.portal-completion-info-copy { min-width: 0; }
.portal-completion-info-title {
	display: block;
	margin-bottom: 6px;
	color: #123d68;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
}
.portal-completion-info p { margin: 0; font-size: 17px; line-height: 1.55; }
.portal-completion-info-action {
	display: inline-block;
	margin: 1px 2px;
	padding: 2px 8px;
	border: 1px solid #bddbfa;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 3px 9px rgba(22, 103, 185, .1);
	color: #0965bd;
	font-weight: 800;
	white-space: nowrap;
}
.portal-completion-info-icon {
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	border-radius: 15px;
	background: linear-gradient(145deg, #2189ed, #0964bd);
	box-shadow: 0 8px 18px rgba(9, 100, 189, .25);
	color: #fff;
}
.portal-mail-search {
	margin-top: -7px;
	padding: 18px;
	border: 1px solid #dce5ef;
	border-radius: 16px;
	background: #f8fafc;
	text-align: left;
}
.portal-mail-search > p { margin: 0 0 12px; color: #52677d; font-size: 14px; line-height: 1.55; }
.portal-copy-field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: stretch;
	padding: 7px;
	border: 1px solid #cbd8e6;
	border-radius: 13px;
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(42, 64, 88, .035);
}
.portal-copy-field > span { display: flex; align-items: center; min-width: 0; padding: 7px 10px; color: #30475f; font-size: 13px; font-weight: 750; line-height: 1.45; overflow-wrap: anywhere; }
.portal-copy-button { min-height: 43px; padding: 8px 14px; }
.portal-completion-actions { gap: 12px; }
.portal-success-mark, .portal-state-mark {
	display: grid;
	place-items: center;
	width: 86px;
	height: 86px;
	margin: 0 auto 20px;
	border-radius: 28px;
	background: linear-gradient(135deg, #dff8ed, #eafcff);
	box-shadow: 0 14px 30px rgba(19, 138, 88, .12);
	color: var(--portal-success);
	font-size: 41px;
}
.portal-state-mark-error { background: linear-gradient(135deg, #fff0f2, #fff8f2); box-shadow: 0 14px 30px rgba(189, 52, 69, .10); color: var(--portal-danger); }

.portal-toast-region {
	position: fixed;
	z-index: 1000;
	right: max(20px, env(safe-area-inset-right));
	top: max(20px, env(safe-area-inset-top));
	display: grid;
	gap: 11px;
	width: min(440px, calc(100vw - 40px));
	pointer-events: none;
}
.portal-toast {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 12px;
	align-items: start;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, .88);
	border-radius: 17px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 22px 55px rgba(25, 43, 64, .22);
	color: #263b52;
	pointer-events: auto;
	animation: portal-toast-in .36s cubic-bezier(.2, .8, .2, 1) both;
}
.portal-toast-icon {
	display: grid;
	place-items: center;
	width: 39px;
	height: 39px;
	border-radius: 13px;
	background: #edf3ff;
	color: var(--portal-primary);
	font-size: 19px;
}
.portal-toast-success .portal-toast-icon { background: #e4f8ef; color: var(--portal-success); }
.portal-toast-warning .portal-toast-icon { background: #fff1d5; color: var(--portal-warning); }
.portal-toast-error {
	border-color: rgba(255, 255, 255, .32);
	background: linear-gradient(135deg, #c9374a, #a92538);
	box-shadow: 0 22px 55px rgba(151, 31, 48, .32);
	color: #fff;
}
.portal-toast-error .portal-toast-icon { background: rgba(255, 255, 255, .17); color: #fff; }
.portal-toast-error .portal-toast-content { color: #fff; }
.portal-toast-error .portal-toast-close { color: rgba(255, 255, 255, .82); }
.portal-toast-error .portal-toast-close:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.portal-toast-content { align-self: center; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.45; }
.portal-toast-content h3, .portal-toast-content p { margin: 0; font-size: inherit; }
.portal-toast-close {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: #748399;
	cursor: pointer;
}
.portal-toast-close:hover { background: #f0f3f7; color: #344b62; }
.portal-toast-close .portal-icon { width: 18px; height: 18px; }
.portal-toast-leaving { animation: portal-toast-out .36s ease both; }
@keyframes portal-toast-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes portal-toast-out { to { opacity: 0; transform: translateY(-10px) scale(.97); } }

.portal-confirm-overlay {
	position: fixed;
	inset: 0;
	z-index: 1450;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(circle at 50% 38%, rgba(36, 107, 253, .16), transparent 26rem),
		rgba(13, 29, 48, .64);
	backdrop-filter: blur(9px);
}
.portal-confirm-overlay[hidden] { display: none; }
.portal-confirm-card {
	position: relative;
	overflow: hidden;
	width: min(100%, 500px);
	padding: 34px;
	border: 1px solid rgba(255, 255, 255, .78);
	border-radius: 26px;
	background:
		radial-gradient(circle at 100% 0, rgba(207, 242, 250, .70), transparent 17rem),
		linear-gradient(145deg, #fff, #fbfdff);
	box-shadow: 0 30px 90px rgba(4, 19, 38, .38);
	text-align: center;
	animation: portal-confirm-in .24s ease both;
}
.portal-confirm-card::before {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 5px;
	content: "";
	background: linear-gradient(90deg, #2d7aff, #42cee5, #36a9cc);
}
.portal-confirm-illustration {
	position: relative;
	display: grid;
	place-items: center;
	width: 70px;
	height: 70px;
	margin: 0 auto 17px;
	border-radius: 23px;
	background: linear-gradient(135deg, #e9f2ff, #e5f9fb);
	box-shadow: 0 12px 28px rgba(36, 107, 253, .14);
	color: #246bfd;
	font-size: 32px;
}
.portal-confirm-illustration-ring {
	position: absolute;
	inset: -8px;
	border: 1px solid rgba(66, 206, 229, .27);
	border-radius: 29px;
	animation: portal-confirm-ring 2.4s ease-out infinite;
}
.portal-confirm-illustration .portal-icon { position: relative; z-index: 1; }
.portal-confirm-card .portal-eyebrow { color: #176cb8; }
.portal-confirm-card h2 { margin: 8px 0 9px; color: var(--portal-heading); font-size: clamp(24px, 4vw, 30px); line-height: 1.18; letter-spacing: -.02em; }
.portal-confirm-card > p { max-width: 410px; margin: 0 auto; color: var(--portal-muted); font-size: 14px; }
.portal-confirm-actions { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 10px; margin-top: 26px; }
.portal-confirm-actions .portal-btn { width: 100%; min-height: 51px; }
.portal-btn-confirm { border-color: #1d63d9; background: linear-gradient(135deg, #2b77ff, #1675bd); box-shadow: 0 9px 22px rgba(36, 107, 253, .22); color: #fff; }
.portal-btn-confirm:hover { background: linear-gradient(135deg, #1d68ec, #12629f); box-shadow: 0 12px 26px rgba(36, 107, 253, .27); color: #fff; }
body.portal-dialog-open,
body.portal-device-dialog-open { overflow: hidden; }
@keyframes portal-confirm-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes portal-confirm-ring { 0% { opacity: 0; transform: scale(.82); } 25% { opacity: .8; } 70%, 100% { opacity: 0; transform: scale(1.18); } }

.portal-loading-overlay {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(18, 34, 53, .48);
	backdrop-filter: blur(7px);
	opacity: 1;
	transition: opacity .2s ease;
}
.portal-loading-overlay[hidden] { display: none; }
.portal-loading-card {
	display: grid;
	justify-items: center;
	width: min(100%, 420px);
	padding: 32px 28px;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 24px;
	background: rgba(255, 255, 255, .97);
	box-shadow: 0 28px 80px rgba(13, 30, 49, .30);
	color: var(--portal-heading);
	text-align: center;
	animation: portal-loading-in .22s ease both;
}
.portal-loading-card .portal-loading-spinner {
	width: 45px;
	height: 45px;
	margin-bottom: 17px;
	border-width: 4px;
	color: var(--portal-primary);
}
.portal-loading-card strong { font-size: 21px; line-height: 1.25; }
.portal-loading-card p { margin: 7px 0 0; color: var(--portal-muted); font-size: 14px; }
body.portal-interface-blocked { overflow: hidden; }
@keyframes portal-loading-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

.portal-verification {
	display: grid;
	place-items: center;
	min-height: min(650px, calc(100vh - 280px));
}
.portal-verification-card {
	position: relative;
	overflow: hidden;
	width: min(100%, 620px);
	padding: 45px 48px 36px;
	border: 1px solid rgba(172, 204, 229, .72);
	border-radius: 30px;
	background:
		radial-gradient(circle at 100% 0, rgba(66, 206, 229, .18), transparent 17rem),
		radial-gradient(circle at 0 100%, rgba(198, 231, 22, .10), transparent 14rem),
		linear-gradient(145deg, #ffffff, #fbfdff);
	box-shadow: 0 30px 85px rgba(31, 66, 102, .14);
	text-align: center;
}
.portal-verification-card::before {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--portal-cyan), var(--portal-primary), var(--portal-lime));
	content: "";
}
.portal-verification-mark {
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	margin: 0 auto 18px;
	border: 1px solid rgba(36, 107, 253, .16);
	border-radius: 25px;
	background: linear-gradient(145deg, #e8f7ff, #edf3ff);
	box-shadow: 0 15px 34px rgba(36, 107, 253, .13);
	color: var(--portal-primary);
	font-size: 36px;
}
.portal-verification-card h1 {
	margin: 8px 0 11px;
	color: var(--portal-heading);
	font-size: clamp(30px, 5vw, 43px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.035em;
}
.portal-verification-intro {
	max-width: 490px;
	margin: 0 auto;
	color: var(--portal-muted);
	font-size: 16px;
	line-height: 1.65;
}
.portal-verification-destination {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	max-width: 100%;
	margin: 24px auto 4px;
	padding: 10px 14px;
	border: 1px solid #dbe8f3;
	border-radius: 14px;
	background: rgba(244, 249, 253, .92);
	color: #34516c;
	text-align: left;
}
.portal-verification-destination > .portal-icon { flex: 0 0 auto; color: #2385bd; font-size: 22px; }
.portal-verification-destination small,
.portal-verification-destination strong { display: block; overflow-wrap: anywhere; line-height: 1.28; }
.portal-verification-destination small { color: var(--portal-muted); font-size: 10px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.portal-verification-destination strong { margin-top: 2px; font-size: 13px; }
.portal-verification-actions { justify-content: center; margin-top: 24px; }
.portal-verification-primary { min-width: 230px; min-height: 54px; font-size: 16px; }
.portal-otp-sent {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 22px 0 18px;
	padding: 13px 15px;
	border: 1px solid #b9e8d1;
	border-radius: 14px;
	background: linear-gradient(135deg, #eaf9f2, #f0fbff);
	color: #116d49;
	text-align: left;
}
.portal-otp-sent > .portal-icon { flex: 0 0 auto; font-size: 23px; }
.portal-otp-sent strong,
.portal-otp-sent span { display: block; }
.portal-otp-sent strong { font-size: 14px; }
.portal-otp-sent span { margin-top: 2px; font-size: 12px; }
.portal-otp-sent.is-locked {
	border-color: #f1cf91;
	background: #fff8e9;
	color: #805515;
}
.portal-otp-sent.is-expired {
	border-color: #d8dee8;
	background: #f4f6f9;
	color: #536273;
}
.portal-otp-field { max-width: 360px; margin: 0 auto; text-align: left; }
.portal-otp-field label { display: block; margin-bottom: 8px; color: var(--portal-heading); font-size: 13px; font-weight: 800; }
.portal-otp-input {
	height: 62px;
	font-size: 26px !important;
	font-weight: 800;
	letter-spacing: .30em;
	text-align: center;
}
.portal-otp-field .portal-input-shell > .portal-otp-input { padding-right: 24px; padding-left: 49px; }
.portal-otp-error {
	max-width: 430px;
	margin: 10px auto 0;
	padding: 11px 13px;
	border: 1px solid #ffc9cf;
	border-radius: 12px;
	background: #fff0f2;
	color: #992c3a;
	font-size: 13px;
	font-weight: 750;
	line-height: 1.45;
}
.portal-verification-remember { max-width: 430px; margin: 15px auto 0; text-align: left; }
.portal-verification-remember .portal-check-label { position: relative; min-height: 50px; padding: 11px 13px; font-size: 12px; }
.portal-verification-remember input[type="checkbox"] {
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	cursor: pointer;
	pointer-events: auto;
}
.portal-otp-resend-form { margin: 13px 0 0; }
.portal-otp-resend {
	appearance: none;
	padding: 7px 10px;
	border: 0;
	background: transparent;
	color: var(--portal-primary);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 800;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.portal-otp-resend:hover { color: var(--portal-primary-dark); }
.portal-otp-resend:disabled { color: #8999aa; cursor: wait; text-decoration: none; }
.portal-verification-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: 25px;
	color: var(--portal-muted);
	font-size: 12px;
}
.portal-verification-note .portal-icon { color: #4286c2; font-size: 16px; }
.portal-verification-more {
	max-width: 490px;
	margin: 14px auto 0;
	border-top: 1px solid var(--portal-line);
	color: var(--portal-muted);
	text-align: left;
}
.portal-verification-more > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 14px 8px 4px;
	color: #526b83;
	cursor: pointer;
	font-size: 12px;
	font-weight: 800;
	list-style: none;
}
.portal-verification-more > summary::-webkit-details-marker { display: none; }
.portal-verification-more[open] .portal-details-chevron { transform: rotate(180deg); }
.portal-verification-more > div { padding: 10px 7px 0; font-size: 12px; line-height: 1.58; }
.portal-verification-more p { margin: 0 0 8px; }
.portal-verification [hidden] { display: none !important; }

.portal-footer { padding: 0 0 34px; color: var(--portal-muted); font-size: 12px; }
.portal-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 22px;
	border-top: 1px solid rgba(203, 215, 229, .8);
}
.portal-footer-brand, .portal-footer-links, .portal-footer-links a { display: flex; align-items: center; }
.portal-footer-brand { gap: 8px; }
.portal-footer-brand .portal-icon { color: var(--portal-success); }
.portal-footer-links { flex-wrap: wrap; justify-content: flex-end; gap: 8px 18px; }
.portal-footer-links a { gap: 6px; color: #52677e; font-weight: 650; text-decoration: none; }
.portal-footer-links a:hover { color: var(--portal-primary); }

@media (max-width: 900px) {
	.portal-order-badge { min-width: 0; }
	.portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.portal-access-item > summary { grid-template-columns: minmax(0, 1fr) auto; }
	.portal-access-status { grid-column: 1; padding-left: 54px; }
	.portal-access-summary-action { grid-column: 2; grid-row: 1 / span 2; }
	.portal-access-body-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1000px) {
	.portal-topbar-inner-context .portal-security-label span { display: none; }
}

@media (max-width: 760px) {
	.portal-topbar-inner-context {
		display: grid;
		grid-template-columns: 84px minmax(0, 1fr) 84px;
		gap: 8px 12px;
		padding: 8px 0 10px;
	}
	.portal-topbar-inner-context .portal-brand-area {
		grid-column: 2;
		grid-row: 1;
		justify-self: center;
	}
	.portal-topbar-inner-context > .portal-security-tools { grid-column: 3; grid-row: 1; justify-self: end; }
	.portal-topbar-inner-context > .portal-order-badge-header {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: center;
		width: fit-content;
		max-width: 100%;
	}
}

@media (max-width: 680px) {
	body::before { background-size: cover, cover, cover, 1200px auto; }
	.portal-shell { width: min(100% - 24px, 1160px); }
	.portal-topbar-inner { min-height: 76px; gap: 12px; }
	.portal-brand img { width: 188px; max-width: 58vw; }
	.portal-topbar-inner-context { min-height: 86px; }
	.portal-topbar-inner-context .portal-brand-area { display: grid; gap: 3px; justify-items: center; }
	.portal-topbar-inner-context .portal-brand img { width: 172px; max-width: 58vw; }
	.portal-topbar-inner-context .portal-header-context {
		display: block;
		min-height: 0;
		padding: 0;
		font-size: 12px;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
	}
	.portal-topbar-inner-context .portal-header-context::before { display: none; }
	.portal-topbar-inner-context .portal-header-context span,
	.portal-topbar-inner-context .portal-header-context strong { display: inline; }
	.portal-topbar-inner-context .portal-header-context strong { margin: 0 0 0 2px; font-size: 12px; }
	.portal-security-label { padding: 9px; }
	.portal-topbar-inner-context > .portal-security-tools .portal-security-label {
		padding: 4px;
		border: 0;
		background: transparent;
	}
	.portal-topbar-inner-context > .portal-security-tools .portal-security-label > .portal-icon { font-size: 32px; }
	.portal-topbar-inner-context .portal-security-settings { width: 40px; height: 40px; box-shadow: none; }
	.portal-security-label span { display: none; }
	.portal-main { padding: 34px 0 52px; }
	.portal-page-intro { margin-bottom: 22px; padding-top: 10px; }
	.portal-page-intro h1, .portal-hero h1 { font-size: clamp(29px, 9vw, 40px); }
	.portal-intro-title-row h1 { font-size: clamp(28px, 8vw, 35px); }
	.portal-page-intro p, .portal-hero p { font-size: 15px; }
	.portal-guide-launch { margin: 0; }
	.portal-page-intro .portal-guide-launch { transform: translateY(-5px); }
	.portal-btn-guide { width: fit-content; max-width: 100%; }
	.portal-overview { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 17px; }
	.portal-overview-icon { width: 42px; height: 42px; }
	.portal-card, .portal-form-card { padding: 20px; border-radius: 20px; }
	.portal-grid-two { grid-template-columns: 1fr; }
	.portal-form-card { padding: 0; border-radius: 0; }
	.portal-product-card { padding: 0; }
	.portal-product-head { display: block; padding: 12px 20px 19px 10px; }
	.portal-product-head::after { left: 0; right: 0; }
	.portal-product-title-row { align-items: center; gap: 11px; margin-top: -3px; }
	.portal-product-heading-icon { width: 44px; height: 44px; border-radius: 13px; }
	.portal-product-heading-icon .portal-icon { width: 20px; height: 20px; }
	.portal-product-label { margin-bottom: 1px; margin-left: 44px; }
	.portal-product-status { margin-top: 14px; }
	.portal-product-head-actions { width: 100%; min-width: 0; }
	.portal-product-head-actions .portal-product-status { justify-self: start; }
	.portal-product-toggle { width: 100%; }
	.portal-product-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
	.portal-product-quick-actions form,
	.portal-product-quick-actions .portal-quick-action { width: 100%; }
	.portal-product-quick-actions .portal-quick-action { padding: 9px 8px; white-space: normal; }
	.portal-device-overlay { padding: 12px; }
	.portal-device-dialog { max-height: 94vh; border-radius: 21px; }
	.portal-device-dialog-head { gap: 12px; padding: 20px 16px 16px; }
	.portal-device-title-row { align-items: flex-start; }
	.portal-device-title-row h2 { font-size: 22px; }
	.portal-device-dialog-title > p { font-size: 12px; }
	.portal-device-dialog-body { padding: 14px; }
	.portal-device-row { grid-template-columns: minmax(0, 1fr); }
	.portal-device-details > summary { align-items: flex-start; }
	.portal-device-name strong { white-space: normal; overflow-wrap: anywhere; }
	.portal-device-side { gap: 6px; }
	.portal-device-badge { font-size: 8px; }
	.portal-device-meta { display: grid; gap: 5px; padding: 10px 13px 12px; }
	.portal-device-remove-form { justify-content: flex-end; padding: 7px 9px; border-top: 1px solid #e3eaf2; border-left: 0; }
	.portal-completion-info { grid-template-columns: 44px minmax(0, 1fr); gap: 13px; padding: 16px 14px 16px 12px; }
	.portal-completion-info-title { font-size: 18px; }
	.portal-completion-info p { font-size: 16px; }
	.portal-completion-info-icon { width: 44px; height: 44px; border-radius: 13px; }
	.portal-completion-info-action { white-space: normal; }
	.portal-mail-search { padding: 14px; }
	.portal-copy-field { grid-template-columns: minmax(0, 1fr); }
	.portal-copy-field > span { padding: 8px; text-align: center; }
	.portal-copy-button { width: 100%; }
	.portal-stats { gap: 9px; padding: 14px 20px; }
	.portal-stat { min-height: 82px; padding: 12px 14px; }
	.portal-stat strong { font-size: 26px; }
	.portal-stat-icon { right: 10px; width: 30px; height: 30px; }
	.portal-product-details > summary { min-height: 61px; padding: 13px 20px; }
	.portal-product-history > summary { align-items: center; }
	.portal-history-summary-side .portal-section-count { display: none; }
	.portal-history-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.portal-history-filter { width: 100%; }
	.portal-product-content { padding: 20px; }
	.portal-actions .portal-btn, .portal-actions form { width: 100%; }
	.portal-actions form .portal-btn { width: 100%; }
	.portal-section-heading { display: block; }
	.portal-section-count { display: block; margin-top: 5px; }
	.portal-access-item > summary { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 14px; }
	.portal-access-person strong { white-space: normal; overflow-wrap: anywhere; }
	.portal-access-status { padding-left: 0; }
	.portal-access-status .portal-badge { max-width: 100%; }
	.portal-access-summary-action span { display: none; }
	.portal-access-body { padding: 0 14px 16px; }
	.portal-access-actions { display: grid; grid-template-columns: 1fr; }
	.portal-access-actions form, .portal-access-actions .portal-btn { width: 100%; }
	.portal-form-section-head { grid-template-columns: 38px minmax(0, 1fr); }
	.portal-form-section-icon { width: 38px; height: 38px; }
	.portal-form-section { padding: 0 14px 16px; border-radius: 17px; }
	.portal-form-section-head { margin: 0 -14px 18px; padding: 15px 14px; border-radius: 16px 16px 0 0; }
	.portal-document-version { display: none; }
	.portal-document-summary { display: grid; grid-template-columns: 1fr; gap: 13px; padding: 14px; }
	.portal-document-summary .portal-btn { width: 100%; }
	.portal-document-overlay { padding: 12px; }
	.portal-document-dialog { max-height: 94vh; border-radius: 21px; }
	.portal-document-dialog-head { padding: 21px 17px 16px; }
	.portal-document-dialog-head .portal-document-version { display: inline-flex; }
	.portal-document-dialog .portal-document-content { padding: 20px 17px; }
	.portal-document-dialog-actions { padding: 13px 17px; }
	.portal-document-dialog-actions .portal-btn { width: 100%; }
	.portal-toast-region { right: 12px; top: 12px; width: calc(100vw - 24px); }
	.portal-toast { padding: 12px; gap: 9px; }
	.portal-toast-icon { width: 35px; height: 35px; }
	.portal-guide-overlay { padding: 12px; }
	.portal-guide-card { max-height: 94vh; padding: 28px 18px 18px; border-radius: 21px; }
	.portal-guide-steps { margin: 20px 0; }
	.portal-guide-steps li { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 11px 12px 11px 16px; }
	.portal-guide-step-icon { width: 39px; height: 39px; border-radius: 12px; }
	.portal-confirm-overlay { padding: 14px; }
	.portal-confirm-card { padding: 29px 20px 21px; border-radius: 21px; }
	.portal-confirm-actions { grid-template-columns: 1fr; }
	.portal-confirm-actions .portal-btn { width: 100%; }
	.portal-loading-card { padding: 27px 21px; border-radius: 20px; }
	.portal-verification { min-height: 0; }
	.portal-verification-card { padding: 35px 19px 27px; border-radius: 23px; }
	.portal-verification-mark { width: 65px; height: 65px; border-radius: 21px; font-size: 31px; }
	.portal-verification-intro { font-size: 14px; }
	.portal-verification-primary { width: 100%; min-width: 0; }
	.portal-otp-input { font-size: 23px !important; letter-spacing: .24em; }
	.portal-footer-inner { display: block; text-align: center; }
	.portal-footer-brand { justify-content: center; }
	.portal-footer-links { justify-content: center; margin-top: 14px; }
}

@media (max-width: 400px) {
	.portal-stats { grid-template-columns: 1fr; }
	.portal-stat { min-height: 76px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}