:root {
	--access-bg: #061020;
	--access-surface: rgba(10, 20, 38, 0.74);
	--access-surface-2: rgba(20, 43, 75, 0.68);
	--access-surface-3: rgba(29, 61, 96, 0.62);
	--access-line: rgba(170, 219, 255, 0.18);
	--access-line-strong: rgba(186, 226, 255, 0.32);
	--access-text: #f2f8ff;
	--access-muted: #a8bdd5;
	--access-soft: #d3e5f6;
	--access-accent: #7dd3fc;
	--access-accent-strong: #b7e6ff;
	--access-green: #83e6c7;
	--access-red: #ff8e9b;
	--access-warning: #ffd58a;
	--access-shadow: 0 24px 80px rgba(0, 8, 25, 0.42);
	--access-radius: 8px;
	--access-radius-sm: 6px;
	--access-font: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
	--access-glass: linear-gradient(145deg, rgba(10, 26, 52, 0.74), rgba(8, 17, 34, 0.46));
}

* {
	box-sizing: border-box;
}

[hidden] {
	display: none !important;
}

html {
	scroll-behavior: smooth;
}

body.access-page {
	position: relative;
	margin: 0;
	min-width: 320px;
	min-height: 100vh;
	background:
		linear-gradient(180deg, rgba(3, 9, 22, 0.35), rgba(3, 8, 18, 0.96) 760px),
		linear-gradient(90deg, rgba(3, 8, 18, 0.78), rgba(3, 8, 18, 0.22) 48%, rgba(3, 8, 18, 0.78)),
		radial-gradient(circle at 76% 20%, rgba(95, 180, 255, 0.18), transparent 28vw),
		radial-gradient(circle at 18% 10%, rgba(125, 211, 252, 0.14), transparent 24vw),
		url("/assets/images/mail-login-wallpaper.jpg?v=20260507-01") center top / cover fixed,
		linear-gradient(180deg, rgba(8, 22, 46, 0.82), rgba(3, 8, 18, 0.98) 760px),
		var(--access-bg);
	color: var(--access-text);
	font-family: var(--access-font);
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: 0;
}

body.access-page::before,
body.access-page::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
}

body.access-page::before {
	z-index: 0;
	background:
		radial-gradient(circle at 74% 24%, rgba(226, 248, 255, 0.22), transparent 12vw),
		radial-gradient(circle at 78% 72%, rgba(40, 110, 190, 0.16), transparent 20vw);
	filter: saturate(1.18);
}

body.access-page::after {
	z-index: 0;
	opacity: 0.58;
	background:
		radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.72) 0 1px, transparent 1.5px),
		radial-gradient(circle at 28% 66%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.4px),
		radial-gradient(circle at 54% 12%, rgba(255, 255, 255, 0.42) 0 1px, transparent 1.5px),
		radial-gradient(circle at 90% 58%, rgba(255, 255, 255, 0.46) 0 1px, transparent 1.4px);
	background-size: 220px 180px, 260px 220px, 310px 260px, 360px 300px;
}

body.access-page button,
body.access-page input,
body.access-page select {
	font: inherit;
	letter-spacing: 0;
}

body.access-page a {
	color: inherit;
	text-decoration: none;
}

.access-shell {
	width: min(100% - 32px, 1360px);
	margin: 0 auto;
}

.access-topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--access-line);
	background: rgba(5, 13, 28, 0.76);
	backdrop-filter: blur(18px) saturate(1.2);
}

.access-topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
}

.access-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	color: var(--access-text);
	white-space: nowrap;
}

.access-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--access-line-strong);
	border-radius: var(--access-radius-sm);
	color: var(--access-accent-strong);
	background: rgba(125, 211, 252, 0.12);
}

.access-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	flex-wrap: wrap;
}

.access-nav a {
	padding: 8px 10px;
	border-radius: var(--access-radius-sm);
	color: var(--access-muted);
	font-size: 14px;
}

.access-nav a:hover {
	color: var(--access-text);
	background: rgba(255, 255, 255, 0.06);
}

.access-main {
	position: relative;
	z-index: 1;
	padding-bottom: 56px;
}

.access-hero {
	padding: 58px 0 28px;
}

.access-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
	gap: 32px;
	align-items: end;
}

.access-kicker,
.access-panel-label {
	margin: 0 0 8px;
	color: var(--access-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.access-hero h1,
.access-section h2 {
	margin: 0;
	color: var(--access-text);
	letter-spacing: 0;
}

.access-hero h1 {
	font-size: clamp(42px, 6vw, 76px);
	line-height: 0.98;
}

.access-lead {
	max-width: 720px;
	margin: 22px 0 0;
	color: var(--access-soft);
	font-size: 18px;
}

.access-hero-actions,
.access-toolbar,
.access-admin-actions,
.access-table-actions,
.access-modal-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.access-hero-actions {
	margin-top: 28px;
}

.access-button,
.access-icon-button,
.access-mini-button,
.access-login-tab,
.access-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: var(--access-radius-sm);
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.access-button {
	min-height: 40px;
	padding: 0 14px;
	font-weight: 700;
	color: var(--access-text);
	background: var(--access-surface-2);
	border-color: var(--access-line);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.access-button:hover,
.access-icon-button:hover,
.access-mini-button:hover,
.access-login-tab:hover,
.access-tab:hover {
	transform: translateY(-1px);
	border-color: var(--access-line-strong);
}

.access-button:disabled,
.access-mini-button:disabled {
	cursor: not-allowed;
	opacity: 0.52;
	transform: none;
}

.access-button-primary {
	color: #04111f;
	background: linear-gradient(135deg, #c5efff, #65caff);
	border-color: rgba(194, 238, 255, 0.74);
}

.access-button-secondary {
	color: var(--access-text);
	background: rgba(73, 162, 255, 0.18);
	border-color: rgba(125, 211, 252, 0.34);
}

.access-button-ghost {
	background: rgba(255, 255, 255, 0.055);
}

.access-icon-button,
.access-mini-button {
	min-height: 32px;
	padding: 0 10px;
	color: var(--access-text);
	background: rgba(255, 255, 255, 0.065);
	border-color: var(--access-line);
	font-size: 13px;
	font-weight: 700;
}

.access-danger {
	color: #ffe7e7;
	border-color: rgba(255, 137, 137, 0.38);
	background: rgba(255, 137, 137, 0.11);
}

.access-endpoint-strip {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 14px;
	align-items: center;
	padding: 20px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius);
	background: var(--access-glass);
	box-shadow: var(--access-shadow);
	backdrop-filter: blur(18px) saturate(1.15);
}

.access-endpoint-strip code,
.access-code,
.access-secret-box code {
	font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
}

.access-endpoint-strip code {
	display: block;
	margin-top: 4px;
	color: var(--access-text);
	font-size: clamp(18px, 2vw, 24px);
	word-break: break-all;
}

.access-endpoint-meta {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.access-endpoint-meta span {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 9px;
	border: 1px solid var(--access-line);
	border-radius: 999px;
	color: var(--access-soft);
	background: rgba(255, 255, 255, 0.035);
	font-size: 13px;
}

.access-quick-guide {
	border-top: 1px solid hsl(214 72% 42% / 0.12);
	border-bottom: 1px solid hsl(214 72% 42% / 0.12);
	background: linear-gradient(180deg, hsl(0 0% 100% / 0.86), hsl(214 100% 99% / 0.78));
	backdrop-filter: none;
}

.access-quick-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
}

.access-step {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 2px;
	padding: 18px 20px;
	border-left: 1px solid hsl(214 72% 42% / 0.12);
	background: linear-gradient(180deg, hsl(0 0% 100% / 0.96), hsl(214 100% 99% / 0.92));
}

.access-step:last-child {
	border-right: 1px solid hsl(214 72% 42% / 0.12);
}

.access-step span {
	grid-row: span 2;
	color: var(--access-accent);
	font-weight: 800;
}

.access-step strong {
	color: var(--access-text);
}

.access-step p {
	margin: 0;
	color: var(--access-muted);
	font-size: 14px;
}

.access-section {
	padding: 46px 0 0;
}

.access-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 28px;
	margin-bottom: 18px;
}

.access-section-head h2 {
	font-size: clamp(28px, 4vw, 44px);
}

.access-section-head p {
	max-width: 620px;
	margin: 0;
	color: var(--access-muted);
}

.access-workspace,
.access-guide-layout,
.access-admin-shell {
	display: block;
}

.access-entry-panel,
.access-self-workspace,
.access-login-panel,
.access-admin-workspace,
.access-guide-panel,
.access-glass-panel {
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius);
	background: var(--access-glass);
	box-shadow: var(--access-shadow);
	backdrop-filter: blur(18px) saturate(1.16);
}

.access-entry-panel {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
	gap: 24px;
	align-items: center;
	padding: 20px;
}

.access-entry-copy h3,
.access-workspace-header h3,
.access-login-head h3,
.access-admin-header h3,
.access-guide-panel h3 {
	margin: 0;
	color: var(--access-text);
	font-size: 22px;
}

.access-entry-copy p,
.access-login-head p,
.access-help-text {
	margin: 8px 0 0;
	color: var(--access-muted);
}

.access-inline-code {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius-sm);
	color: var(--access-text);
	background: rgba(1, 8, 20, 0.38);
	font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
	font-size: 0.92em;
	overflow-wrap: anywhere;
}

.access-form {
	display: grid;
	gap: 10px;
}

.access-form label,
.access-modal-panel label {
	color: var(--access-soft);
	font-size: 14px;
	font-weight: 700;
}

.access-inline-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
}

.access-form input,
.access-modal-panel input,
.access-filter-bar input,
.access-filter-bar select,
.access-form select,
.access-modal-panel select {
	width: 100%;
	min-height: 40px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius-sm);
	padding: 0 12px;
	color: var(--access-text);
	background: rgba(2, 9, 22, 0.42);
	outline: none;
}

.access-filter-bar select option,
.access-form select option,
.access-modal-panel select option {
	color: var(--access-text);
	background: #102a48;
}

.access-form input:focus,
.access-modal-panel input:focus,
.access-filter-bar input:focus,
.access-filter-bar select:focus,
.access-form select:focus,
.access-modal-panel select:focus {
	border-color: rgba(125, 211, 252, 0.72);
	box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.15);
}

.access-glass-select {
	position: relative;
	min-width: 0;
}

.access-filter-bar select.access-native-select {
	position: absolute;
	inset: 0;
	width: 1px;
	height: 1px;
	min-height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.access-glass-select-button {
	position: relative;
	width: 100%;
	min-height: 40px;
	padding: 0 42px 0 14px;
	overflow: hidden;
	border: 1px solid rgba(169, 224, 255, 0.36);
	border-radius: var(--access-radius-sm);
	color: var(--access-text);
	background:
		linear-gradient(145deg, rgba(75, 151, 218, 0.28), rgba(12, 32, 62, 0.6)),
		rgba(9, 26, 54, 0.48);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 28px rgba(2, 12, 28, 0.2);
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	backdrop-filter: blur(16px) saturate(1.18);
}

.access-glass-select-button::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 15px;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	opacity: 0.92;
	transform: translateY(-64%) rotate(45deg);
	transition: transform 0.16s ease;
}

.access-glass-select-button:focus-visible,
.access-glass-select.is-open .access-glass-select-button {
	border-color: rgba(144, 220, 255, 0.78);
	box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.access-glass-select.is-open .access-glass-select-button::after {
	transform: translateY(-36%) rotate(225deg);
}

.access-glass-select-menu {
	position: absolute;
	z-index: 90;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	display: none;
	max-height: min(300px, 52vh);
	padding: 6px;
	overflow: auto;
	border: 1px solid rgba(176, 228, 255, 0.38);
	border-radius: 10px;
	background:
		linear-gradient(145deg, rgba(93, 166, 224, 0.34), rgba(18, 48, 88, 0.74)),
		rgba(14, 39, 76, 0.72);
	box-shadow: 0 22px 48px rgba(2, 10, 26, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.13);
	backdrop-filter: blur(20px) saturate(1.18);
}

.access-glass-select.is-open .access-glass-select-menu {
	display: grid;
	gap: 2px;
}

.access-glass-select-option {
	width: 100%;
	min-height: 36px;
	padding: 6px 12px;
	overflow: hidden;
	border: 0;
	border-radius: 7px;
	color: var(--access-text);
	background: transparent;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.access-glass-select-option:hover,
.access-glass-select-option:focus-visible {
	background: rgba(151, 215, 255, 0.2);
	outline: none;
}

.access-glass-select-option[aria-selected="true"] {
	background: linear-gradient(135deg, rgba(92, 177, 255, 0.56), rgba(48, 116, 196, 0.46));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.access-status {
	min-height: 22px;
	margin: 8px 0 0;
	color: var(--access-muted);
	font-size: 14px;
}

.access-status[data-tone="success"] {
	color: var(--access-green);
}

.access-status[data-tone="error"],
.access-help-text[data-tone="warning"] {
	color: var(--access-warning);
}

.access-help-text[data-tone="danger"] {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 100%;
	padding: 9px 11px;
	border: 1px solid rgba(255, 142, 155, 0.34);
	border-radius: var(--access-radius-sm);
	color: #ffd7dc;
	background: rgba(255, 65, 91, 0.12);
	box-shadow: inset 3px 0 0 rgba(255, 142, 155, 0.78);
}

.access-help-text[data-tone="danger"]::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border-radius: 999px;
	color: #26050a;
	background: var(--access-red);
	font-size: 12px;
	font-weight: 900;
	line-height: 1;
}

.access-self-workspace,
.access-admin-workspace {
	padding: 18px;
}

.access-workspace-header,
.access-admin-header,
.access-admin-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.access-summary-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 16px;
}

.access-admin-summary {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.access-summary-item {
	min-width: 0;
	padding: 12px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius-sm);
	background: rgba(4, 16, 35, 0.42);
}

.access-summary-item span {
	display: block;
	color: var(--access-muted);
	font-size: 12px;
	font-weight: 700;
}

.access-summary-item strong {
	display: block;
	margin-top: 4px;
	color: var(--access-text);
	font-size: 20px;
	overflow-wrap: anywhere;
}

.access-summary-url {
	grid-column: span 1;
}

.access-table-wrap {
	margin-top: 14px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius);
	overflow: hidden;
	background: rgba(2, 9, 22, 0.3);
	backdrop-filter: blur(12px);
}

.access-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

.access-table th,
.access-table td {
	padding: 12px 12px;
	border-bottom: 1px solid var(--access-line);
	text-align: left;
	vertical-align: middle;
}

.access-table th {
	color: var(--access-muted);
	background: rgba(150, 210, 255, 0.075);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.access-table td {
	color: var(--access-soft);
	font-size: 14px;
}

.access-table tbody tr:hover {
	background: rgba(125, 211, 252, 0.055);
}

.access-table tbody tr:last-child td {
	border-bottom: 0;
}

.access-title-stack {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.access-title-stack strong {
	color: var(--access-text);
	font-weight: 750;
	overflow-wrap: anywhere;
}

.access-title-stack span {
	color: var(--access-muted);
	font-size: 12px;
	overflow-wrap: anywhere;
}

.access-table-actions {
	justify-content: flex-start;
	gap: 6px;
}

.access-status-pill {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 9px;
	border-radius: 999px;
	border: 1px solid var(--access-line);
	color: var(--access-soft);
	background: rgba(255, 255, 255, 0.04);
	font-size: 12px;
	font-weight: 800;
	white-space: nowrap;
}

.access-status-pill[data-tone="active"] {
	color: #dff8ea;
	border-color: rgba(132, 217, 186, 0.34);
	background: rgba(132, 217, 186, 0.12);
}

.access-status-pill[data-tone="warning"] {
	color: #ffe6b0;
	border-color: rgba(255, 210, 122, 0.34);
	background: rgba(255, 210, 122, 0.12);
}

.access-status-pill[data-tone="muted"] {
	color: #cac0b3;
	background: rgba(255, 255, 255, 0.035);
}

.access-empty-state {
	margin: 0;
	min-height: 104px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: var(--access-muted);
	text-align: center;
}

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

.access-guide-panel {
	padding: 16px;
}

.access-guide-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.access-guide-wide {
	grid-column: 1 / -1;
}

.access-code {
	display: block;
	margin: 12px 0 0;
	padding: 14px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius-sm);
	overflow-x: auto;
	color: #e8f7ff;
	background: rgba(1, 8, 20, 0.42);
	font-size: 13px;
	line-height: 1.6;
	white-space: pre;
}

.access-login-panel {
	max-width: 760px;
	margin: 0 auto;
	padding: 18px;
}

.access-login-tabs,
.access-tabs {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius);
	background: rgba(2, 9, 22, 0.38);
}

.access-login-tabs {
	margin: 14px 0;
}

.access-login-tab,
.access-tab {
	min-height: 34px;
	padding: 0 12px;
	color: var(--access-muted);
	background: transparent;
	font-weight: 800;
}

.access-login-tab.is-active,
.access-tab.is-active {
	color: #04111f;
	background: var(--access-accent-strong);
}

.access-admin-workspace {
	width: 100%;
}

.access-admin-shell {
	width: min(100% - 32px, 1560px);
}

.access-current-user {
	color: var(--access-muted);
	font-size: 14px;
}

.access-current-user strong {
	color: var(--access-text);
}

.access-admin-bar {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--access-line);
}

.access-admin-panel {
	margin-top: 12px;
}

.access-filter-bar {
	position: relative;
	z-index: 6;
	display: grid;
	grid-template-columns: minmax(240px, 1fr) 180px 220px;
	gap: 10px;
	align-items: center;
	margin-bottom: 10px;
}

.access-admin-panel[data-admin-panel="invites"] .access-filter-bar {
	grid-template-columns: minmax(240px, 1fr) 180px;
}

.access-modal {
	width: min(100% - 28px, 560px);
	padding: 0;
	border: 0;
	border-radius: var(--access-radius);
	color: var(--access-text);
	background: transparent;
}

.access-modal::backdrop {
	background: rgba(0, 0, 0, 0.64);
	backdrop-filter: blur(4px);
}

.access-modal-panel {
	display: grid;
	gap: 12px;
	padding: 18px;
	border: 1px solid var(--access-line-strong);
	border-radius: var(--access-radius);
	background: var(--access-glass);
	box-shadow: var(--access-shadow);
	backdrop-filter: blur(18px) saturate(1.16);
}

.access-modal-head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 16px;
}

.access-modal-head h3 {
	margin: 0;
	font-size: 22px;
}

.access-close {
	width: 34px;
	height: 34px;
	border: 1px solid var(--access-line);
	border-radius: 50%;
	color: var(--access-text);
	background: rgba(255, 255, 255, 0.05);
	cursor: pointer;
}

.access-check-row {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--access-soft);
	font-weight: 700;
}

.access-check-row input {
	width: auto;
	min-height: auto;
}

.access-secret-box {
	max-height: 220px;
	overflow: auto;
	padding: 14px;
	border: 1px solid var(--access-line);
	border-radius: var(--access-radius-sm);
	background: rgba(1, 8, 20, 0.42);
}

.access-secret-box code {
	color: #e8f7ff;
	overflow-wrap: anywhere;
}

.access-toast {
	position: fixed;
	right: 18px;
	top: max(18px, env(safe-area-inset-top));
	z-index: 60;
	max-width: min(360px, calc(100% - 36px));
	padding: 12px 14px;
	border: 1px solid var(--access-line-strong);
	border-radius: var(--access-radius);
	color: var(--access-text);
	background: rgba(8, 22, 44, 0.9);
	box-shadow: var(--access-shadow);
	backdrop-filter: blur(16px) saturate(1.14);
}

.access-toast[data-type="error"] {
	color: #ffe5e5;
	border-color: rgba(255, 137, 137, 0.38);
}

@media (max-width: 1120px) {
	.access-hero-inner,
	.access-entry-panel {
		grid-template-columns: 1fr;
	}

	.access-summary-grid,
	.access-admin-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.access-admin-header,
	.access-admin-bar,
	.access-workspace-header {
		align-items: flex-start;
		flex-direction: column;
	}

	.access-filter-bar,
	.access-admin-panel[data-admin-panel="invites"] .access-filter-bar {
		grid-template-columns: 1fr 180px;
	}
}

@media (max-width: 760px) {
	.access-shell {
		width: min(100% - 22px, 1360px);
	}

	.access-topbar-inner,
	.access-section-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
	}

	.access-nav {
		justify-content: flex-start;
	}

	.access-hero {
		padding-top: 38px;
	}

	.access-lead {
		font-size: 16px;
	}

	.access-endpoint-strip,
	.access-inline-row,
	.access-filter-bar,
	.access-admin-panel[data-admin-panel="invites"] .access-filter-bar {
		grid-template-columns: 1fr;
	}

	.access-quick-grid,
	.access-guide-grid,
	.access-summary-grid,
	.access-admin-summary {
		grid-template-columns: 1fr;
	}

	.access-step,
	.access-step:last-child {
		border-left: 0;
		border-right: 0;
		border-bottom: 1px solid var(--access-line);
	}

	.access-table {
		border-collapse: separate;
		border-spacing: 0;
	}

	.access-table thead {
		display: none;
	}

	.access-table,
	.access-table tbody,
	.access-table tr,
	.access-table td {
		display: block;
		width: 100%;
	}

	.access-table tr {
		padding: 10px 0;
		border-bottom: 1px solid var(--access-line);
	}

	.access-table tr:last-child {
		border-bottom: 0;
	}

	.access-table td {
		display: grid;
		grid-template-columns: minmax(92px, 34%) minmax(0, 1fr);
		gap: 10px;
		padding: 8px 12px;
		border-bottom: 0;
	}

	.access-table td::before {
		content: attr(data-label);
		color: var(--access-muted);
		font-size: 12px;
		font-weight: 800;
	}

	.access-table-actions {
		align-items: flex-start;
	}
}

@media (max-width: 520px) {
	.access-brand {
		flex-wrap: wrap;
	}

	.access-hero h1 {
		font-size: 38px;
	}

	.access-button,
	.access-icon-button {
		width: 100%;
	}

	.access-hero-actions,
	.access-toolbar,
	.access-admin-actions,
	.access-modal-actions {
		width: 100%;
	}

	.access-mini-button {
		flex: 1 1 auto;
	}

	.access-table td {
		grid-template-columns: 1fr;
	}
}

/* Forge redesign system, 2026-06-01 */
body.access-page{--access-bg:hsl(220 22% 96%);--access-surface:hsl(0 0% 100%/.84);--access-surface-2:hsl(220 18% 94%/.92);--access-surface-3:hsl(220 18% 90%/.86);--access-line:hsl(220 15% 83%/.88);--access-line-strong:hsl(220 16% 66%/.72);--access-text:hsl(222 28% 12%);--access-muted:hsl(220 10% 46%);--access-soft:hsl(220 13% 31%);--access-accent:hsl(206 72% 38%);--access-accent-strong:hsl(206 75% 30%);--access-green:hsl(158 52% 36%);--access-red:hsl(0 68% 50%);--access-warning:hsl(38 88% 46%);--access-shadow:0 24px 70px hsl(222 28% 12%/.1);--access-radius:24px;--access-radius-sm:14px;--access-font:"Forge Display","Satoshi","Geist","Microsoft YaHei",system-ui,sans-serif;background:radial-gradient(circle at 12% 8%,hsl(206 72% 38%/.12),transparent 28vw),radial-gradient(circle at 85% 12%,hsl(158 45% 38%/.1),transparent 25vw),linear-gradient(135deg,hsl(42 42% 96%),hsl(214 34% 97%) 58%,hsl(42 44% 95%));color:var(--access-text);letter-spacing:-.01em}body.access-page::before{background:linear-gradient(90deg,hsl(220 16% 62%/.09) 1px,transparent 1px),linear-gradient(180deg,hsl(220 16% 62%/.08) 1px,transparent 1px);background-size:48px 48px;filter:none}body.access-page::after{display:none}.access-shell{width:min(100% - 40px,1420px)}.access-topbar{border-bottom:1px solid hsl(0 0% 100%/.78);background:hsl(42 40% 98%/.76);box-shadow:0 16px 44px hsl(222 28% 12%/.08)}.access-brand,.access-hero h1,.access-section h2,.access-login-head h3,.access-workspace-header h3,.access-admin-header h3,.access-entry-copy h3,.access-modal-head h3{letter-spacing:-.04em}.access-brand-mark{border-radius:999px;background:var(--access-accent);border-color:var(--access-accent);color:#fff}.access-nav a:hover{background:hsl(206 72% 38%/.1);color:var(--access-accent)}.access-hero{padding:72px 0 34px}.access-hero-inner{grid-template-columns:minmax(0,1fr) minmax(360px,.78fr);align-items:stretch}.access-kicker,.access-panel-label{font-family:ForgeMono,ui-monospace,monospace;letter-spacing:.12em;color:var(--access-accent)}.access-hero h1{font-size:clamp(46px,7.2vw,92px);line-height:.9}.access-lead{color:var(--access-soft);line-height:1.72}.access-endpoint-strip,.access-step,.access-entry-panel,.access-self-workspace,.access-login-panel,.access-admin-workspace,.access-guide-panel,.access-summary-item,.access-table-wrap,.access-modal-panel{border:1px solid var(--access-line);border-radius:var(--access-radius);background:var(--access-surface);box-shadow:var(--access-shadow);backdrop-filter:blur(18px) saturate(1.1)}.access-endpoint-strip{align-self:end;background:linear-gradient(145deg,hsl(222 28% 12%/.96),hsl(206 42% 20%/.92));color:#fff}.access-endpoint-strip code,.access-code,.access-secret-box code,.access-table code,.access-summary-item strong{font-family:ForgeMono,ui-monospace,monospace;font-variant-numeric:tabular-nums}.access-step,.access-summary-item{box-shadow:none}.access-button,.access-icon-button,.access-mini-button,.access-login-tab,.access-tab{border-radius:999px}.access-button{min-height:42px;padding:0 16px;background:hsl(0 0% 100%/.72);border-color:var(--access-line);color:var(--access-text);box-shadow:none}.access-button-primary{background:var(--access-text);border-color:var(--access-text);color:hsl(42 42% 96%)}.access-button-secondary,.access-button-primary:hover{background:var(--access-accent);border-color:var(--access-accent);color:#fff}.access-button-ghost:hover,.access-icon-button:hover,.access-mini-button:hover{background:hsl(206 72% 38%/.1);color:var(--access-accent)}.access-inline-row input,.access-form input,.access-form select,.access-filter-bar input,.access-filter-bar select,.access-modal-panel input{border-radius:16px;border-color:var(--access-line);background:hsl(0 0% 100%/.78);color:var(--access-text)}.access-table{border-collapse:separate;border-spacing:0}.access-table thead th{position:sticky;top:0;background:hsl(220 18% 94%/.98);color:var(--access-muted);font-family:ForgeMono,ui-monospace,monospace;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase}.access-table tbody tr:hover{background:hsl(206 72% 38%/.06)}.access-empty-state{color:var(--access-muted)}.access-modal::backdrop{background:hsl(222 28% 12%/.42);backdrop-filter:blur(8px)}@media(max-width:900px){.access-hero-inner{grid-template-columns:1fr}.access-shell{width:min(100% - 28px,1420px)}}


/* Access page readability hardening, 2026-06-01 */
body.access-page .access-login-head p,
body.access-page .access-entry-copy p,
body.access-page .access-help-text,
body.access-page .access-status,
body.access-page .access-current-user,
body.access-page .access-empty-state,
body.access-page .access-step p,
body.access-page .access-section-head p,
body.access-page .access-title-stack span,
body.access-page .access-table td {
	color: hsl(220 16% 26%) !important;
}

body.access-page .access-login-head h3,
body.access-page .access-entry-copy h3,
body.access-page .access-admin-header h3,
body.access-page .access-workspace-header h3,
body.access-page .access-guide-panel h3,
body.access-page .access-modal-head h3,
body.access-page .access-summary-item strong,
body.access-page .access-current-user strong,
body.access-page .access-title-stack strong,
body.access-page .access-hero h1,
body.access-page .access-section h2 {
	color: hsl(222 28% 12%) !important;
}

body.access-page .access-login-panel,
body.access-page .access-entry-panel,
body.access-page .access-self-workspace,
body.access-page .access-admin-workspace,
body.access-page .access-guide-panel,
body.access-page .access-summary-item,
body.access-page .access-table-wrap,
body.access-page .access-modal-panel {
	background: rgba(255,255,255,0.97) !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
}

body.access-page .access-form label,
body.access-page .access-modal-panel label {
	color: hsl(220 16% 24%) !important;
	font-weight: 760 !important;
}

body.access-page .access-form input,
body.access-page .access-form select,
body.access-page .access-filter-bar input,
body.access-page .access-filter-bar select,
body.access-page .access-modal-panel input,
body.access-page .access-modal-panel select {
	background: rgba(255,255,255,0.98) !important;
	color: hsl(222 28% 12%) !important;
	border-color: hsl(220 18% 78%) !important;
}

body.access-page .access-form input::placeholder,
body.access-page .access-filter-bar input::placeholder,
body.access-page .access-modal-panel input::placeholder {
	color: hsl(220 10% 46%) !important;
	opacity: 1 !important;
}

body.access-page .access-login-tab,
body.access-page .access-tab {
	color: hsl(220 16% 24%) !important;
	font-weight: 800 !important;
}

body.access-page .access-login-tab.is-active,
body.access-page .access-tab.is-active,
body.access-page .access-login-tab[aria-selected="true"],
body.access-page .access-tab[aria-selected="true"] {
	background: hsl(222 28% 12%) !important;
	color: #fff !important;
}

body.access-page .access-button,
body.access-page .access-mini-button,
body.access-page .access-icon-button {
	color: hsl(222 28% 12%) !important;
}

body.access-page .access-button-primary {
	color: #fff !important;
	background: hsl(222 28% 12%) !important;
	border-color: hsl(222 28% 12%) !important;
}

body.access-page .access-button-primary:hover,
body.access-page .access-button-primary:active {
	color: #fff !important;
	background: hsl(212 82% 42%) !important;
	border-color: hsl(212 82% 42%) !important;
}

body.access-page .access-button-secondary,
body.access-page .access-button-ghost,
body.access-page .access-mini-button,
body.access-page .access-icon-button {
	background: rgba(255,255,255,0.96) !important;
	border-color: hsl(220 18% 82%) !important;
}

body.access-page .access-button:disabled,
body.access-page .access-mini-button:disabled,
body.access-page .access-icon-button:disabled {
	background: hsl(220 18% 95%) !important;
	color: hsl(220 10% 48%) !important;
	opacity: 1 !important;
}

body.access-page .access-status[data-tone="success"] {
	color: hsl(158 58% 28%) !important;
}

body.access-page .access-status[data-tone="error"] {
	color: hsl(0 68% 38%) !important;
}

body.access-page .access-help-text[data-tone="warning"] {
	color: hsl(32 88% 30%) !important;
}

body.access-page .access-help-text[data-tone="danger"] {
	background: hsl(0 75% 98%) !important;
	color: hsl(0 58% 32%) !important;
	border-color: hsl(0 68% 84%) !important;
}

/* Access contrast fixes, 2026-06-01 */
body.access-page .access-login-panel .access-kicker,
body.access-page .access-admin-workspace .access-kicker,
body.access-page .access-help-text[data-tone="warning"] {
	color: hsl(32 88% 30%) !important;
}

body.access-page .access-status:not(:empty) {
	padding: 10px 12px !important;
	border: 1px solid hsl(220 18% 86%) !important;
	border-radius: 16px !important;
	background: hsl(0 0% 100% / 0.96) !important;
	font-weight: 700 !important;
}

body.access-page .access-status[data-tone="success"] {
	color: hsl(158 58% 28%) !important;
	background: hsl(146 48% 93%) !important;
	border-color: hsl(148 34% 76%) !important;
}

body.access-page .access-status[data-tone="error"] {
	color: hsl(0 68% 38%) !important;
	background: hsl(10 70% 95%) !important;
	border-color: hsl(10 54% 82%) !important;
}

body.access-page .access-status-pill {
	border-color: hsl(220 18% 82%) !important;
	background: hsl(220 24% 96%) !important;
	color: hsl(220 18% 24%) !important;
	font-weight: 800 !important;
}

body.access-page .access-status-pill[data-tone="active"] {
	background: hsl(146 48% 92%) !important;
	border-color: hsl(148 34% 74%) !important;
	color: hsl(152 56% 24%) !important;
}

body.access-page .access-status-pill[data-tone="warning"] {
	background: hsl(42 92% 92%) !important;
	border-color: hsl(38 74% 72%) !important;
	color: hsl(30 82% 24%) !important;
}

body.access-page .access-status-pill[data-tone="muted"] {
	background: hsl(220 20% 94%) !important;
	border-color: hsl(220 16% 82%) !important;
	color: hsl(220 14% 36%) !important;
}

body.access-page .access-table thead th,
body.access-page .access-filter-bar select,
body.access-page .access-filter-bar input,
body.access-page .access-modal-panel input,
body.access-page .access-modal-panel select,
body.access-page .access-check-row,
body.access-page .access-secret-box,
body.access-page .access-secret-box code,
body.access-page .access-toast {
	color: hsl(222 28% 12%) !important;
}

body.access-page .access-table thead th {
	color: hsl(220 14% 30%) !important;
}

body.access-page .access-filter-bar input::placeholder,
body.access-page .access-modal-panel input::placeholder {
	color: hsl(220 10% 44%) !important;
	opacity: 1 !important;
}

body.access-page .access-check-row input {
	accent-color: hsl(206 72% 38%) !important;
}

body.access-page .access-secret-box {
	background: hsl(220 24% 97%) !important;
	border-color: hsl(220 18% 84%) !important;
}

body.access-page .access-toast {
	background: rgba(255, 255, 255, 0.98) !important;
	border-color: hsl(220 18% 82%) !important;
	box-shadow: 0 18px 36px hsl(222 28% 12% / 0.12) !important;
}

body.access-page .access-toast[data-type="error"] {
	background: hsl(10 70% 96%) !important;
	border-color: hsl(10 54% 82%) !important;
	color: hsl(0 62% 34%) !important;
}